:root{--area-bg:#e8edf0;--area-ink:#07172c;--area-blue:#20395f;--area-muted:#5d6d7d;--area-line:rgba(7,23,44,.12);--area-glass:rgba(255,255,255,.62);--area-white:#f8fafb}
body.area-page,body.area-page .area-main,body.area-page .area-hero,body.area-page .area-intro,body.area-page .area-products,body.area-page .area-story,body.area-page .area-steps,body.area-page .area-audiences,body.area-page .area-cta{background:var(--area-bg);color:var(--area-ink)}
body.area-page .area-shell{width:min(1240px,calc(100% - 48px))}
body.area-page .nav{top:14px;background:transparent;border:0;box-shadow:none}
body.area-page .nav.solid .nav-shell{width:min(1180px,calc(100% - 40px));min-height:72px;margin:auto;padding:7px 10px 7px 20px;border:1px solid rgba(7,23,44,.11);border-radius:999px;background:rgba(255,255,255,.84);box-shadow:0 18px 46px rgba(44,65,83,.1);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
body.area-page .brand{min-width:150px}body.area-page .brand-mark{width:132px;height:54px;object-fit:contain}body.area-page .brand-text{display:none}
body.area-page .nav-links{padding:5px 8px;border-radius:999px;background:rgba(232,237,240,.58)}body.area-page .nav-link{color:var(--area-ink)}body.area-page .nav-actions .button.light{background:var(--area-ink);color:#fff}
.area-back{position:fixed;z-index:80;top:108px;left:22px;display:grid;place-items:center;width:62px;height:62px;padding:0;border:1px solid rgba(7,23,44,.12);border-radius:18px;background:rgba(255,255,255,.72);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);color:var(--area-ink);cursor:pointer;box-shadow:0 12px 30px rgba(42,60,77,.1);transition:transform .25s ease,background .25s ease}
.area-back:hover{transform:translateX(-4px);background:#fff}.area-back span{font:400 31px/1 Sora,sans-serif;transform:translateY(-2px)}.area-back em{display:none}

body.area-page .area-hero{padding:112px 0 34px}
body.area-page .area-hero-grid{position:relative;display:block;min-height:700px;overflow:hidden;border:1px solid rgba(7,23,44,.1);border-radius:34px;background:rgba(247,249,250,.72);box-shadow:0 26px 80px rgba(55,73,89,.08)}
body.area-page .area-hero-grid:before{content:"";position:absolute;inset:20px;z-index:0;border:1px solid rgba(7,23,44,.07);border-radius:25px;pointer-events:none}
body.area-page .area-hero-grid:after{content:"01";position:absolute;z-index:2;right:3%;bottom:-5%;color:rgba(255,255,255,.92);font:700 clamp(190px,22vw,310px)/.8 Sora,sans-serif;letter-spacing:-.1em;pointer-events:none}
body.area-page .area-hero-copy{display:block;position:relative;z-index:4;width:50%;min-height:700px;padding:70px 0 56px 58px}
body.area-page .area-eyebrow{position:static;display:inline-flex;align-items:center;gap:9px;padding:9px 13px;border:1px solid var(--area-line);border-radius:999px;background:rgba(255,255,255,.64);color:var(--area-blue);font-size:9px;letter-spacing:.14em}
body.area-page .area-eyebrow:before{content:"";width:6px;height:6px;border-radius:50%;background:#8da9ba;box-shadow:0 0 0 5px rgba(141,169,186,.16)}
body.area-page .area-hero h1{position:static;width:auto;max-width:10.4ch;margin:68px 0 28px;color:var(--area-ink);font-size:clamp(48px,5.3vw,72px);font-weight:600;letter-spacing:-.065em;line-height:.92;text-transform:none}
body.area-page .area-hero p{position:static;width:min(420px,90%);max-width:none;margin:0;color:#45596b;font-size:14px;line-height:1.65}
body.area-page .area-hero-media{position:absolute;z-index:1;inset:20px 20px 20px 47%;width:auto;height:auto;min-height:0;overflow:hidden;border-radius:25px;background:#f6f8f9}
body.area-page .area-hero-media:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(247,249,250,.88) 0,rgba(247,249,250,.2) 28%,transparent 50%);pointer-events:none}
body.area-page .area-hero-media img{width:100%;height:calc(100% + 100px);margin-top:-50px;object-fit:cover;object-position:center}
body.area-page .area-index{display:flex;margin-top:12px;padding:0 8px;border:0;color:#657484;font-size:9px;letter-spacing:.12em}

body.area-page .area-intro{padding:clamp(90px,11vw,150px) 0}
body.area-page .area-intro-grid{position:relative;align-items:start;padding:34px;border:1px solid var(--area-line);border-radius:30px;background:rgba(255,255,255,.4)}
body.area-page .area-intro-grid:before{content:"Contexto / acompañamiento";grid-column:1/13;margin-bottom:80px;color:#667686;font:600 9px/1 Sora,sans-serif;letter-spacing:.15em;text-transform:uppercase}
body.area-page .area-intro h2{grid-column:1/7;max-width:10ch;margin:0;font-size:clamp(46px,5.6vw,70px);font-weight:600;line-height:.94;letter-spacing:-.06em}
body.area-page .area-intro-copy{grid-column:8/13;gap:21px;padding-top:4px}
body.area-page .area-intro-copy p,body.area-page .area-intro-copy p:first-child{color:#4c5f71;font-size:14px;line-height:1.7}body.area-page .area-intro-copy p:first-child{color:var(--area-ink);font-size:18px;font-weight:500}

body.area-page .area-products{padding-bottom:clamp(100px,12vw,160px)}
body.area-page .area-section-head{display:grid;grid-template-columns:1.3fr 6.7fr 3fr;gap:24px;align-items:end;padding:0 4px 44px;border:0}
body.area-page .area-section-head>span{align-self:start;padding-top:8px;color:#647586;font-size:9px;letter-spacing:.14em}
body.area-page .area-section-head h2{max-width:12ch;margin:0;font-size:clamp(45px,5vw,65px);font-weight:600;line-height:.94;letter-spacing:-.06em}
body.area-page .area-section-head p{align-self:end;color:#647586;font-size:12px;line-height:1.5}
body.area-page .area-product-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:12px;border:0}
body.area-page .area-product-group,body.area-page .area-product-group:nth-child(2),body.area-page .area-product-group:nth-child(3){position:relative;display:flex;flex-direction:column;grid-column:span 6;min-height:410px;padding:27px 28px;overflow:hidden;border:1px solid var(--area-line);border-radius:26px;background:rgba(255,255,255,.52);transition:transform .35s ease,background .35s ease,box-shadow .35s ease}
body.area-page .area-product-group:nth-child(2),body.area-page .area-product-group:nth-child(3){grid-column:span 6}body.area-page .area-product-group:hover{transform:translateY(-5px);background:rgba(255,255,255,.76);box-shadow:0 24px 55px rgba(57,76,92,.09)}
body.area-page .area-product-group:before{content:"";position:absolute;right:-60px;bottom:-78px;width:250px;height:250px;border:1px solid rgba(32,57,95,.08);border-radius:50%;box-shadow:inset 0 0 0 42px rgba(255,255,255,.18),inset 0 0 0 43px rgba(32,57,95,.05)}
body.area-page .area-product-num{color:#657687;font-size:10px;letter-spacing:.14em}
body.area-page .area-product-group h3{max-width:12ch;margin:82px 0 20px;color:var(--area-blue);font-size:clamp(30px,3vw,42px);font-weight:600;line-height:.98;letter-spacing:-.055em}
body.area-page .area-product-group p{position:relative;z-index:1;width:min(76%,570px);margin:0 0 28px;color:#56697b;font-size:13px;line-height:1.65}
body.area-page .area-product-group a{position:relative;z-index:1;margin-top:auto;color:var(--area-ink);font-size:11px;font-weight:650}

body.area-page .area-story{padding-bottom:clamp(110px,13vw,170px)}
body.area-page .area-story-grid{position:relative;min-height:720px;padding:20px;overflow:hidden;border:1px solid var(--area-line);border-radius:34px;background:rgba(255,255,255,.48)}
body.area-page .area-story-grid:before{content:"";position:absolute;top:20px;right:20px;width:108px;height:108px;border:1px solid rgba(32,57,95,.12);border-radius:50%;box-shadow:inset 0 0 0 26px rgba(255,255,255,.3)}
body.area-page .area-story-media{grid-column:1/8;height:680px;overflow:hidden;border-radius:24px;background:#f7f9fa}
body.area-page .area-story-media img{width:100%;height:calc(100% + 90px);margin-top:-45px;object-fit:cover}
body.area-page .area-story-copy{grid-column:8/13;align-self:end;padding:48px 38px 42px}
body.area-page .area-story-copy>span{color:#657687;font-size:9px;letter-spacing:.14em;text-transform:uppercase}
body.area-page .area-story-copy h2{max-width:10ch;margin:24px 0 30px;color:var(--area-blue);font-size:clamp(38px,4.1vw,54px);font-weight:600;line-height:.96;letter-spacing:-.06em}
body.area-page .area-story-copy p{color:#526577;font-size:14px;line-height:1.7}body.area-page .area-story-copy .button{margin-top:18px}

body.area-page .area-steps{padding-bottom:clamp(110px,12vw,160px)}
body.area-page .area-step-list{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;border:0}
body.area-page .area-step{display:flex;flex-direction:column;min-height:360px;padding:27px;border:1px solid var(--area-line);border-radius:24px;background:rgba(255,255,255,.43)}
body.area-page .area-step>span{display:grid;place-items:center;width:38px;height:38px;border:1px solid var(--area-line);border-radius:50%;color:#667788;font-size:10px}
body.area-page .area-step h3{margin:auto 0 24px;color:var(--area-blue);font-size:27px;font-weight:600;line-height:1.02;letter-spacing:-.045em}
body.area-page .area-step p{color:#586b7c;font-size:13px;line-height:1.6}

body.area-page .area-audiences{padding-bottom:clamp(110px,12vw,160px)}
body.area-page .area-audience-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;border:0}
body.area-page .area-audience{position:relative;min-height:430px;padding:31px;overflow:hidden;border:1px solid var(--area-line);border-radius:28px;background:rgba(255,255,255,.48)}
body.area-page .area-audience+article{background:rgba(255,255,255,.48);border:1px solid var(--area-line)}
body.area-page .area-audience:after{content:"";position:absolute;right:28px;top:28px;width:54px;height:54px;border:1px solid rgba(32,57,95,.13);border-radius:18px;background:rgba(255,255,255,.35)}
body.area-page .area-audience>span{color:#667788;font-size:9px;letter-spacing:.14em;text-transform:uppercase}
body.area-page .area-audience h3{max-width:9ch;margin:100px 0 26px;color:var(--area-blue);font-size:clamp(37px,4.2vw,54px);font-weight:600;line-height:.96;letter-spacing:-.055em}
body.area-page .area-audience p{max-width:48ch;color:#536678;font-size:14px;line-height:1.68}

body.area-page .area-cta{padding:0 0 clamp(100px,11vw,150px);border:0}
body.area-page .area-cta-grid{position:relative;align-items:end;min-height:510px;padding:48px;overflow:hidden;border:1px solid var(--area-line);border-radius:32px;background:rgba(255,255,255,.54)}
body.area-page .area-cta-grid:before{content:"ORTHOS";position:absolute;left:3%;top:-4%;color:rgba(32,57,95,.035);font:700 clamp(130px,19vw,270px)/1 Sora,sans-serif;letter-spacing:-.09em;pointer-events:none}
body.area-page .area-cta h2{position:relative;z-index:1;grid-column:1/9;max-width:11ch;margin:0;color:var(--area-blue);font-size:clamp(48px,5.7vw,72px);font-weight:600;line-height:.94;letter-spacing:-.06em}
body.area-page .area-cta-grid>div{position:relative;z-index:1;grid-column:10/13}body.area-page .area-cta p{color:#56697a;font-size:13px;line-height:1.6}body.area-page .area-cta a{display:inline-flex;margin-top:18px;padding:15px 19px;border-radius:999px;background:var(--area-ink);color:#fff;font-size:11px;font-weight:650}

@media(max-width:900px){body.area-page .area-shell{width:min(100% - 28px,1240px)}body.area-page .nav-shell{width:calc(100% - 28px)}.area-back{top:98px;left:14px;width:56px;height:56px}body.area-page .area-hero-grid{min-height:760px}body.area-page .area-hero-copy{width:59%;min-height:760px;padding-left:38px}body.area-page .area-hero-media{left:44%}body.area-page .area-hero h1{font-size:clamp(47px,7vw,62px)}body.area-page .area-intro h2{grid-column:1/7}body.area-page .area-intro-copy{grid-column:7/13}body.area-page .area-product-group,body.area-page .area-product-group:nth-child(2),body.area-page .area-product-group:nth-child(3){grid-column:span 12}body.area-page .area-story-media{grid-column:1/8}body.area-page .area-story-copy{grid-column:8/13;padding-inline:24px}body.area-page .area-audience h3{font-size:40px}}
@media(max-width:620px){body.area-page .nav{top:8px}body.area-page .nav-shell{min-height:66px;padding-inline:14px}body.area-page .brand{min-width:0}body.area-page .brand-mark{width:128px;height:48px}.area-back{top:87px;width:52px;height:52px;border-radius:16px}.area-back span{font-size:27px}body.area-page .area-hero{padding-top:88px}body.area-page .area-hero-grid{min-height:920px;border-radius:26px}body.area-page .area-hero-grid:before{inset:12px;border-radius:19px}body.area-page .area-hero-grid:after{right:-8%;bottom:-1%;font-size:170px}body.area-page .area-hero-copy{width:100%;min-height:920px;padding:88px 21px 34px}body.area-page .area-eyebrow{font-size:8px}body.area-page .area-hero h1{margin-top:34px;max-width:10ch;font-size:42px;line-height:.96}body.area-page .area-hero p{width:100%;font-size:13px}body.area-page .area-hero-media{inset:430px 12px 12px;width:auto;height:auto;border-radius:19px}body.area-page .area-hero-media:after{background:linear-gradient(180deg,rgba(247,249,250,.86),transparent 35%)}body.area-page .area-hero-media img{height:calc(100% + 70px);margin-top:-35px;object-position:center}body.area-page .area-index{font-size:7px}body.area-page .area-intro{padding:84px 0}body.area-page .area-intro-grid{grid-template-columns:1fr!important;padding:24px;border-radius:24px}body.area-page .area-intro-grid:before{grid-column:1;margin-bottom:50px}body.area-page .area-intro h2,body.area-page .area-intro-copy{grid-column:1}body.area-page .area-intro h2{font-size:43px}body.area-page .area-intro-copy{margin-top:44px}body.area-page .area-section-head{grid-template-columns:1fr;gap:20px;padding-inline:0}body.area-page .area-section-head h2,body.area-page .area-section-head p{grid-column:1}body.area-page .area-section-head h2{font-size:42px}body.area-page .area-product-group,body.area-page .area-product-group:nth-child(2),body.area-page .area-product-group:nth-child(3){min-height:450px;padding:24px}body.area-page .area-product-group h3{margin-top:68px;font-size:34px}body.area-page .area-product-group p{width:100%}body.area-page .area-story-grid{grid-template-columns:1fr;min-height:0;padding:12px;border-radius:26px}body.area-page .area-story-media,body.area-page .area-story-copy{grid-column:1}body.area-page .area-story-media{height:460px;border-radius:19px}body.area-page .area-story-copy{padding:46px 12px 25px}body.area-page .area-story-copy h2{font-size:40px}body.area-page .area-step-list{grid-template-columns:1fr}body.area-page .area-step{min-height:320px}body.area-page .area-audience-grid{grid-template-columns:1fr}body.area-page .area-audience{min-height:400px;padding:25px}body.area-page .area-audience h3{font-size:40px}body.area-page .area-cta-grid{grid-template-columns:1fr;min-height:580px;padding:28px}body.area-page .area-cta h2,body.area-page .area-cta-grid>div{grid-column:1}body.area-page .area-cta h2{font-size:43px}body.area-page .area-cta-grid>div{margin-top:auto}}
@media(max-width:620px){body.area-page .area-hero-media{width:calc(100% - 24px)!important}}
@media(prefers-reduced-motion:reduce){body.area-page .area-product-group,.area-back{transition:none}}

/* Áreas especializadas — hero panorámico editorial */
body.area-page .area-hero{padding:112px 0 clamp(105px,10vw,145px)}
body.area-page .area-hero-grid{display:grid;grid-template-columns:1fr;gap:0;min-height:0;overflow:visible;border:0;border-radius:0;background:transparent;box-shadow:none}
body.area-page .area-hero-grid:before,body.area-page .area-hero-grid:after{display:none}
body.area-page .area-hero-media{position:relative;inset:auto;grid-column:1/-1;grid-row:1;width:100%;height:clamp(320px,30vw,390px);margin:0;overflow:hidden;border-radius:8px;background:#f4f7f8}
body.area-page .area-hero-media:after{display:none}
body.area-page .area-hero-media img{width:100%;height:calc(100% + 160px);margin-top:-80px;object-fit:cover;object-position:center;transform:translate3d(0,var(--area-y,0),0);will-change:transform}
body.area-page .area-hero-copy{position:static;z-index:2;grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,1fr);column-gap:clamp(38px,6vw,96px);width:100%;min-height:0;padding:18px 0 0}
body.area-page .area-eyebrow{position:static;grid-column:2;justify-self:start;margin:0 0 18px;padding:0;border:0;border-radius:0;background:transparent;color:#526578;font-size:10px;box-shadow:none}
body.area-page .area-eyebrow:before{display:none}
body.area-page .area-hero h1{position:static;grid-column:1;grid-row:2;align-self:start;width:auto;max-width:13ch;margin:0;color:#07172c;font-size:clamp(44px,4.5vw,62px);font-weight:600;line-height:.94;letter-spacing:-.065em}
body.area-autismo .area-hero h1{max-width:15ch;font-size:clamp(38px,3.8vw,52px);line-height:.96}
body.area-page .area-hero p{position:static;grid-column:2;grid-row:2;align-self:end;width:min(620px,100%);margin:0 0 3px;color:#4b5e70;font-size:14px;line-height:1.68}
body.area-page .area-index{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,1fr);gap:0;margin-top:22px;padding:0;border:0;color:#536679;font-size:10px;letter-spacing:.08em}
body.area-page .area-index span{grid-column:2;padding:10px 0;border-top:1px solid rgba(7,23,44,.16)}
body.area-page .area-index span:last-child{border-bottom:1px solid rgba(7,23,44,.16)}
@media(max-width:900px){body.area-page .area-hero-grid{min-height:0}body.area-page .area-hero-media{width:100%;height:340px}body.area-page .area-hero-copy{grid-template-columns:minmax(0,1fr) minmax(280px,1fr);column-gap:34px}body.area-page .area-index{grid-template-columns:minmax(0,1fr) minmax(280px,1fr)}}
@media(max-width:620px){body.area-page .area-hero{padding-top:92px;padding-bottom:90px}body.area-page .area-hero-grid{min-height:0}body.area-page .area-hero-media{position:relative;inset:auto;width:100%!important;height:235px;border-radius:6px}body.area-page .area-hero-media img{height:calc(100% + 80px);margin-top:-40px}body.area-page .area-hero-copy{display:grid;grid-template-columns:1fr;width:100%;min-height:0;padding:18px 0 0}body.area-page .area-eyebrow,body.area-page .area-hero h1,body.area-page .area-hero p{grid-column:1;grid-row:auto}body.area-page .area-eyebrow{margin-bottom:20px}body.area-page .area-hero h1,body.area-autismo .area-hero h1{max-width:13ch;margin:0 0 26px;font-size:36px;line-height:.96}body.area-page .area-hero p{width:100%;font-size:13px}body.area-page .area-index{grid-template-columns:1fr;margin-top:24px}body.area-page .area-index span{grid-column:1}}
@media(max-width:620px){body.area-page .area-hero-media{height:190px}}

/* Áreas especializadas — introducción abierta, sin tarjeta */
body.area-page .area-intro{padding:clamp(110px,12vw,170px) 0 clamp(125px,13vw,185px)}
body.area-page .area-intro-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(300px,5fr);row-gap:0;column-gap:clamp(54px,10vw,150px);align-items:start;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}
body.area-page .area-intro-grid:before{display:none}
body.area-page .area-intro h2{grid-column:1;grid-row:1;max-width:12ch;margin:0;color:#07172c;font-size:clamp(48px,5.2vw,70px);font-weight:500;line-height:.94;letter-spacing:-.065em;text-wrap:balance}
body.area-page .area-intro-copy{display:contents}
body.area-page .area-intro-copy p,body.area-page .area-intro-copy p:first-child{max-width:38ch;margin:0;color:#405469;font-size:14px;font-weight:400;line-height:1.62}
body.area-page .area-intro-copy p:first-child{color:#07172c;font-size:15px}
body.area-page .area-intro-copy p:nth-child(1){grid-column:2;grid-row:1;padding-top:6px}
body.area-page .area-intro-copy p:nth-child(2){grid-column:2;grid-row:2;margin-top:30px}
body.area-page .area-intro-copy p:nth-child(3){grid-column:1/-1;grid-row:3;max-width:76ch;margin-top:clamp(68px,8vw,110px);color:#405469;font-size:15px}
@media(max-width:900px){body.area-page .area-intro-grid{grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);row-gap:0;column-gap:54px}body.area-page .area-intro h2{grid-column:1;font-size:52px}}
@media(max-width:620px){body.area-page .area-intro{padding:90px 0 110px}body.area-page .area-intro-grid{grid-template-columns:1fr;gap:0}body.area-page .area-intro h2{grid-column:1;grid-row:1;max-width:10ch;font-size:42px}body.area-page .area-intro-copy p:nth-child(1),body.area-page .area-intro-copy p:nth-child(2),body.area-page .area-intro-copy p:nth-child(3){grid-column:1;grid-row:auto;max-width:34ch;font-size:13px}body.area-page .area-intro-copy p:nth-child(1){margin-top:54px;padding:0}body.area-page .area-intro-copy p:nth-child(2){margin-top:25px}body.area-page .area-intro-copy p:nth-child(3){max-width:100%;margin-top:56px}}

/* Productos recomendados — contraste y entrada al viewport */
body.area-page .area-product-group,body.area-page .area-product-group:nth-child(2),body.area-page .area-product-group:nth-child(3){border-radius:14px}
body.area-page .area-product-group h3{color:#07172c}
body.area-page .area-product-group p{color:#405469}
body.area-page .area-product-num{color:#536779}
body.area-page .area-product-group a{color:#07172c}
html.area-reveal-ready body.area-page .area-product-group{opacity:0;clip-path:inset(0 0 18% 0 round 14px);filter:blur(7px);transform:translate3d(0,48px,0) scale(.978);transition:opacity .75s cubic-bezier(.2,.72,.2,1) var(--reveal-delay,0ms),transform .9s cubic-bezier(.16,1,.3,1) var(--reveal-delay,0ms),clip-path .9s cubic-bezier(.16,1,.3,1) var(--reveal-delay,0ms),filter .65s ease var(--reveal-delay,0ms),background .35s ease,box-shadow .35s ease}
html.area-reveal-ready body.area-page .area-product-group.is-inview{opacity:1;clip-path:inset(0 0 0 0 round 14px);filter:blur(0);transform:translate3d(0,0,0) scale(1)}
@media(prefers-reduced-motion:reduce){html.area-reveal-ready body.area-page .area-product-group{opacity:1;clip-path:none;filter:none;transform:none;transition:none}}

/* Hero e introducción — retícula editorial refinada */
body.area-page .area-hero{padding-bottom:clamp(82px,8vw,112px)}
body.area-page .area-hero-copy{
  grid-template-columns:minmax(0,6.25fr) minmax(360px,5.75fr);
  grid-template-rows:auto auto;
  column-gap:clamp(54px,7vw,112px);
  row-gap:18px;
  padding-top:24px
}
body.area-page .area-eyebrow{
  grid-column:1;
  grid-row:1;
  justify-self:start;
  margin:0;
  color:#5b6e80;
  font-size:10px;
  letter-spacing:.14em
}
body.area-page .area-hero h1{
  grid-column:1;
  grid-row:2;
  max-width:15ch;
  font-size:clamp(40px,3.75vw,56px);
  line-height:.98;
  letter-spacing:-.055em;
  text-wrap:balance
}
body.area-autismo .area-hero h1{max-width:18ch;font-size:clamp(37px,3.35vw,50px)}
body.area-page .area-hero p{
  grid-column:2;
  grid-row:2;
  align-self:start;
  width:min(580px,100%);
  margin:0;
  color:#405469;
  font-size:15px;
  line-height:1.62;
  text-wrap:pretty
}
body.area-page .area-index{
  grid-template-columns:minmax(0,6.25fr) minmax(360px,5.75fr);
  column-gap:clamp(54px,7vw,112px);
  margin-top:-18px
}
body.area-page .area-index span{grid-column:2;padding:11px 0}

body.area-page .area-intro{padding:clamp(92px,9vw,126px) 0 clamp(108px,11vw,148px)}
body.area-page .area-intro-grid{
  grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:clamp(18px,2vw,32px);
  row-gap:0;
  align-items:start
}
body.area-page .area-intro h2{
  grid-column:8/13;
  grid-row:1/3;
  justify-self:end;
  max-width:11ch;
  text-align:right;
  font-size:clamp(42px,4.2vw,58px);
  line-height:.98;
  letter-spacing:-.055em
}
body.area-page .area-intro-copy p,
body.area-page .area-intro-copy p:first-child{
  max-width:none;
  color:#405469;
  font-size:15px;
  line-height:1.65;
  text-wrap:pretty
}
body.area-page .area-intro-copy p:first-child{font-size:16px;font-weight:500;color:#07172c}
body.area-page .area-intro-copy p:nth-child(1){grid-column:1/4;grid-row:1;padding:0}
body.area-page .area-intro-copy p:nth-child(2){grid-column:4/7;grid-row:1;margin:0}
body.area-page .area-intro-copy p:nth-child(3){
  grid-column:1/7;
  grid-row:2;
  max-width:68ch;
  margin-top:clamp(46px,5vw,68px);
  padding-top:22px;
  border-top:1px solid rgba(7,23,44,.14);
  font-size:15px
}

@media(max-width:900px){
  body.area-page .area-hero-copy,body.area-page .area-index{grid-template-columns:minmax(0,1fr) minmax(300px,.9fr);column-gap:40px}
  body.area-page .area-hero h1,body.area-autismo .area-hero h1{font-size:clamp(36px,5vw,46px)}
  body.area-page .area-intro-grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:44px}
  body.area-page .area-intro h2{grid-column:2;grid-row:1/3;justify-self:end;font-size:46px;text-align:right}
  body.area-page .area-intro-copy p:nth-child(1),body.area-page .area-intro-copy p:nth-child(2),body.area-page .area-intro-copy p:nth-child(3){grid-column:1}
  body.area-page .area-intro-copy p:nth-child(1){grid-row:1}
  body.area-page .area-intro-copy p:nth-child(2){grid-row:2;margin-top:28px}
  body.area-page .area-intro-copy p:nth-child(3){grid-row:3;margin-top:42px}
}
@media(max-width:620px){
  body.area-page .area-hero{padding-bottom:76px}
  body.area-page .area-hero-copy{grid-template-columns:1fr;row-gap:0;padding-top:18px}
  body.area-page .area-eyebrow,body.area-page .area-hero h1,body.area-page .area-hero p{grid-column:1}
  body.area-page .area-eyebrow{grid-row:1;margin-bottom:18px}
  body.area-page .area-hero h1,body.area-autismo .area-hero h1{grid-row:2;max-width:16ch;margin-bottom:24px;font-size:34px}
  body.area-page .area-hero p{grid-row:3;font-size:14px}
  body.area-page .area-index{grid-template-columns:1fr;column-gap:0;margin-top:22px}
  body.area-page .area-index span{grid-column:1}
  body.area-page .area-intro{padding:78px 0 102px}
  body.area-page .area-intro-grid{grid-template-columns:1fr;column-gap:0}
  body.area-page .area-intro h2{grid-column:1;grid-row:1;justify-self:end;max-width:11ch;font-size:39px;text-align:right}
  body.area-page .area-intro-copy p:nth-child(1),body.area-page .area-intro-copy p:nth-child(2),body.area-page .area-intro-copy p:nth-child(3){grid-column:1;font-size:14px}
  body.area-page .area-intro-copy p:nth-child(1){grid-row:2;margin-top:44px}
  body.area-page .area-intro-copy p:nth-child(2){grid-row:3;margin-top:24px}
  body.area-page .area-intro-copy p:nth-child(3){grid-row:4;margin-top:38px;padding-top:20px}
}

/* 02 / Criterio Orthos y Espacio específico — composición superpuesta */
body.area-page .area-story{padding-bottom:clamp(110px,12vw,156px)}
body.area-page .area-story-grid{
  position:relative;
  display:block;
  min-height:650px;
  padding:16px;
  overflow:hidden;
  border:0;
  border-radius:12px;
  background:#183a70;
  box-shadow:none
}
body.area-page .area-story-grid:before{display:none}
body.area-page .area-story-media{
  position:absolute;
  inset:16px auto 16px 16px;
  width:66%;
  height:auto;
  margin:0;
  overflow:hidden;
  border-radius:9px;
  background:#dbe3e8
}
body.area-page .area-story-media img{
  width:100%;
  height:calc(100% + 110px);
  margin-top:-55px;
  object-fit:cover;
  transform:translate3d(0,var(--area-y,0),0);
  will-change:transform
}
body.area-page .area-story-copy{
  position:absolute;
  z-index:2;
  top:21%;
  right:0;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  width:66%;
  min-height:390px;
  padding:46px 48px 40px;
  border-radius:12px 0 0 12px;
  background:#f8fafb;
  color:#07172c
}
body.area-page .area-story-copy:before{
  content:"";
  position:absolute;
  top:-27px;
  left:0;
  width:112px;
  height:36px;
  border-radius:10px 20px 0 0;
  background:#f8fafb;
  clip-path:polygon(0 0,72% 0,88% 72%,100% 72%,100% 100%,0 100%)
}
body.area-page .area-story-copy>span{
  position:absolute;
  top:24px;
  left:48px;
  color:#627486;
  font-size:10px;
  letter-spacing:.13em
}
body.area-page .area-story-copy h2{
  max-width:13ch;
  margin:0 0 24px;
  color:#20395f;
  font-size:clamp(38px,4.1vw,56px);
  line-height:.96;
  letter-spacing:-.055em
}
body.area-page .area-story-copy p{max-width:58ch;margin:0 0 14px;color:#405469;font-size:14px;line-height:1.62}
body.area-page .area-story-copy .button{align-self:flex-start;margin-top:10px}

@media(max-width:900px){
  body.area-page .area-story-grid{min-height:610px}
  body.area-page .area-story-media{width:70%}
  body.area-page .area-story-copy{top:24%;width:68%;min-height:370px;padding:42px 34px 34px}
  body.area-page .area-story-copy>span{left:34px}
  body.area-page .area-story-copy h2{font-size:42px}
}
@media(max-width:620px){
  body.area-page .area-story-grid{display:flex;flex-direction:column;min-height:0;padding:10px;border-radius:10px}
  body.area-page .area-story-media{position:relative;inset:auto;width:100%;height:390px;border-radius:7px}
  body.area-page .area-story-copy{position:relative;top:auto;right:auto;width:calc(100% - 10px);min-height:0;margin:-36px 0 0 auto;padding:74px 24px 30px;border-radius:9px 0 0 9px}
  body.area-page .area-story-copy:before{top:-22px;width:94px;height:30px;border-radius:8px 17px 0 0}
  body.area-page .area-story-copy>span{top:24px;left:24px}
  body.area-page .area-story-copy h2{max-width:12ch;margin-bottom:22px;font-size:36px}
  body.area-page .area-story-copy p{font-size:13px}
}

/* Productos — encabezado limpio */
body.area-page .area-products{padding:clamp(76px,8vw,108px) 0 clamp(110px,12vw,160px);background:#20395f}
body.area-page .area-products .area-shell{position:relative;padding:60px 16px 72px;border-radius:10px;background:#f8fafb}
body.area-page .area-products .area-shell:before{content:"";position:absolute;top:-38px;left:0;width:190px;height:46px;border-radius:9px 22px 0 0;background:#f8fafb;clip-path:polygon(0 0,68% 0,84% 76%,100% 76%,100% 100%,0 100%)}
body.area-page .area-products .area-section-head{grid-template-columns:minmax(0,8fr) minmax(260px,4fr);padding:0 0 48px}
body.area-page .area-products .area-section-head h2{
  grid-column:1;
  max-width:18ch;
  color:#07172c;
  font-size:clamp(43px,4.7vw,62px);
  text-wrap:balance
}
body.area-page .area-products .area-section-head p{grid-column:2;max-width:34ch;justify-self:end}
body.area-page .area-products .area-product-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:repeat(2,270px);gap:10px;min-height:550px}
body.area-page .area-products .area-product-group,body.area-page .area-products .area-product-group:nth-child(2),body.area-page .area-products .area-product-group:nth-child(3){grid-column:auto;min-height:0;padding:20px;border:0;border-radius:8px;background:#e8edf0;box-shadow:none}
body.area-page .area-products .area-product-group:nth-child(1){grid-column:1/5;grid-row:1}
body.area-page .area-products .area-product-group:nth-child(2){grid-column:5/9;grid-row:1;background:#20395f}
body.area-page .area-products .area-product-group:nth-child(3){grid-column:5/9;grid-row:2}
body.area-page .area-products .area-product-group:nth-child(4){grid-column:9/13;grid-row:2;background:#20395f}
body.area-page .area-products .area-product-group:before{display:none}
body.area-page .area-products .area-product-group h3{max-width:17ch;margin:auto 0 14px;font-size:clamp(21px,2vw,28px);line-height:1.02}
body.area-page .area-products .area-product-group p{width:100%;display:-webkit-box;margin:0 0 18px;overflow:hidden;color:#405469;font-size:11px;line-height:1.5;-webkit-box-orient:vertical;-webkit-line-clamp:3}
body.area-page .area-products .area-product-group a{font-size:10px}
body.area-page .area-products .area-product-group:nth-child(2) .area-product-num,body.area-page .area-products .area-product-group:nth-child(2) h3,body.area-page .area-products .area-product-group:nth-child(2) p,body.area-page .area-products .area-product-group:nth-child(2) a,body.area-page .area-products .area-product-group:nth-child(4) .area-product-num,body.area-page .area-products .area-product-group:nth-child(4) h3,body.area-page .area-products .area-product-group:nth-child(4) p,body.area-page .area-products .area-product-group:nth-child(4) a{color:#f5f8fb}
body.area-page .area-products .area-product-group:nth-child(2) p,body.area-page .area-products .area-product-group:nth-child(4) p{color:rgba(245,248,251,.76)}

/* 03 / Proceso y Criterio — expedientes escalonados */
body.area-page .area-steps{overflow:hidden;padding-bottom:clamp(120px,13vw,175px)}
body.area-page .area-steps .area-section-head{padding-bottom:54px}
body.area-page .area-steps .area-section-head{grid-template-columns:minmax(0,8fr) minmax(220px,4fr)}
body.area-page .area-steps .area-section-head h2{grid-column:1;max-width:16ch;color:#07172c}
body.area-page .area-step-list{
  position:relative;
  display:block;
  width:100%;
  min-height:580px;
  border:0
}
body.area-page .area-step{
  position:absolute;
  display:grid;
  grid-template-columns:54px minmax(180px,.8fr) minmax(240px,1.2fr);
  gap:22px;
  align-items:end;
  width:68%;
  min-height:250px;
  padding:30px 34px;
  overflow:visible;
  border:0;
  border-radius:10px;
  background:#f8fafb;
  box-shadow:0 20px 44px rgba(29,50,70,.07)
}
body.area-page .area-step:before{
  content:"";
  position:absolute;
  top:-24px;
  left:0;
  width:126px;
  height:32px;
  border-radius:9px 20px 0 0;
  background:inherit;
  clip-path:polygon(0 0,70% 0,84% 70%,100% 70%,100% 100%,0 100%)
}
body.area-page .area-step:nth-child(1){z-index:1;top:24px;left:0}
body.area-page .area-step:nth-child(2){z-index:2;top:148px;left:16%;background:#20395f;box-shadow:0 24px 52px rgba(7,23,44,.2)}
body.area-page .area-step:nth-child(3){z-index:3;top:272px;right:0}
body.area-page .area-step>span{
  align-self:start;
  display:block;
  width:auto;
  height:auto;
  border:0;
  border-radius:0;
  color:#788a9c;
  font-size:11px
}
body.area-page .area-step h3{align-self:start;margin:0;color:#07172c;font-size:25px;line-height:1.08}
body.area-page .area-step p{align-self:end;margin:0;color:#405469;font-size:14px;line-height:1.58}
body.area-page .area-step:nth-child(2)>span,body.area-page .area-step:nth-child(2) h3,body.area-page .area-step:nth-child(2) p{color:#f5f8fb}
html.area-stack-ready body.area-page .area-step{will-change:transform,opacity;transition:none}
html.area-stack-ready body.area-page .area-step:nth-child(1){opacity:var(--stack-p1,0);transform:translate3d(0,var(--stack-y1,190px),0)}
html.area-stack-ready body.area-page .area-step:nth-child(2){opacity:var(--stack-p2,0);transform:translate3d(0,var(--stack-y2,240px),0)}
html.area-stack-ready body.area-page .area-step:nth-child(3){opacity:var(--stack-p3,0);transform:translate3d(0,var(--stack-y3,290px),0)}

@media(max-width:900px){
  body.area-page .area-index{margin-top:-12px}
  body.area-page .area-products .area-section-head{grid-template-columns:minmax(0,1fr) 250px}
  body.area-page .area-products .area-section-head h2{grid-column:1;font-size:48px}
  body.area-page .area-products .area-section-head p{grid-column:2}
  body.area-page .area-products .area-product-grid{grid-template-rows:repeat(2,300px)}
  body.area-page .area-step{width:76%;grid-template-columns:42px minmax(160px,.8fr) minmax(210px,1.2fr);padding:28px}
  body.area-page .area-step:nth-child(2){left:12%}
}
@media(max-width:620px){
  body.area-page .area-index{margin-top:22px}
  body.area-page .area-products{padding-top:68px}
  body.area-page .area-products .area-shell{padding:42px 12px 28px}
  body.area-page .area-products .area-shell:before{top:-29px;width:140px;height:36px}
  body.area-page .area-products .area-section-head{grid-template-columns:1fr}
  body.area-page .area-products .area-section-head h2{grid-column:1;max-width:14ch;font-size:39px}
  body.area-page .area-products .area-section-head p{grid-column:1;justify-self:start}
  body.area-page .area-products .area-product-grid{display:grid;grid-template-columns:1fr;grid-template-rows:none;gap:10px;min-height:0}
  body.area-page .area-products .area-product-group:nth-child(1),body.area-page .area-products .area-product-group:nth-child(2),body.area-page .area-products .area-product-group:nth-child(3),body.area-page .area-products .area-product-group:nth-child(4){grid-column:1;grid-row:auto;min-height:300px}
  body.area-page .area-steps .area-section-head{grid-template-columns:1fr}
  body.area-page .area-steps .area-section-head h2{grid-column:1}
  body.area-page .area-step-list{display:grid;gap:36px;min-height:0;padding-top:22px}
  body.area-page .area-step,body.area-page .area-step:nth-child(1),body.area-page .area-step:nth-child(2),body.area-page .area-step:nth-child(3){position:relative;inset:auto;width:100%;min-height:250px;grid-template-columns:38px 1fr;padding:28px 24px}
  body.area-page .area-step p{grid-column:2}
  body.area-page .area-step:nth-child(2){margin-left:8px;width:calc(100% - 8px)}
  html.area-stack-ready body.area-page .area-step:nth-child(1){transform:translate3d(0,var(--stack-y1,80px),0)}
  html.area-stack-ready body.area-page .area-step:nth-child(2){transform:translate3d(0,var(--stack-y2,100px),0)}
  html.area-stack-ready body.area-page .area-step:nth-child(3){transform:translate3d(0,var(--stack-y3,120px),0)}
}
@media(prefers-reduced-motion:reduce){html.area-stack-ready body.area-page .area-step{opacity:1;filter:none;transform:none;transition:none}}

/* Geriatría — título en tres líneas */
body.area-geriatria .area-hero-copy{grid-template-columns:minmax(0,7fr) minmax(360px,5fr)}
body.area-geriatria .area-hero h1{max-width:18ch;font-size:clamp(38px,3.45vw,52px)}
body.area-geriatria .area-index{grid-template-columns:minmax(0,7fr) minmax(360px,5fr)}

/* Públicos + CTA — bloque continuo con encaje inferior */
body.area-page .area-audiences{padding-bottom:clamp(110px,12vw,160px)}
body.area-page .area-audience-grid{--audience-cut:clamp(118px,12vw,154px);--audience-gap:12px;display:block;overflow:visible;border-radius:10px;background:transparent}
body.area-page .area-audience-content{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(52px,6vw,78px);
  min-height:520px;
  padding:70px 52px 88px;
  background:#e8edf0;
  color:#07172c;
  text-align:center
}
body.area-page .area-audience-content:before{content:"Acompañamiento";color:#536779;font-size:10px;letter-spacing:.13em;text-transform:uppercase}
body.area-page .area-audience{display:block;width:min(920px,88%);min-height:0;padding:0;overflow:visible;border:0;border-radius:0;background:transparent;text-align:center}
body.area-page .area-audience+article{padding:0;border:0;background:transparent}
body.area-page .area-audience:after{display:none}
body.area-page .area-audience>span{color:#536779;font-size:10px}
body.area-page .area-audience h3{max-width:none;margin:13px 0 20px;color:#07172c;font-size:clamp(29px,3vw,40px);line-height:1.02}
body.area-page .area-audience p{max-width:78ch;margin:0 auto;color:#405469;font-size:14px;line-height:1.65}
body.area-page .area-audience-media{position:relative;z-index:1;width:100%;height:clamp(400px,45vw,580px);margin:0;overflow:hidden;border:0;border-radius:9px;background:#dbe3e8}
body.area-page .area-audience-media:after{content:"";position:absolute;z-index:2;left:0;bottom:0;width:48%;height:var(--audience-cut);border-radius:0 11px 0 0;background:#e8edf0;pointer-events:none}
body.area-page .area-audience-media img{
  width:100%;
  height:calc(100% + 110px);
  margin-top:-55px;
  object-fit:cover;
  transform:translate3d(0,var(--area-y,0),0);
  will-change:transform
}
body.area-page .area-audience-cta{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;min-height:540px;margin-top:calc((var(--audience-cut) - var(--audience-gap)) * -1);padding:calc(var(--audience-cut) + 64px) 52px 54px;color:#fff;background:transparent;border-radius:0;text-align:center;isolation:isolate}
body.area-page .area-audience-cta:before{content:"";position:absolute;z-index:-1;top:0;left:0;width:calc(48% - var(--audience-gap));height:calc(var(--audience-cut) + 11px);border-radius:11px;background:#20395f;pointer-events:none}
body.area-page .area-audience-cta:after{content:"";position:absolute;z-index:-1;top:var(--audience-cut);right:0;bottom:0;left:0;border-radius:11px;background:#20395f;pointer-events:none}
body.area-page .area-audience-cta>span{position:absolute;top:34px;left:34px;width:calc(48% - 68px);color:rgba(255,255,255,.68);font-size:13px;font-weight:500;letter-spacing:.12em;text-align:left;text-transform:uppercase}
body.area-page .area-audience-cta h2{max-width:18ch;margin:0 auto;color:#fff;font-size:clamp(43px,5vw,66px);font-weight:400;line-height:.97;letter-spacing:-.055em;text-align:center}
body.area-page .area-audience-cta>div{display:contents}
body.area-page .area-audience-cta p{position:absolute;top:78px;left:34px;width:calc(48% - 68px);max-width:42ch;margin:0;color:rgba(255,255,255,.8);font-size:17px;line-height:1.5;text-align:left}
body.area-page .area-audience-cta a{display:inline-flex;margin-top:38px;padding:14px 18px;border-radius:999px;background:#f7f9fb;color:#07172c;font-size:11px;font-weight:650;text-decoration:none}

@media(max-width:900px){
  body.area-geriatria .area-hero-copy,body.area-geriatria .area-index{grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr)}
  body.area-geriatria .area-hero h1{font-size:43px}
  body.area-page .area-audience-content{min-height:480px;padding:58px 34px 74px}
  body.area-page .area-audience-cta{min-height:510px;padding:calc(var(--audience-cut) + 54px) 34px 44px}
}
@media(max-width:620px){
  body.area-geriatria .area-hero-copy{grid-template-columns:1fr}
  body.area-geriatria .area-hero h1{max-width:16ch;font-size:34px}
  body.area-geriatria .area-index{grid-template-columns:1fr}
  body.area-page .area-audience-content{gap:44px;min-height:0;padding:48px 24px 66px}
  body.area-page .area-audience-content:before{margin-bottom:6px}
  body.area-page .area-audience{width:100%}
  body.area-page .area-audience-media{height:320px}
  body.area-page .area-audience-grid{--audience-cut:88px;--audience-gap:8px}
  body.area-page .area-audience-media:after{width:72%;height:var(--audience-cut);border-radius:0 9px 0 0}
  body.area-page .area-audience h3{font-size:31px}
  body.area-page .area-audience-cta{min-height:500px;padding:calc(var(--audience-cut) + 80px) 24px 40px}
  body.area-page .area-audience-cta:before{top:0;width:calc(72% - var(--audience-gap));height:calc(var(--audience-cut) + 9px);border-radius:9px}
  body.area-page .area-audience-cta:after{top:var(--audience-cut);border-radius:9px}
  body.area-page .area-audience-cta>span{top:24px;left:22px;width:calc(72% - 44px);font-size:10px}
  body.area-page .area-audience-cta p{top:56px;left:22px;width:calc(72% - 44px);font-size:13px;line-height:1.45}
  body.area-page .area-audience-cta h2{font-size:39px}
}

/* Navegación compartida — mismas proporciones que las páginas principales */
body.area-page .nav{top:18px}
body.area-page .nav.solid .nav-shell{
  width:calc(100% - 40px);
  max-width:none;
  min-height:86px;
  padding:10px 14px 10px 28px;
  border-color:rgba(7,23,44,.12);
  background:rgba(245,245,242,.92);
  color:#07172c;
  box-shadow:0 18px 55px rgba(7,19,38,.1);
  transform:none
}
body.area-page .brand{min-width:190px;gap:0}
body.area-page .brand-mark{
  width:auto;
  height:68px;
  max-width:220px;
  margin:-7px 0;
  padding:0;
  border-radius:0;
  background:transparent;
  object-fit:contain
}
body.area-page .brand-text{display:none}
body.area-page .nav-links{padding:5px 8px;background:rgba(7,23,44,.04)}
body.area-page .nav-link{font-size:15px}
body.area-page .nav-actions .button.light{min-height:58px;padding-inline:24px 10px;font-size:15px}

/* Volver — píldora horizontal compartida con catálogo */
.area-back{
  top:126px;
  left:28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  width:auto;
  height:62px;
  padding:0 28px 0 22px;
  border:1px solid rgba(20,35,59,.18);
  border-radius:999px;
  background:rgba(255,255,255,.9);
  color:#14233b;
  box-shadow:none;
  font-size:15px;
  font-weight:650;
  letter-spacing:.09em;
  text-transform:uppercase
}
.area-back svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.area-back span{font:inherit;transform:none}
.area-back:hover{background:#14233b;color:#fff;transform:translateX(-3px)}

/* Productos — carpeta a ancho completo sobre el fondo general */
body.area-page .area-products{background:var(--area-bg)}
body.area-page .area-products .area-shell{
  width:calc(100% - 32px);
  max-width:none;
  padding:60px clamp(16px,3vw,52px) 72px
}

/* Entendemos — título editorial a la derecha, lectura centrada debajo */
body.area-page .area-intro-grid{grid-template-columns:repeat(12,minmax(0,1fr))}
body.area-page .area-intro h2{grid-column:8/13;grid-row:1;justify-self:end}
body.area-page .area-intro-copy p,
body.area-page .area-intro-copy p:first-child{
  grid-column:2/12;
  width:100%;
  max-width:88ch;
  margin-inline:auto;
  text-align:center
}
body.area-page .area-intro-copy p:nth-child(1){grid-row:2;margin-top:clamp(64px,7vw,92px);padding:0}
body.area-page .area-intro-copy p:nth-child(2){grid-row:3;margin-top:24px}
body.area-page .area-intro-copy p:nth-child(3){grid-row:4;margin-top:24px;padding-top:0;border-top:0}

/* Color institucional solicitado para la tarjeta de orientación */
body.area-page .area-audience-cta:before,
body.area-page .area-audience-cta:after{background:#183a70}

@media(max-width:900px){
  body.area-page .area-intro h2{grid-column:7/13}
  body.area-page .area-intro-copy p,body.area-page .area-intro-copy p:first-child{grid-column:2/12}
}
@media(max-width:620px){
  body.area-page .area-intro h2{grid-column:1;grid-row:1}
  body.area-page .area-intro-copy p,body.area-page .area-intro-copy p:first-child{grid-column:1;max-width:100%;font-size:14px}
  body.area-page .area-intro-copy p:nth-child(1){grid-row:2;margin-top:48px}
  body.area-page .area-intro-copy p:nth-child(2){grid-row:3;margin-top:22px}
  body.area-page .area-intro-copy p:nth-child(3){grid-row:4;margin-top:22px;padding:0}
  body.area-page .area-products .area-shell{width:calc(100% - 16px)}
}

/* Tamaño y cristal idénticos al header compartido */
body.area-page .nav{top:18px}
body.area-page .nav.solid .nav-shell{
  width:min(100% - 32px,1180px);
  min-height:62px;
  padding:8px 10px 8px 14px;
  border-color:rgba(7,23,44,.11);
  background:rgba(245,245,242,.74);
  box-shadow:0 18px 55px rgba(7,19,38,.08);
  backdrop-filter:blur(18px) saturate(1.08);
  -webkit-backdrop-filter:blur(18px) saturate(1.08)
}
body.area-page .brand{min-width:0}
body.area-page .brand-mark{width:auto;height:62px;max-width:200px;margin:-8px 0}
body.area-page .nav-links{padding:3px;background:rgba(7,23,44,.04)}
body.area-page .nav-link{padding:8px 13px;font-size:13px}
body.area-page .nav-actions .button.light{min-height:46px;padding:9px 10px 9px 17px;font-size:13px}

/* Volver — misma escala compacta y transparencia suave */
.area-back{
  top:100px;
  left:max(26px,calc((100vw - 1180px)/2));
  gap:8px;
  height:auto;
  min-height:42px;
  padding:9px 16px 9px 12px;
  background:rgba(255,255,255,.76);
  border-color:rgba(20,35,59,.16);
  box-shadow:0 10px 28px rgba(20,35,59,.06);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  font-size:12px
}
.area-back svg{width:14px;height:14px}

@media(max-width:900px){
  body.area-page .nav.solid .nav-shell{width:calc(100% - 28px)}
  .area-back{top:94px;left:16px}
}
@media(max-width:620px){
  body.area-page .nav{top:8px}
  body.area-page .nav.solid .nav-shell{min-height:58px;padding-inline:12px}
  body.area-page .brand-mark{width:118px;height:44px;margin:-4px 0}
  .area-back{top:76px;left:14px;min-height:40px;padding:8px 14px 8px 10px;font-size:11px}
}

/* Corrección final: bloque de lectura realmente único y centrado */
body.area-page .area-intro-copy{
  grid-column:2/12;
  grid-row:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  width:100%;
  margin-top:clamp(64px,7vw,92px);
  padding:0;
  gap:24px
}
body.area-page .area-intro-copy p,
body.area-page .area-intro-copy p:first-child,
body.area-page .area-intro-copy p:nth-child(1),
body.area-page .area-intro-copy p:nth-child(2),
body.area-page .area-intro-copy p:nth-child(3){
  display:block;
  width:100%;
  max-width:88ch;
  margin:0 auto;
  padding:0;
  border:0;
  text-align:center
}

/* Header: acabado exacto del original, con vidrio visible */
body.area-page .nav.solid .nav-shell{
  width:min(100% - 32px,1180px);
  max-width:1180px;
  min-height:62px;
  padding:8px 10px 8px 14px;
  border:1px solid rgba(7,23,44,.1);
  background:rgba(245,245,242,.78);
  color:#07172c;
  box-shadow:0 18px 60px rgba(32,57,95,.08),inset 0 1px 0 rgba(255,255,255,.72);
  backdrop-filter:blur(22px) saturate(1.12);
  -webkit-backdrop-filter:blur(22px) saturate(1.12);
  transform:none
}
body.area-page .nav-links{background:rgba(7,23,44,.04)}
body.area-page .nav-links .nav-link:first-child{background:rgba(32,57,95,.08)}
body.area-page .nav-actions .button.light{
  min-height:44px;
  gap:10px;
  padding:10px 10px 10px 18px;
  border-radius:999px;
  background:#07172c;
  color:#fff;
  font-size:14px;
  font-weight:800
}
body.area-page .nav-actions .button.light .button-icon{
  display:inline-grid;
  place-items:center;
  width:30px;
  height:30px;
  border-radius:50%;
  background:rgba(255,255,255,.14)
}

/* Primer texto — relleno progresivo ligado al scroll */
body.area-page .area-intro-copy p:first-child{
  max-width:48ch;
  color:rgba(64,84,105,.24);
  font-size:clamp(24px,2.25vw,34px);
  font-weight:600;
  line-height:1.3;
  letter-spacing:-.035em;
  text-wrap:balance;
  will-change:auto
}
body.area-page .area-fill-character{
  color:color-mix(in srgb,#07172c calc(var(--character-fill,0) * 100%),rgba(64,84,105,.24));
  -webkit-text-fill-color:currentColor
}
body.area-page .area-fill-word{display:inline-block;white-space:nowrap}

@media(max-width:900px){
  body.area-page .area-intro-copy{grid-column:1/13}
  body.area-page .nav.solid .nav-shell{width:calc(100% - 28px)}
}
@media(max-width:620px){
  body.area-page .area-intro-copy{grid-column:1;grid-row:2;margin-top:48px;gap:22px}
  body.area-page .nav.solid .nav-shell{width:calc(100% - 20px)}
  body.area-page .area-intro-copy p:first-child{font-size:clamp(21px,6.3vw,27px)}
}

@media(prefers-reduced-motion:reduce){
  body.area-page .area-intro-copy p:first-child,body.area-page .area-fill-character{color:#07172c;-webkit-text-fill-color:#07172c}
}

/* Header de Inicio: el mismo componente, sin variantes locales */
body.area-page .nav.solid .nav-shell{
  width:min(100% - 32px,1180px);
  min-height:62px;
  padding:8px 10px 8px 14px;
  border:1px solid rgba(7,23,44,.1);
  border-radius:999px;
  background:rgba(245,245,242,.78);
  box-shadow:0 18px 60px rgba(32,57,95,.08);
  color:#07172c;
  transform:none
}
body.area-page .brand{gap:0;min-width:0}
body.area-page .brand-mark{width:auto;height:62px;max-width:200px;margin:-8px 0;padding:0;border-radius:0;background:transparent}
body.area-page .nav-links{gap:2px;padding:3px;background:rgba(7,23,44,.04)}
body.area-page .nav-link{padding:8px 13px;font-size:13px;font-weight:700}
body.area-page .nav-link:hover,body.area-page .nav-link:first-child{background:rgba(32,57,95,.08)}
body.area-page .nav-actions .button.light{min-height:44px;gap:10px;padding:10px 10px 10px 18px;font-size:14px;font-weight:800}
body.area-page .nav-actions .button.light .button-icon{width:30px;height:30px;background:rgba(255,255,255,.14)}

/* Tarjeta editorial sin antetítulo y con tinta principal */
body.area-page .area-story-copy>span{display:none}
body.area-page .area-story-copy h2{color:#07172c}
body.area-page .area-story-copy{padding-top:40px}

/* El header de áreas usa el mismo icono informativo global */
body.area-page .nav-actions .button.light .button-icon{
  background-color:rgba(255,255,255,.14);
  background-image:url('/inconoinfo.png');
  background-repeat:no-repeat !important;
  background-position:center !important;
  background-size:21px 20px !important;
  color:transparent;
  font-size:0
}