/* =========================================================
   ICON5 · componentes compartidos · botones y formularios
   Derivado de MINI_BRAND_GUIDELINE_I5_ICON5.

   Orden de carga:  base → components → (landing | app)
   ========================================================= */

/* ---------- Botones · CTA en MAYÚSCULAS (manual §07) ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  font:inherit;font-weight:600;font-size:11.5px;letter-spacing:var(--tr-item);text-transform:uppercase;
  cursor:pointer;border:1px solid transparent;padding:18px 34px;border-radius:0;
  transition:background .22s ease,color .22s ease,border-color .22s ease;white-space:nowrap;
}
.btn-dark,.btn-accent{background:var(--wine);color:#fff}
.btn-dark:hover,.btn-accent:hover{background:var(--wine-lift)}.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{background:var(--soft)}
.btn-light{background:transparent;color:#fff;border-color:var(--line-dark-2)}
.btn-light:hover{background:rgba(255,255,255,.08);border-color:#fff}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn-block{width:100%}
.btn svg{width:14px;height:14px;flex:none}

/* ---------- Formularios (compartido) ---------- */
.field{margin-bottom:22px}
.field label{display:block;font-size:9.5px;font-weight:600;letter-spacing:var(--tr-label);
  text-transform:uppercase;margin-bottom:10px;color:var(--ink-2)}
.req{color:var(--wine)}
.input{width:100%;border:1px solid var(--line);border-radius:var(--radius-sm);padding:14px 15px;
  font:inherit;font-size:15px;background:#fff;color:var(--ink);transition:.14s}
.input:focus{outline:none;border-color:var(--wine);box-shadow:0 0 0 3px var(--wine-soft)}
/* Safari en iOS AMPLÍA la página al enfocar un campo cuyo texto mide menos de
   16 px, y al salir NO la devuelve: el formulario se queda descolocado y hay
   que pellizcar para recuperarlo. Los 16 px son el mínimo que evita ese zoom,
   no una preferencia de diseño; por eso la condición es el puntero táctil y no
   un ancho de pantalla. Afecta a todos los formularios del sitio, que es donde
   está el problema. */
@media (pointer: coarse){
  .input{font-size:16px}
}
.hp{position:absolute;left:-9999px;opacity:0;height:0;width:0}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.iti{width:100%;display:block}
.iti input,.iti input[type="tel"]{width:100%}
.iti__country-list{z-index:80;max-width:calc(100vw - 40px)}

.alert{padding:13px 15px;border-radius:var(--radius-sm);font-size:14px;margin-bottom:16px;display:none}
.alert.show{display:block}
.alert-error{background:#FDF0EE;color:var(--danger);border:1px solid #F5CFCA}
.alert-ok{background:#EAF5EE;color:var(--ok);border:1px solid #C3E3CE}
.success-box{padding:10px 0}
.success-ic{width:52px;height:52px;border-radius:50%;background:#EAF5EE;color:var(--ok);
  display:grid;place-items:center;margin-bottom:18px}
.success-ic svg{width:26px;height:26px}
.success-box h3{font-family:var(--display);font-weight:600;text-transform:uppercase;
  letter-spacing:.06em;font-size:22px}.features{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}@media(max-width:560px){
  .btn{width:100%}
}

/* ---------- Barra de navegación (compartida) ----------
   Vive aquí y no en landing.css porque reservar.php y las páginas de cuenta
   también la usan; al separar las hojas se había quedado sólo en la portada
   y esas páginas salían con el encabezado sin estilo. */
.nav{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.94);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);transition:background .35s ease,border-color .35s ease}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:78px;gap:20px}
/* flex:none es obligatorio. Sin él la marca es el único ítem que puede
   encogerse (los botones son nowrap) y absorbe toda la contracción: en
   reservar.php a 390px el logo llegaba a computar 0px de ancho, invisible, y
   en las páginas de cuenta salía aplastado un 26% (40.5px donde tocaban 54.8). */
.brand{display:flex;align-items:center;flex:none}
.brand-logo{flex:none;height:42px;width:auto;display:block}
@media(max-width:880px){
  .nav-inner{height:64px}
  .brand-logo{height:36px}
  /* Los botones de la barra son nowrap y sumaban 350px irreducibles en un
     contenedor de 302px: la página entera se desplazaba 25px en horizontal.
     Aquí ceden ellos, que es lo que puede ceder sin romper nada. */
  .nav-inner .btn{padding:11px 14px;font-size:9.5px;letter-spacing:.1em}
  .nav-inner{gap:12px}
}