/* Yutori Capital v4. Silencio cinematografico: fotografia real, titulares monumentales, oro del logo. Reglas en DESIGN.md */
/* tipografias servidas desde la propia web (licencia SIL OFL, ver assets/fonts/OFL-*.txt); son variables: un archivo por juego de caracteres cubre todos los pesos */
@font-face{ font-family:"Ibarra Real Nova"; font-style:normal; font-weight:400 500; font-display:swap; src:url(assets/fonts/ibarra-real-nova-latin.woff2) format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:"Ibarra Real Nova"; font-style:normal; font-weight:400 500; font-display:swap; src:url(assets/fonts/ibarra-real-nova-latin-ext.woff2) format("woff2"); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face{ font-family:"Hanken Grotesk"; font-style:normal; font-weight:300 500; font-display:swap; src:url(assets/fonts/hanken-grotesk-latin.woff2) format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:"Hanken Grotesk"; font-style:normal; font-weight:300 500; font-display:swap; src:url(assets/fonts/hanken-grotesk-latin-ext.woff2) format("woff2"); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
:root{
  --tinta:#0B0D14; --papel:#F3F2EE; --piedra-clara:#E7E5DF; --piedra:#5C5E67; --texto:#23252E;
  --oro:#C89659; --oro-claro:#D9B274; --oro-texto:#7D5A29; --blanco:#F6F5F1;
  --serif:"Ibarra Real Nova", Georgia, "Times New Roman", serif;
  --sans:"Hanken Grotesk", "Segoe UI", system-ui, sans-serif;
  --lado:clamp(22px, 5.6vw, 104px);
  --cab:84px;
  /* el minimo de cada titular empalma con la escala movil a 760 px; desde 1000 px manda el vw y no cambia nada */
  --t-portada:clamp(2.95rem, 6.2vw, 7.6rem);
  --t-foto:clamp(2.625rem, 5.2vw, 5.6rem);
  --t-seccion:clamp(2.44rem, 4.4vw, 4.7rem);
  --t-menor:clamp(2.125rem, 3.6vw, 3.8rem);
}
/* escala propia del telefono: los tipos crecen de 360 a 430 px, cuerpo a 16 px, 20 px de margen y tres espacios verticales */
@media (max-width:760px){
  :root{
    --lado:20px;
    --cab:60px;
    --t-portada:clamp(2.5rem, .25rem + 10vw, 2.95rem);
    --t-foto:clamp(2.25rem, .32rem + 8.57vw, 2.625rem);
    --t-seccion:clamp(2.125rem, .52rem + 7.14vw, 2.44rem);
    --t-menor:clamp(1.875rem, .59rem + 5.71vw, 2.125rem);
    --t-h3:clamp(1.4375rem, .473rem + 4.286vw, 1.625rem);
    --t-frase:clamp(1.25rem, .607rem + 2.857vw, 1.375rem);
    --t-cuerpo:1rem;
    --t-entrada:1.0625rem;
    --t-nota:.875rem;
    --e-denso:clamp(56px, 15vw, 64px);
    --e-seccion:clamp(76px, 21vw, 92px);
    --e-amplio:clamp(104px, 29vw, 124px);
    --e-texto:clamp(20px, 5.714vw - .571px, 24px);
    --e-lista:clamp(32px, 11.429vw - 9.143px, 40px);
  }
}
*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:var(--cab) }
body{ margin:0; background:var(--papel); color:var(--texto); font:400 1.0625rem/1.66 var(--sans); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility }
img{ max-width:100%; height:auto; display:block }
a{ color:inherit }
h1,h2,h3,h4{ margin:0; font-family:var(--serif); font-weight:400; color:var(--tinta); letter-spacing:-.012em; line-height:1.02; text-wrap:balance; text-align:left }
p,ul,ol,dl,figure,fieldset{ margin:0 }
p,li,dd{ text-align:justify; hyphens:manual; -webkit-hyphens:manual }
:focus-visible{ outline:2px solid var(--oro); outline-offset:4px }
[hidden]{ display:none !important }
.visual-oculto{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }
.salto{ position:absolute; left:12px; top:-80px; z-index:90; background:var(--tinta); color:var(--blanco); padding:10px 16px }
.salto:focus{ top:12px }
.env{ width:100%; max-width:calc(1480px + var(--lado) * 2); margin-inline:auto; padding-inline:var(--lado) }
@media (max-width:760px){
  body{ font-size:var(--t-cuerpo); line-height:1.62 }
  /* en el telefono los titulares usan todo el ancho; la portada conserva su tope */
  :root:is(:lang(es),:lang(en)) main :is(h2,h3){ max-width:none }
  /* titulares de dos golpes: cada golpe en su linea */
  .golpe{ display:block }
  /* en columna estrecha el justificado reparte las ultimas lineas para no dejar restos de palabra sueltos */
  p,li,dd{ text-wrap:pretty }
}

/* botones */
.btn{ display:inline-flex; align-items:center; justify-content:center; padding:1.05em 1.75em; border:0; border-radius:2px; font:500 1rem/1 var(--sans); letter-spacing:.005em; text-decoration:none; cursor:pointer; transition:background-color .3s, color .3s, box-shadow .3s }
.btn-blanco{ background:var(--blanco); color:var(--tinta) }
.btn-borde{ background:transparent; color:inherit; box-shadow:inset 0 0 0 1px currentColor; padding:.8em 1.3em; font-size:.93rem }
@media (hover:hover){
  .btn-blanco:hover{ background:#fff }
  .btn-borde:hover{ color:inherit; background:rgba(127,127,127,.14) }
}
a,button,summary,label{ -webkit-tap-highlight-color:transparent; touch-action:manipulation }
@media (hover:none){
  .btn-blanco:active{ background:#DEDCD4; transition:none }
  .btn-borde:active{ background:rgba(127,127,127,.18); transition:none }
  .opcion:active span{ border-color:rgba(246,245,241,.5); background:rgba(246,245,241,.05); transition:none }
  summary:active,.enlace:active,.enlace-claro:active,.pie nav a:active,.abre-menu:active{ opacity:.62; transition:none }
}
.enlace{ font-weight:500; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.32em }
.enlace-claro{ color:var(--blanco); font-weight:500; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.32em }
@media (max-width:760px){ .enlace-claro,.enlace.correo{ display:inline-block; padding-block:10px } }

/* cabecera */
/* color y fondo cambian a la vez: si se animaran por separado, Hablemos perderia contraste a mitad de camino */
.cab{ position:fixed; inset:0 0 auto; z-index:60; color:var(--blanco); transition:box-shadow .4s }
.cab .env{ display:flex; align-items:center; justify-content:space-between; gap:24px; height:84px }
.marca{ display:flex; align-items:center; gap:12px; text-decoration:none }
.marca .m-enso{ height:40px; width:auto }
.marca .m-texto{ height:32px; width:auto }
.logo-oscuro{ display:none }
.menu{ display:none; list-style:none; padding:0; margin:0; gap:clamp(18px, 2.2vw, 34px) }
.menu a{ text-decoration:none; font-size:.95rem }
@media (hover:hover){ .menu a:hover{ text-decoration:underline; text-underline-offset:.35em } }
.cab.solida{ background:var(--papel); color:var(--tinta); box-shadow:0 1px 0 rgba(11,13,20,.08) }
.cab.solida .logo-claro{ display:none }
.cab.solida .logo-oscuro{ display:block }
@media (min-width:1000px){ .menu{ display:flex } }
@media (max-width:999px){ .cab nav{ display:none } }

/* menu del telefono y la tableta: la palabra Menu abre a pantalla completa el mismo nav, con la llamada y el idioma abajo */
.abre-menu,.menu-pie{ display:none }
@media (max-width:999px){
  .abre-menu{ display:inline-flex; align-items:center; justify-content:flex-end; min-width:44px; min-height:44px; padding:0 0 0 12px; border:0; background:none; color:inherit; font:500 .9375rem/1 var(--sans); cursor:pointer }
}
.cab.abierta{ background:var(--tinta); color:var(--blanco); box-shadow:none }
.cab.abierta .logo-claro{ display:block }
.cab.abierta .logo-oscuro{ display:none }
.cab.abierta .btn-borde{ visibility:hidden }
.cab.abierta nav{ display:flex; flex-direction:column; position:fixed; inset:var(--cab) 0 0; padding:28px var(--lado) calc(28px + env(safe-area-inset-bottom)); background:var(--tinta); overflow-y:auto; overscroll-behavior:contain }
.cab.abierta .menu{ display:block }
.cab.abierta .menu a{ display:block; padding-block:10px; font:400 var(--t-menor)/1.12 var(--serif); letter-spacing:-.01em; color:#fff }
.cab.abierta .menu-pie{ display:grid; justify-items:start; gap:8px; margin-top:auto; padding-top:36px }
.menu-pie .btn{ min-height:52px }
.idioma-menu{ display:inline-flex; align-items:center; min-height:44px; font:500 1rem/1 var(--sans); color:inherit; text-decoration:none }
@media (max-width:760px){
  /* cabecera de 60 px: marca, Hablemos y Menu caben desde 360 px; el idioma pasa al menu y al pie */
  .cab .env{ height:var(--cab); gap:10px }
  .cab .marca{ gap:9px; min-height:44px }
  .cab .marca .m-enso{ height:30px }
  .cab .marca .m-texto{ height:22px }
  .cab .cab-acciones{ gap:2px }
  .cab .cab-acciones > .idioma{ display:none }
  .cab .cab-acciones .btn-borde{ min-height:44px; padding:0 14px; font-size:.9375rem }
  /* mientras se ve otra llamada al contacto, Hablemos cede su sitio sin mover el boton Menu */
  .cab.sin-cta .cab-acciones .btn-borde{ visibility:hidden }
}

/* selector de idioma */
.cab-acciones{ display:flex; align-items:center; gap:clamp(6px, 1.6vw, 22px) }
.idioma{ display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; padding:0 6px; font:500 .95rem/1 var(--sans); color:inherit; text-decoration:none }
@media (hover:hover){ .idioma:hover{ text-decoration:underline; text-underline-offset:.35em } }
.idioma-largo{ display:none }
@media (min-width:1000px){ .idioma-corto{ display:none } .idioma-largo{ display:inline } }
.cabecera .cab-acciones{ color:var(--tinta) }
.cabecera .envoltura{ gap:16px }

/* en ingles las palabras son mas largas: algo mas de ancho para que los titulares no pasen a cuatro lineas */
:lang(en) .portada h1{ max-width:14ch }
:lang(en) .filo-texto h2{ max-width:12ch }
:lang(en) .conservar h2{ max-width:13ch }
:lang(en) .diagnostico h2{ max-width:15ch }
:lang(en) .fuera h2{ max-width:15ch }
:lang(en) .dinero h2{ max-width:15ch }
:lang(en) .equipo h2{ max-width:15ch }
@media (max-width:359px){
  .cabecera .marca .m-enso{ height:34px }
  .cabecera .marca .m-texto{ height:26px }
  .cab-acciones .btn{ padding:.75em 1em }
}

/* secciones con foto */
.foto-seccion{ position:relative; isolation:isolate; overflow:hidden; background:var(--tinta); color:var(--blanco) }
.foto-seccion .fondo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2 }
.foto-seccion::after{ content:""; position:absolute; inset:0; z-index:-1; background:var(--velo, linear-gradient(90deg, rgba(11,13,20,.86), rgba(11,13,20,.4))) }
.foto-seccion h1,.foto-seccion h2,.foto-seccion h3{ color:#fff }
.foto-seccion p,.foto-seccion li{ color:rgba(246,245,241,.86) }
.bloque{ padding-block:clamp(100px, 13vw, 210px) }
.oscuro{ background:var(--tinta); color:var(--blanco) }
.oscuro h2,.oscuro h3{ color:#fff }
.oscuro p,.oscuro li{ color:rgba(246,245,241,.8) }

/* portada */
.portada{ min-height:100svh; display:flex; align-items:flex-end; --velo:linear-gradient(180deg, rgba(11,13,20,.56) 0%, rgba(11,13,20,.14) 42%, rgba(11,13,20,.84) 100%) }
.portada .fondo{ object-position:50% 45% }
.portada .env{ position:relative; z-index:1; padding-block:150px clamp(56px, 10vh, 120px) }
.portada h1{ font-size:var(--t-portada); line-height:.98; letter-spacing:-.018em; max-width:11.5ch }
.portada .entrada{ max-width:37rem; margin-top:clamp(24px, 3vw, 40px); font-size:clamp(1.08rem, 1.45vw, 1.32rem); color:rgba(246,245,241,.9) }
.acciones{ display:flex; flex-wrap:wrap; align-items:center; gap:18px 30px; margin-top:clamp(28px, 3.4vw, 44px) }
.enso-hero{ position:absolute; z-index:0; right:1.5vw; top:clamp(84px, 13vh, 170px); width:min(37vw, 600px); pointer-events:none }
.enso-hero img{ width:100%; opacity:.9; -webkit-mask-image:conic-gradient(from 120deg, transparent 0 calc(100% - var(--giro)), #000 calc(100% - var(--giro)) 100%); mask-image:conic-gradient(from 120deg, transparent 0 calc(100% - var(--giro)), #000 calc(100% - var(--giro)) 100%); animation:trazo 3s cubic-bezier(.62,.04,.3,1) .3s both }
@property --giro{ syntax:"<percentage>"; inherits:false; initial-value:100% }
@keyframes trazo{ from{ --giro:0% } to{ --giro:100% } }
@media (max-width:760px){
  /* la portada cabe en una pantalla desde 360x740 y el titular gana contraste sobre la franja clara del horizonte */
  .portada{ flex-direction:column; justify-content:flex-end; align-items:stretch; --velo:linear-gradient(180deg, rgba(11,13,20,.5) 0%, rgba(11,13,20,.12) 28%, rgba(11,13,20,.5) 50%, rgba(11,13,20,.85) 100%) }
  .portada .fondo{ object-position:40% 50% }
  .portada .env{ padding-block:20px calc(40px + env(safe-area-inset-bottom)) }
  .portada h1{ line-height:1 }
  .portada .entrada{ margin-top:20px; font-size:var(--t-entrada) }
  .acciones{ gap:4px 24px; margin-top:28px }
  .acciones .btn{ min-height:52px }
  .enso-hero{ position:relative; top:auto; right:auto; align-self:flex-end; width:min(54vw, 250px); margin:calc(var(--cab) + 16px) var(--lado) 0 0 }
}
@media (max-width:760px) and (max-height:760px){
  .enso-hero{ width:min(44vw, 190px); margin-top:calc(var(--cab) + 8px) }
}

/* filosofia */
.filosofia{ background:var(--papel) }
.filo-texto{ max-width:calc(1480px + var(--lado) * 2); margin-inline:auto; padding:clamp(96px, 12vw, 190px) var(--lado) }
.filo-texto h2{ font-size:var(--t-seccion); max-width:9ch }
.filo-parrafos p{ max-width:34rem; margin-top:24px }
.filo-parrafos p.primero{ margin-top:clamp(28px, 3.4vw, 48px) }
.filo-marca{ display:flex; align-items:center; gap:20px; margin-top:clamp(36px, 4.5vw, 64px) }
.filo-marca img{ width:clamp(56px, 5vw, 76px); height:auto }
.filo-marca p{ max-width:22rem; font:400 clamp(1.1rem, 1.45vw, 1.35rem)/1.3 var(--serif); color:var(--tinta); text-align:left }
@media (min-width:980px){
  .filo-texto{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); column-gap:8vw; align-items:start }
  .filo-texto h2{ grid-column:1; grid-row:1 }
  .filo-marca{ grid-column:1; grid-row:2 }
  .filo-parrafos{ grid-column:2; grid-row:1 / span 2 }
  .filo-parrafos p.primero{ margin-top:.6em }
}
@media (max-width:760px){
  .filo-texto{ padding-block:var(--e-amplio) var(--e-seccion) }
  .filo-parrafos p{ margin-top:16px }
  .filo-parrafos p.primero{ margin-top:var(--e-texto) }
  .filo-marca p{ font-size:var(--t-frase); text-wrap:pretty }
}

/* muchas manos */
.manos h2{ font-size:var(--t-seccion); max-width:18ch }
.cascada{ list-style:none; padding:0; margin-top:clamp(44px, 6.5vw, 104px) }
.cascada li{ font:400 clamp(1.4rem, 2.6vw, 2.7rem)/1.22 var(--serif); letter-spacing:-.006em; color:rgba(246,245,241,.48); text-align:left; margin-top:.18em }
.cascada b{ font-weight:400; color:#fff }
.manos .remate{ max-width:31rem; margin-top:clamp(40px, 6vw, 90px); font-size:clamp(1.1rem, 1.5vw, 1.35rem) }
@media (max-width:760px){
  .manos{ padding-block:var(--e-amplio) var(--e-seccion) }
  .cascada{ margin-top:var(--e-lista) }
  .cascada li{ font-size:var(--t-frase); line-height:1.3; margin-top:.4em; text-wrap:pretty }
  .manos .remate{ margin-top:var(--e-texto); font-size:var(--t-entrada) }
}

/* conservar */
.conservar{ min-height:92vh; display:flex; align-items:center; background:var(--papel); color:var(--texto); --velo:linear-gradient(90deg, rgba(243,242,238,.97) 0%, rgba(243,242,238,.9) 36%, rgba(243,242,238,.36) 64%, rgba(243,242,238,0) 84%) }
.conservar .fondo{ object-position:50% 45% }
.conservar .env{ padding-block:clamp(100px, 12vw, 180px) }
.conservar h2{ color:var(--tinta); font-size:var(--t-foto); max-width:10ch }
.conservar p{ color:var(--texto); max-width:31rem; margin-top:clamp(24px, 3vw, 44px); font-size:clamp(1.08rem, 1.4vw, 1.28rem) }
@media (max-width:760px){
  .conservar{ align-items:flex-end; min-height:100svh; --velo:linear-gradient(180deg, rgba(243,242,238,.2) 0%, rgba(243,242,238,.94) 52%) }
  .conservar .env{ padding-block:var(--e-seccion) }
  /* en vertical la foto se escala por la altura y solo cuenta la x: la estatua, centrada */
  .conservar .fondo{ object-position:52% 50% }
  .conservar p{ margin-top:var(--e-texto); font-size:var(--t-entrada) }
}

/* situaciones */
.situaciones .env{ display:grid; gap:36px }
.situaciones h2{ font-size:var(--t-menor); max-width:12ch }
.situaciones ul{ list-style:none; padding:0 }
.situaciones li{ font:400 clamp(1.25rem, 1.8vw, 1.75rem)/1.28 var(--serif); color:var(--tinta); text-align:left; padding-block:clamp(12px, 1.5vw, 22px) }
@media (min-width:980px){ .situaciones .env{ grid-template-columns:minmax(0, .8fr) minmax(0, 1.2fr); gap:8vw } .situaciones h2{ position:sticky; top:130px; align-self:start } }
@media (max-width:760px){
  /* sigue a Conservar, tambien sobre papel: entra antes */
  .situaciones{ padding-block:var(--e-denso) var(--e-seccion) }
  .situaciones .env{ gap:24px }
  .situaciones li{ font-size:var(--t-frase); line-height:1.3; padding-block:10px; text-wrap:pretty }
}

/* perfiles */
.perfiles{ background:var(--piedra-clara) }
.perfiles h2{ font-size:var(--t-seccion); max-width:16ch }
.lista-perfiles{ margin-top:clamp(56px, 7vw, 110px); border-bottom:1px solid rgba(11,13,20,.16) }
.lista-perfiles article{ display:grid; gap:14px 8vw; padding-block:clamp(30px, 3.6vw, 54px); border-top:1px solid rgba(11,13,20,.16) }
.lista-perfiles h3{ font-size:clamp(1.55rem, 2.5vw, 2.45rem); line-height:1.08; max-width:18ch }
.lista-perfiles p{ max-width:34rem }
.lista-perfiles b{ font-weight:500; color:var(--tinta) }
@media (min-width:900px){ .lista-perfiles article{ grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); align-items:start } .lista-perfiles p{ padding-top:.3em } }
@media (max-width:760px){
  .perfiles{ padding-block:var(--e-seccion) }
  .lista-perfiles{ margin-top:40px; border-bottom:0 }
  .lista-perfiles article{ gap:12px; padding-block:0; border-top:0 }
  .lista-perfiles article + article{ margin-top:48px }
  .lista-perfiles h3{ font-size:var(--t-h3); line-height:1.1 }
}

/* servicios */
.servicios h2{ font-size:var(--t-seccion); max-width:18ch }
.servicios .sub{ max-width:36rem; margin-top:clamp(20px, 2.4vw, 32px) }
.pilares{ display:grid; gap:52px 4vw; margin-top:clamp(44px, 5vw, 80px); padding-top:clamp(32px, 3.4vw, 52px); border-top:1px solid rgba(246,245,241,.16) }
.pilar h3{ font-size:clamp(1.9rem, 2.6vw, 2.6rem); line-height:1.02 }
.pilar h3 span{ color:var(--oro) }
.pilar ul{ list-style:none; padding:0; margin-top:clamp(16px, 1.8vw, 26px) }
.pilar li{ color:rgba(246,245,241,.72); padding-block:9px; font-size:.97rem; line-height:1.62 }
.pilar li strong{ display:block; font:400 clamp(1.1rem, 1.3vw, 1.25rem)/1.26 var(--serif); color:#fff; margin-bottom:4px; text-align:left }
@media (min-width:1000px){ .pilares{ grid-template-columns:repeat(3, minmax(0, 1fr)); align-items:start } }
@media (max-width:760px){
  .servicios{ padding-block:var(--e-seccion) }
  .servicios .sub{ margin-top:var(--e-texto) }
  /* los puntos conservan el ritmo de la base y un subtitulo de 18 px: con 12 px, 6 px y la frase a 21 px Servicios crecia 313 px */
  .pilares{ gap:40px; margin-top:40px }
  .pilar h3{ font-size:var(--t-h3); line-height:1.1 }
  .pilar li{ font-size:var(--t-cuerpo); line-height:1.6 }
  .pilar li strong{ font-size:1.125rem; text-wrap:pretty }
}

/* diagnostico */
.diagnostico h2{ font-size:var(--t-seccion); max-width:12ch }
.mira{ margin-top:clamp(40px, 5vw, 72px); max-width:46rem; font:400 clamp(1.3rem, 2.15vw, 2.15rem)/1.32 var(--serif); color:var(--piedra); text-align:left }
.resultado{ margin-top:clamp(28px, 3.5vw, 52px); max-width:36rem; font-size:clamp(1.08rem, 1.4vw, 1.3rem); color:var(--tinta) }
@media (max-width:760px){
  .diagnostico{ padding-block:var(--e-amplio) }
  .mira{ margin-top:var(--e-lista); font-size:var(--t-frase); line-height:1.4 }
  .resultado{ margin-top:var(--e-texto); font-size:var(--t-entrada) }
}

/* invertir fuera */
.fuera{ --velo:linear-gradient(180deg, rgba(11,13,20,.76) 0%, rgba(11,13,20,.3) 38%, rgba(11,13,20,.4) 56%, rgba(11,13,20,.92) 100%) }
.fuera .env{ display:flex; flex-direction:column; justify-content:space-between; gap:clamp(80px, 22vh, 260px); min-height:100svh; padding-block:clamp(110px, 12vw, 170px) clamp(64px, 8vw, 110px) }
.fuera h2{ font-size:var(--t-foto); max-width:12ch }
.fuera .abajo{ display:grid; gap:28px }
.fuera .abajo p{ max-width:46rem }
.fuera .remate{ font:400 clamp(1.4rem, 2.4vw, 2.3rem)/1.14 var(--serif); color:#fff; text-align:left; max-width:18ch }
@media (min-width:1000px){ .fuera .abajo{ grid-template-columns:minmax(0, 1.3fr) minmax(0, .7fr); align-items:end; column-gap:6vw } }
@media (max-width:760px){
  /* la foto es un umbral: la persona queda libre entre el titular y el texto, y el parrafo va sobre tinta lisa */
  .fuera{ --velo:linear-gradient(180deg, rgba(11,13,20,.74) 0, rgba(11,13,20,.1) 30svh, rgba(11,13,20,.16) 62svh, rgba(11,13,20,0) 94svh) }
  .fuera .fondo{ height:94svh; -webkit-mask-image:linear-gradient(180deg, #000 68%, transparent); mask-image:linear-gradient(180deg, #000 68%, transparent) }
  .fuera .env{ min-height:0; justify-content:flex-start; gap:0; padding-block:calc(var(--cab) + 44px) var(--e-seccion) }
  .fuera .abajo{ margin-top:50svh; gap:24px }
  .fuera .remate{ font-size:var(--t-h3); text-wrap:pretty }
}

/* oportunidades */
.oportunidades{ --velo:linear-gradient(90deg, rgba(11,13,20,.88) 0%, rgba(11,13,20,.66) 55%, rgba(11,13,20,.82) 100%) }
.oportunidades .env{ display:grid; gap:56px; padding-block:clamp(100px, 13vw, 200px) }
.oportunidades h2{ font-size:var(--t-seccion); max-width:18ch }
.oportunidades .texto p{ max-width:36rem; margin-top:28px }
.oportunidades .tit{ font-size:1rem; color:rgba(246,245,241,.62); text-align:left }
.oportunidades ul{ list-style:none; padding:0; margin-top:8px }
.oportunidades li{ font:400 clamp(1.2rem, 1.7vw, 1.6rem)/1.24 var(--serif); color:#fff; text-align:left; padding-block:10px }
.oportunidades .nota{ margin-top:28px; font-size:.88rem; color:rgba(246,245,241,.6) }
@media (min-width:1000px){ .oportunidades .env{ grid-template-columns:minmax(0, 1.1fr) minmax(0, .9fr); column-gap:8vw; align-items:start } }
@media (max-width:760px){
  .oportunidades{ --velo:linear-gradient(180deg, rgba(11,13,20,.82) 0%, rgba(11,13,20,.68) 45%, rgba(11,13,20,.85) 100%) }
  .oportunidades .fondo{ object-position:36% 50% }
  .oportunidades .env{ padding-block:var(--e-seccion) }
  .oportunidades .texto p{ margin-top:var(--e-texto) }
  .oportunidades .env{ gap:40px }
  .oportunidades li{ font-size:var(--t-frase); padding-block:6px; text-wrap:pretty }
  .oportunidades .nota{ font-size:var(--t-nota) }
}

/* metodo */
.metodo h2{ font-size:var(--t-seccion); max-width:15ch }
.relato{ margin-top:clamp(44px, 6vw, 90px); max-width:1180px; font:400 clamp(1.35rem, 2.4vw, 2.45rem)/1.36 var(--serif); color:var(--piedra); text-align:left }
.relato b{ font-weight:500; color:var(--tinta) }
.cobro{ display:grid; gap:24px 7vw; margin-top:clamp(64px, 8vw, 130px); padding-top:clamp(40px, 5vw, 64px); border-top:1px solid rgba(11,13,20,.14) }
.cobro h3{ font-size:clamp(1.75rem, 2.9vw, 3rem); line-height:1.06; max-width:14ch }
.cobro p{ max-width:40rem }
@media (min-width:900px){ .cobro{ grid-template-columns:minmax(0, .8fr) minmax(0, 1fr) } }
@media (max-width:760px){
  /* abre capitulo tras una foto */
  .metodo{ padding-block:var(--e-amplio) var(--e-seccion) }
  .relato{ margin-top:var(--e-lista); font-size:var(--t-frase); line-height:1.4 }
  .cobro{ margin-top:56px; padding-top:40px; gap:16px }
  .cobro h3{ font-size:var(--t-h3) }
}

/* su dinero */
.dinero{ --velo:linear-gradient(90deg, rgba(11,13,20,.92) 0%, rgba(11,13,20,.74) 52%, rgba(11,13,20,.5) 100%) }
.dinero .env{ padding-block:clamp(110px, 14vw, 210px) }
.dinero h2{ font-size:var(--t-foto); max-width:12ch }
.noes{ list-style:none; padding:0; display:grid; gap:34px 6vw; margin-top:clamp(56px, 7vw, 100px) }
.foto-seccion .noes li{ color:rgba(246,245,241,.72); text-align:justify }
/* el subtitulo en serif funciona como titular: a la izquierda y sin partir palabras */
.noes strong{ display:block; font:400 clamp(1.3rem, 1.8vw, 1.75rem)/1.16 var(--serif); color:#fff; margin-bottom:6px; text-align:left; hyphens:none; -webkit-hyphens:none }
@media (min-width:900px){ .noes{ grid-template-columns:repeat(2, minmax(0, 1fr)) } }
@media (max-width:760px){
  .dinero{ --velo:linear-gradient(180deg, rgba(11,13,20,.8) 0%, rgba(11,13,20,.85) 100%) }
  .dinero .env{ padding-block:var(--e-seccion) }
  .noes{ margin-top:var(--e-lista); gap:28px }
  .noes strong{ font-size:var(--t-frase); text-wrap:pretty }
}

/* equipo */
.equipo h2{ font-size:var(--t-seccion); max-width:12ch }
.equipo .sub{ max-width:36rem; margin-top:24px }
.gente{ display:grid; gap:64px 8vw; margin-top:clamp(56px, 7vw, 110px) }
.persona img{ width:clamp(150px, 15vw, 200px); height:clamp(150px, 15vw, 200px); border-radius:50%; object-fit:cover; clip-path:circle(48.5%); filter:grayscale(1) }
.persona h3{ margin-top:28px; font-size:clamp(1.75rem, 2.7vw, 2.75rem); line-height:1.04 }
.persona .rol{ margin-top:10px; color:var(--piedra); text-align:left }
.persona .bio{ margin-top:16px; max-width:34rem }
.persona .correo{ display:inline-block; margin-top:16px }
@media (min-width:900px){ .gente{ grid-template-columns:repeat(2, minmax(0, 1fr)) } }
@media (max-width:760px){
  .equipo{ padding-block:var(--e-seccion) }
  .equipo .sub{ margin-top:var(--e-texto) }
  .gente{ gap:52px; margin-top:44px }
  .persona{ display:grid; grid-template-columns:88px minmax(0, 1fr); column-gap:18px; align-items:center }
  .persona img{ grid-row:1 / span 2; width:88px; height:88px }
  .persona h3{ margin-top:0; align-self:end; font-size:var(--t-h3); line-height:1.08 }
  .persona .rol{ margin-top:6px; align-self:start; font-size:var(--t-nota); line-height:1.4 }
  .persona .bio,.persona .correo{ grid-column:1 / -1 }
  .persona .bio{ margin-top:20px }
  .persona .correo{ margin-top:8px; justify-self:start }
}

/* preguntas */
.preguntas{ background:var(--piedra-clara) }
.preguntas h2{ font-size:var(--t-menor); max-width:14ch }
.faq{ margin-top:clamp(40px, 5vw, 72px); max-width:60rem }
.faq details{ border-top:1px solid rgba(11,13,20,.14) }
.faq details:last-child{ border-bottom:1px solid rgba(11,13,20,.14) }
.faq summary{ list-style:none; cursor:pointer; display:flex; justify-content:space-between; gap:24px; padding:26px 0; font:400 clamp(1.2rem, 1.7vw, 1.6rem)/1.24 var(--serif); color:var(--tinta) }
.faq summary::-webkit-details-marker{ display:none }
.faq summary::after{ content:"+"; font:300 1.8rem/1 var(--sans); color:var(--piedra); transition:transform .3s }
.faq details[open] summary::after{ transform:rotate(45deg) }
.faq details p{ padding:0 0 28px; max-width:46rem }
@media (max-width:760px){
  /* pausa antes del contacto */
  .preguntas{ padding-block:var(--e-seccion) var(--e-amplio) }
  .faq{ margin-top:var(--e-lista) }
  /* pretty deja sola la ultima palabra en dos preguntas; balance las reparte como un titular */
  .faq summary{ align-items:baseline; padding:20px 0; font-size:var(--t-frase); line-height:1.25; text-wrap:balance }
}

/* contacto y conversacion guiada */
.contacto{ --velo:linear-gradient(90deg, rgba(11,13,20,.9) 0%, rgba(11,13,20,.74) 46%, rgba(11,13,20,.5) 100%) }
@media (max-width:1079px){ .contacto{ --velo:linear-gradient(180deg, rgba(11,13,20,.9) 0%, rgba(11,13,20,.8) 50%, rgba(11,13,20,.92) 100%) } }
.contacto-in{ display:grid; gap:56px; padding-block:clamp(110px, 13vw, 190px) }
.contacto h2{ font-size:var(--t-seccion); max-width:12ch }
.contacto .sub{ margin-top:clamp(22px, 2.6vw, 36px); max-width:28rem; font-size:clamp(1.08rem, 1.5vw, 1.4rem); text-align:justify }
.datos{ display:flex; flex-wrap:wrap; gap:28px clamp(40px, 6vw, 90px); margin-top:clamp(36px, 4.5vw, 60px) }
.datos .et{ font-size:.9rem; color:rgba(246,245,241,.62); text-align:left }
.datos address{ font-style:normal; margin-top:6px; line-height:1.6; color:#fff }
@media (min-width:1080px){
  .contacto-in{ grid-template-columns:minmax(0, 1fr) minmax(0, .95fr); column-gap:6vw; align-items:center; min-height:100svh }
  /* en el HTML los datos van despues del formulario (orden del telefono); en escritorio vuelven debajo de la entradilla */
  .contacto-in{ row-gap:0; grid-template-areas:"texto guia" "datos guia" }
  .contacto-texto{ grid-area:texto; align-self:end }
  .datos{ grid-area:datos; align-self:start }
  .guia{ grid-area:guia; align-self:center }
}
@media (max-width:1079px){ .datos{ margin-top:0 } }
@media (min-width:1000px) and (max-width:1079px){
  /* desde 1000 px, como en la base: los datos bajo la entradilla y el formulario debajo de ellos */
  .contacto-in{ row-gap:0 }
  .datos{ margin-top:clamp(36px, 4.5vw, 60px) }
  .guia{ order:1; margin-top:56px }
}
/* la planta va en su propia linea cuando los datos comparten columna (escritorio) o en el telefono; en la tableta cabe seguida */
@media (min-width:761px) and (max-width:1079px){ .datos .dir-corte{ display:none } }
@media (max-width:760px){
  /* la foto es el umbral: la mesa arriba y el formulario entra en la primera pantalla al llegar a Contacto */
  .contacto{ --velo:linear-gradient(180deg, rgba(11,13,20,.35) 0, rgba(11,13,20,.72) 40svh, rgba(11,13,20,0) 72svh) }
  /* clip recorta igual que hidden pero no crea contenedor de desplazamiento: asi el pie del formulario se pega a la pantalla */
  .contacto{ overflow:clip }
  .contacto .fondo{ height:72svh; object-position:66% 50%; -webkit-mask-image:linear-gradient(180deg, #000 50%, transparent); mask-image:linear-gradient(180deg, #000 50%, transparent) }
  .contacto-in{ gap:36px; padding-block:30svh var(--e-seccion) }
  .datos{ gap:20px 32px }
  .contacto .sub{ font-size:var(--t-entrada) }
}

.guia{ position:relative; display:flex; flex-direction:column; min-height:480px; padding:clamp(26px, 3.2vw, 50px); background:#10131B; border:1px solid rgba(246,245,241,.12); color:var(--blanco) }
.guia-cab{ display:flex; align-items:center; gap:18px; margin-bottom:clamp(28px, 3vw, 44px) }
.guia-paso{ font:500 .85rem/1 var(--sans); font-variant-numeric:tabular-nums; color:rgba(246,245,241,.6); white-space:nowrap; min-width:3.8em }
.guia-barra{ flex:1; height:2px; background:rgba(246,245,241,.12); overflow:hidden }
.guia-barra span{ display:block; width:0; height:100%; background:var(--oro); transition:width .55s cubic-bezier(.3,.7,.2,1) }
.paso{ display:none; min-width:0; padding:0; border:0 }
.paso.activo{ display:block }
.paso:focus{ outline:none }
.paso legend{ padding:0; margin-bottom:26px; font:400 clamp(1.7rem, 2.5vw, 2.4rem)/1.08 var(--serif); letter-spacing:-.012em; color:#fff }
.guia input[type=text],.guia input[type=email],.guia input[type=tel]{ width:100%; padding:12px 0; background:transparent; border:0; border-bottom:1px solid rgba(246,245,241,.3); border-radius:0; color:#fff; font:400 clamp(1.25rem, 2vw, 1.6rem)/1.3 var(--sans); transition:border-color .25s }
.guia input::placeholder{ color:rgba(246,245,241,.36) }
.guia input:is([type=text],[type=email],[type=tel]):focus{ outline:none; border-bottom-color:var(--oro) }
.campo{ display:block }
.campo + .campo{ margin-top:22px }
.campo span{ display:block; font-size:.88rem; color:rgba(246,245,241,.62) }
.opciones{ display:grid; gap:10px }
.opcion{ position:relative; display:block; cursor:pointer }
.opcion input{ position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer }
.opcion span{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 18px; border:1px solid rgba(246,245,241,.18); font:400 1.02rem/1.3 var(--sans); color:rgba(246,245,241,.9); text-align:left; transition:border-color .2s, background-color .2s }
.opcion span::after{ content:""; flex:none; width:18px; height:18px; border:1px solid rgba(246,245,241,.35); border-radius:50% }
.opciones.multiple .opcion span::after{ border-radius:3px }
@media (hover:hover){ .opcion:hover span{ border-color:rgba(200,150,89,.7) } }
.opcion input:checked + span{ border-color:var(--oro); background:rgba(200,150,89,.12); color:#fff }
.opcion input:checked + span::after{ background:var(--oro); border-color:var(--oro); box-shadow:inset 0 0 0 3px #10131B }
.opcion input:focus-visible + span{ outline:2px solid var(--oro); outline-offset:2px }
@media (min-width:560px){ .opciones.dos{ grid-template-columns:1fr 1fr } }
.ayuda{ margin-top:14px; font-size:.85rem; color:rgba(246,245,241,.5); text-align:left }
.guia .ayuda{ color:rgba(246,245,241,.5) }
kbd{ padding:2px 6px; border:1px solid rgba(246,245,241,.3); border-radius:3px; font:500 .78rem/1 var(--sans); color:rgba(246,245,241,.82) }
@media (hover:none){ .paso[data-tipo=texto] .ayuda{ display:none } }
.consentimiento{ display:flex; gap:12px; align-items:flex-start; margin-top:26px; font-size:.9rem; line-height:1.5; color:rgba(246,245,241,.75); cursor:pointer }
.consentimiento input{ flex:none; width:18px; height:18px; margin-top:3px; accent-color:var(--oro) }
.consentimiento input:focus-visible{ outline:2px solid var(--oro); outline-offset:3px }
.consentimiento span{ text-align:left }
.trampa{ position:absolute !important; left:-9999px; width:1px; height:1px; opacity:0 }
/* el error vive dentro del pie: en escritorio ocupa su propia fila bajo los botones y en el telefono va pegado encima de ellos */
.guia-pie{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:0 16px; margin-top:auto; padding-top:30px }
.guia-atras{ padding:10px 0; background:none; border:0; color:rgba(246,245,241,.7); font:500 .95rem/1 var(--sans); cursor:pointer }
@media (hover:hover){ .guia-atras:hover{ color:#fff } }
.guia-sig{ margin-left:auto }
.guia-sig:disabled{ opacity:.6; cursor:progress }
.guia-error{ flex:0 0 100%; order:3; min-height:1.5em; margin-top:12px; font-size:.9rem; color:#E9B9A6; text-align:left }
.guia-error a{ color:#fff }
.fin-tit{ font:400 clamp(1.8rem, 2.7vw, 2.6rem)/1.08 var(--serif); color:#fff; text-align:left }
.guia .fin-texto{ margin-top:18px; max-width:30rem; color:rgba(246,245,241,.82); text-align:left }
@media (max-width:760px){
  /* formulario para el dedo: sin tarjeta, botones siempre a la vista y el error encima de ellos */
  /* al cambiar de paso el formulario se coloca bajo la cabecera, con aire (html ya reserva la altura de la cabecera) */
  .guia{ min-height:0; padding:0; background:none; border:0; scroll-margin-top:20px }
  .guia-cab{ margin-bottom:24px }
  .paso legend{ margin-bottom:20px; font-size:var(--t-seccion) }
  .opciones{ gap:8px }
  .opcion span{ min-height:52px; padding:12px 16px }
  .guia-pie{ position:sticky; bottom:0; z-index:2; margin-top:24px; padding:12px 0 calc(12px + env(safe-area-inset-bottom)); background:var(--tinta) }
  .guia-error{ order:-1; margin-top:0; min-height:0 }
  .guia-error:not(:empty){ margin-bottom:12px }
  .guia-sig{ flex:1; min-height:52px }
  .guia-atras{ min-width:44px; min-height:44px; padding:0 16px 0 0 }
}
/* telefono en horizontal (poca altura): cada paso cabe entero entre la cabecera y una barra de botones mas baja,
   y el error ocupa la misma fila que los botones para que la barra no crezca y tape la casilla de privacidad */
@media (max-width:760px) and (max-height:500px){
  .contacto-in{ gap:20px; padding-top:24px }
  .contacto .sub{ margin-top:12px }
  .guia{ scroll-margin-top:0 }
  .guia-cab{ margin-bottom:10px }
  .paso legend{ margin-bottom:10px; font-size:var(--t-frase); line-height:1.15 }
  .opciones{ grid-template-columns:1fr 1fr; gap:8px }
  .opcion span{ min-height:44px; padding:8px 14px }
  .paso .ayuda{ margin-top:6px }
  .paso.activo[data-tipo=contacto]{ display:grid; grid-template-columns:1fr 1fr; column-gap:20px }
  .campo + .campo{ margin-top:0 }
  .consentimiento{ grid-column:1 / -1; margin-top:12px }
  .guia-pie{ flex-wrap:nowrap; margin-top:12px; padding-block:8px calc(8px + env(safe-area-inset-bottom)) }
  .guia-atras{ order:0 }
  .guia-error,.guia-error:not(:empty){ order:1; flex:1 1 auto; margin:0 }
  .guia-sig{ order:2; flex:none; min-height:44px }
}

/* pie */
.pie{ padding-block:64px 44px; background:var(--tinta); color:rgba(246,245,241,.64) }
.pie .env,.pie .envoltura{ display:grid; gap:30px }
.pie .logo{ width:118px }
.pie nav ul{ list-style:none; display:flex; flex-wrap:wrap; gap:10px 28px; padding:0; margin:0; font-size:.92rem }
.pie nav a{ color:rgba(246,245,241,.86); text-decoration:none }
@media (hover:hover){ .pie nav a:hover{ color:var(--oro-claro) } }
.pie .legal{ max-width:64rem; font-size:.85rem; line-height:1.6; color:rgba(246,245,241,.6) }
@media (max-width:760px){
  .pie{ padding-block:56px calc(40px + env(safe-area-inset-bottom)) }
  .pie .logo{ width:84px }
  .pie nav ul{ gap:0 24px }
  .pie nav a{ display:inline-block; padding-block:12px }
}

/* paginas legales (marcado heredado) */
.envoltura{ width:100%; max-width:calc(1480px + var(--lado) * 2); margin-inline:auto; padding-inline:var(--lado) }
.cabecera{ position:sticky; top:0; z-index:60; background:var(--papel); box-shadow:0 1px 0 rgba(11,13,20,.08) }
.cabecera .envoltura{ display:flex; align-items:center; justify-content:space-between; height:84px }
.cabecera .m-enso{ height:40px; width:auto }
.cabecera .m-texto{ height:32px; width:auto }
.btn-linea{ display:inline-flex; padding:.8em 1.3em; box-shadow:inset 0 0 0 1px var(--tinta); color:var(--tinta); text-decoration:none; font:500 .93rem/1 var(--sans) }
.legal-pag{ padding-block:100px 110px }
.pagina-404{ min-height:calc(100svh - 84px) }
.legal-pag h1{ font-size:clamp(2.2rem, 4.4vw, 3.8rem) }
.legal-pag h2{ margin-top:46px; font-size:1.6rem }
.legal-pag p,.legal-pag li{ max-width:46rem; margin-top:14px }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  .enso-hero img{ animation:none; -webkit-mask-image:none; mask-image:none }
  *{ transition:none !important }
}