/* ============================================================================
   v3-apple.css — capa de rediseño estilo Apple sobre la landing v3.
   Se carga DESPUÉS de v3.css a propósito: v3.css se genera y es frágil
   (tiene selectores acoplados al texto literal de los style= inline).
   Aquí solo van componentes NUEVOS y los ajustes que v3.css no cubre.

   Tipografía: NO se toca. Fredoka en titulares e Inter en cuerpo siguen
   exactamente igual que antes; este fichero no declara ni una font-family
   salvo en los rótulos nuevos del carrusel, donde repite la de la casa.
   ========================================================================== */

:root{
  --mrw-negro:#0a0a0b;   /* el único oscuro de la página */
  --mrw-gris:#f5f5f7;    /* secciones alternas */
  --mrw-tinta:#1d1d1f;   /* titulares sobre claro */
  --mrw-gris-txt:#6e6e73;/* cuerpo sobre claro */
}

/* ---------------------------------------------------------------------------
   1. ESCENARIO DEL HERO — MacBook + iPhone construidos en CSS puro.
   No hay ni un PNG de mockup en el proyecto y montarlo en CSS escala nítido
   en retina, pesa 0 KB y evita licencias de mockups de stock.
   Vive dentro del <header>, así que NO le afectan los efectos de
   v3-motion.js que van scopeados a `.v3 section img`.
--------------------------------------------------------------------------- */
.mrw-stage{
  position:relative; z-index:3;
  width:100%; max-width:1500px; margin:0 auto;
  padding:56px 24px 72px; box-sizing:border-box;
  display:flex; justify-content:center; align-items:flex-end;
}

/* --- MacBook --- */
.mrw-mb{ position:relative; width:min(60%, 800px); flex:0 0 auto; }

/* el resplandor cálido que la pantalla "derrama" sobre la mesa */
.mrw-mb::after{
  content:""; position:absolute; z-index:-1;
  left:6%; right:6%; bottom:-46px; height:140px; border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(255,148,64,.26) 0%, rgba(255,140,60,.13) 38%, rgba(255,120,40,0) 76%);
  pointer-events:none;
}

.mrw-mb-lid{
  position:relative;
  border-radius:20px 20px 5px 5px;
  padding:11px 11px 13px;
  background:linear-gradient(180deg,#3c3c41 0%,#1b1b1e 10%,#161618 90%,#2c2c31 100%);
  box-shadow:
    0 70px 130px -34px rgba(0,0,0,.92),
    inset 0 0 0 1px rgba(255,255,255,.09),
    inset 0 1px 0 rgba(255,255,255,.22);
}
.mrw-mb-screen{
  position:relative; border-radius:9px; overflow:hidden;
  aspect-ratio:16/10; background:#000;
}
.mrw-mb-screen img{
  width:100%; height:100%; display:block;
  object-fit:cover; object-position:center top;
}
/* reflejo diagonal muy sutil del cristal */
.mrw-mb-screen::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(114deg,
    rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 27%,
    rgba(255,255,255,0) 73%, rgba(255,255,255,.045) 100%);
}
.mrw-mb-cam{
  position:absolute; top:4px; left:50%; transform:translateX(-50%);
  width:6px; height:6px; border-radius:50%; background:#0c0c0e;
  box-shadow:0 0 0 1px rgba(255,255,255,.07);
}
.mrw-mb-base{
  position:relative; height:13px; margin:0 -3%;
  border-radius:0 0 11px 11px;
  background:linear-gradient(180deg,#2c2c31 0%,#5c5c63 20%,#3a3a3f 58%,#111113 100%);
  box-shadow:0 34px 64px -20px rgba(0,0,0,.88);
}
/* la muesca de apertura */
.mrw-mb-base::before{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:13%; height:6px; border-radius:0 0 7px 7px;
  background:linear-gradient(180deg,#0d0d0f,#242428);
}

/* --- iPhone --- (va delante, entre el portátil y la tablet) */
.mrw-ph{
  position:relative; z-index:3; flex:0 0 auto;
  width:clamp(120px, 11vw, 168px);
  margin:0 -3.2% -18px;
}
.mrw-ph-body{
  position:relative; border-radius:33px; padding:7px;
  background:linear-gradient(160deg,#4d4d54 0%,#191a1d 28%,#141416 72%,#3b3b42 100%);
  box-shadow:
    0 46px 84px -22px rgba(0,0,0,.92),
    inset 0 0 0 1px rgba(255,255,255,.10);
}
.mrw-ph-screen{
  position:relative; border-radius:26px; overflow:hidden;
  aspect-ratio:9/19.5; background:#000;
}
.mrw-ph-screen img{
  width:100%; height:100%; display:block;
  object-fit:cover; object-position:34% center;
}
.mrw-ph-island{
  position:absolute; z-index:2; top:12px; left:50%; transform:translateX(-50%);
  width:44px; height:12px; border-radius:100px; background:#08080a;
}

/* --- iPad --- (a la derecha, apoyado un poco más abajo que el portátil) */
.mrw-tb{
  position:relative; z-index:1; flex:0 0 auto;
  width:min(38%, 520px); margin-bottom:34px;
}
.mrw-tb-body{
  position:relative; border-radius:22px; padding:10px;
  background:linear-gradient(165deg,#46464c 0%,#1a1a1d 26%,#151517 74%,#37373d 100%);
  box-shadow:
    0 56px 100px -26px rgba(0,0,0,.9),
    inset 0 0 0 1px rgba(255,255,255,.09);
}
.mrw-tb-screen{
  position:relative; border-radius:14px; overflow:hidden;
  aspect-ratio:4/2.9; background:#000;
}
.mrw-tb-screen img{
  width:100%; height:100%; display:block;
  object-fit:cover; object-position:center top;
}
.mrw-tb-screen::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(118deg,
    rgba(255,255,255,.08) 0%, rgba(255,255,255,0) 30%,
    rgba(255,255,255,0) 76%, rgba(255,255,255,.04) 100%);
}
.mrw-tb-cam{
  position:absolute; top:4px; left:50%; transform:translateX(-50%);
  width:5px; height:5px; border-radius:50%; background:#0c0c0e;
}

/* OJO: estas reglas van scopeadas a .mrw-stage. El chasis del portátil y el de
   la tablet se reutilizan también en los bloques partidos de más abajo, y allí
   tienen que ocupar toda su columna, no el 60% que les toca en el hero. */
@media (max-width:1180px){
  .mrw-stage{ padding:44px 22px 0; }
  .mrw-stage .mrw-mb{ width:min(68%, 720px); }
  .mrw-stage .mrw-tb{ width:min(34%, 400px); margin-bottom:26px; }
}
@media (max-width:1024px){
  /* La tablet es lo primero que sobra: sin ella el portátil recupera tamaño
     y el conjunto sigue leyéndose como una familia de dispositivos. */
  .mrw-stage .mrw-tb{ display:none; }
  .mrw-stage .mrw-mb{ width:min(100%, 760px); }
  .mrw-stage .mrw-ph{ width:clamp(112px, 14vw, 150px); margin:0 0 -16px -6%; }
}
@media (max-width:760px){
  .mrw-stage{ padding:32px 18px 0; }
  .mrw-stage .mrw-mb{ width:100%; }
  .mrw-mb-lid{ padding:7px 7px 9px; border-radius:14px 14px 4px 4px; }
  .mrw-mb-screen{ border-radius:6px; }
  .mrw-stage .mrw-ph{ display:none; } /* en móvil el portátil ya llena la escena */
  .mrw-mb::after{ bottom:-26px; height:90px; }
}

/* ---------------------------------------------------------------------------
   2. CARRUSEL DE ATMÓSFERAS — tarjetas redondeadas con scroll-snap,
   paginación por puntos y botón de reproducción, como el de apple.com.
   El desplazamiento es scroll nativo: funciona sin JS, y v3-carousel.js
   solo añade los puntos y el play/pausa.
--------------------------------------------------------------------------- */
.mrw-car{ position:relative; }
.mrw-car-track{
  display:flex; gap:20px; overflow-x:auto;
  scroll-snap-type:x mandatory; scroll-behavior:smooth;
  padding:2px 0 6px;
  scrollbar-width:none; -ms-overflow-style:none;
}
.mrw-car-track::-webkit-scrollbar{ display:none; }

.mrw-car-item{
  position:relative; flex:0 0 min(76%, 380px);
  scroll-snap-align:center;
  aspect-ratio:4/5; border-radius:28px; overflow:hidden;
  background:#131316;
  box-shadow:0 30px 70px -28px rgba(0,0,0,.9);
}
.mrw-car-item > img,
.mrw-car-item > video{
  width:100%; height:100%; display:block; object-fit:cover;
}
.mrw-car-item::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,0) 52%, rgba(0,0,0,.62) 100%);
}
.mrw-car-cap{
  position:absolute; z-index:2; left:22px; right:22px; bottom:19px;
  /* misma tipografía de la casa, sin cambiar nada del sistema */
  font-family:Fredoka, Inter, sans-serif; font-weight:600; font-size:19px;
  color:#fff; text-shadow:0 2px 16px rgba(0,0,0,.55);
}

.mrw-car-ui{
  display:flex; align-items:center; justify-content:center; gap:18px;
  margin-top:28px;
}
.mrw-car-dots{ display:flex; align-items:center; gap:9px; }
.mrw-car-dot{
  width:8px; height:8px; padding:0; border:0; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.26);
  transition:background .3s ease, width .3s ease, border-radius .3s ease;
}
.mrw-car-dot[aria-current="true"]{ background:#fff; width:26px; border-radius:100px; }
.mrw-car-play{
  width:34px; height:34px; border-radius:50%; border:0; cursor:pointer;
  background:rgba(255,255,255,.14); color:#fff;
  display:flex; align-items:center; justify-content:center;
  transition:background .25s ease;
}
.mrw-car-play:hover{ background:rgba(255,255,255,.26); }
.mrw-car-dot:focus-visible,
.mrw-car-play:focus-visible{ outline:2px solid #fff; outline-offset:3px; }

@media (max-width:760px){
  .mrw-car-item{ flex:0 0 82%; border-radius:22px; }
  .mrw-car-cap{ font-size:17px; left:18px; bottom:16px; }
}

/* ---------------------------------------------------------------------------
   3. AJUSTES DE LA BARRA SUPERIOR al nuevo negro.
   v3.css:381 y 463 tenían el azul noche rgba(16,28,58,…) quemado; sin esto
   la barra al hacer scroll y el desplegable de idioma se quedarían azules
   sobre una página que ya es negra.
--------------------------------------------------------------------------- */
/* Al 82% el cristal dejaba traslucir los titulares oscuros de las secciones
   claras al pasar por detras: se veian emborronados dentro de la barra. */
.v3 nav.mrw-nav-on{
  background:rgba(12,12,14,.95) !important;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.v3 .lang-menu{ background:rgba(18,18,21,.97) !important; }

/* ---------------------------------------------------------------------------
   4. RESPONSIVE de los bloques grandes que han cambiado de color.
   v3.css:54-57 hace este trabajo enganchando al texto literal de los
   paddings inline, y esos paddings se han conservado tal cual.
   OJO: había un min-height:0 !important aquí mismo (ya quitado) que pisaba
   el 100svh inline. Pero el verdadero origen es más profundo: v3.css:60
   —el fichero GENERADO, anterior a este rediseño, pensado para el hero
   corto original— también fuerza `.v3 header{ min-height:0 !important }`
   bajo max-width:768px. Como los dos llevan !important, gana el que se
   carga después en el documento: v3-apple.css se enlaza DESPUÉS de v3.css
   (ver el <head> de web.html), así que esta regla puede volver a ganar.
--------------------------------------------------------------------------- */
@media (max-width:768px){
  .v3 header{ min-height:100svh !important; }
}
@supports not (height: 100svh){
  @media (max-width:768px){ .v3 header{ min-height:100vh !important; } }
}

/* El body se queda con el crema #F7F4EE que pone v3.css:8: es el fondo de la
   web publicada y es el que da el tono cálido a toda la página. */

/* ---------------------------------------------------------------------------
   5. ARREGLOS DE LA AUDITORÍA
--------------------------------------------------------------------------- */

/* v3.css:33,34,44,393 dejaron el azul noche viejo en el color del texto de los
   CTA al pasar el ratón y en el botón de la barra. Aquí se alinean al negro. */
.v3 .hv-3:hover, .v3 .hv-4:hover, .v3 .hv-14:hover,
.v3 nav a[style*="background:#F7F4EE"]{ color:#0a0a0b !important; }

/* scrollTo({behavior:'auto'}) NO gana al scroll-behavior:smooth del CSS: según
   CSSOM-View, 'auto' significa "usa el scroll-behavior calculado". Para que
   'reducir movimiento' funcione de verdad hay que apagarlo aquí. */
@media (prefers-reduced-motion: reduce){
  .mrw-car-track{ scroll-behavior:auto; }
}

/* Elevación al hover de comunidad, testimonios y FAQ. Por CLASE y estructura,
   nunca por el literal del style: los scripts escriben en el.style de esas
   tarjetas (transitionDelay de la cascada) y el navegador reserializa el
   atributo, con lo que los ganchos [style*="background:#fff"] de v3.css
   dejan de casar. Este bloque es inmune a eso. */
.v3 .hv-6, .v3 .hv-7, .v3 .hv-8,
.v3 section div[style*="repeat(2, 1fr)"] > div,
.v3 details{
  transition:transform .5s cubic-bezier(0.22,1,0.36,1), box-shadow .5s cubic-bezier(0.22,1,0.36,1);
}
.v3 .hv-6:hover, .v3 .hv-7:hover, .v3 .hv-8:hover,
.v3 section div[style*="repeat(2, 1fr)"] > div:hover,
.v3 details:hover{
  box-shadow:0 18px 44px rgba(0,0,0,.10);
}
.v3 section div[style*="repeat(2, 1fr)"] > div:hover{ transform:translateY(-4px); }

/* ============================================================================
   6. PATRONES TIPO PORTAL — más aire, menos caja.
   Tres piezas: bandas a sangre, bloque partido con el dispositivo saliéndose
   por el borde, y cifras tipo ficha técnica. Sustituyen a los bloques de
   color con esquinas de 44px, que metían una caja dentro de otra.
========================================================================== */

/* --- banda a sangre: rompe el max-width:1200px de la <section> --- */
.mrw-bleed{
  margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
  width:100vw; padding:clamp(72px, 9vw, 132px) 0;
}
.mrw-bleed--dark{ background:#0a0a0b; color:#f5f5f7; }.mrw-bleed-in{ max-width:1200px; margin:0 auto; padding:0 32px; box-sizing:border-box; }

/* --- bloque partido: texto a un lado, dispositivo saliéndose por el borde --- */
.mrw-split{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(40px, 5vw, 88px); align-items:center;
}
.mrw-split-txt{ max-width:480px; }
.mrw-split-media img{
  width:100%; display:block; border-radius:20px;
  box-shadow:0 50px 100px -30px rgba(0,0,0,.65);
}
/* la imagen se sale por el borde de la ventana, como en Portal: da la
   sensación de que la pantalla sigue más allá del papel */
.mrw-split--mediaright .mrw-split-media{ margin-right:calc(50% - 50vw + 32px); }
.mrw-split--medialeft  .mrw-split-media{ margin-left:calc(50% - 50vw + 32px); order:-1; }

/* --- cifras tipo ficha técnica --- */
.mrw-specs{ display:flex; flex-wrap:wrap; gap:clamp(28px, 4vw, 56px); margin:38px 0 0; }
.mrw-spec p{ margin:0; }
.mrw-spec-pre{ font-size:15px; line-height:1.3; opacity:.62; }
.mrw-spec-num{
  font-family:Fredoka, Inter, sans-serif; font-weight:700;
  font-size:clamp(32px, 3.4vw, 44px); line-height:1.05; margin:3px 0 5px !important;
}
.mrw-spec-lab{ font-size:15px; line-height:1.3; opacity:.62; }

/* --- dos filas de tarjetas desplazadas, con los bordes difuminados --- */
.mrw-rows{
  display:flex; flex-direction:column; gap:16px;
  margin-top:clamp(40px, 5vw, 68px);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.mrw-row{ display:flex; gap:16px; width:max-content; }
.mrw-row--b{ margin-left:-118px; }
.mrw-row figure{ margin:0; position:relative; flex:0 0 auto; }
.mrw-row img{
  display:block; width:clamp(230px, 22vw, 330px); aspect-ratio:16/10;
  object-fit:cover; border-radius:20px;
}
/* --- botón fantasma: píldora de contorno, versalitas espaciadas --- */
.mrw-ghost{
  display:inline-block; padding:13px 30px; border-radius:100px;
  border:1px solid rgba(255,255,255,.28); color:#f5f5f7;
  font-size:12px; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  transition:background .3s var(--mrw-ease, cubic-bezier(0.22,1,0.36,1)), border-color .3s;
}
.mrw-ghost:hover{ background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.5); }

/* --- encabezado centrado de sección --- */
.mrw-head{ max-width:680px; margin:0 auto; text-align:center; }
.mrw-head p{ opacity:.66; }

@media (max-width:900px){
  .mrw-split{ grid-template-columns:1fr; gap:36px; }
  .mrw-split-txt{ max-width:none; }
  .mrw-split--mediaright .mrw-split-media,
  .mrw-split--medialeft  .mrw-split-media{ margin:0; order:0; }
  .mrw-row--b{ margin-left:-64px; }
  .mrw-specs{ gap:32px; }
}

/* --- el chasis dentro de un bloque partido ---------------------------------
   Mismo portátil y misma tablet del hero, pero aquí llenan su columna y se
   salen por el borde de la ventana, como en Portal. */
.mrw-split-media .mrw-mb,
.mrw-split-media .mrw-tb{ width:100%; margin:0; }
.mrw-split-media .mrw-tb-screen{ aspect-ratio:16/9; }

/* El resplandor de la pantalla, más marcado que en el hero: es la firma de
   Portal y aquí hay sitio de sobra para que se vea. */
.mrw-bleed--dark .mrw-split-media .mrw-mb::after{
  left:2%; right:2%; bottom:-58px; height:190px;
}
.mrw-bleed--dark .mrw-split-media .mrw-tb::after{
  content:""; position:absolute; z-index:-1;
  left:4%; right:4%; bottom:-52px; height:170px; border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(90,150,255,.24) 0%, rgba(80,140,255,.12) 40%, rgba(60,120,255,0) 78%);
  pointer-events:none;
}

@media (max-width:900px){
  /* Al apilarse, el chasis deja de sangrar y se centra con el texto. */
  .mrw-split-media .mrw-mb::after,
  .mrw-bleed--dark .mrw-split-media .mrw-tb::after{ bottom:-30px; height:110px; }
}

/* ---------------------------------------------------------------------------
   7. RECORRIDO POR EL PRODUCTO — el carrusel de apple.com: una tarjeta grande
   apaisada, la siguiente asomando, y debajo la barra de puntos con el play.
   Reutiliza .mrw-car; esto solo cambia la forma de la tarjeta.
--------------------------------------------------------------------------- */
.mrw-car--wide .mrw-car-item{
  flex:0 0 min(84%, 940px);
  aspect-ratio:16/9.4;
  border-radius:22px;
}
.mrw-car--wide .mrw-car-item::after{
  background:linear-gradient(180deg, rgba(0,0,0,0) 62%, rgba(0,0,0,.58) 100%);
}
.mrw-car--wide .mrw-car-cap{ left:28px; bottom:24px; font-size:22px; }
.mrw-car--wide .mrw-car-track{ gap:24px; }

/* La primera "bolita" de Apple es en realidad una barra de progreso. */
.mrw-car--wide .mrw-car-dot[aria-current="true"]{ width:44px; }

@media (max-width:760px){
  .mrw-car--wide .mrw-car-item{ flex:0 0 88%; border-radius:16px; aspect-ratio:16/11; }
  .mrw-car--wide .mrw-car-cap{ left:18px; bottom:16px; font-size:17px; }
}

/* Los controles del carrusel nacieron dentro de una banda negra y eran
   blancos. El recorrido por el producto vive sobre blanco, así que allí
   quedaban invisibles: punto activo #fff sobre fondo #fff. Ahora el color
   por defecto es el oscuro y se invierte solo dentro de una banda oscura. */
.mrw-car-dot{ background:rgba(10,10,11,.22); }
.mrw-car-dot[aria-current="true"]{ background:#1d1d1f; }
.mrw-car-play{ background:rgba(10,10,11,.07); color:#1d1d1f; }
.mrw-car-play:hover{ background:rgba(10,10,11,.14); }
.mrw-car-dot:focus-visible,
.mrw-car-play:focus-visible{ outline-color:#1d1d1f; }

.mrw-bleed--dark .mrw-car-dot{ background:rgba(255,255,255,.26); }
.mrw-bleed--dark .mrw-car-dot[aria-current="true"]{ background:#fff; }
.mrw-bleed--dark .mrw-car-play{ background:rgba(255,255,255,.14); color:#fff; }
.mrw-bleed--dark .mrw-car-play:hover{ background:rgba(255,255,255,.26); }
.mrw-bleed--dark .mrw-car-dot:focus-visible,
.mrw-bleed--dark .mrw-car-play:focus-visible{ outline-color:#fff; }

/* --- vídeo de fondo del hero ------------------------------------------------
   Sin filter: el desenfoque sobre una superficie de este tamaño era justo lo
   que ahogaba al compositor. El oscurecido lo hacen los velos de encima. */
.mrw-hero-video{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%; object-fit:cover;
  pointer-events:none; border:0;
}
/* La atmósfera va JUSTO encima del vídeo del hero (z-index 1) y por DEBAJO de
   los velos, para que herede el mismo tratamiento de luz y no cante como una
   pieza pegada. Nace invisible: si nunca carga, no se nota que existe. */
.mrw-atmos{
  position:absolute; inset:0; z-index:1;
  width:100%; height:100%; object-fit:cover;
  pointer-events:none; border:0;
  opacity:0; transition:opacity .9s ease;
}
.mrw-atmos.is-viva{ opacity:1; }
/* Con "reducir movimiento" el vídeo se para desde el JS y queda el póster. */

/* ---------------------------------------------------------------------------
   8. LA APERTURA — el bloque de dispositivos "se abre" al bajar, con su aura,
   igual que el monitor de Portal. Solo se animan transform y opacity: son las
   dos únicas propiedades que el compositor resuelve sin repintar, y después
   del episodio de los blur no vuelvo a poner nada caro en un scroll.
--------------------------------------------------------------------------- */
.mrw-reveal{ position:relative; overflow:hidden; }
/* El escenario trae su propio padding del hero; aquí sobra por arriba. */
.mrw-reveal .mrw-stage{ padding-top:0; padding-bottom:40px; }
@media (max-width:760px){ .mrw-reveal .mrw-stage{ padding-bottom:24px; } }

.mrw-reveal-aura{
  position:absolute; z-index:0; left:50%; top:34%;
  transform:translate(-50%,-50%);
  width:min(128%, 1600px); aspect-ratio:2 / 1; border-radius:50%;
  background:
    radial-gradient(ellipse at 42% 55%, rgba(255,150,70,.30) 0%, rgba(255,120,40,0) 62%),
    radial-gradient(ellipse at 62% 45%, rgba(70,130,255,.24) 0%, rgba(60,110,255,0) 66%);
  opacity:0; pointer-events:none;
}

.mrw-reveal .mrw-stage{ position:relative; z-index:1; }

/* Solo se anima cuando el JS esta vivo (las clases las pone el):
   .mrw-motion = recorrido completo · .mrw-soft = solo fundido de opacidad.
   Los valores por defecto son "todo visible": si el JS muere, no se esconde
   nada. */
.mrw-motion .mrw-reveal .mrw-stage{
  transform:translateY(var(--mrw-desp, 0px)) scale(var(--mrw-esc, 1));
  transform-origin:50% 0%;
  opacity:var(--mrw-op, 1);
  will-change:transform, opacity;
}
.mrw-soft .mrw-reveal .mrw-stage{ opacity:var(--mrw-op, 1); }

/* El bloque de texto del hero estaba pegado arriba: el <nav> es position:fixed
   (v3.css) y sale del flujo, así que el header solo tenía un padding-top de
   compensación y nada que centrara. Quedaban 92 px arriba y 287 abajo.
   Con padding simétrico + márgenes automáticos queda centrado de verdad, y el
   padding garantiza que nunca se meta debajo de la barra en pantallas bajas. */
/* Padding ASIMÉTRICO a propósito: centrado matemático y centrado óptico no
   son lo mismo. Con el mismo hueco arriba y abajo el bloque se percibe caído,
   así que se deja más aire debajo y el texto sube ~100 px sobre el centro. */
/* box-sizing: sin esto el header es content-box y el min-height:100svh se
   aplica SOLO al contenido, con el padding sumándose encima: el hero medía
   1114 px en una ventana de 800 y nunca cabía en una pantalla. */
/* El aire del hero se mide en alto de pantalla: con 130/180 fijos el bloque
   sumaba 739px y en un portatil de 720 el CTA se quedaba fuera. Anclado a
   svh con tope: a partir de ~1000px de alto son los MISMOS 130/180 de
   siempre, y la asimetria (el texto un pelin sobre el centro optico) se
   mantiene porque la proporcion 13:18 es la de 130:180. */
.v3 header{ box-sizing:border-box;
  padding-top:clamp(96px, 13svh, 130px) !important;
  padding-bottom:clamp(112px, 18svh, 180px); }
.mrw-hero-txt{ margin-top:auto; margin-bottom:auto; }

@media (max-width:760px){
  .v3 header{ padding-top:96px !important; padding-bottom:120px; }
}

/* ---------------------------------------------------------------------------
   9. LA ESCENA CONTINUA — hero y dispositivos comparten un fondo de vídeo
   pegajoso. El truco del margin-bottom negativo: sin él, el fondo ocuparía
   una pantalla de flujo y el hero empezaría una pantalla más abajo.
--------------------------------------------------------------------------- */
.mrw-escena{ position:relative; background:#0a0a0b; overflow:clip; }

.mrw-vtramo{ position:relative; height:200svh; }
.mrw-escena-fondo{
  position:sticky; top:0; z-index:0;
  height:100svh; margin-bottom:-100svh;
  overflow:hidden; pointer-events:none;
}
.mrw-escena-velo{ position:absolute; inset:0; }

/* El fundido a negro del final: se enciende con el scroll y entrega la escena
   al fondo sólido de la sección siguiente, sin el corte seco de antes. */
.mrw-escena-cierre{
  position:absolute; inset:0; background:#0a0a0b;
  opacity:var(--mrw-cierre, 0);
}

/* El hero y los dispositivos van por encima del fondo. */
.mrw-escena > header,
.mrw-escena > .mrw-reveal{ position:relative; z-index:1; }

/* .mrw-reveal ya no puede recortar: el aura tiene que poder desbordar hacia
   el vídeo para que el encuentro entre ambos sea suave. */
.mrw-escena > .mrw-reveal{ overflow:visible; }

@supports not (height: 100svh){
  .mrw-vtramo{ height:200vh; }
  .mrw-escena-fondo{ height:100vh; margin-bottom:-100vh; }
}

/* ---------------------------------------------------------------------------
   10. CINE — los efectos Exo Ape / Igloo que aplica v3-cine.js.
--------------------------------------------------------------------------- */

/* La lente que contrae el vídeo a ventana. El transform va aquí y no en el
   sticky (.mrw-escena-fondo): escalar el propio elemento pegajoso da tirones
   en Chrome. transform-origin alto para que la ventana "flote" centrada. */
.mrw-escena-lente{
  position:absolute; inset:0; overflow:hidden;
  transform-origin:50% 38%;
  will-change:transform;
}

/* Titulares línea a línea. Las clases .mrw-cine-prep / .is-cine las pone SOLO
   el JS: sin JS no hay máscara y los titulares se ven enteros (misma regla de
   oro del resto del sitio: nada se oculta si el script muere).
   El padding/margin negativo evita que la máscara decapite los descendentes
   de la Fredoka (g, y, j) con line-height 1.06. */
.mrw-cine-prep .mrw-cl{
  display:inline-block; overflow:hidden; vertical-align:top;
  /* La caja que enmascara cada palabra recorta lo que se sale de ella. Tenía
     holgura solo ABAJO (para las colas de la g, la j, la p) y nada ARRIBA, así
     que en francés y alemán los acentos y las mayúsculas altas quedaban
     decapitados: "s'était", "Fonctionnalités", "Für". El español lo disimulaba
     porque sus tildes son más bajas. Ahora respira por los dos lados, y los
     márgenes negativos devuelven el espacio para que el interlineado del
     titular no cambie ni un píxel. */
  padding-top:.18em; margin-top:-.18em;
  padding-bottom:.14em; margin-bottom:-.14em;
}
.mrw-cine-prep .mrw-cl-i{
  display:inline-block;
  transform:translateY(118%);
  transition:transform 1.05s cubic-bezier(0.19,1,0.22,1);
  will-change:transform;
}
.mrw-cine-prep.is-cine .mrw-cl-i{ transform:translateY(0); }

/* Cada palabra de cada titular es un span con will-change: eso son ~100 capas
   de composicion permanentes en la GPU para una animacion que dura un segundo
   y no vuelve a ocurrir. Medido: 101 capas vivas con la pagina quieta, y el
   scroll arrastrandolas todas. Pasado el reveal, v3-cine.js marca el titular
   como terminado y las capas se sueltan. */
.mrw-cine-prep.mrw-cl-hecho .mrw-cl-i{ will-change:auto; }

/* Con "reducir movimiento": sin desplazamiento, queda el fundido escalonado. */
.mrw-soft .mrw-cine-prep .mrw-cl-i{
  transform:none; opacity:0;
  transition:opacity .9s ease;
}
.mrw-soft .mrw-cine-prep.is-cine .mrw-cl-i{ opacity:1; }

/* Los dispositivos reciben su translateY de profundidad desde el JS. */
.mrw-reveal .mrw-mb, .mrw-reveal .mrw-ph, .mrw-reveal .mrw-tb{
  will-change:transform;
}

/* ---------------------------------------------------------------------------
   11. MÁS CINE — la entrada de las imágenes pasa de blur+escala a la cortinilla
   de máscara de Exo Ape: la foto se descubre desde un marco interior mientras
   suelta un punto de zoom. Un solo disparo por imagen, nada atado al scroll.
--------------------------------------------------------------------------- */
.mrw-motion .mrw-rise{
  clip-path:inset(10% 7% 10% 7% round 26px);
  transform:scale(1.07);
  opacity:0;
  filter:none;
  transition:
    clip-path 1.15s cubic-bezier(0.19,1,0.22,1),
    transform 1.15s cubic-bezier(0.19,1,0.22,1),
    opacity .55s ease;
}
.mrw-motion .mrw-rise.is-in{
  clip-path:inset(0 0 0 0 round 0px);
  transform:none;
  opacity:1;
}

/* Hover con vida en el recorrido y en las filas de atmósferas. */
.mrw-car-item img, .mrw-row img{
  transition:transform .8s cubic-bezier(0.19,1,0.22,1);
}
.mrw-car-item:hover img, .mrw-row figure:hover img{ transform:scale(1.045); }

.mrw-soft .mrw-rise{
  clip-path:inset(8% 6% 8% 6% round 22px);
  opacity:0; filter:none; transform:none;
  transition:clip-path 1s cubic-bezier(0.19,1,0.22,1), opacity .6s ease;
}
.mrw-soft .mrw-rise.is-in{ clip-path:inset(0 0 0 0 round 0px); opacity:1; }

/* ---------------------------------------------------------------------------
   12. COMPOSICIÓN EDITORIAL — el collage de alturas desiguales de Exo Ape.
   Solo márgenes en escritorio: nada de transform, que chocaría con la
   entrada en cascada de v3-motion.
--------------------------------------------------------------------------- */
@media (min-width:900px){
  .hv-7{ margin-top:52px; }                    /* la tarjeta central de comunidad baja */
  .hv-8{ margin-top:26px; }                    /* la tercera, a media altura */
  /* los dos testimonios en escalera */
  .v3 section div[style*="grid-template-columns:repeat(2, 1fr)"] > div:nth-child(2){ margin-top:44px; }
}

/* La cita estrella a escala de titular, como el "Spread the News" de Exo Ape.
   Misma Fredoka de siempre: solo cambia el cuerpo. */
.mrw-cita{
  font-size:clamp(34px, 4.4vw, 58px) !important;
  line-height:1.16 !important;
  letter-spacing:-0.01em;
  max-width:19ch; margin-left:auto !important; margin-right:auto !important;
}


/* ---------------------------------------------------------------------------
   13. LA CINTA — estado inicial: franja panoramica redondeada en la parte alta
   del pin (lo que asoma bajo el hero al cargar). El JS la abre con el scroll.
   Los velos nacen apagados para que la cinta luzca viva; se encienden al
   expandirse, y el cierre existente entrega el negro a los dispositivos.
--------------------------------------------------------------------------- */

/* Nota: hubo aquí una regla para pintar las píldoras "＋ Sección" en versalitas
   dentro de las bandas oscuras. Se retiró: todas esas etiquetas pasaron a
   .mrw-lbl (con el "＋" ya en el propio texto del diccionario), así que
   ninguna banda oscura conserva ya un <span> con esa píldora inline. */

@media (max-width:760px){
  .mrw-vtramo{ height:170svh; }
}

/* --- el texto que acompaña a la ventana durante la contracción --- */
.mrw-cinta-txt{
  position:sticky; top:0; z-index:1;
  height:100svh;
  display:flex; align-items:flex-start; justify-content:center;
  padding-top:54svh; box-sizing:border-box;
  pointer-events:none;
}
.mrw-cinta-in{
  text-align:center; max-width:660px; padding:0 32px;
  opacity:0; transform:translateY(34px);
  will-change:transform, opacity;
}
.mrw-cinta-k{
  font-size:12px; font-weight:600; letter-spacing:.26em; text-transform:uppercase;
  color:rgba(255,255,255,.62); margin:0 0 14px;
}
@supports not (height: 100svh){ .mrw-cinta-txt{ height:100vh; padding-top:54vh; } }

/* aire entre la escena de la ventana y la llegada de los dispositivos */
.mrw-escena > .mrw-reveal{ margin-top:16svh; }
@supports not (height: 100svh){ .mrw-escena > .mrw-reveal{ margin-top:16vh; } }
@media (max-width:760px){
  .mrw-cinta-txt{ padding-top:50svh; }
}

/* etiqueta mínima reutilizable (el texto ya trae su ＋ desde el diccionario) */
.mrw-lbl{
  font-size:12px; font-weight:600; letter-spacing:.26em; text-transform:uppercase;
  color:rgba(255,255,255,.62); margin:0 0 18px;
}

/* variante de la etiqueta sobre fondos claros */
.mrw-lbl--ink{ color:rgba(26,26,28,.55); }

/* ---------------------------------------------------------------------------
   14. VIDA EN EL RECORRIDO — tres gestos sobre el carrusel del producto:
   entrada en cascada, foco en la tarjeta central y deriva sutil con el scroll.
   Ocultas solo bajo las clases que pone el JS: sin JS, todo visible.
--------------------------------------------------------------------------- */
.mrw-car--wide .mrw-car-item{
  transition:opacity .9s cubic-bezier(0.19,1,0.22,1), transform 1.05s cubic-bezier(0.19,1,0.22,1);
}
.mrw-motion .mrw-car--wide:not(.is-vivo) .mrw-car-item{
  opacity:0; transform:translateY(46px) scale(.96);
}
.mrw-soft .mrw-car--wide:not(.is-vivo) .mrw-car-item{ opacity:0; }

/* una vez vivo: la activa centrada a plena luz, las vecinas asomando
   atenuadas por ambos lados, como el carrusel de apple.com. Sin escalas
   ni derivas: solo opacidad, que no marea. */
.mrw-car--wide.is-vivo .mrw-car-item{ opacity:.45; }
.mrw-car--wide.is-vivo .mrw-car-item.is-centro{ opacity:1; }

/* el relleno lateral permite que la primera y la última tarjeta se centren
   de verdad, con las vecinas asomando por los dos bordes */
.mrw-car--wide .mrw-car-track{
  padding-inline:max(24px, calc((100% - min(84%, 940px)) / 2));
}

/* Ancho de tarjeta en una sola variable: el flex-basis en % se resolvía contra
   el hueco interior (ya descontado el relleno) y el relleno contra el ancho
   total — dos varas de medir y la primera tarjeta quedaba descentrada 75px.
   Con la variable, tarjeta y relleno hablan el mismo idioma y el centrado
   es exacto en cualquier ancho. */
.mrw-car--wide{ --mrw-cw:min(88vw, 940px); }
.mrw-car--wide .mrw-car-item{ flex-basis:var(--mrw-cw); }
.mrw-car--wide .mrw-car-track{
  padding-inline:max(24px, calc((100% - var(--mrw-cw)) / 2));
}

/* ---------------------------------------------------------------------------
   15. TRES DETALLES FINALES
--------------------------------------------------------------------------- */

/* La conversación con Drácula se escribe: cada burbuja llega con su pausa,
   como un chat de verdad. Oculto solo bajo las clases del JS. */
p[data-i18n^="fbc.chat"]{
  transition:opacity .6s cubic-bezier(0.19,1,0.22,1), transform .7s cubic-bezier(0.19,1,0.22,1);
}
.mrw-motion p[data-i18n^="fbc.chat"]{ opacity:0; transform:translateY(14px); }
.mrw-soft p[data-i18n^="fbc.chat"]{ opacity:0; transform:none; }
.mrw-motion .mrw-chat-vivo p[data-i18n^="fbc.chat"],
.mrw-soft .mrw-chat-vivo p[data-i18n^="fbc.chat"]{ opacity:1; transform:none; }

/* Las respuestas del FAQ entran con un respiro en vez de aparecer de golpe. */
@keyframes mrw-faq{ from{ opacity:0; transform:translateY(-6px); } }
.v3 details[open] > :not(summary){ animation:mrw-faq .5s cubic-bezier(0.19,1,0.22,1); }

/* Botones imantados: la píldora sigue levemente al cursor (firma Exo Ape). */
.hv-3, .hv-4, .hv-5, .hv-9, .hv-14{ transition:transform .18s ease-out; display:inline-flex; }

/* ---------------------------------------------------------------------------
   16. PROFUNDIDAD CONTINUA — el lenguaje del arranque, repartido por la página.
--------------------------------------------------------------------------- */
/* perspectiva para la inclinación de los chasis con el cursor */
.mrw-split-media{ perspective:1200px; }
.mrw-split-media .mrw-mb, .mrw-split-media .mrw-tb{
  transition:transform .6s cubic-bezier(0.19,1,0.22,1);
  will-change:transform;
}
/* las pantallas del escenario del hero llevan deriva interior con el scroll */
.mrw-stage .mrw-mb-screen img, .mrw-stage .mrw-ph-screen img, .mrw-stage .mrw-tb-screen img{
  will-change:transform;
}
.mrw-bleed--dark .mrw-bleed-in{ will-change:transform; }

/* ---------------------------------------------------------------------------
   17. CHASIS A LO PORTAL — grandes, sangrando por el borde de la ventana, y
   sobre todo BIEN DIBUJADOS: bisel con presencia, esquinas generosas, base
   con cuerpo. Era el chasis fino lo que los hacía verse pobres, no el
   sangrado. Y el vídeo del arranque como fondo del panel de cierre.
--------------------------------------------------------------------------- */
/* la columna del dispositivo gana sitio frente a la del texto */
.mrw-bleed--dark .mrw-split{ grid-template-columns:0.82fr 1.18fr; }

/* tablet: bisel gordo y esquinas Portal */
.mrw-bleed--dark .mrw-tb-body{ padding:17px; border-radius:38px; }
.mrw-bleed--dark .mrw-tb-screen{ border-radius:22px; aspect-ratio:16/10.4; }

/* portátil: tapa con marco de verdad y base con cuerpo */
.mrw-bleed--dark .mrw-mb-lid{ padding:15px 15px 17px; border-radius:26px 26px 6px 6px; }
.mrw-bleed--dark .mrw-mb-screen{ border-radius:13px; }
.mrw-bleed--dark .mrw-mb-base{ height:21px; margin:0 -4%; border-radius:0 0 18px 18px; }
.mrw-bleed--dark .mrw-mb-base::before{ width:16%; height:8px; }

@media (max-width:900px){
  .mrw-bleed--dark .mrw-split{ grid-template-columns:1fr; }
}

.mrw-ctavid{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover;
}

/* ---------------------------------------------------------------------------
   18. LA FIRMA — el wordmark gigante despide la página, como el cierre de
   Exo Ape. Y dos detalles de marca en todo el sitio: la selección de texto
   en coral y una barra de scroll discreta.
--------------------------------------------------------------------------- */
.mrw-firma{ text-align:center; padding:36px 0 96px; }
.mrw-firma-logo{
  font-family:Fredoka, Inter, sans-serif; font-weight:700;
  font-size:clamp(64px, 10vw, 150px); line-height:1;
  letter-spacing:-0.02em; color:#1a1a1c; margin:0;
}

::selection{ background:#E0523C; color:#fff; }

::-webkit-scrollbar{ width:12px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{
  background:rgba(26,26,28,.32); border-radius:100px;
  border:3px solid transparent; background-clip:content-box;
}
::-webkit-scrollbar-thumb:hover{ background:rgba(26,26,28,.5); border:3px solid transparent; background-clip:content-box; }

/* ---------------------------------------------------------------------------
   19. ARREGLOS DE LA AUDITORÍA FINAL — la misma raíz en los tres casos: en
   cuanto un script escribe en el.style, el navegador reserializa el atributo
   completo ("background:#fff" pasa a "background: rgb(255, 255, 255)") y los
   selectores [style*="..."] de v3.css dejan de casar con ese elemento para
   siempre. La solución no es dejar de animar: es dejar de depender del texto
   literal en los elementos que un script toca. Estas reglas van por CLASE,
   inmunes a cómo el navegador reescriba el atributo style.
--------------------------------------------------------------------------- */

/* 19a. El panel del CTA final: v3-cine.js le escribe el.style.transform para
   la entrada, así que v3.css:56-57 ([style*="padding:120px 56px"]) dejaba de
   encontrarlo en cuanto cargaba la página, y en móvil se quedaba con el
   padding de escritorio (120px 56px en vez de 40px 24px). */
@media (max-width:1024px){
  .mrw-cta-panel{ padding:40px 24px !important; }
}

/* 19b. Los dos testimonios: v3-motion.js les escribe transitionDelay a los
   hijos del grid nada más cargar, así que el gancho de sombra al hover de
   v3.css:433-439 ([style*="background:#fff"]) nunca llegaba a casar. */
.mrw-card-hover{ transition:transform .5s cubic-bezier(0.22,1,0.36,1), box-shadow .5s cubic-bezier(0.22,1,0.36,1); }
.mrw-card-hover:hover{ transform:translateY(-4px); box-shadow:0 20px 50px rgba(0,0,0,.10); }

/* 19c. El barrido de brillo (sheen) de v3.css:412-426 depende de
   [style*="background:#F7F4EE"]/[style*="background:#1a1a1c"]: los botones
   imantados (hv-3/4/5/9/14) reciben el.style.transform en el primer
   mousemove y pierden ese gancho para siempre. Reponemos el brillo por clase. */
.hv-3, .hv-4, .hv-5, .hv-9, .hv-14{ position:relative; overflow:hidden; }
.hv-3::after, .hv-4::after, .hv-5::after, .hv-9::after, .hv-14::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.38), transparent);
  transform:translateX(-120%);
}
.hv-3:hover::after, .hv-4:hover::after, .hv-5:hover::after, .hv-9:hover::after, .hv-14:hover::after{
  transform:translateX(120%); transition:transform .65s ease;
}

/* ---------------------------------------------------------------------------
   20. TRES REMATES
--------------------------------------------------------------------------- */
/* El botón del nav se partía en dos líneas entre ~1000 y 1100px de ancho. */
.v3 nav a{ white-space:nowrap; }

/* La entrada del hero en cascada: el titular revela línea a línea y el resto
   (etiqueta, lede, CTA, nota) le sigue en escalera. Oculto solo bajo las
   clases que pone el JS; sin JS se ve todo, como siempre. */
.mrw-motion .mrw-hero-txt > :not(h1),
.mrw-soft .mrw-hero-txt > :not(h1){
  opacity:0; transform:translateY(16px);
  transition:opacity .9s cubic-bezier(0.19,1,0.22,1), transform 1s cubic-bezier(0.19,1,0.22,1);
}
.mrw-soft .mrw-hero-txt > :not(h1){ transform:none; }
.mrw-hero-vivo .mrw-hero-txt > :not(h1){ opacity:1; transform:none; }
/* Tras quitar el kicker y la nota final, el bloque quedo en h1 + lede + CTA:
   los mismos retrasos de siempre, reindexados a las 3 posiciones que quedan
   (h1 no entra en esta escalera: la excluye el ":not(h1)" de arriba). */
.v3 .mrw-hero-txt > :nth-child(2){ transition-delay:.55s; }
.v3 .mrw-hero-txt > :nth-child(3){ transition-delay:.72s; }

/* Los enlaces del footer responden en coral al pasar el ratón. */
.v3 footer a{ transition:color .25s ease; }
.v3 footer a:hover{ color:#E0523C !important; }

/* ---------------------------------------------------------------------------
   21. TIPOGRAFÍA DE LAS BANDAS OSCURAS — a escala Portal: titular grande y
   fluido, lede con cuerpo y cifras protagonistas. El !important hace falta
   porque los tamaños viejos van inline en el HTML. Misma Fredoka/Inter.
--------------------------------------------------------------------------- */
.mrw-bleed--dark .mrw-split-txt h3{
  font-size:clamp(40px, 4.4vw, 62px) !important;
  line-height:1.08 !important;
  letter-spacing:-0.015em;
}
.mrw-bleed--dark .mrw-split-txt > p{
  font-size:clamp(17px, 1.45vw, 20px) !important;
  line-height:1.7 !important;
  color:#e6e4e0 !important;
  margin-top:22px !important;
  max-width:46ch;
}
.mrw-bleed--dark .mrw-spec-num{ font-size:clamp(40px, 4vw, 58px); }
.mrw-bleed--dark .mrw-spec-pre,
.mrw-bleed--dark .mrw-spec-lab{ font-size:16px; opacity:.68; }
.mrw-bleed--dark .mrw-specs{ margin-top:44px; gap:clamp(36px, 4.5vw, 64px); }

/* En pantallas anchas el contenido de las bandas oscuras quedaba en una caja
   de 1200px con un desierto de negro a la izquierda (la tablet sangra por la
   derecha y descompensa). La caja se ensancha y el bloque de texto se centra
   dentro de su columna: composición equilibrada, sin lateral muerto. */
.mrw-bleed--dark .mrw-bleed-in{ max-width:1500px; }
.mrw-bleed--dark .mrw-split{ grid-template-columns:1fr 1.1fr; }
.mrw-bleed--dark .mrw-split-txt{ max-width:560px; margin-left:auto; margin-right:auto; }
@media (max-width:900px){
  .mrw-bleed--dark .mrw-split-txt{ margin-left:0; }
}

/* ---------------------------------------------------------------------------
   22. COHERENCIA TIPOGRÁFICA — los titulares de las secciones claras pasan a
   la misma escala fluida que las bandas oscuras. Por clave data-i18n, que es
   estable e inmune a la reserialización; el !important es contra los tamaños
   fijos inline. Fredoka intacta.
--------------------------------------------------------------------------- */
h2[data-i18n="v3.f.h"], h2[data-i18n="v3.com.h"],
h2[data-i18n="v3.pri.h"], h2[data-i18n="v3.faq.h"]{
  font-size:clamp(38px, 4.4vw, 60px) !important;
  line-height:1.08 !important;
  letter-spacing:-0.015em;
}
/* los h3 de los bloques pastel (Personajes, Para quien escribe) acompañan */
h3[data-i18n="v3.chr.h"], h3[data-i18n="v3.wri.h"]{
  font-size:clamp(36px, 3.6vw, 52px) !important;
  line-height:1.1 !important;
  letter-spacing:-0.012em;
}

/* ---------------------------------------------------------------------------
   23. TRES TRANSICIONES MÁS
--------------------------------------------------------------------------- */
/* La página nace de negro y se abre en cuanto el hero está listo (la clase
   mrw-hero-vivo ya la pone v3-cine a los 140ms, con rendición a los 4s). */
.mrw-velo-carga{
  position:fixed; inset:0; z-index:99;
  background:#0a0a0b; pointer-events:none;
  transition:opacity 1s ease .05s;
}
body.mrw-hero-vivo .mrw-velo-carga{ opacity:0; }

/* El muro de portadas sube al entrar en pantalla (las filas ya se mueven
   solas en horizontal; el conjunto llega desde abajo una única vez). */
.mrw-motion .mrw-muro{ opacity:0; transform:translateY(44px);
  transition:opacity 1s cubic-bezier(0.19,1,0.22,1), transform 1.15s cubic-bezier(0.19,1,0.22,1); }
.mrw-soft .mrw-muro{ opacity:0;
  transition:opacity 1s cubic-bezier(0.19,1,0.22,1); }
.mrw-muro.is-cine{ opacity:1; transform:none; }

/* ---------------------------------------------------------------------------
   24. VIDA EN LOS PRECIOS
--------------------------------------------------------------------------- */
/* Las tarjetas de plan se elevan al pasar el ratón; la recomendada proyecta
   sombra coral. Selección estructural (la cascada reserializa los style=). */
#precios .mrw-stag > div,
#precios div[style*="grid-template-columns"] > div{
  transition:transform .5s cubic-bezier(0.22,1,0.36,1), box-shadow .5s cubic-bezier(0.22,1,0.36,1);
}
#precios .mrw-stag > div:hover,
#precios div[style*="grid-template-columns"] > div:hover{
  transform:translateY(-6px);
  box-shadow:0 26px 60px -18px rgba(0,0,0,.18);
}
#precios .mrw-stag > div:nth-child(2):hover{
  box-shadow:0 28px 64px -16px rgba(224,82,60,.32);
}

/* El conmutador Mensual/Anual funde en vez de saltar (v3-precios escribe los
   colores inline; la transición anima ese cambio). */
#v3Bill button{ transition:background .3s ease, color .3s ease; }

/* Los importes hacen "pop" al cambiar de ciclo. */
#precios [data-price], #precios [data-sub]{ display:inline-block; }
.mrw-pop{ animation:mrwPop .5s cubic-bezier(0.19,1,0.22,1); }
@keyframes mrwPop{ 0%{ opacity:0; transform:translateY(9px); } }

/* ---------------------------------------------------------------------------
   26. EL BOTÓN DE MÚSICA — flotante, cristal, discreto. En coral cuando suena,
   con dos ondas latiendo. El audio exige gesto del usuario: este botón ES el
   gesto. El envoltorio lleva ahora tambien el deslizador de volumen: la
   posicion fija vive en el envoltorio, el boton es un hijo normal dentro.
--------------------------------------------------------------------------- */
.mrw-sonido-wrap{
  position:fixed; right:22px; bottom:22px; z-index:60;
  display:flex; flex-direction:column; align-items:center; gap:10px;
}
.mrw-sonido{
  position:relative;
  width:46px; height:46px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(16,16,19,.62);
  backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  color:#f5f5f7; cursor:pointer;
  box-shadow:0 12px 34px -12px rgba(0,0,0,.55);
  transition:transform .3s cubic-bezier(0.19,1,0.22,1), background .3s ease, color .3s ease;
}
.mrw-sonido:hover{ transform:translateY(-2px); background:rgba(24,24,28,.78); }
.mrw-sonido.is-on{ color:#fff; background:#E0523C; border-color:rgba(255,255,255,.3); }
.mrw-sonido.is-on::before,
.mrw-sonido.is-on::after{
  content:""; position:absolute; inset:-1px; border-radius:50%;
  border:1px solid rgba(224,82,60,.55);
  animation:mrwOnda 2.2s ease-out infinite;
  pointer-events:none;
}
.mrw-sonido.is-on::after{ animation-delay:1.1s; }
@keyframes mrwOnda{
  0%{ transform:scale(1); opacity:.7; }
  100%{ transform:scale(1.9); opacity:0; }
}
.mrw-sonido:focus-visible{ outline:2px solid #E0523C; outline-offset:3px; }
@media (max-width:760px){ .mrw-sonido-wrap{ right:16px; bottom:16px; } }

/* El deslizador de volumen: oculto por defecto (nace invisible y sin capturar
   clics, asi que nunca estorba), aparece al pasar el raton o al mantener
   pulsado el boton en tactil (clase .is-abierto, la pone v3-sonido.js). Es un
   range HORIZONTAL rotado -90deg: el truco funciona igual en Chrome, Firefox
   y Safari, a diferencia de orient="vertical" (solo Firefox) o
   -webkit-appearance:slider-vertical (solo WebKit). */
.mrw-volumen{
  width:34px; height:86px;
  display:flex; align-items:center; justify-content:center;
  padding:10px 0;
  border-radius:100px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(16,16,19,.62);
  backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  box-shadow:0 12px 34px -12px rgba(0,0,0,.55);
  opacity:0; transform:translateY(8px) scale(.94); pointer-events:none;
  transition:opacity .28s cubic-bezier(0.19,1,0.22,1), transform .28s cubic-bezier(0.19,1,0.22,1);
}
.mrw-sonido-wrap:hover .mrw-volumen,
.mrw-sonido-wrap:focus-within .mrw-volumen,
.mrw-sonido-wrap.is-abierto .mrw-volumen{
  opacity:1; transform:translateY(0) scale(1); pointer-events:auto;
}
.mrw-volumen input[type="range"]{
  -webkit-appearance:none; appearance:none;
  width:70px; height:20px;
  transform:rotate(-90deg);
  background:transparent; cursor:pointer; margin:0;
}
.mrw-volumen input[type="range"]::-webkit-slider-runnable-track{
  height:4px; border-radius:100px; background:rgba(255,255,255,.22);
}
.mrw-volumen input[type="range"]::-moz-range-track{
  height:4px; border-radius:100px; background:rgba(255,255,255,.22);
}
.mrw-volumen input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:14px; height:14px; border-radius:50%;
  background:#E0523C; border:2px solid #fff;
  margin-top:-5px; box-shadow:0 2px 6px rgba(0,0,0,.4);
}
.mrw-volumen input[type="range"]::-moz-range-thumb{
  width:14px; height:14px; border-radius:50%; border:2px solid #fff;
  background:#E0523C; box-shadow:0 2px 6px rgba(0,0,0,.4);
}
.mrw-volumen input[type="range"]:focus-visible{ outline:2px solid #E0523C; outline-offset:4px; }

/* ---------------------------------------------------------------------------
   27. LA BURBUJADA — al saltar de sección con la música puesta, una ráfaga de
   burbujas cruza la pantalla mientras suena el efecto, como la transición de
   Bob Esponja. Solo transform/opacity; el overlay se autodestruye al acabar.
--------------------------------------------------------------------------- */
.mrw-burbujas{
  position:fixed; inset:0; z-index:95;
  pointer-events:none; overflow:clip;
}
.mrw-burbuja{
  position:absolute; bottom:-12vh; border-radius:50%;
  background:
    radial-gradient(circle at 32% 30%, rgba(255,255,255,.95) 0%, rgba(255,255,255,.35) 26%, rgba(160,205,255,.16) 58%, rgba(110,170,255,.08) 100%);
  border:1.5px solid rgba(255,255,255,.42);
  box-shadow:inset -4px -6px 10px rgba(120,180,255,.18);
  opacity:0;
  animation:mrwSubir var(--dur, 1.2s) cubic-bezier(0.3, 0.1, 0.3, 1) var(--del, 0s) forwards;
  will-change:transform, opacity;
}
@keyframes mrwSubir{
  0%{ transform:translate(0, 0) scale(.55); opacity:0; }
  12%{ opacity:1; }
  80%{ opacity:.95; }
  100%{ transform:translate(var(--dx, 0px), -118vh) scale(1.05); opacity:0; }
}

/* ---------------------------------------------------------------------------
   28. LA BARRA EN PANTALLAS ESTRECHAS
   La barra de la landing nunca tuvo reglas de movil: con el ancho fijo de la
   pildora, "Entrar" y "Empezar gratis" sumaba mas que la pantalla y el boton
   quedaba cortado por el borde. Se retira la pildora (sus tres enlaces siguen
   en el pie y en el propio recorrido de la pagina) y se aprieta el resto.
   Todo por estructura y clase: los estilos van inline y cualquier escritura
   desde JS reserializa el atributo, asi que un selector [style*="..."] aqui
   se romperia solo.
--------------------------------------------------------------------------- */
@media (max-width:900px){
  .v3 nav{ padding-left:20px !important; padding-right:20px !important; }
  .v3 nav > div:nth-child(2){ display:none; }            /* la pildora central */
  .v3 nav > div:nth-child(3){ gap:10px !important; }
}
@media (max-width:560px){
  .v3 nav{ padding-left:14px !important; padding-right:14px !important;
           padding-top:18px !important; padding-bottom:18px !important; }
  .v3 nav > div:nth-child(3){ gap:8px !important; }
  .v3 nav a.hv-2{ display:none; }                        /* "Entrar": queda el CTA */
  .v3 nav a.hv-3{ padding:10px 15px !important; }
  .v3 nav > a:first-child{ font-size:20px !important; }  /* la marca, misma Fredoka */
}

/* ---------------------------------------------------------------------------
   29. LA BARRA, CON AIRE EN CUALQUIER IDIOMA
   La rejilla era 1fr auto 1fr: la píldora se centra respecto a la barra ENTERA
   y los laterales se reparten lo que sobra. En español cuadraba, pero en
   francés "Fonctionnalités" la ensancha hasta 371px y la columna de la derecha
   (idioma + Se connecter + Commencer gratuitement) ya no cabía en su carril:
   medido, el selector de idioma quedaba pegado a la píldora con 0px de hueco.

   minmax(max-content, 1fr) impide que un carril se encoja por debajo de lo que
   necesita su contenido, así que la píldora se descentra un poco cuando hace
   falta en vez de aplastar al vecino. El column-gap garantiza que nunca se
   toquen, se hable el idioma que se hable.
--------------------------------------------------------------------------- */
.v3 nav{
  grid-template-columns:minmax(max-content, 1fr) auto minmax(max-content, 1fr) !important;
  column-gap:clamp(14px, 1.8vw, 30px);
}

/* ---------------------------------------------------------------------------
   30. WIWOL — la mascota, sentada en la esquina del recorrido del producto,
   igual que en la lámina de marca. Va por fuera del recorte del carrusel
   (el contenedor no tiene overflow) y por encima de las tarjetas; el pie
   queda apoyado en el borde inferior. Solo se ve de tablet para arriba:
   en móvil taparía las tarjetas.
--------------------------------------------------------------------------- */
.mrw-car{ position:relative; }
.mrw-wiwol{
  position:absolute; z-index:4;
  right:clamp(-24px, -0.6vw, 6px); bottom:14px;
  /* Se manda por ALTURA, no por anchura: la ilustración nueva es vertical
     (452x620) y con el ancho de la anterior —casi cuadrada— se salía por
     arriba del carrusel. */
  height:clamp(210px, 21vw, 300px); width:auto;
  pointer-events:none; user-select:none;
  filter:drop-shadow(0 18px 30px rgba(0,0,0,.30));
}
@media (max-width:900px){ .mrw-wiwol{ display:none; } }

/* ---------------------------------------------------------------------------
   32. WIWOL EN LA COMUNIDAD — saluda junto al titular, como en la maqueta.
--------------------------------------------------------------------------- */
/* Wiwol, en la esquina de abajo a la derecha.
   Historia de dos intentos fallidos, por si vuelve a tocarse: la imagen es
   mucho mas alta que ancha (152x219, o sea ~250px de alto a tamano util) y en
   esta seccion NO hay ningun hueco de ese tamano. Colgandolo de arriba
   (top:-26px) los ~150px que le sobraban tapaban la tercera sala; subiendolo
   para librarlas, se metia en la seccion de encima y tapaba su texto.
   La solucion no era moverlo otra vez, sino DARLE SITIO: en pantallas anchas
   la seccion se reserva 96px por abajo y el mono se apoya ahi, a la derecha
   de "Ver mas salas" y por debajo de las tarjetas, donde no hay nada.
   Si cambia la altura de las tarjetas o el padding, revisar que sigue libre. */
@media (min-width:1281px){
  .mrw-com{ padding-bottom:96px !important; }
}
.mrw-com-wiwol{
  position:absolute; z-index:1;
  right:clamp(-10px, 0.8vw, 20px);
  bottom:0; top:auto;
  width:clamp(128px, 10.6vw, 158px); height:auto;
  pointer-events:none; user-select:none;
  filter:drop-shadow(0 16px 26px rgba(0,0,0,.18));
}
/* Por debajo de 1281px las salas ocupan todo el ancho y no queda esquina. */
@media (max-width:1280px){ .mrw-com-wiwol{ display:none; } }

/* ---------------------------------------------------------------------------
   34. COMUNIDAD A DOS COLUMNAS — como la maqueta: el titular manda desde la
   izquierda y las salas se alinean a su derecha, en vez del bloque centrado
   con las tarjetas debajo. Wiwol señala desde el borde derecho.
--------------------------------------------------------------------------- */
.mrw-com{
  display:grid;
  grid-template-columns:minmax(240px, 0.78fr) 2fr;
  gap:clamp(26px, 3.6vw, 60px);
  align-items:start;
}
.mrw-com-txt{ text-align:left; padding-top:6px; }
.mrw-com-txt h2{ text-align:left; }

/* El botón de la maqueta: pastilla clara con filo, no un botón macizo. */
.mrw-com-cta{
  display:inline-flex; align-items:center; gap:10px;
  margin-top:26px; padding:14px 24px;
  border-radius:100px; background:#fff;
  border:1px solid rgba(26,26,28,.12);
  color:#1d1d1f; font-size:15px; font-weight:600;
  box-shadow:0 10px 24px -14px rgba(0,0,0,.35);
  transition:transform .4s cubic-bezier(0.22,1,0.36,1), box-shadow .4s ease;
}
.mrw-com-cta:hover{ transform:translateY(-2px); box-shadow:0 16px 30px -16px rgba(0,0,0,.42); }

.mrw-com-cards{ display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; }
/* "Ver más salas", centrado bajo las salas y en coral, como en la maqueta. */
.mrw-com-mas{
  display:block; width:max-content; margin:22px auto 0;
  color:#E0523C; font-size:15px; font-weight:600;
  transition:opacity .3s ease;
}
.mrw-com-mas:hover{ opacity:.72; }

/* Por debajo de 1024 vuelve a una sola columna: tres tarjetas y un titular
   grande no caben a lo ancho, y apretarlas las haría ilegibles. */
@media (max-width:1024px){
  .mrw-com{ grid-template-columns:1fr; }
  .mrw-com-txt{ text-align:center; max-width:640px; margin:0 auto; }
  .mrw-com-txt h2{ text-align:center; }
  .mrw-com-cards{ grid-template-columns:1fr; }
}