/* V3: template.webp composition. Fluid 94% page grid; Inter; connected cells. */
@font-face{font-family:Inter;src:url('../fonts/inter-latin.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
:root{--ink:#111719;--muted:#434d58;--paper:#fff;--soft:#f4f7fb;--line:#d6dfea;--orange:#ff6b00;--orange-hover:#ff8f3d;--blue:#006aff;--blue-hover:#3d8eff;--blue-a10:#006aff1a;--blue-a20:#006aff33;--orange-a10:#ff6b001a;--orange-a20:#ff6b0033;--ref-edge:3.15vw}
body.reference-home{font-family:Inter,Arial,sans-serif;color:var(--ink);font-size:18px;line-height:1.55}
.reference-home p{font-size:18px;line-height:1.55;color:var(--muted)}
.reference-home h1,.reference-home h2,.reference-home h3{font-family:'DM Sans',Arial,sans-serif;font-weight:450;letter-spacing:-.045em;line-height:1.1;text-wrap:initial}
.reference-home h2{font-size:clamp(34px,3.35vw,58px)}
.reference-home h3{font-size:clamp(21px,1.75vw,28px);letter-spacing:-.035em;line-height:1.3}
.reference-home figure{margin:0}
.reference-home .container,.ref-wrap{width:calc(100% - var(--ref-edge)*2);max-width:none;margin-inline:auto}
.ref-section{padding-block:clamp(80px,9vw,170px)}
.reference-home .button{border-radius:100px;min-height:48px;padding:13px 25px;font-size:15px;font-weight:500;gap:16px;background:var(--blue);color:white;box-shadow:none}
.reference-home .button:hover{background:var(--blue-hover);transform:none}
.reference-home .button .arrow{transform:rotate(-40deg)}
.reference-home .button:hover .arrow{transform:rotate(-40deg) translateX(2px)}
.reference-home .button-white{background:#fff;color:var(--ink)}
.reference-home .button-white:hover{background:#edf4ff}
.reference-home .button-ghost{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.reference-home .button-ghost:hover{background:#edf4ff}
.reference-home .button-row{gap:16px}
.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}
.reference-home .nav-bar{height:clamp(84px,7.4vw,120px);gap:24px}
.reference-home .wordmark{font-size:26px;letter-spacing:-.055em;color:inherit}
.reference-home .desktop-nav{gap:clamp(22px,2.6vw,48px);font-size:15px}
.reference-home .mobile-nav{width:100%;padding:16px var(--ref-edge) 24px;background:var(--ink);color:white}
.reference-home .mobile-nav a{border-color:#ffffff30}
/* Transparent overlay header: only for pages with a full-bleed dark/photo hero (.ref-has-hero). Other pages keep the normal sticky light header from site.css. */
.ref-has-hero .site-header{position:absolute;inset:0 0 auto;background:transparent;backdrop-filter:none;border-bottom:1px solid #ffffff38;box-shadow:none;color:#fff}
.ref-has-hero .site-header .brand-mark,.ref-has-hero .site-header .brand-dot{color:white}
.ref-has-hero .desktop-nav a{color:#fff}
.ref-has-hero .desktop-nav a[aria-current]:after{display:none}
.ref-has-hero .nav-actions>.button{background:white;color:var(--ink)}
.ref-has-hero .menu-toggle{color:#fff;border-color:#ffffff80}
.ref-has-hero .menu-toggle span{background:white}
.ref-hero{position:relative;background:var(--ink);color:#fff;min-height:700px}
.slider-stage{display:grid}
.ref-slide{grid-area:1/1;position:relative;min-height:max(700px,62.5vw);overflow:hidden;opacity:1;transition:opacity .6s ease}
.ref-hero-photo{position:absolute;inset:0}
.ref-hero-photo img{width:100%;height:100%;object-fit:cover;object-position:center 45%}
.ref-hero-photo:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,28,61,.8),rgba(8,28,61,.38) 52%,rgba(8,28,61,.12)),linear-gradient(0deg,rgba(8,28,61,.64),transparent 50%)}
.ref-hero-inner{position:relative;padding:clamp(155px,14.5vw,290px) var(--ref-edge) 40px;z-index:1}
.ref-hero-inner h2{font-size:clamp(60px,7.1vw,145px);line-height:1.025;letter-spacing:-.065em;max-width:78%;color:white;margin-bottom:clamp(45px,4.6vw,100px)}
.ref-hero-baseline{padding-top:32px;border-top:1px solid #ffffff45;min-height:200px}
.ref-scroll{position:absolute;right:var(--ref-edge);bottom:clamp(24px,4svh,48px);z-index:4;min-height:54px;display:inline-flex;align-items:center;font-size:14px;text-transform:uppercase;color:#fff;white-space:nowrap}
.ref-scroll span{margin-left:8px}
.ref-hero-description p{color:#fff;max-width:50ch;font-size:clamp(17px,1.4vw,24px);margin-bottom:clamp(28px,4vw,65px)}
.reference-home .button-hero-outline{background:transparent;border:1px solid #ffffffa8;color:#fff}
.reference-home .button-hero-outline:hover{background:#ffffff1a}
/* Controles del hero "al aire": UN solo componente (flechas + play/pausa + contador) sobre todo el hero.
   Por defecto queda en la esquina inferior derecha; en el chapter de escritorio (≥1101px) sube a la altura
   del encabezado, sobre el divisor (ver esa media query). "Descubre más" es independiente (.ref-scroll). */
.slider-controls{position:absolute;inset:0;z-index:4;pointer-events:none;display:flex;align-items:flex-end;justify-content:flex-end;padding:0 var(--ref-edge) 28px;gap:6px}
.ref-slider-actions{display:flex;align-items:center;gap:6px;font-size:14px;pointer-events:auto}
.ref-slider-actions button{min-width:36px;min-height:36px;padding:0;border:1px solid #ffffffa8;border-radius:100px;background:transparent;color:#fff;display:grid;place-items:center}
#slider-prev,#slider-next,#slider-play{min-width:47px;min-height:47px}
#slider-prev .icon-chevron,#slider-next .icon-chevron{width:23px;height:23px}
#slider-play .icon-play,#slider-play .icon-pause{width:16px;height:16px}
.ref-slider-actions button:hover{background:#ffffff1a}
#slider-play .icon-pause{display:none}
#slider-play[data-playing="true"] .icon-play{display:none}
#slider-play[data-playing="true"] .icon-pause{display:block}
#slider-count{margin-left:6px;color:#fff;font-variant-numeric:tabular-nums}
.ref-statement{font-size:clamp(38px,4.6vw,85px)!important;max-width:79%;line-height:1.07!important;letter-spacing:-.055em!important}
.ref-statement span{color:#5d6b7b}
.ref-introduction{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:65px;margin-bottom:110px}
.ref-kicker{display:flex;align-items:baseline;gap:8px;font-size:14px!important;line-height:1.5!important;margin-bottom:20px}
.ref-kicker:before{content:'';display:inline-block;flex-shrink:0;width:5px;height:5px;background:currentColor}
.ref-introduction h3{font-size:clamp(21px,1.7vw,28px);line-height:1.3;margin-bottom:24px;font-weight:500}
.ref-introduction>div>p{margin-bottom:24px}
.ref-feature{border:1px solid var(--line);border-radius:2px;overflow:hidden}
.ref-feature-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.ref-feature-tabs button{text-align:left;display:flex;flex-direction:column;gap:24px;padding:30px;border:0;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:white;color:var(--muted);font-size:18px;line-height:1.45;position:relative;min-height:200px}
.ref-feature-tabs button:last-child{border-right:0}
.ref-feature-tabs button svg{width:32px;height:32px;flex-shrink:0}
.ref-feature-tabs button[aria-selected=true]{color:var(--ink)}
.ref-feature-tabs button[aria-selected=true]:after{content:'';position:absolute;height:3px;background:var(--blue);left:30px;right:30px;bottom:0}
.ref-feature-panel{aspect-ratio:1.88;overflow:hidden}
.ref-feature-panel img{width:100%;height:100%;object-fit:cover;object-position:center 40%}
.ref-services{padding-top:0}



.ref-icon-box{display:grid;place-items:center;width:65px;height:65px;background:var(--ink);color:var(--orange);border-radius:2px}






.ref-dark{background:var(--brand-deep);color:#fff}
/* Kicker en blanco: el naranja daba 2.59:1 sobre el azul profundo de esta sección (ilegible). */
.ref-dark .ref-kicker{color:#fff}
.ref-dark .ref-statement{max-width:82%;color:white}
/* Lighter than .ref-dark: a translucent blue wash (style guide's accent-primary-a10 tint) rather
   than a solid fill, so the white service cards on top read as cards without a heavy block behind them. */
.ref-blue{background:var(--blue-a10);color:var(--ink)}
.ref-blue .ref-kicker{color:var(--brand-deep)}
.ref-blue .ref-statement{color:var(--ink)}
.ref-blue .ref-statement span{color:var(--blue)}
.ref-dark .ref-statement span{color:#c5dcff}
.ref-criteria{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:65px}
.ref-criterion{background:#fff;border-radius:22px;box-shadow:0 4px 18px rgba(17,23,25,.09);display:flex;flex-direction:column;min-height:300px;padding:28px 26px 32px}
.ref-criterion h3{font-size:20px;letter-spacing:0;color:var(--ink)}
.ref-criterion-index{margin-top:28px;border-top:4px solid var(--blue);padding-top:16px}
.ref-criterion-index span{font-size:clamp(40px,4vw,64px);letter-spacing:-.05em;line-height:1;color:var(--blue)}
.ref-criterion p{font-size:16px;color:var(--muted);margin-top:auto;padding-top:24px}
.ref-criteria-note{text-align:center;font-size:14px!important;margin-top:30px;color:#fff!important}
.ref-method{display:grid;grid-template-columns:1.1fr 1fr;gap:7.5%;align-items:stretch}
.ref-method figure{min-height:480px}
.ref-method figure img{width:100%;height:100%;object-fit:cover;object-position:65% center}
.ref-method h2{margin-bottom:30px}
.ref-method>div>p{margin-bottom:28px}
.ref-method .ref-method-copy{display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.ref-method .ref-method-copy .ref-kicker{margin-bottom:20px}
.ref-method .ref-method-copy h2{margin-bottom:0}
.ref-method .ref-method-copy .button-row{margin-top:28px}
.ref-checks{list-style:none;padding:0;margin:55px 0 0}
.ref-checks li{font-size:16px;padding:15px 0;border-bottom:1px solid var(--line);display:flex;gap:16px}
.ref-checks li:before{content:'✓';font-weight:600}
.ref-checks li:last-child{border:0}
.ref-method-strip{margin-top:90px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line)}
.ref-method-strip>div{padding:30px;border-right:1px solid var(--line)}
.ref-method-strip>div:first-child{padding-left:0}
.ref-method-strip>div:last-child{border:0}
.ref-method-strip svg{padding:10px;width:50px;height:50px;background:var(--soft);margin-bottom:20px}
.ref-method-strip h3{font-size:22px;margin-bottom:14px}
.ref-method-strip p{font-size:17px}
.reference-home .site-footer{background:#f4f7fb;border-top:1px solid var(--line)}
.reference-home .footer-top{grid-template-columns:1.3fr .8fr 1fr}
.reference-home .footer-note,.reference-home .footer-bottom,.reference-home .small{font-size:14px}
.reference-home .footer-top .eyebrow{font-size:14px}
@media(min-width:1800px){.ref-hero-description .button{font-size:18px}.ref-hero-baseline{min-height:270px}.ref-criterion{min-height:360px}}
@media(max-width:1100px){.reference-home .desktop-nav{display:none}.reference-home .menu-toggle{display:block}.reference-home .nav-bar{height:84px}.ref-slide{min-height:760px}.ref-hero-inner{padding-top:165px}.ref-hero-inner h2{font-size:7.7vw;max-width:90%}.ref-hero-baseline{padding-top:25px}.ref-scroll{display:none}.ref-hero-description p{font-size:18px}.ref-hero-description .button-row{gap:10px}.ref-hero-description .button{padding:12px 16px;font-size:14px}.slider-controls{gap:8px}.ref-slider-actions{gap:4px}.ref-criterion{min-height:320px}.ref-method{gap:40px}.ref-method figure{min-height:420px}.ref-method h2{font-size:34px}}
@media(max-width:760px){:root{--ref-edge:22px}.ref-section{padding-block:70px}.reference-home p{font-size:17px}.reference-home .nav-bar{height:76px}.reference-home .wordmark{font-size:23px}.reference-home .nav-actions .button{padding:11px 15px;min-height:42px;font-size:14px}.reference-home .nav-actions .button .arrow{display:none}.reference-home .nav-actions{gap:12px}.ref-hero{min-height:0;padding-bottom:24px}.ref-slide{min-height:0}.ref-hero-photo img{object-position:72% center}.ref-hero-photo:after{background:linear-gradient(90deg,#081c3dce,#081c3d66),linear-gradient(0deg,var(--brand-deep) 1%,transparent 60%)}.ref-hero-inner{padding:150px var(--ref-edge) 28px}.ref-hero-inner h2{font-size:clamp(38px,6.8vw,56px);line-height:1.08;max-width:none;margin-bottom:38px;min-height:3.3em}.ref-hero-baseline{display:block;padding-top:24px;min-height:0}.ref-hero-description p{font-size:17px;max-width:50ch;margin-bottom:25px;min-height:80px}.slider-controls{position:relative;inset:auto;width:calc(100% - var(--ref-edge)*2);margin:18px auto 0;padding:0}.ref-statement{font-size:36px!important;max-width:none}.ref-introduction{grid-template-columns:1fr;gap:24px;margin-top:35px;margin-bottom:55px}.ref-introduction h3{font-size:22px}.ref-kicker{font-size:14px!important}.ref-feature-tabs button{padding:18px 14px;gap:18px;font-size:15px;min-height:225px}.ref-feature-tabs button[aria-selected=true]:after{left:14px;right:14px}.ref-feature-panel{aspect-ratio:1.25}.ref-services{padding-top:0}.ref-icon-box{width:52px;height:52px}.ref-dark .ref-statement{max-width:none}.ref-criteria{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:40px}.ref-criterion{min-height:260px}.ref-criterion-index{margin-top:20px}.ref-criterion-index span{font-size:50px}.ref-method{grid-template-columns:1fr;gap:32px}.ref-method figure{min-height:0;aspect-ratio:1.12}.ref-checks{margin-top:30px}.ref-method-strip{margin-top:50px}.ref-method-strip>div{padding:20px 16px}.ref-method-strip h3{font-size:20px}.ref-method-strip p{font-size:16px}.reference-home .footer-top{grid-template-columns:1fr 1fr}.reference-home .footer-top>div:first-child{grid-column:1/-1}}
@media(max-width:480px){:root{--ref-edge:18px}.reference-home .nav-actions>.button{display:none}.reference-home .wordmark{font-size:21px}.reference-home .wordmark .brand-mark{width:23px}.reference-home .button{font-size:14px;padding:12px 18px;gap:10px}.reference-home .button-row{gap:12px}.ref-hero-inner{padding-top:135px}.ref-hero-inner h2{font-size:clamp(29px,7.7vw,36px)}.ref-slider-actions button{min-width:34px}.ref-statement{font-size:32px!important}.ref-feature-tabs{grid-template-columns:1fr}.ref-feature-tabs button{min-height:0;flex-direction:row;align-items:center;border-right:0;padding:20px;font-size:16px;gap:20px}.ref-feature-panel{aspect-ratio:1}.ref-criteria{grid-template-columns:1fr}.ref-criterion{min-height:220px}.ref-method-strip{grid-template-columns:1fr}.ref-method-strip>div,.ref-method-strip>div:first-child{padding:24px 0;border-right:0;border-bottom:1px solid var(--line)}.ref-method-strip>div:last-child{border-bottom:0}.ref-method-strip svg{margin-bottom:14px}.reference-home .footer-top{grid-template-columns:1fr}.ref-introduction .button-row{align-items:start;flex-direction:column}}
@media(prefers-reduced-motion:reduce){.ref-slide{transition:none}.reference-home *{scroll-behavior:auto;transition:none!important}}

/* Desktop chapters: viewport-based rhythm with natural overflow for short screens. */
@media (min-width: 1101px) {
  .ref-hero { min-height: 100vh; min-height: 100svh; }
  .ref-slide { min-height: 100vh; min-height: 100svh; }
  .ref-hero-inner {
    min-height: max(640px, 100vh);
    min-height: max(640px, 100svh);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-top: max(115px, 14svh);
    padding-bottom: clamp(24px, 4svh, 48px);
    gap: clamp(24px, 4svh, 48px);
  }
  .ref-hero-inner h2 {
    font-size: clamp(48px, min(6.3vw, 9.4svh), 110px);
    margin-bottom: 0;
  }
  /* Bloque de controles completo, a la altura del encabezado y sobre el divisor. */
  .ref-slider-actions { position: absolute; right: var(--ref-edge); bottom: 235px; }
  .ref-hero-baseline { min-height: 0; padding-top: 24px; }
  .ref-hero-description p { font-size: clamp(17px, 2.2svh, 21px); margin-bottom: 22px; }
  .ref-hero-description .button { padding: 11px 18px; font-size: 15px; }
  .ref-section { padding-block: clamp(40px, 6svh, 72px); }
  .ref-statement { font-size: clamp(36px, min(4.2vw, 6.3svh), 68px)!important; }
  .ref-introduction { margin-top: 40px; margin-bottom: 48px; }
  .ref-feature-tabs button { min-height: 150px; padding: 22px; flex-direction: row; align-items: center; gap: 24px; }
  .ref-feature-panel { aspect-ratio: 2.8; max-height: 56svh; }
  .ref-services { padding-top: 40px; }
  
  
  
  
  .ref-dark { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; }
  .ref-dark .ref-wrap { display: flex; flex-direction: column; }
  .ref-dark .ref-statement { max-width: 86%; }
  .ref-criteria { margin-top: clamp(28px, 4svh, 48px); }
  .ref-criterion { min-height: clamp(220px, 32svh, 340px); padding-top: 24px; }
  .ref-criterion-index { margin-top: clamp(20px, 3svh, 32px); padding-top: 16px; }
  .ref-criterion-index span { font-size: clamp(38px, 5.5svh, 60px); }
  .ref-criterion p { padding-top: 20px; }
  .ref-criteria-note { margin-top: 24px; }
  .ref-method-section {
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(24px, 4svh, 48px);
  }
  .ref-method { gap: 6%; }
  .ref-method figure { min-height: 360px; position: relative; }
  .ref-method figure img { position: absolute; inset: 0; }
  .ref-method h2 { margin-bottom: 20px; }
  .ref-method>div>p { margin-bottom: 20px; }
  .ref-checks { margin-top: 24px; }
  .ref-checks li { padding-block: 10px; align-items: center; }
  .ref-method-strip { margin-top: 0; }
  .ref-method-strip>div { padding: 22px 26px 0; display: grid; grid-template-columns: 64px 1fr; column-gap: 20px; row-gap: 8px; align-content: start; }
  .ref-method-strip .ref-symbol { grid-row: 1 / 3; margin-bottom: 0; }
  .ref-method-strip h3 { grid-column: 2; margin-bottom: 0; }
  .ref-method-strip p { grid-column: 2; }
}

/* V4: content rewrite — doubts grid, comparison, trust, FAQ, final CTA, lead modal. */
.ref-doubts-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; margin-top: 55px; }
.ref-doubts-grid.is-triple { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ref-doubt { background: #fff; border-radius: 22px; padding: 34px; display: flex; flex-direction: column; gap: 20px; box-shadow: 0 4px 18px rgba(17, 23, 25, .09); transition: box-shadow .2s ease, transform .2s ease; }
.ref-doubt:hover { box-shadow: 0 16px 34px rgba(17, 23, 25, .1); transform: translateY(-3px); }
.ref-doubt .ref-icon-box { width: 52px; height: 52px; }
.ref-doubt .ref-icon-box .ref-symbol { width: 28px; height: 28px; }
.ref-doubt h3 { font-size: 19px; font-weight: 500; line-height: 1.3; }
.ref-doubt p { font-size: 15px; line-height: 1.55; margin: 0; color: var(--muted); }
.ref-doubt-tag { margin-top: auto; background: var(--soft); border-radius: 13px; padding: 12px 14px; font-size: 13px; color: var(--ink); font-weight: 500; }
@media (max-width: 900px) { .ref-doubts-grid, .ref-doubts-grid.is-triple { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .ref-doubts-grid, .ref-doubts-grid.is-triple { grid-template-columns: 1fr; } .ref-doubt { padding: 26px; } }

.ref-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 50px; }
.ref-compare-card { border: 1px solid var(--line); border-radius: 22px; padding: 40px; display: flex; flex-direction: column; gap: 20px; }
/* Tarjeta positiva en azul. Todo el texto y los íconos van en blanco: la nota naranja y el
   tick naranja daban 1.63:1 sobre este azul (ilegibles). Azul profundo (#004fbc) con
   blanco da 7.38:1, bien por sobre el mínimo WCAG AA de 4.5:1. */
.ref-compare-card.is-positive { background: var(--brand-deep); color: #fff; border-color: var(--brand-deep); }
.ref-compare-card.is-positive li { color: #fff; }
.ref-compare-card.is-positive .ref-compare-note { color: #fff; }
.ref-compare-card h3 { font-size: 25px; font-weight: 500; }
.ref-compare-card ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 16px; }
.ref-compare-card li { display: flex; align-items: flex-start; gap: 14px; font-size: 17px; font-weight: 450; line-height: 1.5; }
.ref-compare-card li:before { content: '✕'; flex-shrink: 0; width: 27px; height: 27px; margin-top: 1px; border-radius: 50%; display: grid; place-items: center; background: #fbe7e5; color: #b3524a; font-weight: 700; font-size: 13px; }
.ref-compare-card.is-positive li:before { content: '✓'; background: rgba(255, 255, 255, .2); color: #fff; }
.ref-compare-note { margin-top: 4px; font-size: 13px; color: var(--orange); }
@media (max-width: 760px) { .ref-compare { grid-template-columns: 1fr; } .ref-compare-card { padding: 26px; } }


.ref-faq-layout { display: grid; grid-template-columns: 1.2fr 1fr; gap: 60px; align-items: start; }
/* Compactado: 8 preguntas cerradas ocupaban ~690px. La causa real no era solo el padding
   de .ref-faq details: <summary> y <details>p heredaban SU PROPIO padding (24px 0 y
   0 35px 25px 0) y <details> un border-bottom, de reglas genéricas de site.css que
   '.ref-faq summary'/'.ref-faq p'/'.ref-faq details' nunca neutralizaban — se sumaban
   al padding de la tarjeta sin que se notara en el CSS de esta sección. Con eso corregido
   y el padding/line-height reducidos, cada ítem cerrado queda en ~54px de alto (por sobre
   el mínimo de 44px recomendado para objetivos táctiles), sin duplicar espacio. */
.ref-faq { margin-top: 36px; display: flex; flex-direction: column; gap: 10px; }
.ref-faq details { background: #fff; border: 0; border-radius: 16px; padding: 16px 22px; box-shadow: 0 2px 10px rgba(17, 23, 25, .04); transition: box-shadow .22s ease; overflow: hidden; }
.ref-faq details[open] { box-shadow: 0 10px 26px rgba(17, 23, 25, .08); }
.ref-faq summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 0; cursor: pointer; list-style: none; font-size: 17px; line-height: 1.3; font-weight: 500; color: var(--ink); }
.ref-faq summary::-webkit-details-marker { display: none; }
.ref-faq summary:after { content: '+'; font-size: 22px; font-weight: 300; color: var(--blue); flex-shrink: 0; transition: transform .22s ease; line-height: 1; }
.ref-faq details[open] summary:after { transform: rotate(45deg); }
.ref-faq p { margin: 10px 0 0; padding: 0; font-size: 15px; color: var(--muted); max-width: 65ch; }
/* Columna lateral: solo la foto, pegada al tope mientras se recorre la lista.
   height:auto es necesario: qi_editorial_photo() pone width/height como atributos HTML
   (para reservar espacio y evitar layout shift), y sin una regla CSS propia de 'height'
   ese atributo gana por sobre 'aspect-ratio', dejándolo sin efecto. */
.ref-faq-aside { position: sticky; top: 120px; margin-top: 36px; }
.ref-faq-aside img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 22px; display: block; }
/* Cierre de la columna de preguntas (debajo de la lista, no en la columna lateral):
   texto a la izquierda y el enlace a la derecha, en una sola franja. */
.ref-faq-close { margin-top: 24px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px 32px; padding: 24px 26px; background: #fff; border-radius: 16px; box-shadow: 0 2px 10px rgba(17, 23, 25, .04); }
.ref-faq-close .ref-kicker { margin-bottom: 10px; }
.ref-faq-close h3 { font-size: 21px; margin-bottom: 6px; }
.ref-faq-close p { font-size: 15px; margin: 0; }
.ref-faq-close .text-link { flex-shrink: 0; }
@media (max-width: 900px) { .ref-faq-layout { grid-template-columns: 1fr; } .ref-faq-aside { position: static; margin-top: 36px; } .ref-faq-aside img { aspect-ratio: 16 / 9; } }
@media (max-width: 760px) { .ref-faq summary { font-size: 16px; } .ref-faq details { padding: 15px 18px; } }

.ref-final-cta { background: var(--ink); color: #fff; text-align: center; padding: clamp(70px, 10vw, 140px) 0; }
.ref-final-cta .ref-kicker { justify-content: center; color: var(--orange); }
.ref-final-cta h2 { color: #fff; max-width: 640px; margin: 0 auto; }
.ref-final-cta p { color: #d7dee5; max-width: 520px; margin: 20px auto 36px; }
.ref-final-cta .button-row { justify-content: center; }
.ref-final-cta .caption-note { margin-top: 20px; font-size: 13px; color: #9fb0c4; }

/* Formulario de contacto (modal de la home y página /contacto.php: mismas reglas para que se vean iguales).
   Jerarquía: título (h2) > título de bloque (.form-legend, 15px/600) > label de campo (14px/500) > ayuda (13px).
   Ritmo vertical: 24px entre bloques, 18px entre campos, 8px entre label e input. */
dialog.lead-modal { border: 0; border-radius: 26px; padding: 0; max-width: 680px; width: calc(100% - 32px); box-shadow: 0 30px 80px rgba(0, 0, 0, .3); overflow: hidden; }
dialog.lead-modal::backdrop { background: rgba(8, 20, 30, .6); }
.lead-modal__panel { padding: 40px 40px 0; position: relative; max-height: 88vh; overflow-y: auto; overscroll-behavior: contain; scroll-padding-block-end: 48px; }
@supports (height: 1dvh) { .lead-modal__panel { max-height: 88dvh; } }
/* Degradado inferior fijo: avisa de que hay más contenido bajo el pliegue. Ocupa el espacio que antes era padding inferior,
   así al llegar al final no tapa nada. */
.lead-modal__panel::after { content: ''; display: block; position: sticky; bottom: 0; height: 36px; background: linear-gradient(to top, #fff 25%, rgba(255, 255, 255, 0)); pointer-events: none; }
/* El ✕ acompaña al scroll (sticky) para poder cerrar sin volver arriba; los márgenes negativos no ocupan espacio. */
.lead-modal__close { position: sticky; top: -26px; z-index: 2; display: grid; place-items: center; width: 40px; height: 40px; margin: -26px -26px -14px auto; border: 0; border-radius: 50%; background: var(--soft); color: var(--ink); font-size: 16px; cursor: pointer; }
.lead-modal__close:hover { background: var(--line); }
.lead-modal__head { margin-bottom: 28px; }
.lead-modal .eyebrow { margin-bottom: 14px; padding-right: 44px; }
.lead-modal h2 { font-size: clamp(24px, 3vw, 30px); line-height: 1.15; margin: 0 0 10px; padding-right: 44px; text-wrap: balance; }
.lead-modal__head p { margin: 0; max-width: 46ch; font-size: 16px; line-height: 1.5; color: var(--muted); text-wrap: pretty; }
.form-block { margin-bottom: 24px; }
.form-legend { margin: 0 0 12px; font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--ink); }
.quiz-group { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; }
.quiz-chip { display: flex; align-items: center; min-height: 48px; padding: 10px 14px; border: 1px solid var(--line); background: #fff; border-radius: 12px; font-size: 14px; font-weight: 500; line-height: 1.25; text-align: left; color: var(--muted); cursor: pointer; transition: border-color .15s, background .15s, color .15s, box-shadow .15s; }
.quiz-chip:last-child { grid-column: 1 / -1; }
.quiz-chip:hover { border-color: var(--blue); }
.quiz-chip[aria-pressed="true"] { border-color: var(--blue); background: #edf4ff; color: var(--ink); box-shadow: inset 0 0 0 1px var(--blue); }
.form-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 16px; }
.form-fields .field-full { grid-column: 1 / -1; }
.qi-form .field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.qi-form .field label { font-size: 14px; font-weight: 500; line-height: 1.3; color: var(--ink); }
.qi-form .field label span { font-weight: 400; color: var(--muted); }
.qi-form .field small { font-size: 13px; line-height: 1.4; }
/* Misma altura para input y select (antes 56px vs 51px en una misma fila). */
.qi-form .field input, .qi-form .field select { height: 52px; }
.qi-form .field textarea { min-height: 96px; }
/* Bloque opcional plegado: reduce la altura del formulario y separa lo esencial de lo complementario. */
.form-more { margin: 0; border: 1px solid var(--line); border-radius: 14px; background: var(--soft); }
.form-more > summary { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 12px; row-gap: 2px; padding: 14px 18px; cursor: pointer; list-style: none; }
.form-more > summary::-webkit-details-marker { display: none; }
.form-more > summary::after { content: ''; grid-column: 2; grid-row: 1 / span 2; width: 9px; height: 9px; margin: -3px 4px 0 0; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .2s ease; }
.form-more[open] > summary::after { margin-top: 3px; transform: rotate(-135deg); }
.form-more__title { grid-column: 1; font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--ink); }
.form-more__hint { grid-column: 1; font-size: 13px; line-height: 1.4; color: var(--muted); }
.form-more[open] > summary { border-bottom: 1px solid var(--line); }
.form-more__body { display: grid; gap: 18px; padding: 20px 18px 22px; background: #fff; border-radius: 0 0 13px 13px; }
.form-more__body .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 16px; align-items: end; }
/* Dentro del bloque "Más detalles · opcional" el aviso por campo es redundante: queda solo para lectores de pantalla. */
.form-more__body .field label span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.qi-form .consent { margin-top: 24px; text-wrap: pretty; }
.qi-form .form-submit { margin-top: 20px; text-wrap: balance; }
.qi-form .form-status:empty { margin: 0; }
.qi-form .form-status:not(:empty) { margin-top: 14px; padding: 12px 14px; border-radius: 10px; background: #fdf1f1; color: #8f1f1f; font-size: 14px; font-weight: 500; line-height: 1.45; }
/* Estado de éxito sin caja verde anidada: chocaba con el ✕ y duplicaba el marco del contenedor. */
.lead-modal .success-panel, .ref-form-card .success-panel { padding: 8px 0 4px; background: none; }
.lead-modal .success-panel h2, .ref-form-card .success-panel h2 { margin: 18px 0 10px; padding-right: 0; }
.lead-modal .success-panel p, .ref-form-card .success-panel p { margin: 0 0 10px; font-size: 16px; line-height: 1.55; color: var(--muted); }
.lead-modal .success-panel p.small, .ref-form-card .success-panel p.small { font-size: 14px; }
.success-panel .success-sent strong { color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
.success-panel .button { margin-top: 14px; }
/* Tarjeta de la página de contacto: mismo tamaño de título y bajada que el modal. */
.ref-form-card h2 { font-size: clamp(24px, 3vw, 30px); line-height: 1.15; margin: 0 0 10px; text-wrap: balance; }
.ref-form-card #contact-form-content > p { margin: 0 0 28px; font-size: 16px; line-height: 1.5; color: var(--muted); }
@media (min-width: 901px) and (max-width: 1100px) { .ref-form-card .form-more__body .form-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .lead-modal__panel { padding: 32px 20px 0; }
  .lead-modal__panel::after { height: 28px; }
  .lead-modal__close { top: -20px; margin: -20px -8px -20px auto; }
  .lead-modal__head { margin-bottom: 24px; }
  .quiz-group { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .form-fields, .form-more__body .form-grid { grid-template-columns: 1fr; }
  .form-more__body { padding: 18px 16px 20px; }
}

/* V4.1 — warmer, softer card language: static explore cards, rounded/separated cards site-wide. */
.ref-explore-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 50px; }
.ref-explore-card { background: #fff; border-radius: 22px; overflow: hidden; box-shadow: 0 4px 18px rgba(17, 23, 25, .09); transition: box-shadow .2s ease, transform .2s ease; }
.ref-explore-card:hover { box-shadow: 0 16px 34px rgba(17, 23, 25, .1); transform: translateY(-3px); }
.ref-explore-card__media { display: block; aspect-ratio: 4 / 3; }
.ref-explore-card__media img { width: 100%; height: 100%; object-fit: cover; }
.ref-explore-card__body { padding: 22px 24px 26px; }
.ref-explore-card__body h3 { font-size: 20px; font-weight: 500; margin-bottom: 8px; }
.ref-explore-card__body p { font-size: 15px; line-height: 1.5; color: var(--muted); margin: 0; }
/* Sección "Nuestra mirada": kicker → título → descripción (izquierda) + CTA (derecha), y tarjetas de puntos de fricción. */
.ref-gradient { background: linear-gradient(120deg, var(--brand-deep) 0%, var(--blue) 100%); color: #fff; }
.ref-gradient .ref-kicker { color: #fff; }
.ref-gradient .ref-statement { color: #fff; }
.ref-gradient .ref-statement span { color: #c5dcff; }
.reference-home .ref-gradient .ref-section-intro { color: #fff; }
.ref-mirada-side { margin-top: 22px; }
.ref-mirada-side .ref-section-actions { margin-top: 28px; }
@media (min-width: 1101px) {
  .ref-mirada-head { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(40px, 6vw, 110px); align-items: start; }
  .ref-mirada-head .ref-statement { max-width: none; text-wrap: balance; }
  .ref-mirada-side { margin-top: 0; justify-self: end; width: max-content; max-width: 100%; }
  .reference-home .ref-mirada-side .ref-section-intro { width: 0; min-width: 100%; text-wrap: pretty; }
  .reference-home .ref-mirada-side .ref-section-intro { margin-top: 0; }
}
.ref-explore-grid.is-quad { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 64px; }
.ref-explore-grid.is-quad .ref-explore-card__body { padding: 24px 24px 28px; }
.ref-explore-grid.is-quad .ref-explore-card__body h3 { font-size: clamp(24px, 2vw, 28px); line-height: 1.15; margin-bottom: 6px; color: var(--ink); }
.ref-explore-grid.is-quad .ref-explore-card__media { aspect-ratio: 3 / 2; }
.ref-explore-grid.is-quad .ref-explore-card__body p { font-size: 16px; line-height: 1.5; color: var(--ink); }
.ref-explore-card__points { list-style: none; margin: 18px 0 0; padding: 18px 0 0; border-top: 1px solid var(--line); display: grid; gap: 12px; }
.ref-explore-card__points li { position: relative; padding-left: 18px; font-size: 15px; line-height: 1.45; color: var(--ink); }
.ref-explore-card__points li:before { content: ''; position: absolute; left: 0; top: .55em; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); }
@media (max-width: 1279px) { .ref-explore-grid.is-quad { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ref-explore-grid.is-quad .ref-explore-card__body h3 { font-size: 26px; } }
@media (max-width: 600px) { .ref-explore-grid.is-quad { grid-template-columns: 1fr; margin-top: 40px; } }
/* ≥1280px: las 4 tarjetas comparten filas (foto / título / descripción / puntos), así las descripciones quedan alineadas
   aunque un título ocupe 1 o 2 líneas, sin reservar una línea vacía. */
@media (min-width: 1280px) {
  .ref-explore-grid.is-quad { row-gap: 0; }
  .ref-explore-grid.is-quad .ref-explore-card { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; }
  .ref-explore-grid.is-quad .ref-explore-card__body { display: contents; }
  .ref-explore-grid.is-quad .ref-explore-card__body h3 { padding: 24px 24px 6px; margin: 0; text-wrap: pretty; }
  .ref-explore-grid.is-quad .ref-explore-card__body p { padding: 0 24px; }
  .ref-explore-grid.is-quad .ref-explore-card__points { margin: 18px 24px 28px; }
}
/* Solo con mouse en escritorio: los puntos clave se despliegan hacia abajo (superpuestos, sin mover el resto de la página).
   En táctil/tablet/mobile quedan siempre visibles. */
@media (hover: hover) and (pointer: fine) and (min-width: 1280px) {
  #nuestra-mirada { padding-bottom: calc(8vw + 80px); }
  .ref-explore-grid.is-quad .ref-explore-card { position: relative; overflow: visible; }
  .ref-explore-grid.is-quad .ref-explore-card__media { border-radius: 22px 22px 0 0; overflow: hidden; }
  .ref-explore-grid.is-quad .ref-explore-card__body p { padding-bottom: 64px; }
  .ref-explore-grid.is-quad .ref-explore-card:after { content: ''; position: absolute; right: 18px; bottom: 16px; width: 40px; height: 40px; box-sizing: border-box; border: 1.5px solid var(--blue); border-radius: 50%; color: #fff; background: linear-gradient(currentColor, currentColor) center / 14px 2px no-repeat, linear-gradient(currentColor, currentColor) center / 2px 14px no-repeat, var(--blue); transition: transform .3s ease, background-color .2s ease, color .2s ease, box-shadow .25s ease; }
  .ref-explore-grid.is-quad .ref-explore-card__points { position: absolute; left: 0; right: 0; top: 100%; margin: 0; padding: 0 24px; border-top: 0; background: #fff; border-radius: 0 0 22px 22px; box-shadow: inset 0 1px 0 var(--line), 0 20px 34px rgba(17, 23, 25, .12); max-height: 0; overflow: hidden; opacity: 0; transition: max-height .4s ease, padding .4s ease, opacity .25s ease; z-index: 6; }
  .ref-explore-grid.is-quad .ref-explore-card:hover, .ref-explore-grid.is-quad .ref-explore-card:focus-within { z-index: 8; border-radius: 22px 22px 0 0; }
  .ref-explore-grid.is-quad .ref-explore-card:hover .ref-explore-card__points, .ref-explore-grid.is-quad .ref-explore-card:focus-within .ref-explore-card__points { max-height: 360px; padding: 18px 24px 26px; opacity: 1; }
  .ref-explore-grid.is-quad .ref-explore-card:hover:after, .ref-explore-grid.is-quad .ref-explore-card:focus-within:after { transform: rotate(45deg); color: var(--blue); background-color: #fff; box-shadow: 0 10px 22px rgba(0, 106, 255, .32); }
}
@media (max-width: 900px) { .ref-explore-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .ref-explore-grid { grid-template-columns: 1fr; } }

/* Segments grid: from a collapsed hard-edged grid to separated, rounded cards. */




.ref-icon-box { border-radius: 16px; }

/* Criteria block: separated white cards now handle their own radius/shadow individually. */

/* V4.2 — breathing room between sections, tinted backgrounds so white cards read as cards, uppercase kickers. */
.ref-kicker { text-transform: uppercase; letter-spacing: .06em; }
.ref-tint { background: var(--soft); }
.reference-home .ref-section-intro { max-width: 620px; margin-top: 18px; font-size: 20px; line-height: 1.5; }
.ref-compare-note-cold { color: var(--muted); }
@media (min-width: 1101px) {
  .ref-section-roomy { padding-block: clamp(90px, 8vw, 160px); }
}

/* V5 — unify interior pages (nosotros, contacto, calculadora, legal, blog) with the home's visual language. */
.ref-page-hero { padding-top: clamp(56px, 7vw, 96px); padding-bottom: clamp(40px, 5vw, 64px); }
.ref-page-hero .ref-statement { max-width: none; }
.ref-page-hero p:not(.ref-kicker) { max-width: 62ch; margin-top: 20px; }

/* A simple dark statement block (kicker + statement + note), for dark sections that aren't the numbered criteria grid. */
.ref-dark-statement .ref-statement { max-width: 70%; }
.ref-dark-statement p:not(.ref-kicker) { color: #c4cfcc; max-width: 56ch; margin-top: 24px; }
.ref-dark-statement .text-link { color: #fff; margin-top: 20px; }
.ref-dark-statement .text-link:hover { color: var(--orange); }
@media (max-width: 760px) { .ref-dark-statement .ref-statement { max-width: none; } }

/* Post/explore card image placeholder (no featured image): same rounded card, tinted brand mark. */
.ref-explore-card__placeholder { width: 100%; height: 100%; display: grid; place-items: center; }
.ref-explore-card__placeholder .brand-mark { width: 48px; height: 48px; }
.ref-explore-card__placeholder-0 { background: #d7e9e4; color: #225e51; }
.ref-explore-card__placeholder-1 { background: #e2e9f4; color: #2c4a8f; }
.ref-explore-card__placeholder-2 { background: #eeede5; color: #7a6a45; }
.ref-explore-card__body .post-meta { margin-top: 0; }
.ref-explore-card__body .text-link { margin-top: 14px; }

/* Contact split layout: statement + checklist aside, rounded form card. */
.ref-contact-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 60px; align-items: start; }
.ref-contact-aside .ref-statement { max-width: none; }
.ref-contact-aside .ref-checks { margin-top: 32px; }
.ref-contact-aside .contact-note { margin-top: 32px; border-top: 1px solid var(--line); padding-top: 22px; }
.ref-form-card { background: #fff; border-radius: 22px; padding: 40px; box-shadow: 0 4px 18px rgba(17, 23, 25, .09); }
@media (max-width: 900px) { .ref-contact-grid { grid-template-columns: 1fr; gap: 36px; } .ref-form-card { padding: 28px 24px; } }

/* Qualifier fields (V3 lead form): the shared select/textarea block wasn't in the original field set. */
.field textarea { background: #fff; border: 1px solid #b7c2c6; border-radius: 8px; padding: 13px 14px; width: 100%; color: var(--ink); font: inherit; resize: vertical; }
.field textarea::placeholder { color: #758287; }
.field select { cursor: pointer; }

/* Calculator + legal prose cards get the same soft, rounded treatment. */
.calc-form, .calc-result { border-radius: 22px; }
.legal-copy .notice { border-radius: 16px; }
.resource-card { background: #fff; border: 0; border-radius: 22px; box-shadow: 0 4px 18px rgba(17, 23, 25, .09); transition: box-shadow .2s ease, transform .2s ease; }
.resource-card:hover { box-shadow: 0 16px 34px rgba(17, 23, 25, .1); transform: translateY(-3px); }
.filters .filter, .pagination a { border-radius: 100px; }

/* Article reading page: soften cover image and aside CTA to match the rounded card language. */
.article-cover { border-radius: 20px; }
.aside-cta { border-radius: 18px; }

/* ── Sección "perfiles-soluciones": puntos de entrada agrupados (Tu situación / Herramientas y temas) ──
   Cada tarjeta declara su acción ("Pedir orientación" abre el formulario; "Usar la calculadora" va a la herramienta).
   Desktop 4 columnas · tablet 2 · móvil 1 con tarjeta horizontal. */
.ref-services .ref-kicker { text-wrap: balance; }
.ref-services .ref-statement { margin-bottom: 18px; }
.ref-services .ref-statement span { display: block; text-wrap: balance; }
.ref-services .ref-section-intro { margin: 0 0 44px; max-width: 60ch; text-wrap: balance; }
.svc-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.svc-card { display: flex; flex-direction: column; gap: 10px; padding: 24px; background: #fff; border-radius: 22px; color: var(--ink); box-shadow: 0 4px 18px rgba(17, 23, 25, .09); transition: box-shadow .2s ease, transform .2s ease; }
.svc-card:hover { box-shadow: 0 16px 34px rgba(17, 23, 25, .12); transform: translateY(-3px); }
.svc-icon { display: grid; place-items: center; flex-shrink: 0; width: 48px; height: 48px; margin-bottom: 6px; border-radius: 14px; background: var(--blue); color: #fff; }
.svc-icon .ref-symbol { width: 26px; height: 26px; stroke-width: 1.6; }
.ref-services .svc-card h3 { margin: 0; font-size: 21px; font-weight: 500; line-height: 1.2; color: var(--ink); }
.ref-services .svc-card p { margin: 0; font-size: 16px; line-height: 1.5; color: var(--muted); }
.svc-card__cta { margin-top: auto; padding-top: 12px; min-height: 0; gap: 10px; font-size: 15px; font-weight: 600; color: var(--brand-deep); }
.svc-card:hover .svc-card__cta .arrow { transform: translateX(4px); }
/* Banda de cierre: color propio para que la acción principal destaque. */
.svc-cta { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px 40px; margin-top: 18px; padding: 28px 32px; border-radius: 22px; background: linear-gradient(140deg, var(--brand-deep), var(--blue)); color: #fff; }
.ref-services .svc-cta h3 { margin: 0 0 6px; font-size: 24px; font-weight: 500; line-height: 1.2; color: #fff; }
.ref-services .svc-cta p { margin: 0; max-width: 60ch; font-size: 16px; line-height: 1.5; color: #fff; }
.svc-cta :focus-visible { outline-color: #fff; }
@media (max-width: 1199px) { .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) {
  .ref-services .ref-section-intro { margin-bottom: 28px; }
  .svc-grid { grid-template-columns: 1fr; gap: 12px; }
  .svc-card { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; row-gap: 4px; padding: 20px; }
  .svc-icon { grid-row: 1 / span 3; width: 44px; height: 44px; margin: 0; }
  .ref-services .svc-card h3 { grid-column: 2; font-size: 19px; }
  .ref-services .svc-card p { grid-column: 2; font-size: 15px; }
  .svc-card__cta { grid-column: 2; padding-top: 6px; }
  .svc-cta { grid-template-columns: 1fr; padding: 22px 20px; }
  .svc-cta .button { justify-self: stretch; }
}

/* Tarjetas de dudas (#nuestra-mirada): cada una tiene ahora su acción; antes eran un callejón sin salida.
   Con mouse en escritorio la acción va abajo a la izquierda, frente al "+" que despliega los puntos. */
.ref-explore-card__cta { min-height: 0; gap: 10px; font-size: 15px; font-weight: 600; color: var(--brand-deep); }
.ref-explore-card:hover .ref-explore-card__cta .arrow { transform: translateX(4px); }
@media (min-width: 1280px) {
  .ref-explore-grid.is-quad .ref-explore-card { grid-row: span 5; }
  .ref-explore-grid.is-quad .ref-explore-card__cta { margin: 0 24px 28px; justify-self: start; align-self: start; }
}
@media (hover: hover) and (pointer: fine) and (min-width: 1280px) {
  .ref-explore-grid.is-quad .ref-explore-card__cta { position: absolute; left: 24px; bottom: 16px; margin: 0; min-height: 40px; }
}

/* Footer: 4 columnas en escritorio (marca / Explora / Hablemos / Legal), 2 en tablet
   (marca y Legal ocupan el ancho completo, Explora+Hablemos quedan al medio), 1 en
   móvil. Estas reglas son la única fuente de verdad para las columnas del footer:
   van al final del archivo a propósito, para ganar por orden de cascada sobre las
   declaraciones antiguas de '.footer-top' (site.css) y '.reference-home .footer-top'
   (más arriba en este archivo) sin tener que tocarlas ni arriesgar una regresión ahí. */
@media (min-width: 901px) {
  .reference-home .footer-top { grid-template-columns: 1.3fr 1fr 1fr .9fr; }
}
@media (max-width: 900px) {
  .reference-home .footer-top { grid-template-columns: 1fr 1fr; }
  .reference-home .footer-top > :first-child,
  .reference-home .footer-top > :last-child { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .reference-home .footer-top { grid-template-columns: 1fr; }
  .reference-home .footer-top > :first-child,
  .reference-home .footer-top > :last-child { grid-column: auto; }
}

/* ── V1.0 · Hero a pantalla completa en tablet y móvil ───────────────────────
   El hero ocupa todo el alto del viewport (svh evita el salto de la barra del
   navegador en móvil). El texto va al pie de la diapositiva y los controles
   quedan debajo, alineados a la derecha, dentro del mismo bloque. */
@media (max-width: 1100px) {
  .ref-hero { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; padding-bottom: 0; }
  .slider-stage { display: grid; flex: 1 1 auto; }
  .ref-slide { min-height: 0; display: flex; flex-direction: column; }
  .ref-hero-inner { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: flex-end; min-height: 100%; }
  .slider-controls { position: relative; inset: auto; width: 100%; margin: 0; padding: 0 var(--ref-edge) 28px; display: flex; justify-content: flex-end; }
}

/* ── V1.0 · Menú móvil: panel a pantalla completa que entra desde la izquierda ── */
body.reference-home #mobile-nav.mobile-nav {
  position: fixed; inset: 0; z-index: 200;
  width: 100%; height: 100vh; height: 100dvh; margin: 0; padding: 0 var(--ref-edge) 32px;
  display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain;
  background: var(--brand-deep); color: #fff;
  transform: translateX(100%); visibility: hidden;
  transition: transform .45s var(--ease), visibility 0s linear .45s;
}
body.reference-home #mobile-nav.mobile-nav.is-open {
  transform: translateX(0); visibility: visible;
  transition: transform .45s var(--ease), visibility 0s;
}
body.menu-open { overflow: hidden; }
#mobile-nav .mobile-nav__top { display: flex; align-items: center; justify-content: space-between; height: var(--header-height, 76px); flex-shrink: 0; }
#mobile-nav .mobile-nav__top .wordmark { font-size: 26px; color: #fff; }
#mobile-nav .brand-mark { color: #fff; }
#mobile-nav .brand-dot { color: #c5dcff; }
#mobile-nav .mobile-nav__close { position: relative; width: 44px; height: 44px; border: 1px solid #ffffff80; border-radius: 50%; background: transparent; cursor: pointer; flex-shrink: 0; }
#mobile-nav .mobile-nav__close span { position: absolute; left: 50%; top: 50%; width: 18px; height: 2px; margin: -1px 0 0 -9px; background: #fff; border-radius: 2px; }
#mobile-nav .mobile-nav__close span:first-child { transform: rotate(45deg); }
#mobile-nav .mobile-nav__close span:last-child { transform: rotate(-45deg); }
#mobile-nav .mobile-nav__close:focus-visible { outline-color: #fff; }
#mobile-nav .mobile-nav__links { display: flex; flex-direction: column; margin-top: clamp(24px, 8vh, 64px); }
#mobile-nav .mobile-nav__links a { display: block; padding: 18px 0; border-top: 1px solid #ffffff33; font-family: 'DM Sans', Arial, sans-serif; font-size: clamp(30px, 8vw, 42px); font-weight: 500; letter-spacing: -.03em; line-height: 1.1; color: #fff; }
#mobile-nav .mobile-nav__links a:last-child { border-bottom: 1px solid #ffffff33; }
#mobile-nav .mobile-nav__links a:hover { color: #c5dcff; }
#mobile-nav .mobile-nav__foot { margin-top: auto; padding-top: 32px; display: flex; flex-direction: column; gap: 14px; }
#mobile-nav .mobile-nav__foot .button { display: inline-flex; width: 100%; height: 56px; padding: 0 52px; border-top: 0; justify-content: center; align-items: center; background: #fff; color: var(--ink); }
#mobile-nav .mobile-nav__foot .button .arrow { background: var(--blue); color: #fff; }
#mobile-nav .mobile-nav__foot p { color: #c5dcff; font-size: 14px; text-align: center; margin: 0; }
@media (prefers-reduced-motion: reduce) { body.reference-home #mobile-nav.mobile-nav, body.reference-home #mobile-nav.mobile-nav.is-open { transition: none; } }

/* ── V1.0 · Sección "Orientación para cada momento de tu vida": aire superior en responsive.
   Antes padding-top:0 la pegaba al bloque anterior (0px de separación). Selector específico
   para no tocar la versión de escritorio. */
@media (max-width: 1100px) { section.ref-services.ref-section-roomy { padding-top: 88px; } }
@media (max-width: 760px) { section.ref-services.ref-section-roomy { padding-top: 72px; } }

/* ── V1.0 · Hero: la foto cubre también el pie donde están los controles ──
   Antes los controles iban debajo de la diapositiva y dejaban una franja de ~75 px
   sin foto. Ahora se superponen al pie del hero (sobre la foto, con el degradado
   azul de la base) y el texto deja espacio para ellos. */
@media (max-width: 1100px) {
  .slider-controls { position: absolute; inset: auto 0 0 0; z-index: 4; width: auto; margin: 0; padding: 0 var(--ref-edge) 24px; display: flex; justify-content: flex-end; }
  .ref-hero-inner { padding-bottom: 124px; }
}

/* ── V1.0 · Controles del hero en tablet y móvil ─────────────────────────────
   Los controles mismos (flechas, play/pausa, contador) se sientan sobre la línea
   divisoria bajo el título, a la mitad de su tamaño anterior. El botón visible mide 24px,
   pero el área de toque sigue siendo de 44px (pseudo-elemento), para no volverlos
   imposibles de tocar. El texto (CTA) queda al pie de la diapositiva. */
@media (max-width: 1100px) {
  .ref-hero-inner { padding-bottom: 28px; }
  /* Línea divisoria (border-top del bloque) con los controles justo debajo, a la derecha;
     el padding superior reserva ese espacio para que la descripción no se superponga. */
  .ref-hero-baseline { position: relative; padding-top: 56px; }
  .slider-controls { position: absolute; top: 14px; right: var(--ref-edge); left: auto; bottom: auto; z-index: 3; width: auto; margin: 0; padding: 0; transform: none; display: flex; justify-content: flex-end; align-items: center; }
  .ref-slider-actions { gap: 4px; }
  .ref-slider-actions button { position: relative; width: 24px; height: 24px; min-width: 24px; min-height: 24px; background: rgba(8, 28, 61, .6); }
  .ref-slider-actions button::before { content: ''; position: absolute; inset: -10px; }
  #slider-prev, #slider-next, #slider-play { min-width: 24px; min-height: 24px; }
  #slider-prev .icon-chevron, #slider-next .icon-chevron { width: 12px; height: 12px; }
  #slider-play .icon-play, #slider-play .icon-pause { width: 8px; height: 8px; }
  #slider-count { font-size: 11px; line-height: 1; margin-left: 6px; }
}

/* ── V1.0 · Título del hero: al doble del tamaño responsive anterior ──
   Antes: 7.7vw (≤1100), clamp(38px,6.8vw,56px) (≤760) y clamp(29px,7.7vw,36px) (≤480). */
/* Límite por altura (22svh): en viewports bajos (horizontal) el título no puede crecer más
   de lo que cabe, para que el CTA siga al pie del hero. */
@media (max-width: 1100px) { .ref-hero-inner h2 { font-size: min(15.4vw, 22svh); } .ref-hero-inner { padding-top: 120px; } }
@media (max-width: 760px) { .ref-hero-inner h2 { font-size: min(clamp(76px, 13.6vw, 112px), 22svh); } }
@media (max-width: 480px) { .ref-hero-inner h2 { font-size: min(clamp(58px, 15.4vw, 72px), 22svh); } .ref-hero-inner { padding-top: 110px; } .ref-hero-inner h2 { margin-bottom: 26px; } }

/* ── V1.0 · Botón del menú: sin contenedor y con el icono un 50 % más grande ──
   Barras de 18×1px separadas 10px → 27×1.5px separadas 15px. El área de toque sigue en 44px.
   El color sigue al texto del header (blanco sobre la portada, oscuro en el resto). */
body.reference-home .site-header .menu-toggle { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; }
body.reference-home .site-header .menu-toggle span { display: block; width: 27px; height: 1.5px; margin: 5px 0; background: currentColor; }

/* ── V1.0 · Título del hero: 15 % más chico y un poco menos de interlineado ──
   Tamaños previos: 15.4vw / 22svh (≤1100), clamp(76px,13.6vw,112px) (≤760), clamp(58px,15.4vw,72px) (≤480). */
@media (max-width: 1100px) { .ref-hero-inner h2 { font-size: min(calc(15.4vw * .85), calc(22svh * .85)); line-height: .98; } }
@media (max-width: 760px) { .ref-hero-inner h2 { font-size: min(calc(clamp(76px, 13.6vw, 112px) * .85), calc(22svh * .85)); line-height: 1.02; } }
@media (max-width: 480px) { .ref-hero-inner h2 { font-size: min(calc(clamp(58px, 15.4vw, 72px) * .85), calc(22svh * .85)); } }