/* ==========================================================================
   Sitio público — mobile first (el tráfico llega de Instagram y WhatsApp)
   ========================================================================== */

/* --- Fondo vivo -----------------------------------------------------------
   Cuatro manchas de color que derivan lentamente. Es lo que hace que el
   cristal de las tarjetas tenga algo que difuminar; sin esto, el efecto no
   se nota. Va fijo y detrás de todo. */
body.pub { background: var(--et-arena); }

body.pub::before {
  content: '';
  position: fixed;
  inset: -25%;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(38% 40% at 18% 22%,
      color-mix(in srgb, var(--et-turquesa) 55%, transparent), transparent 68%),
    radial-gradient(34% 36% at 84% 16%,
      color-mix(in srgb, var(--et-amarillo) 62%, transparent), transparent 68%),
    radial-gradient(42% 44% at 72% 78%,
      color-mix(in srgb, var(--et-coral) 34%, transparent), transparent 70%),
    radial-gradient(36% 40% at 10% 84%,
      color-mix(in srgb, var(--et-turquesa) 42%, transparent), transparent 70%);
  filter: blur(28px);
  animation: et-derivar 30s ease-in-out infinite alternate;
}
@keyframes et-derivar {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(-3%, 2.5%, 0) scale(1.08); }
  100% { transform: translate3d(2.5%, -2%, 0) scale(1.03); }
}

/* Un velo claro encima del degradado, para que el texto siempre se lea. */
body.pub::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--et-arena) 74%, transparent),
    color-mix(in srgb, var(--et-arena) 90%, transparent));
}

/* --- Cabecera -------------------------------------------------------------
   Transparente sobre la portada; al bajar se vuelve cristal. */
.pub-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color var(--et-t-media) var(--et-suave),
              border-color var(--et-t-media) var(--et-suave),
              backdrop-filter var(--et-t-media) var(--et-suave);
}
/* Sobre la portada con foto, el texto va en blanco para que se lea. */
body.pub--conportada.pub--enportada .pub-header:not(.pub-header--fijada) .pub-marca {
  color: var(--et-blanco);
  text-shadow: 0 1px 14px rgba(11, 59, 69, 0.45);
}
body.pub--conportada.pub--enportada .pub-header:not(.pub-header--fijada) .pub-marca small {
  color: rgba(255, 255, 255, 0.85);
}

.pub-header--fijada {
  background: var(--et-vidrio-denso);
  -webkit-backdrop-filter: blur(var(--et-desenfoque)) saturate(1.6);
  backdrop-filter: blur(var(--et-desenfoque)) saturate(1.6);
  border-bottom-color: var(--et-vidrio-borde);
  box-shadow: 0 4px 24px rgba(11, 59, 69, 0.06);
}

.pub-header__interior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--et-3);
  padding-block: var(--et-3);
}
.pub-marca {
  display: flex;
  align-items: center;
  gap: var(--et-2);
  text-decoration: none;
  color: var(--et-marino);
}
.pub-marca__logo {
  display: inline-flex;
  transition: transform var(--et-t-media) var(--et-rebote);
}
.pub-marca:hover .pub-marca__logo { transform: rotate(-6deg) scale(1.05); }
.pub-marca strong {
  display: block;
  font-family: var(--et-fuente-titulo);
  font-size: var(--et-txt-lg);
  line-height: 1.1;
}
.pub-marca small {
  display: block;
  font-size: var(--et-txt-xs);
  color: var(--et-texto-suave);
}
@media (max-width: 430px) { .pub-marca small { display: none; } }

/* --- Portada --------------------------------------------------------------- */
.pub-hero {
  position: relative;
  isolation: isolate;
  min-height: 78svh;
  margin-top: calc(-1 * var(--et-alto-cabecera, 68px));
  padding-top: calc(var(--et-alto-cabecera, 68px) + var(--et-6));
  padding-bottom: var(--et-8);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
}
@media (min-width: 900px) { .pub-hero { min-height: 82svh; } }

/* La foto se pone como background-image desde el JS. Escala un poco más que
   el contenedor para poder moverse con el scroll sin dejar bordes. */
.pub-hero__foto {
  position: absolute;
  inset: -12% 0 -6%;
  z-index: -2;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 900ms var(--et-suave);
  will-change: transform;
}
.pub-hero__foto--lista { opacity: 1; }

/* Degradado que garantiza el contraste del texto sobre cualquier foto. */
.pub-hero__velo { position: absolute; inset: 0; z-index: -1; }
/* Sin foto (base recién creada, o la URL no cargó) el velo se aclara y el
   texto pasa a oscuro: el degradado animado del fondo queda de protagonista.
   La clase la pone el JS cuando la foto termina de cargar. */
.pub-hero__velo {
  background: linear-gradient(180deg,
    transparent 0%, transparent 58%, var(--et-arena) 100%);
}
.pub-hero__contenido { color: var(--et-marino); position: relative; }
.pub-hero__kicker { background: var(--et-vidrio-denso); color: var(--et-turquesa-oscuro); }
.pub-hero__dato { background: var(--et-vidrio-denso); border-color: var(--et-vidrio-borde); }
.pub-hero h1, .pub-hero p { text-shadow: none; }

body.pub--conportada .pub-hero__velo {
  background: linear-gradient(180deg,
    rgba(11, 59, 69, 0.45) 0%,
    rgba(11, 59, 69, 0.10) 32%,
    rgba(11, 59, 69, 0.62) 78%,
    var(--et-arena) 100%);
}
body.pub--conportada .pub-hero__contenido { color: var(--et-blanco); }
body.pub--conportada .pub-hero__kicker,
body.pub--conportada .pub-hero__dato {
  background: var(--et-vidrio-oscuro);
  border-color: var(--et-vidrio-borde-oscuro);
  color: inherit;
}
body.pub--conportada .pub-hero h1 { text-shadow: 0 2px 24px rgba(11, 59, 69, 0.35); }
body.pub--conportada .pub-hero p { text-shadow: 0 1px 12px rgba(11, 59, 69, 0.35); }
.pub-hero__kicker {
  display: inline-block;
  padding: 0.35rem 0.9rem;
  margin-bottom: var(--et-3);
  border-radius: var(--et-radio-full);
  background: var(--et-vidrio-oscuro);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--et-vidrio-borde-oscuro);
  font-size: var(--et-txt-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.pub-hero h1 {
  font-size: clamp(2.4rem, 11vw, 4.5rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin-bottom: var(--et-3);
  text-shadow: 0 2px 24px rgba(11, 59, 69, 0.35);
}
.pub-hero p {
  font-size: var(--et-txt-lg);
  max-width: 42ch;
  margin: 0;
  opacity: 0.95;
  text-shadow: 0 1px 12px rgba(11, 59, 69, 0.35);
}

/* Cifras rápidas: destinos del mes, precio desde, cupos. */
.pub-hero__datos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--et-2);
  margin-top: var(--et-5);
}
.pub-hero__dato {
  display: flex;
  flex-direction: column;
  padding: 0.6rem 1rem;
  border-radius: var(--et-radio);
  background: var(--et-vidrio-oscuro);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  backdrop-filter: blur(12px) saturate(1.4);
  border: 1px solid var(--et-vidrio-borde-oscuro);
}
.pub-hero__dato b {
  font-family: var(--et-fuente-titulo);
  font-size: var(--et-txt-xl);
  line-height: 1.1;
}
.pub-hero__dato span { font-size: var(--et-txt-xs); opacity: 0.85; }


/* --- Navegación de meses -------------------------------------------------- */
.pub-meses {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--et-3);
  margin-block: calc(-1 * var(--et-6)) var(--et-5);
  padding: var(--et-2);
  border-radius: var(--et-radio-full);
  position: relative;
  z-index: 3;
  max-width: 420px;
  margin-inline: auto;
}
.pub-meses__actual {
  margin: 0;
  font-size: var(--et-txt-xl);
  min-width: 12ch;
  text-align: center;
}
.pub-meses__flecha {
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--et-vidrio-borde);
  background: var(--et-vidrio-denso);
  color: var(--et-marino);
  cursor: pointer;
}
.pub-meses__flecha:hover:not(:disabled) {
  background: var(--et-marino);
  color: var(--et-blanco);
}
.pub-meses__flecha:disabled { opacity: 0.35; cursor: not-allowed; }

/* --- Tarjetas de viaje ---------------------------------------------------- */
.pub-viajes {
  display: grid;
  gap: var(--et-5);
  padding-bottom: var(--et-7);
}
@media (min-width: 700px) {
  /* Las columnas tienen ancho acotado y la rejilla se centra: con uno o dos
     viajes las tarjetas mantienen su tamaño en vez de estirarse o dejar un
     hueco enorme a la derecha. */
  .pub-viajes {
    grid-template-columns: repeat(auto-fit, minmax(280px, 340px));
    justify-content: center;
  }
}

.pub-viaje {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 420px;
  border-radius: 26px;
  overflow: hidden;
  text-align: left;
  border: 1px solid var(--et-vidrio-borde);
  padding: 0;
  font: inherit;
  color: var(--et-blanco);
  cursor: pointer;
  box-shadow: var(--et-vidrio-sombra);
  transition: transform 420ms var(--et-salida), box-shadow 420ms var(--et-salida);
}
.pub-viaje.et-visible:hover,
.pub-viaje.et-visible:focus-visible {
  transform: translateY(-8px);
  box-shadow:
    0 18px 40px rgba(11, 59, 69, 0.16),
    0 40px 80px rgba(11, 59, 69, 0.18);
}

/* La foto ocupa toda la tarjeta; el contenido va encima. */
.pub-viaje__medio { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.pub-viaje__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pub-viaje__sinfoto {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(150deg,
      color-mix(in srgb, var(--et-turquesa) 85%, white),
      color-mix(in srgb, var(--et-amarillo) 70%, white) 60%,
      color-mix(in srgb, var(--et-coral) 55%, white));
}
/* Oscurecido inferior para que el texto blanco siempre se lea. */
.pub-viaje__medio::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(11, 59, 69, 0.18) 0%,
    rgba(11, 59, 69, 0.02) 30%,
    rgba(11, 59, 69, 0.55) 66%,
    rgba(11, 59, 69, 0.86) 100%);
}
.pub-viaje__cintas {
  position: absolute;
  top: var(--et-4);
  left: var(--et-4);
  right: var(--et-4);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--et-2);
  z-index: 2;
}
.pub-viaje__cinta {
  background: var(--et-vidrio-oscuro);
  -webkit-backdrop-filter: blur(12px) saturate(1.5);
  backdrop-filter: blur(12px) saturate(1.5);
  border: 1px solid var(--et-vidrio-borde-oscuro);
  color: var(--et-blanco);
  padding: 0.3rem 0.8rem;
  border-radius: var(--et-radio-full);
  font-size: var(--et-txt-xs);
  font-weight: 700;
}
.pub-viaje__cuerpo { padding: var(--et-4); }
.pub-viaje__destino {
  font-family: var(--et-fuente-titulo);
  font-size: var(--et-txt-2xl);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 var(--et-1);
  text-shadow: 0 2px 16px rgba(11, 59, 69, 0.4);
}
.pub-viaje__desc {
  font-size: var(--et-txt-sm);
  opacity: 0.9;
  margin-bottom: var(--et-3);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Pie de cristal: el bloque que hace que la tarjeta se sienta "de vidrio". */
.pub-viaje__pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--et-3);
  padding: var(--et-3) var(--et-4);
  border-radius: 18px;
  background: var(--et-vidrio-oscuro);
  -webkit-backdrop-filter: blur(14px) saturate(1.5);
  backdrop-filter: blur(14px) saturate(1.5);
  border: 1px solid var(--et-vidrio-borde-oscuro);
  transition: background-color var(--et-t-media) var(--et-suave);
}
.pub-viaje:hover .pub-viaje__pie { background: rgba(11, 59, 69, 0.58); }
.pub-precio {
  font-family: var(--et-fuente-titulo);
  font-size: var(--et-txt-2xl);
  font-weight: 800;
  line-height: 1;
  color: inherit;
}
.pub-precio small {
  display: block;
  font-family: var(--et-fuente-texto);
  font-size: var(--et-txt-xs);
  font-weight: 500;
  opacity: 0.78;
}
.pub-cupos { text-align: right; font-size: var(--et-txt-sm); line-height: 1.25; }
.pub-cupos strong { display: block; font-size: var(--et-txt-base); }
.pub-cupos--pocos strong { color: var(--et-amarillo); }

/* En la vista de detalle el precio vuelve sobre fondo claro. */
.pub-reserva .pub-precio { color: var(--et-marino); }
.pub-reserva .pub-precio small { color: var(--et-texto-suave); }

/* --- Detalle -------------------------------------------------------------- */
.pub-detalle__volver {
  display: inline-flex;
  align-items: center;
  gap: var(--et-1);
  padding-block: var(--et-4) var(--et-2);
  font-weight: 600;
  text-decoration: none;
}
.pub-detalle__portada {
  width: 100%;
  aspect-ratio: 4 / 3;
  max-height: 62svh;
  object-fit: cover;
  border-radius: 26px;
  background: linear-gradient(150deg,
    color-mix(in srgb, var(--et-turquesa) 80%, white),
    color-mix(in srgb, var(--et-amarillo) 65%, white) 60%,
    color-mix(in srgb, var(--et-coral) 50%, white));
  box-shadow: var(--et-vidrio-sombra);
}
@media (min-width: 700px) { .pub-detalle__portada { aspect-ratio: 21 / 9; } }
.pub-detalle__portada--vacia { object-fit: none; }
@media (min-width: 900px) {
  .pub-detalle__grid {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: var(--et-6);
    align-items: start;
  }
  .pub-detalle__lateral { position: sticky; top: 88px; }
}
.pub-detalle__cabecera { padding-block: var(--et-5) var(--et-4); }
.pub-detalle__cabecera h1 {
  font-size: clamp(2rem, 8vw, 3.2rem);
  letter-spacing: -0.03em;
}
.pub-detalle__cabecera h1 { margin-bottom: var(--et-2); }
.pub-detalle__fecha {
  color: var(--et-texto-suave);
  font-size: var(--et-txt-lg);
  margin: 0;
}
/* Bloques de contenido sobre tarjeta clara, para que respiren. */
.pub-bloque {
  margin-bottom: var(--et-4);
  padding: var(--et-5);
  border-radius: 22px;
  background: var(--et-vidrio-denso);
  -webkit-backdrop-filter: blur(14px) saturate(1.5);
  backdrop-filter: blur(14px) saturate(1.5);
  border: 1px solid var(--et-vidrio-borde);
  box-shadow: var(--et-sombra-sm);
}
.pub-bloque:last-child { margin-bottom: var(--et-6); }
.pub-bloque h2 { font-size: var(--et-txt-lg); margin-bottom: var(--et-2); }
.pub-punto { display: flex; gap: var(--et-2); align-items: center; }
.pub-punto .et-icono { color: var(--et-coral); }
.pub-lista { margin: 0; padding: 0; list-style: none; }
.pub-lista li {
  display: flex;
  gap: var(--et-2);
  align-items: flex-start;
  margin-bottom: var(--et-2);
}
.pub-lista__marca {
  display: inline-flex;
  color: var(--et-turquesa-oscuro);
  margin-top: 0.2em;
}
.pub-lista__punto {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--et-turquesa);
  margin-top: 0.55em;
  flex: none;
}

.pub-reserva {
  background: var(--et-vidrio-denso);
  -webkit-backdrop-filter: blur(var(--et-desenfoque)) saturate(1.7);
  backdrop-filter: blur(var(--et-desenfoque)) saturate(1.7);
  border: 1px solid var(--et-vidrio-borde);
  border-radius: 26px;
  box-shadow: var(--et-vidrio-sombra);
  padding: var(--et-5);
  margin-bottom: var(--et-6);
}
/* En escritorio la ficha sube sobre la portada: se ve el cristal de verdad. */
@media (min-width: 900px) {
  .pub-detalle__lateral { margin-top: -110px; }
}
.pub-reserva__precio {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--et-2);
  padding-bottom: var(--et-3);
  margin-bottom: var(--et-4);
  border-bottom: 1px solid var(--et-borde);
}
.pub-reserva__total {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--et-amarillo) 32%, white),
    color-mix(in srgb, var(--et-amarillo) 16%, white));
  border: 1px solid color-mix(in srgb, var(--et-amarillo) 45%, white);
  border-radius: 16px;
  padding: var(--et-3);
  text-align: center;
  margin-bottom: var(--et-4);
}
.pub-reserva__total strong {
  display: block;
  font-family: var(--et-fuente-titulo);
  font-size: var(--et-txt-2xl);
}

/* --- Confirmación --------------------------------------------------------- */
.pub-confirmacion {
  max-width: 620px;
  margin-inline: auto;
  padding-block: var(--et-7);
  text-align: center;
}
.pub-confirmacion__icono { font-size: 3.5rem; }
.pub-confirmacion__caja {
  background: var(--et-vidrio-denso);
  -webkit-backdrop-filter: blur(var(--et-desenfoque)) saturate(1.7);
  backdrop-filter: blur(var(--et-desenfoque)) saturate(1.7);
  border: 1px solid var(--et-vidrio-borde);
  border-radius: 24px;
  box-shadow: var(--et-vidrio-sombra);
  padding: var(--et-5);
  margin-top: var(--et-4);
  text-align: left;
}
.pub-confirmacion h1 { font-size: clamp(2rem, 8vw, 3rem); letter-spacing: -0.03em; }
.pub-pago {
  display: flex;
  justify-content: space-between;
  gap: var(--et-3);
  padding: var(--et-2) 0;
  border-bottom: 1px dashed var(--et-borde);
  font-size: var(--et-txt-sm);
}
.pub-pago:last-child { border-bottom: none; }
.pub-pago__nombre { font-weight: 700; white-space: nowrap; }
.pub-pago__detalle { text-align: right; color: var(--et-texto-suave); }


/* --- Esqueletos de carga -------------------------------------------------- */
.pub-esqueleto { border-radius: var(--et-radio-lg); height: 340px; }


/* ==========================================================================
   Movimiento del sitio público
   ========================================================================== */

/* La foto de la tarjeta hace un zoom lento al pasar por encima. */
.pub-viaje__medio { overflow: hidden; }
.pub-viaje__foto,
.pub-viaje__sinfoto {
  transition: transform var(--et-t-lenta) var(--et-salida);
}
.pub-viaje:hover .pub-viaje__foto,
.pub-viaje:focus-visible .pub-viaje__foto { transform: scale(1.07); }

/* La cinta de la fecha y la etiqueta de estado entran un instante después. */
.pub-viaje__cintas > * {
  animation: et-emerger var(--et-t-media) var(--et-salida) backwards;
  animation-delay: calc(var(--i, 0) * var(--et-escalon) + 220ms);
}

/* Flechas del selector de mes. */
.pub-meses__flecha {
  display: grid;
  place-items: center;
  transition: transform var(--et-t-rapida) var(--et-rebote),
              border-color var(--et-transicion), color var(--et-transicion);
}
.pub-meses__flecha:hover:not(:disabled) { transform: scale(1.1); }
.pub-meses__flecha:active:not(:disabled) { transform: scale(0.94); }

/* El nombre del mes se funde al cambiar (la clave cambia con el mes). */
.pub-meses__actual { animation: et-fundir var(--et-t-media) var(--et-suave) backwards; }

/* Vistas: cada una entra al mostrarse. */
#vista-detalle:not([hidden]),
#vista-confirmacion:not([hidden]) {
  animation: et-entrar var(--et-t-media) var(--et-salida) backwards;
}

/* Caja de reserva: entra desde la derecha en escritorio. */
.pub-reserva { animation: et-emerger var(--et-t-lenta) var(--et-salida) 120ms backwards; }

/* Portada del detalle. */
.pub-detalle__portada { animation: et-fundir var(--et-t-lenta) var(--et-suave) backwards; }

/* Enlace de volver: la flecha se desplaza al pasar por encima. */
.pub-detalle__volver .et-icono { transition: transform var(--et-t-rapida) var(--et-suave); }
.pub-detalle__volver:hover .et-icono { transform: translateX(-4px); }

/* Total estimado: parpadeo suave cuando cambia la cantidad de personas. */
.pub-reserva__total strong { transition: transform var(--et-t-rapida) var(--et-rebote); }
.pub-reserva__total--cambia strong { transform: scale(1.08); }

/* Filas de la confirmación, una tras otra. */
.pub-confirmacion__caja .pub-pago {
  animation: et-deslizar-der var(--et-t-media) var(--et-salida) backwards;
  animation-delay: calc(var(--n, 0) * 45ms + 200ms);
}

/* Icono de lista de espera. */
.et-icono--espera {
  color: var(--et-turquesa-oscuro);
  animation: et-emerger var(--et-t-lenta) var(--et-rebote) backwards;
}



/* --- Estado vacío ---------------------------------------------------------- */
.pub-viajes .et-vacio {
  background: var(--et-vidrio-denso);
  -webkit-backdrop-filter: blur(var(--et-desenfoque)) saturate(1.6);
  backdrop-filter: blur(var(--et-desenfoque)) saturate(1.6);
  border: 1px solid var(--et-vidrio-borde);
  border-radius: 26px;
  box-shadow: var(--et-vidrio-sombra);
  padding: var(--et-8) var(--et-5);
  grid-column: 1 / -1;
}
.pub-viajes .et-vacio__icono {
  background: linear-gradient(140deg,
    color-mix(in srgb, var(--et-turquesa) 30%, white),
    color-mix(in srgb, var(--et-amarillo) 34%, white));
  color: var(--et-marino);
  padding: var(--et-4);
  animation: et-flotar 4.5s ease-in-out infinite;
}
@keyframes et-flotar {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

/* Los esqueletos de carga también van en cristal. */
.pub-esqueleto {
  height: 420px;
  border-radius: 26px;
  background: linear-gradient(90deg,
    rgba(255,255,255,0.32) 25%,
    rgba(255,255,255,0.62) 50%,
    rgba(255,255,255,0.32) 75%);
  background-size: 200% 100%;
  border: 1px solid var(--et-vidrio-borde);
}

/* Brillo que recorre los botones principales al pasar por encima. */
.et-btn--sol:not([data-cargando])::after,
.et-btn--wa:not([data-cargando])::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 45%;
  left: -60%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.55), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
}
.et-btn--sol:not([data-cargando]):hover:not(:disabled)::after,
.et-btn--wa:not([data-cargando]):hover:not(:disabled)::after {
  animation: et-brillar 750ms var(--et-suave);
}
@keyframes et-brillar { to { left: 120%; } }

/* El marcador de los puntos de encuentro usa el color de acento cálido. */
.pub-lista__marca--lugar { color: var(--et-coral); }


/* ==========================================================================
   Cómo funciona
   ========================================================================== */

.pub-pasos { padding-block: var(--et-7); }
.pub-pasos__titulo {
  text-align: center;
  font-size: clamp(1.6rem, 6vw, 2.4rem);
  letter-spacing: -0.03em;
  margin-bottom: var(--et-6);
}
.pub-pasos__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--et-4);
}
@media (min-width: 800px) {
  .pub-pasos__lista { grid-template-columns: repeat(3, 1fr); gap: var(--et-5); }
}

.pub-paso {
  position: relative;
  padding: var(--et-6) var(--et-5) var(--et-5);
  border-radius: 24px;
  background: var(--et-vidrio-denso);
  -webkit-backdrop-filter: blur(var(--et-desenfoque)) saturate(1.6);
  backdrop-filter: blur(var(--et-desenfoque)) saturate(1.6);
  border: 1px solid var(--et-vidrio-borde);
  box-shadow: var(--et-vidrio-sombra);
  transition: transform var(--et-t-media) var(--et-salida),
              box-shadow var(--et-t-media) var(--et-salida);
}
.pub-paso.et-visible:hover { transform: translateY(-5px); box-shadow: var(--et-sombra-lg); }
.pub-paso h3 { font-size: var(--et-txt-lg); margin-bottom: var(--et-2); }
.pub-paso p { color: var(--et-texto-suave); font-size: var(--et-txt-sm); margin: 0; }

.pub-paso__numero {
  position: absolute;
  top: -18px;
  left: var(--et-5);
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  font-family: var(--et-fuente-titulo);
  font-size: var(--et-txt-xl);
  font-weight: 800;
  color: var(--et-marino);
  background: linear-gradient(140deg, var(--et-amarillo), var(--et-amarillo-oscuro));
  box-shadow: 0 8px 20px color-mix(in srgb, var(--et-amarillo) 45%, transparent);
  transition: transform var(--et-t-media) var(--et-rebote);
}
.pub-paso.et-visible:hover .pub-paso__numero { transform: rotate(-8deg) scale(1.08); }

/* ==========================================================================
   Pie
   ========================================================================== */

.pub-footer {
  position: relative;
  margin-top: var(--et-6);
  color: #CFE9E7;
  background: var(--et-marino);
}

/* La ola separa el pie del resto sin una línea recta y dura. */
.pub-footer__ola {
  display: block;
  width: 100%;
  height: clamp(48px, 7vw, 88px);
  margin-bottom: -1px;
  position: absolute;
  bottom: 100%;
  left: 0;
  fill: var(--et-marino);
}

.pub-footer__interior {
  display: grid;
  gap: var(--et-6);
  padding-block: var(--et-7) var(--et-6);
}
@media (min-width: 820px) {
  .pub-footer__interior {
    grid-template-columns: 1.2fr 1fr;
    align-items: center;
    gap: var(--et-8);
  }
}

.pub-footer__cta h2 {
  color: var(--et-blanco);
  font-size: clamp(1.8rem, 7vw, 2.6rem);
  letter-spacing: -0.03em;
  margin-bottom: var(--et-2);
}
.pub-footer__cta p {
  font-size: var(--et-txt-lg);
  opacity: 0.88;
  max-width: 34ch;
  margin-bottom: var(--et-5);
}

.pub-footer__marca {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--et-2);
  padding: var(--et-5);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.pub-footer__logo { display: inline-flex; margin-bottom: var(--et-1); }
.pub-footer__marca strong {
  color: var(--et-blanco);
  font-family: var(--et-fuente-titulo);
  font-size: var(--et-txt-lg);
}
.pub-footer__marca > span { font-size: var(--et-txt-sm); opacity: 0.8; }

.pub-footer__enlaces {
  display: flex;
  flex-wrap: wrap;
  gap: var(--et-2);
  margin-top: var(--et-2);
}
.pub-footer__enlaces a {
  display: inline-flex;
  align-items: center;
  gap: var(--et-2);
  padding: 0.5rem 0.9rem;
  border-radius: var(--et-radio-full);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--et-amarillo);
  font-size: var(--et-txt-sm);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--et-transicion), background-color var(--et-transicion);
}
.pub-footer__enlaces a:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.16);
  color: var(--et-blanco);
}

.pub-footer__base {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-block: var(--et-4);
  font-size: var(--et-txt-xs);
}
.pub-footer__base-interior {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--et-2) var(--et-5);
  text-align: center;
  opacity: 0.75;
}
.pub-footer__base strong { color: var(--et-amarillo); font-weight: 700; }
.pub-footer__base a { color: inherit; }
.pub-footer__admin { text-decoration: underline; }
@media (min-width: 700px) {
  .pub-footer__base-interior { justify-content: space-between; text-align: left; }
}

/* ==========================================================================
   Sobre nosotros · Galería · Reseñas
   ========================================================================== */

.pub-seccion__titulo {
  text-align: center;
  font-size: clamp(1.6rem, 6vw, 2.4rem);
  letter-spacing: -0.03em;
  margin-bottom: var(--et-2);
}
.pub-seccion__sub {
  text-align: center;
  color: var(--et-texto-suave);
  margin-bottom: var(--et-6);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--et-2);
  flex-wrap: wrap;
}
.pub-seccion__sub strong { color: var(--et-marino); font-size: var(--et-txt-lg); }

/* --- Sobre nosotros -------------------------------------------------------- */
.pub-sobre { padding-block: var(--et-7); }
.pub-sobre__grid { display: grid; gap: var(--et-5); align-items: stretch; }
@media (min-width: 880px) {
  .pub-sobre__grid { grid-template-columns: 1.1fr 1fr; gap: var(--et-7); }
}
.pub-sobre__texto {
  padding: var(--et-6);
  border-radius: 26px;
  background: var(--et-vidrio-denso);
  -webkit-backdrop-filter: blur(var(--et-desenfoque)) saturate(1.6);
  backdrop-filter: blur(var(--et-desenfoque)) saturate(1.6);
  border: 1px solid var(--et-vidrio-borde);
  box-shadow: var(--et-vidrio-sombra);
}
.pub-sobre__texto h2 {
  font-size: clamp(1.6rem, 6vw, 2.2rem);
  letter-spacing: -0.03em;
}
.pub-sobre__texto p { color: var(--et-texto-suave); margin-bottom: var(--et-4); }
.pub-sobre__foto {
  min-height: 300px;
  border-radius: 26px;
  background-size: cover;
  background-position: center;
  box-shadow: var(--et-vidrio-sombra);
}

/* --- Galería --------------------------------------------------------------- */
.pub-galeria { padding-block: var(--et-7); }
.pub-galeria__grid {
  display: grid;
  gap: var(--et-3);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 700px) { .pub-galeria__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .pub-galeria__grid { grid-template-columns: repeat(4, 1fr); } }

.pub-galeria__foto {
  position: relative;
  display: block;
  padding: 0;
  border: 1px solid var(--et-vidrio-borde);
  border-radius: 18px;
  overflow: hidden;
  aspect-ratio: 1;
  cursor: zoom-in;
  background: var(--et-gris-100);
  box-shadow: var(--et-sombra-sm);
  transition: transform var(--et-t-media) var(--et-salida),
              box-shadow var(--et-t-media) var(--et-salida);
}
/* La primera foto ocupa el doble en pantallas grandes: rompe la cuadrícula. */
@media (min-width: 700px) {
  .pub-galeria__foto:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: 1; }
}
.pub-galeria__foto.et-visible:hover { transform: translateY(-4px); box-shadow: var(--et-sombra); }
.pub-galeria__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--et-t-lenta) var(--et-salida); }
.pub-galeria__foto:hover img { transform: scale(1.07); }
.pub-galeria__pie {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: var(--et-4) var(--et-3) var(--et-2);
  font-size: var(--et-txt-xs);
  font-weight: 600;
  color: var(--et-blanco);
  text-align: left;
  background: linear-gradient(transparent, rgba(11, 59, 69, 0.8));
}

/* Visor a pantalla completa */
.pub-visor {
  border: none;
  padding: 0;
  background: transparent;
  max-width: min(94vw, 1100px);
  max-height: 94dvh;
}
.pub-visor::backdrop { background: rgba(11, 59, 69, 0.82); backdrop-filter: blur(6px); }
.pub-visor img {
  max-width: 100%;
  max-height: 82dvh;
  border-radius: 20px;
  box-shadow: var(--et-sombra-lg);
  animation: et-emerger var(--et-t-media) var(--et-salida) backwards;
}
.pub-visor__titulo { color: var(--et-blanco); text-align: center; margin-top: var(--et-3); }
.pub-visor__cerrar {
  position: absolute;
  top: -6px; right: -6px;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border: none;
  border-radius: 50%;
  background: var(--et-blanco);
  color: var(--et-marino);
  cursor: pointer;
  box-shadow: var(--et-sombra);
  transition: transform var(--et-t-rapida) var(--et-rebote);
}
.pub-visor__cerrar:hover { transform: rotate(90deg); }

/* --- Reseñas --------------------------------------------------------------- */
.pub-resenas { padding-block: var(--et-7) var(--et-8); }
.pub-resenas__grid {
  display: grid;
  gap: var(--et-4);
  margin-bottom: var(--et-6);
}
@media (min-width: 760px) {
  .pub-resenas__grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 330px));
    justify-content: center;
  }
}

.pub-resena {
  padding: var(--et-5);
  border-radius: 22px;
  background: var(--et-vidrio-denso);
  -webkit-backdrop-filter: blur(14px) saturate(1.5);
  backdrop-filter: blur(14px) saturate(1.5);
  border: 1px solid var(--et-vidrio-borde);
  box-shadow: var(--et-sombra-sm);
  display: flex;
  flex-direction: column;
  gap: var(--et-3);
  transition: transform var(--et-t-media) var(--et-salida),
              box-shadow var(--et-t-media) var(--et-salida);
}
.pub-resena.et-visible:hover { transform: translateY(-4px); box-shadow: var(--et-sombra); }
.pub-resena__estrellas { color: var(--et-amarillo-oscuro); }
.pub-resena__texto { margin: 0; flex: 1; }
.pub-resena__pie {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--et-1) var(--et-3);
  font-size: var(--et-txt-sm);
  color: var(--et-texto-suave);
  border-top: 1px solid var(--et-borde);
  padding-top: var(--et-3);
}
.pub-resena__pie strong { color: var(--et-marino); }
.pub-resena__fecha { margin-left: auto; font-size: var(--et-txt-xs); }

.pub-estrellas__fila { display: inline-flex; gap: 2px; vertical-align: -0.2em; }

/* Formulario de reseña */
.pub-resenas__caja {
  max-width: 620px;
  margin-inline: auto;
  padding: var(--et-6);
  border-radius: 26px;
  background: var(--et-vidrio-denso);
  -webkit-backdrop-filter: blur(var(--et-desenfoque)) saturate(1.7);
  backdrop-filter: blur(var(--et-desenfoque)) saturate(1.7);
  border: 1px solid var(--et-vidrio-borde);
  box-shadow: var(--et-vidrio-sombra);
}
.pub-resenas__caja h3 { font-size: var(--et-txt-xl); margin-bottom: var(--et-1); }
.pub-resenas__caja > .et-ayuda { display: block; margin-bottom: var(--et-5); }

.pub-estrellas__etiqueta {
  display: block;
  font-size: var(--et-txt-sm);
  font-weight: 650;
  margin-bottom: var(--et-2);
}
.pub-estrellas { display: flex; gap: var(--et-1); }
.pub-estrella {
  appearance: none;
  border: none;
  background: none;
  padding: var(--et-1);
  cursor: pointer;
  color: var(--et-gris-400);
  transition: transform var(--et-t-rapida) var(--et-rebote), color var(--et-transicion);
}
.pub-estrella:hover { transform: scale(1.18); color: var(--et-amarillo-oscuro); }
.pub-estrella--activa { color: var(--et-amarillo-oscuro); }