/* ============================================================ munily.com — main.css (compartido, tema CLARO) Blanco domina, azul guía, naranja solo se toca para accionar. ============================================================ */ /* Poppins autoalojada (27/08): los woff2 de Google llegaban tarde porque su hoja se cargaba en diferido, y el swap tardío era el causante del CLS que marcaba PSI. Sirviéndola desde el propio dominio y precargando los pesos del primer viewport, el cambio de fuente ocurre antes del pintado. Solo subconjuntos latin. */ @font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url('../assets/fonts/poppins-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url('../assets/fonts/poppins-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url('../assets/fonts/poppins-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url('../assets/fonts/poppins-600-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url('../assets/fonts/poppins-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url('../assets/fonts/poppins-700-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'Poppins';font-style:normal;font-weight:800;font-display:swap;src:url('../assets/fonts/poppins-800-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'Poppins';font-style:normal;font-weight:800;font-display:swap;src:url('../assets/fonts/poppins-800-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} /* Respaldo metric-compatible de Poppins (PSI 27/08): el swap de la fuente web era el causante del CLS 0.301 en preguntas. Con estas métricas el texto ocupa el mismo espacio con la fuente de sistema y con Poppins, así que el intercambio no mueve nada. Valores medidos en el propio sitio: Poppins asciende 1.05em y desciende 0.35em, y necesita 113.66% de tamaño sobre Arial para igualar el ancho medio del cuerpo de texto real. */ @font-face{ font-family:'Poppins fallback'; src:local('Arial'),local('Helvetica'),local('Liberation Sans'); size-adjust:113.66%; ascent-override:92.38%; descent-override:30.79%; line-gap-override:0%; } /* ---------- tokens ---------- */ :root{ /* paleta base (decisión Sergio 19/08) */ --white:#FFFFFF; --blue:#388AED; --orange:#F49E45; /* solo acento de marca; NO es color de acción */ --action:#306EC4; /* color de acción (decisión de dirección 01/09) */ --action-600:#265BA3; /* hover del primario */ --navy:#01204A; --sky:#F4F8FD; --mint:#4ADE9B; /* escala derivada */ --blue-050:#EAF3FD; /* fondos de chip/hover suaves */ --blue-100:#D6E9FB; /* bordes de card */ --blue-600:#1F6FD0; /* hover de links/azul fuerte */ --orange-600:#E8871F; /* hover CTA */ --navy-800:#0A315F; /* navy elevado (cards en sección navy) */ /* texto */ --ink:#01204A; /* principal sobre blanco */ --ink-60:#43608A; --ink-70:#2E4A73; /* secundario */ --ink-40:#7A92B4; /* terciario/labels apagados */ --on-navy:#EAF3FD; /* texto sobre navy */ --on-navy-60:rgba(234,243,253,.72); /* alto real del header permanente; engine.js lo re-mide en el arranque y en cada resize. Declararlo aquí evita el salto de layout de la carga (los consumidores caían a un fallback de 64px, ~10px corto). */ --header-h:76px; /* tipografía */ /* Poppins en todo el sitio (decisión de Sergio 22/08, sustituye al trío Bricolage/Inter Tight/JetBrains). Se mantienen los tres nombres de variable porque marcan el ROL (display / cuerpo / etiquetas) y de ahí cuelgan ~25 reglas de tamaño y tracking; solo cambia la familia. */ --font-d:'Poppins','Poppins fallback',system-ui,sans-serif; --font-b:'Poppins','Poppins fallback',system-ui,sans-serif; --font-m:'Poppins','Poppins fallback',system-ui,sans-serif; /* geometría */ --max:1200px; --r-card:16px; --r-btn:12px; --ease:cubic-bezier(.22,1,.36,1); /* sombras (azuladas, nunca negras puras) */ --shadow-card:0 2px 6px rgba(1,32,74,.05),0 18px 44px -18px rgba(56,138,237,.18); --shadow-card-hover:0 4px 10px rgba(1,32,74,.06),0 28px 60px -20px rgba(56,138,237,.26); --shadow-header:0 1px 0 var(--blue-100),0 10px 30px -18px rgba(1,32,74,.18); } /* ---------- base ---------- */ *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} html.no-motion{scroll-behavior:auto} body{ font-family:var(--font-b); background:var(--white); color:var(--ink); line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; } ::selection{background:var(--blue);color:#fff} img,svg,video,canvas{display:block;max-width:100%} /* Cualquier regla de autor que fije `display` gana al [hidden] del navegador: .btn{display:inline-flex} hacía que el botón "Elegir mi horario" se viera siempre, incluso con el atributo hidden puesto. */ [hidden]{display:none!important} a{color:var(--blue);text-decoration:none;transition:color .25s ease} a:hover{color:var(--blue-600)} button{font:inherit;border:none;background:none;color:inherit;cursor:pointer} :focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:4px} h1,h2,h3,h4{ font-family:var(--font-d); font-weight:800; letter-spacing:-.02em; /* 1.06 servía con Bricolage; Poppins tiene un área de contenido de 1.4em (asc 1050 / desc 350 sobre 1000upm) y a 1.06 los descendentes colgaban 4-5px fuera de la caja de línea. 1.18 los mete dentro sin aflojar el bloque de titular. */ line-height:1.18; color:var(--navy); } h1{font-size:clamp(2.8rem,6.72vw,4.928rem)} h2{font-size:clamp(2.128rem,4.704vw,3.36rem)} h3{font-size:clamp(1.4rem,2.464vw,1.792rem);font-weight:700} .accent{color:var(--blue)} .wrap{width:min(var(--max),92vw);margin-inline:auto} /* skip link: salta la cinemática y va al contenido */ .skip-link{ position:absolute;left:.75rem;top:.75rem;z-index:200; transform:translateY(-160%); background:var(--navy);color:#fff;font-weight:600;font-size:1.008rem; padding:.7em 1.1em;border-radius:10px;text-decoration:none; transition:transform .18s var(--ease); } .skip-link:focus{transform:translateY(0);outline:3px solid var(--action);outline-offset:2px} /* foco visible y consistente en todo lo interactivo */ a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible, textarea:focus-visible,[tabindex]:focus-visible{ outline:3px solid var(--blue);outline-offset:2px;border-radius:6px; } #contenido:focus{outline:none} .lead{color:var(--ink-60);font-size:clamp(1.12rem,1.568vw,1.288rem);max-width:56ch} .eyebrow{ font-family:var(--font-m); font-size:0.806rem; letter-spacing:.26em; text-transform:uppercase; color:var(--blue); display:inline-flex;align-items:center;gap:.7em; } .eyebrow::before{content:"";width:26px;height:1px;background:var(--orange)} /* ---------- botones ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:.55em; font-family:var(--font-d);font-weight:700;font-size:1.098rem; padding:.85em 1.7em;border-radius:var(--r-btn); min-height:44px; /* área táctil mínima */ white-space:nowrap; transition:transform .3s var(--ease),box-shadow .3s var(--ease), background .25s ease,color .25s ease,border-color .25s ease; } .btn .arr{transition:transform .3s var(--ease)} .btn:hover .arr{transform:translateX(4px)} /* primario: EL azul de acción (uno por viewport) */ .btn-primary{ background:var(--action); color:#fff; box-shadow:0 8px 26px -10px rgba(48,110,196,.55); } .btn-primary:hover{background:var(--action-600);transform:translateY(-2px);box-shadow:0 14px 34px -10px rgba(48,110,196,.65)} .btn-primary:active{transform:translateY(0)} /* secundario: azul outline (Ingreso) */ /* Ingreso: outline NAVY. Antes era outline azul, pero con el primario ya en azul los dos competían por el mismo color de acción. En navy se lee como secundario sin discutirle protagonismo al primario. */ .btn-outline{ border:1.5px solid rgba(1,32,74,.30); /* blue-600 y no --blue: el azul base sobre blanco da 3.48:1 y AA pide 4.5 para texto normal (fallo preexistente que destapó la auditoría del header al medir también los elementos con fondo propio). El borde conserva el azul de marca; con blue-600 el texto queda en 4.95:1. */ color:var(--ink); background:transparent; } .btn-outline:hover{background:rgba(1,32,74,.05);color:var(--ink);border-color:var(--ink);transform:translateY(-2px)} /* terciario: fantasma navy sobre secciones claras */ .btn-ghost{border:1.5px solid var(--blue-100);color:var(--ink-60)} .btn-ghost:hover{border-color:var(--blue);color:var(--blue)} /* ---------- tarjeta de dato ---------- Componente único para los datos internos. Hereda el aspecto de la vieja tarjeta del 68%, que estaba atada a la animación del cinema y se retiró al pasar el Home a 8 beats. El naranja aquí es acento de llamada de atención, no de acción: la tarjeta no se puede pulsar. En el Home la revela el ProgressActivator con .lit; en administración es estática. */ .dato-card{ position:relative; margin-top:1.4rem; max-width:100%; background:var(--white); border:1.5px solid var(--orange); border-radius:var(--r-card); box-shadow:0 24px 50px -18px rgba(244,158,69,.4); padding:1.1rem 1.3rem; font-size:1.008rem;color:var(--ink-60); } .dato-card b{color:var(--navy)} /* Atribución: los datos curiosos son internos de Munily, no de un estudio externo, y decirlo evita que se lean como estadística de tercero. */ .dato-fuente{ display:block;margin:-.15rem 0 .55rem; font-family:var(--font-m);font-size:0.64rem;letter-spacing:.06em; color:var(--ink-40);font-weight:500; } .dato-cifra{ display:inline-block;font-family:var(--font-m);font-size:0.672rem;letter-spacing:.18em; color:var(--orange-600);border:1px solid var(--orange);border-radius:100px; padding:.3em .8em;margin-bottom:.6rem;text-transform:uppercase; } /* frase de cierre destacada del hero */ .cierre-fuerte{ display:block;margin-top:1.1rem; font-family:var(--font-d);font-weight:700; font-size:clamp(1.05rem,2.1vw,1.35rem); line-height:1.3;letter-spacing:-.01em;color:var(--navy); } /* ---------- módulos del Home: título grande persistente ---------- El título de módulo se queda encendido mientras se recorren sus funcionalidades; lo que cambia por beat es el subtítulo y el párrafo. */ /* Título de módulo: MISMA columna que el panel del beat y encima de él, no flotando aparte. left:0 lo sacaba del margen y su top fijo chocaba con el panel centrado. Ocupa dos líneas fijas para que el panel no baile según el título sea de una o de dos. */ .mod-modulo{ position:absolute;z-index:5; left:clamp(1.2rem,5vw,4rem); top:calc(var(--header-h,76px) + 2.6rem); margin:0; max-width:min(46ch,45%); min-height:5rem; /* dos líneas al tamaño máximo; en rem para que el panel use la misma medida */ display:flex;align-items:flex-end; font-family:var(--font-d);font-weight:800; font-size:clamp(1.75rem,2.4vw,2.25rem); /* 28 a 36 px */ line-height:1.1; letter-spacing:-.02em;text-transform:uppercase;color:var(--navy); transition:opacity .5s var(--ease),transform .5s var(--ease); } .mod-modulo:not(.lit){opacity:0;transform:translateY(18px)} .mod-panel h4{ font-family:var(--font-d);font-weight:700; font-size:clamp(1.15rem,2.3vw,1.6rem);line-height:1.2; letter-spacing:-.01em;color:var(--navy);margin:0 0 .6rem; } /* Título del módulo DENTRO de la card, solo en móvil (decisión de Sergio 02/09): encima del nombre de la funcionalidad, para que el celular quede centrado. */ .mod-eyebrow{ display:none; font-family:var(--font-d);font-weight:800;font-size:.78rem;line-height:1.25; letter-spacing:.06em;text-transform:uppercase;color:var(--navy);margin:0 0 .35rem; /* navy: 4,5:1 mínimo AA; el azul daba 3,5 */ } /* etiqueta de la tarjeta de dato: "¿Sabías que?" / "Did you know?" */ .dato-eyebrow{ display:block;margin-bottom:.35rem; font-family:var(--font-m);font-size:0.66rem;letter-spacing:.16em; text-transform:uppercase;color:var(--orange-600);font-weight:600; } .dato-card:not(.lit){opacity:0;transform:translateY(22px);pointer-events:none} .dato-card{transition:opacity .5s var(--ease),transform .5s cubic-bezier(.34,1.56,.64,1)} @media (max-width:767px){ /* El título de módulo flotante NO se muestra en móvil: va dentro de la card como .mod-eyebrow, encima del nombre de la funcionalidad, y así el celular puede ir centrado sin tapar nada (Sergio, 02/09). */ .mod-modulo{display:none} .mod-eyebrow{display:block} /* la card compacta: con el dato dentro no puede crecer hasta el teléfono */ .dato-card{font-size:.88rem;padding:.75rem .9rem} /* Apagado NO reserva sitio: con opacity:0 la card ya medía 442px antes de que el dato encendiera y subía hasta el pie del teléfono. Al encender, la card crece hacia arriba (va anclada abajo) y @starting-style conserva el fundido de entrada donde el navegador lo soporta. */ .dato-card:not(.lit){display:none} @starting-style{ .dato-card.lit{opacity:0;transform:translateY(22px)} } } /* ---------- header / nav ---------- */ /* header PERMANENTE y transparente (decisión final 26/08): - nunca se oculta ni gana fondo; el color del nav lo deciden las sondas de engine.js (clase .nav-oscuro sobre secciones data-nav="dark") - el scrim ::before despega el nav del contenido sin parecer una barra - alto constante: --header-h se mantiene exacto para los offsets (anclas, paneles del cinema, pin del stack) */ .site-header{ position:fixed;inset:0 0 auto 0;z-index:100; display:flex;align-items:center;justify-content:space-between; gap:1rem; padding:.9rem clamp(1.2rem,4vw,3rem); background:transparent; transition:background .35s ease,backdrop-filter .35s ease; } /* scrim: degradado suave de 120px que arranca en el borde superior de la página. Vive dentro del header (z-index:-1 → detrás del nav, delante del contenido) y no captura clics. Su color acompaña al modo de las sondas. */ .site-header::before{ content:"";position:absolute;left:0;right:0;top:0;height:120px;z-index:-1; pointer-events:none; background:linear-gradient(to bottom, rgba(255,255,255,.92) 0%, rgba(255,255,255,.88) 28%, rgba(255,255,255,.62) 56%, rgba(255,255,255,.28) 80%, rgba(255,255,255,0) 100%); transition:opacity .2s ease; } /* el modo oscuro necesita bastante menos velo: el nav ya es blanco sobre navy y parte con contraste altísimo (medido: basta a0≈0.60). A .92 se comía el contenido del footer y de la sección de impacto. */ .nav-oscuro::before{ background:linear-gradient(to bottom, rgba(1,32,74,.70) 0%, rgba(1,32,74,.64) 28%, rgba(1,32,74,.42) 56%, rgba(1,32,74,.18) 80%, rgba(1,32,74,0) 100%); } /* con el menú móvil abierto el header gana fondo (el panel cuelga de él) */ .site-header.nav-open{ background:rgba(255,255,255,.94); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); } .site-header.nav-open::before{opacity:0} @media (prefers-reduced-motion:reduce){ .site-header,.site-header::before{transition:none} } /* anclas: con el header permanente el destino aterrizaba DEBAJO del header. No existía scroll-margin ni scroll-padding en el sitio (antes "funcionaba" por accidente: bajar al ancla ocultaba el header). Se resuelve en el contenedor de scroll, que cubre de una vez anclas nativas, carga con #hash, scrollIntoView y los 5 skip links. */ html{scroll-padding-top:calc(var(--header-h,76px) + 2.75rem)} /* ~120px: por debajo de la cola del scrim */ /* logo: positivo y negativo superpuestos, se cruzan con el modo del nav (recolorear con filter mataría el naranja de la marca) */ .brand{display:inline-flex;align-items:center;position:relative} .brand img{height:34px;width:auto;transition:opacity .2s ease} .brand .logo-oscuro{position:absolute;left:0;top:50%;translate:0 -50%;opacity:0} .nav-oscuro .brand .logo-claro{opacity:0} .nav-oscuro .brand .logo-oscuro{opacity:1} /* ---------- nav sobre fondo oscuro (modo adaptativo) ---------- El grupo entero cambia junto en 200ms: con fondos mixtos, cambiar elemento por elemento produciría un efecto arcoíris. El CTA naranja no se toca: funciona sobre claro y sobre navy. */ .site-header .brand, .site-header .nav-link, .site-header .dropdown-btn, .site-header .lang-toggle, .site-header .btn-outline, .site-header .nav-burger{ transition:color .2s ease,border-color .2s ease,background .2s ease,opacity .2s ease; } /* red de seguridad del header sin fondo: halo del color del modo para que el nav se lea aunque cruce por encima de párrafos, titulares o fotos */ .site-header .nav-link, .site-header .dropdown-btn, .site-header .lang-toggle, .site-header .nav-burger{text-shadow:0 0 2px rgba(255,255,255,.85)} .site-header .brand img{filter:drop-shadow(0 0 3px rgba(255,255,255,.9))} .nav-oscuro .nav-link, .nav-oscuro .dropdown-btn, .nav-oscuro .lang-toggle, .nav-oscuro .nav-burger{text-shadow:0 0 3px rgba(1,32,74,.9),0 1px 9px rgba(1,32,74,.8)} .nav-oscuro .brand img{filter:drop-shadow(0 0 4px rgba(1,32,74,.9)) drop-shadow(0 1px 8px rgba(1,32,74,.75))} .site-header.nav-open .nav-link, .site-header.nav-open .dropdown-btn, .site-header.nav-open .lang-toggle, .site-header.nav-open .nav-burger{text-shadow:none} .site-header.nav-open .brand img{filter:none} .nav-oscuro .nav-link, .nav-oscuro .dropdown-btn, .nav-oscuro .nav-burger{color:#fff} .nav-oscuro .nav-link:hover, .nav-oscuro .dropdown-btn:hover{color:#9CC8F8} .nav-oscuro .nav-link::after{background:#fff} .nav-oscuro .lang-toggle{color:#fff;border-color:rgba(255,255,255,.5)} .nav-oscuro .lang-toggle:hover{color:var(--navy);background:#fff;border-color:#fff} /* el .btn-outline base lleva fondo BLANCO: en modo oscuro hay que vaciarlo o el texto blanco queda invisible sobre él */ .nav-oscuro .btn-outline{color:#fff;border-color:rgba(255,255,255,.65);background:transparent} .nav-oscuro .btn-outline:hover{color:var(--navy);background:#fff;border-color:#fff} /* el panel móvil abierto vuelve el nav a claro: tiene fondo blanco propio */ .site-header.nav-open.nav-oscuro .nav-link, .site-header.nav-open.nav-oscuro .dropdown-btn, .site-header.nav-open.nav-oscuro .nav-burger{color:var(--ink)} .site-header.nav-open.nav-oscuro .lang-toggle{color:var(--ink-70);border-color:var(--blue-100)} .site-header.nav-open.nav-oscuro .brand .logo-claro{opacity:1} .site-header.nav-open.nav-oscuro .brand .logo-oscuro{opacity:0} .nav-main{display:flex;align-items:center;gap:clamp(1rem,2.4vw,2.1rem)} .nav-link{ font-weight:600;font-size:1.053rem;color:var(--ink); position:relative;padding:.35em 0; } .nav-link::after{ content:"";position:absolute;left:0;bottom:0;height:2px;width:0; background:var(--blue);border-radius:2px;transition:width .3s var(--ease); } .nav-link:hover{color:var(--blue)} .nav-link:hover::after{width:100%} .nav-actions{display:flex;align-items:center;gap:.7rem} .nav-actions .btn{padding:.62em 1.25em;font-size:0.986rem} /* dropdown Casos de uso */ .dropdown{position:relative} .dropdown-btn{ display:inline-flex;align-items:center;gap:.45em; font-weight:600;font-size:1.053rem;color:var(--ink);padding:.35em 0; } .dropdown-btn .chev{transition:transform .25s var(--ease)} .dropdown.open .dropdown-btn .chev{transform:rotate(180deg)} .dropdown-btn:hover{color:var(--blue)} .dropdown-menu{ position:absolute;top:calc(100% + .8rem);left:50%;translate:-50% 0; min-width:230px; background:var(--white); border:1px solid var(--blue-100); border-radius:14px; box-shadow:var(--shadow-card-hover); padding:.45rem; opacity:0;visibility:hidden;transform:translateY(6px); transition:opacity .25s ease,transform .25s var(--ease),visibility .25s; } .dropdown.open .dropdown-menu{opacity:1;visibility:visible;transform:translateY(0)} .dropdown-menu a{ display:flex;align-items:center;gap:.7rem; padding:.7rem .85rem;border-radius:10px; font-weight:600;font-size:1.03rem;color:var(--ink); } .dropdown-menu a:hover,.dropdown-menu a:focus-visible{background:var(--blue-050);color:var(--blue-600)} .dropdown-menu .dd-ico{ width:34px;height:34px;flex:none;border-radius:9px; display:grid;place-items:center; background:var(--blue-050);color:var(--blue); } /* toggle de idioma */ .lang-toggle{ font-family:var(--font-m);font-size:0.806rem;letter-spacing:.14em; border:1.5px solid var(--blue-100);border-radius:9px; /* ink-70: con el header transparente el toggle flota sobre contenido real y a ink-60 quedaba en 3.67:1 sobre el hero de administración (AA 4.5) */ padding:.5em .8em;color:var(--ink-70); transition:border-color .25s ease,color .25s ease,background .25s ease; } .lang-toggle:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-050)} @media (max-width:900px){ .nav-main{display:none} .nav-actions .btn-outline{display:none} } /* ---------- secciones ---------- */ .section{padding:clamp(4.5rem,9vh,7.5rem) 0;background:var(--white)} .section--sky{background:var(--sky)} .section--navy{background:var(--navy);color:var(--on-navy)} .section--navy h1,.section--navy h2,.section--navy h3{color:#fff} .section--navy .lead{color:var(--on-navy-60)} .section--navy .eyebrow{color:#9CC8F8} .section--navy a:not(.btn){color:#9CC8F8} .section--navy a:not(.btn):hover{color:#fff} /* ---------- card clara ---------- */ .card{ background:var(--white); border:1px solid var(--blue-100); border-radius:var(--r-card); box-shadow:var(--shadow-card); padding:1.8rem 1.9rem 2rem; transition:transform .45s var(--ease),box-shadow .45s ease,border-color .35s ease; } .card:hover{transform:translateY(-5px);box-shadow:var(--shadow-card-hover);border-color:#BBDBF9} .card h3{margin:.9rem 0 .55rem} .card p{color:var(--ink-60);font-size:1.064rem} /* card sobre sección navy */ .section--navy .card{ background:var(--navy-800); border-color:rgba(156,200,248,.22); box-shadow:0 24px 50px -24px rgba(0,0,0,.5); } .section--navy .card h3{color:#fff} .section--navy .card p{color:var(--on-navy-60)} /* ---------- globo de diálogo de Mario ---------- */ .mario-bubble{ position:relative; max-width:340px; background:var(--white); border:1.5px solid var(--blue-100); border-radius:18px; border-bottom-left-radius:5px; padding:1rem 1.2rem; color:var(--navy); font-size:1.075rem;line-height:1.55; box-shadow:var(--shadow-card); } .mario-bubble::before{ content:"";position:absolute;left:-9px;bottom:14px; width:16px;height:16px; background:var(--white); border-left:1.5px solid var(--blue-100); border-bottom:1.5px solid var(--blue-100); border-bottom-left-radius:4px; transform:rotate(45deg); } .mario-bubble b{color:var(--blue-600)} .mario-bubble + .mario-bubble{margin-top:.8rem} /* ---------- chip de MAIA ---------- */ .chip-maia{ display:inline-flex;align-items:center;gap:.6rem; background:var(--blue); border-radius:12px; padding:.55rem 1rem; box-shadow:0 10px 26px -10px rgba(56,138,237,.55); } .chip-maia img{height:22px;width:auto} .chip-maia .by{ font-family:var(--font-m);font-size:0.672rem;letter-spacing:.16em; text-transform:uppercase;color:rgba(255,255,255,.85); } /* ---------- comparador antes/después (tema claro) ---------- */ .ba{ position:relative;overflow:hidden;user-select:none;-webkit-user-select:none; touch-action:pan-y;cursor:ew-resize; border-radius:var(--r-card) var(--r-card) 0 0; height:280px; --pos:50%; } .ba-layer{position:absolute;inset:0;overflow:hidden;isolation:isolate} /* isolation: los hijos con z-index no se salen de su capa */ /* DESPUÉS: azul vivo (capa base) */ .ba-after{background:linear-gradient(135deg,var(--blue) 0%,#2E7BDE 55%,#1F6FD0 100%)} .ba-after .ba-tag{right:.9rem;color:#fff;border-color:rgba(255,255,255,.5);background:rgba(31,111,208,.45)} /* ANTES: gris desaturado sobre sky (capa superior recortada) */ .ba-before{ background: radial-gradient(120% 100% at 25% 15%,#EDF1F6 0%,#DDE3EB 60%), var(--sky); clip-path:inset(0 calc(100% - var(--pos,50%)) 0 0); will-change:clip-path; z-index:2; filter:saturate(.6); } .ba-before .ba-tag{left:.9rem;color:#6B7A8E;border-color:#C3CDD9;background:rgba(255,255,255,.75)} .ba-tag{ position:absolute;top:.85rem;z-index:4; font-family:var(--font-m);font-size:0.65rem;letter-spacing:.24em;text-transform:uppercase; padding:.5em 1em;border-radius:100px;border:1px solid; backdrop-filter:blur(6px); } /* divisor + handle */ .ba-divider{position:absolute;top:0;bottom:0;left:var(--pos,50%);z-index:6;width:0;pointer-events:none} .ba-divider .ba-line{ position:absolute;top:0;bottom:0;left:-1px;width:2px; background:linear-gradient(180deg,transparent,var(--white) 12%,var(--white) 88%,transparent); box-shadow:0 0 14px rgba(1,32,74,.35); } .ba-handle{ position:absolute;top:50%;left:0;translate:-50% -50%; width:48px;height:48px;border-radius:50%; pointer-events:auto;cursor:grab; background:var(--white);color:var(--blue-600); display:grid;place-items:center; box-shadow:0 10px 26px rgba(1,32,74,.3),0 0 0 6px rgba(255,255,255,.35); transition:transform .25s var(--ease); } .ba-handle:hover{transform:scale(1.08)} .ba.dragging .ba-handle,.ba-handle:active{cursor:grabbing;transform:scale(.94)} .ba-handle svg{width:22px;height:22px} .ba-handle::after{ content:"";position:absolute;inset:-9px;border-radius:50%; border:2px solid rgba(56,138,237,.55); animation:ba-pulse 2.4s ease-out infinite;pointer-events:none; } @keyframes ba-pulse{0%{transform:scale(.8);opacity:.9}70%{transform:scale(1.35);opacity:0}100%{opacity:0}} .ba.touched .ba-handle::after{animation:none;opacity:0} /* contenido de las escenas del comparador */ .ba-scene{position:absolute;inset:0} .ba-scene>*{position:absolute} .ba-ui{ background:rgba(255,255,255,.92); border:1px solid var(--blue-100);border-radius:12px; padding:.65rem .8rem; box-shadow:0 12px 28px -12px rgba(1,32,74,.35); color:var(--ink);font-size:0.806rem;line-height:1.45; } .ba-ui .u-lbl{ font-family:var(--font-m);font-size:0.582rem;letter-spacing:.16em; text-transform:uppercase;color:var(--blue-600);display:block;margin-bottom:.3rem; } .ba-ui .u-big{font-family:var(--font-d);font-weight:800;font-size:1.176rem;color:var(--navy)} .ba-ui .u-ok{color:#1D9E66;font-weight:600} .ba-paper{ background:#fff;border:1px solid #D8DEE6;border-radius:4px; box-shadow:0 8px 18px rgba(90,102,120,.25); padding:1.4rem .7rem .6rem;overflow:hidden; } .ba-paper::before{ content:attr(data-t);position:absolute;top:.45rem;left:.7rem;right:.7rem; font-family:var(--font-m);font-size:0.56rem;letter-spacing:.1em;color:#8B97A6; text-transform:uppercase;white-space:nowrap;overflow:hidden; } .ba-paper::after{ content:"";display:block;height:100%; background:repeating-linear-gradient(180deg,#C6CED8 0 2px,transparent 2px 9px); opacity:.7; } .ba-stamp{ font-family:var(--font-m);font-weight:700;letter-spacing:.24em;text-transform:uppercase; color:#C0564E;border:2.5px double #C0564E;border-radius:6px; padding:.4em .8em;font-size:0.739rem;background:rgba(192,86,78,.06); } /* ---------- mockup de celular (FrameScrubber) ---------- */ .mockup{ position:relative; width:clamp(240px,24vw,310px); aspect-ratio:9/19; border-radius:38px; background:var(--navy); padding:10px; box-shadow: 0 0 0 2px rgba(1,32,74,.9), 0 30px 70px -22px rgba(1,32,74,.45), 0 0 60px -18px rgba(56,138,237,.35); } .mockup::before{ /* notch */ content:"";position:absolute;top:18px;left:50%;translate:-50% 0;z-index:3; width:36%;height:22px;border-radius:12px;background:var(--navy); } .mockup .screen{ position:absolute;inset:10px; border-radius:30px;overflow:hidden; background:var(--sky); } .mockup canvas{width:100%;height:100%} /* estados del scrubber */ .fs-wrap .screen::after{ /* loader */ content:"";position:absolute;inset:0; background:var(--sky) center/38px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 38 38' stroke='%23388AED'%3E%3Cg fill='none' stroke-width='3'%3E%3Ccircle cx='19' cy='19' r='16' stroke-opacity='.25'/%3E%3Cpath d='M35 19a16 16 0 0 0-16-16'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 19 19' to='360 19 19' dur='.9s' repeatCount='indefinite'/%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); transition:opacity .4s ease; } .fs-wrap.fs-ready .screen::after{opacity:0;pointer-events:none} .fs-wrap.fs-static .screen::after{display:none} .fs-wrap.fs-static .fs-fallback{display:block} .fs-fallback{display:none} /* ---------- footer navy ---------- */ .site-footer{ background:var(--navy);color:var(--on-navy); padding:4.5rem 0 2.2rem; } .foot-grid{ display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:2.6rem; margin-bottom:3rem; } .foot-brand img{height:32px;width:auto;margin-bottom:1rem} .foot-brand p{color:var(--on-navy-60);font-size:1.008rem;max-width:30ch} .foot-mails{display:flex;flex-direction:column;gap:.35rem;margin-top:1.1rem} .foot-mails a{color:#9CC8F8;font-size:1.008rem} .foot-mails a:hover{color:#fff} .foot-social{display:flex;gap:.7rem;margin-top:1.3rem} .foot-social a{ width:38px;height:38px;border-radius:10px; display:grid;place-items:center; border:1px solid rgba(156,200,248,.3);color:#9CC8F8; transition:background .25s ease,color .25s ease,border-color .25s ease,transform .25s var(--ease); } .foot-social a:hover{background:var(--blue);border-color:var(--blue);color:#fff;transform:translateY(-2px)} .foot-col h3{ font-family:var(--font-m);font-size:0.739rem;letter-spacing:.22em;text-transform:uppercase; color:#9CC8F8;margin-bottom:1.15rem;font-weight:400; } .foot-col ul{list-style:none;display:flex;flex-direction:column;gap:.65rem} .foot-col a{color:var(--on-navy-60);font-size:1.008rem} .foot-col a:hover{color:#fff} .foot-badges{display:flex;flex-wrap:wrap;gap:.7rem;margin-bottom:1.2rem} .badge{ display:inline-flex;align-items:center;gap:.55rem; border:1px solid rgba(156,200,248,.3);border-radius:10px; padding:.5rem .85rem;font-size:0.896rem;color:var(--on-navy-60); } .badge img{height:20px;width:auto;flex:none;border-radius:4px} .badge .cds-logo{height:22px;border-radius:0} a.badge{transition:border-color .25s ease,transform .25s var(--ease)} a.badge:hover{border-color:#9CC8F8;transform:translateY(-2px);color:#fff} .store-btns{display:flex;flex-wrap:wrap;gap:.7rem} /* badges oficiales de tiendas (alto ≥40px + área de respeto de las guías) */ .store-badges{display:flex;flex-wrap:wrap;align-items:center;gap:.85rem} .store-badges a{display:inline-block;transition:transform .25s var(--ease)} .store-badges a:hover{transform:translateY(-2px)} .store-badges img{height:48px;width:auto;display:block} .foot-base{ display:flex;justify-content:center;align-items:center;gap:1rem;flex-wrap:wrap; padding-top:1.7rem;border-top:1px solid rgba(156,200,248,.18); font-size:0.896rem;color:var(--on-navy-60); } /* wrap y gap flexible: al anadir el tercer enlace legal (acceso frecuente, 03/09) la fila no cabia a 320px y sacaba scroll horizontal en las 8 paginas -- 64 fallos de la puerta responsive de golpe. Un flex sin wrap no perdona. */ .foot-base .legal{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem 1.4rem} .foot-base .legal a{color:var(--on-navy-60)} .foot-base .legal a:hover{color:#fff} @media (max-width:860px){.foot-grid{grid-template-columns:1fr 1fr}} @media (max-width:520px){.foot-grid{grid-template-columns:1fr}} /* ---------- reveals ---------- */ .reveal{opacity:0;transform:translateY(34px);transition:opacity .9s var(--ease),transform .9s var(--ease)} .reveal.in{opacity:1;transform:none} .reveal[data-delay="1"]{transition-delay:.1s} .reveal[data-delay="2"]{transition-delay:.2s} .reveal[data-delay="3"]{transition-delay:.3s} /* ---------- reduced motion ---------- */ @media (prefers-reduced-motion: reduce){ *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important} .reveal{opacity:1 !important;transform:none !important} .ba-handle::after{display:none} } /* ============================================================ NAV MÓVIL — hamburguesa accesible (<900px) ============================================================ */ .nav-burger{ display:none; width:44px;height:44px;border-radius:10px; place-items:center;color:var(--navy); border:1.5px solid var(--blue-100); } .nav-burger svg{width:22px;height:22px} .nav-burger .ic-close{display:none} .nav-open .nav-burger .ic-open{display:none} .nav-open .nav-burger .ic-close{display:block} .nav-panel{display:contents} /* desktop: los hijos viven en el flex del header */ .nav-panel .nav-actions-mobile{display:none} .nav-panel .btn{white-space:normal;max-width:100%} .nav-panel .nav-actions-mobile{flex-wrap:wrap} /* solo existe dentro del panel móvil */ @media (max-width:900px){ .nav-burger{display:grid} .site-header .nav-actions{display:none} /* en móvil las acciones viven en el panel */ .nav-panel{ display:block; /* Recorte horizontal: sus hijos miden más que el panel a 320px y, como visibility:hidden NO saca del layout, el panel cerrado seguía generando scroll horizontal en TODA la página. */ overflow-x:clip; position:fixed;top:var(--header-h,76px);left:0;right:0; background:var(--white); border-bottom:1px solid var(--blue-100); box-shadow:0 30px 60px -30px rgba(1,32,74,.25); padding:1rem clamp(1.2rem,5vw,2rem) 1.4rem; opacity:0;visibility:hidden;transform:translateY(-8px); transition:opacity .3s ease,transform .3s var(--ease),visibility .3s; max-height:calc(100svh - var(--header-h,76px));overflow:auto; } .nav-open .nav-panel{opacity:1;visibility:visible;transform:none} .nav-panel .nav-main{display:flex;flex-direction:column;align-items:stretch;gap:.3rem} .nav-panel .dropdown-menu{ position:static;translate:none;transform:none;opacity:1;visibility:visible; border:none;box-shadow:none;padding:0 0 .4rem .5rem;min-width:0; display:none; } .nav-panel .dropdown.open .dropdown-menu{display:block} .nav-panel .dropdown-btn,.nav-panel .nav-link{ width:100%;justify-content:space-between;display:flex;align-items:center; padding:.8em .2em;font-size:1.12rem;min-height:44px; } .nav-panel .dropdown-menu a{min-height:44px} .nav-panel .nav-actions-mobile{display:flex;gap:.8rem;margin-top:1rem} .nav-panel .nav-actions-mobile .btn{flex:1;min-height:44px} } /* ============================================================ HOME — CINEMA: un solo mundo continuo (principio de flujo-ref/v7) Una sección sticky, 3 capas de video/canvas con crossfade por progreso, fondo de página continuo, cero cajas visibles. ============================================================ */ body{ /* fondo unificado blanco → sky suave; las capas se funden con él */ background:linear-gradient(180deg,var(--white) 0,var(--sky) 720px); } /* alto del cinema: el sticky recorta (alto+100vh)*0.88 → 1900vh de scroll real en desktop / 1700vh en móvil (ver mapa de beats en docs/) */ /* SPAN = (alto + 100vh) x 0.88 -> 1615vh de narrativa */ .cinema{position:relative;height:2235vh} /* SPAN 2055: (alto+100)*0.88 = 2055 · 8 beats + 5 datos */ .cinema-stage{position:sticky;top:0;height:100svh;overflow:hidden} .cine-layer{ position:absolute;inset:0; opacity:0;visibility:hidden; will-change:opacity; } .cine-layer.on{visibility:visible} .cine-layer canvas, .cine-layer video{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover; } /* ============================================================ REGLA GLOBAL TEXTO vs VIDEO (decisión de Sergio 21/08) El storyboard compuso a Mario al centro-izquierda y el texto también vive a la izquierda → chocaban. Se desplaza la CAJA del video 15% a la derecha (sin escalar — el frame se sigue renderizando a 1 viewport de ancho, así que no se magnifica ni un pixel; el 15% sobrante por la derecha es fondo vacío y lo recorta el overflow del stage). Medido sobre los frames: Mario ocupa 0.33–0.63 del ancho del frame → con el desplazamiento queda en 48%–78% del viewport, dentro del 55% derecho y sin tocar ni la columna de texto ni el teléfono. ============================================================ */ @media (min-width:768px){ .cine-layer canvas, .cine-layer .fs-poster{ left:15%;right:auto;width:100vw;max-width:none; /* vence el reset max-width:100% */ } /* scrim: garantiza legibilidad del texto pase lo que pase detrás */ .cine-scrim{ position:absolute;inset:0;z-index:4;pointer-events:none; background:linear-gradient(90deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.90) 20%, rgba(255,255,255,.55) 36%, rgba(255,255,255,0) 50%); } } /* feather: los bordes del video/canvas se funden con el fondo de página */ .cine-fade::after{ content:"";position:absolute;inset:0;pointer-events:none;z-index:2; background: linear-gradient(180deg,rgba(244,248,253,.95) 0,rgba(244,248,253,0) 14%,rgba(244,248,253,0) 86%,rgba(244,248,253,.95) 100%), linear-gradient(90deg,rgba(244,248,253,.9) 0,rgba(244,248,253,0) 12%,rgba(244,248,253,0) 88%,rgba(244,248,253,.9) 100%); } /* POSTER (decisión de Sergio 21/08): se ve desde el primer paint y el canvas solo lo reemplaza cuando hay frames suficientes. Si nunca llegan (red pobre), el poster se queda y la página funciona completa. */ .fs-poster{position:absolute;inset:0;z-index:1;opacity:0;transition:opacity .5s var(--ease);pointer-events:none} .fs-poster.show{opacity:1} .fs-wrap.fs-ready .fs-poster{opacity:0} .fs-wrap.fs-static .fs-poster{opacity:1} .cine-layer .fs-poster,.cine-layer .fs-poster img{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover; } /* cover y no fill: el hueco de la pantalla del marco tiene 0.469 de proporción y el frame 0.462. Con fill se estiraba un 1.7% (lo que Lighthouse marca como "relación de aspecto incorrecta" y lo que baja Prácticas a 96); con cover se recorta ese 1.7% y no se deforma nada. */ .iphone .screen .fs-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:1} .iphone .screen canvas{z-index:2} .fs-wrap.fs-ready .iphone .screen .fs-poster{opacity:0} /* cadena e1→e6: escena completa (Mario centro-izquierda deja libre la columna derecha, donde vive el mockup DOM) — sin recorte */ /* ============================================================ COMPONENTE IPHONE — el único teléfono del sitio. Marco PNG/WebP con pantalla transparente encima; la pantalla (canvas app-nav) va debajo, recortada EXACTAMENTE al hueco medido del marco: hueco = left 4.545% · top 2.722% · w 90.909% · h 94.556% del componente, esquinas r=14.75% del ancho de pantalla (elipse equivalente 6.93% alto). ============================================================ */ .iphone{ position:relative;aspect-ratio:880/1800; filter:drop-shadow(0 16px 28px rgba(1,32,74,.24)); } .iphone .screen{ position:absolute;left:4.545%;top:2.722%;width:90.909%;height:94.556%; overflow:hidden;background:#fff;border-radius:14.75%/6.93%; } .iphone .screen canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:fill} .iphone-frame{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2} /* levitación sutil sobre la palma abierta de Mario (se activa con v2b) */ @keyframes phone-float{0%,100%{translate:0 0}50%{translate:0 -5px}} .iphone.floating .screen,.iphone.floating .iphone-frame{animation:phone-float 3.2s ease-in-out infinite} @media (prefers-reduced-motion: reduce){ .iphone.floating .screen,.iphone.floating .iphone-frame{animation:none} } /* teléfono fijo en la columna derecha (desktop); el vuelo lo controla JS con transform (origin 0 0) — el layout box de estas reglas ES el dock, por eso se posiciona sin translate */ .mods-phone{ position:absolute;z-index:6; /* en módulos no hay video detrás: el teléfono se centra más (~61% del ancho) y la columna de texto queda a su izquierda */ left:calc(61% - clamp(210px,20vw,290px)/2);right:auto; width:clamp(210px,20vw,290px); /* mismo desplazamiento que .mod-panel: los dos se centran en el hueco bajo el header, si no quedan desalineados entre sí */ top:calc(50% + var(--header-h,76px)/2 - clamp(210px,20vw,290px)*1.023); transform-origin:0 0; will-change:transform,opacity; } /* --- overlays del hero --- */ .hero-copy{ position:absolute;z-index:5; left:clamp(1.2rem,6vw,5rem);top:50%;transform:translateY(-50%); /* 51ch, no 46: al subir la tipografía un 12% (23/08) el titular se pasaba a 4 líneas. Barrido de medidas: por debajo de 50ch son 4 líneas y a partir de 56ch la última queda en viuda ("uno."). 51ch da 3 líneas con la última completa. */ max-width:min(51ch,45%); transition:opacity .42s var(--ease),transform .42s var(--ease); } /* La columna del hero mide 462px fijos (la limita 46ch, no el 45%), así que el h1 rompe igual a 1280, 1440 y 1920. Con Poppins, 2.5rem es el único valor que da 3 líneas sin viuda: 2.7rem deja 4 líneas y 2.3rem deja "uno." solo. Antes no había regla base y heredaba el h1 global (4.4rem = 70px → 5 líneas). */ .hero-copy h1{font-size:clamp(2.352rem,4.704vw,2.8rem)} .hero-copy .lead{margin-top:1.2rem} .hero-copy .btn{margin-top:1.8rem} .hero-phase{transition:opacity .42s var(--ease),transform .42s var(--ease)} .hero-phase:not(.lit){opacity:0;transform:translateY(26px);pointer-events:none} /* los globos también viven en la columna izquierda: nunca sobre el personaje */ .hero-bubbles{ position:absolute;z-index:5; left:clamp(1.2rem,6vw,5rem);bottom:12vh; max-width:min(46ch,45%); display:flex;flex-direction:column;align-items:flex-start;gap:.8rem; } /* el cue vive también en la columna izquierda (antes centrado → caía sobre Mario) */ .hero-scroll-cue{ position:absolute;z-index:5;left:clamp(1.2rem,6vw,5rem);bottom:1.6rem; font-family:var(--font-m);font-size:0.672rem;letter-spacing:.3em;text-transform:uppercase; color:var(--ink-40);display:flex;flex-direction:column;align-items:center;gap:.5rem; } .hero-scroll-cue{align-items:flex-start} /* Pantallas cortas (portátiles ~720–900px de viewport): el copy del hero medía 591px fijos y el cue quedaba pegado al CTA (o encima: −26px a 720px). Se comprime el bloque para que los dos respiren, en vez de esconder el "Sigue bajando", que es la señal de que hay más abajo. */ @media (min-width:768px) and (max-height:900px){ /* el h1 ya no se toca aquí: la regla base es más pequeña que este 3.1rem y esto lo haría crecer justo donde hay menos alto */ .hero-copy .lead{font-size:1.12rem;margin-top:.9rem} .hero-copy .btn{margin-top:1.2rem} .hero-scroll-cue::after{height:26px} } @media (min-width:768px) and (max-height:660px){ .hero-scroll-cue{display:none} /* ya no cabe de ninguna forma */ } .hero-scroll-cue::after{ content:"";width:1px;height:42px; background:linear-gradient(180deg,var(--blue),transparent); } @media (max-width:767px){ .cinema{height:1919vh} /* misma proporcion movil/escritorio que antes */ /* móvil: el personaje FLOTA sobre el fondo de la página — sin caja, sin banda, sin fondo propio. Máscara radial de feather amplio + degradado suave hacia el color de la página. */ .cine-layer{background:transparent} .cine-layer canvas,.cine-layer .fs-poster{ inset:auto 0;top:30%;translate:0 -50%;left:0;width:100%; height:42svh;aspect-ratio:auto; /* más alto: el cover-fit recorta los lados vacíos */ /* feather en los CUATRO lados: sin borde recto en ningún punto del scroll. Un radial no alcanza en una caja tan ancha y baja → dos lineales intersecados. */ -webkit-mask-image: linear-gradient(180deg,transparent 0,#000 15%,#000 76%,transparent 100%), linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%); mask-image: linear-gradient(180deg,transparent 0,#000 15%,#000 76%,transparent 100%), linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%); -webkit-mask-composite:source-in; mask-composite:intersect; } .cine-layer .fs-poster img{width:100%;height:100%;object-fit:cover} /* sin bloque sólido: solo un velo que crece hacia abajo para el texto */ .cine-scrim{ position:absolute;inset:0;z-index:4;pointer-events:none; background:linear-gradient(180deg, rgba(255,255,255,0) 34%, rgba(255,255,255,.55) 46%, rgba(255,255,255,.92) 56%, rgba(255,255,255,1) 66%); } .cine-fade::after{display:none} /* texto SIEMPRE en la mitad inferior, video en la superior */ .hero-copy{left:1.2rem;right:1.2rem;top:47%;transform:none;max-width:none;text-align:center} /* 8vw y no 8.512: al escalar la tipografía el titular se partía en 4 líneas dejando "uno." solo. A 8vw son 3 líneas y sigue siendo mayor que antes. */ .hero-copy h1{font-size:clamp(1.904rem,8vw,2.352rem)} .hero-copy .lead{font-size:1.03rem} .hero-copy .btn{margin:1rem auto 0} .hero-phase:not(.lit){transform:translateY(14px)} } /* Pantallas CORTAS (iPhone SE, o iPhone 14/15 con la barra de Safari a la vista): con top:47% el bloque del hero medía más que el alto útil y el CTA quedaba RECORTADO por .cinema-stage{overflow:hidden} — no bajo el pliegue, sino inalcanzable. Se sube el bloque y se aprietan los espacios; la tipografía no cambia. */ @media (max-width:767px) and (max-height:720px){ .hero-copy{top:36%} .hero-copy .lead{font-size:.97rem;margin-top:.6rem} .hero-copy .btn{margin-top:.85rem} } @media (max-width:767px){ .hero-bubbles{right:1rem;left:1rem;bottom:4vh;max-width:none;align-items:center;gap:.6rem} .mario-bubble{max-width:100%;font-size:1.008rem} .hero-scroll-cue{display:none} } .mods-title{ /* top:10vh se metía debajo del header en viewports bajos (a 620px de alto eran 62px contra 73px de header) */ position:absolute;z-index:5;top:max(10vh,calc(var(--header-h,76px) + 1rem));left:clamp(1.2rem,5vw,4rem); max-width:min(46ch,45%); transition:opacity .42s var(--ease),transform .42s var(--ease); } .mods-title h2{ /* Estructura del puente (Sergio, 02/09 noche): el h2 es la frase corta («Con Munily tu comunidad se ve de esta forma:») y el subtítulo lleva la frase larga de los módulos entera, sin partir. */ font-size:clamp(2.1rem,3.2vw,3rem);line-height:1.08;text-wrap:balance; } .mods-title .lead{ /* la frase de los módulos es larga: se le da su propio tamaño para que quepa sin desbordar en 1440, 1366 y 390 */ font-size:clamp(1rem,1.15vw,1.2rem);line-height:1.5;text-wrap:pretty; } /* los dos beats del puente se activan por separado */ .tphase{transition:opacity .42s var(--ease),transform .42s var(--ease)} .tphase:not(.lit){opacity:0;transform:translateY(20px);pointer-events:none} .mod-panel{ position:absolute;z-index:5; /* Arranca justo DEBAJO del título de módulo, en su misma columna. Antes iba centrado por su cuenta y se montaba con el título. */ left:clamp(1.2rem,5vw,4rem); top:calc(var(--header-h,76px) + 2.6rem + 5rem + 1.6rem); /* mismas unidades que el título */ max-width:min(46ch,45%); transition:opacity .42s var(--ease),transform .42s var(--ease); } .mod-panel:not(.lit){opacity:0;transform:translateY(14px);pointer-events:none} /* (el velo radial por panel se retiró: la legibilidad la garantiza el .cine-scrim global de la columna izquierda) */ .mod-panel p{color:var(--ink-60);margin-top:.7rem} .mod-panel .btn{margin-top:1.2rem;font-size:0.986rem;padding:.7em 1.4em} .mod-dots{ position:absolute;z-index:5;right:clamp(1rem,3vw,2.4rem);top:50%;translate:0 -50%; display:flex;flex-direction:column;gap:.7rem; } .mod-dots i{ width:8px;height:8px;border-radius:50%; background:var(--blue-100);transition:background .4s ease,transform .4s var(--ease); } .mod-dots i.on{background:var(--blue);transform:scale(1.4)} /* dato del 68% (PQRS): vive DENTRO de la columna de texto, en flujo normal bajo el panel del módulo 03 — ya no flota sobre el personaje */ @media (max-width:767px){ /* en los módulos no hay video en ninguna plataforma (reestructura 21/08); la capa de reentrada SÍ se muestra en móvil: es parte de la narrativa */ /* Teléfono CENTRADO bajo el header (la hamburguesa acaba en ~57px). El título de módulo ya no flota a su izquierda (va dentro de la card), así que no tapa nada. 38svh: en 390x844 acaba a ~405px y la card más alta (con dato y título) arranca a ~425px. Ancho = 38svh × 880/1800. */ .mods-phone{ right:auto;top:calc(var(--header-h,76px) + .5rem); height:38svh;width:auto; left:calc(50% - 9.3svh); } .mods-phone .screen canvas{ -webkit-mask-image:none;mask-image:none;aspect-ratio:auto; } .mods-title{top:auto;bottom:5vh;left:1.2rem;right:1.2rem;max-width:none;text-align:center} .mods-title h2{font-size:1.624rem} .mods-title .lead{font-size:0.986rem;margin-top:.5rem !important} .mod-panel{ top:auto;bottom:4vh;left:1.2rem;right:1.2rem;transform:none;max-width:none; background:var(--white);border:1px solid var(--blue-100);border-radius:14px; box-shadow:var(--shadow-card);padding:1rem 1.2rem; z-index:7; /* por DELANTE del pie del teléfono (z 6): es opaca, se lee siempre */ } .mod-panel:not(.lit){transform:translateY(14px)} .mod-panel h4{font-size:1.2rem;margin-bottom:.4rem} /* el clamp es SOLO para el párrafo propio del módulo: como descendiente también recortaba el texto del dato del 68% (le faltaban 44px) */ .mod-panel > p{font-size:0.952rem;margin-top:.4rem;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden} /* Con el dato ENCENDIDO, el cuerpo del módulo —ya leído en la primera parte del beat— le cede el sitio: la card no crece hasta pisar el teléfono. El CTA se queda SIEMPRE (decisión de Sergio 23/08: el botón convierte, el dato solo informa). Antes esto colgaba de una clase .con-dato que el HTML nuevo ya no lleva, así que no aplicaba. */ .mod-panel:has(.dato-card.lit) > p:not([class]){display:none} .mod-dots{right:auto;left:50%;top:2.5vh;translate:-50% 0;flex-direction:row} /* la regla móvil vieja (de cuando el pop flotaba) lo desplazaba 10vh con position:relative → se salía 84px de la card. Ahora va en flujo dentro de la columna, y cuando no está visible NO reserva espacio (si no, el panel crecía y chocaba con el teléfono). */ } /* Móviles BAJOS (≤700px de alto, p. ej. 360×640): menos teléfono y card más compacta, para que la card anclada abajo no tape más de un tercio del celular. Va después del bloque móvil general para ganar en cascada. */ @media (max-width:767px) and (max-height:700px){ .mods-phone{height:32svh;left:calc(50% - 7.8svh)} .mod-panel{padding:.8rem 1rem} .mod-panel h4{font-size:1.05rem;margin-bottom:.3rem} .mod-panel > p{font-size:.9rem;-webkit-line-clamp:3} .mod-panel .btn{margin-top:.8rem;font-size:.9rem;padding:.55em 1.2em} .mod-eyebrow{font-size:.7rem} .dato-card{font-size:.8rem;padding:.55rem .7rem} } @media (min-width:768px) and (max-width:1099px){ .mod-panel{max-width:330px} .mods-title{max-width:360px} /* El iPhone al 61% dejaba la columna de texto encima: a 768 el título llegaba a x=418 y el teléfono empezaba en 343 (75px de solape). Aquí no hay video detrás, así que el teléfono se puede correr al 70% y las dos columnas caben sin tocarse. */ .mods-phone{left:calc(70% - clamp(210px,20vw,290px)/2)} } /* Durante el PUENTE el teléfono todavía está en la mano de Mario: su posición la manda el encuadre del video, no el CSS, así que ahí el único margen es estrechar la columna. Medido: la mano entra en x=343 (768) y x=346 (834). */ /* TABLETS (768-999): la columna del puente se estrecha hasta el borde REAL del teléfono. En este beat el teléfono va en la mano de Mario y lo coloca el encuadre del vídeo, no el CSS: medido, su borde izquierdo cae en 0,314 del ancho (768x1024, 834x1112, 900x1200). Se toma esa fracción, que es la más estrecha de las observadas; con proporciones más apaisadas el teléfono queda aún más a la derecha y sobra sitio. Se probó llevar el texto abajo, como en móvil, y NO sirve: desde que el chat está encendido el banner de cookies del portal ocupa el borde inferior y tapaba el bloque entero. Dos elementos fijos abajo no caben. */ @media (min-width:768px) and (max-width:999px){ .mods-title{max-width:calc(31.4vw - clamp(1.2rem,5vw,4rem) - 0.75rem)} .mods-title h2{font-size:clamp(1.25rem,2.3vw,1.6rem)} .mods-title .lead{font-size:clamp(.85rem,1.1vw,.95rem)} } /* Viewports bajos: el bloque de MAIA se salía 7px por abajo */ @media (min-width:768px) and (max-height:700px){ /* con la tipografía escalada, el panel del módulo 03 con el dato se salía 21px por abajo a 620px de alto */ .mod-panel{font-size:.94em} .mod-panel h4{font-size:1.2rem} .maia-copy .mario-bubble{font-size:0.986rem;padding:.8rem 1rem;margin-bottom:.8rem} .maia-copy .chip-maia{margin-bottom:.8rem} } /* ============================================================ HOME — MAIA (capa 3 del cinema) ============================================================ */ /* MAIA: chip + una sola burbuja + CTA en la columna IZQUIERDA (antes estaban a la derecha y tapaban a Mario; la segunda burbuja se retiró el 02/09) */ .maia-copy{ position:absolute;z-index:5; left:clamp(1.2rem,6vw,5rem);top:calc(50% + var(--header-h,76px)/2);transform:translateY(-50%); max-width:min(46ch,45%); } .maia-copy .chip-maia{margin-bottom:1.2rem} .maia-copy .mario-bubble{margin-bottom:1.2rem;max-width:100%} .maia-phase{transition:opacity .55s var(--ease),transform .55s var(--ease)} .maia-phase:not(.lit){opacity:0;transform:translateY(24px);pointer-events:none} /* ============================================================ CLICS EN EL CINEMA Los overlays de texto se apilan unos sobre otros durante todo el scroll: el bloque de MAIA, aunque esté invisible, cubre la zona donde está el CTA del hero y la de los 6 módulos. Sin esto, ningún "Quiero saber más" del Home llegaba a contacto.html: el clic se lo comía #maia-phase-2. Regla: los CONTENEDORES nunca capturan; solo sus hijos encendidos. ============================================================ */ .hero-copy,.hero-bubbles,.mods-title,.maia-copy{pointer-events:none} .hero-phase.lit,.tphase.lit,.maia-phase.lit,.mod-panel.lit,.dato-card.lit{pointer-events:auto} @media (max-width:767px){ #layer-maia canvas{top:30%} /* MAIA en móvil: cabe en la mitad inferior sin subirse al video */ .maia-copy{left:1.2rem;right:1.2rem;top:auto;bottom:2.5vh;transform:none;max-width:none} .maia-copy .chip-maia{margin-bottom:.7rem} .maia-copy .mario-bubble{margin-bottom:.7rem;font-size:0.952rem;padding:.75rem .9rem} .maia-copy .btn{margin-top:.9rem !important} } /* ============================================================ HOME — B2B, impacto, medios, CTA final ============================================================ */ .b2b-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.8rem;margin-top:2.6rem} @media (max-width:820px){.b2b-grid{grid-template-columns:1fr}} .b2b-card{display:flex;flex-direction:column;align-items:flex-start} .b2b-card .dd-ico{width:46px;height:46px;border-radius:12px;margin-bottom:1.1rem} .b2b-card .btn{margin-top:auto;font-size:0.986rem;padding:.7em 1.4em} .b2b-card{gap:.4rem} .b2b-card p{margin-bottom:1rem} /* Impacto y Medios CENTRADOS (decisión de Sergio 21/08) */ #impacto,#medios{text-align:center} #impacto .eyebrow,#medios .eyebrow{display:inline-block} #impacto h2,#medios h2{margin-inline:auto} #impacto .lead{margin-inline:auto;max-width:44ch} .impact-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;margin-top:2.6rem} @media (max-width:900px){.impact-grid{grid-template-columns:repeat(2,1fr)}} @media (max-width:480px){.impact-grid{grid-template-columns:1fr 1fr;gap:.9rem}} .impact-num{ font-family:var(--font-d);font-weight:800;letter-spacing:-.02em; font-size:clamp(2.128rem,4.928vw,3.472rem);color:#fff;display:block; } .impact-num .plus{color:var(--orange)} .impact-label{ font-family:var(--font-m);font-size:0.717rem;letter-spacing:.18em; text-transform:uppercase;color:#9CC8F8; } .media-row{ display:flex;flex-wrap:wrap;gap:clamp(2rem,5.5vw,4.6rem); align-items:center;justify-content:center;margin-top:2.8rem; } .media-item{ display:inline-flex;align-items:center;gap:.6rem; filter:grayscale(1);opacity:.6; transition:filter .3s ease,opacity .3s ease,transform .3s var(--ease); } .media-item:hover{filter:none;opacity:1;transform:translateY(-2px)} /* logos más grandes (~44px de alto) y con más aire entre ellos */ .media-item img{width:auto;display:block} .media-item img[height="30"]{height:38px} .media-item img[height="34"]{height:44px} .media-item img[height="40"]{height:50px} .media-item img[height="26"]{height:34px} .media-m2 img{border-radius:8px} .media-sq{border-radius:8px} .media-item img[height="36"]{height:46px} .m2-word{ font-family:var(--font-b);font-weight:700;font-size:1.176rem;line-height:1.02; letter-spacing:-.02em;color:#1B1B1B; } @media (max-width:600px){ .media-row{gap:1.2rem 1.6rem} .media-item img{transform:scale(.85);transform-origin:left center} } .final-cta{text-align:center} .final-cta h2{max-width:22ch;margin-inline:auto} .final-cta .btn{margin-top:2.2rem} /* ============================================================ PÁGINAS DE CASO (seguridad / administración) ============================================================ */ /* --- hero scrubbed corto (2 beats) --- */ .caso-hero{position:relative;height:142vh} /* mismo recorte del 22/08 que el cinema del Home */ .caso-stage{position:sticky;top:0;height:100svh;overflow:hidden} .caso-media{position:absolute;inset:0} .caso-stage canvas{position:absolute;inset:0;width:100%;height:100%} .caso-stage .fs-poster,.caso-stage .fs-poster img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% 50%} .caso-copy{ position:absolute;z-index:5; left:clamp(1.2rem,6vw,5rem); /* Antes iba centrado con top:50% + translateY(-50%). Con el copy nuevo de administración —h1 de 3 líneas, frase de cierre, tarjeta de dato y CTA— el bloque crecía hacia arriba y a 1366x768 la primera línea del h1 se metía bajo el header fijo. Ahora el bloque ocupa un ÁREA SEGURA que empieza por debajo del header, y se centra dentro de ella. `safe center` es la clave: centra mientras quepa y se ancla arriba en cuanto no quepa, en vez de desbordar por los dos lados. */ top:calc(var(--header-h,76px) + 1.75rem); bottom:2rem; transform:none; display:flex;flex-direction:column;justify-content:safe center; max-width:clamp(400px,42vw,600px); } /* Velo de legibilidad. En administración el traje navy del personaje pasa por debajo del titular y el contraste caía a 1.00 (fondo = color del texto). Mismo criterio que .cine-scrim del Home: blanco, elipse suave, apagado antes de llegar a la cara. En seguridad el fondo ya es claro y no se nota. */ .caso-copy::before{ content:'';position:absolute;z-index:-1;pointer-events:none; inset:-14vh -52% -14vh -14vw; background:linear-gradient(90deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.95) 55%, rgba(255,255,255,.72) 72%, rgba(255,255,255,.30) 88%, rgba(255,255,255,0) 100%); -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 84%,transparent 100%); mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 84%,transparent 100%); } /* tope 2.9rem (feedback de Sergio 24/08): a 3.8rem el titular hacía un bloque de 4 líneas; con 2.9 + columna de 42vw queda en 3 en desktop y sin cortes */ .caso-copy h1{font-size:clamp(1.95rem,3.4vw,2.5rem);line-height:1.18;text-wrap:balance} .caso-copy .lead{margin-top:1rem;font-size:1.0625rem;line-height:1.6;max-width:55ch} .caso-copy .btn{margin-top:1.6rem} @media (max-width:767px){ .caso-hero{height:116vh} /* el video como parte de la página: sin caja, sin banda, fondo heredado. Un radial no alcanza en una caja ancha y baja → dos lineales intersecados (mismo criterio que el cinema del Home). */ /* COLUMNA FLEX (27/08): el texto entra en el flujo y el media ocupa lo que sobra, así que en pantallas cortas es imposible que se monten. Antes el texto iba en absoluto desde arriba y el video anclado abajo con altura derivada del ANCHO: a 390x664 se cruzaban 44px. */ .caso-stage{ background:transparent; display:flex;flex-direction:column; padding-top:calc(var(--header-h,76px) + .9rem); padding-bottom:2vh; /* alto MÍNIMO, no fijo: con overflow:hidden y 100svh clavados, en una pantalla de 640px el CTA del hero no quedaba "bajo el pliegue" sino literalmente RECORTADO e inalcanzable. Ahora la escena crece si el copy no cabe y el recorte se limita al media. */ height:auto;min-height:100svh;overflow:visible; } .caso-hero{height:auto;min-height:116vh} .caso-media{overflow:hidden} .caso-copy{ position:static;transform:none;max-width:none;text-align:center; left:auto;right:auto;top:auto; padding-inline:1.2rem;flex:0 0 auto; } .caso-media{ position:relative;inset:auto; flex:1 1 auto;min-height:26svh;width:100%; margin-top:.6rem; } .caso-stage canvas, .caso-stage .fs-poster{ position:absolute;inset:0;width:100%;height:100%; -webkit-mask-image: linear-gradient(180deg,transparent 0,#000 15%,#000 82%,transparent 100%), linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%); mask-image: linear-gradient(180deg,transparent 0,#000 15%,#000 82%,transparent 100%), linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%); -webkit-mask-composite:source-in; mask-composite:intersect; } /* contain y no cover: la caja ya no tiene el aspecto del clip y con cover el personaje se recortaba por los lados en pantallas cortas */ .caso-stage .fs-poster img{width:100%;height:100%;object-fit:contain;object-position:center bottom} .caso-copy .lead{font-size:.95rem;margin-top:.7rem} .caso-copy::before{display:none} .caso-copy h1{font-size:clamp(1.792rem,7.84vw,2.24rem)} .caso-copy .btn{margin:1.2rem auto 0} } /* --- sección EL CAMBIO: antes/después grande con letreros DOM --- */ .change-wrap{width:min(1400px,96vw);margin-inline:auto} .change-ba{ height:auto;aspect-ratio:16/9;max-height:86vh; border-radius:20px; box-shadow:var(--shadow-card-hover); } .change-ba .ba-img{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover; } /* --- caja con la geometría real de la imagen bajo object-fit:cover --- La imagen es 16:9 (1.790) y el contenedor es 16/9 en desktop pero 4/3 en móvil, donde el cover recorta 12.8% por lado. Todo lo que deba calzar con un punto de la FOTO (no del contenedor) va dentro de esta caja. Como la imagen siempre es más ancha que el contenedor, cover llena por alto: de ahí height:100% + aspect-ratio. */ .ba-media{ position:absolute;top:50%;left:50%;translate:-50% -50%; height:100%;aspect-ratio:16/9; /* aspecto real de las imágenes (3840x2160) */ } .ba-media .ba-img{position:absolute;inset:0;width:100%;height:100%;object-fit:fill} .sign{ position:absolute;z-index:3; max-width:19%; background:var(--white); border:1.5px solid var(--blue-100); border-radius:10px; padding:.5em .7em; font-weight:600; font-size:clamp(0.582rem,1.288vw,1.03rem); line-height:1.3;color:var(--navy); box-shadow:0 6px 18px -6px rgba(1,32,74,.25); } .ba-before .sign{ background:#F1F4F8;border-color:#C9D2DD;color:#5B6B7E; box-shadow:0 6px 14px -6px rgba(70,84,100,.3); } .ba-after .sign{border-color:var(--blue);} .ba-after .sign::before{ content:"";display:inline-block;width:.5em;height:.5em;border-radius:50%; background:var(--mint);margin-right:.45em;vertical-align:middle; } .sign--chip{max-width:14%;font-size:clamp(0.47rem,1.008vw,0.784rem);padding:.35em .55em} @media (max-width:767px){ /* margen lateral también en móvil (feedback de Sergio 26/08): el título y el comparador iban de borde a borde y el h2 tocaba el filo */ .change-wrap{width:100%;padding-inline:1.2rem} /* 16/9 también en móvil: con 4/3 el cover recortaba 12.8% por lado y los carteles de esa franja (con sus letreros) quedaban fuera de pantalla. Ahora se ve la foto completa y cada letrero cae sobre su cartel. */ .change-ba{border-radius:14px} /* con margen vuelve a llevar esquinas */ .change-ba .ba-img{object-position:center} .sign{max-width:26%} /* al mostrar la foto completa, las etiquetas de la esquina superior chocaban con los letreros de arriba; al pie la foto está vacía */ .change-ba .ba-tag{top:auto;bottom:.85rem} } /* --- grid de 5 cards con mini antes/después --- */ .feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.4rem,2.6vw,2.2rem);margin-top:2.6rem} @media (max-width:900px){.feature-grid{grid-template-columns:1fr}} .feature-card{padding:0;overflow:hidden;display:flex;flex-direction:column} /* Alto por ASPECTO, no fijo: las capturas reales del DESPUÉS son 2.157 y con 210px fijos la caja quedaba en 2.76 a 1440 y 1.70 a 390 — habría que deformarlas o recortarlas de más. Con aspect-ratio la caja se adapta sola en los tres breakpoints y la captura entra sin tocar sus proporciones. */ .feature-card .ba{height:auto;aspect-ratio:2.157;border-radius:0} .feature-card .ba-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} /* a un ancho pequeño el aspecto tan panorámico deja la escena diminuta */ @media (max-width:520px){ .feature-card .ba{aspect-ratio:1.9} } .feature-card .fc-body{padding:1.4rem 1.6rem 1.6rem} .fc-top{display:flex;align-items:center;gap:.85rem;margin-bottom:.7rem} .fc-top img{width:44px;height:44px;object-fit:contain;flex:none} .fc-top h3{font-size:1.288rem} .feature-card p{color:var(--ink-60);font-size:1.008rem} /* Par problema -> solución como
real: un LLM lo extrae como pareja nombre/valor. El aspecto es idéntico al del
con spans que había antes; la flecha pasó de ser un a un ::before (un suelto no es válido entre
y
). */ .fc-swap{display:flex;align-items:center;gap:.7rem;margin:.9rem 0 0;flex-wrap:wrap;font-size:0.874rem} .fc-swap .from{ /* #5E789C y no --ink-40 (#7A92B4): el token daba 3.18 sobre blanco y esto es CONTENIDO (el estado "antes" del par problema→solución), así que necesita 4.5. Queda en 4.53 y sigue leyéndose como texto secundario: el tachado mantiene la jerarquía. */ color:#5E789C;text-decoration:line-through;text-decoration-color:rgba(192,86,78,.6)} .fc-swap dd.to{margin:0;display:flex;align-items:center;gap:.7rem} .fc-swap dd.to::before{content:"→";color:var(--orange-600);font-family:var(--font-m)} .fc-swap dd.to > span{ /* #1E6DCD y no --blue-600: sobre --blue-050 el azul 600 da 4.42 y AA pide 4.5. Es un 2% hacia el navy, imperceptible. */ color:#1E6DCD;font-weight:600;background:var(--blue-050); border:1px solid var(--blue-100);border-radius:100px;padding:.3em .8em; } /* escenas mini: reutilizan .ba-paper/.ba-stamp/.ba-ui del kit */ .feature-card .ba-ui{font-size:0.694rem;padding:.5rem .6rem} .feature-card .ba-paper{transform-origin:center} /* --- cross-link compacto --- */ .xlink{display:flex;justify-content:center} .xlink .card{ display:flex;align-items:center;gap:1.2rem;max-width:640px;width:100%; text-decoration:none; } .xlink .dd-ico{width:52px;height:52px;border-radius:14px;flex:none} .xlink h3{margin:0 0 .2rem;font-size:1.288rem} .xlink p{margin:0;font-size:0.986rem} .xlink .arr{margin-left:auto;color:var(--blue);font-size:1.568rem;flex:none} /* reduced motion en el Home: etapas visibles, sin scrub ni crossfades */ @media (prefers-reduced-motion: reduce){ .cinema{height:auto} .cinema-stage{position:relative;height:auto;min-height:70vh;display:flow-root} .cine-layer{position:relative;opacity:1 !important;visibility:visible !important;min-height:56vh;margin:1rem 0} .cine-layer canvas,.cine-layer video{position:absolute} /* reduced: el teléfono deja de ser flotante y entra al flujo, dockeado */ .mods-phone{position:relative;inset:auto;margin:1.5rem auto;width:min(280px,70vw);height:auto;transform:none !important;opacity:1 !important;visibility:visible !important} .hero-phase,.maia-phase,.mods-title,.tphase,.mod-panel,.mod-modulo,.dato-card{ opacity:1 !important;transform:none !important;position:relative !important; inset:auto !important;margin:1rem auto;pointer-events:auto !important; } /* en móvil el dato apagado va display:none; aquí .lit puede no llegar nunca */ .dato-card{display:block !important} } /* ============================================================ CONTACTO — hero corto + formulario de demo (HubSpot Forms API) ============================================================ */ .contact-wrap{padding:calc(var(--header-h,76px) + 2.5rem) 0 5rem;background:linear-gradient(180deg,var(--white) 0,var(--sky) 480px)} .contact-hero{display:grid;grid-template-columns:1.2fr .8fr;align-items:center;gap:1rem;min-height:34vh} .contact-hero-copy h1{font-size:clamp(2.464rem,5.152vw,4.032rem)} .contact-hero-copy .lead{margin-top:1rem;max-width:480px} .contact-hero-mario{display:flex;justify-content:center} /* mismo tratamiento que el video del Home: sin caja ni fondo propio, difuminado por los 4 lados para que Mario flote sobre la página */ .contact-hero-mario img{width:min(360px,100%);height:auto;border-radius:0;background:none; -webkit-mask-image: linear-gradient(180deg,transparent 0,#000 13%,#000 70%,transparent 100%), linear-gradient(90deg,transparent 0,#000 15%,#000 85%,transparent 100%); mask-image: linear-gradient(180deg,transparent 0,#000 13%,#000 70%,transparent 100%), linear-gradient(90deg,transparent 0,#000 15%,#000 85%,transparent 100%); -webkit-mask-composite:source-in; mask-composite:intersect} .contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(1.5rem,4vw,4rem);margin-top:2rem;align-items:start} /* Los items de un grid llevan min-width:auto: un hijo más ancho que su columna estira la pista y desborda el viewport. A 320px eso daba 11px de scroll horizontal en contacto. */ .contact-grid > *,.contact-hero > *{min-width:0} .contact-aside .aside-title{ font-family:var(--font-m);font-size:0.784rem;letter-spacing:.24em;text-transform:uppercase; color:var(--blue-600);margin:2.2rem 0 1rem; } .contact-aside .aside-title:first-child{margin-top:.4rem} .steps{list-style:none;margin:0;padding:0;display:grid;gap:.9rem} .steps li{display:flex;align-items:center;gap:.9rem;font-weight:600;color:var(--navy)} .step-num{ flex:0 0 34px;height:34px;display:grid;place-items:center;border-radius:50%; background:var(--blue-050);color:var(--blue-600);font-family:var(--font-m);font-weight:700; border:1px solid var(--blue-100); } .direct-links{display:grid;gap:.6rem} .direct-links a{display:inline-flex;align-items:center;gap:.6rem;color:var(--blue-600);font-weight:600} .direct-links a:hover{color:var(--blue)} .form-card{ background:var(--white);border:1px solid var(--blue-100);border-radius:18px; box-shadow:var(--shadow-card);padding:clamp(1.4rem,3vw,2.2rem); } .field{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1.1rem} .field label{font-size:0.952rem;font-weight:600;color:var(--navy)} .field input,.field select{ font:inherit;color:var(--navy);background:var(--white); border:1.5px solid var(--blue-100);border-radius:10px;padding:.72em .9em; min-height:44px;transition:border-color .2s var(--ease),box-shadow .2s var(--ease); } .field input:focus,.field select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(56,138,237,.18)} .field-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem} /* teléfono: indicativo + número en una sola fila. El select se dimensiona por su contenido con un tope, para que el número siempre tenga sitio; a 390px la fila no se rompe porque el select nunca pasa de 8.5rem. */ .tel-row{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.5rem;align-items:stretch} /* solo bandera + indicativo: con el nombre del país el texto se cortaba. En Windows los emojis de bandera se dibujan como sus dos letras (PA, CO), así que igual se identifica el país. El nombre completo va en title. */ .tel-row .tel-code{min-width:7.6rem;max-width:8.25rem;padding-inline:.6em;min-height:44px} .tel-row .tel-num{min-width:0;min-height:44px} .field.has-err .tel-row .tel-num{border-color:#D64550} .field-err{display:none;font-size:0.874rem;color:#D64550;margin:0} .field.has-err input,.field.has-err select{border-color:#D64550} .field.has-err .field-err{display:block} .form-err{font-size:0.952rem;color:#D64550;background:#FDEDEE;border:1px solid #F5C6CB;border-radius:10px;padding:.7em .9em;margin-bottom:1rem} .btn-submit{width:100%;justify-content:center;margin-top:.4rem;font-size:1.12rem} .btn-submit:disabled{opacity:.65;cursor:progress;transform:none} .form-ok{text-align:center;padding:1.5rem 0} /* height:auto es imprescindible: la imagen trae height="900" como atributo y, al fijar el CSS solo el ancho, ese atributo ganaba y la dejaba en 300x900 */ .form-ok img{width:min(300px,80%);height:auto;border-radius:16px;margin-bottom:1.2rem; -webkit-mask-image:radial-gradient(120% 120% at 50% 45%,#000 60%,transparent 98%); mask-image:radial-gradient(120% 120% at 50% 45%,#000 60%,transparent 98%)} .form-ok h3{font-size:1.68rem;color:var(--navy)} .form-ok p{color:var(--ink-60);margin:.6rem 0 1.4rem} @media (max-width:900px){ .contact-grid{grid-template-columns:1fr} .contact-aside{order:2} } @media (max-width:767px){ .contact-wrap{padding-top:calc(var(--header-h,76px) + 1.2rem)} .contact-hero{grid-template-columns:1fr;min-height:auto;text-align:center} .contact-hero-mario img{width:min(240px,70%)} .contact-hero-copy .lead{margin-inline:auto} .field-row{grid-template-columns:1fr} } /* ============================================================ PREGUNTAS FRECUENTES (preguntas.html) Página de respuestas: sin cinemática, todo el contenido en el DOM. ============================================================ */ .sr-only{ position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0; } .faq-wrap{padding:calc(var(--header-h,76px) + 2.5rem) 0 5rem;background:linear-gradient(180deg,var(--white) 0,var(--sky) 420px)} .faq-head{max-width:62ch} .faq-head h1{font-size:clamp(2.352rem,5.152vw,3.584rem);margin-top:.7rem} .faq-head .lead{margin-top:1rem} .faq-search{margin-top:1.8rem;max-width:520px} .faq-search input{ width:100%;font:inherit;font-size:1.12rem;color:var(--navy); padding:.85rem 1rem;border:1.5px solid var(--blue-100);border-radius:12px; background:var(--white);transition:border-color .2s ease,box-shadow .2s ease; } .faq-search input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px rgba(56,138,237,.15)} .faq-count{margin-top:.5rem;font-size:0.918rem;color:var(--ink-40);min-height:1.2em} .faq-chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.4rem} .faq-chip{ font-family:var(--font-m);font-size:0.762rem;letter-spacing:.1em;text-transform:uppercase; padding:.5em .9em;border-radius:100px;border:1.5px solid var(--blue-100); color:var(--blue-600);background:var(--white);transition:background .2s ease,border-color .2s ease; } .faq-chip:hover{background:var(--blue-050);border-color:var(--blue)} .faq-cat{margin-top:3rem} .faq-cat h2{font-size:clamp(1.456rem,2.688vw,1.904rem);margin-bottom:1rem} .faq-item{ border:1.5px solid var(--blue-100);border-radius:14px;background:var(--white); margin-bottom:.7rem;overflow:hidden; } .faq-item summary{ cursor:pointer;list-style:none;padding:1rem 3rem 1rem 1.2rem;position:relative; font-weight:600;color:var(--navy);line-height:1.4; } .faq-item summary::-webkit-details-marker{display:none} .faq-item summary::after{ content:"";position:absolute;right:1.2rem;top:1.45rem; width:9px;height:9px;border-right:2px solid var(--blue);border-bottom:2px solid var(--blue); transform:rotate(45deg);transition:transform .22s var(--ease); } .faq-item[open] summary::after{transform:rotate(-135deg)} .faq-item summary:focus-visible{outline:3px solid var(--blue);outline-offset:-3px;border-radius:12px} .faq-body{padding:0 1.2rem 1.2rem} .faq-body .faq-lead{font-size:1.12rem;color:var(--navy);margin:0} .faq-body > :not(.faq-lead){margin-top:.9rem;color:var(--ink);font-size:1.053rem} .faq-body ul{margin-top:.9rem;padding-left:1.1rem;color:var(--ink);font-size:1.053rem} .faq-body li{margin-bottom:.4rem} .faq-body .btn{margin-top:1rem} .faq-nada{margin-top:2.5rem;color:var(--ink-40)} .faq-cta{ margin-top:4rem;padding:2.5rem;border-radius:20px;text-align:center; background:var(--sky);border:1.5px solid var(--blue-100); } .faq-cta h2{font-size:clamp(1.568rem,2.912vw,2.24rem)} .faq-cta p{margin-top:.8rem;color:var(--ink)} .faq-cta .btn{margin-top:1.4rem} @media (max-width:767px){ .faq-wrap{padding-top:calc(var(--header-h,76px) + 1.4rem)} .faq-cat{margin-top:2.2rem} .faq-cta{padding:1.6rem} } /* ============================================================ PÁGINAS LEGALES (terms/*) — documento largo, texto literal ============================================================ */ /* idioma: los bloques .solo-es/.solo-en se conmutan con el html[lang] que ya gestiona i18n.js; sin JS se muestra el español */ html[lang="en"] .solo-es{display:none} html:not([lang="en"]) .solo-en{display:none} .legal-wrap .faq-head h1{font-size:clamp(1.8rem,3.4vw,2.5rem)} /* El texto legal trae cadenas largas separadas por barras —«Cookies técnicas/personalización/análisis/publicidad»— y el navegador no parte por las barras: a 320px eso sacaba 88px de scroll horizontal en toda la página. Se arregla por CSS porque el texto legal es literal y no se toca. */ .legal-sec,.legal-sec *{overflow-wrap:anywhere} .legal-sec{margin-top:3rem} .legal-sec h2{font-size:clamp(1.35rem,2.4vw,1.7rem);margin-bottom:1.2rem; padding-bottom:.5rem;border-bottom:2px solid var(--blue-100)} .legal-doc{max-width:75ch;font-size:.98rem;line-height:1.75;color:var(--ink)} .legal-doc h1{font-size:1.35rem;margin:1.8rem 0 .8rem} .legal-doc h2{font-size:1.2rem;margin:1.8rem 0 .8rem;border:none;padding:0} .legal-doc h3,.legal-doc h4{font-size:1.05rem;margin:1.4rem 0 .6rem} .legal-doc p{margin:.85rem 0} .legal-doc ul,.legal-doc ol{margin:.85rem 0;padding-left:1.4rem} .legal-doc li{margin:.45rem 0} .legal-doc a{text-decoration:underline;text-underline-offset:2px} .legal-doc table{border-collapse:collapse;margin:1rem 0;font-size:.9rem;display:block;overflow-x:auto} .legal-doc td,.legal-doc th{border:1px solid var(--blue-100);padding:.5em .8em;vertical-align:top} /* --- TL;DR de las páginas de caso (checklist SEO 26/08) --- */ .tldr-sec{padding-block:1.5rem 0} .tldr-box{ background:var(--sky);border:1.5px solid var(--blue-100);border-radius:16px; padding:1.4rem 1.6rem;max-width:760px; } .tldr-box h2{font-size:1.05rem;letter-spacing:.02em;color:var(--blue-600);margin-bottom:.7rem} .tldr-box ul{padding-left:1.2rem;margin:0} .tldr-box li{margin:.45rem 0;color:var(--ink)} /* azul 600: el azul base da 3.26:1 sobre --sky y AA pide 4.5:1 */ .xlink-btn{display:inline-block;margin-top:.9rem;font-weight:600;color:var(--blue-600)} /* --- Punto 21 checklist SEO: CTA fija en móvil. Solo aparece cuando NINGÚN otro botón naranja está en viewport (regla: un CTA naranja por viewport); engine.js la gobierna con IntersectionObserver. --- */ .cta-fija{ /* bottom sube lo que mida el banner de cookies de HubSpot, si está (lo calcula js/hs-chat.js): los dos son fixed al borde inferior y en móvil se tapaban justo sobre el botón que convierte */ /* NO LLEGA DE BORDE A BORDE (03/09). Era una barra completa y por eso tapaba los enlaces del pie. Ahora es una pastilla del ancho de su contenido, anclada abajo a la IZQUIERDA: el launcher del chat vive en la esquina derecha y así ninguno de los dos puede tapar al otro. */ position:fixed;left:1rem;right:auto;bottom:calc(var(--hs-banner-h,0px) + .75rem); width:max-content;max-width:calc(100vw - 2rem); z-index:70;display:none; padding:.5rem; background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px); border:1px solid var(--blue-100);border-radius:999px; box-shadow:0 6px 22px -8px rgba(1,32,74,.35); margin-bottom:env(safe-area-inset-bottom,0px); transform:translateY(160%);transition:transform .3s ease,bottom .2s ease; } .cta-fija .btn{display:block;width:auto;text-align:center;white-space:nowrap} /* A 320px «Quiero saber más» con el padding de .btn no cabe, y como .btn lleva white-space:nowrap la barra se estiraba a 408px y sacaba scroll horizontal a toda la página: la pastilla no puede pasarse del viewport. */ .cta-fija{box-sizing:border-box} .cta-fija .btn{max-width:100%;box-sizing:border-box} @media (max-width:400px){ /* con la pastilla ya no hace falta partir el texto en dos líneas: cabe de sobra porque no tiene que llenar el ancho de la pantalla */ .cta-fija .btn{padding-inline:1.1rem;font-size:.94rem} } .cta-fija.visible{transform:translateY(0)} /* con el menú móvil abierto (su CTA naranja queda a la vista) la barra se retira. 160% y no 110%: la pastilla lleva separación al borde, y con 110% asomaba. */ .site-header.nav-open ~ .cta-fija{transform:translateY(160%)} @media (max-width:767px){ .cta-fija:not([hidden]){display:block} } @media (prefers-reduced-motion:reduce){ .cta-fija{transition:none} } /* --- Punto 22: botón de compartir del footer --- */ .btn-compartir{ display:inline-flex;align-items:center;gap:.4rem; background:none;border:0;padding:0;cursor:pointer; font:inherit;font-size:.82rem;color:inherit;opacity:.85; } .btn-compartir:hover{opacity:1;text-decoration:underline} .btn-compartir .txt-copiado{display:none;color:var(--mint)} .btn-compartir.copiado .txt-normal{display:none} .btn-compartir.copiado .txt-copiado{display:inline} /* item estructural sin viñeta (ver arreglar_ul_politica.py): el texto legal literal traía contenido suelto dentro de un
    */ .legal-doc .li-plano{list-style:none} /* ============================================================ BENTO — "Los 5 módulos" de seguridad (rediseño 26/08, ref. nova-bento adaptada al sistema claro: blanco domina, azul guía, naranja acciona) ============================================================ */ .bento-head{text-align:center;max-width:760px;margin-inline:auto} .bento-head h2{margin-top:.8rem} .bento-sum{margin-top:1rem;color:var(--ink-70);font-size:1.02rem} .bento{ display:grid;gap:clamp(.9rem,1.6vw,1.3rem);margin-top:2.6rem; grid-template-columns:repeat(4,1fr); grid-template-areas: "rondas rondas bitacora bitacora" "rondas rondas noved muro" "dash dash accesos cta"; } .bento--rondas{grid-area:rondas} .bento--bitacora{grid-area:bitacora} .bento--noved{grid-area:noved} .bento--muro{grid-area:muro} .bento--dash{grid-area:dash} .bento--accesos{grid-area:accesos} .bento--cta{grid-area:cta} .bento-cell{ padding:0;overflow:hidden;display:flex;flex-direction:column;min-height:230px; transition:transform .35s var(--ease),box-shadow .35s var(--ease); } .bento-cell .bc-body{padding:1.15rem 1.3rem 1.25rem;display:flex;flex-direction:column;gap:.55rem} .bento-cell h3{font-size:1.08rem;line-height:1.3} .bento-cell p{font-size:.92rem;color:var(--ink-70)} .bento-cell .fc-swap{margin-top:auto;font-size:.8rem} .bc-media{position:relative;margin:0;overflow:hidden;flex:1;min-height:150px} .bc-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center} /* héroe 1: media grande arriba, cuerpo abajo */ .bento--rondas .bc-media{min-height:280px} /* las ilustraciones centradas (el top-center heredado recorta pin y escudo) */ .bento--noved .bc-media img,.bento--accesos .bc-media img{object-position:center} /* héroe 2: cuerpo izquierda + media derecha */ .bento--bitacora{flex-direction:row} .bento--bitacora .bc-body{flex:1.05;justify-content:center} .bento--bitacora .bc-media{flex:1} /* dashboard: cuerpo izquierda + media derecha */ .bento--dash{flex-direction:row} .bento--dash .bc-body{flex:1.1;justify-content:center} .bento--dash .bc-media{flex:1} /* badges flotantes (texto real en DOM, traducible) */ .bc-badge{ position:absolute;z-index:2;display:inline-flex;align-items:center; font-family:var(--font-m);font-size:.72rem;font-weight:600;letter-spacing:.02em; padding:.42em .8em;border-radius:999px;white-space:nowrap; background:rgba(255,255,255,.92);border:1px solid var(--blue-100); box-shadow:0 6px 18px rgba(1,32,74,.14);color:var(--navy); top:.8rem;left:.8rem; } .bc-badge--mint{border-color:rgba(74,222,155,.55);color:#0B7A4B;background:rgba(236,253,245,.95)} .bc-badge--blue{color:var(--blue-600)} .bc-badge--sm{font-size:.64rem} .bento--rondas .bc-badge--mint{top:.9rem;left:auto;right:.9rem} .bento--rondas .bc-badge--blue:not(.bc-badge--sm){top:auto;bottom:1rem;left:.9rem} .bento--rondas .bc-badge--sm{top:45%;left:auto;right:1.4rem} .bento--bitacora .bc-badge{top:auto;bottom:.9rem;left:.9rem} .bento--accesos .bc-badge{top:auto;bottom:.8rem;left:.8rem} /* levitación sutil */ @keyframes bcFloat{from{transform:translateY(0)}to{transform:translateY(-5px)}} .bc-float{animation:bcFloat 2.6s ease-in-out infinite alternate} .bc-float--2{animation-duration:3.1s;animation-delay:.4s} .bc-float--3{animation-duration:2.2s;animation-delay:.9s} /* mini-métricas del dashboard */ .bc-metrics{display:flex;gap:.5rem;flex-wrap:wrap} .bc-metric{ font-family:var(--font-m);font-size:.72rem;font-weight:600;color:var(--blue-600); background:var(--blue-050);border:1px solid var(--blue-100); padding:.4em .75em;border-radius:8px;white-space:nowrap; } .bc-metric--mint{color:#0B7A4B;background:#ECFDF5;border-color:rgba(74,222,155,.5)} /* muro de iconos */ .bento--muro{background:var(--blue-050)} .bento--muro .muro-grid{ flex:1;display:grid;grid-template-columns:repeat(4,1fr);gap:.4rem; align-content:center;justify-items:center;padding:1.1rem 1.1rem .3rem; } .bento--muro .muro-grid img{ width:100%;max-width:58px;height:auto;aspect-ratio:1;object-fit:contain; background:#fff;border:1px solid var(--blue-100);border-radius:12px;padding:.45rem; } .bento--muro .bc-body{padding-top:.4rem;text-align:center} .bento--muro p{font-size:.82rem} /* celda CTA: contraste navy puntual (permitido a nivel de celda) */ .bento--cta{ background:var(--navy);color:#fff;border-radius:18px; display:flex;flex-direction:column;justify-content:center;gap:1.1rem; padding:1.5rem 1.4rem;text-align:center; } .bento--cta h3{color:#fff;font-size:1.02rem} .bento--cta .btn{align-self:center} /* hover desktop: elevación + pop del badge (sin layout shift) */ @media (hover:hover) and (pointer:fine){ .bento-cell:hover{transform:translateY(-5px);box-shadow:0 18px 44px rgba(1,32,74,.16)} .bento-cell:hover .bc-badge{box-shadow:0 10px 26px rgba(1,32,74,.22)} .bento-cell:hover .bc-float{animation-duration:1.6s} } /* stagger extendido del reveal */ .reveal[data-delay="4"]{transition-delay:.4s} .reveal[data-delay="5"]{transition-delay:.5s} .reveal[data-delay="6"]{transition-delay:.6s} /* tablet */ @media (max-width:980px){ .bento{ grid-template-columns:1fr 1fr; grid-template-areas: "rondas rondas" "bitacora bitacora" "noved muro" "dash dash" "accesos cta"; } } /* móvil: una columna, héroes primero (orden del DOM) */ @media (max-width:600px){ .bento{ grid-template-columns:1fr; grid-template-areas:"rondas" "bitacora" "noved" "dash" "accesos" "muro" "cta"; } .bento--bitacora,.bento--dash{flex-direction:column} .bento--bitacora .bc-media,.bento--dash .bc-media{min-height:180px} .bento--bitacora{flex-direction:column-reverse} .bento--rondas .bc-media{min-height:220px} .bento--muro .muro-grid{grid-template-columns:repeat(4,1fr);padding-bottom:0} } @media (prefers-reduced-motion:reduce){ .bc-float{animation:none} .bento-cell,.bento-cell:hover{transform:none} } /* ============================================================ STACK-CARDS — "Los 5 módulos" de administración (rediseño 26/08) Por defecto (móvil / reduced-motion / sin JS): cards estáticas apiladas con el slider clásico. Con html.stack-on (lo pone page-caso.js en desktop sin reduced-motion): apilado sticky y el barrido lo conduce el scroll — el handle se oculta. ============================================================ */ .stack{position:relative;margin-top:2.6rem} .stack-card{ position:relative;display:flex;flex-direction:column;overflow:hidden; padding:0;margin-bottom:1.6rem; } .stack-card .sc-media{position:relative;min-height:280px} .stack-card .ba{position:absolute;inset:0;height:100%;border-radius:0} .stack-card .ba-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} /* Mario: el panel del perfil (lo que Sergio quiere legible) vive en el lado DERECHO de la captura, así que el cover recorta por la izquierda */ .stack-card .ba-mario{object-position:center} /* tipografía del stack (corrección Sergio 26/08): la card ocupa ~90vh, la columna de información escala a rango de titular y respira */ .sc-info{padding:1.8rem 1.6rem 2rem;display:flex;flex-direction:column;gap:1.05rem} /* Número fantasma: es DECORACIÓN pura (ya iba con aria-hidden y solo repite el orden que ya expresa el h3), así que se pinta con content en CSS en vez de vivir como texto en el DOM. Los píxeles son idénticos; lo que cambia es que deja de declararse como contenido con 1.24 de contraste. Si se prefiriera mantenerlo en el DOM habría que oscurecerlo a #7F97B2 para llegar a 3.0, y eso sí mata el efecto fantasma. */ .sc-num{ font-family:var(--font-d);font-weight:800;line-height:.9; font-size:clamp(3.4rem,5.5vw,5.4rem); color:var(--blue-100); letter-spacing:.02em;user-select:none; } .sc-num::before{content:attr(data-num)} .stack-card .fc-top{gap:1rem;margin-bottom:0} .stack-card .fc-top img{width:52px;height:52px} .stack-card .fc-top h3{font-size:clamp(1.75rem,2.7vw,2.5rem);line-height:1.18} .sc-info p{color:var(--ink-70);font-size:clamp(1.1rem,1.35vw,1.19rem);line-height:1.6;max-width:55ch} .sc-info .fc-swap{ margin-top:.5rem;font-size:.97rem; flex-direction:column;align-items:flex-start;gap:.7rem; } .stack-card .bc-badge{font-size:.82rem} .sc-velo{position:absolute;inset:0;background:var(--sky);opacity:0;pointer-events:none;z-index:8} /* badges del después: viven dentro de la capa after y el barrido los revela. Arriba a la derecha: el pie de la card es lo primero que cubre la siguiente. */ .stack-card .ba-after .bc-badge{top:3rem;right:1rem;bottom:auto;left:auto} .stack-card .ba-after .bc-badge + .bc-badge{top:5.4rem} /* ---- modo apilado (desktop sin reduced-motion) ---- */ .stack-on .stack{--pin:calc(var(--header-h,76px) + 1.2rem)} .stack-on .stack-card{ position:sticky;top:var(--pin); height:calc(100vh - var(--pin) - 4vh); margin-bottom:58vh; /* aire de scroll: +16% de rango para que el DESPUÉS respire */ flex-direction:row; will-change:transform; } .stack-on .stack-card:nth-child(even){flex-direction:row-reverse} .stack-on .stack-card .sc-media{flex:0 0 55%;min-height:0} .stack-on .stack-card .sc-info{flex:1;justify-content:center;padding:3rem clamp(2.2rem,3.2vw,3.6rem)} .stack-on .stack-card .ba{cursor:default;touch-action:auto} .stack-on .stack-card .ba-handle{display:none} /* el scroll conduce el divisor */ .stack-on .stack-tail{height:52vh} .stack-tail{height:0} @media (max-width:900px){ .stack-on .stack-card .sc-info{padding:1.4rem 1.6rem} } /* --- chat de HubSpot ------------------------------------------------------ El contenedor lo inyecta HubSpot en el . En móvil el launcher, la CTA fija y el banner de cookies del portal se pelean por la misma esquina, así que el launcher se sube por encima de los dos usando las alturas que mide js/hs-chat.js. Antes había un `bottom:76px` a pelo: no seguía al banner ni al alto real de la barra, y a 320px —donde el texto de la CTA se parte en dos líneas— volvían a solaparse. */ @media (max-width:767px){ /* el desplazamiento lo calcula js/hs-chat.js: suma banner de cookies + CTA fija en modo launcher, y vale 0 con el panel abierto. Con un valor fijo, el panel (que ocupa la pantalla entera) quedaba anclado por encima del borde y su botón de cerrar se salía por arriba. */ body #hubspot-messages-iframe-container{ bottom:var(--hs-launcher-bottom,16px) !important; transition:bottom .2s ease; } }