/**
 * BARUA SPA · DESIGN SYSTEM v2.0.0
 * assets/css/barua.css
 * Tokens semanticos, modo oscuro automatico, componentes base.
 */

/* ============================================================
   1. TOKENS SEMANTICOS — Tema claro (por defecto)
   ============================================================ */
:root {
  --surface-base:   252 250 245;  /* papel   */
  --surface-elev:   255 255 255;  /* blanco  */
  --surface-sunken: 228 222 208;  /* lino    */

  --ink-strong:       4  32  57;  /* noche   */
  --ink-body:        45  55  72;
  --ink-muted:      107 100  85;  /* piedra  */

  --hairline:       214 208 194;
  --accent:         140  98  33;  /* bronce: contraste AA sobre papel */
  --accent-soft:    218 165  32;

  --shadow-suave: 0 1px 2px rgba(4,32,57,.04), 0 8px 24px -12px rgba(4,32,57,.10);
  --shadow-alta:  0 2px 4px rgba(4,32,57,.06), 0 24px 48px -20px rgba(4,32,57,.18);

  --ring: 0 0 0 3px rgba(218,165,32,.32);
  color-scheme: light;
}

/* ============================================================
   2. TOKENS SEMANTICOS — Tema oscuro
   ============================================================ */
.dark {
  --surface-base:    2  18  33;   /* abismo    */
  --surface-elev:   10  42  71;   /* nocheCard */
  --surface-sunken:  4  32  57;   /* noche     */

  --ink-strong:    245 245 233;   /* crema     */
  --ink-body:      214 220 228;
  --ink-muted:     154 168 184;

  --hairline:       28  62  95;
  --accent:        218 165  32;   /* oro: 6.4:1 sobre noche */
  --accent-soft:   239 217 163;

  --shadow-suave: 0 1px 2px rgba(0,0,0,.30), 0 8px 24px -12px rgba(0,0,0,.55);
  --shadow-alta:  0 2px 4px rgba(0,0,0,.35), 0 24px 48px -20px rgba(0,0,0,.65);

  --ring: 0 0 0 3px rgba(218,165,32,.45);
  color-scheme: dark;
}

/* ============================================================
   3. BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  background-color: rgb(var(--surface-base));
  color: rgb(var(--ink-body));
  font-family: 'DM Sans', system-ui, sans-serif;
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color .4s cubic-bezier(.22,1,.36,1), color .4s cubic-bezier(.22,1,.36,1);
}

h1, h2, h3, h4 {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 500;
  color: rgb(var(--ink-strong));
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}

p { text-wrap: pretty; }

img, svg, video { display: block; max-width: 100%; height: auto; }

a { color: inherit; text-decoration: none; }

::selection {
  background: rgba(218,165,32,.28);
  color: rgb(var(--ink-strong));
}

:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: 6px;
}

[x-cloak] { display: none !important; }

/* ============================================================
   4. SECCIONES INVERTIDAS (anclas oscuras en tema claro)
   ============================================================ */
.seccion-noche {
  --surface-base:    4  32  57;
  --surface-elev:   10  42  71;
  --surface-sunken:  2  18  33;
  --ink-strong:    245 245 233;
  --ink-body:      214 220 228;
  --ink-muted:     154 168 184;
  --hairline:       28  62  95;
  --accent:        218 165  32;
  --accent-soft:   239 217 163;
  background-color: rgb(var(--surface-base));
  color: rgb(var(--ink-body));
  color-scheme: dark;
}

.seccion-abismo {
  --surface-base:    2  18  33;
  --surface-elev:    4  32  57;
  --surface-sunken:  2  18  33;
  --ink-strong:    245 245 233;
  --ink-body:      190 202 216;
  --ink-muted:     130 148 168;
  --hairline:       20  48  78;
  --accent:        218 165  32;
  --accent-soft:   239 217 163;
  background-color: rgb(var(--surface-base));
  color: rgb(var(--ink-body));
  color-scheme: dark;
}

/* ============================================================
   5. ORO METALICO (reconstruido del logo, vectorial)
   ============================================================ */
.oro-metal {
  background-image: linear-gradient(100deg,
    #8C6221 0%, #C9974A 22%, #EFD9A3 42%,
    #DAA520 58%, #C9974A 76%, #8C6221 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
@supports not (background-clip: text) {
  .oro-metal { color: #C9974A; -webkit-text-fill-color: #C9974A; }
}

.regla-oro {
  height: 1px;
  border: 0;
  background: linear-gradient(90deg, transparent, rgb(var(--accent)) 50%, transparent);
  opacity: .55;
}

/* ============================================================
   6. COMPONENTES
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-height: 52px;
  padding: 0 2rem;
  border-radius: 999px;
  font-family: 'DM Sans', sans-serif;
  font-size: .9375rem;
  font-weight: 500;
  letter-spacing: .02em;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform .35s cubic-bezier(.22,1,.36,1),
              background-color .3s ease, color .3s ease,
              border-color .3s ease, box-shadow .35s ease;
}
.btn:active { transform: scale(.975); }

.btn-oro {
  background: rgb(var(--accent-soft));
  color: #042039;
  box-shadow: var(--shadow-suave);
}
.btn-oro:hover {
  background: #EFD9A3;
  box-shadow: var(--shadow-alta);
  transform: translateY(-2px);
}

.btn-linea {
  background: transparent;
  color: rgb(var(--ink-strong));
  border-color: rgb(var(--hairline));
}
.btn-linea:hover {
  border-color: rgb(var(--accent));
  color: rgb(var(--accent));
}

.tarjeta {
  background: rgb(var(--surface-elev));
  border: 1px solid rgb(var(--hairline));
  border-radius: 14px;
  box-shadow: var(--shadow-suave);
  transition: transform .45s cubic-bezier(.22,1,.36,1),
              box-shadow .45s ease, border-color .45s ease;
}
.tarjeta:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-alta);
  border-color: rgba(218,165,32,.42);
}

.etiqueta {
  font-family: 'DM Sans', sans-serif;
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgb(var(--accent));
}

/* ============================================================
   7. HEADER
   ============================================================ */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  padding: clamp(.7rem, 1.5vw, 1.15rem) 0;
  background: transparent;
  border: 0;
}

/* La isla: pastilla flotante despegada del borde. En el tope es
   invisible y flota sobre el hero; al bajar se materializa en
   cristal. El blur solo vive aqui, que es un elemento fijo. */
/* El padding se compensa con un margen negativo del mismo valor:
   asi el logo arranca exactamente en la misma vertical que el
   titular del hero, y la pastilla conserva su aire por dentro. */
.header__isla {
  --isla-pad: .85rem;
  border-radius: 999px;
  padding-inline: var(--isla-pad);
  margin-inline: calc(var(--isla-pad) * -1);
  border: 1px solid transparent;
  transition: background-color .45s cubic-bezier(.22,1,.36,1),
              border-color .45s ease, box-shadow .45s ease;
}
@media (min-width: 1024px) { .header__isla { --isla-pad: 1.5rem; } }
/* La cabecera crece con la pantalla: el logo necesita sitio para
   tener presencia sin apretar al menu. */
.header__fila { height: 74px; }
@media (min-width: 1024px) { .header__fila { height: 82px; } }
@media (min-width: 1280px) { .header__fila { height: 92px; } }

.header[data-fijo="true"] .header__isla {
  background: rgb(var(--surface-base) / .82);
  backdrop-filter: saturate(160%) blur(16px);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  border-color: rgb(var(--hairline) / .85);
  box-shadow: 0 12px 36px -20px rgb(2 18 33 / .60);
}
.header[data-tope="true"] {
  --ink-strong: 245 245 233;
  --ink-body:   214 220 228;
  --accent:     218 165 32;
  color: rgb(var(--ink-body));
}

/* En cuanto la isla se vuelve de cristal claro, el texto tiene que
   volver a ser oscuro. Antes ambos estados convivian durante casi todo
   el hero (tope se mantiene hasta el 72% de su alto) y quedaba texto
   claro sobre cristal claro: ilegible.
   Va DESPUES de [data-tope] a proposito: misma especificidad, gana el
   ultimo. */
.header[data-fijo="true"] {
  --ink-strong:   4  32  57;
  --ink-body:    45  55  72;
  --ink-muted:  107 100  85;
  --hairline:   214 208 194;
  --accent:     140  98  33;
  color: rgb(var(--ink-body));
}

/* ------------------------------------------------------------
   LA CAPSULA DEL MENU

   El problema: sobre el hero, el menu cae encima de la fotografia.
   Da igual el tamaño y el color de la letra, porque el fondo cambia
   en cada foto del carrusel: donde una tiene sombra la siguiente
   tiene una pared clara, y ahi el texto desaparece.

   La solucion no es oscurecer mas la foto, que apagaria el hero
   entero, sino darle al menu su propio suelo: una pastilla de
   cristal ahumado en azul noche, con filo dorado, que viaja con el
   menu y le garantiza contraste caiga sobre lo que caiga.

   Se dibuja en un ::before y no en el propio nav para que el cristal
   quede DETRAS del texto sin necesidad de tocar el apilamiento de
   los enlaces, y para poder desvanecerla sola.

   Al bajar, la cabecera entera se vuelve cristal claro: entonces la
   capsula sobra y se desvanece, para no dejar una pastilla oscura
   flotando sobre una barra clara.
   ------------------------------------------------------------ */
.nav-capsula {
  position: relative;
  /* isolation crea el contexto de apilamiento AQUI, para que el
     z-index -1 de los pseudos signifique "detras de los enlaces" y no
     "detras de toda la cabecera". Sin esto, el cristal se colaria por
     debajo de la isla y desapareceria al hacerse solida. */
  isolation: isolate;
  /* A 1024 px el hueco entre el logo y el boton es de apenas 11 px si
     la capsula lleva el mismo aire que en pantallas grandes. Ahi se
     ajusta el acolchado; a partir de 1280 ya sobra sitio. */
  padding: .5rem .8rem;
  border-radius: 999px;
}
@media (min-width: 1280px) { .nav-capsula { padding: .5rem 1.4rem; } }

.nav-capsula::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  border: 1px solid rgb(var(--accent) / .30);
  background:
    linear-gradient(180deg, rgb(255 255 255 / .10), rgb(255 255 255 / .015)),
    rgb(2 18 33 / .46);
  /* El brillo de arriba imita el canto de una pieza de vidrio; la
     sombra de abajo la despega de la fotografia. */
  box-shadow:
    inset 0 1px 0 rgb(239 217 163 / .16),
    0 10px 30px -18px rgb(2 18 33 / .95);
  backdrop-filter: blur(10px) saturate(150%);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  opacity: 1;
  transition: opacity .45s cubic-bezier(.22,1,.36,1);
}

/* Cabecera solida: fuera cristal. */
.header[data-fijo="true"] .nav-capsula::before { opacity: 0; }

/* Un punto de luz dorada muy tenue recorriendo el canto superior.
   Es lo que evita que la pastilla parezca un rectangulo gris pegado
   encima: le da el mismo acabado metalico del isotipo. */
.nav-capsula::after {
  content: '';
  position: absolute;
  left: 12%; right: 12%; top: 0;
  height: 1px;
  z-index: -1;
  background: linear-gradient(90deg,
    transparent,
    rgb(218 165 32 / .55) 22%,
    rgb(239 217 163 / .80) 50%,
    rgb(218 165 32 / .55) 78%,
    transparent);
  transition: opacity .45s cubic-bezier(.22,1,.36,1);
}
.header[data-fijo="true"] .nav-capsula::after { opacity: 0; }

/* Cinturon y tirantes: aunque el cristal fallara (navegador sin
   backdrop-filter), la sombra del texto ya lo despega del fondo. */
.header[data-tope="true"] .nav-link,
.header[data-tope="true"] .tracking-marca {
  text-shadow: 0 1px 3px rgb(2 18 33 / .55);
}
.header[data-fijo="true"] .nav-link,
.header[data-fijo="true"] .tracking-marca { text-shadow: none; }

/* Tinta fuerte y peso 500: sobre la fotografia del hero, el gris del
   texto corrido se perdia. */
.nav-link {
  position: relative;
  padding: .4rem 0;
  color: rgb(var(--ink-strong));
  font-weight: 500;
  letter-spacing: .01em;
}
.nav-link::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: rgb(var(--accent));
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .45s cubic-bezier(.22,1,.36,1);
}
.nav-link:hover::after,
.nav-link[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.nav-link[aria-current="page"] { color: rgb(var(--accent)); }

/* ============================================================
   8. SKELETON (carga de disponibilidad y tarifas)
   ============================================================ */
.skeleton {
  background: linear-gradient(90deg,
    rgb(var(--hairline) / .35) 25%,
    rgb(var(--hairline) / .65) 50%,
    rgb(var(--hairline) / .35) 75%);
  background-size: 200% 100%;
  animation: brilloSkeleton 1.4s linear infinite;
  border-radius: 8px;
}
@keyframes brilloSkeleton {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ============================================================
   9. REVELADO AL SCROLL
   ============================================================ */
[data-revelar] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .8s cubic-bezier(.22,1,.36,1),
              transform .8s cubic-bezier(.22,1,.36,1);
}
[data-revelar].visible { opacity: 1; transform: none; }

/* ============================================================
   10. ACCESIBILIDAD
   ============================================================ */
.solo-lectores, .sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.saltar-contenido {
  position: absolute;
  top: -100px; left: 1rem;
  z-index: 100;
  padding: .75rem 1.25rem;
  background: rgb(var(--accent-soft));
  color: #042039;
  border-radius: 999px;
  font-size: .875rem;
  transition: top .3s ease;
}
.saltar-contenido:focus { top: 1rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  [data-revelar] { opacity: 1; transform: none; }
}

/* ============================================================
   11. HERO PARTIDO — fotografia fundida con el azul noche
   ============================================================ */
.hero-foto { position: relative; overflow: hidden; }
.hero-foto img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 55% 45%;
  filter: saturate(.82) contrast(1.04) brightness(.88);
}
.hero-foto::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, #042039 0%, rgba(4,32,57,.72) 26%, rgba(4,32,57,.10) 62%, rgba(4,32,57,.34) 100%);
}
@media (max-width: 1023px) {
  .hero-foto::after {
    background: linear-gradient(180deg, rgba(4,32,57,.55) 0%, rgba(4,32,57,.15) 45%, #042039 100%);
  }
}

/* ============================================================
   12. RESERVA RAPIDA
   ============================================================ */
.campo {
  width: 100%;
  min-height: 50px;
  padding: 0 2.4rem 0 .95rem;
  background: rgb(var(--surface-elev));
  border: 1px solid rgb(var(--hairline));
  border-radius: 10px;
  color: rgb(var(--ink-strong));
  font-family: 'DM Sans', sans-serif;
  font-size: .9375rem;
  appearance: none;
  cursor: pointer;
  transition: border-color .3s ease, box-shadow .3s ease;
}
.campo:hover  { border-color: rgb(var(--accent)); }
.campo:focus  { outline: none; border-color: rgb(var(--accent)); box-shadow: var(--ring); }

.paso-btn {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 999px;
  border: 1px solid rgb(var(--hairline));
  color: rgb(var(--ink-strong));
  cursor: pointer;
  transition: border-color .25s ease, color .25s ease, opacity .25s ease;
}
.paso-btn:hover:not(:disabled) { border-color: rgb(var(--accent)); color: rgb(var(--accent)); }
.paso-btn:disabled { opacity: .3; cursor: not-allowed; }

/* ============================================================
   13. CATALOGO — tarjetas de servicio (marketplace ligero)
   PROVISIONAL: el area visual usa textura de marca + icono de linea
   porque aun no hay fotografia propia de cada masaje. El dia que
   llegue, .tarjeta-servicio__visual pasa a llevar una <img> real y
   .tarjeta-servicio__icono se elimina. Ver lista de fotos pendientes
   en CLAUDE.md.
   ============================================================ */
.nombre-servicio { transition: color .35s ease; }

.tarjeta-servicio {
  display: flex;
  flex-direction: column;
  background: rgb(var(--surface-elev));
  border: 1px solid rgb(var(--hairline));
  border-radius: 18px;
  overflow: hidden;
  cursor: pointer;
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition: opacity 640ms var(--e-salida), transform 640ms var(--e-salida),
              border-color var(--t-ui) var(--e-suave), box-shadow var(--t-ui) var(--e-suave);
  transition-delay: var(--d, 0ms);
}
.entra .tarjeta-servicio { opacity: 1; transform: none; }
.tarjeta-servicio:hover {
  border-color: rgba(218,165,32,.45);
  box-shadow: var(--shadow-alta);
}
.tarjeta-servicio:hover .nombre-servicio { color: rgb(var(--accent)); }
.tarjeta-servicio:active { transform: scale(.985); transition-duration: 140ms; }

.tarjeta-servicio__visual {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: linear-gradient(155deg, #0A2A47 0%, #0A2A47 45%, #042039 100%);
}
.tarjeta-servicio__visual::before {
  content: '';
  position: absolute; inset: 0;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.tarjeta-servicio__icono {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  color: rgb(var(--accent-soft));
  transition: transform var(--t-escena) var(--e-salida);
}
.tarjeta-servicio__icono svg { width: 32%; height: 32%; }
.tarjeta-servicio:hover .tarjeta-servicio__icono { transform: scale(1.08); }

.tarjeta-servicio__num {
  position: absolute; top: 14px; left: 16px;
  font-family: 'Playfair Display', serif;
  font-size: .8rem;
  letter-spacing: .1em;
  color: rgba(239,217,163,.85);
}

.tarjeta-servicio__cuerpo { padding: 1.5rem 1.4rem 1.6rem; display: flex; flex-direction: column; flex: 1; }
.tarjeta-servicio__desde {
  margin-top: auto;
  padding-top: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgb(var(--hairline) / .6);
}

@media (prefers-reduced-motion: reduce) {
  .tarjeta-servicio, .tarjeta-servicio__icono { transform: none !important; opacity: 1 !important; transition: none !important; }
}

/* ============================================================
   14. TABLA DE TARIFAS
   ============================================================ */
.tabla-tarifas { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.tabla-tarifas th, .tabla-tarifas td { padding: .85rem 1rem; text-align: right; }
.tabla-tarifas th:first-child, .tabla-tarifas td:first-child { text-align: left; }
.tabla-tarifas thead th {
  font-family: 'DM Sans', sans-serif;
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgb(var(--ink-muted));
  border-bottom: 1px solid rgb(var(--hairline));
}
.tabla-tarifas tbody tr { border-bottom: 1px solid rgb(var(--hairline) / .5); }
.tabla-tarifas tbody tr:hover { background: rgb(var(--surface-elev) / .6); }
.col-activa { background: rgb(var(--accent) / .07); font-weight: 500; color: rgb(var(--ink-strong)); }

/* ============================================================
   15. PASOS
   ============================================================ */
.paso-num {
  font-family: 'Playfair Display', serif;
  font-size: 2.6rem;
  line-height: 1;
  color: rgb(var(--accent) / .35);
}

/* ============================================================
   16. MOTION — reglas base
   Solo transform y opacity. Curvas de salida agresivas.
   ============================================================ */
:root {
  --e-salida:   cubic-bezier(.16, 1, .3, 1);     /* entradas escenicas */
  --e-suave:    cubic-bezier(.32, .72, 0, 1);    /* respuestas de UI   */
  --e-entrada:  cubic-bezier(.7, 0, .84, 0);     /* salidas            */
  --t-rapido:   180ms;
  --t-ui:       260ms;
  --t-escena:   820ms;
}

/* --- Revelado de lineas de texto --- */
/* El overflow es lo que oculta la linea antes de que suba, pero
   tambien cortaba las colas de la g, la p y la j. El relleno da ese
   aire y el margen negativo lo devuelve, asi que el interlineado no
   cambia ni un pixel. */
/* OJO: el .18em de abajo se calcula con el tamaño de letra de la
   PROPIA .linea. La clase de tamaño (text-fluid-3xl...) tiene que ir en
   la .linea o en su padre, nunca solo en el span de dentro. Si va dentro,
   la .linea se queda con 16px, deja 2,9px de holgura, y overflow:hidden
   corta las colas de la g, la p y la j de un titulo de 72px. Paso en el
   h1 del hero hasta v2.14.2. */
.linea {
  display: block;
  overflow: hidden;
  padding-bottom: .18em;
  margin-bottom: -.18em;
}
.linea > span {
  display: block;
  transform: translate3d(0, 115%, 0);
  transition: transform var(--t-escena) var(--e-salida);
  transition-delay: var(--d, 0ms);
  will-change: transform;
}
.entra .linea > span { transform: translate3d(0, 0, 0); }

/* --- Aparicion simple con desplazamiento --- */
.sube {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
  transition: opacity var(--t-escena) var(--e-salida), transform var(--t-escena) var(--e-salida);
  transition-delay: var(--d, 0ms);
}
.entra .sube, .sube.entra { opacity: 1; transform: none; }

/* --- Cortina de la fotografia del hero --- */
.cortina {
  clip-path: inset(0 0 0 100%);
  transition: clip-path 1150ms var(--e-salida);
}
.entra .cortina { clip-path: inset(0 0 0 0%); }

.cortina img {
  transform: scale(1.12);
  transition: transform 1900ms var(--e-salida);
}
.entra .cortina img { transform: scale(1); }

/* --- Filete de oro que se dibuja --- */
.filete {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 900ms var(--e-salida);
  transition-delay: var(--d, 0ms);
}
.entra .filete { transform: scaleX(1); }

/* --- Cambio de cifra: destello corto y contenido --- */
@keyframes cifraCambia {
  0%   { opacity: 0; transform: translate3d(0, 8px, 0); }
  100% { opacity: 1; transform: none; }
}
.cifra.flash { animation: cifraCambia var(--t-ui) var(--e-suave); }

/* --- Boton: presion fisica --- */
.btn { will-change: transform; }
.btn:hover  { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.98); transition-duration: 90ms; }

/* --- Parallax del hero --- */
.parallax { will-change: transform; }

/* --- Grano sutil sobre las anclas oscuras --- */
.grano::before {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --- Fila de servicio: revelado escalonado --- */
.fila-servicio {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition: opacity 620ms var(--e-salida), transform 620ms var(--e-salida),
              padding-left 420ms var(--e-suave), border-color 300ms ease;
  transition-delay: var(--d, 0ms);
}
.entra .fila-servicio { opacity: 1; transform: none; }

/* --- Pestanas de zona: indicador deslizante --- */
.pastilla {
  position: relative;
  transition: color var(--t-ui) var(--e-suave), border-color var(--t-ui) var(--e-suave);
}
.pastilla:active { transform: scale(.97); transition-duration: 90ms; }

@media (prefers-reduced-motion: reduce) {
  .linea > span, .sube, .cortina, .cortina img, .filete, .fila-servicio {
    transform: none !important;
    opacity: 1 !important;
    clip-path: none !important;
    transition: none !important;
  }
}

/* ============================================================
   17. RAMO DECORATIVO — llena el vacio del hero con el motivo
   del isotipo (rama de dos hojas), a mayor escala. Solo el trazo
   del tallo y transform/opacity en las hojas: nada de layout.
   ============================================================ */
.ramo-wrap {
  position: absolute;
  left: clamp(1.25rem, 3.5vw, 3rem);
  bottom: clamp(2rem, 7vh, 4.5rem);
  width: clamp(110px, 10vw, 170px);
  pointer-events: none;
  z-index: 0;
}

.ramo-tallo { display: block; transform-box: fill-box; transform-origin: 50% 100%; }

.ramo-trazo {
  stroke-dasharray: 700;
  stroke-dashoffset: 700;
  transition: stroke-dashoffset 1900ms var(--e-salida);
  transition-delay: var(--d, 0ms);
}
.entra .ramo-trazo { stroke-dashoffset: 0; }

.ramo-hoja {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  transform: scale(.4);
  transition: opacity 560ms var(--e-salida), transform 560ms var(--e-salida);
  transition-delay: var(--d, 0ms);
}
.entra .ramo-hoja { opacity: 1; transform: scale(1); }

.entra .ramo-tallo { animation: ramoBalanceo 9s ease-in-out 2.4s infinite; }
.entra .ramo-hoja:nth-child(odd)  { animation: ramoBrisa 5.5s ease-in-out 2.8s infinite; }
.entra .ramo-hoja:nth-child(even) { animation: ramoBrisa 6.5s ease-in-out 3.2s infinite reverse; }

@keyframes ramoBalanceo {
  0%, 100% { transform: rotate(-1deg); }
  50%      { transform: rotate(1deg); }
}
@keyframes ramoBrisa {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}

@media (prefers-reduced-motion: reduce) {
  .ramo-trazo { stroke-dashoffset: 0 !important; transition: none !important; }
  .ramo-hoja  { opacity: 1 !important; transform: none !important; transition: none !important; }
  .ramo-tallo, .entra .ramo-tallo, .entra .ramo-hoja { animation: none !important; }
}

/* ============================================================
   18. HERO v2 — cinematografico a sangre
   Sustituye al hero partido 54/46. La fotografia ocupa toda la
   pantalla y el texto se apoya sobre un degradado, no sobre un
   corte. Arquitectura de doble bisel en la placa de datos.
   Capas: lienzo 0 · scrim 1 · ramo 1 · contenido 2 · grano 3
   ============================================================ */
.hero-v2 { position: relative; isolation: isolate; }
.hero-v2.grano::before { z-index: 3; }

/* --- Lienzo fotografico: telon que sube --- */
.hero-lienzo {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1250ms var(--e-salida);
}
.entra .hero-lienzo { clip-path: inset(0 0 0 0); }

.hero-lienzo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 32%;
  transform: scale(1.16);
  transition: transform 2200ms var(--e-salida);
  will-change: transform;
}
.entra .hero-lienzo img { transform: scale(1); }

/* --- Scrim: legibilidad sin apagar la fotografia --- */
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    /* Banda superior: sin esto el menu cae sobre la parte clara de la
       fotografia y se vuelve ilegible. Se disipa rapido para no
       ensuciar la imagen. */
    linear-gradient(to bottom,
      rgb(var(--surface-base) / .62) 0%,
      rgb(var(--surface-base) / .30) 9%,
      rgb(var(--surface-base) / .08) 16%,
      transparent 24%),
    linear-gradient(101deg,
      rgb(var(--surface-base)) 6%,
      rgb(var(--surface-base) / .93) 30%,
      rgb(var(--surface-base) / .58) 52%,
      rgb(var(--surface-base) / .12) 78%,
      transparent 100%),
    linear-gradient(to top,
      rgb(var(--surface-base)) 0%,
      rgb(var(--surface-base) / .35) 30%,
      transparent 58%);
}
@media (max-width: 1023px) {
  .hero-scrim {
    background: linear-gradient(to top,
      rgb(var(--surface-base)) 14%,
      rgb(var(--surface-base) / .88) 46%,
      rgb(var(--surface-base) / .62) 82%,
      rgb(var(--surface-base) / .78) 100%);
  }
}

.hero-v2 .ramo-wrap { z-index: 1; opacity: .5; }
.hero-v2 .contenido-hero { position: relative; z-index: 2; }

/* --- Eyebrow: pastilla microscopica, no texto suelto --- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .6rem;
  padding: .45rem 1rem .45rem .8rem;
  border-radius: 999px;
  border: 1px solid rgb(var(--accent) / .30);
  background: rgb(var(--accent) / .08);
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(.5625rem, .5rem + .2vw, .6875rem);
  font-weight: 500;
  letter-spacing: clamp(.08em, .05em + .3vw, .18em);
  line-height: 1.5;
  text-transform: uppercase;
  color: rgb(var(--accent-soft));
}
.eyebrow__punto {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgb(var(--accent));
  flex: none;
}
.entra .eyebrow__punto { animation: pulsoSuave 2.4s ease-in-out infinite; }
@keyframes pulsoSuave { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* --- Boton isla: icono anidado en su propio circulo --- */
.btn-isla { padding-right: .5rem; }
.btn__icono {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: rgb(4 32 57 / .10);
  transition: transform .45s var(--e-suave), background-color .3s ease;
}
.btn-isla:hover .btn__icono {
  transform: translate(3px, -1px) scale(1.06);
  background: rgb(4 32 57 / .17);
}
.btn__icono svg { width: 15px; height: 15px; }

/* --- Placa de datos: doble bisel, radios concentricos --- */
.placa {
  padding: 6px;
  border-radius: 22px;
  background: rgb(var(--ink-strong) / .05);
  border: 1px solid rgb(var(--ink-strong) / .11);
}
.placa__nucleo {
  border-radius: 16px;
  background: rgb(var(--surface-base) / .55);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .09);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 640px) {
  .placa__nucleo { grid-template-columns: repeat(4, 1fr); }
  .placa__nucleo--tres { grid-template-columns: repeat(3, 1fr); }
}
/* Con tres datos, el ultimo ocupa la fila entera en movil */
.placa__nucleo--tres > .placa__dato:last-child { grid-column: 1 / -1; }
@media (min-width: 640px) {
  .placa__nucleo--tres > .placa__dato:last-child { grid-column: auto; }
}
.placa__dato {
  padding: 1.05rem 1.15rem;
  border-top: 1px solid rgb(var(--hairline) / .55);
  border-left: 1px solid rgb(var(--hairline) / .55);
}
.placa__dato:nth-child(-n+2) { border-top: 0; }
.placa__dato:nth-child(odd)  { border-left: 0; }
@media (min-width: 640px) {
  .placa__dato { border-top: 0; }
  .placa__dato:nth-child(odd) { border-left: 1px solid rgb(var(--hairline) / .55); }
  .placa__dato:first-child    { border-left: 0; }
}
.placa__clave {
  font-size: .6875rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgb(var(--ink-muted));
  margin-bottom: .4rem;
}
.placa__valor {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.05rem, .95rem + .45vw, 1.4rem);
  line-height: 1;
  color: rgb(var(--ink-strong));
}

@media (prefers-reduced-motion: reduce) {
  .hero-lienzo, .hero-lienzo img { transition: none !important; }
  .hero-lienzo { clip-path: none !important; }
  .hero-lienzo img { transform: none !important; }
  .entra .eyebrow__punto { animation: none !important; }
  .btn__icono { transition: none !important; }
}

/* ============================================================
   19. FOTOGRAFIA REAL
   El hero usa <picture> con srcset: cada dispositivo baja solo
   el ancho que necesita. La tarjeta de servicio pasa de icono
   a fotografia; el icono queda debajo como respaldo si la
   imagen falla en cargar.
   ============================================================ */
.hero-lienzo picture {
  display: block;
  width: 100%;
  height: 100%;
}

/* --- Fotografia en la tarjeta de servicio --- */
.tarjeta-servicio__foto {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
}
.tarjeta-servicio__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform 900ms var(--e-salida);
  will-change: transform;
}
.tarjeta-servicio:hover .tarjeta-servicio__foto img { transform: scale(1.07); }

/* Velo: mantiene legible el numero arriba y el borde inferior */
.tarjeta-servicio__visual::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(2,18,33,.46) 0%,
    rgba(2,18,33,.06) 36%,
    rgba(2,18,33,.04) 62%,
    rgba(2,18,33,.34) 100%);
}
.tarjeta-servicio__num { z-index: 3; }

@media (prefers-reduced-motion: reduce) {
  .tarjeta-servicio__foto img,
  .tarjeta-servicio:hover .tarjeta-servicio__foto img {
    transform: none !important;
    transition: none !important;
  }
}

/* ============================================================
   20. HERO · CARRUSEL DE FOTOGRAFIA
   Varias capas apiladas. Solo cambia la opacidad y un zoom lento
   en la activa: nada de desplazamiento lateral ni de layout.
   ============================================================ */
.hero-capa {
  position: absolute;
  inset: 0;
  opacity: 0;
  /* Fundido largo y con curva suave: el ritmo lo marca la calma del
     sitio, no la prisa. Con ease-in-out el cruce no tiene aristas. */
  transition: opacity 2800ms cubic-bezier(.4, 0, .3, 1);
  will-change: opacity;
}
.hero-capa.activa { opacity: 1; }

.hero-capa picture { display: block; width: 100%; height: 100%; }

/* El zoom es una TRANSICION, no un keyframe.
   Con keyframes, al quitar .activa la animacion desaparecia de golpe
   y la imagen saltaba a su escala base mientras seguia visible en
   pleno fundido: ese era el tiron. Con transicion, la capa que sale
   regresa despacio (7 s) y durante el fundido apenas se mueve. */
.hero-capa img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 64% 32%;
  transform: scale(1.17);
  /* La VUELTA es tres veces mas lenta que la ida. Asi la capa que sale
     apenas retrocede durante el cruce (un 2% del recorrido) y no se
     percibe como un rebote. */
  transition: transform 20000ms linear;
  will-change: transform;
}

/* La IDA dura EXACTAMENTE lo que la foto esta en pantalla (6,8 s), de
   modo que el recorrido de zoom se complete entero. Si dura mas, el
   cambio de foto lo corta a medias y el movimiento se pierde: ese era
   el motivo de que apenas se notara. */
.hero-capa.activa img {
  transform: scale(1);
  transition: transform 6800ms linear;
}

/* Alternancia: las capas pares se acercan en vez de alejarse, para
   que el movimiento no sea siempre el mismo gesto. */
.hero-capa:nth-child(even) img { transform: scale(1); }
.hero-capa:nth-child(even).activa img { transform: scale(1.17); }

/* Indicadores: filetes, no bolitas */
.hero-puntos {
  display: flex;
  gap: 10px;
  align-items: center;
}
.hero-punto {
  width: 30px;
  height: 2px;
  border: 0;
  padding: 0;
  background: currentColor;
  opacity: .28;
  cursor: pointer;
  transition: opacity .45s var(--e-suave), transform .45s var(--e-suave);
}
.hero-punto:hover { opacity: .6; }
.hero-punto[aria-current="true"] { opacity: 1; transform: scaleY(2); }

/* Con movimiento reducido el fundido SI se mantiene: cambiar opacidad
   no marea a nadie. Lo que se apaga es la escala, que es justo la parte
   que puede molestar a quien sufre vertigo.

   El !important es necesario: mas arriba hay una regla global de
   accesibilidad que deja TODAS las transiciones del sitio en .01ms, y
   se llevaba por delante tambien este fundido. Esta es la excepcion
   deliberada, no un parche. */
@media (prefers-reduced-motion: reduce) {
  .hero-capa {
    transition: opacity 2400ms cubic-bezier(.4, 0, .3, 1) !important;
  }
  .hero-capa img,
  .hero-capa.activa img,
  .hero-capa:nth-child(even) img,
  .hero-capa:nth-child(even).activa img {
    transform: none !important;
    transition: none !important;
  }
}

/* ============================================================
   21. TARJETA DE SERVICIO · PROFUNDIDAD 3D
   La tarjeta se inclina siguiendo el puntero y un reflejo dorado
   recorre la superficie como la luz sobre el aceite.
   ============================================================ */
.tarjeta-servicio { perspective: 1100px; overflow: visible; }

.tarjeta-3d {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  border-radius: 18px;
  overflow: hidden;
  background: rgb(var(--surface-elev));
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transform-style: preserve-3d;
  transition: transform 620ms var(--e-suave), box-shadow 520ms var(--e-suave);
}
.tarjeta-servicio:hover .tarjeta-3d {
  box-shadow: 0 26px 60px -28px rgb(2 18 33 / .55);
}

/* Reflejo especular que sigue al cursor */
.tarjeta-3d::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  transition: opacity 480ms var(--e-suave);
  background: radial-gradient(
    340px circle at var(--mx, 50%) var(--my, 50%),
    rgb(239 217 163 / .20) 0%,
    rgb(239 217 163 / .07) 34%,
    transparent 62%);
}
.tarjeta-servicio:hover .tarjeta-3d::after { opacity: 1; }

.tarjeta-servicio__visual { transform-style: preserve-3d; }
.tarjeta-servicio__cuerpo { position: relative; z-index: 5; }

@media (prefers-reduced-motion: reduce), (hover: none) {
  .tarjeta-3d { transform: none !important; transition: none !important; }
  .tarjeta-3d::after { display: none; }
}

/* ============================================================
   22. VIDEO EN LA TARJETA
   Aparece solo si existe assets/video/<id>.mp4. La comprobacion
   la hace barua-carrito.js con una peticion HEAD.
   ============================================================ */
.tarjeta-video {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: #04121f;
  opacity: 0;
  pointer-events: none;
  transition: opacity 520ms var(--e-suave);
}
.tarjeta-video.viendo { opacity: 1; pointer-events: auto; }
.tarjeta-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.btn-video {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .42rem .8rem .42rem .6rem;
  border-radius: 999px;
  border: 1px solid rgb(255 255 255 / .22);
  background: rgb(2 18 33 / .58);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #F5F5E9;
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .3s ease, border-color .3s ease, transform .3s var(--e-suave);
}
.btn-video:hover {
  background: rgb(2 18 33 / .78);
  border-color: rgb(var(--accent) / .7);
  transform: translateY(-1px);
}
.btn-video svg { width: 13px; height: 13px; }

/* ============================================================
   23. CARRITO
   Barra flotante que solo existe cuando hay algo dentro.
   ============================================================ */
.carrito-barra {
  position: fixed;
  left: 50%;
  bottom: clamp(1rem, 3vh, 2rem);
  z-index: 55;
  width: min(680px, calc(100vw - 2rem));
  transform: translate(-50%, 0);
  border-radius: 20px;
  padding: 6px;
  background: rgb(var(--ink-strong) / .07);
  border: 1px solid rgb(var(--ink-strong) / .13);
  box-shadow: 0 26px 64px -26px rgb(2 18 33 / .6);
  backdrop-filter: saturate(150%) blur(18px);
  -webkit-backdrop-filter: saturate(150%) blur(18px);
}
.carrito-barra__nucleo {
  border-radius: 15px;
  background: rgb(var(--surface-base) / .93);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .08);
  padding: .85rem 1rem .85rem 1.15rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.carrito-ficha {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .3rem .35rem .3rem .75rem;
  border-radius: 999px;
  border: 1px solid rgb(var(--hairline));
  font-size: .8125rem;
}
.carrito-ficha__x {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 0;
  background: rgb(var(--ink-muted) / .16);
  color: inherit;
  cursor: pointer;
  transition: background-color .25s ease;
}
.carrito-ficha__x:hover { background: rgb(var(--accent) / .3); }
.carrito-ficha__x svg { width: 11px; height: 11px; }

/* ============================================================
   24. AGENDA INCRUSTADA
   La agenda de produccion vive dentro de un marco propio para que
   se perciba un solo sistema. No se modifica ni una linea suya.
   ============================================================ */
.agenda-capa {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  grid-template-rows: auto 1fr;
  background: rgb(2 18 33 / .90);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.agenda-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .9rem clamp(.9rem, 3vw, 1.6rem);
  color: #F5F5E9;
  border-bottom: 1px solid rgb(255 255 255 / .10);
}
.agenda-marco {
  position: relative;
  margin: clamp(0px, 1.4vw, 18px);
  border-radius: clamp(0px, 1.2vw, 18px);
  overflow: hidden;
  background: #fff;
}
.agenda-marco iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.agenda-cargando {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  align-content: center;
  background: #fff;
  color: #042039;
  gap: .8rem;
  text-align: center;
  padding: 2rem;
}
.agenda-cerrar {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem 1rem;
  border-radius: 999px;
  border: 1px solid rgb(255 255 255 / .22);
  background: transparent;
  color: inherit;
  font-size: .8125rem;
  cursor: pointer;
  transition: background-color .3s ease, border-color .3s ease;
}
.agenda-cerrar:hover { background: rgb(255 255 255 / .10); border-color: rgb(var(--accent)); }

@keyframes giro { to { transform: rotate(360deg); } }
.girando { animation: giro 900ms linear infinite; }
@media (prefers-reduced-motion: reduce) { .girando { animation: none; } }

/* ============================================================
   25. LOGO REAL
   ============================================================ */
.logo-marca {
  display: block;
  width: auto;
  filter: drop-shadow(0 2px 6px rgb(2 18 33 / .35));
}

/* ============================================================
   26. ABRIR EN GRANDE — capa de clic sobre la tarjeta
   ============================================================ */
.tarjeta-abrir {
  position: absolute;
  inset: 0;
  z-index: 5;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: zoom-in;
  display: block;
}
.tarjeta-abrir__lupa {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgb(255 255 255 / .24);
  background: rgb(2 18 33 / .5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #F5F5E9;
  opacity: 0;
  transform: scale(.85);
  transition: opacity .35s var(--e-suave), transform .35s var(--e-suave);
}
.tarjeta-abrir__lupa svg { width: 16px; height: 16px; }
.tarjeta-servicio:hover .tarjeta-abrir__lupa,
.tarjeta-abrir:focus-visible .tarjeta-abrir__lupa { opacity: 1; transform: scale(1); }

/* El boton de video queda por encima de la capa de clic */
.btn-video { z-index: 6; }

/* ============================================================
   27. MARCO DE VIDEO — seccion La experiencia
   ============================================================ */
.marco-video {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: #04121f;
}
.marco-video video { display: block; }
.marco-video__filete {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgb(var(--accent) / .22);
}

/* ============================================================
   28. OPINIONES
   Cada tarjeta imita el comentario de su red, con la barra de
   color de la plataforma arriba.
   ============================================================ */
.opiniones::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 50% at 15% 0%, rgb(218 165 32 / .10), transparent 70%),
    radial-gradient(50% 45% at 95% 100%, rgb(20 69 111 / .35), transparent 70%);
}

.marcador {
  border-radius: 18px;
  padding: 1.25rem 1.35rem;
  border: 1px solid rgb(var(--hairline));
  background: rgb(var(--surface-elev) / .55);
}
.marcador__nota { display: flex; align-items: center; gap: .75rem; margin-bottom: .6rem; }
.marcador__cifra {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 2.25rem;
  line-height: 1;
  color: rgb(var(--ink-strong));
}
.marcador__estrellas { display: inline-flex; gap: 2px; color: rgb(var(--accent)); }
.marcador__estrellas svg { width: 15px; height: 15px; }

.rejilla-opiniones {
  display: grid;
  gap: 1.15rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .rejilla-opiniones { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .rejilla-opiniones { grid-template-columns: repeat(3, 1fr); } }

.opinion {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  padding: 1.35rem 1.35rem 1.1rem;
  background: rgb(var(--surface-elev) / .72);
  border: 1px solid rgb(var(--hairline));
  overflow: hidden;
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition: opacity 620ms var(--e-salida), transform 620ms var(--e-salida),
              border-color var(--t-ui) var(--e-suave), box-shadow var(--t-ui) var(--e-suave);
  transition-delay: var(--d, 0ms);
}
.entra .opinion { opacity: 1; transform: none; }
.opinion:hover {
  border-color: rgb(var(--accent) / .45);
  box-shadow: 0 20px 44px -26px rgb(2 18 33 / .7);
}

/* Filete superior con el color de la red */
.opinion::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--red, rgb(var(--accent)));
}
.opinion--instagram { --red: linear-gradient(90deg, #F58529, #DD2A7B, #8134AF); }
.opinion--facebook  { --red: #1877F2; }
.opinion--tiktok    { --red: linear-gradient(90deg, #25F4EE, #FE2C55); }
.opinion--whatsapp  { --red: #25D366; }
.opinion--google    { --red: linear-gradient(90deg, #4285F4, #34A853, #FBBC05, #EA4335); }
.opinion--web       { --red: rgb(var(--accent)); }

.opinion__cabecera { display: flex; align-items: center; gap: .75rem; margin-bottom: .9rem; }
.opinion__avatar {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  flex: none;
  border-radius: 999px;
  background: rgb(var(--accent) / .16);
  border: 1px solid rgb(var(--accent) / .35);
  color: rgb(var(--accent-soft));
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .04em;
}
.opinion__nombre {
  font-size: .9375rem;
  color: rgb(var(--ink-strong));
  line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.opinion__handle {
  font-size: .75rem;
  opacity: .6;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.opinion__red { margin-left: auto; flex: none; opacity: .85; }
.opinion__red svg { width: 19px; height: 19px; }
.opinion--instagram .opinion__red { color: #DD2A7B; }
.opinion--facebook  .opinion__red { color: #1877F2; }
.opinion--tiktok    .opinion__red { color: #25F4EE; }
.opinion--whatsapp  .opinion__red { color: #25D366; }
.opinion--google    .opinion__red { color: #4285F4; }
.opinion--web       .opinion__red { color: rgb(var(--accent)); }

.opinion__texto {
  font-size: .9375rem;
  line-height: 1.6;
  opacity: .88;
  margin-bottom: 1.1rem;
  flex: 1;
}
.opinion__pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding-top: .85rem;
  border-top: 1px solid rgb(var(--hairline) / .8);
}
.opinion__estrellas { display: inline-flex; gap: 1px; color: rgb(var(--accent)); }
.opinion__estrellas svg { width: 13px; height: 13px; }
.opinion__meta {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .75rem;
  opacity: .55;
}
.opinion__likes { display: inline-flex; align-items: center; gap: .25rem; }
.opinion__likes svg { width: 12px; height: 12px; }

@media (prefers-reduced-motion: reduce) {
  .opinion { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ============================================================
   29. PREGUNTAS — textura de lino y fichas
   ============================================================ */
.preguntas {
  background-color: rgb(var(--surface-sunken));
  background-image:
    radial-gradient(70% 55% at 100% 0%, rgb(218 165 32 / .08), transparent 65%),
    radial-gradient(60% 50% at 0% 100%, rgb(140 98 33 / .07), transparent 65%);
}
.preguntas::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.preguntas__marca {
  position: absolute;
  right: -2%;
  bottom: -6%;
  width: clamp(180px, 22vw, 340px);
  opacity: .07;
  pointer-events: none;
}

.pregunta {
  border-radius: 14px;
  border: 1px solid transparent;
  background: transparent;
  margin-bottom: .5rem;
  transition: background-color var(--t-ui) var(--e-suave),
              border-color var(--t-ui) var(--e-suave);
}
.pregunta:hover { border-color: rgb(var(--hairline)); background: rgb(var(--surface-base) / .5); }
.pregunta--abierta {
  border-color: rgb(var(--accent) / .35);
  background: rgb(var(--surface-base) / .75);
  box-shadow: 0 14px 34px -26px rgb(2 18 33 / .5);
}

.pregunta__boton {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.15rem 1.15rem;
  text-align: left;
  cursor: pointer;
}
.pregunta__num {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: .8125rem;
  letter-spacing: .1em;
  color: rgb(var(--accent));
  opacity: .75;
  flex: none;
  width: 1.6rem;
}
.pregunta__mas {
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  flex: none;
  border-radius: 999px;
  border: 1px solid rgb(var(--hairline));
  color: rgb(var(--ink-body));
  transition: transform var(--t-ui) var(--e-suave), border-color var(--t-ui) ease, color var(--t-ui) ease;
}
.pregunta__mas svg { width: 15px; height: 15px; }
.pregunta--abierta .pregunta__mas {
  transform: rotate(135deg);
  border-color: rgb(var(--accent));
  color: rgb(var(--accent));
}
.pregunta__respuesta {
  font-size: .9375rem;
  line-height: 1.65;
  opacity: .75;
  max-width: 62ch;
  padding: 0 1.15rem 1.3rem 3.75rem;
}

.ficha-ayuda {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: 1rem 1.15rem;
  border-radius: 16px;
  border: 1px solid rgb(var(--hairline));
  background: rgb(var(--surface-base) / .7);
  transition: border-color var(--t-ui) ease, transform var(--t-ui) var(--e-suave), box-shadow var(--t-ui) ease;
}
.ficha-ayuda:hover {
  border-color: rgb(var(--accent));
  transform: translateY(-2px);
  box-shadow: 0 16px 34px -24px rgb(2 18 33 / .55);
}
.ficha-ayuda__icono {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  flex: none;
  border-radius: 999px;
  background: rgb(var(--accent) / .12);
  color: rgb(var(--accent));
}
.ficha-ayuda__icono svg { width: 20px; height: 20px; }

@media (prefers-reduced-motion: reduce) {
  .pregunta__mas, .ficha-ayuda { transition: none !important; }
  .ficha-ayuda:hover { transform: none; }
}

/* ============================================================
   30. CONTACTO
   ============================================================ */
.contacto {
  background-color: rgb(var(--surface-base));
  background-image: radial-gradient(55% 45% at 90% 10%, rgb(218 165 32 / .07), transparent 65%);
}

.asistente {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.1rem;
  border-radius: 20px;
  border: 1px solid rgb(var(--hairline));
  background: rgb(var(--surface-elev));
  transition: border-color var(--t-ui) ease, transform var(--t-ui) var(--e-suave), box-shadow var(--t-ui) ease;
}
.asistente:hover {
  border-color: rgb(var(--accent));
  transform: translateY(-2px);
  box-shadow: 0 20px 42px -26px rgb(2 18 33 / .5);
}
.asistente__avatar {
  position: relative;
  display: grid;
  place-items: center;
  width: 58px; height: 58px;
  flex: none;
  border-radius: 999px;
  background: #042039;
  border: 1px solid rgb(var(--accent) / .35);
}
.asistente__avatar img { width: 68%; height: 68%; object-fit: contain; }
.asistente__latido {
  position: absolute;
  inset: -4px;
  border-radius: 999px;
  border: 1px solid rgb(var(--accent) / .5);
  animation: latido 2.8s ease-out infinite;
}
@keyframes latido {
  0%   { transform: scale(1);    opacity: .7; }
  70%  { transform: scale(1.22); opacity: 0; }
  100% { transform: scale(1.22); opacity: 0; }
}
.asistente__wa {
  position: absolute;
  right: -3px; bottom: -3px;
  display: grid;
  place-items: center;
  width: 22px; height: 22px;
  border-radius: 999px;
  background: #25D366;
  color: #fff;
  border: 2px solid rgb(var(--surface-elev));
}
.asistente__wa svg { width: 12px; height: 12px; }
.asistente__nombre { display: block; font-size: .9375rem; color: rgb(var(--ink-strong)); }
.asistente__estado {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-size: .75rem;
  opacity: .6;
  margin-bottom: .35rem;
}
.asistente__punto {
  width: 6px; height: 6px;
  border-radius: 999px;
  background: #25D366;
  animation: pulsoSuave 2.2s ease-in-out infinite;
}
.asistente__globo {
  display: inline-block;
  font-size: .8125rem;
  line-height: 1.4;
  padding: .45rem .75rem;
  border-radius: 12px 12px 12px 3px;
  background: rgb(var(--accent) / .12);
  color: rgb(var(--ink-body));
}
.asistente__ir {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  flex: none;
  border-radius: 999px;
  background: rgb(var(--ink-muted) / .12);
  transition: transform var(--t-ui) var(--e-suave), background-color var(--t-ui) ease;
}
.asistente__ir svg { width: 15px; height: 15px; }
.asistente:hover .asistente__ir {
  transform: translateX(3px);
  background: rgb(var(--accent) / .22);
}

.rejilla-canales {
  display: grid;
  gap: .85rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .rejilla-canales { grid-template-columns: repeat(2, 1fr); } }

.canal {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: 1rem 1.1rem;
  border-radius: 16px;
  border: 1px solid rgb(var(--hairline));
  background: rgb(var(--surface-elev) / .7);
  transition: border-color var(--t-ui) ease, transform var(--t-ui) var(--e-suave), box-shadow var(--t-ui) ease;
}
a.canal:hover {
  transform: translateY(-2px);
  border-color: rgb(var(--accent) / .55);
  box-shadow: 0 18px 38px -26px rgb(2 18 33 / .5);
}
.canal--ancho { grid-column: 1 / -1; }
.canal__icono {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  flex: none;
  border-radius: 999px;
  background: rgb(var(--ink-muted) / .1);
  color: rgb(var(--ink-body));
}
.canal__icono svg { width: 20px; height: 20px; }
.canal--wa   .canal__icono { background: rgb(37 211 102 / .14); color: #1FA855; }
.canal--ig   .canal__icono { background: rgb(221 42 123 / .12); color: #DD2A7B; }
.canal--tt   .canal__icono { background: rgb(254 44 85 / .12);  color: #FE2C55; }
.canal--fb   .canal__icono { background: rgb(24 119 242 / .12); color: #1877F2; }
.canal--mail .canal__icono { background: rgb(var(--accent) / .14); color: rgb(var(--accent)); }
.canal--horario .canal__icono { background: rgb(var(--accent) / .1); color: rgb(var(--accent)); }
.canal--horario { cursor: default; }

.canal__titulo { display: block; font-size: .9375rem; color: rgb(var(--ink-strong)); line-height: 1.25; }
.canal__dato {
  display: block;
  font-size: .8125rem;
  opacity: .62;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.canal__flecha {
  margin-left: auto;
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  flex: none;
  border-radius: 999px;
  background: rgb(37 211 102 / .14);
  color: #1FA855;
  transition: transform var(--t-ui) var(--e-suave);
}
.canal__flecha svg { width: 15px; height: 15px; }
a.canal:hover .canal__flecha { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  .asistente, .canal, .canal__flecha, .asistente__ir { transition: none !important; }
  a.canal:hover, .asistente:hover { transform: none; }
  .asistente__latido, .asistente__punto { animation: none !important; }
}

/* ============================================================
   31. ASISTENTE FLOTANTE
   ============================================================ */
.asistente-flota {
  position: fixed;
  right: clamp(1rem, 2.5vw, 1.5rem);
  bottom: clamp(1rem, 2.5vw, 1.5rem);
  z-index: 45;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .7rem;
}

.asistente-flota__boton {
  position: relative;
  display: grid;
  place-items: center;
  width: 62px; height: 62px;
  border-radius: 999px;
  background: #042039;
  border: 1px solid rgb(218 165 32 / .45);
  box-shadow: 0 14px 34px -14px rgb(2 18 33 / .75);
  transition: transform .45s var(--e-suave), box-shadow .45s ease;
}
.asistente-flota__boton:hover {
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 20px 44px -16px rgb(2 18 33 / .85);
}
.asistente-flota__cara { width: 62%; height: 62%; object-fit: contain; }
.asistente-flota__aro {
  position: absolute;
  inset: -5px;
  border-radius: 999px;
  border: 1px solid rgb(218 165 32 / .55);
  animation: latido 3s ease-out infinite;
  pointer-events: none;
}
.asistente-flota__wa {
  position: absolute;
  right: -2px; bottom: -2px;
  display: grid;
  place-items: center;
  width: 24px; height: 24px;
  border-radius: 999px;
  background: #25D366;
  color: #fff;
  border: 2px solid #042039;
}
.asistente-flota__wa svg { width: 13px; height: 13px; }

.asistente-flota__globo {
  position: relative;
  width: min(272px, calc(100vw - 2.5rem));
  padding: .95rem 1.05rem 1rem;
  border-radius: 16px 16px 4px 16px;
  background: #FCFAF5;
  color: #042039;
  border: 1px solid rgb(2 18 33 / .1);
  box-shadow: 0 22px 48px -22px rgb(2 18 33 / .55);
}
.asistente-flota__quien {
  font-family: 'DM Sans', sans-serif;
  font-size: .625rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #8C6221;
  margin-bottom: .35rem;
}
.asistente-flota__texto {
  font-size: .875rem;
  line-height: 1.5;
  margin-bottom: .8rem;
}
.asistente-flota__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 40px;
  border-radius: 999px;
  background: #25D366;
  color: #fff;
  font-size: .8125rem;
  font-weight: 500;
  transition: background-color .3s ease;
}
.asistente-flota__cta:hover { background: #1FA855; }
.asistente-flota__x {
  position: absolute;
  top: 8px; right: 8px;
  display: grid;
  place-items: center;
  width: 24px; height: 24px;
  border-radius: 999px;
  border: 0;
  background: rgb(2 18 33 / .07);
  color: #042039;
  cursor: pointer;
  transition: background-color .25s ease;
}
.asistente-flota__x:hover { background: rgb(2 18 33 / .14); }
.asistente-flota__x svg { width: 11px; height: 11px; }

@media (prefers-reduced-motion: reduce) {
  .asistente-flota__aro { animation: none !important; }
  .asistente-flota__boton { transition: none !important; }
  .asistente-flota__boton:hover { transform: none; }
}

/* La barra del carrito no debe chocar con el asistente */
@media (max-width: 767px) {
  .carrito-barra { bottom: 6.2rem; }
}

/* ============================================================
   32. VISOR AMPLIADO
   ============================================================ */
.visor {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: grid;
  place-items: center;
  padding: clamp(.75rem, 3vw, 2.5rem);
}
.visor__fondo {
  position: absolute;
  inset: 0;
  background: rgb(2 18 33 / .88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.visor__caja {
  position: relative;
  display: grid;
  width: min(1040px, 100%);
  max-height: 92vh;
  border-radius: 20px;
  overflow: hidden;
  background: rgb(var(--surface-base));
  grid-template-columns: 1fr;
  box-shadow: 0 40px 90px -40px rgb(0 0 0 / .8);
}
@media (min-width: 860px) {
  .visor__caja { grid-template-columns: 1.15fr .85fr; }
}
.visor__medio {
  position: relative;
  background: #04121f;
  min-height: 260px;
  max-height: 60vh;
}
@media (min-width: 860px) { .visor__medio { max-height: none; } }
.visor__medio img,
.visor__medio video {
  width: 100%;
  height: 100%;
  max-height: 60vh;
  object-fit: cover;
  display: block;
}
@media (min-width: 860px) {
  .visor__medio img, .visor__medio video { max-height: 92vh; }
}
.visor__cerrar {
  position: absolute;
  top: 12px; right: 12px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  border-radius: 999px;
  border: 1px solid rgb(255 255 255 / .25);
  background: rgb(2 18 33 / .55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #F5F5E9;
  cursor: pointer;
  transition: background-color .3s ease, border-color .3s ease;
}
.visor__cerrar:hover { background: rgb(2 18 33 / .8); border-color: rgb(var(--accent)); }
.visor__cerrar svg { width: 16px; height: 16px; }

.visor__panel {
  padding: clamp(1.25rem, 3vw, 2rem);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.visor__tabs {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: rgb(var(--ink-muted) / .1);
  margin-bottom: 1.5rem;
  align-self: flex-start;
}
.visor__tabs button {
  border: 0;
  cursor: pointer;
  padding: .4rem 1rem;
  border-radius: 999px;
  background: transparent;
  color: rgb(var(--ink-body));
  font-size: .8125rem;
  transition: background-color .3s ease, color .3s ease;
}
.visor__tabs button.es-activa {
  background: rgb(var(--surface-base));
  color: rgb(var(--ink-strong));
  box-shadow: 0 2px 8px -4px rgb(2 18 33 / .4);
}
.visor__pie {
  margin-top: auto;
  padding-top: 1.25rem;
  border-top: 1px solid rgb(var(--hairline));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

/* ============================================================
   33. POLVO DORADO DEL HERO
   Motas de luz suspendidas en el aire de la escena. Se avivan y
   se apartan al paso del cursor, con un halo calido detras.

   Se pinta en su propio lienzo, asi que no toca el layout ni la
   fotografia. El movimiento y la reaccion los lleva BaruaMotion.

   Sin puntero fino no se monta: no hay cursor al que reaccionar
   y en movil solo gastaria bateria. Esa decision vive en el JS.
   ============================================================ */
.hero-polvo {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1100ms var(--e-salida);
}

.hero-v2.polvo-listo .hero-polvo { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .hero-polvo { transition-duration: 200ms; }
}

/* ============================================================
   34. CONTADOR DE CARRITO
   El boton "Añadir" se convierte en contador, como en una tienda.
   ============================================================ */
.contador {
  display: inline-flex;
  align-items: center;
  gap: .15rem;
  padding: 3px;
  border-radius: 999px;
  border: 1px solid rgb(var(--accent) / .4);
  background: rgb(var(--accent) / .1);
}
.contador__btn {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgb(var(--accent));
  cursor: pointer;
  transition: background-color .25s ease, transform .2s var(--e-suave);
}
.contador__btn:hover { background: rgb(var(--accent) / .2); }
.contador__btn:active { transform: scale(.9); }
.contador__btn svg { width: 15px; height: 15px; }
.contador__n {
  min-width: 1.5rem;
  text-align: center;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.0625rem;
  line-height: 1;
  color: rgb(var(--ink-strong));
}
.contador--grande .contador__btn { width: 38px; height: 38px; }
.contador--grande .contador__n { font-size: 1.25rem; min-width: 2rem; }

@media (prefers-reduced-motion: reduce) {
  .contador__btn { transition: none !important; }
  .contador__btn:active { transform: none; }
}

/* ============================================================
   35. CARRITO — cantidad y aviso de grupo
   ============================================================ */
.carrito-ficha__n {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: .9375rem;
  line-height: 1;
  color: rgb(var(--accent));
}

.carrito-aviso {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  margin-top: .7rem;
  font-size: .8125rem;
  line-height: 1.45;
  color: rgb(var(--ink-muted));
  max-width: 46ch;
}
.carrito-aviso svg {
  width: 15px;
  height: 15px;
  flex: none;
  margin-top: .12rem;
  color: rgb(var(--accent));
}

/* Boton verde para el camino de WhatsApp */
.btn-wa {
  background: #25D366;
  color: #fff;
  box-shadow: var(--shadow-suave);
}
.btn-wa:hover { background: #1FA855; box-shadow: var(--shadow-alta); }
.btn-wa .btn__icono { background: rgb(255 255 255 / .18); }
.btn-wa:hover .btn__icono { background: rgb(255 255 255 / .26); }

/* ============================================================
   36. MARCO DE VIDEO — La experiencia
   El video es vertical: se muestra ENTERO sobre fondo oscuro en vez
   de recortarlo, y se puede abrir en grande.
   ============================================================ */
.marco-video__pieza {
  display: block;
  width: 100%;
  height: clamp(420px, 52vw, 620px);
  object-fit: contain;
  background: #04121f;
}
.marco-video__abrir {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: zoom-in;
}
.marco-video__lupa {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid rgb(255 255 255 / .24);
  background: rgb(2 18 33 / .55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #F5F5E9;
  opacity: 0;
  transform: scale(.85);
  transition: opacity .35s var(--e-suave), transform .35s var(--e-suave);
}
.marco-video__lupa svg { width: 17px; height: 17px; }
.marco-video:hover .marco-video__lupa,
.marco-video__abrir:focus-visible .marco-video__lupa { opacity: 1; transform: scale(1); }

@media (prefers-reduced-motion: reduce) {
  .marco-video__lupa { transition: none !important; }
}

/* En el visor, el video vertical tambien se ve entero */
.visor__medio video { object-fit: contain; background: #04121f; }

/* En pantalla estrecha la barra del carrito se apila: si no, el bloque
   del total no cede sitio y el texto de la izquierda acaba partido
   palabra por palabra. */
@media (max-width: 720px) {
  .carrito-barra__nucleo {
    flex-direction: column;
    align-items: stretch;
    gap: .85rem;
  }
  .carrito-barra__nucleo > div:last-child {
    justify-content: space-between;
    width: 100%;
  }
  .carrito-aviso { max-width: none; }
}

/* Boton para activar el sonido del video en el visor.
   Va arriba a la izquierda: abajo estan los controles del navegador y
   arriba a la derecha el boton de cerrar. */
.visor__sonido {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .45rem .9rem .45rem .75rem;
  border-radius: 999px;
  border: 1px solid rgb(255 255 255 / .26);
  background: rgb(2 18 33 / .62);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #F5F5E9;
  font-size: .8125rem;
  cursor: pointer;
  transition: background-color .3s ease, border-color .3s ease;
}
.visor__sonido:hover {
  background: rgb(2 18 33 / .82);
  border-color: rgb(var(--accent));
}
.visor__sonido svg { width: 16px; height: 16px; }

/* ============================================================
   37. MASAJES CON ZONA RESTRINGIDA
   Los que solo se ofrecen en una zona llevan distintivo, y fuera
   de ella no se pueden añadir ni calcular.
   ============================================================ */
.insignia-zona {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  padding: .3rem .7rem;
  border-radius: 999px;
  border: 1px solid rgb(var(--accent) / .55);
  background: rgb(2 18 33 / .58);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #EFD9A3;
  font-size: .625rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Fila de tarifa sin precio en la zona elegida */
.fila-inactiva { cursor: default; opacity: .45; }
.fila-inactiva:hover { background: transparent; }

/* ============================================================
   38. AVISO AL CAMBIAR DE ZONA
   Aparece bajo las pastillas de zona cuando el cambio obliga a
   sacar algo del carrito. Es informativo y se va solo: no lleva
   boton de cerrar para no pedirle una accion a nadie.
   ============================================================ */
.aviso-zona {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  margin: -1.25rem 0 1.75rem;
  padding: .7rem .95rem;
  max-width: 46rem;
  border-radius: .85rem;
  border: 1px solid rgb(var(--accent) / .35);
  background: rgb(var(--accent) / .07);
  color: rgb(var(--ink-body));
  font-size: .8125rem;
  line-height: 1.5;
}
.aviso-zona::before {
  content: '';
  flex: none;
  width: 4px;
  align-self: stretch;
  margin: .1rem 0;
  border-radius: 999px;
  background: rgb(var(--accent) / .75);
}