/* ============================================================
   Mirrow Landing v3 — generado desde 'Mirrow Landing v3.dc.html'
   (Claude Design) por scratchpad/build_v3.py. NO editar a mano:
   vuelve a generarse. Hojas aparte de styles.css a proposito, para
   no añadir una capa 11 al CSS historico.
   ============================================================ */

  /* La landing es una pagina CLARA y hay que decirlo. Sin esta linea, los
     navegadores Chromium (Brave, Chrome, Edge) pueden aplicar su modo oscuro
     automatico y reinterpretan toda la paleta: el crema se vuelve beige sucio
     y los pasteles se saturan. Firefox no lo hace, y de ahi que la misma
     pagina se viera distinta en cada navegador. */
  :root { color-scheme: light; }
  body { margin:0; background:#F7F4EE; color:#1a1a1c; font-family:Inter, system-ui, sans-serif; -webkit-font-smoothing:antialiased; }
  a { color:#1a1a1c; text-decoration:none; }
  a:hover { color:#F0563C; }
  @keyframes mrw-marquee { from { transform:translateX(0); } to { transform:translateX(-50%); } }
  @keyframes mrw-marquee-rev { from { transform:translateX(-50%); } to { transform:translateX(0); } }
  @keyframes mrw-pulse { 0%,100% { opacity:.55; transform:scale(1); } 50% { opacity:1; transform:scale(1.06); } }
  @keyframes mrw-bars { 0%,100% { height:6px; } 50% { height:18px; } }
  @keyframes mrw-float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-10px); } }
  html.reveal-ready [data-reveal] { opacity:0; transform:translateY(20px); transition:opacity .8s cubic-bezier(0.22,1,0.36,1), transform .8s cubic-bezier(0.22,1,0.36,1); }
  /* OJO CON LA ESPECIFICIDAD. Esta regla tiene que llevar el mismo `html.reveal-ready`
     que la de arriba, o PIERDE y no revela nada:
        html.reveal-ready [data-reveal]        -> (0,2,1)  oculta
        [data-reveal].is-in                    -> (0,2,0)  revelaba... y perdia
     Estuvo asi: la clase .is-in que ponen v3.js y el observador NO hacia absolutamente
     nada, y toda la pagina por debajo del hero se quedaba invisible hasta que saltaba
     la red de seguridad de los 4 s de v3.js. Eso era el "tarda un par de segundos".
     Comprobado en el navegador: con .is-in Y reveal-ready la opacidad computada era 0. */
  html.reveal-ready [data-reveal].is-in { opacity:1; transform:none; }
  @media (prefers-reduced-motion: reduce) { [data-reveal] { opacity:1; transform:none; transition:none; } [style*="mrw-float"] { animation:none !important; } }


/* ---------- hovers (venian como style-hover, que solo entiende Claude Design) ---------- */
.hv-0:hover { background:rgba(255,255,255,0.1); color:#fff; }
.hv-1:hover { background:rgba(255,255,255,0.1); color:#fff; }
.hv-2:hover { background:rgba(255,255,255,0.1); color:#fff; }
.hv-3:hover { background:#fff; color:#0A1430; }
.hv-4:hover { background:#fff; color:#0A1430; transform:translateY(-2px); }
.hv-5:hover { background:#33322f; color:#F7F4EE; }
.hv-6:hover { transform:translateY(-4px); }
.hv-7:hover { transform:translateY(-4px); }
.hv-8:hover { transform:translateY(-4px); }
.hv-9:hover { background:#33322f; color:#F7F4EE; }
.hv-10:hover { background:rgba(255,255,255,0.6); }
.hv-11:hover { background:rgba(26,26,28,0.05); }
.hv-12:hover { background:#c9452f; color:#fff; }
.hv-13:hover { background:#33322f; color:#F7F4EE; }
.hv-14:hover { background:#fff; color:#0A1430; transform:translateY(-2px); }

/* ---------- responsive: el diseño original trae rejillas fijas ---------- */
img { max-width: 100%; }
@media (max-width: 1024px) {
  .v3 h1 { font-size: clamp(40px, 8vw, 62px) !important; }
  .v3 h2 { font-size: clamp(30px, 6vw, 44px) !important; }
  .v3 h3 { font-size: clamp(26px, 5vw, 36px) !important; }
}
@media (max-width: 900px) {
  .v3 [style*="grid-template-columns"]:not(nav) { grid-template-columns: 1fr !important; }
  .v3 section { padding-left: 20px !important; padding-right: 20px !important; }
  .v3 [style*="padding:64px 56px"], .v3 [style*="padding:56px 48px"],
  .v3 [style*="padding:56px 44px"], .v3 [style*="padding:120px 56px"] { padding: 40px 24px !important; }
  .v3 nav { grid-template-columns: 1fr auto !important; gap: 12px; }
  .v3 nav > div:nth-child(2) { display: none !important; }
  .v3 header { min-height: 0 !important; }
}
@media (max-width: 560px) {
  .v3 nav a[href="/auth"]:first-of-type { display: none !important; }
}


/* ---------- consentimiento de cookies: copiado tal cual de styles.css ---------- */
/* ============================================================
   COOKIE CONSENT (banner + panel de preferencias)
   Es UI global (cuelga de <body>), no contenido editorial: fija sus propios
   tokens oscuros aquí para que NUNCA herede el tema de la página (p.ej.
   body.lp2, que reescribe --ink a valores claros para su sección "papel" y
   dejaba el texto casi negro sobre el fondo oscuro del banner = ilegible).
   Botón principal en BLANCO (lenguaje Mirrow: glass oscuro + botón blanco,
   nada de degradados de color en los controles).
   ============================================================ */
/* ─────────────────────────────────────────────────────────────────────────
   BANNER DE COOKIES

   Antes era una franja de 980 px cruzando la pantalla entera por abajo, con
   el texto a la izquierda y tres botones a la derecha que se descolocaban al
   estrecharse. Ahora es una TARJETA acotada en la esquina: ocupa lo que
   necesita, tapa mucho menos y se lee de una vez.

   Sin backdrop-filter A PROPÓSITO: en la landing este banner sale sobre el
   vídeo del hero, y desenfocar el fondo obliga a recalcularlo en cada
   fotograma del vídeo. Fondo sólido: se ve igual de bien y no cuesta nada.

   RECHAZAR Y ACEPTAR TIENEN EL MISMO TAMAÑO Y EL MISMO PESO. No es una
   decisión estética: la guía de cookies de la AEPD exige que rechazar sea tan
   fácil y tan visible como aceptar. Un "Aceptar" grande y blanco junto a un
   "Rechazar" gris y pequeño es justo el patrón que sancionan.
   ───────────────────────────────────────────────────────────────────────── */
.ck-banner{position:fixed;left:20px;bottom:20px;transform:translateY(24px);
  width:min(408px,calc(100% - 32px));display:block;box-sizing:border-box;
  background:#111017;border:1px solid rgba(255,255,255,0.11);
  border-radius:22px;padding:20px 20px 18px;
  --ink:#f5f3fa;--ink-2:rgba(236,233,245,0.70);--ink-3:rgba(236,233,245,0.50);
  --line:rgba(255,255,255,0.10);--glass-line:rgba(255,255,255,0.14);
  color:var(--ink);
  box-shadow:0 24px 64px -20px rgba(0,0,0,0.75),inset 0 1px 0 rgba(255,255,255,0.07);
  z-index:400;opacity:0;transition:transform .5s var(--ease),opacity .4s}
.ck-banner.show{transform:translateY(0);opacity:1}
.ck-text{font-family:var(--sans)}
.ck-title{display:block;font-weight:600;font-size:15px;margin-bottom:6px;color:var(--ink);letter-spacing:-0.01em}
.ck-body{margin:0;font-size:13px;line-height:1.6;color:var(--ink-2)}

/* Los dos botones en una fila, a mitades exactas. `order` los recoloca sin
   tocar el JS: el DOM los crea rechazar → configurar → aceptar, y aquí
   "configurar" se manda al final como enlace de texto. */
/* `stretch` y no `center`: los dos botones tienen textos de distinto largo
   ("Rechazar opcionales" parte en dos líneas y "Aceptar todas" no), así que
   con `center` salían con alturas distintas — 54 px frente a 39 px — y volvía
   a parecer que uno importa más que el otro. Estirados, miden exactamente lo
   mismo sea cual sea el idioma. */
.ck-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:stretch;margin-top:16px}
.ck-btn{font-size:13.5px;padding:11px 16px;border-radius:12px;font-weight:600;
  flex:1 1 0;min-width:0;text-align:center;justify-content:center}
.ck-banner .ck-btn:nth-of-type(1){order:1}   /* rechazar */
.ck-banner .ck-btn:nth-of-type(3){order:2}   /* aceptar  */

/* Configurar deja de ser un botón compitiendo por atención y pasa a enlace,
   en la misma línea que "Más información": son las dos acciones secundarias. */
.ck-banner .ck-btn:nth-of-type(2){order:3;flex:0 0 auto;align-self:center;background:none;border:0;
  padding:0;font-weight:500;font-size:13px;color:var(--ink-3);text-decoration:underline;
  text-underline-offset:3px;box-shadow:none;text-align:left}
.ck-banner .ck-btn:nth-of-type(2):hover{color:var(--ink);background:none}
/* "Más información" vive DENTRO del bloque de texto (así lo crea el JS), no
   junto a los botones: se estiliza como el enlace que es, bajo el párrafo. */
.ck-more{display:inline-block;margin-top:8px;font-size:13px;font-weight:500;
  color:var(--ink-3);text-decoration:underline;text-underline-offset:3px}
.ck-more:hover{color:var(--ink)}

/* Mismo tamaño, misma forma, misma altura: solo cambia el relleno. Ninguno de
   los dos es más fácil de pulsar que el otro. */
.ck-banner .btn-coral,.ck-panel .btn-coral,body.lp2 .ck-banner .btn-coral,body.lp2 .ck-panel .btn-coral{background:#fff;color:#0a0a0c;border:1px solid #fff;box-shadow:none}
.ck-banner .btn-coral:hover,.ck-panel .btn-coral:hover,body.lp2 .ck-banner .btn-coral:hover,body.lp2 .ck-panel .btn-coral:hover{background:rgba(255,255,255,0.88);border-color:rgba(255,255,255,0.88)}
.ck-banner .btn-ghost,.ck-panel .btn-ghost{background:rgba(255,255,255,0.09);color:var(--ink);border:1px solid rgba(255,255,255,0.26)}
.ck-banner .btn-ghost:hover,.ck-panel .btn-ghost:hover{background:rgba(255,255,255,0.16);border-color:rgba(255,255,255,0.38)}
/* CERRADO SIGNIFICA CERRADO. Antes este modal quedaba con opacity:0 pero
   display:flex y visibility:visible, o sea INVISIBLE PERO PINTÁNDOSE: una capa
   de pantalla completa con backdrop-filter:blur(5px) viva en todas las páginas.
   Mientras detrás solo hubo contenido estático no se notaba, pero desde que hay
   un vídeo de fondo el navegador tiene que rehacer ese desenfoque sobre todo el
   viewport EN CADA FOTOGRAMA. Eso es lo que hacía que bajar con la rueda fuera
   a tirones.

   Con visibility:hidden sale del árbol de pintado y el blur deja de costar. El
   retardo en la transición de `visibility` es lo que permite que el fundido de
   salida se siga viendo: se oculta AL TERMINAR, no al empezar. */
.ck-modal{position:fixed;inset:0;z-index:500;display:flex;align-items:center;justify-content:center;
  padding:20px;background:rgba(5,4,10,0.55);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);
  opacity:0;pointer-events:none;visibility:hidden;
  transition:opacity .3s, visibility 0s .3s}
.ck-modal.show{opacity:1;pointer-events:auto;visibility:visible;
  transition:opacity .3s, visibility 0s 0s}
.ck-panel{width:min(560px,100%);max-height:86vh;overflow:auto;background:rgba(16,15,22,0.97);
  border:1px solid rgba(255,255,255,0.14);border-radius:var(--r-lg);padding:28px;
  --ink:#f5f3fa;--ink-2:rgba(236,233,245,0.72);--ink-3:rgba(236,233,245,0.52);
  --line:rgba(255,255,255,0.10);--glass-line:rgba(255,255,255,0.14);
  color:var(--ink);box-shadow:0 30px 80px -24px rgba(0,0,0,0.6);font-family:var(--sans)}
.ck-panel-title{font-family:var(--brand);font-weight:600;font-size:21px;margin:0 0 18px;color:var(--ink)}
.ck-cat{padding:16px 0;border-top:1px solid var(--line)}
.ck-cat:first-of-type{border-top:none;padding-top:0}
.ck-cat-head{display:flex;align-items:center;justify-content:space-between;gap:16px}
.ck-cat-name{font-weight:600;font-size:14.5px;color:var(--ink)}
.ck-cat-desc{margin:6px 0 0;font-size:12.8px;line-height:1.5;color:var(--ink-2)}
.ck-always{font-size:12px;font-weight:600;color:var(--ink-3);white-space:nowrap}
.ck-switch{position:relative;display:inline-block;width:42px;height:24px;flex:none;cursor:pointer}
.ck-switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.ck-slider{position:absolute;inset:0;border-radius:100px;background:rgba(255,255,255,0.16);
  border:1px solid var(--glass-line);transition:background .25s}
.ck-slider::before{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;
  background:#fff;transition:transform .25s var(--ease)}
.ck-switch input:checked + .ck-slider{background:rgba(255,255,255,0.55);border-color:transparent}
.ck-switch input:checked + .ck-slider::before{transform:translateX(18px);background:#0a0a0c}
.ck-switch input:focus-visible + .ck-slider{outline:2px solid rgba(255,255,255,0.8);outline-offset:2px}
.ck-panel-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:22px;flex-wrap:wrap}
@media (max-width:640px){
  /* En pantalla estrecha la tarjeta se pega a los dos lados y los botones
     pasan a una columna: a mitades quedaban demasiado justos para el texto. */
  .ck-banner{left:12px;right:12px;bottom:12px;width:auto;padding:18px 16px 16px}
  .ck-btn{flex:1 1 100%}
  .ck-banner .ck-btn:nth-of-type(2){flex:0 0 auto}
}

/* ---------- tokens de styles.css: el selector de idioma los necesita ---------- */
:root {
  /* fondo blanco siempre — nunca oscuro por defecto */
  --bg: #ffffff;
  --bg-soft: #f6f5f8;
  /* bloques de color al estilo Fable, en la familia coral de Mirrow */
  --coral-block-dark: #3a1016;
  --coral-block-dark-2: #57181f;
  --coral-block-soft: #ffb287;
  --coral-block-soft-2: #ffcaa3;
  --ink: #1d1d1f;
  --ink-2: #5f5d66;
  --ink-3: #8a8893;
  --line: rgba(40, 30, 55, 0.10);
  --line-2: rgba(40, 30, 55, 0.16);

  --glass: rgba(255, 255, 255, 0.35);
  --glass-strong: rgba(255, 255, 255, 0.55);
  --glass-line: rgba(255, 255, 255, 0.6);
  --glass-hi: inset 0 1px 0px rgba(255, 255, 255, 0.9), inset 0 0 0 1px rgba(255, 255, 255, 0.3);
  --blur: blur(60px) saturate(220%);

  --coral-1: #e23b4e;
  --coral-2: #ff9f63;
  --coral: linear-gradient(120deg, #e23b4e 0%, #f0584f 45%, #ff9f63 100%);
  --coral-soft: rgba(226, 59, 78, 0.09);

  --r-xl: 40px;
  --r-lg: 32px;
  --r-md: 20px;

  --shadow-sm: 0 2px 10px -4px rgba(0, 0, 0, 0.10);
  --shadow-md: 0 8px 40px -16px rgba(0, 0, 0, 0.16);
  --shadow-lg: 0 30px 80px -32px rgba(0, 0, 0, 0.26);

  /* tipografía de la app: Cormorant Garamond (display) + Inter (cuerpo) */
  --display: "Cormorant Garamond", Georgia, serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", system-ui, sans-serif;
  /* Wordmark idéntico a la app: Fredoka 700 */
  --brand: "Fredoka", "Baloo 2", var(--display);

  --maxw: 1080px;
  --maxw-wide: 1240px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- selector de idioma + toast: copiado tal cual de styles.css ---------- */
/* ============================================================
   LANGUAGE SWITCHER + TOAST
   ============================================================ */
.lang {
  position: relative;
  flex-shrink: 0;
}

.lang-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  background: transparent;
  border: 1px solid var(--line-2);
  border-radius: 100px;
  padding: 7px 12px;
  transition: background 0.25s;
}

.lang-btn:hover {
  background: rgba(255, 255, 255, 0.4);
}

.lang-btn svg {
  opacity: 0.7;
}

.lang-btn .chev {
  transition: transform 0.3s var(--ease);
}

.lang.open .lang-btn .chev {
  transform: rotate(180deg);
}

.lang-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 205px;
  max-height: 60vh;
  overflow-y: auto;
  background: var(--glass-strong);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--glass-line);
  border-radius: 18px;
  box-shadow: var(--shadow-lg), var(--glass-hi);
  padding: 7px;
  opacity: 0;
  transform: translateY(-8px) scale(0.98);
  pointer-events: none;
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}

.lang.open .lang-menu {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.lang-menu button {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 11px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 13.5px;
  color: var(--ink);
  text-align: left;
  transition: background 0.2s;
}

.lang-menu button:hover {
  background: rgba(255, 255, 255, 0.55);
}

.lang-menu button .flag {
  font-size: 16px;
  line-height: 1;
}

.lang-menu button .lname {
  flex: 1;
}

.lang-menu button.active {
  color: var(--coral-1);
  font-weight: 600;
}

.lang-menu button .soon {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  border: 1px solid var(--line-2);
  padding: 2px 7px;
  border-radius: 100px;
}

.toast {
  position: fixed;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--ink);
  color: #fff;
  padding: 11px 20px;
  border-radius: 100px;
  font-size: 13.5px;
  font-weight: 500;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s, transform 0.4s var(--ease);
  z-index: 300;
  box-shadow: var(--shadow-lg);
}

.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.lang-menu button img.flag {
  width: 22px;
  height: auto;
  display: block;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.10);
}

/* ---------- movimiento (v3-motion.js). Las clases las pone el JS: sin JS,
     nada de esto se aplica y la pagina se ve entera. ---------- */
/* un unico easing para toda la pagina, como manda la identidad de Mirrow */
:root { --e: cubic-bezier(0.22, 1, 0.36, 1); }
html.mrw-motion { scroll-behavior: smooth; }

/* cascada: los hijos entran uno detras de otro */
html.mrw-motion .mrw-stag > * {
  opacity: 0; transform: translateY(20px);
  transition: opacity .75s var(--e), transform .75s var(--e);
}
html.mrw-motion .mrw-stag.is-in > * { opacity: 1; transform: none; }

/* imagenes: enfocan al entrar, como en las paginas de producto de Apple */
html.mrw-motion .mrw-rise {
  opacity: 0; transform: scale(1.045); filter: blur(14px);
  transition: opacity .9s var(--e), transform 1.15s var(--e), filter .9s var(--e);
}
html.mrw-motion .mrw-rise.is-in { opacity: 1; transform: none; filter: none; }

/* Modo suave: para quien tiene activado "reducir movimiento".
   Solo se funde la opacidad — nada de desplazamientos, escala, desenfoque ni
   parallax. Asi la pagina sigue viva sin arriesgarse a marear a nadie. */
html.mrw-soft .mrw-stag > *,
html.mrw-soft .mrw-rise { opacity: 0; transition: opacity .55s ease; }
html.mrw-soft .mrw-stag.is-in > *,
html.mrw-soft .mrw-rise.is-in { opacity: 1; }

/* ---------- LA BARRA SUPERIOR, al estilo Cosmos ----------
   Curva sacada de las hojas de estilo de cosmos.so: cubic-bezier(0.66,0,0,1).
   Arranca lenta, acelera y se posa muy suave — es lo que da esa sensacion de
   "app" en lugar de pagina web.
   Va con !important porque el diseño trae padding y fondo en el atributo
   style= del propio elemento, y eso gana a cualquier regla de la hoja. */
:root { --cosmos: cubic-bezier(0.66, 0, 0, 1); }

/* Fija, no sticky: el <header> del diseño lleva overflow:hidden y ahi sticky
   no pega. Al salir del flujo se compensa con padding-top en el header, para
   que el titular no suba. El ancho maximo se mantiene con padding lateral. */
.v3 nav {
  position: fixed !important; top: 0; left: 0; right: 0; max-width: none !important;
  z-index: 90 !important;
  padding-left: max(32px, calc((100vw - 1280px) / 2)) !important;
  padding-right: max(32px, calc((100vw - 1280px) / 2)) !important;
  transition: padding .6s var(--cosmos), transform .6s var(--cosmos),
              background .6s var(--cosmos), backdrop-filter .6s var(--cosmos),
              box-shadow .6s var(--cosmos);
}

/* Al alejarte de arriba: se compacta y saca cristal OSCURO.
   Los textos del menu son casi blancos (vienen del hero nocturno); al bajar,
   la barra queda sobre secciones color crema, asi que necesita un fondo
   oscuro y opaco o no se lee nada. Por eso .88 y no un cristal timido. */
.v3 nav.mrw-nav-on {
  padding-top: 12px !important; padding-bottom: 12px !important;
  /* Azul mas claro y algo mas translucido que el primer intento, a peticion.
     Medido sobre las secciones crema: 8.4:1 en el enlace activo y 6.0:1 en el
     secundario (el minimo accesible es 4.5:1), asi que hay margen de sobra.
     No bajar mas de aqui: a .68 el enlace secundario ya cae por debajo. */
  background: rgba(16, 28, 58, .80);
  backdrop-filter: blur(26px) saturate(180%);
  -webkit-backdrop-filter: blur(26px) saturate(180%);
  box-shadow: 0 1px 0 rgba(255,255,255,.12), 0 18px 44px -24px rgba(0,0,0,.6);
}

/* dentro de la barra oscura, los enlaces a blanco pleno */
.v3 nav.mrw-nav-on a, .v3 nav.mrw-nav-on span { color: #F7F4EE; }
.v3 nav.mrw-nav-on > div:nth-child(2) a[style*="rgba(255,255,255,0.75)"] { color: rgba(247,244,238,.82) !important; }
/* la pildora del centro, con borde visible para que no se funda con la barra */
.v3 nav.mrw-nav-on > div:nth-child(2) { border-color: rgba(255,255,255,.22) !important; }
/* el boton "Empezar gratis" se mantiene en claro sobre oscuro */
.v3 nav.mrw-nav-on a[style*="background:#F7F4EE"] { color: #0A1430 !important; }

/* al bajar se aparta; al subir vuelve. El gesto de una app nativa. */
.v3 nav.mrw-nav-hide { transform: translateY(-104%); }

/* hueco que deja la barra al salir del flujo */
.v3 header { padding-top: 92px; }
@media (max-width: 900px) { .v3 header { padding-top: 76px; } }

.v3 nav > div:nth-child(2) { transition: background .6s var(--cosmos), box-shadow .6s var(--cosmos), transform .6s var(--cosmos); }
.v3 nav > div:nth-child(2).mrw-pill-on {
  background: rgba(255,255,255,.16) !important;
  box-shadow: 0 10px 34px -14px rgba(0,0,0,.5);
  transform: scale(.965);
}

/* ---------- detalles de acabado ---------- */

/* barrido de brillo al pasar por el boton principal, como los botones de Apple */
html.mrw-motion .v3 a[style*="background:#F7F4EE"],
html.mrw-motion .v3 a[style*="background:#1a1a1c"],
html.mrw-motion .v3 a[style*="background:#E0523C"] { position: relative; overflow: hidden; }
html.mrw-motion .v3 a[style*="background:#F7F4EE"]::after,
html.mrw-motion .v3 a[style*="background:#1a1a1c"]::after,
html.mrw-motion .v3 a[style*="background:#E0523C"]::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.38), transparent);
  transform: skewX(-18deg); pointer-events: none; opacity: 0;
}
html.mrw-motion .v3 a[style*="background:#F7F4EE"]:hover::after,
html.mrw-motion .v3 a[style*="background:#1a1a1c"]:hover::after,
html.mrw-motion .v3 a[style*="background:#E0523C"]:hover::after {
  opacity: 1; animation: mrwSheen .85s var(--cosmos);
}
@keyframes mrwSheen { to { left: 130%; } }

/* el hero se despide con opacidad y una leve subida (lo mueve el JS) */
.v3 header h1 { will-change: opacity, transform; }

/* las tarjetas de comunidad se levantan como las de la App Store */
html.mrw-motion .v3 section [style*="border-radius:28px"][style*="background:#fff"] {
  transition: transform .5s var(--cosmos), box-shadow .5s var(--cosmos);
}
html.mrw-motion .v3 section [style*="border-radius:28px"][style*="background:#fff"]:hover {
  transform: translateY(-7px);
  box-shadow: 0 30px 60px -28px rgba(26,26,28,.4);
}

/* los enlaces del menu reaccionan con la misma curva */
.v3 nav a { transition: background .45s var(--cosmos), color .45s var(--cosmos), transform .45s var(--cosmos); }
html.mrw-motion .v3 nav a:hover { transform: translateY(-1px); }

/* el fondo del hero lo mueve el JS; se le avisa al navegador */
.v3 header > img { will-change: transform; }

/* respuesta al pulsar, corta y seca */
.v3 a { transition: transform .35s var(--e), background .35s var(--e), box-shadow .35s var(--e), color .35s var(--e); }
html.mrw-motion .v3 a:active { transform: scale(.975); }

/* tarjetas de la comunidad y planes: se levantan al pasar por encima */
html.mrw-motion .v3 #precios > div > div { transition: transform .5s var(--e), box-shadow .5s var(--e); }
html.mrw-motion .v3 #precios > div > div:hover { transform: translateY(-6px); box-shadow: 0 26px 60px -26px rgba(26,26,28,.34); }

/* ---------- DESPLEGABLE DE IDIOMAS ----------
   El bloque heredado de styles.css usa --glass-strong (blanco al 55%) porque
   alli vivia sobre un tema oscuro. Aqui el menu se abre sobre secciones color
   crema: el cristal blanco se funde con el fondo, se transparenta el contenido
   de detras y no se lee nada. Se reescribe en azul oscuro, a juego con la
   barra, para que se lea igual de bien caiga sobre lo que caiga. */
.v3 .lang-menu {
  background: rgba(16, 28, 58, .97) !important;
  backdrop-filter: blur(26px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(26px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, .16) !important;
  box-shadow: 0 28px 64px -22px rgba(0, 0, 0, .62) !important;
  min-width: 218px;
  padding: 8px;
}
.v3 .lang-menu button {
  color: rgba(247, 244, 238, .88);
  gap: 12px;
  padding: 10px 12px;
}
.v3 .lang-menu button:hover { background: rgba(255, 255, 255, .10); }
.v3 .lang-menu button.active { color: #fff; font-weight: 600; }
/* La marca del idioma disponible y el "Pronto" del japones.
   El coral de marca (#E0523C) sobre este azul se queda en 4.07:1, por debajo
   del minimo de 4.5. Se aclara a #FF8A6B, que da 6.81:1 y sigue siendo coral. */
.v3 .lang-menu button .tick { color: #FF8A6B; }
.v3 .lang-menu button .soon { color: rgba(247, 244, 238, .58); }
/* bandera: tamaño fijo y borde tenue para que no se pierda sobre el azul */
.v3 .lang-menu button img.flag {
  width: 22px; height: 16px; object-fit: cover; flex: none;
  border-radius: 3px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .22);
}

/* el selector va sobre el hero oscuro, no sobre papel: se aclara */
.v3 .lang-btn { color: rgba(247,244,238,.85); border-color: rgba(255,255,255,.2); background: transparent; }
.v3 .lang-btn:hover { background: rgba(255,255,255,.1); color: #fff; }