/* ==========================================================================
   Rental Rosarito 2026 — Componentes
   Botones, gorros, cabecera, menú, cabeza de página, marquesina, tarjetas,
   FAQ, formulario, pie y botones flotantes.
   ========================================================================== */

/* ---------------------------------------------------------------- botones */
.btn {
  --btn-fondo: var(--oro-boton);
  --btn-texto: #fff;
  --btn-borde: transparent;
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 48px;
  padding: .8em 1.5em;
  font-family: var(--f-ui);
  font-size: var(--t-sm); font-weight: 700; letter-spacing: .01em;
  line-height: 1.1; text-decoration: none; text-align: center;
  color: var(--btn-texto);
  background: var(--btn-fondo);
  border: 1.5px solid var(--btn-borde);
  border-radius: var(--r-full);
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: transform .35s var(--curva), box-shadow .35s var(--curva), background-color .25s, color .25s, border-color .25s;
}
.btn svg { width: 1.15em; height: 1.15em; flex: none; transition: transform .35s var(--curva); }
.btn:hover svg { transform: translateX(4px); }
/* Relleno que sube desde abajo al pasar el puntero */
.btn::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--btn-hover, var(--carbon));
  border-radius: inherit;
  transform: translateY(101%);
  transition: transform .45s var(--curva);
}
.btn:hover::after { transform: none; }
.btn--oro:hover { color: #fff; box-shadow: var(--sombra-oro); }
/* Sobre superficies oscuras el botón dorado se aclara: bronce oscuro sobre espresso se perdía */
.hero .btn--oro, .cabeza .btn--oro, .llamada .btn--oro, .tono-oscuro .btn--oro, .tono-grafito .btn--oro, .menu-movil .btn--oro, .lateral__caja .btn--oro { --btn-fondo: var(--oro-claro); --btn-texto: var(--carbon); --btn-hover: #fff; }
.hero .btn--oro:hover, .cabeza .btn--oro:hover, .llamada .btn--oro:hover, .tono-oscuro .btn--oro:hover, .tono-grafito .btn--oro:hover, .menu-movil .btn--oro:hover, .lateral__caja .btn--oro:hover { color: var(--carbon); }
/* Dentro de una caja blanca (formularios sobre fondo oscuro) vuelve al bronce */
.caja-form .btn--oro { --btn-fondo: var(--oro-boton); --btn-texto: #fff; --btn-hover: var(--carbon); }
.caja-form .btn--oro:hover { color: #fff; }
.cabecera .btn--oro { --btn-fondo: var(--oro-claro); --btn-texto: var(--carbon); --btn-hover: #fff; }
.cabecera .btn--oro:hover { color: var(--carbon); }
.btn--oscuro { --btn-fondo: var(--grafito); --btn-texto: #fff; --btn-hover: var(--oro-boton); }
.btn--oscuro:hover { color: #fff; }
.btn--blanco { --btn-fondo: #fff; --btn-texto: var(--carbon); }
.btn--blanco:hover { color: #fff; }
.btn--fantasma { --btn-fondo: transparent; --btn-texto: currentColor; --btn-borde: currentColor; --btn-hover: var(--tinta); }
.btn--fantasma:hover { color: #fff; --btn-borde: var(--tinta); }
.tono-oscuro .btn--fantasma, .tono-grafito .btn--fantasma, .hero .btn--fantasma, .cabeza .btn--fantasma, .llamada .btn--fantasma, .menu-movil .btn--fantasma {
  --btn-texto: #fff; --btn-borde: rgba(255,255,255,.5); --btn-hover: #fff;
}
.tono-oscuro .btn--fantasma:hover, .tono-grafito .btn--fantasma:hover, .hero .btn--fantasma:hover, .cabeza .btn--fantasma:hover, .llamada .btn--fantasma:hover, .menu-movil .btn--fantasma:hover { color: var(--carbon); --btn-borde: #fff; }
.btn--texto { --btn-fondo: transparent; --btn-texto: var(--tinta); padding-inline: .4em; min-height: 44px; }
.btn--texto::after { display: none; }
.btn--texto:hover { color: var(--oro-hondo); }
.btn--grande { min-height: 56px; font-size: var(--t-base); padding: .95em 1.85em; }
.btn--bloque { width: 100%; }
.btn[disabled] { opacity: .6; pointer-events: none; }
.botones-fila { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.botones-fila--centro { justify-content: center; }

.enlace-flecha {
  display: inline-flex; align-items: center; gap: .5em;
  font-family: var(--f-ui); font-weight: 700; font-size: var(--t-sm);
  color: var(--oro-hondo); text-decoration: none;
}
.tono-oscuro .enlace-flecha, .tono-grafito .enlace-flecha { color: var(--oro-luz); }
.enlace-flecha svg { width: 1.1em; transition: transform .35s var(--curva); }
.enlace-flecha:hover svg, a:hover .enlace-flecha svg { transform: translateX(5px); }
.enlace-mini { display: inline-flex; align-items: center; gap: .3em; font-family: var(--f-ui); font-size: var(--t-xs); font-weight: 600; color: var(--texto-c2); text-decoration: none; }
.enlace-mini svg { width: 14px; height: 14px; }
.enlace-mini:hover { color: var(--oro-hondo); }

/* ---------------------------------------------------------------- gorro y encabezados */
.gorro {
  display: inline-flex; align-items: center; gap: .75em;
  font-family: var(--f-ui);
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--oro-hondo);
  margin-bottom: 1.1rem;
}
/* El techo del logotipo como viñeta */
.gorro::before {
  content: ''; width: 26px; height: 13px; flex: none;
  background: currentColor;
  -webkit-mask: var(--techo) center / contain no-repeat; mask: var(--techo) center / contain no-repeat;
}
.tono-oscuro .gorro, .tono-grafito .gorro, .cabeza .gorro, .llamada .gorro { color: var(--oro-luz); }

.encabezado { max-width: 54rem; margin-bottom: clamp(2.5rem, 2rem + 2vw, 4rem); }
.encabezado--centro { margin-inline: auto; text-align: center; }
.encabezado--centro .gorro { justify-content: center; }
.encabezado--fila { max-width: none; display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.encabezado--fila > div:first-child { max-width: 46rem; }
.encabezado p { font-size: var(--t-md); color: var(--texto-c2); margin: 0; }
.tono-oscuro .encabezado p, .tono-grafito .encabezado p { color: var(--texto-o2); }

h1 em, h2 em, .titular em {
  font-style: italic; font-weight: 400;
  color: var(--oro-hondo);
}
.tono-oscuro h1 em, .tono-oscuro h2 em, .tono-grafito h2 em, .cabeza h1 em, .hero em, .llamada h2 em { color: var(--oro-luz); }

/* ---------------------------------------------------------------- cabecera */
.cabecera {
  position: fixed; inset: 0 0 auto; z-index: 100;
  height: var(--cabecera-alto);
  color: #fff;
  transition: background-color .4s var(--curva), box-shadow .4s, height .4s var(--curva), transform .45s var(--curva);
}
.cabecera::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to bottom, rgba(26,22,17,.7), rgba(26,22,17,0));
  transition: opacity .4s;
}
.cabecera.esta-fija {
  --cabecera-alto: 72px;
  background: rgba(26, 22, 17, .9);
  box-shadow: 0 1px 0 var(--linea-o);
}
/* backdrop-filter en la cabecera crea un bloque contenedor para los
   descendientes fijos: se aplica a un pseudo, no a la cabecera. */
.cabecera.esta-fija::after {
  content: ''; position: absolute; inset: 0; z-index: -2;
  -webkit-backdrop-filter: saturate(1.3) blur(14px); backdrop-filter: saturate(1.3) blur(14px);
}
.cabecera.esta-fija::before { opacity: 0; }
.cabecera.esta-oculta { transform: translateY(-100%); }
.cabecera__fila { height: var(--cabecera-alto); display: flex; align-items: center; gap: 1.5rem; transition: height .4s var(--curva); }
.cabecera__marca { display: block; flex: none; }
/* logotipo dorado apaisado (900×283): necesita más alto para que el nombre se lea */
.cabecera__marca img { width: auto; height: 62px; transition: height .4s var(--curva); }
.cabecera.esta-fija .cabecera__marca img { height: 52px; }

.nav { display: flex; align-items: center; gap: .1rem; margin-inline: auto; }
.nav__enlace {
  position: relative;
  display: inline-flex; align-items: center; gap: .3em;
  padding: .6rem .8rem;
  font-family: var(--f-ui); font-weight: 600; font-size: .9rem;
  color: rgba(255,255,255,.86); text-decoration: none;
  transition: color .25s;
  white-space: nowrap;
}
.nav__enlace svg { width: 14px; height: 14px; transition: transform .3s var(--curva); }
.nav__enlace::after {
  content: ''; position: absolute; left: .8rem; right: .8rem; bottom: .3rem; height: 2px;
  background: var(--oro-claro);
  transform: scaleX(0); transform-origin: right;
  transition: transform .4s var(--curva);
}
.nav__enlace:hover, .nav__enlace[aria-current="page"] { color: #fff; }
.nav__enlace:hover::after, .nav__enlace[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }

.nav__grupo { position: relative; }
.nav__grupo:hover .nav__enlace svg, .nav__grupo:focus-within .nav__enlace svg { transform: rotate(180deg); }
.nav__sub {
  position: absolute; top: calc(100% + .4rem); left: 50%;
  min-width: 290px;
  list-style: none; margin: 0; padding: .55rem;
  background: rgba(36, 30, 24, .98);
  border: 1px solid var(--linea-o);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra);
  opacity: 0; visibility: hidden;
  transform: translate(-50%, 10px);
  transition: opacity .3s var(--curva), transform .3s var(--curva), visibility 0s .3s;
}
.nav__sub::before { content: ''; position: absolute; left: 0; right: 0; top: -.6rem; height: .6rem; }
.nav__grupo:hover .nav__sub, .nav__grupo:focus-within .nav__sub { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
.nav__sub a {
  display: flex; align-items: center; gap: .8rem;
  padding: .7rem .8rem;
  color: #fff; text-decoration: none; font-size: .93rem; font-weight: 500;
  border-radius: var(--r-md);
  transition: background-color .2s;
}
.nav__sub a svg { width: 22px; height: 22px; color: var(--oro-luz); flex: none; }
.nav__sub a:hover { background: rgba(255,255,255,.07); }

.cabecera__acciones { display: flex; align-items: center; gap: 1rem; flex: none; }
.cabecera__tel {
  display: inline-flex; align-items: center; gap: .5em;
  font-family: var(--f-ui); font-weight: 600; font-size: .88rem;
  color: #fff; text-decoration: none; white-space: nowrap;
}
.cabecera__tel svg { width: 20px; height: 20px; color: var(--oro-luz); }
.cabecera .btn { min-height: 44px; }

.hamburguesa {
  display: none;
  position: relative; z-index: 120;
  width: 46px; height: 46px; padding: 0;
  background: rgba(255,255,255,.08); border: 1px solid var(--linea-o); border-radius: 50%;
  cursor: pointer;
  /* flex en columna, NO grid: con grid la X queda en dos diagonales sueltas */
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.hamburguesa span { display: block; width: 20px; height: 2px; background: #fff; border-radius: 2px; transition: transform .35s var(--curva), opacity .2s; }
.hamburguesa[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburguesa[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburguesa[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.menu-movil {
  position: fixed; inset: 0; z-index: 110;
  display: flex; flex-direction: column;
  padding: calc(var(--cabecera-alto) + 1.5rem) clamp(1.25rem, 5vw, 3rem) 2rem;
  background: var(--carbon); color: #fff;
  overflow-y: auto;
  clip-path: circle(0% at calc(100% - 3rem) 2.8rem);
  visibility: hidden;
  transition: clip-path .7s var(--curva), visibility 0s .7s;
}
.menu-movil.esta-abierto { clip-path: circle(150% at calc(100% - 3rem) 2.8rem); visibility: visible; transition-delay: 0s; }
.menu-movil ul { list-style: none; margin: 0; padding: 0; }
.menu-movil > ul > li { border-bottom: 1px solid var(--linea-o); }
.menu-movil > ul > li > a { display: block; padding: .8rem 0; font-family: var(--f-display); font-weight: 500; font-size: clamp(1.6rem, 6vw, 2.3rem); color: #fff; text-decoration: none; }
.menu-movil ul ul { padding-bottom: .8rem; }
.menu-movil ul ul a { display: block; padding: .4rem 0 .4rem 1rem; color: var(--texto-o2); text-decoration: none; border-left: 2px solid var(--oro-claro); }
.menu-movil__pie { margin-top: auto; padding-top: 2rem; display: grid; gap: .75rem; }
body.menu-abierto { overflow: hidden; }
/* La cabecera fija crea su propio contexto de apilado: con el menú abierto
   sube por encima del panel para que la X no quede tapada. */
body.menu-abierto .cabecera { z-index: 130; background: transparent; box-shadow: none; }
body.menu-abierto .cabecera::after { display: none; }
body.menu-abierto .cabecera .btn, body.menu-abierto .cabecera__tel { visibility: hidden; }

@media (max-width: 1320px) { .cabecera__tel { display: none; } }
@media (max-width: 1140px) {
  .nav { display: none; }
  .hamburguesa { display: inline-flex; }
  .cabecera__acciones { margin-left: auto; }
}
@media (max-width: 520px) {
  .cabecera .btn { display: none; }
  .cabecera__marca img { height: 46px; }
}

/* ---------------------------------------------------------------- cabeza de página interior */
.cabeza {
  position: relative;
  min-height: clamp(28rem, 64vh, 42rem);
  display: flex; align-items: flex-end;
  padding: calc(var(--cabecera-alto) + 3rem) 0 clamp(3.5rem, 2.5rem + 4vw, 6rem);
  background: var(--carbon); color: #fff;
  overflow: clip;
  isolation: isolate;
}
.cabeza--corta { min-height: clamp(22rem, 46vh, 30rem); }
.cabeza__foto { position: absolute; inset: -8% 0; z-index: -3; }
.cabeza__foto img { width: 100%; height: 100%; max-width: none; object-fit: cover; transform: translateY(var(--parallax, 0px)) scale(1.06); }
.cabeza::before {
  content: ''; position: absolute; inset: 0; z-index: -2;
  background:
    linear-gradient(100deg, rgba(26,22,17,.94) 0%, rgba(26,22,17,.8) 40%, rgba(26,22,17,.35) 75%, rgba(26,22,17,.25) 100%),
    linear-gradient(to top, rgba(26,22,17,.9), transparent 50%);
}
.cabeza__olas {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: -1; width: 100%; height: clamp(90px, 14vw, 200px);
  pointer-events: none; overflow: visible;
}
.cabeza__olas path, .hero__olas path, .llamada__olas path {
  fill: none; stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-linecap: round;
}
.cabeza__olas path { stroke: rgba(210, 168, 101, .55); }
.cabeza__olas path + path { stroke: rgba(255,255,255,.18); }
.cabeza__olas path + path + path { stroke: rgba(255,255,255,.1); }
/* Las mareas se «dibujan» recortando de izquierda a derecha: stroke-dasharray
   no es fiable con vector-effect: non-scaling-stroke. */
.cabeza__olas, .hero__olas { clip-path: inset(0 100% 0 0); animation: marea-dibuja 2.2s var(--curva) .3s forwards; }
@keyframes marea-dibuja { to { clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: reduce) { .cabeza__olas, .hero__olas { animation: none; clip-path: none; } }
.cabeza__cuerpo { position: relative; max-width: 56rem; }
.cabeza h1 { font-size: clamp(2.4rem, 1.35rem + 3.4vw, 4.6rem); margin-bottom: 1.4rem; }
.cabeza__entrada { font-size: var(--t-md); color: #E6DDD3; max-width: 44rem; margin-bottom: 2rem; }
.cabeza__botones { display: flex; flex-wrap: wrap; gap: .75rem; }
.cabeza__meta { display: flex; flex-wrap: wrap; gap: 1.5rem; color: var(--texto-o2); font-size: var(--t-sm); }
.cabeza__meta span { display: inline-flex; align-items: center; gap: .45em; }
.cabeza__meta svg { width: 17px; height: 17px; color: var(--oro-luz); }

.migas { margin-bottom: 1.5rem; }
.migas ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem .6rem; font-size: var(--t-sm); }
.migas li { display: inline-flex; align-items: center; gap: .6rem; color: var(--texto-o2); }
.migas li + li::before { content: '/'; color: rgba(255,255,255,.35); }
.migas a { color: var(--texto-o2); text-decoration: none; }
.migas a:hover { color: #fff; }
.migas [aria-current] { color: #fff; }

/* ---------------------------------------------------------------- marquesina */
.marquesina {
  position: relative; overflow: clip;
  padding-block: clamp(1rem, .7rem + 1.2vw, 1.7rem);
  background: var(--oro-boton); color: #fff;
}
.marquesina__pista { display: flex; width: max-content; animation: marquesina 42s linear infinite; }
.marquesina:hover .marquesina__pista { animation-play-state: paused; }
.marquesina__grupo { display: flex; align-items: center; flex: none; }
.marquesina__item {
  display: inline-flex; align-items: center; gap: clamp(1rem, .6rem + 1.5vw, 2.4rem);
  padding-right: clamp(1rem, .6rem + 1.5vw, 2.4rem);
  font-family: var(--f-display); font-weight: 500; font-style: italic;
  font-size: clamp(1.6rem, 1rem + 2.4vw, 3.3rem); line-height: 1.1; letter-spacing: -.015em;
  white-space: nowrap;
}
.marquesina__item:nth-child(even) { font-style: normal; font-family: var(--f-ui); font-weight: 700; text-transform: uppercase; font-size: clamp(1.1rem, .8rem + 1.5vw, 2.1rem); letter-spacing: .06em; }
.marquesina__item svg { width: .9em; height: .9em; stroke-width: 1.5; }
@keyframes marquesina { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquesina__pista { animation: none; } }

/* ---------------------------------------------------------------- rejillas */
.rejilla { display: grid; gap: clamp(1rem, .6rem + 1.5vw, 1.75rem); }
.rejilla--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 30rem), 1fr)); }
.rejilla--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rejilla--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .rejilla--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1000px) { .rejilla--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .rejilla--3, .rejilla--4 { grid-template-columns: minmax(0, 1fr); } }

/* ---------------------------------------------------------------- tarjeta con icono */
.tarjeta {
  position: relative;
  padding: clamp(1.5rem, 1.1rem + 1.2vw, 2.2rem);
  background: var(--blanco);
  border: 1px solid var(--linea-c);
  border-radius: var(--r-lg);
  transition: transform .45s var(--curva), box-shadow .45s var(--curva), border-color .3s;
}
.tarjeta:hover { transform: translateY(-5px); box-shadow: 0 22px 50px -26px rgba(26,22,17,.3); border-color: transparent; }
.tarjeta h3 { font-size: var(--t-md); margin-bottom: .5rem; }
.tarjeta p { color: var(--texto-c2); margin: 0; font-size: .98rem; }
.tarjeta__icono { display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: 1rem; border-radius: 50%; background: var(--oro-suave); color: var(--oro-hondo); }
.tarjeta__icono svg { width: 26px; height: 26px; }
.tono-oscuro .tarjeta, .tono-grafito .tarjeta { background: var(--piedra); border-color: var(--linea-o); color: #fff; }
.tono-oscuro .tarjeta p, .tono-grafito .tarjeta p { color: var(--texto-o2); }

/* ---------------------------------------------------------------- listas y chips */
.lista-check { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: .6rem; }
.lista-check li { position: relative; padding-left: 2rem; }
.lista-check li::before {
  content: ''; position: absolute; left: 0; top: .3em; width: 1.2rem; height: 1.2rem; border-radius: 50%;
  background: var(--oro-boton) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23FFFFFF' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 10.5l3.2 3.2L15 7'/%3E%3C/svg%3E") center / 78% no-repeat;
}
.lista-check--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem 1.25rem; font-size: .95rem; }
@media (max-width: 600px) { .lista-check--2 { grid-template-columns: minmax(0, 1fr); } }

.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.chip {
  display: inline-flex; align-items: center; gap: .4em;
  padding: .4em .95em;
  font-family: var(--f-ui); font-size: var(--t-xs); font-weight: 600;
  border-radius: var(--r-full);
  background: var(--oro-suave); color: #5E3F14;
}
.tono-oscuro .chip, .tono-grafito .chip, .cabeza .chip { background: rgba(255,255,255,.1); color: #fff; }

/* ---------------------------------------------------------------- preguntas frecuentes */
.faq { display: grid; gap: .75rem; }
.faq__item { border: 1px solid var(--linea-c); border-radius: var(--r-lg); background: var(--blanco); overflow: hidden; transition: border-color .3s, box-shadow .3s; }
.faq__item.esta-abierto { border-color: var(--oro); box-shadow: 0 16px 40px -28px rgba(158,114,54,.5); }
.faq__boton {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.2rem 1.4rem;
  background: none; border: 0; cursor: pointer; text-align: left;
  font-family: var(--f-display); font-weight: 500; font-size: var(--t-md); line-height: 1.3;
  color: inherit;
}
.faq__mas { position: relative; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--oro-boton); transition: transform .4s var(--curva); }
.faq__mas::before, .faq__mas::after { content: ''; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; background: #fff; transform: translate(-50%, -50%); }
.faq__mas::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform .4s var(--curva); }
.faq__boton[aria-expanded="true"] .faq__mas { transform: rotate(180deg); }
.faq__boton[aria-expanded="true"] .faq__mas::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq__cuerpo { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--curva); }
.faq__item.esta-abierto .faq__cuerpo { grid-template-rows: 1fr; }
.faq__cuerpo > div { overflow: hidden; }
.faq__cuerpo p { padding: 0 1.4rem 1.3rem; margin: 0; color: var(--texto-c2); }
.sin-js .faq__cuerpo { grid-template-rows: 1fr; }

/* ---------------------------------------------------------------- formulario */
.form-rr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.1rem; }
.form-rr .campo--completo, .form-rr > .btn, .form-rr > .aviso-form, .form-rr > .mensaje-form, .form-rr > .form__seccion { grid-column: 1 / -1; }
.form-rr--reserva { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.form-rr--reserva .campo { grid-column: span 2; }
.form-rr--reserva .campo--completo { grid-column: 1 / -1; }
.form-rr--reserva [id$="-adultos"], .form-rr--reserva [id$="-ninos"] { min-width: 0; }
@media (min-width: 900px) {
  .form-rr--reserva .campo:has(#rr-reserva-llegada), .form-rr--reserva .campo:has(#rr-reserva-salida),
  .form-rr--reserva .campo:has(#rr-reserva-adultos), .form-rr--reserva .campo:has(#rr-reserva-ninos) { grid-column: span 1; }
}
@media (max-width: 620px) {
  .form-rr, .form-rr--reserva { grid-template-columns: minmax(0, 1fr); }
  .form-rr--reserva .campo { grid-column: 1 / -1; }
}
.form__seccion {
  display: flex; align-items: center; gap: .8rem; margin: .6rem 0 -.2rem;
  font-family: var(--f-ui); font-size: var(--t-xs); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--oro-hondo);
}
.form__seccion::after { content: ''; flex: 1; height: 1px; background: var(--linea-c); }
.campo { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.campo label { font-family: var(--f-ui); font-size: .84rem; font-weight: 600; }
.campo__req { color: var(--oro-hondo); margin-left: .15em; }
.campo__ayuda { font-size: var(--t-xs); color: var(--texto-c2); margin-top: -.15rem; }
.campo input, .campo select, .campo textarea {
  width: 100%; min-height: 52px;
  padding: .8rem 1rem;
  background: var(--arena);
  border: 1.5px solid transparent;
  border-radius: var(--r-md);
  color: var(--tinta);
  transition: border-color .2s, background-color .2s, box-shadow .2s;
}
.campo select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%235A5249' stroke-width='2'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .9rem center; background-size: 16px; padding-right: 2.5rem; }
.campo textarea { min-height: 130px; resize: vertical; }
.campo input:hover, .campo select:hover, .campo textarea:hover { border-color: var(--linea-c); }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; background-color: #fff; border-color: var(--oro-hondo); box-shadow: 0 0 0 4px rgba(158,114,54,.2); }
.campo.tiene-error input, .campo.tiene-error select, .campo.tiene-error textarea { border-color: #B3141A; background-color: #FFF4F4; }
.campo__error { font-size: var(--t-xs); color: #A3121A; font-weight: 600; }
.campo__error:empty { display: none; }
.campo-trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.aviso-form { font-size: var(--t-xs); color: var(--texto-c2); margin: 0; text-align: center; }
.aviso-form a { color: var(--oro-hondo); }
.mensaje-form { padding: .9rem 1.1rem; border-radius: var(--r-md); font-weight: 600; }
.mensaje-form--ok { background: #E6F4EA; color: #14532D; }
.mensaje-form--mal { background: #FDECEC; color: #8A1116; }

.caja-form {
  position: relative;
  padding: clamp(1.5rem, 1rem + 2vw, 2.75rem);
  background: #fff; color: var(--tinta);
  border-radius: var(--r-xl);
  box-shadow: 0 40px 90px -40px rgba(0,0,0,.55);
}
.caja-form h2, .caja-form h3 { font-size: var(--t-xl); margin-bottom: .5rem; }
.caja-form > p { color: var(--texto-c2); margin-bottom: 1.5rem; }
.caja-form__gorro { display: inline-block; margin-bottom: .6rem; padding: .3em .85em; border-radius: var(--r-full); background: var(--oro-suave); color: #5E3F14; font-family: var(--f-ui); font-size: var(--t-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.caja-form::before {
  content: ''; position: absolute; left: 2.2rem; right: 2.2rem; top: 0; height: 4px; border-radius: 0 0 4px 4px;
  background: linear-gradient(90deg, var(--oro), var(--oro-luz));
}

/* ---------------------------------------------------------------- redes */
.redes { display: flex; gap: .5rem; flex-wrap: wrap; }
.redes a {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid currentColor; color: inherit; opacity: .85;
  transition: background-color .25s, color .25s, border-color .25s, opacity .25s, transform .35s var(--curva);
}
.redes a:hover { opacity: 1; background: var(--oro-claro); border-color: var(--oro-claro); color: var(--carbon); transform: translateY(-3px); }
.redes svg { width: 20px; height: 20px; }

/* ---------------------------------------------------------------- pie */
.pie { position: relative; background: var(--carbon); color: var(--texto-o2); padding-top: clamp(4rem, 3rem + 4vw, 6.5rem); overflow: clip; }
.pie__rejilla { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: clamp(2rem, 1.2rem + 2.5vw, 4rem); }
@media (max-width: 1000px) { .pie__rejilla { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .pie__rejilla { grid-template-columns: minmax(0, 1fr); } }
.pie__marca img { height: 76px; width: auto; margin-bottom: 1.4rem; }
.pie__marca p { font-size: var(--t-sm); max-width: 24rem; }
.pie h2 { font-family: var(--f-ui); font-size: var(--t-xs); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #fff; margin-bottom: 1.4rem; }
.pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.pie a { color: var(--texto-o2); text-decoration: none; transition: color .2s; }
.pie a:hover { color: #fff; }
.pie__dato { display: flex; gap: .7rem; font-size: var(--t-sm); margin-bottom: .9rem; line-height: 1.5; }
.pie__dato svg { width: 18px; height: 18px; flex: none; margin-top: .15rem; color: var(--oro-luz); }
.pie__dato strong { color: #fff; font-weight: 600; display: block; }
.redes--pie { margin-top: 1.4rem; color: #fff; }
.pie__gigante {
  font-family: var(--f-display); font-style: italic; font-weight: 400;
  font-size: clamp(2.2rem, 6.6vw, 7.8rem); line-height: .9; letter-spacing: -.03em;
  color: transparent; -webkit-text-stroke: 1px rgba(210,168,101,.28);
  white-space: nowrap; user-select: none; text-align: center;
  margin: clamp(2.5rem, 1rem + 3vw, 4rem) 0 .2em;
}
.pie__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem; padding-block: 1.5rem; border-top: 1px solid var(--linea-o); font-size: var(--t-xs); }

/* ---------------------------------------------------------------- botones flotantes */
.flotantes {
  position: fixed; right: clamp(1rem, 2vw, 1.75rem); bottom: clamp(1rem, 2vw, 1.75rem); z-index: 90;
  display: flex; align-items: center; gap: .6rem;
  transform: translateY(160%); opacity: 0;
  transition: transform .5s var(--curva), opacity .4s;
}
.flotantes.es-visible { transform: none; opacity: 1; }
.flotante {
  position: relative;
  display: inline-flex; align-items: center; gap: .55rem;
  min-height: 52px; padding: .85rem 1.25rem .85rem 1rem;
  background: var(--oro-boton); color: #fff;
  font-family: var(--f-ui); font-weight: 700; font-size: var(--t-sm);
  text-decoration: none; border-radius: var(--r-full);
  box-shadow: var(--sombra-oro);
  transition: background-color .25s, color .25s, transform .35s var(--curva);
}
.flotante:hover { background: var(--carbon); color: #fff; transform: translateY(-2px); }
.flotante svg { width: 22px; height: 22px; }
.flotante--wa { width: 52px; padding: 0; justify-content: center; background: #1A7F45; color: #fff; box-shadow: 0 16px 40px -16px rgba(26,127,69,.7); }
.flotante--wa::before { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 0 rgba(26,127,69,.5); animation: latido 2.6s infinite; }
.flotante--wa svg { width: 26px; height: 26px; }
@keyframes latido { 70% { box-shadow: 0 0 0 16px rgba(26,127,69,0); } 100% { box-shadow: 0 0 0 0 rgba(26,127,69,0); } }
@media (prefers-reduced-motion: reduce) { .flotante--wa::before { animation: none; } }
.menu-abierto .flotantes { opacity: 0; pointer-events: none; }

/* Barra de administración de WordPress */
.admin-bar .cabecera { top: 32px; }
.admin-bar .menu-movil { padding-top: calc(var(--cabecera-alto) + 32px + 1.5rem); }
@media (max-width: 782px) {
  .admin-bar .cabecera { top: 46px; }
  .admin-bar .menu-movil { padding-top: calc(var(--cabecera-alto) + 46px + 1.5rem); }
}
@media (max-width: 600px) { .admin-bar .cabecera.esta-fija { top: 0; } }