@charset "UTF-8";
/* ============================================================================
   COLOMBIA ACCESIBLE — v4 · Editorial cálida
   ----------------------------------------------------------------------------
   Dirección tomada de las dos referencias de la carpeta Referencias:
     sageformstudio.com   papel crema, retícula de filetes, tabla de servicios
                          con imagen por fila, botones de pastilla, rótulos
                          de sección numerados
     myhealthprac.com     fotografía a sangre, portada partida en dos,
                          bloque de color tostado a media pantalla,
                          titulares grandes de interlineado ajustado
   ----------------------------------------------------------------------------
   Tipografía  Literata (titulares). Diseñada por Type Network para Google Play
               Books, pensada para lectura prolongada en pantalla.
               Instrument Sans para texto de interfaz.
   Color       Papel hueso cálido, tinta azul marino de marca, bloque tostado.
               El cian de marca se reserva para los botones de acción.
   Forma       Botones en pastilla. Todo lo demás con esquina recta.
               Regla única, sin excepciones.
   ============================================================================ */

@font-face{font-family:'Literata';font-style:normal;font-weight:600;font-display:swap;
  src:url('../fonts/literata-600.woff2') format('woff2');}
@font-face{font-family:'Literata';font-style:italic;font-weight:400;font-display:swap;
  src:url('../fonts/literata-400i.woff2') format('woff2');}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/instrument-400.woff2') format('woff2');}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:600;font-display:swap;
  src:url('../fonts/instrument-600.woff2') format('woff2');}

:root{
  /* Papel cálido */
  --paper:#f4f0e8;
  --paper-2:#eae4d8;
  --tan:#c9b39c;
  --surface:#fbf9f5;

  /* Tinta */
  --ink:#012853;
  --ink-soft:#4a5a66;
  --on-tan:#012853;

  /* Acento, solo botones de acción */
  --accent:#00abc5;
  --accent-hover:#2cc0d6;
  --on-accent:#012853;

  /* Filetes */
  --rule:#d8d0c0;
  --rule-strong:#012853;

  --maxw:1240px;
  --gutter:clamp(18px,4vw,40px);
  --pad-y:clamp(56px,7vw,104px);
  --header-h:64px;
  --r-pill:999px;

  --t:220ms;
  --ease:cubic-bezier(.2,.8,.3,1);
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#17120e;
    --paper-2:#211a14;
    --tan:#6b5443;
    --surface:#1e1810;
    --ink:#f4f0e8;
    --ink-soft:#bfb3a2;
    --on-tan:#f4f0e8;
    --accent:#2cc0d6;
    --accent-hover:#5fd7e8;
    --on-accent:#0b1d12;
    --rule:#3a3128;
    --rule-strong:#f4f0e8;
  }
}

*,*::before,*::after{box-sizing:border-box;}
html{font-size:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 12px);
  -webkit-text-size-adjust:100%;overflow-x:clip;}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:'Instrument Sans',system-ui,-apple-system,sans-serif;
  font-size:1.0625rem;line-height:1.6;-webkit-font-smoothing:antialiased;}
img{display:block;max-width:100%;height:auto;}
p{margin:0;}
ul,ol{margin:0;padding:0;list-style:none;}
a{color:inherit;}
button{font:inherit;color:inherit;background:none;border:0;}
h1,h2,h3{margin:0;font-family:'Literata',Georgia,serif;font-weight:600;
  line-height:1.12;letter-spacing:-.015em;}
::selection{background:var(--accent);color:var(--on-accent);}

:focus{outline:none;}
:focus-visible{outline:3px solid var(--ink);outline-offset:2px;box-shadow:0 0 0 6px #ffd23f;}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;}
.skip{position:absolute;left:var(--gutter);top:-100px;z-index:200;background:#ffd23f;color:#012853;
  font-weight:600;padding:14px 22px;text-decoration:none;transition:top var(--t) var(--ease);}
.skip:focus-visible{top:0;}
.icon{width:1em;height:1em;flex:0 0 auto;vertical-align:-.125em;}

/* Rótulo de sección numerado, tomado de la referencia SageForm */
.marca{display:flex;align-items:center;gap:10px;margin-bottom:clamp(20px,3vw,32px);
  font-size:.76rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);}
.marca .n{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;
  border:1px solid var(--rule-strong);font-family:'Literata',serif;font-size:.72rem;
  letter-spacing:0;color:var(--ink);flex:0 0 auto;}

.display{font-size:clamp(2.1rem,5vw,3.6rem);letter-spacing:-.025em;}
.h2{font-size:clamp(1.65rem,3.6vw,2.6rem);letter-spacing:-.02em;}
.h3{font-size:clamp(1.02rem,1.7vw,1.18rem);letter-spacing:-.005em;}
.lead{font-size:clamp(1.02rem,1.7vw,1.15rem);line-height:1.65;color:var(--ink-soft);}
.body{font-size:1.0625rem;line-height:1.7;color:var(--ink-soft);}
em.acento{font-style:italic;font-weight:400;color:var(--ink);}

/* ---------------------------------------------------------------- BOTONES */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:48px;padding:12px 26px;border-radius:var(--r-pill);
  font-family:'Instrument Sans',sans-serif;font-weight:600;font-size:.98rem;
  text-decoration:none;cursor:pointer;white-space:nowrap;border:1.5px solid transparent;
  transition:background var(--t) var(--ease),border-color var(--t) var(--ease),color var(--t) var(--ease);}
.btn--cta{background:var(--accent);color:var(--on-accent);}
.btn--cta:hover{background:var(--accent-hover);}
.btn--linea{border-color:var(--rule-strong);color:var(--ink);}
.btn--linea:hover{background:var(--ink);color:var(--paper);}
.btn--claro{border-color:currentColor;color:inherit;}
.btn--claro:hover{background:color-mix(in srgb,currentColor 14%,transparent);}
.btn--sm{min-height:44px;padding:10px 18px;font-size:.88rem;}

/* ============================================================================
   CABECERA — superpuesta a la portada, como en las dos referencias
   ============================================================================ */
.header{position:sticky;top:0;z-index:100;background:var(--paper);border-bottom:1px solid var(--rule);}
.header__in{display:flex;align-items:center;justify-content:space-between;gap:16px;height:var(--header-h);}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;min-height:44px;min-width:0;}
.brand img{width:30px;height:30px;flex:0 0 auto;}
.brand b{font-family:'Literata',serif;font-weight:600;font-size:.98rem;letter-spacing:-.01em;white-space:nowrap;}
.nav{display:none;}
@media (min-width:1000px){
  .nav{display:flex;align-items:center;gap:30px;}
  .nav a{display:inline-flex;align-items:center;min-height:44px;font-size:.9rem;
    letter-spacing:.02em;text-decoration:none;color:var(--ink-soft);
    border-bottom:1px solid transparent;transition:color var(--t) var(--ease),border-color var(--t) var(--ease);}
  .nav a:hover{color:var(--ink);border-bottom-color:var(--ink);}
}
.header__acc{display:flex;align-items:center;gap:10px;flex:0 0 auto;}
.header__cta{display:none;}
@media (min-width:1000px){.header__cta{display:inline-flex;}}
.navtoggle{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 16px;
  border:1px solid var(--rule-strong);border-radius:var(--r-pill);
  font-weight:600;font-size:.88rem;cursor:pointer;transition:background var(--t) var(--ease);}
.navtoggle:hover{background:var(--paper-2);}
@media (min-width:1000px){.navtoggle{display:none;}}
.menu{border-top:1px solid var(--rule);background:var(--paper);}
.menu[hidden]{display:none;}
@media (min-width:1000px){.menu{display:none!important;}}
.menu ul{padding:4px var(--gutter) 18px;}
.menu li+li{border-top:1px solid var(--rule);}
.menu a{display:flex;align-items:center;justify-content:space-between;padding:15px 0;
  text-decoration:none;font-family:'Literata',serif;font-weight:600;font-size:1.05rem;}
.menu .btn{margin:14px var(--gutter) 20px;display:flex;}

/* ============================================================================
   1 · PORTADA — pantalla partida en dos fotografías (referencia SageForm)
   ============================================================================ */
.hero{border-bottom:1px solid var(--rule);}
.hero__par{display:grid;grid-template-columns:1fr;}
@media (min-width:860px){.hero__par{grid-template-columns:1fr 1fr;}}
.hero__img{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--paper-2);}
@media (min-width:860px){.hero__img{aspect-ratio:auto;min-height:min(78dvh,680px);}}
.hero__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
/* La foto es apaisada y el hueco es vertical: se desplaza a la derecha para que
   la mano sobre el aro quede dentro tanto en movil (4:5) como en escritorio. */
.hero__img--b img{object-position:60% 45%;}
/* velo para garantizar contraste del texto superpuesto */
/* Velo calculado, no estimado: la camisa clara de la fotografia dejaba el texto
   en 2:1. Este degradado lleva la zona de texto por debajo de 0.18 de luminancia,
   que es lo que hace falta para 4.5:1 con texto blanco. */
.hero__img--a::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,
    rgba(1,14,28,.34) 0%,
    rgba(1,14,28,.40) 26%,
    rgba(1,14,28,.78) 46%,
    rgba(1,14,28,.88) 72%,
    rgba(1,14,28,.92) 100%);}
.hero__txt{position:absolute;inset:auto 0 0 0;z-index:2;padding:clamp(20px,3.5vw,38px);color:#fff;}
.hero__txt .rotulo{font-size:.74rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:#e9f4f8;margin-bottom:14px;}
.hero__txt h1{color:#fff;max-width:14ch;text-wrap:balance;}
.hero__acc{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(18px,2.5vw,26px);}

/* Pie de la portada: frase de apoyo sobre papel */
.hero__pie{padding:clamp(28px,4vw,52px) 0;}
.hero__pie .wrap{display:grid;gap:clamp(20px,3vw,44px);grid-template-columns:1fr;align-items:start;}
@media (min-width:860px){.hero__pie .wrap{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);}}
.hero__pie p{font-family:'Literata',serif;font-size:clamp(1.12rem,2.2vw,1.5rem);
  line-height:1.45;color:var(--ink);max-width:34ch;}
.cifras{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--rule);}
.cifras li{padding:16px 10px 0;border-left:1px solid var(--rule);}
.cifras li:first-child{border-left:0;padding-left:0;}
.cifras b{display:block;font-family:'Literata',serif;font-weight:600;
  font-size:clamp(1.1rem,2.2vw,1.5rem);line-height:1.1;}
.cifras span{display:block;margin-top:5px;font-size:.82rem;color:var(--ink-soft);line-height:1.4;}

/* ============================================================================
   2 · ENTIDADES
   ============================================================================ */
.entidades{padding:clamp(34px,4.5vw,56px) 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);}
.entidades .marca{margin-bottom:22px;}
.ent__rejilla{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(20px,3.5vw,48px) clamp(24px,4vw,56px);}
.ent__rejilla li{flex:0 0 auto;width:clamp(84px,11vw,120px);display:grid;place-items:center;}
.ent__rejilla img{max-width:100%;height:auto;mix-blend-mode:multiply;
  filter:grayscale(1);opacity:.62;transition:opacity var(--t) var(--ease),filter var(--t) var(--ease);}
.ent__rejilla li:hover img{filter:none;opacity:1;}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .ent__rejilla img{mix-blend-mode:normal;filter:grayscale(1) invert(1);opacity:.78;}
  :root:not([data-theme="light"]) .ent__rejilla li:hover img{filter:grayscale(1) invert(1);opacity:1;}
}

/* ============================================================================
   3 · SOBRE BERNY
   ============================================================================ */
.berny{padding-block:var(--pad-y);}
.berny__grid{display:grid;gap:clamp(26px,4vw,60px);grid-template-columns:1fr;align-items:start;}
@media (min-width:900px){.berny__grid{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);}}
.berny figure{margin:0;}
.berny figure img{width:100%;aspect-ratio:4/5;object-fit:cover;}
.berny figcaption{margin-top:10px;font-size:.82rem;color:var(--ink-soft);line-height:1.45;}
.berny__txt h2{max-width:17ch;}
.berny__txt .body{margin-top:20px;max-width:46ch;}
.motivos{margin-top:clamp(28px,4vw,44px);border-top:1px solid var(--rule);}
.motivos li{padding:20px 0;border-bottom:1px solid var(--rule);
  display:grid;gap:4px 24px;grid-template-columns:1fr;}
@media (min-width:700px){.motivos li{grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);align-items:baseline;}}
.motivos h3{font-size:1.04rem;}
.motivos p{font-size:.96rem;color:var(--ink-soft);line-height:1.6;}

/* ============================================================================
   4 · DECLARACIÓN — mitad imagen, mitad bloque tostado (referencia MyHealthPrac)
   ============================================================================ */
.declara{display:grid;grid-template-columns:1fr;}
@media (min-width:860px){.declara{grid-template-columns:1fr 1fr;}}
.declara__img{position:relative;aspect-ratio:4/5;background:var(--paper-2);overflow:hidden;}
@media (min-width:860px){.declara__img{aspect-ratio:auto;}}
.declara__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.declara__blq{background:var(--tan);color:var(--on-tan);
  padding:clamp(34px,5vw,72px) clamp(24px,4vw,64px);display:flex;flex-direction:column;justify-content:center;}
.declara__blq .marca{color:var(--on-tan);opacity:.85;}
.declara__blq .marca .n{border-color:var(--on-tan);color:var(--on-tan);}
.declara__blq h2{color:var(--on-tan);text-wrap:balance;}
.declara__blq p{margin-top:22px;font-size:clamp(.98rem,1.7vw,1.08rem);line-height:1.7;
  color:var(--on-tan);opacity:.92;max-width:52ch;}

/* ============================================================================
   5 · SERVICIOS — tabla de filetes con imagen por fila (referencia SageForm)
   ============================================================================ */
.servicios{padding-block:var(--pad-y);}
.servicios__cab{max-width:40rem;margin-bottom:clamp(26px,4vw,44px);}
.servicios__cab p{margin-top:16px;}
.tabla{border-top:1px solid var(--rule-strong);}
.tabla li{border-bottom:1px solid var(--rule);
  display:grid;gap:10px 28px;padding:clamp(20px,2.6vw,30px) 0;grid-template-columns:1fr;}
@media (min-width:820px){
  .tabla li{grid-template-columns:minmax(0,.6fr) minmax(0,1.5fr) minmax(0,.5fr);align-items:start;}
}
.tabla h3{font-size:1.02rem;letter-spacing:-.005em;}
.tabla p{font-size:.96rem;color:var(--ink-soft);line-height:1.65;}
.tabla img{width:100%;aspect-ratio:16/9;object-fit:cover;}
@media (max-width:819px){.tabla img{max-width:260px;}}

.servicios__cierre{margin-top:clamp(30px,4vw,48px);padding:clamp(24px,3.5vw,40px);
  border:1px solid var(--rule-strong);display:grid;gap:20px;align-items:center;grid-template-columns:1fr;}
@media (min-width:760px){.servicios__cierre{grid-template-columns:1fr auto;gap:36px;}}
.servicios__cierre h3{font-family:'Literata',serif;font-size:clamp(1.12rem,2.1vw,1.4rem);}
.servicios__cierre p{margin-top:6px;color:var(--ink-soft);max-width:46ch;font-size:.98rem;}

/* ============================================================================
   6 · POR QUÉ INVERTIR
   ============================================================================ */
.invertir{padding-block:var(--pad-y);background:var(--paper-2);}
.invertir__cab{max-width:36rem;margin-bottom:clamp(30px,4vw,52px);}
.cifras-g{display:grid;gap:0;grid-template-columns:1fr;border-top:1px solid var(--rule-strong);}
@media (min-width:880px){.cifras-g{grid-template-columns:1fr 1fr;}}
.cifras-g li{padding:clamp(26px,3.4vw,44px) 0;border-bottom:1px solid var(--rule);}
@media (min-width:880px){
  .cifras-g li{padding-inline:0 clamp(24px,3vw,48px);border-bottom:0;}
  .cifras-g li+li{padding-inline:clamp(24px,3vw,48px) 0;border-left:1px solid var(--rule);}
}
.cifras-g .n{font-family:'Literata',serif;font-weight:600;
  font-size:clamp(2.6rem,6vw,4.2rem);line-height:1;letter-spacing:-.035em;margin-bottom:16px;}
.cifras-g h3{font-size:clamp(1.08rem,2vw,1.32rem);margin-bottom:12px;}
.cifras-g p{color:var(--ink-soft);line-height:1.7;font-size:.99rem;}
.cifras-g small{display:block;margin-top:16px;font-size:.78rem;color:var(--ink-soft);line-height:1.5;}

/* ============================================================================
   7 · CONTACTO
   ============================================================================ */
.contacto{padding-block:var(--pad-y);background:var(--ink);color:var(--paper);}
.contacto .wrap{max-width:820px;text-align:center;}
.contacto .marca{justify-content:center;color:var(--paper);opacity:.8;}
.contacto .marca .n{border-color:var(--paper);color:var(--paper);}
.contacto h2{color:var(--paper);text-wrap:balance;}
.contacto .lead{margin:20px auto 0;color:var(--paper);opacity:.88;max-width:52ch;}
.contacto__acc{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:clamp(28px,4vw,40px);}
.contacto__fir{margin-top:clamp(30px,4vw,48px);padding-top:22px;border-top:1px solid rgba(244,240,232,.22);}
.contacto__fir b{display:block;font-family:'Literata',serif;font-weight:600;font-size:1.05rem;}
.contacto__fir span{display:block;margin-top:4px;font-size:.94rem;opacity:.82;}

.pie{padding-block:26px;border-top:1px solid var(--rule);}
.pie .wrap{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;}
.pie p{font-size:.84rem;color:var(--ink-soft);}
.pie a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding-block:10px;
  font-size:.84rem;color:var(--ink-soft);text-decoration:none;}
.pie a:hover{color:var(--ink);text-decoration:underline;}

/* ============================================================== MOVIMIENTO */
.js [data-rev]{opacity:0;transform:translateY(12px);}
.js [data-rev].vis{opacity:1;transform:none;
  transition:opacity 420ms var(--ease) var(--d,0ms),transform 420ms var(--ease) var(--d,0ms);}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;}
  .js [data-rev]{opacity:1!important;transform:none!important;}
}
@media (prefers-contrast:more){
  :root{--ink-soft:#1d3040;--rule:#9b9382;}
  .ent__rejilla img{filter:none;opacity:1;}
}
@media (forced-colors:active){
  .btn,.tabla li,.servicios__cierre{border:1px solid CanvasText;}
  .hero__img--a::after{display:none;}
}
@media print{
  .header,.menu,.navtoggle,.hero__acc,.contacto__acc,.pie a{display:none!important;}
  body{background:#fff;color:#000;font-size:11pt;}
  .contacto,.declara__blq{background:#fff!important;color:#000!important;}
  .contacto h2,.contacto .lead,.contacto__fir b,.contacto__fir span{color:#000!important;}
  section{padding-block:14pt;break-inside:avoid;}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;}
}