/* ========================================================================= WHI Institute — hoja de estilos principal Reproduce fielmente la portada del PDF de diseño. ========================================================================= */ :root { --whi-navy:#15294d; --whi-dark:#0c2240; --whi-darker:#08203c; --whi-blue:#144a9c; --whi-blue-ink:#1b5bbf; --whi-accent:#a6c8ef; --whi-eyebrow:#5f86c4; --whi-ink:#5e6675; --whi-ink-soft:#8089a0; --whi-soft:#f1f5fa; --whi-soft-2:#e9f0f8; --whi-line:#e3e9f1; --whi-white:#ffffff; --whi-hero-bg:#f6f7f9; --whi-green:#52a06d; --whi-purple:#8a6fc4; --whi-cyan:#3f86c9; --whi-orange:#dd9a44; --whi-teal:#37a39b; --whi-serif:'Playfair Display', Georgia, 'Times New Roman', serif; --whi-sans:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --whi-header-h:72px; --whi-radius:14px; --whi-shadow:0 22px 48px -28px rgba(16,40,80,.42); --whi-shadow-sm:0 10px 26px -18px rgba(16,40,80,.45); } /* ----------------------------- Base ----------------------------- */ *,*::before,*::after { box-sizing:border-box; } html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; } body { margin:0; font-family:var(--whi-sans); font-size:17px; line-height:1.62; color:var(--whi-ink); background:var(--whi-white); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } img { max-width:100%; height:auto; display:block; } a { color:var(--whi-blue); } section { scroll-margin-top:calc(var(--whi-header-h) + 10px); } .whi-container { width:min(1180px, 92vw); margin-inline:auto; } body:not(.whi-front) .whi-main { padding-top:var(--whi-header-h); } .screen-reader-text { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } .whi-skip-link { position:absolute; left:-9999px; z-index:100; } .whi-skip-link:focus { left:16px; top:12px; width:auto; height:auto; clip:auto; background:#fff; color:var(--whi-navy); padding:10px 16px; border-radius:8px; } /* ------------------------ Tipografía ---------------------------- */ .whi-display { font-family:var(--whi-serif); font-weight:700; line-height:1.08; letter-spacing:-.012em; } .whi-hl { color:var(--whi-accent); } .whi-h2 { font-size:clamp(1.9rem, 3.3vw, 2.85rem); color:var(--whi-navy); margin:0; } .whi-h2--center { text-align:center; } .whi-on-dark { color:#fff; } .whi-eyebrow { display:inline-block; font:700 .76rem/1.4 var(--whi-sans); letter-spacing:.14em; text-transform:uppercase; color:var(--whi-eyebrow); } .whi-eyebrow--muted { color:var(--whi-ink-soft); } .whi-eyebrow--center { display:block; text-align:center; } .whi-eyebrow--light { color:var(--whi-accent); } .whi-lead { font-size:1.06rem; line-height:1.7; color:var(--whi-ink); margin:18px 0 0; } .whi-lead--center { margin-inline:auto; text-align:center; max-width:64ch; } .whi-section { padding:clamp(56px, 8vw, 108px) 0; } .whi-section__head { max-width:780px; margin:0 auto clamp(40px, 5vw, 64px); } .whi-section__head .whi-eyebrow--center { margin-bottom:16px; } .whi-section__head .whi-h2--center + .whi-lead { margin-top:20px; } .whi-icon { width:20px; height:20px; flex:0 0 auto; } /* ------------------------- Botones ------------------------------ */ .whi-btn { display:inline-flex; align-items:center; gap:.55em; text-decoration:none; font:600 .96rem/1 var(--whi-sans); padding:.92em 1.45em; border-radius:9px; border:1.5px solid transparent; cursor:pointer; transition:transform .15s, background .18s, box-shadow .18s, color .18s; } .whi-btn .whi-icon { width:1.05em; height:1.05em; } .whi-btn:hover { transform:translateY(-1px); } .whi-btn--solid { background:var(--whi-navy); color:#fff; } .whi-btn--solid:hover { background:#1c3766; } .whi-btn--ghost { background:#fff; color:var(--whi-navy); border-color:var(--whi-line); box-shadow:var(--whi-shadow-sm); } .whi-btn--ghost:hover { border-color:var(--whi-accent); } .whi-btn--light { background:#fff; color:var(--whi-navy); border-color:var(--whi-line); box-shadow:var(--whi-shadow-sm); } .whi-btn--light .whi-icon:first-child { color:var(--whi-blue); } .whi-btn--light:hover { border-color:var(--whi-accent); } .whi-btn--ghost-light { background:transparent; color:#fff; border-color:rgba(255,255,255,.45); } .whi-btn--ghost-light:hover { background:rgba(255,255,255,.08); border-color:#fff; } .whi-btn--pill { border-radius:999px; border:1.5px solid var(--whi-accent); color:var(--whi-navy); background:rgba(166,200,239,.18); font-size:.74rem; letter-spacing:.06em; text-transform:uppercase; padding:.7em 1.25em; } .whi-btn--pill:hover { background:rgba(166,200,239,.34); } /* Enlace secundario subrayado (con icono): «Para familias», «Investigación e impacto». */ .whi-chip { display:inline-flex; align-items:center; gap:.5em; text-decoration:none; border:0; background:transparent; border-radius:0; box-shadow:none; padding:2px 0; color:var(--whi-navy); font-weight:600; font-size:.92rem; transition:color .18s; } .whi-chip span { box-shadow:inset 0 -2px 0 currentColor; padding-bottom:3px; } .whi-chip:hover { color:var(--whi-blue); } .whi-chip .whi-icon { width:18px; height:18px; color:var(--whi-blue); } .whi-link { display:inline-flex; align-items:center; gap:.5em; color:var(--whi-blue); font-weight:600; text-decoration:none; border-bottom:2px solid transparent; padding-bottom:2px; } .whi-link .whi-icon { width:18px; height:18px; transition:transform .18s; } .whi-link:hover { border-bottom-color:var(--whi-blue); } .whi-link:hover .whi-icon { transform:translateX(3px); } /* ------------------------- Cabecera ----------------------------- */ .whi-header { position:fixed; top:0; left:0; right:0; z-index:50; padding:13px 0; background:rgba(246,248,251,.92); backdrop-filter:saturate(140%) blur(8px); box-shadow:0 1px 0 rgba(16,40,80,.07); transition:background .25s, box-shadow .25s; } .whi-front .whi-header:not(.is-stuck) { background:transparent; backdrop-filter:none; box-shadow:none; } .whi-header__inner { display:flex; align-items:center; gap:24px; } .whi-header__brand { flex:0 0 auto; } .whi-logo { display:inline-flex; align-items:center; flex:0 0 auto; } .whi-logo-img, .whi-logo img { height:38px; width:auto; flex:0 0 auto; max-width:none; } .whi-nav { flex:1 1 auto; min-width:0; display:flex; justify-content:center; } .whi-menu { display:flex; flex-wrap:wrap; justify-content:center; gap:8px 26px; list-style:none; margin:0; padding:0; } .whi-menu a { color:var(--whi-navy); font:700 .76rem/1 var(--whi-sans); letter-spacing:.07em; text-transform:uppercase; text-decoration:none; opacity:.92; transition:color .18s; white-space:nowrap; } .whi-menu a:hover { color:var(--whi-blue); opacity:1; } .whi-header__cta { flex:0 0 auto; display:inline-flex; align-items:center; gap:14px; } .whi-burger { display:none; flex-direction:column; gap:5px; width:44px; height:40px; align-items:center; justify-content:center; background:transparent; border:0; cursor:pointer; } .whi-burger span { display:block; width:24px; height:2px; background:var(--whi-navy); border-radius:2px; transition:.22s; } .whi-burger[aria-expanded="true"] span:nth-child(1) { transform:translateY(7px) rotate(45deg); } .whi-burger[aria-expanded="true"] span:nth-child(2) { opacity:0; } .whi-burger[aria-expanded="true"] span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); } .whi-mobile { position:fixed; top:var(--whi-header-h); left:0; right:0; z-index:49; background:#fff; border-top:1px solid var(--whi-line); padding:16px 6vw 26px; display:flex; flex-direction:column; gap:8px; box-shadow:0 24px 30px -18px rgba(0,0,0,.25); } .whi-mobile[hidden] { display:none; } .whi-mobile__menu { list-style:none; margin:0; padding:0; } .whi-mobile__menu a, .whi-mobile .whi-menu a { display:block; padding:13px 4px; color:var(--whi-navy); text-decoration:none; font-weight:700; border-bottom:1px solid var(--whi-line); text-transform:uppercase; font-size:.8rem; letter-spacing:.05em; } .whi-mobile__cta { margin-top:14px; align-self:flex-start; } /* --------------------------- Hero ------------------------------- */ .whi-hero { position:relative; background:var(--whi-hero-bg); overflow:hidden; padding-top:calc(var(--whi-header-h) + 28px); padding-bottom:clamp(40px,6vw,80px); } .whi-hero__media { position:absolute; inset:0 0 0 auto; width:60%; background-size:cover; background-position:center; } .whi-hero__media::before { content:''; position:absolute; inset:0; background:linear-gradient(90deg, var(--whi-hero-bg) 2%, rgba(246,247,249,.55) 26%, rgba(246,247,249,0) 48%); } .whi-hero__inner { position:relative; z-index:2; display:flex; align-items:center; min-height:min(74vh, 640px); } .whi-hero__content { max-width:680px; } .whi-hero__title { font-size:clamp(2.05rem, 4.3vw, 3.45rem); color:var(--whi-navy); margin:0; } .whi-hero__text { font-size:1.075rem; line-height:1.7; color:var(--whi-ink); margin:22px 0 0; max-width:48ch; } .whi-hero__actions { display:flex; flex-wrap:wrap; gap:14px; margin-top:30px; } .whi-hero__pills { margin-top:34px; } .whi-hero__pills .whi-eyebrow { margin-bottom:12px; } .whi-hero__pillrow { display:flex; flex-wrap:wrap; gap:14px 26px; } /* --------------- Sección: lo que ya sostenéis ------------------- */ .whi-cuidado__grid { display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(32px, 5vw, 76px); align-items:center; } .whi-framed { position:relative; } .whi-framed::before { content:''; position:absolute; inset:-16px 16px 16px -16px; border:2px solid var(--whi-accent); border-radius:3px; z-index:0; } .whi-framed img { position:relative; z-index:1; width:100%; border-radius:3px; box-shadow:var(--whi-shadow); } .whi-cuidado__content .whi-eyebrow { margin-bottom:14px; } .whi-statements { list-style:none; margin:26px 0 0; padding:0; display:flex; flex-direction:column; gap:12px; } .whi-statement { background:#fff; border:1px solid var(--whi-line); border-left:4px solid var(--whi-teal); border-radius:9px; padding:15px 18px; color:var(--whi-navy); font-weight:500; box-shadow:var(--whi-shadow-sm); } /* --------------------- Banner oportunidad ----------------------- */ .whi-banner { position:relative; background-size:cover; background-position:center; isolation:isolate; padding:clamp(72px, 11vw, 132px) 0; text-align:center; } .whi-banner__overlay { position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(12,34,64,.72), rgba(8,24,52,.8)); } .whi-banner__title { color:#fff; font-size:clamp(2rem, 3.8vw, 3.05rem); max-width:26ch; margin:0 auto; } .whi-banner__text { color:rgba(255,255,255,.85); margin:18px auto 0; max-width:60ch; font-size:1.05rem; } /* ----------------------- Investigación -------------------------- */ .whi-inv { position:relative; overflow:hidden; background:#fff; } .whi-inv__media { position:absolute; top:0; bottom:0; left:0; width:62%; background-size:cover; background-position:center; } .whi-inv__media::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg, rgba(255,255,255,0) 42%, #fff 92%); } .whi-inv__inner { position:relative; z-index:2; display:flex; justify-content:flex-end; } .whi-inv__content { width:46%; min-width:340px; } .whi-inv__content .whi-link { margin-top:24px; } /* --------------------------- Método ----------------------------- */ .whi-metodo { background:#fff; } .whi-pillars { display:grid; grid-template-columns:1fr auto 1fr; gap:clamp(22px, 4vw, 56px); align-items:center; max-width:1080px; margin:0 auto; } .whi-pillars__col { display:flex; flex-direction:column; gap:clamp(30px, 4vw, 54px); } .whi-pillars__col:first-child .whi-pillar { text-align:right; align-items:flex-end; } .whi-pillar { display:flex; flex-direction:column; align-items:flex-start; } .whi-pillar__icon { width:52px; height:52px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; } .whi-pillar__icon .whi-icon { width:24px; height:24px; } .whi-pillar--1 .whi-pillar__icon { background:#e6f3ec; color:var(--whi-green); } .whi-pillar--2 .whi-pillar__icon { background:#efe9f8; color:var(--whi-purple); } .whi-pillar--3 .whi-pillar__icon { background:#e6effa; color:var(--whi-cyan); } .whi-pillar--4 .whi-pillar__icon { background:#f8eedd; color:var(--whi-orange); } .whi-pillar__num { display:inline-flex; align-items:center; font:700 .82rem/1 var(--whi-sans); letter-spacing:.12em; margin:16px 0 0; } .whi-pillar__num::before { content:''; width:18px; height:2px; background:currentColor; margin-right:9px; display:inline-block; } .whi-pillar--1 .whi-pillar__num { color:var(--whi-green); } .whi-pillar--2 .whi-pillar__num { color:var(--whi-purple); } .whi-pillar--3 .whi-pillar__num { color:var(--whi-cyan); } .whi-pillar--4 .whi-pillar__num { color:var(--whi-orange); } .whi-pillars__col:first-child .whi-pillar__num { flex-direction:row-reverse; } .whi-pillars__col:first-child .whi-pillar__num::before { margin:0 0 0 9px; } .whi-pillar__title { font:700 1.16rem/1.3 var(--whi-sans); color:var(--whi-navy); margin:.55em 0 .35em; } .whi-pillar__text { font-size:.95rem; color:var(--whi-ink); margin:0; max-width:30ch; } .whi-pillars__center { position:relative; display:flex; justify-content:center; } /* Anillo de "proceso continuo": dos arcos con punta de flecha que giran lentamente. */ .whi-cycle { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:clamp(266px, 29vw, 340px); height:clamp(266px, 29vw, 340px); z-index:0; pointer-events:none; overflow:visible; } .whi-cycle__arc { fill:none; stroke:rgba(95,134,196,.45); stroke-width:1.4; } .whi-cycle__head { fill:rgba(95,134,196,.7); } @media (prefers-reduced-motion: no-preference) { .whi-cycle { animation:whi-cycle-spin 28s linear infinite; transform-origin:center; } @keyframes whi-cycle-spin { from { transform:translate(-50%,-50%) rotate(0); } to { transform:translate(-50%,-50%) rotate(360deg); } } } .whi-orb { position:relative; width:clamp(184px, 21vw, 236px); height:clamp(184px, 21vw, 236px); border-radius:50%; background:radial-gradient(circle at 50% 38%, #ffffff, #eef4fb); border:1px solid var(--whi-line); box-shadow:0 32px 60px -32px rgba(16,40,80,.45), inset 0 0 0 9px rgba(255,255,255,.65); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:26px; } .whi-orb__title { font-family:var(--whi-serif); font-weight:700; font-size:clamp(1.1rem, 1.7vw, 1.42rem); color:var(--whi-navy); line-height:1.14; } .whi-orb__sub { font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; color:var(--whi-blue); margin-top:12px; max-width:17ch; line-height:1.5; } .whi-metodo__actions { display:flex; gap:16px; justify-content:center; margin-top:clamp(44px, 6vw, 72px); flex-wrap:wrap; } /* ----------------------- Confianza / logos ---------------------- */ .whi-partners { background:var(--whi-dark); color:#fff; } .whi-partners .whi-lead { color:rgba(255,255,255,.8); } .whi-logos { display:grid; grid-template-columns:repeat(5, 1fr); gap:14px; max-width:1000px; margin:clamp(38px,5vw,56px) auto 0; } .whi-logos__item { background:#fff; border-radius:9px; aspect-ratio:5 / 2.7; display:flex; align-items:center; justify-content:center; padding:13px 16px; } .whi-logos__item img { max-width:100%; max-height:100%; width:auto; object-fit:contain; } .whi-partners__note { text-align:center; color:rgba(255,255,255,.62); max-width:52ch; margin:clamp(34px,4vw,48px) auto 0; font-size:.98rem; } /* -------------------------- Resultados -------------------------- */ .whi-results { background:linear-gradient(180deg, #eef3fb, #f6f9fd); } .whi-stats { display:grid; grid-template-columns:repeat(3, 1fr); gap:clamp(28px,4vw,56px); max-width:1000px; margin:0 auto; } .whi-stat { display:flex; flex-direction:column; align-items:center; text-align:center; } .whi-stat__icon { width:64px; height:64px; border-radius:50%; background:#fff; box-shadow:0 14px 26px -16px rgba(16,40,80,.5); display:flex; align-items:center; justify-content:center; color:var(--whi-blue); margin-bottom:22px; } .whi-stat__icon .whi-icon { width:28px; height:28px; } .whi-stat__num { font-family:var(--whi-serif); font-weight:800; color:var(--whi-blue); font-size:clamp(2.2rem,4.4vw,3.1rem); line-height:1.05; white-space:nowrap; } .whi-stat__bar { width:34px; height:3px; background:var(--whi-accent); border-radius:2px; margin:16px 0 18px; } .whi-stat__label { color:var(--whi-navy); font-weight:600; font-size:1.02rem; margin:0 0 12px; max-width:24ch; } .whi-stat__desc { color:var(--whi-ink); font-size:.88rem; margin:0; max-width:28ch; } /* -------------------------- Testimonios ------------------------- */ .whi-testi__grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; } .whi-quote { position:relative; background:#fff; border:1px solid var(--whi-line); border-radius:16px; padding:26px 26px 24px; box-shadow:var(--whi-shadow); margin:0; overflow:hidden; } .whi-quote__top { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; } .whi-quote__avatar { width:58px; height:58px; border-radius:50%; object-fit:cover; } .whi-quote__mark { color:var(--whi-accent); } .whi-quote__mark .whi-icon { width:36px; height:36px; } .whi-quote__text { font-size:1.0rem; color:var(--whi-navy); line-height:1.62; margin:0 0 22px; } .whi-quote__foot { display:flex; flex-direction:column; gap:2px; } .whi-quote__name { color:var(--whi-blue); font-weight:700; } .whi-quote__role, .whi-quote__place { font-size:.84rem; color:var(--whi-ink-soft); line-height:1.45; } .whi-quote__icon { position:absolute; right:16px; bottom:12px; color:rgba(95,134,196,.16); } .whi-quote__icon .whi-icon { width:42px; height:42px; } /* --------------------------- CTA final -------------------------- */ .whi-cta { position:relative; background:var(--whi-dark); color:#fff; overflow:hidden; padding:clamp(62px,8vw,104px) 0 clamp(36px,4vw,56px); } .whi-cta__media { position:absolute; inset:0 0 0 auto; width:46%; background-size:cover; background-position:center top; } .whi-cta__media::before { content:''; position:absolute; inset:0; background:linear-gradient(90deg, var(--whi-dark) 4%, rgba(12,34,64,.4) 38%, rgba(12,34,64,0) 62%); } .whi-cta__inner { position:relative; z-index:2; } .whi-cta__content { max-width:600px; } .whi-cta__title { font-size:clamp(2rem,3.9vw,3.1rem); color:#fff; margin:0 0 22px; } .whi-cta__text { color:rgba(255,255,255,.86); font-size:1.08rem; line-height:1.7; max-width:48ch; margin:0; } .whi-cta__note { display:flex; gap:14px; align-items:flex-start; margin:28px 0; max-width:46ch; } .whi-cta__noteicon { flex:0 0 auto; width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,255,255,.25); display:flex; align-items:center; justify-content:center; color:var(--whi-accent); } .whi-cta__noteicon .whi-icon { width:22px; height:22px; } .whi-cta__note p { margin:0; color:rgba(255,255,255,.8); font-size:.95rem; line-height:1.6; } .whi-cta__strip { position:relative; z-index:2; display:grid; grid-template-columns:repeat(4, 1fr); gap:20px; margin-top:clamp(48px,6vw,84px); border-top:1px solid rgba(255,255,255,.13); padding-top:28px; } .whi-cta__pill { display:flex; flex-direction:column; gap:3px; } .whi-cta__pillicon { color:var(--whi-accent); margin-bottom:6px; } .whi-cta__pillicon .whi-icon { width:24px; height:24px; } .whi-cta__pilltitle { font-weight:700; font-size:.8rem; letter-spacing:.07em; color:#fff; } .whi-cta__pilltext { font-size:.82rem; color:rgba(255,255,255,.62); } /* ---------------------------- Footer ---------------------------- */ .whi-footer { background:var(--whi-darker); color:rgba(255,255,255,.74); } .whi-footer__grid { display:grid; grid-template-columns:1.1fr 1.2fr 1fr; gap:40px; padding:clamp(48px,6vw,72px) 0 clamp(30px,4vw,46px); } .whi-footer__col--mid { text-align:center; display:flex; flex-direction:column; align-items:center; } .whi-footer__col--links { justify-self:end; } .whi-footer__title { color:#fff; font-size:1rem; font-weight:700; margin:0 0 14px; } .whi-footer__subtitle { color:#fff; font-weight:700; margin:16px 0 8px; } .whi-footer__text { font-size:.92rem; line-height:1.6; margin:0; color:rgba(255,255,255,.7); max-width:34ch; } .whi-footer__col--mid .whi-footer__text { max-width:40ch; } .whi-logo--footer img { height:40px; margin:0 0 4px; } .whi-footer__menu { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; } .whi-footer__menu a { color:rgba(255,255,255,.75); text-decoration:none; font-size:.94rem; transition:color .18s; } .whi-footer__menu a:hover { color:#fff; } .whi-footer__bar { border-top:1px solid rgba(255,255,255,.1); padding:18px 0; } .whi-footer__bar p { margin:0; font-size:.84rem; color:rgba(255,255,255,.5); } /* página genérica */ .whi-page { padding:clamp(40px,6vw,80px) 0; } .whi-article__head { margin-bottom:24px; } /* -------------------------- Responsive -------------------------- */ @media (max-width:960px) { .whi-nav, .whi-header__cta { display:none; } .whi-burger { display:flex; } } @media (max-width:900px) { .whi-hero__inner { min-height:0; } .whi-hero__media { position:relative; width:100%; height:46vw; min-height:220px; inset:auto; } .whi-hero__media::before { background:linear-gradient(0deg, var(--whi-hero-bg) 4%, rgba(246,247,249,0) 70%); } .whi-hero__content { max-width:none; padding-top:26px; } .whi-cuidado__grid { grid-template-columns:1fr; } .whi-inv__media { position:relative; width:100%; height:46vw; min-height:200px; } .whi-inv__media::after { background:linear-gradient(0deg, #fff 5%, rgba(255,255,255,0) 65%); } .whi-inv__inner { justify-content:flex-start; } .whi-inv__content { width:100%; min-width:0; } .whi-framed::before { inset:-12px 12px 12px -12px; } .whi-pillars { grid-template-columns:1fr; gap:34px; } .whi-pillars__center { order:-1; } .whi-pillars__col:first-child .whi-pillar { text-align:left; align-items:flex-start; } .whi-pillars__col:first-child .whi-pillar__num { flex-direction:row; } .whi-pillars__col:first-child .whi-pillar__num::before { margin:0 9px 0 0; } .whi-cta__media { position:relative; width:100%; height:42vw; min-height:200px; inset:auto; } .whi-cta__media::before { background:linear-gradient(0deg, var(--whi-dark) 6%, rgba(12,34,64,0) 70%); } .whi-cta__content { max-width:none; padding-top:28px; } .whi-footer__grid { grid-template-columns:1fr 1fr; gap:32px; } .whi-footer__col--mid { grid-column:1 / -1; order:-1; } .whi-footer__col--links { justify-self:start; } } @media (max-width:720px) { body { font-size:16px; } .whi-logos { grid-template-columns:repeat(3, 1fr); } .whi-stats { grid-template-columns:1fr; gap:40px; } .whi-testi__grid { grid-template-columns:1fr; } .whi-cta__strip { grid-template-columns:repeat(2, 1fr); gap:24px 20px; } .whi-footer__grid { grid-template-columns:1fr; } .whi-footer__col--links { justify-self:start; } } @media (max-width:460px) { .whi-logos { grid-template-columns:repeat(2, 1fr); } .whi-hero__actions .whi-btn { flex:1 1 auto; justify-content:center; } } @media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } * { transition:none !important; } } /* ========================================================================= PÁGINAS INTERNAS (stories, contacto, skillzu) — mismo sistema de diseño ========================================================================= */ .whi-section--soft { background:var(--whi-soft); } /* ---- Cabecera de página interna (page hero) ---- */ .whi-phero { position:relative; background:var(--whi-hero-bg); overflow:hidden; padding:clamp(40px,5vw,68px) 0 clamp(36px,5vw,60px); } .whi-phero__media { position:absolute; inset:0 0 0 auto; width:52%; background-size:cover; background-position:center; } .whi-phero__media::before { content:''; position:absolute; inset:0; background:linear-gradient(90deg, var(--whi-hero-bg) 3%, rgba(246,247,249,.55) 28%, rgba(246,247,249,0) 52%); } .whi-phero__inner { position:relative; z-index:2; display:flex; align-items:center; min-height:min(72vh, 600px); } .whi-phero__copy { max-width:620px; } .whi-phero.no-image .whi-phero__copy { max-width:820px; margin:0 auto; text-align:center; } .whi-phero.no-image .whi-phero__actions { justify-content:center; } .whi-phero__title { font-size:clamp(2.3rem,4.8vw,4rem); line-height:1.06; color:var(--whi-navy); margin:14px 0 0; } .whi-phero__lede { font-size:clamp(1.08rem,1.4vw,1.2rem); line-height:1.7; color:var(--whi-ink); margin:22px 0 0; max-width:52ch; } /* Hero a sangre OSCURO (Escuelas/Centros): foto a pantalla completa + texto blanco */ .whi-phero--dark { background:var(--whi-dark); } .whi-phero--dark .whi-phero__media { inset:0; width:100%; } .whi-phero--dark .whi-phero__media::before { background:linear-gradient(90deg, rgba(8,20,38,.92) 0%, rgba(8,20,38,.78) 30%, rgba(8,20,38,.5) 58%, rgba(8,20,38,.28) 100%); } .whi-phero--dark .whi-phero__inner { min-height:min(82vh, 680px); } .whi-phero--dark .whi-eyebrow { color:var(--whi-accent); } .whi-phero--dark .whi-phero__title { color:#fff; } .whi-phero--dark .whi-phero__lede { color:rgba(255,255,255,.86); } .whi-phero--dark .whi-btn--ghost { background:transparent; color:#fff; border-color:rgba(255,255,255,.5); box-shadow:none; } .whi-phero--dark .whi-btn--ghost:hover { border-color:#fff; background:rgba(255,255,255,.08); } .whi-phero.no-image .whi-phero__lede { margin-inline:auto; } .whi-phero__actions { display:flex; flex-wrap:wrap; gap:14px; margin-top:28px; } /* ---- Story row (imagen + texto alterna) ---- */ .whi-story-row__grid { display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(32px,5vw,72px); align-items:center; } .whi-story-row--flip .whi-story-row__media { order:2; } .whi-story-row__media img { width:100%; border-radius:12px; box-shadow:var(--whi-shadow); } .whi-story-row__content .whi-eyebrow { margin-bottom:14px; } .whi-story-row__content .whi-link { margin-top:22px; } /* Cita debajo del texto (p. ej. Medición BHI): más separada y más grande. En dos líneas y con las comillas centradas para que abracen ambas líneas. */ .whi-story-row__quote { display:flex; gap:18px; align-items:center; margin:clamp(32px,5vw,52px) 0 0; } .whi-story-row__qmark { flex:0 0 auto; color:var(--whi-accent); line-height:1; } .whi-story-row__qmark .whi-icon { width:48px; height:48px; } .whi-story-row__quote p { margin:0; font-family:var(--whi-serif); color:var(--whi-blue); font-weight:600; font-size:clamp(1.28rem,2.1vw,1.7rem); line-height:1.4; max-width:40ch; text-wrap:balance; } /* Variante: la foto ocupa toda la altura de la columna de texto (cubre todo) */ .whi-story-row--fill .whi-story-row__grid { align-items:stretch; } .whi-story-row--fill .whi-story-row__media { display:flex; min-height:100%; } .whi-story-row--fill .whi-story-row__media img { width:100%; height:100%; object-fit:cover; min-height:100%; } /* Bloque agrupado: secciones contiguas con un mismo fondo gris suave y separación interna reducida, para que se lean como una unidad continua (p. ej. BHI + sus puntos). */ .whi-group { background:#edeff2; } .whi-section.whi-group--start { padding-bottom:clamp(14px,2.2vw,26px); } .whi-section.whi-group--end { padding-top:clamp(14px,2.2vw,26px); } .whi-section.whi-group--mid { padding-top:clamp(14px,2.2vw,26px); padding-bottom:clamp(14px,2.2vw,26px); } /* ---- Credibility (nombres como chips) ---- */ .whi-cred__list { list-style:none; margin:clamp(34px,4vw,48px) auto 0; padding:0; display:flex; flex-wrap:wrap; gap:12px; justify-content:center; max-width:880px; } .whi-cred__chip { background:#fff; border:1px solid var(--whi-line); border-radius:999px; padding:11px 22px; font-weight:600; color:var(--whi-navy); box-shadow:var(--whi-shadow-sm); } .whi-cred__footnote { margin:clamp(34px,4.5vw,52px) auto 0; max-width:64ch; } /* ---- Impact: citas bajo las cifras ---- */ .whi-stats--2 { grid-template-columns:repeat(2, 1fr); max-width:720px; } .whi-impact-quotes { display:grid; grid-template-columns:1fr 1fr; gap:20px; max-width:900px; margin:clamp(40px,5vw,56px) auto 0; } .whi-impact-quote { display:flex; gap:14px; align-items:flex-start; background:#fff; border:1px solid var(--whi-line); border-radius:14px; padding:22px 24px; box-shadow:var(--whi-shadow-sm); margin:0; } .whi-impact-quote .whi-icon { width:30px; height:30px; color:var(--whi-accent); flex:0 0 auto; } .whi-impact-quote p { margin:0; color:var(--whi-navy); font-size:1rem; line-height:1.55; } /* ---- Cards grid ---- */ .whi-cards__grid { display:grid; gap:20px; } .whi-cards__grid--4 { grid-template-columns:repeat(4, 1fr); } .whi-cards__grid--3 { grid-template-columns:repeat(3, 1fr); } .whi-cards__grid--2 { grid-template-columns:repeat(2, 1fr); } .whi-card { background:#fff; border:1px solid var(--whi-line); border-radius:16px; padding:26px 24px; box-shadow:var(--whi-shadow-sm); } .whi-card__icon { width:52px; height:52px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; margin-bottom:16px; } .whi-card__icon .whi-icon { width:24px; height:24px; } .whi-card--c1 .whi-card__icon { background:#e6f3ec; color:var(--whi-green); } .whi-card--c2 .whi-card__icon { background:#efe9f8; color:var(--whi-purple); } .whi-card--c3 .whi-card__icon { background:#e6effa; color:var(--whi-cyan); } .whi-card--c4 .whi-card__icon { background:#f8eedd; color:var(--whi-orange); } .whi-card__title { font:700 1.12rem/1.3 var(--whi-sans); color:var(--whi-navy); margin:0 0 .4em; } .whi-card__text { font-size:.95rem; color:var(--whi-ink); margin:0; } /* cards variante BANDA: cita + una sola tarjeta lineal con 3 ítems (como el PDF) */ .whi-cards--band .whi-cards__quote { display:flex; gap:16px; align-items:flex-start; max-width:680px; margin:0 0 clamp(22px,3vw,36px); } .whi-cards__qmark { flex:0 0 auto; color:var(--whi-accent); } .whi-cards__qmark .whi-icon { width:38px; height:38px; } .whi-cards__quote p { margin:0; font-family:var(--whi-serif); font-size:clamp(1.1rem,1.7vw,1.4rem); color:var(--whi-navy); line-height:1.4; } .whi-cards__band { display:grid; grid-template-columns:repeat(3, 1fr); background:#fff; border:1px solid var(--whi-line); border-radius:18px; box-shadow:var(--whi-shadow-sm); overflow:hidden; } .whi-cards__bitem { display:flex; gap:16px; align-items:flex-start; padding:clamp(22px,2.4vw,30px); border-left:1px solid var(--whi-line); } .whi-cards__bitem:first-child { border-left:0; } .whi-cards__bicon { flex:0 0 auto; width:46px; height:46px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; } .whi-cards__bicon .whi-icon { width:22px; height:22px; } .whi-cards--band .whi-card--c1 .whi-cards__bicon { background:#e6f3ec; color:var(--whi-green); } .whi-cards--band .whi-card--c2 .whi-cards__bicon { background:#efe9f8; color:var(--whi-purple); } .whi-cards--band .whi-card--c3 .whi-cards__bicon { background:#e6effa; color:var(--whi-cyan); } .whi-cards--band .whi-card--c4 .whi-cards__bicon { background:#f8eedd; color:var(--whi-orange); } .whi-cards__btitle { font:700 1.02rem/1.32 var(--whi-sans); color:var(--whi-navy); margin:0 0 .35em; } .whi-cards__btext { font-size:.9rem; color:var(--whi-ink); margin:0; line-height:1.55; } @media (max-width:780px) { .whi-cards__band { grid-template-columns:1fr; } .whi-cards__bitem { border-left:0; border-top:1px solid var(--whi-line); } .whi-cards__bitem:first-child { border-top:0; } } /* ---- Benefits (4-up compacto) ---- */ .whi-benefits__grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:24px; } .whi-benefit { text-align:left; } .whi-benefit__icon { width:48px; height:48px; border-radius:14px; background:#fff; box-shadow:var(--whi-shadow-sm); display:flex; align-items:center; justify-content:center; color:var(--whi-blue); margin-bottom:14px; } .whi-benefit__icon .whi-icon { width:24px; height:24px; } .whi-benefit__title { font:700 1.08rem/1.3 var(--whi-sans); color:var(--whi-navy); margin:0 0 .35em; } .whi-benefit__text { font-size:.92rem; color:var(--whi-ink); margin:0; } /* ---- Steps (proceso numerado) ---- */ .whi-steps__list { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4, 1fr); gap:28px; counter-reset:whi-step; } .whi-step { position:relative; } .whi-step__num { display:inline-flex; align-items:center; justify-content:center; width:50px; height:50px; border-radius:50%; background:var(--whi-navy); color:#fff; font-family:var(--whi-serif); font-weight:700; font-size:1.25rem; margin-bottom:16px; } .whi-step__title { font:700 1.08rem/1.3 var(--whi-sans); color:var(--whi-navy); margin:0 0 .4em; } .whi-step__text { font-size:.93rem; color:var(--whi-ink); margin:0; } /* ---- Split cards (2 grandes con puntos) ---- */ .whi-split__grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; } .whi-split__card { background:#fff; border:1px solid var(--whi-line); border-radius:18px; padding:clamp(26px,3vw,38px); box-shadow:var(--whi-shadow-sm); } .whi-split__icon { width:56px; height:56px; border-radius:16px; background:var(--whi-soft); color:var(--whi-blue); display:flex; align-items:center; justify-content:center; margin-bottom:18px; } .whi-split__icon .whi-icon { width:26px; height:26px; } .whi-split__title { font:700 1.3rem/1.3 var(--whi-sans); color:var(--whi-navy); margin:0 0 .4em; } .whi-split__text { color:var(--whi-ink); margin:0 0 18px; } .whi-split__points { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; } .whi-split__points li { display:flex; gap:10px; align-items:flex-start; color:var(--whi-navy); font-weight:500; font-size:.96rem; } .whi-split__points .whi-icon { width:20px; height:20px; color:var(--whi-teal); flex:0 0 auto; margin-top:2px; } /* ---- Questions (acordeón) ---- */ .whi-questions { background:var(--whi-soft); } /* rompe con el blanco de la sección anterior */ .whi-questions__list { max-width:840px; margin:0 auto; display:flex; flex-direction:column; gap:12px; } .whi-question { background:#fff; border:1px solid var(--whi-line); border-radius:13px; overflow:hidden; } .whi-question__q { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 22px; cursor:pointer; font-weight:600; color:var(--whi-navy); list-style:none; } .whi-question__q::-webkit-details-marker { display:none; } .whi-question__chev { width:18px; height:18px; color:var(--whi-blue); transition:transform .2s; flex:0 0 auto; } .whi-question[open] .whi-question__chev { transform:rotate(180deg); } .whi-question__a { margin:0; padding:0 22px 20px; color:var(--whi-ink); } /* ---- Team ---- */ .whi-team__grid { display:grid; grid-template-columns:repeat(4, 1fr); column-gap:24px; row-gap:24px; align-items:stretch; } .whi-member { position:relative; display:flex; flex-direction:column; background:#fff; border:1px solid var(--whi-line); border-left:4px solid var(--whi-member-accent, var(--whi-blue)); border-radius:18px; padding:20px; text-align:left; box-shadow:var(--whi-shadow-sm); } .whi-member__head { display:flex; align-items:center; min-height:84px; } .whi-member__top { display:flex; align-items:center; gap:15px; width:100%; } .whi-member__photo { position:relative; flex:0 0 auto; width:84px; height:84px; } .whi-member__photo img { width:100%; height:100%; border-radius:50%; object-fit:cover; } .whi-member__initials { width:100%; height:100%; border-radius:50%; background:var(--whi-soft-2); display:flex; align-items:center; justify-content:center; font-family:var(--whi-serif); font-weight:700; font-size:1.7rem; color:var(--whi-blue); } .whi-member__id { min-width:0; } .whi-member__name { font:700 1.05rem/1.25 var(--whi-sans); color:var(--whi-navy); margin:0; } .whi-member__role { color:var(--whi-blue); font-size:.76rem; font-weight:700; margin:5px 0 0; line-height:1.32; text-transform:uppercase; letter-spacing:.03em; } @media (max-width:980px){ .whi-team__grid { grid-template-columns:repeat(2, 1fr); } } @media (max-width:560px){ .whi-team__grid { grid-template-columns:1fr; } } /* ---- CTA variante story ---- */ .whi-cta--story { padding-bottom:clamp(60px,8vw,104px); } /* Botón del bloque final separado del texto (Centros/Investigación full-bleed). */ .whi-cta--story .whi-cta__content .whi-btn--ghost-light { margin-top:clamp(30px,4vw,48px); } .whi-cta__content .whi-cta__text + .whi-btn--ghost-light { margin-top:clamp(30px,4vw,48px); } /* ---- Contacto ---- */ .whi-contact__grid { display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(32px,5vw,64px); align-items:start; } .whi-contact__copy .whi-eyebrow { margin-bottom:14px; } .whi-contact__routes { list-style:none; margin:26px 0 0; padding:0; display:flex; flex-direction:column; gap:14px; } .whi-contact__routes li { display:flex; align-items:center; gap:12px; color:var(--whi-navy); font-weight:500; } .whi-contact__routes a { color:var(--whi-blue); text-decoration:none; } .whi-contact__routes a:hover { text-decoration:underline; } .whi-contact__icon { width:40px; height:40px; border-radius:50%; background:var(--whi-soft); color:var(--whi-blue); display:flex; align-items:center; justify-content:center; flex:0 0 auto; } .whi-contact__icon .whi-icon { width:20px; height:20px; } .whi-contact__card { background:#fff; border:1px solid var(--whi-line); border-radius:20px; padding:clamp(24px,3vw,34px); box-shadow:var(--whi-shadow); } .whi-contact__cardtitle { font-size:1.5rem; color:var(--whi-navy); margin:6px 0 20px; } /* ---- Formulario ---- */ .whi-form__row { display:grid; grid-template-columns:1fr 1fr; gap:16px; } .whi-field { display:flex; flex-direction:column; gap:6px; margin-bottom:15px; } .whi-field__label { font-size:.85rem; font-weight:600; color:var(--whi-navy); } .whi-form input:not([type="checkbox"]):not([type="radio"]), .whi-form textarea { width:100%; font:inherit; color:var(--whi-navy); background:#fbfcfe; border:1px solid var(--whi-line); border-radius:10px; padding:12px 14px; transition:border-color .18s, box-shadow .18s; } .whi-form input:focus, .whi-form textarea:focus { outline:0; border-color:var(--whi-accent); box-shadow:0 0 0 3px rgba(166,200,239,.35); } .whi-check input { width:18px; height:18px; flex:0 0 auto; accent-color:var(--whi-blue); } .whi-form textarea { resize:vertical; min-height:110px; } .whi-check { display:flex; gap:10px; align-items:flex-start; font-size:.88rem; color:var(--whi-ink); margin:6px 0 18px; } .whi-check input { margin-top:3px; } .whi-form .whi-btn { width:100%; justify-content:center; } .whi-form__note { font-size:.82rem; color:var(--whi-ink-soft); margin:12px 0 0; text-align:center; } .whi-hp { position:absolute !important; left:-9999px; width:1px; height:1px; overflow:hidden; } .whi-notice { padding:13px 18px; border-radius:10px; margin:0 0 18px; font-weight:500; font-size:.95rem; } .whi-notice--ok { background:#e6f4ec; color:#1f7a44; border:1px solid #bfe3cd; } .whi-notice--error { background:#fdecec; color:#b13b3b; border:1px solid #f3c9c9; } /* Aviso de «mensaje enviado» a pantalla completa (con reenvío a Noticias) */ .whi-thanks { position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; padding:24px; background:rgba(8,24,52,.72); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); animation:whi-fade .3s ease; } .whi-thanks__card { background:#fff; border-radius:20px; padding:clamp(32px,5vw,52px); max-width:440px; text-align:center; box-shadow:0 30px 80px -30px rgba(0,0,0,.5); } .whi-thanks__icon { display:inline-flex; align-items:center; justify-content:center; width:64px; height:64px; border-radius:50%; background:#e6f4ec; color:#1f7a44; margin-bottom:18px; } .whi-thanks__icon .whi-icon { width:32px; height:32px; stroke-width:2.4; } .whi-thanks__title { font-size:1.6rem; color:var(--whi-navy); margin:0 0 10px; } .whi-thanks__text { color:var(--whi-ink); margin:0 0 18px; } .whi-thanks .whi-link { justify-content:center; } @keyframes whi-fade { from { opacity:0; } to { opacity:1; } } /* ---- SkillzU ---- */ .whi-skillzu__grid { display:grid; grid-template-columns:1.3fr .7fr; gap:40px; align-items:start; } .whi-skillzu__grid.is-empty { grid-template-columns:1fr; max-width:640px; margin:0 auto; } .whi-skillzu__form { position:sticky; top:calc(var(--whi-header-h) + 16px); } /* ---- Contenido editorial (the_content) ---- */ .whi-entry { color:var(--whi-ink); font-size:1.05rem; line-height:1.75; } .whi-entry > *:first-child { margin-top:0; } .whi-entry h2 { font-family:var(--whi-serif); font-weight:700; color:var(--whi-navy); font-size:1.7rem; margin:1.4em 0 .5em; } .whi-entry h3 { font-family:var(--whi-serif); font-weight:700; color:var(--whi-navy); font-size:1.32rem; margin:1.3em 0 .5em; } .whi-entry p { margin:0 0 1.1em; } .whi-entry a { color:var(--whi-blue); } .whi-entry ul, .whi-entry ol { margin:0 0 1.1em; padding-left:1.3em; } .whi-entry li { margin-bottom:.5em; } .whi-entry img { border-radius:12px; } .whi-entry blockquote { margin:1.4em 0; padding:14px 22px; border-left:4px solid var(--whi-accent); background:var(--whi-soft); border-radius:0 10px 10px 0; color:var(--whi-navy); } .whi-page__inner { max-width:760px; margin:0 auto; } .whi-page__head { margin-bottom:24px; } /* ---- Blog: cabecera con temas ---- */ .whi-phero--archive { padding-bottom:clamp(24px,3vw,40px); } .whi-bloghero { display:grid; grid-template-columns:1.5fr 1fr; gap:clamp(28px,4vw,56px); align-items:center; } .whi-bloghero .whi-phero__lede { margin:20px 0 0; max-width:48ch; } .whi-bloghero__pills { background:#fff; border:1px solid var(--whi-line); border-radius:16px; padding:22px 24px; box-shadow:var(--whi-shadow-sm); } .whi-bloghero__pills .whi-eyebrow { display:block; margin-bottom:14px; } .whi-pills { display:flex; flex-wrap:wrap; gap:9px; } .whi-pill { background:var(--whi-soft); border:1px solid var(--whi-line); border-radius:999px; padding:7px 15px; color:var(--whi-navy); font-weight:600; font-size:.84rem; text-decoration:none; transition:border-color .18s, color .18s; } .whi-pill:hover { border-color:var(--whi-accent); color:var(--whi-blue); } /* cabecera del blog con imagen de fondo */ .whi-phero--blog.has-bg { background-image:var(--whi-blog-bg); background-size:cover; background-position:center; } .whi-phero--blog.has-bg::before { content:''; position:absolute; inset:0; z-index:0; background:linear-gradient(108deg, rgba(8,24,52,.93) 28%, rgba(8,24,52,.74) 64%, rgba(8,24,52,.55)); } .whi-phero--blog.has-bg .whi-bloghero { position:relative; z-index:1; } .whi-phero--blog.has-bg .whi-bloghero__copy .whi-eyebrow { color:var(--whi-accent); } .whi-phero--blog.has-bg .whi-phero__title { color:#fff; } .whi-phero--blog.has-bg .whi-phero__lede { color:rgba(255,255,255,.86); } /* ---- Blog: tarjetas (estilo recurso, botón al pasar por encima) ---- */ .whi-rgrid { display:grid; grid-template-columns:repeat(3, 1fr); gap:26px; } .whi-rcard { background:#fff; border:1px solid var(--whi-line); border-radius:16px; overflow:hidden; box-shadow:var(--whi-shadow-sm); transition:transform .18s, box-shadow .18s; } .whi-rcard:hover { transform:translateY(-3px); box-shadow:var(--whi-shadow); } .whi-rcard__link { display:flex; flex-direction:column; height:100%; text-decoration:none; color:inherit; } .whi-rcard__media { position:relative; display:block; aspect-ratio:16 / 10; background:var(--whi-soft); overflow:hidden; } .whi-rcard__media img { width:100%; height:100%; object-fit:cover; transition:transform .35s ease; } .whi-rcard:hover .whi-rcard__media img { transform:scale(1.05); } .whi-rcard__ph { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--whi-accent); } .whi-rcard__ph .whi-icon { width:42px; height:42px; } .whi-rcard__overlay { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:linear-gradient(180deg, rgba(12,34,64,.35), rgba(12,34,64,.62)); opacity:0; transition:opacity .25s ease; } .whi-rcard:hover .whi-rcard__overlay, .whi-rcard__link:focus-visible .whi-rcard__overlay { opacity:1; } .whi-rcard__btn { display:inline-flex; align-items:center; gap:.5em; background:#fff; color:var(--whi-navy); font:600 .92rem/1 var(--whi-sans); padding:.85em 1.5em; border-radius:999px; box-shadow:var(--whi-shadow-sm); transform:translateY(8px); transition:transform .25s ease; } .whi-rcard:hover .whi-rcard__btn { transform:translateY(0); } .whi-rcard__btn .whi-icon { width:17px; height:17px; } .whi-rcard__body { display:flex; flex-direction:column; flex:1; padding:22px 22px 20px; } .whi-rcard__cat { align-self:flex-start; font:700 .7rem/1 var(--whi-sans); letter-spacing:.08em; text-transform:uppercase; color:var(--whi-blue); margin-bottom:12px; } .whi-rcard__title { font:700 1.2rem/1.32 var(--whi-sans); color:var(--whi-navy); margin:0 0 10px; } .whi-rcard:hover .whi-rcard__title { color:var(--whi-blue); } .whi-rcard__excerpt { color:var(--whi-ink); font-size:.95rem; margin:0 0 18px; } .whi-rcard__meta { margin-top:auto; font-size:.82rem; color:var(--whi-ink-soft); } .whi-rcard__dot { margin:0 6px; } /* destacada: imagen y texto en dos columnas, ancho completo */ .whi-rcard--featured { margin-bottom:26px; } .whi-rcard--featured .whi-rcard__link { flex-direction:row; } .whi-rcard--featured .whi-rcard__media { flex:0 0 52%; aspect-ratio:auto; min-height:320px; } .whi-rcard--featured .whi-rcard__body { justify-content:center; padding:clamp(26px,3vw,44px); } .whi-rcard--featured .whi-rcard__title { font-size:clamp(1.5rem,2.4vw,2rem); font-family:var(--whi-serif); } .whi-rcard--featured .whi-rcard__excerpt { font-size:1.02rem; } .whi-blog__search { max-width:540px; margin:0 auto clamp(30px,4vw,44px); } .whi-blog__search .search-form { display:flex; gap:10px; } .whi-blog__search input[type="search"] { flex:1; font:inherit; background:#fbfcfe; border:1px solid var(--whi-line); border-radius:10px; padding:12px 14px; } .whi-blog__search input[type="search"]:focus { outline:0; border-color:var(--whi-accent); box-shadow:0 0 0 3px rgba(166,200,239,.35); } /* ---- Blog: entrada individual (artículo + barra lateral fija) ---- */ .whi-newslayout { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:clamp(32px,4vw,56px); align-items:start; padding:clamp(30px,4vw,52px) 0 clamp(40px,5vw,64px); } .whi-newsmain { min-width:0; } .whi-single__head--news { text-align:left; background:transparent; padding:0 0 clamp(20px,3vw,28px); } .whi-single__head--news .whi-eyebrow { display:inline-block; color:var(--whi-blue); text-decoration:none; margin-bottom:14px; } .whi-single__title { font-size:clamp(1.9rem,3.4vw,2.85rem); color:var(--whi-navy); margin:0; line-height:1.12; } .whi-single__head--news .whi-meta { justify-content:flex-start; } .whi-single__lede { font-size:1.1rem; line-height:1.6; color:var(--whi-ink); margin:18px 0 0; } .whi-meta { display:flex; flex-wrap:wrap; gap:16px; align-items:center; margin-top:16px; font-size:.88rem; color:var(--whi-ink-soft); } .whi-single__media { margin:0 0 clamp(26px,3vw,38px); border-radius:14px; overflow:hidden; } .whi-single__media img { width:100%; display:block; } .whi-single__body { max-width:none; } .whi-tags { margin-top:32px; display:flex; flex-wrap:wrap; gap:8px; } .whi-tags a { background:var(--whi-soft); border-radius:999px; padding:6px 14px; font-size:.82rem; color:var(--whi-navy); text-decoration:none; } .whi-tags a:hover { background:var(--whi-soft-2); } .whi-postnav { padding:28px 0 0; margin-top:28px; border-top:1px solid var(--whi-line); display:flex; justify-content:space-between; gap:24px; } .whi-postnav a { color:var(--whi-blue); text-decoration:none; font-weight:600; } .whi-postnav__next { text-align:right; margin-left:auto; } .whi-comments { margin-top:36px; } /* barra lateral */ .whi-newsside { display:flex; flex-direction:column; gap:20px; } .whi-sidecard { background:#fff; border:1px solid var(--whi-line); border-radius:16px; padding:24px; box-shadow:var(--whi-shadow-sm); } .whi-sidecard .whi-eyebrow { display:block; margin-bottom:14px; } .whi-facts { margin:0; display:flex; flex-direction:column; gap:12px; } .whi-facts > div { display:flex; justify-content:space-between; gap:14px; border-bottom:1px solid var(--whi-line); padding-bottom:12px; } .whi-facts > div:last-child { border-bottom:0; padding-bottom:0; } .whi-facts dt { color:var(--whi-ink-soft); font-size:.84rem; margin:0; } .whi-facts dd { color:var(--whi-navy); font-weight:600; font-size:.9rem; margin:0; text-align:right; } .whi-sidesticky { position:sticky; top:calc(var(--whi-header-h) + 16px); display:flex; flex-direction:column; gap:20px; } .whi-sidecard__title { font-size:1.3rem; color:var(--whi-navy); margin:6px 0 10px; line-height:1.2; } .whi-sidecard__text { color:var(--whi-ink); font-size:.92rem; margin:0 0 16px; } .whi-form--compact .whi-field { margin-bottom:12px; } .whi-form--compact .whi-check { margin:4px 0 14px; font-size:.82rem; } /* ---- Paginación ---- */ .whi-blog .navigation.pagination, .whi-blog .pagination { margin-top:clamp(36px,5vw,56px); } .whi-blog .nav-links { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; } .whi-blog .page-numbers { display:inline-flex; align-items:center; justify-content:center; min-width:42px; height:42px; padding:0 13px; border:1px solid var(--whi-line); border-radius:10px; color:var(--whi-navy); text-decoration:none; font-weight:600; background:#fff; } .whi-blog .page-numbers.current { background:var(--whi-navy); color:#fff; border-color:var(--whi-navy); } .whi-blog .page-numbers:hover { border-color:var(--whi-accent); } @media (max-width:1000px) { .whi-newslayout { grid-template-columns:1fr; } .whi-newsside { flex-direction:row; flex-wrap:wrap; } .whi-newsside > .whi-sidecard, .whi-sidesticky { flex:1 1 280px; } .whi-sidesticky { position:static; } } @media (max-width:900px) { .whi-bloghero { grid-template-columns:1fr; } .whi-rgrid { grid-template-columns:repeat(2, 1fr); } .whi-rcard--featured .whi-rcard__link { flex-direction:column; } .whi-rcard--featured .whi-rcard__media { flex:auto; aspect-ratio:16 / 10; min-height:0; } } @media (max-width:600px) { .whi-rgrid { grid-template-columns:1fr; } .whi-newsside { flex-direction:column; } .whi-postnav { flex-direction:column; } .whi-postnav__next { text-align:left; margin-left:0; } } /* ========================================================================= INTEGRACIÓN CON PLUGINS WHI ========================================================================= */ /* ---- Formulario del plugin «WHI Contact Form» (clases .whi-contact-inline*) ---- */ .whi-contact-inline-form { display:block; } .whi-contact-inline-form .whi-form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; } .whi-contact-inline-form .whi-form-field { display:flex; flex-direction:column; gap:6px; margin-bottom:15px; } .whi-contact-inline-form .whi-form-field > span { font-size:.85rem; font-weight:600; color:var(--whi-navy); } .whi-contact-inline-form input, .whi-contact-inline-form textarea, .whi-contact-inline-form select { width:100%; font:inherit; color:var(--whi-navy); background:#fbfcfe; border:1px solid var(--whi-line); border-radius:10px; padding:12px 14px; transition:border-color .18s, box-shadow .18s; } .whi-contact-inline-form textarea { resize:vertical; min-height:110px; } .whi-contact-inline-form input:focus, .whi-contact-inline-form textarea:focus, .whi-contact-inline-form select:focus { outline:0; border-color:var(--whi-accent); box-shadow:0 0 0 3px rgba(166,200,239,.35); } .whi-form-required { color:#c0563f; margin-left:2px; } .whi-contact-inline-form .whi-form-check { display:flex; gap:10px; align-items:flex-start; font-size:.88rem; color:var(--whi-ink); margin:6px 0 18px; } .whi-contact-inline-form .whi-form-check input { width:18px; height:18px; flex:0 0 auto; accent-color:var(--whi-blue); } .whi-contact-inline-form .whi-form-check a { color:var(--whi-blue); } .whi-form-hidden { position:absolute !important; left:-9999px; width:1px; height:1px; overflow:hidden; } .whi-contact-inline-form .whi-form-help { font-size:.82rem; color:var(--whi-ink-soft); margin:0 0 14px; } .whi-contact-inline .whi-form-message { padding:13px 18px; border-radius:10px; margin:0 0 18px; font-weight:500; font-size:.95rem; } .whi-contact-inline .whi-form-message-success { background:#e6f4ec; color:#1f7a44; border:1px solid #bfe3cd; } .whi-contact-inline .whi-form-message-error { background:#fdecec; color:#b13b3b; border:1px solid #f3c9c9; } .whi-contact-inline-form .whi-button { display:inline-flex; align-items:center; justify-content:center; gap:.5em; width:100%; cursor:pointer; font:600 .96rem/1 var(--whi-sans); padding:.95em 1.45em; border-radius:9px; border:1.5px solid transparent; background:var(--whi-navy); color:#fff; transition:background .18s, transform .15s; } .whi-contact-inline-form .whi-button:hover { background:#1c3766; transform:translateY(-1px); } .whi-contact-inline-form .whi-button { white-space:normal; line-height:1.25; } /* En la barra lateral o en modo compacto, los campos se apilan (uno por fila) */ .whi-contact-inline-form-compact .whi-form-row, .whi-sidecard .whi-contact-inline-form .whi-form-row, .whi-sidecard .whi-form__row { grid-template-columns:1fr; } /* ---- Selector de idioma del plugin «WHI Language AI Router» ---- */ .whi-header__lang { display:inline-flex; align-items:center; } .whi-lang-switcher { display:inline-flex; align-items:center; gap:5px; font:700 .76rem/1 var(--whi-sans); } .whi-lang-item { color:var(--whi-navy); text-decoration:none; text-transform:uppercase; letter-spacing:.04em; opacity:.62; padding:2px 3px; transition:color .18s, opacity .18s; } .whi-lang-item:hover { color:var(--whi-blue); opacity:1; } .whi-lang-current { color:var(--whi-blue); opacity:1; } .whi-lang-sep { color:var(--whi-ink-soft); opacity:.5; } .whi-mobile__lang { margin-top:16px; } .whi-footer .whi-lang-item { color:rgba(255,255,255,.7); } .whi-footer .whi-lang-item:hover, .whi-footer .whi-lang-current { color:#fff; } /* ---- Responsive páginas internas ---- */ @media (max-width:900px) { .whi-phero__media { position:relative; width:100%; height:44vw; min-height:210px; inset:auto; } .whi-phero__media::before { background:linear-gradient(0deg, var(--whi-hero-bg) 4%, rgba(246,247,249,0) 70%); } .whi-phero__copy { max-width:none; padding-top:24px; } /* el hero oscuro se mantiene a sangre en móvil (foto de fondo + texto encima) */ .whi-phero--dark .whi-phero__media { position:absolute; inset:0; width:100%; height:auto; min-height:0; } .whi-phero--dark .whi-phero__media::before { background:linear-gradient(180deg, rgba(8,20,38,.7) 0%, rgba(8,20,38,.85) 100%); } .whi-phero--dark .whi-phero__copy { padding-top:0; } .whi-story-row__grid { grid-template-columns:1fr; } .whi-story-row--flip .whi-story-row__media { order:-1; } .whi-story-row__media { order:-1; } .whi-cards__grid--4, .whi-benefits__grid { grid-template-columns:repeat(2, 1fr); } .whi-steps__list { grid-template-columns:repeat(2, 1fr); } .whi-split__grid { grid-template-columns:1fr; } .whi-contact__grid, .whi-skillzu__grid { grid-template-columns:1fr; } .whi-skillzu__form { position:static; } } @media (max-width:720px) { .whi-impact-quotes { grid-template-columns:1fr; } .whi-cards__grid--3 { grid-template-columns:1fr; } .whi-form__row { grid-template-columns:1fr; } } @media (max-width:540px) { .whi-cards__grid--4, .whi-benefits__grid, .whi-cards__grid--2 { grid-template-columns:1fr; } .whi-steps__list { grid-template-columns:1fr; gap:18px; } .whi-step { display:flex; gap:16px; align-items:flex-start; } .whi-step__num { margin-bottom:0; width:44px; height:44px; font-size:1.1rem; flex:0 0 auto; } } /* ========================================================================= PORTADA: cada bloque ocupa toda la pantalla (solo en la home) Limitado a .whi-front para no afectar a páginas internas ni al blog. ========================================================================= */ .whi-front .whi-hero, .whi-front .whi-banner, .whi-front .whi-cta, .whi-front .whi-main > .whi-section { min-height:100vh; display:flex; flex-direction:column; justify-content:center; } /* Enganche suave al hacer scroll (solo en la portada y en pantallas grandes) */ @media (min-width:900px) and (prefers-reduced-motion:no-preference) { html:has(.whi-front) { scroll-snap-type:y proximity; scroll-padding-top:var(--whi-header-h); } .whi-front .whi-hero, .whi-front .whi-banner, .whi-front .whi-cta, .whi-front .whi-main > .whi-section { scroll-snap-align:start; } } /* Botón secundario de tipo «subrayado» (p. ej. el 2.º botón del hero) */ .whi-btn--underline { background:transparent; border:0; border-radius:0; box-shadow:none; color:var(--whi-navy); padding:.9em .15em; font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; } .whi-btn--underline span { box-shadow:inset 0 -2px 0 currentColor; padding-bottom:4px; } .whi-btn--underline:hover { transform:none; color:var(--whi-blue); } .whi-btn--underline .whi-icon { width:1.05em; height:1.05em; } /* CTA de la home: márgenes, tamaños y separación como en la referencia */ .whi-front .whi-cta { padding-block:clamp(56px,9vh,110px); } .whi-front .whi-cta__content { max-width:600px; } .whi-front .whi-cta__title { font-size:clamp(2.2rem, 3.6vw, 3.4rem); line-height:1.1; margin:0 0 22px; } .whi-front .whi-cta__text { font-size:clamp(1.05rem, 1.4vw, 1.22rem); line-height:1.65; max-width:44ch; margin:0; } .whi-front .whi-cta__sep { display:block; width:48px; height:2px; background:rgba(255,255,255,.45); margin:clamp(28px,4.5vh,44px) 0; } .whi-front .whi-cta__note { margin:0; max-width:42ch; gap:16px; } .whi-front .whi-cta__note p { font-size:.97rem; line-height:1.6; } .whi-front .whi-cta .whi-btn--ghost-light { margin-top:clamp(28px,4.5vh,44px); font-size:1rem; padding:1.05em 1.8em; } /* Imagen del CTA a sangre completa: se ve casi toda la foto, velo mínimo (sin zonas de azul sólido) */ .whi-front .whi-cta__media { inset:0; width:100%; background-position:center; } .whi-front .whi-cta__media::before { background:linear-gradient(90deg, rgba(10,26,52,.84) 0%, rgba(10,26,52,.66) 26%, rgba(10,26,52,.4) 46%, rgba(10,26,52,.14) 64%, rgba(10,26,52,0) 78%); } .whi-front .whi-cta__title, .whi-front .whi-cta__text, .whi-front .whi-cta__note p { text-shadow:0 1px 18px rgba(8,18,38,.62); } /* (Revertido a petición) La imagen de «Lo que ya estáis sosteniendo» queda CONTENIDA en su bloque, sin invadir el siguiente. Se usa el diseño base (.whi-cuidado). */ /* ============================ SkillzU (página interna) ============================ */ .whi-skillzu { position:relative; background:var(--whi-dark); color:#fff; overflow:hidden; } .whi-skillzu__media { position:absolute; inset:0; background-size:cover; background-position:center; opacity:.16; } .whi-skillzu__media::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(12,34,64,.7), rgba(12,34,64,.9)); } .whi-skillzu__grid { position:relative; display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px,5vw,76px); align-items:center; padding-block:clamp(52px,7vw,104px); } .whi-skillzu__title { font-size:clamp(2rem,3.6vw,3.1rem); line-height:1.08; color:#fff; margin:.35em 0 .5em; } .whi-skillzu__text { color:rgba(255,255,255,.85); font-size:1.05rem; line-height:1.7; margin:0 0 18px; max-width:46ch; } .whi-skillzu__note { color:var(--whi-accent); font-weight:600; font-size:1.02rem; line-height:1.6; margin:0; max-width:44ch; } .whi-skillzu__features { display:flex; flex-direction:column; gap:22px; } .whi-skillzu__feature { display:flex; gap:16px; align-items:flex-start; } .whi-skillzu__ficon { flex:0 0 auto; width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:rgba(166,200,239,.16); color:var(--whi-accent); } .whi-skillzu__ficon .whi-icon { width:24px; height:24px; } .whi-skillzu__ftitle { color:#fff; font-size:1.05rem; margin:0 0 4px; } .whi-skillzu__ftext { color:rgba(255,255,255,.75); font-size:.95rem; line-height:1.6; margin:0; } .whi-skillzu__steps { position:relative; display:flex; flex-wrap:wrap; gap:12px; justify-content:center; padding-bottom:clamp(44px,6vw,84px); } .whi-skillzu__step { display:inline-flex; align-items:center; gap:.55em; padding:.6em 1.1em; border-radius:999px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16); color:#fff; font-weight:600; font-size:.88rem; } .whi-skillzu__sicon { color:var(--whi-accent); display:inline-flex; } .whi-skillzu__sicon .whi-icon { width:18px; height:18px; } @media (max-width:860px) { .whi-skillzu__grid { grid-template-columns:1fr; } } /* ===== SkillzU (Centros): panel foto+marca a la izquierda, 3 tarjetas a la derecha, fila de pasos ===== */ /* SkillzU (v1.9.6, estructura aprobada): la FOTO es el fondo a todo el alto; el velo navy tapa con el color de fondo a partir del ~60%, así la imagen "ocupa el 60%". El texto (izq), las tarjetas (der) y los pasos (abajo) van por encima, con un pequeño marco. */ .whi-suz { background:var(--suz-bg, #eef3f9); padding-block:clamp(16px,3.2vw,44px); } .whi-suz__frame { position:relative; border-radius:30px; overflow:hidden; background:var(--suz-bg, #eef3f9); padding:clamp(16px,1.8vw,26px); display:flex; flex-direction:column; gap:clamp(14px,1.6vw,22px); box-shadow:0 30px 70px -42px rgba(8,18,44,.4); } .whi-suz__veil { position:absolute; inset:0; z-index:0; background:linear-gradient(180deg, rgba(11,26,58,0) 48%, rgba(11,26,58,.45) 80%, rgba(11,26,58,.72) 100%); } .whi-suz__grid { display:grid; grid-template-columns:1.5fr 1fr; gap:clamp(16px,2vw,30px); align-items:stretch; } .whi-suz__panel { position:relative; border-radius:22px; overflow:hidden; background-size:contain; background-position:center top; background-repeat:no-repeat; background-color:#0c1b3c; min-height:clamp(560px,54vw,680px); display:flex; box-shadow:0 24px 54px -34px rgba(8,18,44,.5); } .whi-suz__panelin { position:relative; z-index:1; margin-top:auto; padding:clamp(20px,2.2vw,34px); color:#fff; } .whi-suz__logo { font-size:clamp(2.4rem,4.2vw,3.4rem); line-height:1; margin:0 0 14px; color:#fff; font-weight:700; letter-spacing:-.01em; } .whi-suz__logo span { color:var(--suz-accent, var(--whi-accent)); font-style:italic; font-size:1.12em; } .whi-suz__desc { color:rgba(255,255,255,.95); font-size:1.08rem; line-height:1.62; margin:0 0 18px; max-width:38ch; } .whi-suz__note { color:var(--suz-accent, var(--whi-accent)); font-weight:600; font-size:1.08rem; border-left:3px solid var(--suz-accent, var(--whi-accent)); padding-left:16px; margin:0; line-height:1.55; max-width:44ch; } .whi-suz__cards { display:flex; flex-direction:column; justify-content:center; gap:clamp(12px,1.4vw,18px); } .whi-suz__card { background:#fff; border-radius:16px; padding:clamp(18px,1.8vw,26px); display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:center; box-shadow:0 10px 26px -18px rgba(8,22,52,.28); flex:1; } .whi-suz__cicon { width:86px; height:86px; border-radius:50%; background:#e3edfb; color:var(--whi-blue); display:inline-flex; align-items:center; justify-content:center; } .whi-suz__cicon .whi-icon { width:48px; height:48px; stroke-width:2.15; } .whi-suz__ctitle { font:700 1.06rem/1.28 var(--whi-sans); color:var(--whi-navy); margin:0 0 .35em; } .whi-suz__ctext { color:var(--whi-ink); font-size:.9rem; line-height:1.55; margin:0; } .whi-suz__steps { position:relative; z-index:1; background:#fff; border-radius:16px; padding:clamp(18px,1.9vw,26px) clamp(18px,2vw,30px); display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,2vw,30px); box-shadow:0 10px 26px -18px rgba(8,22,52,.26); } .whi-suz__step { display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:center; } .whi-suz__sicon { width:56px; height:56px; border-radius:50%; background:#eef3fb; color:var(--whi-blue); display:inline-flex; align-items:center; justify-content:center; } .whi-suz__sicon .whi-icon { width:30px; height:30px; stroke-width:2.05; } .whi-suz__step strong { display:block; color:var(--whi-navy); font-size:.98rem; margin-bottom:3px; } .whi-suz__step span { color:var(--whi-ink); font-size:.84rem; line-height:1.45; } @media (max-width:900px){ .whi-suz__grid{ grid-template-columns:1fr; } .whi-suz__panel{ min-height:300px; } .whi-suz__steps{ grid-template-columns:repeat(2,1fr); } } @media (max-width:560px){ .whi-suz__steps{ grid-template-columns:1fr; } } /* ============================ Pestañas (comunidad educativa) ============================ */ .whi-tabsec { background:var(--whi-soft); color:var(--whi-ink); } .whi-tabs { position:relative; } .whi-tabs__radio { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; } /* Barra de pestañas a todo el ancho de la sección (segmentos iguales) */ .whi-tabs__nav { display:flex; flex-wrap:nowrap; gap:0; margin:0 auto clamp(26px,3vw,40px); background:#fff; border:1px solid var(--whi-line); border-radius:14px; overflow:hidden; box-shadow:var(--whi-shadow-sm); } .whi-tabs__tab { flex:1 1 0; display:inline-flex; align-items:center; justify-content:center; gap:.5em; padding:1.05em 1.1em; cursor:pointer; background:#fff; border:0; border-left:1px solid var(--whi-line); color:var(--whi-navy); font-weight:600; font-size:.95rem; text-align:center; transition:background .18s, color .18s; } .whi-tabs__tab:first-child { border-left:0; } .whi-tabs__tab:hover { background:var(--whi-soft); } .whi-tabs__tab .whi-icon { width:18px; height:18px; } /* Un color distinto por pestaña (texto + icono) */ .whi-tabs__nav .whi-tabs__tab:nth-of-type(1) { color:var(--whi-blue); } .whi-tabs__nav .whi-tabs__tab:nth-of-type(2) { color:var(--whi-green); } .whi-tabs__nav .whi-tabs__tab:nth-of-type(3) { color:var(--whi-purple); } .whi-tabs__nav .whi-tabs__tab:nth-of-type(4) { color:var(--whi-teal); } .whi-tabs__panel { display:none; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,56px); align-items:center; background:#fff; border:1px solid var(--whi-line); border-radius:18px; padding:clamp(26px,3.5vw,48px); box-shadow:var(--whi-shadow-sm); } .whi-tabs__ptitle { color:var(--whi-navy); font-size:clamp(1.4rem,2.4vw,2rem); margin:0 0 14px; font-family:var(--whi-serif); } .whi-tabs__ptext p { color:var(--whi-ink); line-height:1.7; margin:0 0 16px; } .whi-tabs__points { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; } .whi-tabs__points li { position:relative; padding-left:26px; color:var(--whi-navy); font-size:.96rem; } .whi-tabs__points li::before { content:''; position:absolute; left:0; top:.45em; width:14px; height:14px; border-radius:50%; background:var(--whi-blue); box-shadow:0 0 0 4px rgba(16,74,157,.14); } .whi-tabs__pmedia img { width:100%; height:100%; max-height:360px; object-fit:cover; border-radius:14px; } /* CSS-only: muestra el panel y resalta la pestaña según el radio activo */ .whi-tabs__radio:nth-of-type(1):checked ~ .whi-tabs__panels .whi-tabs__panel:nth-of-type(1), .whi-tabs__radio:nth-of-type(2):checked ~ .whi-tabs__panels .whi-tabs__panel:nth-of-type(2), .whi-tabs__radio:nth-of-type(3):checked ~ .whi-tabs__panels .whi-tabs__panel:nth-of-type(3), .whi-tabs__radio:nth-of-type(4):checked ~ .whi-tabs__panels .whi-tabs__panel:nth-of-type(4), .whi-tabs__radio:nth-of-type(5):checked ~ .whi-tabs__panels .whi-tabs__panel:nth-of-type(5) { display:grid; } .whi-tabs__radio:nth-of-type(1):checked ~ .whi-tabs__nav .whi-tabs__tab:nth-of-type(1) { background:var(--whi-blue); color:#fff; } .whi-tabs__radio:nth-of-type(2):checked ~ .whi-tabs__nav .whi-tabs__tab:nth-of-type(2) { background:var(--whi-green); color:#fff; } .whi-tabs__radio:nth-of-type(3):checked ~ .whi-tabs__nav .whi-tabs__tab:nth-of-type(3) { background:var(--whi-purple); color:#fff; } .whi-tabs__radio:nth-of-type(4):checked ~ .whi-tabs__nav .whi-tabs__tab:nth-of-type(4) { background:var(--whi-teal); color:#fff; } .whi-tabs__radio:nth-of-type(5):checked ~ .whi-tabs__nav .whi-tabs__tab:nth-of-type(5) { background:var(--whi-navy); color:#fff; } .whi-tabs__radio:focus-visible ~ .whi-tabs__nav .whi-tabs__tab { outline:2px solid var(--whi-accent); outline-offset:-2px; } @media (max-width:780px) { .whi-tabs__panel { grid-template-columns:1fr; } .whi-tabs__pmedia { order:-1; } } @media (max-width:560px) { .whi-tabs__nav { flex-wrap:wrap; } .whi-tabs__tab { flex:1 1 50%; padding:.9em .6em; font-size:.88rem; } .whi-tabs__tab:nth-child(2) { border-left:1px solid var(--whi-line); } .whi-tabs__tab:nth-child(odd) { border-left:0; } } /* ===== statframe (Investigación §2): foto enmarcada + cifras grandes ===== */ .whi-statframe__grid { display:grid; grid-template-columns:minmax(0,1fr) 1.05fr; gap:clamp(32px,5vw,76px); align-items:center; } .whi-statframe__content .whi-eyebrow { margin-bottom:12px; } .whi-statframe__stats { display:flex; flex-direction:column; gap:32px; margin:32px 0; } .whi-statframe__stat { display:grid; grid-template-columns:auto 1fr; gap:22px; align-items:center; } .whi-statframe__num { font-size:clamp(2.6rem,5vw,3.9rem); line-height:1; color:var(--whi-navy); font-weight:700; } .whi-statframe__label { margin:0; color:var(--whi-ink); font-size:1rem; line-height:1.65; max-width:34ch; } .whi-statframe__foot { margin:0; } @media (max-width:820px) { .whi-statframe__grid { grid-template-columns:1fr; } } /* ===== Sobre WHI: palabra destacada, timeline de hitos, cta claro ===== */ .whi-story-row__highlight { font-size:clamp(2.4rem,4.6vw,3.6rem); color:var(--whi-blue); line-height:1.05; margin:18px 0 6px; } .whi-story-row__hsub { color:var(--whi-ink); font-size:.98rem; margin:0; } .whi-timeline { background:var(--whi-soft); } .whi-timeline__row { list-style:none; margin:0; padding:0; display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:12px; position:relative; } .whi-timeline__row::before { content:''; position:absolute; left:8%; right:8%; top:30px; height:2px; background:rgba(20,74,156,.2); z-index:0; } .whi-timeline__item { display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px; position:relative; z-index:1; } .whi-timeline__dot { width:62px; height:62px; border-radius:50%; background:#fff; border:2px solid var(--whi-accent); display:flex; align-items:center; justify-content:center; color:var(--whi-blue); box-shadow:var(--whi-shadow-sm); } .whi-timeline__dot .whi-icon { width:26px; height:26px; } .whi-timeline__label { font-weight:600; font-size:.9rem; color:var(--whi-navy); max-width:15ch; line-height:1.3; } @media (max-width:760px) { .whi-timeline__row { grid-auto-flow:row; grid-template-columns:repeat(2,1fr); gap:26px 12px; } .whi-timeline__row::before { display:none; } } .whi-cta--light { background:var(--whi-soft); color:var(--whi-navy); } .whi-cta--light .whi-cta__title { color:var(--whi-navy); } .whi-cta--light .whi-cta__title .whi-hl { color:var(--whi-blue); } .whi-cta--light .whi-cta__text { color:var(--whi-ink); } .whi-cta--light .whi-cta__note p { color:var(--whi-ink); } .whi-cta--light .whi-cta__media::before { display:none; } /* foto limpia, sin velo oscuro */ .whi-cta--light .whi-btn--ghost-light { background:var(--whi-navy); color:#fff; border-color:var(--whi-navy); box-shadow:var(--whi-shadow-sm); } .whi-cta--light .whi-btn--ghost-light:hover { background:var(--whi-blue); color:#fff; border-color:var(--whi-blue); } /* Sin foto → contenido centrado (p. ej. Sobre WHI). Con foto → texto izq. + foto der. */ .whi-cta--light:not(:has(.whi-cta__media)) .whi-cta__inner { justify-content:center; } .whi-cta--light:not(:has(.whi-cta__media)) .whi-cta__content { max-width:1040px; margin:0 auto; text-align:center; } /* Variante centrada (Sobre WHI): más aire entre frases, texto secundario centrado y botón separado. */ .whi-cta--light:not(:has(.whi-cta__media)) .whi-cta__title { line-height:1.22; margin-bottom:clamp(20px,3vw,34px); } .whi-cta--light:not(:has(.whi-cta__media)) .whi-cta__text { margin-left:auto; margin-right:auto; } .whi-cta--light:not(:has(.whi-cta__media)) .whi-btn--ghost-light { margin-top:clamp(28px,3.6vw,44px); } /* CTA inmersivo a sangre (foto completa + texto centrado, p. ej. Investigación) */ .whi-cta--full .whi-cta__media { inset:0; width:100%; background-position:center; } .whi-cta--full .whi-cta__media::before { background:linear-gradient(180deg, rgba(8,22,52,.5) 0%, rgba(8,22,52,.62) 60%, rgba(8,22,52,.72) 100%); } .whi-cta--full .whi-cta__inner { justify-content:center; } .whi-cta--full .whi-cta__content { max-width:780px; margin:0 auto; text-align:center; } .whi-cta--full .whi-cta__title { color:#fff; } .whi-cta--full .whi-cta__text { color:rgba(255,255,255,.9); margin-left:auto; margin-right:auto; } /* statement (banner) alineado a la izquierda, foto visible a la derecha (Investigación) */ .whi-banner--left { text-align:left; } .whi-banner--left .whi-banner__overlay { background:linear-gradient(90deg, rgba(8,24,52,.84) 0%, rgba(8,24,52,.62) 46%, rgba(8,24,52,.3) 100%); } .whi-banner--left .whi-banner__title { margin:0; max-width:24ch; } .whi-banner--left .whi-banner__text { margin:18px 0 0; max-width:56ch; } /* ===== Feature inmersivo a sangre (Sobre WHI §4/§5) ===== */ .whi-feature { display:grid; grid-template-columns:1fr 1fr; min-height:min(88vh,760px); background:var(--whi-soft); position:relative; overflow:hidden; } .whi-feature__media { grid-column:2; grid-row:1; background-size:cover; background-position:center; position:relative; } .whi-feature__media::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg, var(--whi-soft) 0%, rgba(241,245,250,.5) 13%, rgba(241,245,250,0) 40%); } .whi-feature__panel { grid-column:1; grid-row:1; display:flex; align-items:center; padding:clamp(40px,6vw,96px) clamp(28px,5vw,72px); } .whi-feature__copy { max-width:620px; margin-left:auto; } .whi-feature--flip .whi-feature__media { grid-column:1; } .whi-feature--flip .whi-feature__media::after { background:linear-gradient(270deg, var(--whi-soft) 0%, rgba(241,245,250,.5) 13%, rgba(241,245,250,0) 40%); } .whi-feature--flip .whi-feature__panel { grid-column:2; } .whi-feature--flip .whi-feature__copy { margin-left:0; margin-right:auto; } .whi-feature__eyebrow { display:inline-block; font-weight:700; font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--whi-blue); border-bottom:2px solid var(--whi-accent); padding-bottom:6px; margin-bottom:22px; } .whi-feature__title { font-size:clamp(1.9rem,3.3vw,3rem); line-height:1.12; color:var(--whi-navy); margin:0 0 18px; } .whi-feature__title .whi-hl { color:var(--whi-blue); } .whi-feature__text { color:var(--whi-ink); font-size:1.02rem; line-height:1.7; margin:0 0 15px; max-width:58ch; } .whi-feature__highlight { font-size:clamp(2.6rem,5vw,4.2rem); line-height:1; color:var(--whi-navy); margin:26px 0 8px; } .whi-feature__hsub { color:var(--whi-ink); font-size:.95rem; margin:0; } .whi-feature__timeline { margin-top:36px; } .whi-feature__timeline .whi-timeline__dot { width:46px; height:46px; } .whi-feature__timeline .whi-timeline__dot .whi-icon { width:20px; height:20px; } .whi-feature__timeline .whi-timeline__label { font-size:.74rem; max-width:11ch; } .whi-feature__timeline.whi-timeline__row::before { top:23px; } @media (max-width:860px) { .whi-feature { grid-template-columns:1fr; } .whi-feature__media { grid-column:1 !important; min-height:48vw; } .whi-feature__panel { grid-column:1 !important; } .whi-feature__media::after { background:linear-gradient(0deg, var(--whi-soft) 2%, rgba(241,245,250,0) 60%) !important; } .whi-feature__copy { margin:0 !important; max-width:none; } } /* ===== §2 reconocimiento: frases con icono + nota con escudo (Centros) ===== */ .whi-statement--icon { background:transparent; border:0; border-left:0; box-shadow:none; border-radius:0; border-bottom:0; padding:11px 2px; display:flex; gap:14px; align-items:flex-start; } .whi-statement--icon .whi-statement__text { max-width:46ch; } .whi-statement__icon { flex:0 0 auto; width:38px; height:38px; border-radius:50%; background:#e6effa; color:var(--whi-blue); display:flex; align-items:center; justify-content:center; } .whi-statement__icon .whi-icon { width:20px; height:20px; } .whi-statement__text { color:var(--whi-navy); font-size:1rem; line-height:1.5; } .whi-statement__text strong { font-weight:700; color:var(--whi-navy); } .whi-statements__closing { margin-top:22px; } .whi-statement-note { display:flex; gap:14px; align-items:flex-start; margin-top:22px; padding:18px 20px; background:var(--whi-soft); border-radius:14px; border:1px solid var(--whi-line); } .whi-statement-note__icon { flex:0 0 auto; width:40px; height:40px; border-radius:50%; background:#fff; color:var(--whi-blue); display:flex; align-items:center; justify-content:center; box-shadow:var(--whi-shadow-sm); } .whi-statement-note__icon .whi-icon { width:22px; height:22px; } .whi-statement-note p { margin:0; color:var(--whi-ink); font-size:.97rem; line-height:1.6; } /* tarjetas con icono azul uniforme (Centros §4) */ .whi-cards--uni .whi-card__icon { background:#e6effa; color:var(--whi-blue); } /* resaltado azul medio sobre fondo claro (no el accent pálido) */ .whi-cuidado .whi-hl, .whi-statement-note .whi-hl { color:var(--whi-blue); font-weight:600; } /* Banner + tarjetas solapadas (Centros §3 → §4): las tarjetas suben y flotan sobre la foto */ .whi-banner--overlap { padding-bottom: clamp(175px, 19vw, 255px); } .whi-cards--overlap { margin-top: calc(-1 * clamp(125px, 14vw, 190px)); position:relative; z-index:3; padding-top:0; background:transparent; } @media (max-width:760px) { .whi-banner--overlap { padding-bottom: clamp(120px, 32vw, 185px); } .whi-cards--overlap { margin-top: calc(-1 * clamp(72px, 17vw, 125px)); } } /* Centros §3: banner más alto y más azul; títulos/subtítulo respetan sus saltos */ .whi-banner--overlap { padding-top: clamp(98px, 13vw, 180px); } .whi-banner--overlap .whi-banner__overlay { background: linear-gradient(180deg, rgba(22,78,160,.58), rgba(16,58,124,.72)); } .whi-banner--overlap .whi-banner__title { max-width: none; } .whi-banner--overlap .whi-banner__text { max-width: 72ch; } /* Centros §4: tarjetas más grandes */ .whi-cards--overlap .whi-card { padding: 32px 28px; } .whi-cards--overlap .whi-card__icon { width: 56px; height: 56px; margin-bottom: 18px; } .whi-cards--overlap .whi-card__title { font-size: 1.16rem; margin-bottom: .5em; } .whi-cards--overlap .whi-card__text { font-size: .97rem; line-height: 1.62; } /* Centros §2: la foto enmarcada cubre TODO el alto de la columna (como el modelo) */ .whi-cuidado--fill .whi-cuidado__grid { align-items: stretch; } .whi-cuidado--fill .whi-cuidado__media { display: flex; } .whi-cuidado--fill .whi-framed { height: 100%; width: 100%; } .whi-cuidado--fill .whi-framed img { height: 100%; width: 100%; object-fit: cover; } /* ===== Centros: banner+tarjetas en UNA sección (foto azulada que rellena todo) ===== */ .whi-bannerfull { display:block; width:100%; background:#e9eff6; font-size:0; } .whi-bannerfull img { display:block; width:100%; height:auto; } .whi-bannercards { position:relative; isolation:isolate; background-size:cover; background-position:center; padding: clamp(64px,8vw,104px) 0 clamp(56px,7vw,90px); } .whi-bannercards__tint { position:absolute; inset:0; z-index:0; background:linear-gradient(180deg, rgba(9,20,38,.74) 0%, rgba(9,20,38,.5) 34%, rgba(9,20,38,0) 62%); } .whi-bannercards .whi-container { position:relative; z-index:1; } .whi-bannercards__head { text-align:center; color:#fff; max-width:54rem; margin:0 auto; } .whi-bannercards__eyebrow { color:var(--whi-accent); } .whi-bannercards__title { color:#fff; font-size:clamp(2rem,3.8vw,3.1rem); line-height:1.16; margin:14px 0 0; } .whi-bannercards__text { color:rgba(255,255,255,.92); margin:18px auto 0; max-width:70ch; font-size:1.05rem; line-height:1.6; } .whi-bannercards__grid { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:clamp(40px,5vw,64px); } .whi-bannercards__card { background:#fff; border-radius:16px; padding:32px 26px; box-shadow:0 28px 55px -22px rgba(8,22,52,.55); } .whi-bannercards__icon { width:54px; height:54px; border-radius:50%; background:#e6effa; color:var(--whi-blue); display:inline-flex; align-items:center; justify-content:center; margin-bottom:18px; } .whi-bannercards__icon .whi-icon { width:26px; height:26px; } .whi-bannercards__ctitle { font:700 1.16rem/1.3 var(--whi-sans); color:var(--whi-navy); margin:0 0 .5em; } .whi-bannercards__ctext { font-size:.97rem; line-height:1.62; color:var(--whi-ink); margin:0; } @media (max-width:980px){ .whi-bannercards__grid{ grid-template-columns:repeat(2,1fr); } } @media (max-width:560px){ .whi-bannercards__grid{ grid-template-columns:1fr; } } /* ============================================================ Feedback alçada (2026-06-29): blocs d'imatge més alts a Investigació/Sobre i bloc final a pantalla completa. ============================================================ */ /* Banners/statements a sangre: més alçada (massa estrets abans) */ .whi-banner { min-height:clamp(460px, 60vh, 720px); display:grid; align-content:center; } /* Variante a toda pantalla: una única frase destacada por scroll (Investigación, Sobre WHI). */ .whi-banner--screen { min-height:100vh; } .whi-banner--left { align-content:center; } /* Imatge emmarcada del statframe ("canvi de la pregunta"): més alta */ .whi-statframe__media .whi-framed img { width:100%; height:100%; min-height:clamp(360px,44vh,540px); object-fit:cover; } /* Bloc final de pàgina: ocupa tota la vertical de la pantalla */ .whi-cta--story { min-height:100vh; display:flex; flex-direction:column; justify-content:center; } /* ===== Equipo: filigrana interactiva (preguntas que revelan la respuesta sobre la foto) ===== */ .whi-member__reveal { position:absolute; inset:0; border-radius:14px; display:flex; align-items:center; justify-content:center; text-align:center; padding:16px; background:linear-gradient(180deg, rgba(34,96,182,.95) 0%, rgba(22,78,162,.97) 100%); color:#fff; opacity:0; transform:translateY(6px); pointer-events:none; transition:opacity .26s ease, transform .26s ease; } .whi-member__reveal p { margin:0; font-size:.9rem; line-height:1.42; color:#fff; } .whi-member:has(.whi-member__q--learn:hover) .whi-member__reveal--learn, .whi-member:has(.whi-member__q--learn:focus-visible) .whi-member__reveal--learn, .whi-member:has(.whi-member__q--ind:hover) .whi-member__reveal--ind, .whi-member:has(.whi-member__q--ind:focus-visible) .whi-member__reveal--ind { opacity:1; transform:none; } .whi-member__qs { display:flex; flex-direction:column; gap:9px; margin-top:auto; padding-top:16px; } .whi-member__q { display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; text-align:left; cursor:pointer; background:#eef3fb; border:1px solid var(--whi-line); border-radius:11px; padding:10px 13px; font:700 .66rem/1.25 var(--whi-sans); letter-spacing:.04em; text-transform:uppercase; color:var(--whi-blue); transition:background .18s, color .18s, border-color .18s, box-shadow .18s; } .whi-member__q:hover, .whi-member__q:focus-visible { background:var(--whi-blue); color:#fff; border-color:var(--whi-blue); box-shadow:0 10px 22px -12px rgba(16,74,157,.55); outline:none; } .whi-member__qico { flex:0 0 auto; width:18px; height:18px; border-radius:50%; padding:2px; background:rgba(16,74,157,.12); transition:transform .2s, background .18s; } .whi-member__q:hover .whi-member__qico, .whi-member__q:focus-visible .whi-member__qico { background:rgba(255,255,255,.22); transform:rotate(90deg); } /* ===== Feature a TODO el ancho (Sobre WHI bloques 3 y 4): imagen de fondo full-width + texto superpuesto ===== */ .whi-feature--wide { position:relative; display:flex; align-items:center; min-height:100vh; } .whi-feature--wide .whi-feature__media { position:absolute; inset:0; grid-column:auto; grid-row:auto; } .whi-feature--wide .whi-feature__media::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg, rgba(8,18,40,.9) 0%, rgba(8,18,40,.66) 34%, rgba(8,18,40,.22) 60%, rgba(8,18,40,0) 100%); } .whi-feature--wide.whi-feature--flip .whi-feature__media::after { background:linear-gradient(270deg, rgba(8,18,40,.9) 0%, rgba(8,18,40,.66) 34%, rgba(8,18,40,.22) 60%, rgba(8,18,40,0) 100%); } .whi-feature--wide .whi-feature__panel { position:relative; z-index:1; grid-column:auto; width:100%; padding:clamp(34px,5vw,72px) clamp(24px,6vw,90px); } .whi-feature--wide .whi-feature__copy { max-width:560px; margin:0; } .whi-feature--wide.whi-feature--flip .whi-feature__copy { margin-left:auto; } .whi-feature--wide .whi-feature__eyebrow { color:var(--whi-accent); border-bottom-color:rgba(166,200,239,.55); } .whi-feature--wide .whi-feature__title { color:#fff; } .whi-feature--wide .whi-feature__title .whi-hl { color:var(--whi-accent); } .whi-feature--wide .whi-feature__text { color:rgba(255,255,255,.9); } .whi-feature--wide .whi-feature__highlight { color:#fff; } .whi-feature--wide .whi-feature__hsub { color:rgba(255,255,255,.82); } .whi-feature--wide .whi-timeline__row::before { background:rgba(255,255,255,.25); } .whi-feature--wide .whi-timeline__dot { background:rgba(255,255,255,.14); color:#fff; border-color:rgba(255,255,255,.3); } .whi-feature--wide .whi-timeline__label { color:#fff; } @media (max-width:860px){ .whi-feature--wide .whi-feature__media::after { background:linear-gradient(0deg, rgba(8,18,40,.9) 8%, rgba(8,18,40,.4) 55%, rgba(8,18,40,.2) 100%) !important; } .whi-feature--wide .whi-feature__copy { margin:0 !important; } }