/* ============================================================================ FUNDETEC UI · Sistema de diseño para la Home y los micrositios Paleta institucional: azul #00469a · amarillo #ffcf00 · Tipografía: Poppins Solo presentación: no altera el marcado semántico/SEO de las páginas. TOKENS → :root (colores, radios, sombras, gradientes) TARJETA CANÓNICA (usar en todo card nuevo): franja de gradiente superior con icono SVG blanco + badge, cuerpo blanco con título, tagline en color de acento, chips y link. Se personaliza por tarjeta con variables inline: --pc color principal · --pc2 fin del gradiente · --pc-text texto AA Implementaciones: .fh-pcard (mega-menú) y .Offer.single-course-area (home). Variantes de la familia: barra de gradiente superior sin franja (.EducationalOrganization-branch, .Review, .Event, .Person-*) y tile de métrica (.InteractionCounter). COMPONENTES: header sticky (.WebPage--header), nav con dropdowns (.fh-nav), mega-menú (.fh-mega-cards), botones píldora (.ApplyAction--submit, .fh-mega-cta), chips (.fh-pcard-chips, .Offer--badge), footer oscuro. ANIMACIONES: .reveal/.reveal-item requieren la clase .js en y el observer de scroll (ver script de la Home); respetan reduced-motion. ============================================================================ */ *,*::before,*::after{box-sizing:border-box} :root{ --brand:#00469a;--brand-600:#0a5bd0;--brand-700:#003a82;--brand-050:#eef4ff; --accent:#ffcf00;--accent-600:#f2b900; --ink:#0f1b2d;--muted:#5c6b82;--bg:#f5f8fd;--card:#ffffff;--line:#e7edf6; --radius:20px;--radius-sm:14px;--maxw:1180px; --shadow:0 10px 30px -14px rgba(16,43,90,.30); --shadow-lg:0 30px 70px -24px rgba(16,43,90,.42); --grad:linear-gradient(135deg,var(--brand) 0%,var(--brand-600) 100%); --grad-accent:linear-gradient(135deg,#ffdd33,#ffcf00 60%,#f2b900); } html{scroll-behavior:smooth} body.WebPage{ margin:0;color:var(--ink);line-height:1.6;overflow-x:hidden;overflow-x:clip; font-family:'Poppins',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; -webkit-font-smoothing:antialiased; background: radial-gradient(1200px 620px at 100% -10%,rgba(0,70,154,.08),transparent 60%), radial-gradient(900px 520px at -10% 8%,rgba(255,207,0,.10),transparent 55%), var(--bg); } img{max-width:100%;height:auto;display:block} a{color:var(--brand);text-decoration:none} h1,h2,h3,h4{line-height:1.15;margin:0 0 .5em;letter-spacing:-.02em} /* ---------- Header sticky (mobile-first, orientado a conversión) ---------- Fila 1 móvil: marca + acciones (WhatsApp · CTA Preinscríbete · hamburguesa) Fila 2 móvil: buscador compacto · Desktop: marca | buscador | acciones ---- */ .WebPage--header{ position:sticky;top:0;z-index:100; display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px; padding:10px clamp(14px,4vw,28px); background:rgba(255,255,255,.72); -webkit-backdrop-filter:saturate(160%) blur(14px);backdrop-filter:saturate(160%) blur(14px); border-bottom:1px solid var(--line); box-shadow:0 8px 24px -20px rgba(16,43,90,.25); } @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .WebPage--header{background:rgba(255,255,255,.96)} } /* Firefox: su backdrop-filter es costoso al hacer scroll (jank); fondo casi sólido a cambio de desplazamiento mantequilla. Chrome conserva el glass. */ @supports (-moz-appearance:none){ .WebPage--header{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(255,255,255,.95)} } .fh-brand{order:1;display:flex;align-items:center;gap:8px;margin-right:auto;min-height:44px} .fh-brand picture{display:flex} .fh-brand-logo{height:36px;width:auto;max-width:150px;object-fit:contain} /* El logo oficial ya incluye nombre y eslogan; el wordmark de texto es solo fallback */ .fh-brand:not(.no-logo) .fh-brand-name{display:none} .fh-brand-name{font-weight:800;letter-spacing:.12em;font-size:1.05rem;white-space:nowrap; background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent} .fh-actions{order:2;display:flex;align-items:center;gap:8px} .fh-wa{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%; background:#128c7e;color:#fff;transition:transform .2s,box-shadow .2s} .fh-wa svg{width:22px;height:22px} .fh-cta{display:inline-flex;align-items:center;gap:5px;font-weight:700;font-size:.82rem;color:#0f1b2d; background:var(--grad-accent);border-radius:999px;padding:12px 16px;min-height:44px;white-space:nowrap; box-shadow:0 8px 20px -8px rgba(255,207,0,.8);transition:transform .2s,box-shadow .2s} .fh-cta strong{font-weight:800;background:rgba(255,255,255,.55);border-radius:999px;padding:1px 7px} /* Hover solo donde existe hover real (evita sticky-hover en touch) */ @media(hover:hover){ .fh-wa:hover{transform:translateY(-2px);box-shadow:0 6px 14px -8px rgba(16,43,90,.35)} .fh-cta:hover{transform:translateY(-2px);box-shadow:0 12px 28px -8px rgba(255,207,0,.95)} .SearchAction--submit:hover{transform:translateY(-1px)} } .fh-wa:active,.fh-cta:active,.SearchAction--submit:active{transform:scale(.96);transition-duration:.08s} .fh-cta:focus-visible,.fh-wa:focus-visible,.fh-toggle:focus-visible,.SearchAction--submit:focus-visible{ outline:3px solid var(--brand);outline-offset:2px} @media(max-width:479.98px){ .fh-brand-logo{max-width:118px} .fh-brand-name{font-size:.95rem;letter-spacing:.08em} .fh-cta{padding:11px 11px} /* hereda .82rem: el CTA nunca baja de 13px de texto */ } @media(max-width:429.98px){ .fh-cta strong{display:none} /* "gratis" reaparece desde 430px; sigue en hero y mega-menú */ } @media(max-width:399.98px){ .fh-brand-logo{max-width:96px} } .WebSite--text,.WebPage--meta,.WebPage--navigation,.SearchAction--label{position:absolute;width:1px;height:1px; overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;margin:-1px} .sr-only, .skip-link{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;margin:-1px} .skip-link:focus-visible{position:fixed;top:8px;left:8px;width:auto;height:auto;clip:auto;white-space:normal;margin:0; z-index:200;background:var(--brand);color:#fff;padding:10px 18px;border-radius:999px;text-decoration:none} .SearchAction{flex:1;max-width:none} .SearchAction--form{display:flex;gap:8px;align-items:center;background:var(--card); border:1px solid var(--line);border-radius:999px;padding:3px 3px 3px 16px;box-shadow:var(--shadow)} .SearchAction--form:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-050),var(--shadow)} .SearchAction--input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit;font-size:.92rem; padding:8px 0;color:var(--ink)} @media(max-width:1039.98px){ .SearchAction--input{font-size:16px} /* <16px dispara el auto-zoom de iOS al enfocar */ } /* Botón del buscador en tono quieto: el único primario del header es el CTA amarillo */ .SearchAction--submit{border:0;cursor:pointer;font:inherit;font-weight:600;font-size:.88rem; color:var(--brand);background:var(--brand-050);border-radius:999px;padding:9px 18px;min-height:44px; transition:transform .25s,box-shadow .25s} @media(min-width:1040px){ /* Top bar en una sola línea: logo | menú | WhatsApp + CTA. El header se esconde al hacer scroll down y reaparece al subir (.nav-hidden vía JS). */ .WebPage--header{gap:12px 16px;padding:10px clamp(14px,2.5vw,26px);flex-wrap:nowrap} .fh-brand{margin-right:0} .fh-brand-logo{max-width:132px} .fh-actions{order:3} .fh-cta{font-size:.85rem;padding:11px 18px} } /* Los overrides del nav para la línea única viven al FINAL del archivo: deben ganarle la cascada a las reglas base del nav definidas más abajo. */ /* ---------- Botón flotante "Hablar con IA" (primer ítem del nav) ---------- Despliega el panel con el SearchAction; hereda acordeón móvil, ARIA y Escape del patrón .fh-has-dd. Colocado tras las reglas de dropdown para ganar cascada. */ .fh-ia{margin-right:6px} .fh-ia>a.fh-ia-btn{ display:inline-flex;align-items:center;gap:7px;font-weight:700;color:var(--brand); background:var(--card);border:1px solid var(--brand);border-radius:999px;padding:9px 16px; box-shadow:0 6px 16px -8px rgba(0,70,154,.45);transition:transform .2s,background .2s,color .2s} .fh-ia>a.fh-ia-btn::after{content:none} .fh-ia-ico{display:flex;color:var(--accent-600)} .fh-ia-ico svg{width:15px;height:15px} @media(hover:hover){ .fh-ia>a.fh-ia-btn:hover{background:var(--brand);color:#fff;transform:translateY(-1px)} .fh-ia>a.fh-ia-btn:hover .fh-ia-ico{color:var(--accent)} } .fh-ia>a.fh-ia-btn:active{transform:scale(.96)} .fh-ia .fh-dropdown{left:0;transform:translateY(8px);min-width:min(430px,86vw);padding:14px} /* Apertura programática (botones "Hablar con IA" de las escuelas): permite enfocar el input; luego :focus-within mantiene el panel abierto solo */ .fh-ia.ia-open .fh-dropdown{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)} .fh-ia .fh-dropdown::before{left:30px;transform:rotate(45deg)} .fh-ia:hover .fh-dropdown,.fh-ia:focus-within .fh-dropdown{transform:translateY(0)} .fh-ia .WebSite{display:block;flex:none;margin:0;min-width:0} @media(max-width:1039.98px){ .fh-ia>a.fh-ia-btn{display:inline-flex;padding:12px 18px;margin:2px 0 6px;min-height:44px} .fh-ia .fh-dropdown{min-width:0;padding:4px 0 10px 4px} } /* ---------- Barra de navegación principal ---------- */ .fh-nav{ flex:1 0 100%;order:5;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:2px 4px; margin-top:10px;padding-top:10px;border-top:1px solid var(--line)} .fh-nav>a,.fh-has-dd>a,.fh-has-mega>a{ display:inline-block;padding:8px 14px;border-radius:10px;font-weight:600;font-size:.86rem; letter-spacing:.03em;color:var(--ink);white-space:nowrap;transition:color .2s,background .2s} .fh-nav>a:hover,.fh-has-dd:hover>a,.fh-has-mega:hover>a, .fh-has-dd:focus-within>a,.fh-has-mega:focus-within>a{color:var(--brand);background:var(--brand-050)} .fh-sep{color:var(--line);user-select:none;font-weight:300} .fh-has-dd,.fh-has-mega{position:relative;display:inline-block} .fh-has-dd>a::after,.fh-has-mega>a::after{content:"▾";content:"▾" / "";margin-left:6px;font-size:.7em;opacity:.7} /* Paneles desplegables */ .fh-dropdown,.fh-megadrop{ position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(8px); background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg); padding:10px;z-index:120;opacity:0;visibility:hidden;pointer-events:none; transition:opacity .22s,transform .22s,visibility 0s .22s} .fh-dropdown{min-width:210px;list-style:none;margin:0} .fh-megadrop{display:flex;gap:24px;padding:18px 22px;min-width:440px} .fh-megadrop ul{list-style:none;margin:0;padding:0;min-width:190px} .fh-dropdown::before,.fh-megadrop::before{content:"";position:absolute;top:-7px;left:50%;transform:translateX(-50%) rotate(45deg); width:13px;height:13px;background:var(--card);border-left:1px solid var(--line);border-top:1px solid var(--line)} .fh-has-dd:hover .fh-dropdown,.fh-has-dd:focus-within .fh-dropdown, .fh-has-mega:hover .fh-megadrop,.fh-has-mega:focus-within .fh-megadrop{ opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0);transition-delay:0s} .fh-dropdown li a,.fh-megadrop li a{ display:block;padding:9px 14px;border-radius:9px;font-size:.88rem;font-weight:500;color:var(--muted);transition:.18s} .fh-dropdown li a:hover,.fh-megadrop li a:hover{background:var(--brand-050);color:var(--brand);transform:translateX(3px)} /* Botón hamburguesa (solo móvil) */ .fh-toggle{display:none;flex-direction:column;gap:5px;width:44px;height:44px; align-items:center;justify-content:center;background:var(--card);border:1px solid var(--line); border-radius:12px;cursor:pointer;box-shadow:var(--shadow)} .fh-toggle span{display:block;width:22px;height:2px;background:var(--brand);border-radius:2px;transition:.3s} .fh-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)} .fh-toggle[aria-expanded="true"] span:nth-child(2){opacity:0} .fh-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} @media(max-width:1039.98px){ .WebPage--header{gap:12px} .js .fh-toggle{display:flex} .fh-nav{flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:2px;margin-top:12px;border-top:1px solid var(--line)} .js .fh-nav{ /* -12px compensa el row-gap de la línea fantasma del nav colapsado */ margin-top:-12px;border-top:0;max-height:0;overflow:hidden;opacity:0;visibility:hidden;padding-top:0; transition:max-height .35s ease,opacity .3s,padding-top .3s,margin-top .3s,visibility 0s .35s} .fh-nav.open{max-height:80vh;overflow-y:auto;opacity:1;visibility:visible;padding-top:12px;margin-top:12px; border-top:1px solid var(--line);transition-delay:0s} .fh-sep{display:none} .fh-nav>a,.fh-has-dd>a,.fh-has-mega>a{display:block;padding:12px 14px;border-radius:12px} .fh-has-dd,.fh-has-mega{display:block} .fh-dropdown,.fh-megadrop{position:static;transform:none!important;opacity:1;visibility:visible;pointer-events:auto; box-shadow:none;border:0;border-radius:0;padding:0 0 6px 12px;min-width:0;background:transparent} .fh-dropdown li a,.fh-megadrop li a{padding:12px 14px} /* targets ≥44px en el acordeón */ .fh-dropdown::before,.fh-megadrop::before{display:none} .fh-has-dd>a::after,.fh-has-mega>a::after{float:right} } /* ---------- Mega-menú PROGRAMAS (mini-cards de escuelas) ---------- */ .fh-nav{position:relative} .fh-pcard{--pc:var(--brand);--pc2:var(--brand-600);display:flex;flex-direction:column;background:var(--card); border:1px solid var(--line);border-radius:16px;overflow:hidden; transition:transform .28s cubic-bezier(.22,.61,.36,1),box-shadow .28s,border-color .28s} .fh-pcard:hover{transform:translateY(-5px);box-shadow:0 18px 40px -16px rgba(16,43,90,.35);border-color:var(--pc)} .fh-pcard-media{position:relative;height:64px;display:flex;align-items:center;justify-content:center; background: radial-gradient(circle at 84% 22%, rgba(255,255,255,.30) 0 6px, transparent 7px), radial-gradient(circle at 12% 78%, rgba(255,255,255,.22) 0 4px, transparent 5px), linear-gradient(135deg,var(--pc),var(--pc2))} .fh-pcard-emoji{display:flex;color:#fff;filter:drop-shadow(0 4px 8px rgba(0,0,0,.25));transition:transform .3s} .fh-pcard-emoji svg{width:30px;height:30px;display:block} .fh-pcard:hover .fh-pcard-emoji{transform:scale(1.18) rotate(-6deg)} .fh-pcard-badge{position:absolute;top:8px;right:8px;background:rgba(255,255,255,.92);color:#12203a; font-size:.6rem;font-weight:700;letter-spacing:.02em;border-radius:999px;padding:3px 9px;white-space:nowrap} .fh-pcard-body{display:flex;flex-direction:column;gap:3px;padding:12px 14px 14px} .fh-pcard-name{font-size:.95rem;font-weight:700;color:var(--ink);letter-spacing:-.01em} .fh-pcard-tag{font-style:normal;font-size:.74rem;font-weight:600;color:var(--pc-text,var(--pc))} .fh-pcard-meta{font-size:.72rem;color:var(--muted);line-height:1.45} .fh-pcard-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px} .fh-pcard-chips span{background:var(--brand-050);color:var(--brand-700);border-radius:999px; padding:3px 9px;font-size:.66rem;font-weight:600;white-space:nowrap} .fh-pcard-link{margin-top:8px;font-size:.76rem;font-weight:700;color:var(--brand);transition:letter-spacing .25s,color .25s} .fh-pcard:hover .fh-pcard-link{letter-spacing:.03em;color:var(--pc-text,var(--pc))} .fh-mega-head{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between; gap:10px;margin-bottom:14px;padding-right:48px} .fh-mega-close{position:absolute;top:-2px;right:0;width:40px;height:40px;display:flex;align-items:center; justify-content:center;border:1px solid var(--line);border-radius:50%;background:var(--card); color:var(--muted);cursor:pointer;transition:color .2s,border-color .2s,transform .2s} .fh-mega-close svg{width:16px;height:16px} @media(hover:hover){ .fh-mega-close:hover{color:var(--brand);border-color:var(--brand);transform:rotate(90deg)} } .fh-mega-close:active{transform:scale(.92)} .fh-mega-close:focus-visible{outline:3px solid var(--brand);outline-offset:2px} .fh-mega-title{margin:0;font-size:.95rem;color:var(--ink)} .fh-mega-title strong{color:var(--brand)} .fh-mega-quick{display:flex;flex-wrap:wrap;gap:8px} .fh-quick-pill{display:inline-block;background:var(--brand-050);border:1px solid var(--line);color:var(--brand); font-size:.76rem;font-weight:700;border-radius:999px;padding:7px 15px;transition:background .22s,color .22s,transform .22s} .fh-quick-pill:hover{background:var(--grad);color:#fff;transform:translateY(-2px)} .fh-mega-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(205px,1fr));gap:12px} .fh-mega-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px; margin-top:14px;padding-top:13px;border-top:1px dashed var(--line);font-size:.74rem;color:var(--muted)} .fh-mega-cta{display:inline-block;font-weight:700;font-size:.8rem;color:#0f1b2d;background:var(--grad-accent); border-radius:999px;padding:9px 20px;box-shadow:0 8px 20px -8px rgba(255,207,0,.8);transition:transform .22s,box-shadow .22s} .fh-mega-cta:hover{transform:translateY(-2px);box-shadow:0 12px 28px -8px rgba(255,207,0,.95)} /* Cerrar con Escape o con la ✕: kb-closed suprime la apertura por foco Y por hover (se limpia al salir con el mouse o al perder el foco) */ .fh-has-dd.kb-closed:hover .fh-dropdown,.fh-has-dd.kb-closed:focus-within .fh-dropdown, .fh-has-mega.kb-closed:hover .fh-megadrop,.fh-has-mega.kb-closed:focus-within .fh-megadrop{ opacity:0;visibility:hidden;pointer-events:none} @media(min-width:1040px){ /* Puente bajo el trigger: existe solo con el panel ya abierto (hover/focus) */ .fh-has-dd:hover::after,.fh-has-dd:focus-within::after, .fh-has-mega:not(.fh-mega-programas):hover::after, .fh-has-mega:not(.fh-mega-programas):focus-within::after{ content:"";position:absolute;left:-10px;right:-10px;top:100%;height:16px} .fh-mega-programas{position:static} .fh-mega-cards{top:100%;left:10px;right:10px;transform:translateY(12px);display:block;min-width:0; padding:18px 20px;max-height:min(calc(100vh - 180px),720px);overflow:auto;overscroll-behavior:contain; border-top-left-radius:0;border-top-right-radius:0; transition:opacity .24s,transform .24s,visibility 0s .22s} .fh-mega-cards::before{display:none} .fh-has-mega:hover .fh-mega-cards,.fh-has-mega:focus-within .fh-mega-cards{transform:translateY(0);transition-delay:0s} } @media(max-width:1039.98px){ /* Submenús colapsados por defecto en móvil (solo con JS); se abren tocando el trigger */ .js .fh-has-dd .fh-dropdown,.js .fh-has-mega .fh-megadrop{display:none} .fh-has-dd.dd-open .fh-dropdown{display:block} .fh-has-mega.dd-open .fh-megadrop{display:block} .fh-mega-cards{min-width:0;padding:16px 0 12px 4px} /* aire arriba: el head no se come contra el trigger */ .fh-mega-grid{grid-template-columns:1fr 1fr;gap:8px} .fh-pcard-media{height:44px} .fh-pcard-emoji svg{width:22px;height:22px} .fh-pcard-badge{font-size:.55rem;padding:2px 7px} .fh-pcard-body{padding:9px 10px 11px} .fh-mega-head{margin-bottom:12px;padding-right:46px} .fh-mega-close{top:0} .fh-mega-foot{flex-direction:column;align-items:stretch;text-align:center} .fh-mega-cta{text-align:center} } /* ---------- Reordenamiento visual (no toca el DOM) ---------- */ main.EducationalOrganization{display:flex;flex-direction:column} main.EducationalOrganization>section, main.EducationalOrganization>footer{ width:100%;max-width:var(--maxw);margin:14px auto; padding:clamp(36px,5vw,58px) clamp(20px,4vw,46px); } .HeroSection{order:1}.NavigationModule{order:2}.PortafolioSection{order:3} .ProofSection{order:4}.FacultySection{order:5}.CalendarSection{order:6} .FundingSection{order:7}.EeatModule{order:8}.FooterSection{order:9} section h2{font-size:clamp(1.7rem,3.4vw,2.4rem)} /* Tarjetas de sección genéricas */ .ProofSection,.FacultySection,.CalendarSection,.FundingSection,.EeatModule{ background:var(--card);border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow)} .FacultySection>h2,.CalendarSection>h2,.FundingSection>h2{color:var(--brand)} /* ---------- HERO (CRO: propuesta de valor + doble CTA) ---------- */ .HeroSection{ position:relative;overflow:hidden;display:grid;gap:22px;margin-top:24px!important; grid-template-areas:"content" "cta" "image";align-content:start; color:#fff;background:var(--grad);border-radius:28px;box-shadow:var(--shadow-lg); padding:clamp(24px,5vw,60px)!important; } .HeroSection::after{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(620px 320px at 92% 6%,rgba(255,207,0,.28),transparent 60%)} .HeroSection>*{position:relative;z-index:1} .HeroSection--content{grid-area:content;max-width:640px} .HeroSection--kicker{display:inline-flex;align-items:center;gap:6px;margin:0 0 14px; background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);border-radius:999px; padding:7px 14px;font-size:.78rem;font-weight:600;color:rgba(255,255,255,.95)} .HeroSection--headline{margin:0 0 14px;color:#fff; font-size:clamp(1.85rem,4.6vw,3.2rem);line-height:1.1;letter-spacing:-.02em} .HeroSection--headline em{font-style:normal; background:linear-gradient(90deg,#ffdd33,#ffcf00);-webkit-background-clip:text;background-clip:text;color:transparent} .HeroSection--sub{color:rgba(255,255,255,.92);font-size:clamp(1rem,1.5vw,1.15rem);margin:0 0 16px} .HeroSection--proof{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:0} .HeroSection--proof li{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18); border-radius:999px;padding:7px 14px;font-size:.8rem;font-weight:600} .EducationalOrganization--demand{display:none} /* solo microdatos (meta) */ .ApplyAction{grid-area:cta} .ApplyAction--buttons{display:flex;flex-wrap:wrap;gap:12px} .ApplyAction--submit{ position:relative;display:inline-flex;align-items:center;justify-content:center;font-weight:700;color:#0f1b2d; background:var(--grad-accent);border-radius:999px;padding:15px 30px;min-height:52px; box-shadow:0 12px 30px -8px rgba(255,207,0,.7); transition:transform .25s,box-shadow .25s} .ApplyAction--submit::after{content:"";position:absolute;inset:0;border-radius:999px;z-index:-1; box-shadow:0 14px 46px -6px rgba(255,207,0,.95);opacity:.35; animation:fdt-pulse 2.8s ease-in-out infinite} .ApplyAction--asesor{ display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:700;color:#fff; background:rgba(255,255,255,.08);border:2px solid rgba(255,255,255,.55);border-radius:999px; padding:13px 26px;min-height:52px;transition:background .25s,border-color .25s,transform .25s} .ApplyAction--asesor svg{width:19px;height:19px} @media(hover:hover){ .ApplyAction--submit:hover{transform:translateY(-2px) scale(1.02); box-shadow:0 18px 44px -8px rgba(255,207,0,.95)} .ApplyAction--asesor:hover{background:#128c7e;border-color:#128c7e;transform:translateY(-2px)} } .ApplyAction--submit:active,.ApplyAction--asesor:active{transform:scale(.97)} .ApplyAction--note{color:rgba(255,255,255,.78);font-size:.8rem;margin:12px 0 0} .ImageObject-hero{grid-area:image;position:relative;border-radius:20px;overflow:hidden;box-shadow:var(--shadow-lg)} .ImageObject--caption{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0); white-space:nowrap;margin:-1px} /* visible solo para crawlers/AT */ .ImageObject-hero img{width:100%;height:100%;min-height:240px;max-height:340px;object-fit:cover;display:block} .HeroSection--badge{position:absolute;left:14px;bottom:14px;background:rgba(255,255,255,.95); color:var(--ink);border-radius:14px;padding:9px 16px;font-size:.8rem;font-weight:600; box-shadow:var(--shadow-lg)} .HeroSection--badge strong{display:block;font-size:1.2rem;color:var(--brand);line-height:1.1} @media(min-width:900px){ .HeroSection{grid-template-columns:1.08fr .92fr;grid-template-areas:"content image" "cta image"; column-gap:46px;align-items:center} .ImageObject-hero img{max-height:none} } @media(max-width:480px){ .ApplyAction--buttons{flex-direction:column;align-items:stretch} } @keyframes fdt-pulse{0%,100%{opacity:.25}50%{opacity:1}} /* ---------- Sedes (panel CRO + parrilla con acciones por sede) ---------- */ /* Sección sin tarjeta contenedora: fondo/borde/sombra fuera y lateral reducido */ main.EducationalOrganization>.NavigationModule{ background:transparent;border:0;box-shadow:none;border-radius:0; padding-left:clamp(12px,2.5vw,28px);padding-right:clamp(12px,2.5vw,28px)} .NavigationModule{display:grid;gap:22px;grid-template-areas:"brand" "slogan" "hub"} @media(min-width:980px){ .NavigationModule{grid-template-columns:minmax(300px,370px) 1fr;column-gap:36px;align-items:start; grid-template-areas:"brand hub" "slogan hub"} } .NavigationModule--brand{grid-area:brand;display:flex;flex-wrap:wrap;align-items:center;gap:14px; background:var(--brand-050);border-radius:20px;padding:clamp(20px,3vw,30px)} /* Textos a fila completa; logo + marca comparten la última línea */ .NavigationModule--overline,.NavigationModule--bigtitle,.NavigationModule--intro{flex:1 1 100%} .NavigationModule--logoContainer{flex:none} .NavigationModule--brand .Brand{flex:1;min-width:0} .NavigationModule--overline{margin:0;font-size:.72rem;font-weight:700;letter-spacing:.14em; text-transform:uppercase;color:var(--brand)} .NavigationModule--bigtitle{margin:0;font-size:clamp(1.55rem,2.8vw,2.2rem);font-weight:800; line-height:1.14;letter-spacing:-.02em;color:var(--ink)} .NavigationModule--intro{margin:0 0 4px;color:var(--muted);font-size:.92rem} .EducationalOrganization--logo{width:auto;max-width:118px;height:42px;object-fit:contain; background:var(--card);border-radius:12px;padding:6px 10px;box-shadow:var(--shadow)} .Brand--name{margin:0;font-size:.85rem;color:var(--brand);line-height:1.2} .Brand--slogan{margin:2px 0 0;color:var(--muted);font-size:.76rem;line-height:1.35} .NavigationModule--slogan{grid-area:slogan;color:var(--muted);font-size:.9rem;padding:0 8px} .NavigationModule--regionalHub{grid-area:hub} .NavigationModule--regionalHub>h4{display:flex;flex-wrap:wrap;align-items:center;gap:10px; font-size:1.15rem;margin:0 0 2px} .hub-count{background:var(--brand-050);color:var(--brand-700);border-radius:999px; padding:4px 12px;font-size:.72rem;font-weight:600;letter-spacing:0} .EducationalOrganization--subOrganizationList{ list-style:none;padding:0;margin:14px 0 0;display:grid;gap:12px; grid-template-columns:repeat(auto-fill,minmax(235px,1fr))} .EducationalOrganization-branch{ position:relative;overflow:hidden;display:flex;flex-direction:column; background:var(--card);border:1px solid var(--line); border-radius:16px;padding:18px 16px 14px;box-shadow:var(--shadow); transition:transform .25s,box-shadow .25s,border-color .25s} .EducationalOrganization-branch::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--grad)} @media(hover:hover){ .EducationalOrganization-branch:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--brand)} } .EducationalOrganization-branchAnchor{font-weight:700;color:var(--ink);font-size:.98rem} .EducationalOrganization-branch small{display:block;color:var(--muted);font-size:.78rem;margin-top:3px} .EducationalOrganization-branchPhone{color:var(--brand)!important;font-weight:600;margin-top:6px!important} .branch-actions{display:flex;gap:8px;margin-top:12px} .branch-cta{flex:1;display:inline-flex;align-items:center;justify-content:center; background:var(--brand-050);color:var(--brand);font-weight:700;font-size:.8rem; border-radius:10px;padding:8px 12px;min-height:40px;transition:background .2s,color .2s,transform .2s} .branch-wa,.branch-loc{flex:none;width:40px;height:40px;border-radius:10px; display:flex;align-items:center;justify-content:center;transition:transform .2s,box-shadow .2s,background .2s,color .2s} .branch-wa{background:#128c7e;color:#fff} .branch-loc{background:var(--brand-050);color:var(--brand)} .branch-wa svg,.branch-loc svg{width:18px;height:18px} @media(hover:hover){ .branch-cta:hover{background:var(--grad);color:#fff;transform:translateY(-1px)} .branch-loc:hover{background:var(--grad);color:#fff;transform:translateY(-1px)} .branch-wa:hover{transform:translateY(-1px);box-shadow:0 8px 16px -8px rgba(18,140,126,.8)} } .branch-cta:active,.branch-wa:active,.branch-loc:active{transform:scale(.95)} .branch-cta:focus-visible,.branch-wa:focus-visible,.branch-loc:focus-visible{outline:3px solid var(--brand);outline-offset:2px} @media(min-width:1080px){ /* Desktop: sedes siempre en 3 columnas */ .EducationalOrganization--subOrganizationList{grid-template-columns:repeat(3,1fr)} .branch-cta{font-size:.74rem;padding:8px 8px} .branch-wa,.branch-loc{width:36px;height:36px} .branch-wa svg,.branch-loc svg{width:16px;height:16px} } @media(max-width:640px){ /* Sedes en dos columnas compactas en móvil */ .EducationalOrganization--subOrganizationList{grid-template-columns:1fr 1fr;gap:10px} .EducationalOrganization-branch{padding:14px 12px 12px} .EducationalOrganization-branchAnchor{font-size:.92rem} .EducationalOrganization-branch small{font-size:.7rem} .branch-actions{gap:5px;margin-top:10px} .branch-cta{font-size:.68rem;padding:8px 4px;min-height:36px} .branch-wa,.branch-loc{width:36px;height:36px} .branch-wa svg,.branch-loc svg{width:16px;height:16px} } /* ---------- Escuelas (tarjetas) ---------- */ .PortafolioSection{text-align:center} .texto-subrayado{display:inline-block;position:relative;font-size:clamp(1.9rem,3.6vw,2.6rem)} .texto-subrayado::after{content:"";display:block;width:74px;height:5px;margin:16px auto 0; border-radius:999px;background:var(--grad-accent)} .PortafolioSection>p{color:var(--muted)} .PortafolioSection--lead{font-size:1.02rem;margin:6px auto 0} .PortafolioSection--lead strong{color:var(--brand)} .OfferCatalog--name{font-size:.8rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--brand)} .OfferCatalog--description{color:var(--muted);margin-bottom:8px} .OfferCatalog--grid{display:grid;grid-template-columns:1fr;gap:18px;margin-top:34px;text-align:left} /* Mismo ancho útil que la sección de sedes (lateral reducido, sin tarjeta) */ main.EducationalOrganization>.PortafolioSection{ padding-left:clamp(12px,2.5vw,28px);padding-right:clamp(12px,2.5vw,28px)} /* Fila de escuela estilo "resultado" (foto cuadrada | card recargada). Personalización por escuela con --pc/--pc2/--pc-text, como toda la familia. */ .Offer.school-row{ --pc:var(--brand);--pc2:var(--brand-600); position:relative;display:flex;overflow:hidden; background:var(--card);border:1px solid var(--line);border-radius:var(--radius); box-shadow:var(--shadow);transition:transform .28s cubic-bezier(.22,.61,.36,1),box-shadow .28s,border-color .28s} @media(hover:hover){ .Offer.school-row:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--pc)} .Offer.school-row:hover .course-icon i{transform:scale(1.12) rotate(-6deg)} .Offer.school-row:hover .EducationalOccupationalProgram--name{color:var(--pc-text,var(--pc))} } .course-icon{flex:none;position:relative;width:225px;aspect-ratio:1/1;align-self:center; margin:16px 0 16px 16px;border-radius:16px;overflow:hidden; display:flex;align-items:center;justify-content:center;color:#fff; background: radial-gradient(circle at 84% 18%, rgba(255,255,255,.30) 0 7px, transparent 8px), radial-gradient(circle at 14% 82%, rgba(255,255,255,.22) 0 5px, transparent 6px), linear-gradient(135deg,var(--pc),var(--pc2))} .course-icon img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .course-icon i{font-style:normal;display:flex;transition:transform .3s} .course-icon svg{width:46px;height:46px;display:block;filter:drop-shadow(0 4px 10px rgba(0,0,0,.28))} .school-main{flex:1;min-width:0;display:flex;flex-direction:column;padding:16px 20px 18px} /* Viñeta de convocatoria: pegada a la esquina superior derecha de la card */ .school-main>.Offer--availability{position:absolute;top:0;right:0;margin:0;padding:0;z-index:2} .school-main>.Offer--availability .Offer--badge{ background:#e9f8ef;color:#157a43;border-radius:0 18px 0 12px; padding:6px 14px 7px;font-size:.68rem;letter-spacing:.01em} .school-main>.school-body{order:2} .school-main>.school-region{order:3;margin:8px 0 0;font-size:.75rem;color:var(--muted)} .Offer--badge{display:inline-block;font-weight:600;font-size:.72rem;border-radius:999px;padding:4px 12px; background:rgba(31,157,87,.12);color:#157a43} .school-body{display:flex;flex-direction:column;flex:1} .school-body>a{display:inline-block} .EducationalOccupationalProgram--name{font-size:1.15rem;margin:0 0 6px;color:var(--ink);transition:color .25s} .school-body>p[itemprop="description"]{color:var(--muted);font-size:.9rem;margin:0 0 10px} .school-sedes{font-size:.82rem;color:var(--muted);margin:0 0 10px} .school-sedes strong{color:var(--ink);font-weight:700} .school-programs{margin:0 0 14px;min-width:0} .school-programs-label{display:block;font-size:.78rem;font-weight:700;color:var(--brand);margin:0 0 8px} /* Slider horizontal con scroll-snap: 4 programas visibles en desktop, 2 en móvil */ .prog-slider{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 30px)/4);gap:10px; overflow-x:auto;scroll-snap-type:x proximity;padding:2px 2px 8px; -webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--brand-050) transparent} .prog-slider::-webkit-scrollbar{height:6px} .prog-slider::-webkit-scrollbar-thumb{background:var(--brand-050);border-radius:999px} .prog-card{scroll-snap-align:start;display:flex;flex-direction:column;background:var(--card); border:1px solid var(--line);border-radius:12px;overflow:hidden; transition:transform .25s,box-shadow .25s,border-color .25s} .prog-card-media{position:relative;display:block;aspect-ratio:16/10; background: radial-gradient(circle at 82% 20%, rgba(255,255,255,.28) 0 5px, transparent 6px), linear-gradient(135deg,var(--pc),var(--pc2))} .prog-card-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .prog-card-title{display:block;padding:7px 9px 9px;font-size:.7rem;font-weight:600; color:var(--ink);line-height:1.3;transition:color .2s} @media(hover:hover){ .prog-card:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--pc)} .prog-card:hover .prog-card-title{color:var(--pc-text,var(--pc))} } .prog-card:active{transform:scale(.98)} .prog-card:focus-visible{outline:3px solid var(--brand);outline-offset:2px} @media(max-width:719.98px){ .prog-slider{grid-auto-columns:calc((100% - 10px)/2)} } .school-foot{margin-top:auto;display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap} .school-ia{display:inline-flex;align-items:center;justify-content:center;gap:7px;background:var(--card); border:1px solid var(--brand);color:var(--brand);font-weight:700;font-size:.85rem;border-radius:10px; padding:9px 16px;min-height:42px;transition:background .2s,color .2s,transform .2s} .school-ia svg{width:15px;height:15px;color:var(--accent-600);transition:color .2s} @media(hover:hover){ .school-ia:hover{background:var(--brand);color:#fff;transform:translateY(-1px)} .school-ia:hover svg{color:var(--accent)} } .school-ia:active{transform:scale(.96)} .school-ia:focus-visible{outline:3px solid var(--brand);outline-offset:2px} .school-cta{display:inline-flex;align-items:center;justify-content:center;background:var(--brand-050); color:var(--brand);font-weight:700;font-size:.85rem;border-radius:10px;padding:10px 20px;min-height:42px; transition:background .2s,color .2s,transform .2s} @media(hover:hover){.school-cta:hover{background:var(--grad);color:#fff;transform:translateY(-1px)}} .school-cta:active{transform:scale(.96)} .school-cta:focus-visible,.prog-pill:focus-visible{outline:3px solid var(--brand);outline-offset:2px} @media(max-width:719.98px){ .Offer.school-row{flex-direction:column} .course-icon{width:auto;aspect-ratio:auto;height:160px;align-self:stretch;margin:12px 12px 0;border-radius:14px} .course-icon svg{width:38px;height:38px} .school-main{padding:14px 16px 16px} .school-cta,.school-ia{flex:1} } /* ---------- Prueba social + contadores ---------- */ .ProofSection,.CalendarSection,.FundingSection{text-align:center} .ProofSection>h2,.FacultySection>h2,.CalendarSection>h2,.FundingSection>h2{ font-size:clamp(1.5rem,2.6vw,2rem);color:var(--ink);text-align:center;margin-bottom:4px} .ProofSection>h2::after,.FacultySection>h2::after,.CalendarSection>h2::after,.FundingSection>h2::after{ content:"";display:block;width:56px;height:4px;margin:12px auto 0;border-radius:999px;background:var(--grad-accent)} .ProofSection--counters{display:grid;gap:14px;margin:30px 0; grid-template-columns:repeat(auto-fit,minmax(200px,1fr))} .InteractionCounter,.InteractionCounter-agent,.InteractionCounter-plain{ position:relative;overflow:hidden;background:var(--card);border:1px solid var(--line); border-radius:16px;padding:24px 16px;box-shadow:var(--shadow)} .InteractionCounter::before,.InteractionCounter-agent::before,.InteractionCounter-plain::before{ content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--grad)} .counter{font-weight:800;color:var(--brand)} .ProofSection--counters .counter{display:block;margin-bottom:6px;font-size:2.4rem; background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent} .ProofSection--counters p{margin:0;color:var(--muted);font-size:.85rem} .FacultySection .counter,.FundingSection .counter{font-size:1.3rem} .ProofSection--accreditations{display:grid;gap:10px;margin:26px 0;text-align:left; grid-template-columns:repeat(auto-fit,minmax(250px,1fr))} .ProofSection--accreditations>div,.ProofSection--accreditations>p{ background:var(--brand-050);border-radius:12px;padding:14px 16px;margin:0; font-size:.85rem;color:var(--muted)} .Certification--name,.Credential--name,.EducationalOrganization--award{color:var(--ink);font-weight:600} .AggregateRating{position:relative;overflow:hidden;max-width:520px;margin:26px auto; background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px;box-shadow:var(--shadow)} .AggregateRating::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--grad-accent)} .AggregateRating p{margin:0;color:var(--muted);font-size:.9rem} .AggregateRating--value{color:var(--brand);font-size:1.9rem;font-weight:800} .ProofSection--reviews{max-width:640px;margin:0 auto} .Review{position:relative;overflow:hidden;background:var(--card);border:1px solid var(--line); border-radius:14px;padding:26px 22px 22px;box-shadow:var(--shadow);text-align:left} .Review::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--grad-accent)} .Review::after{content:"C";position:absolute;right:16px;top:2px;font-size:4.5rem;line-height:1; font-weight:800;color:var(--brand-050);pointer-events:none} .Review--body{font-style:italic;color:var(--ink);margin:0 0 8px;position:relative;z-index:1} .Review--signature{color:var(--muted);font-size:.9rem;margin:0} /* ---------- Equipo / Eventos / Financiación ---------- */ .FacultySection{display:grid;gap:0 16px} .FacultySection>h2,.FacultySection>p{grid-column:1/-1} .FacultySection>p{text-align:center;color:var(--muted)} @media(min-width:900px){.FacultySection{grid-template-columns:repeat(3,1fr)}} .Person-rector,.Person-staff,.Person-alumni{ position:relative;overflow:hidden;background:var(--card);border:1px solid var(--line); border-radius:16px;padding:24px 20px 20px;margin-top:16px;box-shadow:var(--shadow)} .Person-rector::before,.Person-staff::before,.Person-alumni::before{ content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--grad)} .Person-rector h3,.Person-staff h4,.Person-alumni h4{font-size:1.02rem;color:var(--ink)} .Person-rector p,.Person-staff p,.Person-alumni p{color:var(--muted);font-size:.88rem;margin:.4em 0} .Event{position:relative;overflow:hidden;background:var(--card);border:1px solid var(--line); border-radius:16px;padding:26px 22px 22px;margin:20px auto 0;max-width:720px; box-shadow:var(--shadow);text-align:left} .Event::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--grad)} .Event--name{color:var(--brand);font-size:1.1rem} .Event p{color:var(--muted);font-size:.9rem;margin:.35em 0} .CalendarSection--booking{margin-top:22px} .CalendarSection--booking>p{color:var(--muted);margin:0 0 10px} .CalendarSection--booking a,.EducationalOrganization--tourBookingPage{ display:inline-block;font-weight:600;color:#fff;background:var(--grad); border-radius:999px;padding:13px 28px} .FundingSection>p{color:var(--muted);max-width:820px;margin:.5em auto} .FundingSection--payment{margin-top:20px} .FundingSection--payment h3{font-size:1.02rem;color:var(--ink)} .FundingSection--paymentList{list-style:none;padding:0;margin:12px auto 0;display:flex; flex-wrap:wrap;gap:10px;justify-content:center} .FundingSection--paymentList li{background:var(--brand-050);border-radius:12px;padding:11px 18px; font-weight:600;font-size:.88rem;color:var(--brand)} .Organization-department{margin-top:24px;padding-top:20px;border-top:1px solid var(--line)} .Organization-department h3{font-size:1rem;color:var(--ink)} .Organization-department p{color:var(--muted);font-size:.88rem} /* ---------- Footer oscuro ---------- */ .FooterSection{ max-width:100%!important;margin:40px 0 0!important;border-radius:32px 32px 0 0; padding:clamp(44px,6vw,64px) clamp(20px,4vw,40px)!important; color:rgba(255,255,255,.82);background:linear-gradient(180deg,#0b213f,#071628)} .FooterSection--grid{max-width:var(--maxw);margin:0 auto;display:grid;gap:32px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr))} .FooterSection h3{color:#fff} .FooterSection a{color:var(--accent)} .FooterSection strong,.Place-location--badge span{color:#fff} .FooterSection--creativeWork{max-width:var(--maxw);margin:32px auto 0;padding-top:22px; border-top:1px solid rgba(255,255,255,.12);font-size:.85rem;color:rgba(255,255,255,.6)} /* ---------- Módulos 100% SEO (atenuados, al final) ---------- */ .EeatModule{font-size:.86rem;color:var(--muted);border-style:dashed} .EeatModule--title{font-size:1.1rem;color:var(--ink)} .EeatModule--table{width:100%;border-collapse:collapse;margin:16px 0;font-size:.82rem} .EeatModule--table th,.EeatModule--table td{border:1px solid var(--line);padding:9px 11px;text-align:left} .EeatModule--table th{background:var(--brand-050);color:var(--ink)} .EeatModule--list,.EeatModule--socialList{columns:2;column-gap:22px} @media(max-width:640px){.EeatModule--list,.EeatModule--socialList{columns:1}} .GeopoliticsModule{max-width:var(--maxw);margin:30px auto;padding:30px clamp(18px,4vw,26px); font-size:.82rem;color:var(--muted)} .GeopoliticsModule--title{font-size:1.05rem;color:var(--ink)} .GeopoliticsModule--list{list-style:none;padding:0;margin:16px 0 0;display:grid;gap:9px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr))} .GeopoliticsModule--list li{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:9px 13px} /* ---------- Animaciones (solo con JS activo) ---------- */ .js .reveal{opacity:0;transition:opacity .5s ease} .js .reveal.in{opacity:1} .js .reveal-item{opacity:0;transform:translateY(12px); transition:opacity .45s ease,transform .45s cubic-bezier(.22,.61,.36,1)} .js .reveal-item.in{opacity:1;transform:none} @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .js .reveal,.js .reveal-item{opacity:1!important;transform:none!important;transition:none} .ApplyAction--submit::after{animation:none} .fh-wa,.fh-cta,.SearchAction--submit{transition:none} } @media(max-width:640px){ main.EducationalOrganization>section{padding:38px 18px} } /* ---------- Top bar de una sola línea en desktop (overrides finales) ---------- Colocado al final del archivo a propósito: gana la cascada sobre las reglas base del nav (flex:1 0 100%, position:relative) definidas arriba. */ @media(min-width:1040px){ .fh-nav{order:2;flex:1 1 auto;min-width:0;position:static;margin-top:0;border-top:0;padding-top:0; justify-content:center;gap:2px;flex-wrap:nowrap} .fh-sep{display:none} .fh-nav>a,.fh-has-dd>a,.fh-has-mega>a{font-size:.78rem;padding:8px 10px;white-space:nowrap} .fh-ia{margin-right:4px} .fh-ia>a.fh-ia-btn{padding:8px 13px;font-size:.78rem} } /* ---------- Dieta de animación (~10% del motion original) ---------- Queda solo feedback funcional: apertura de menús/acordeones, focus-visible, :active y cambios de color. Fuera: reveals de scroll, pulso infinito, elevaciones/rotaciones/escalas de hover y texto animado. */ /* 1. Reveals de scroll: contenido siempre visible, sin transición */ .js .reveal,.js .reveal-item{opacity:1!important;transform:none!important;transition:none!important} /* 2. Pulso del CTA: halo estático */ .ApplyAction--submit::after{animation:none;opacity:.45} /* 3. Hovers sin movimiento (se conservan color/fondo/borde/sombra suaves) */ @media(hover:hover){ .fh-cta:hover,.fh-wa:hover,.fh-ia>a.fh-ia-btn:hover,.fh-quick-pill:hover,.fh-mega-cta:hover, .fh-mega-close:hover,.fh-pcard:hover,.SearchAction--submit:hover, .ApplyAction--submit:hover,.ApplyAction--asesor:hover, .Offer.school-row:hover,.prog-card:hover,.prog-pill:hover,.school-cta:hover,.school-ia:hover, .EducationalOrganization-branch:hover,.branch-cta:hover,.branch-wa:hover,.branch-loc:hover, .CalendarSection--booking a:hover,.EducationalOrganization--tourBookingPage:hover{transform:none} .Offer.school-row:hover .course-icon i,.fh-pcard:hover .fh-pcard-emoji{transform:none} .Offer.school-row:hover .course-more,.fh-pcard:hover .fh-pcard-link{letter-spacing:inherit} } /* 4. Transiciones de hover cortas y solo de color (nada de movimiento suave) */ .fh-pcard,.Offer.school-row,.prog-card,.EducationalOrganization-branch{ transition:border-color .15s,box-shadow .15s} .course-icon i,.fh-pcard-emoji,.fh-mega-close{transition:none} /* ---------- Firefox: scroll nativo puro, cero fricción ---------- */ @supports (-moz-appearance:none){ /* FF ya suaviza la rueda por su cuenta: el smooth CSS encima produce correcciones visibles. Scroll nativo puro. */ html{scroll-behavior:auto} /* Sin snap en FF: la rueda jamás se engancha al pasar sobre los sliders */ .prog-slider{scroll-snap-type:none} } /* El scroll horizontal del slider nunca encadena hacia el scroll de la página */ .prog-slider{overscroll-behavior-x:contain}