/* Fidem Abogados · sitio web. Tokens del sistema de diseño (tokens.json v7) y diseño «Sitio web Fidem v4». */

@font-face{font-family:"Nunito Sans";src:url("fonts/NunitoSans-latin.woff2") format("woff2");font-weight:200 1000;font-style:normal;font-display:swap;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:"Nunito Sans";src:url("fonts/NunitoSans-latin-ext.woff2") format("woff2");font-weight:200 1000;font-style:normal;font-display:swap;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{
  --papel:#ffffff;--niebla:#f2f2f2;--tinta:#231f20;--humo:#5c5c5c;
  --lacre:#f58834;--travesano:#7f7f7f;--filete:#d9d9d9;--grafito:#373435;--foco:#231f20;
  --font-sans:"Nunito Sans","Segoe UI",Arial,sans-serif;
  --type-h3:500 19px/26px var(--font-sans);
  --type-cifra:300 40px/44px var(--font-sans);
  --type-cornisa:500 12px/16px var(--font-sans);
  --type-documento:400 16px/26px var(--font-sans);
  --type-cuerpo:400 15px/24px var(--font-sans);
  --type-pequeno:400 13px/19px var(--font-sans);
  --type-micro:400 11px/15px var(--font-sans);
  --type-clave:500 10px/14px var(--font-sans);
  --type-nav:500 14px/20px var(--font-sans);
  --radius-boton:6px;--radius-campo:6px;
  --margen:clamp(20px,5vw,48px);
  --medida:30em; /* ≈ 65-68 caracteres de Nunito Sans */
  /* borde derecho de la hoja: alinea con el margen del contenedor de 1280 */
  --borde-hoja:max(var(--margen), calc(50% - 592px));
}

*,*::before,*::after{box-sizing:border-box;border-radius:0}
html{scroll-behavior:auto;scroll-padding-top:80px;scroll-padding-bottom:96px}
section[tabindex="-1"]:focus{outline:none}
html,body{margin:0;background:var(--papel);color:var(--tinta);font:var(--type-cuerpo);font-variant-numeric:lining-nums;-webkit-font-smoothing:antialiased}
body{min-height:100vh}
img{display:block}
p,h1,h2,h3{margin:0}
a{color:var(--tinta);text-decoration:none;border-bottom:1px solid var(--travesano);transition:color 120ms,border-color 120ms}
a:hover{color:var(--tinta);border-bottom-color:var(--tinta)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--foco);outline-offset:2px}
.sin-borde{border-bottom:0}
.oculto-visual{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
[hidden]{display:none!important}

/* ---------- Rótulos ---------- */
.clave{font:var(--type-clave);letter-spacing:.12em;text-transform:uppercase;color:var(--humo)}
.cornisa{font:var(--type-cornisa);letter-spacing:.16em;text-transform:uppercase;color:var(--tinta)}

/* ---------- Botones ---------- */
.boton{display:inline-flex;align-items:center;gap:8px;margin:0;border:0;border-radius:var(--radius-boton);background:transparent;font-family:var(--font-sans);font-weight:500;line-height:16px;text-transform:uppercase;color:var(--tinta);text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color 120ms,border-color 120ms;height:40px;padding:0 24px;font-size:13px;letter-spacing:.12em}
.boton--grande{height:48px;padding:0 28px}
.boton--compacto{height:32px;padding:0 16px;font-size:12px;letter-spacing:.10em}
.boton--primario{background:var(--tinta);color:var(--papel);border-bottom:0}
.boton--primario:hover{background:var(--humo);color:var(--papel)}
.boton--secundario{border:1px solid var(--tinta)}
.boton--secundario:hover{background:var(--niebla);border-color:var(--tinta)}
.boton[disabled]{cursor:default;background:transparent;color:var(--travesano);border:1px solid var(--travesano)}

/* ---------- Cabecera completa (escritorio) ---------- */
.contenedor{max-width:1280px;width:100%;margin:0 auto}
.cabecera{background:var(--papel);padding:0 48px}
.cabecera__sup{height:36px;display:flex;align-items:center;justify-content:space-between}
.cabecera__sup span{font:var(--type-pequeno);color:var(--humo)}
.cabecera__principal{position:relative;height:88px}
.cabecera__logo{position:absolute;left:0;top:14px;border:0}
.cabecera__logo img{width:147px;height:60px}
.travesano{position:absolute;height:1px;background:var(--travesano)}
.cabecera__principal .travesano{left:98px;right:0;top:31px}
.cabecera__acciones{position:absolute;right:0;top:52px;display:flex;align-items:center;gap:40px}
.nav{display:flex;gap:32px;align-items:flex-end}
.nav a{position:relative;font:var(--type-nav);letter-spacing:.04em;color:var(--tinta);border:0;border-bottom:1px solid transparent;white-space:nowrap;padding:3px 0}
.nav a:hover{color:var(--humo);border-bottom-color:transparent}
.boton-contacto{display:inline-flex;align-items:center;height:32px;padding:0 22px;border:1px solid var(--tinta);border-radius:var(--radius-boton);font:500 12px/16px var(--font-sans);letter-spacing:.10em;text-transform:uppercase;color:var(--tinta);white-space:nowrap;transition:background-color 120ms}
.boton-contacto:hover{background:var(--niebla);border-color:var(--tinta)}

/* ---------- Cabecera móvil ---------- */
.cabecera-movil{position:relative;height:112px;display:none}
.cabecera-movil__logo{position:absolute;left:var(--margen);top:20px;border:0}
.cabecera-movil__logo img{width:147px;height:60px}
.cabecera-movil .travesano{left:calc(var(--margen) + 98px);right:var(--margen);top:37px}
.cabecera-movil .boton{position:absolute;right:var(--margen);top:60px}

/* ---------- Barras compactas (sin animación) ---------- */
.compacta{position:fixed;top:0;left:0;right:0;z-index:20;background:var(--papel);display:none}
.compacta__barra{position:relative;height:64px;padding:0 48px;display:flex;align-items:center;justify-content:space-between}
.compacta__simbolo{border:0}
.compacta__simbolo img{width:41px;height:36px}
.compacta__acciones{display:flex;align-items:center;gap:40px;padding-top:6px}
.filete-inf{position:absolute;bottom:0;height:1px;background:var(--filete)}
.compacta__barra .filete-inf{left:48px;right:48px}
.compacta-movil{position:fixed;top:0;left:0;right:0;z-index:20;height:64px;background:var(--papel);display:none}
.compacta-movil .compacta__simbolo{position:absolute;left:var(--margen);top:14px}
.compacta-movil .boton{position:absolute;right:var(--margen);top:16px}
.compacta-movil .filete-inf,.menu__barra .filete-inf{left:var(--margen);right:var(--margen)}
body.es-compacta .compacta{display:block}

/* ---------- Menú móvil ---------- */
.menu{position:fixed;inset:0;z-index:30;background:var(--papel);overflow:auto;overscroll-behavior:contain}
body.menu-abierto{overflow:hidden}
.menu__barra{position:relative;height:64px}
.menu__barra .compacta__simbolo{position:absolute;left:var(--margen);top:14px}
.menu__barra .boton{position:absolute;right:var(--margen);top:16px}
.menu nav{padding:16px var(--margen) 0;display:flex;flex-direction:column}
.menu nav a{display:block;padding:16px 0;border:0;border-bottom:1px solid var(--filete);font:300 28px/36px var(--font-sans);color:var(--tinta)}
.menu__datos{padding:32px var(--margen);display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.menu__datos a{font:var(--type-cuerpo);color:var(--tinta);border:0}

/* ---------- Portada ----------
   La hoja de áreas puede sobresalir por debajo de la banda: termina sobre el papel de la sección siguiente. */
.portada{position:relative;z-index:1;display:flex;flex-direction:column;min-height:max(680px,100vh);background:var(--papel)}
.portada__texto{max-width:1280px;width:100%;margin:0 auto;padding:clamp(24px,5vh,64px) var(--margen) clamp(64px,8vh,88px)}
.portada__texto > div{max-width:min(700px, calc(100% - min(440px, 38vw) - 64px))}
.portada h1{margin:20px 0 0;font:300 clamp(40px,5vw,68px)/1.06 var(--font-sans);letter-spacing:-.02em;color:var(--tinta);text-wrap:balance}
.portada__bajada{margin:20px 0 0;font:var(--type-documento);color:var(--humo);text-wrap:pretty}
.portada__accion{margin-top:36px;display:flex;flex-wrap:wrap;gap:12px 16px}

.areas{position:relative;flex:1 0 auto;min-height:320px;display:flex;flex-direction:column}
.banda{position:absolute;inset:0;overflow:hidden;background:var(--banda-fondo,#b9b6b5)}
.hoja{position:absolute;z-index:1;top:-150px;right:var(--borde-hoja);width:min(440px,38vw)}
.hoja__tarjeta{background:var(--papel);padding:28px clamp(20px,2.4vw,32px) 36px}
.hoja__cabeza{display:flex;justify-content:space-between;align-items:baseline;gap:8px 16px;flex-wrap:wrap}
.hoja__lista{margin:28px 0 0;padding:0;list-style:none;border-bottom:1px solid var(--filete)}
.hoja__lista li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;align-items:baseline;padding:18px 0;border-top:1px solid var(--filete)}
.hoja__lista .cifra{font:var(--type-cifra);color:var(--tinta)}
.hoja__area{font:var(--type-h3);color:var(--tinta)}
.hoja__lista p{margin:4px 0 0;font:var(--type-pequeno);color:var(--humo);text-wrap:pretty}
.hoja__nota{margin:20px 0 0;font:var(--type-micro);letter-spacing:.02em;color:var(--humo)}


/* ---------- Botón terciario (texto subrayado + flecha) ---------- */
.terciario{display:inline-flex;align-items:center;gap:8px;border:0;font:500 13px/16px var(--font-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--tinta)}
.terciario span{border-bottom:1px solid var(--travesano);transition:border-color 120ms}
.terciario:hover span{border-bottom-color:var(--tinta)}
.terciario svg{display:block}
.hoja__lista--indice li{padding:12px 0}
.hoja__ver{margin:20px 0 0}

/* ---------- Secciones ---------- */
.seccion{max-width:1280px;margin:0 auto;padding:clamp(80px,10vw,128px) var(--margen) 0}
.seccion__cabeza{max-width:760px}
.seccion__cabeza h2{margin:12px 0 0;font:300 clamp(30px,3.6vw,48px)/1.12 var(--font-sans);letter-spacing:-.01em;color:var(--tinta);text-wrap:balance}
.seccion__intro{margin:20px 0 0;font:var(--type-documento);color:var(--humo);max-width:var(--medida);text-wrap:pretty}

.practica{list-style:none;margin:48px 0 0;padding:0;border-bottom:1px solid var(--filete)}
.practica li{display:grid;grid-template-columns:64px minmax(200px,340px) minmax(0,1fr);gap:8px 32px;align-items:baseline;padding:28px 0;border-top:1px solid var(--filete)}
.practica .cifra{font:var(--type-cifra);color:var(--tinta)}
.practica h3{font:400 24px/30px var(--font-sans);color:var(--tinta)}
.practica p{font:var(--type-documento);color:var(--humo);max-width:var(--medida);text-wrap:pretty}

.cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:32px;margin:48px 0 0}
.cifra-bloque__valor{margin:0;padding:12px 0;border-top:1px solid var(--filete);border-bottom:1px solid var(--filete);font:var(--type-cifra);color:var(--tinta)}
.cifra-bloque__leyenda{margin:8px 0 0;font:var(--type-pequeno);color:var(--humo);max-width:260px}
.sectores{margin-top:48px}
.sectores__lista{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px;border-bottom:1px solid var(--filete)}
.sectores__lista li{padding:14px 0;border-top:1px solid var(--filete);font:300 22px/28px var(--font-sans);color:var(--tinta)}

.perfiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:56px 64px;margin:72px 0 0}
.perfil h3{font:300 30px/36px var(--font-sans);letter-spacing:-.01em;color:var(--tinta)}
.perfil__linea{margin:10px 0 0;font:var(--type-clave);letter-spacing:.12em;text-transform:uppercase;color:var(--humo)}
.perfil__bio{margin:20px 0 0;font:var(--type-documento);color:var(--tinta);max-width:var(--medida);text-wrap:pretty}
.perfil .datos-clave{margin-top:24px}
.perfil .datos-clave dd{font:var(--type-pequeno)}

.metodo{background:var(--niebla);margin-top:clamp(80px,10vw,128px)}
.seccion--sin-borde{padding-bottom:clamp(80px,10vw,128px)}
.etapas{list-style:none;margin:48px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 32px}
.numeral{display:block;padding-bottom:12px;border-bottom:1px solid var(--filete);font:300 64px/52px var(--font-sans);color:var(--tinta)}
.etapas h3{margin:20px 0 0;font:var(--type-h3);color:var(--tinta)}
.etapas p{margin:8px 0 0;font:var(--type-cuerpo);color:var(--humo);text-wrap:pretty}

/* ---------- Contacto ---------- */
.contacto{max-width:1280px;margin:0 auto;padding:clamp(80px,10vw,128px) var(--margen);display:flex;flex-wrap:wrap;gap:48px 64px;align-items:flex-start}
.contacto__intro{flex:5 1 320px;min-width:0;max-width:460px}
.contacto__intro h2{margin:12px 0 0;font:300 clamp(30px,3.6vw,48px)/1.12 var(--font-sans);letter-spacing:-.01em;color:var(--tinta);text-wrap:balance}
.contacto__intro > p.texto{margin:20px 0 0;font:var(--type-documento);color:var(--humo);text-wrap:pretty}
.datos-clave{margin:32px 0 0}
.datos-clave div{display:grid;grid-template-columns:120px minmax(0,1fr);align-items:baseline;padding:8px 0;border-top:1px solid var(--filete)}
.datos-clave div:last-child{border-bottom:1px solid var(--filete)}
.datos-clave dt{font:var(--type-clave);letter-spacing:.12em;text-transform:uppercase;color:var(--humo)}
.datos-clave dd{margin:0;font:var(--type-pequeno);color:var(--tinta);overflow-wrap:anywhere}
.datos-clave dd a{border:0}
.datos-clave dd a:hover{color:var(--humo)}
.contacto__whatsapp{margin-top:24px;display:flex}
.contacto__formulario{flex:7 1 480px;min-width:0;max-width:640px}
.formulario{display:flex;flex-direction:column;gap:24px}
.fila{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:24px}
.campo{display:flex;flex-direction:column;gap:8px}
.campo input,.campo textarea{font:var(--type-cuerpo);color:var(--tinta);background:var(--papel);border:1px solid var(--travesano);border-radius:var(--radius-campo);padding:0 12px;height:40px;resize:vertical;outline:none;width:100%}
.campo textarea{padding:10px 12px;height:auto}
.campo input::placeholder,.campo textarea::placeholder{color:var(--humo)}
.campo input:focus,.campo textarea:focus{outline:2px solid var(--foco);outline-offset:2px}
.campo.con-error input,.campo.con-error textarea{border-color:var(--tinta)}
.campo__nota{font:var(--type-pequeno);color:var(--humo)}
.campo.con-error .campo__nota,.error{font:var(--type-pequeno);color:var(--tinta)}
.opciones{display:flex;gap:20px;flex-wrap:wrap}
.opcion{background:none;border:0;border-bottom:1px solid transparent;padding:0 0 4px;font:var(--type-nav);font-weight:400;color:var(--humo);cursor:pointer;transition:color 120ms}
.opcion:hover{color:var(--tinta)}
.opcion[aria-pressed="true"]{color:var(--tinta);font-weight:500;border-bottom-color:var(--tinta)}
.autoriza{display:flex;gap:12px;align-items:flex-start;font:var(--type-pequeno);color:var(--tinta);cursor:pointer;max-width:34em}
.autoriza input{width:16px;height:16px;margin:2px 0 0;accent-color:var(--tinta);flex:none}
.autoriza + .error{margin:6px 0 0 28px}
.aviso-datos{margin:12px 0 0 28px;max-width:34em;font:var(--type-micro);letter-spacing:.02em;color:var(--humo);overflow-wrap:anywhere}
.formulario [data-error="envio"]:not(:empty){margin-top:12px;max-width:34em}
.opciones{display:none}
.confirmacion p{font:var(--type-documento);color:var(--tinta)}
.confirmacion p + p{margin-top:16px;color:var(--humo)}

/* ---------- WhatsApp ----------
   Logo de WhatsApp: monocromo dentro de los botones; el botón fijo usa el verde oficial para que se reconozca. */
.boton .wa{width:18px;height:18px;fill:currentColor;flex:none}
.whatsapp-fijo{position:fixed;right:var(--margen);bottom:24px;z-index:25;display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border:0;border-radius:50%;background:#25d366;color:#fff}
.whatsapp-fijo:hover{background:#1ebe5b;color:#fff}
.whatsapp-fijo .wa{width:30px;height:30px;fill:currentColor}
body.menu-abierto .whatsapp-fijo{display:none}

/* ---------- Pie ---------- */
.pie{max-width:1280px;margin:0 auto;padding:0 var(--margen) 48px}
.pie__sup{border-top:1px solid var(--filete);padding-top:32px;display:flex;flex-wrap:wrap;gap:16px 48px;justify-content:space-between;align-items:baseline}
.pie__grupo{display:flex;flex-wrap:wrap;gap:8px 32px;align-items:baseline}
.pie__enlaces{display:flex;flex-wrap:wrap;gap:8px 24px}
.pie__enlaces a{font:var(--type-pequeno);color:var(--tinta);border:0}
.pie__enlaces a:hover{color:var(--humo)}
.pie__redes{display:flex;gap:16px;align-items:center;width:100%}
.pie__redes a,.pie__red{display:inline-flex;border:0;color:var(--humo);transition:color 120ms}
.pie__redes a:hover{color:var(--tinta)}
.pie__redes svg{width:20px;height:20px;fill:currentColor;display:block}
.pie__inf{margin-top:32px;padding-top:16px;border-top:1px solid var(--filete);display:flex;justify-content:space-between;gap:8px 24px;flex-wrap:wrap}
.pie__inf p,.pie__inf a{font:var(--type-micro);letter-spacing:.02em;color:var(--humo)}
.pie__inf a{border:0}
.pie__inf a:hover{color:var(--tinta)}
.pie__aviso{max-width:640px}

/* ---------- Política de datos ---------- */
.documento{max-width:1280px;margin:0 auto;padding:clamp(48px,7vw,96px) var(--margen) clamp(64px,8vw,112px)}
.documento__cuerpo{max-width:36em}
.documento h1{margin:12px 0 0;font:300 clamp(30px,3.6vw,44px)/1.15 var(--font-sans);letter-spacing:-.01em;text-wrap:balance}
.documento .fecha{margin:16px 0 0;font:var(--type-pequeno);color:var(--humo)}
.documento section{margin-top:40px;padding-top:24px;border-top:1px solid var(--filete)}
.documento h2{display:flex;gap:16px;align-items:baseline;font:400 22px/28px var(--font-sans)}
.documento h2 span{font:300 22px/28px var(--font-sans);color:var(--humo);min-width:28px}
.documento p,.documento li{font:var(--type-documento);color:var(--tinta)}
.documento section > p,.documento section > ul,.documento section > ol,.documento section > dl{margin:16px 0 0 44px}
.documento ul,.documento ol{padding-left:20px}
.documento li + li{margin-top:8px}
.documento .datos-clave{margin-top:16px}
.documento .datos-clave dd{font:var(--type-cuerpo)}
.pendiente{background:var(--niebla);padding:0 4px}
.volver{margin-top:48px;display:flex}

/* ---------- Móvil (< 900 px), igual que el diseño ---------- */
@media (max-width:899.98px){
  .cabecera{display:none}
  .cabecera-movil{display:block}
  body.es-compacta .compacta{display:none}
  body.es-compacta .compacta-movil{display:block}
  .portada__texto > div{max-width:100%}
  .hoja{position:relative;top:auto;right:auto;width:auto;margin:-32px var(--margen) -48px}
  .practica li{grid-template-columns:44px minmax(0,1fr);padding:22px 0}
  .practica p{grid-column:2}
  .documento section > p,.documento section > ul,.documento section > ol,.documento section > dl{margin-left:0}
}
@media (min-width:900px){
  .menu{display:none!important}
}

/* ---------- Ajustes de la revisión final ---------- */
/* Rejillas parejas: 4 principios y 10 sectores sin filas incompletas */
.sectores__lista li{text-wrap:balance}
@media (min-width:1100px){ .etapas{grid-template-columns:repeat(4,minmax(0,1fr))} }
/* 16 sectores: 4 columnas en escritorio, 2 en tableta y celular */
@media (min-width:1000px){ .sectores__lista{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media (max-width:599.98px){ .sectores__lista{column-gap:20px} .sectores__lista li{font:300 17px/23px var(--font-sans);padding:12px 0} }
@media (max-width:519.98px){ .etapas{grid-template-columns:1fr} }

/* Tecnología y actualización: mismo cuerpo que los principios, en dos columnas */
.datos-clave.metodo__datos{margin-top:56px;display:grid;column-gap:32px}
.datos-clave.metodo__datos > div{grid-template-columns:1fr;row-gap:8px;padding:16px 0}
.datos-clave.metodo__datos dd{font:var(--type-cuerpo);max-width:var(--medida)}
@media (min-width:1000px){
  .datos-clave.metodo__datos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .datos-clave.metodo__datos > div{border-bottom:1px solid var(--filete)}
}

/* Retícula de 12 columnas compartida por áreas, perfiles y contacto */
@media (min-width:900px){
  .practica li{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:32px}
  .practica .cifra{grid-column:1}
  .practica h3{grid-column:2 / 7}
  .practica p{grid-column:7 / 13}
  .perfiles{column-gap:32px}
  .contacto{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:32px}
  .contacto__intro{grid-column:1 / 6;max-width:none}
  .contacto__formulario{grid-column:7 / 13;max-width:none}
}
@media (max-width:899.98px){ .practica li{column-gap:16px} }

/* Botón flotante de WhatsApp: no tapa la tarjeta de áreas ni el pie */
@media (min-width:900px){ .whatsapp-fijo{right:16px} }
.whatsapp-fijo ~ .pie{padding-bottom:104px}

/* =====================================================================
   DISEÑO DE PORTADA APROBADO · «Dos planos y un índice», tono claro (28 sep 2026)
   Se activa con <body class="diseno-limpio tono-claro">.
   ===================================================================== */

/* Dos planos: titular sobre papel a la izquierda; plano claro a la derecha con la tarjeta de áreas */
body.diseno-limpio{
  --limpio-ritmo:clamp(88px,11vw,152px);
  --limpio-plano:var(--niebla);
  --limpio-bloque:clamp(48px,6vw,72px);
  --limpio-hoja:clamp(320px,36vw,440px);
  --limpio-aire:clamp(40px,4vw,96px);
}
body.diseno-limpio.tono-claro{--limpio-plano:#b9b6b5}
body.diseno-limpio .banda{background:var(--limpio-plano)}
body.diseno-limpio body.diseno-limpio .hoja__tarjeta{padding:32px clamp(24px,2.8vw,40px) 40px}
body.diseno-limpio .portada__accion{margin-top:40px}
@media (max-width:899.98px){
  body.diseno-limpio .portada__texto{padding-bottom:clamp(40px,7vh,64px)}
  body.diseno-limpio .areas{min-height:0;justify-content:center;padding:clamp(28px,6vw,48px) 0}
  body.diseno-limpio .hoja{margin:0 var(--margen);max-width:560px}
}
@media (min-width:900px){
  body.diseno-limpio .portada{
    display:grid;
    grid-template-columns:
      [pleno-ini] max(var(--margen),calc((100% - 1184px) / 2))
      [texto-ini] minmax(0,1fr)
      [plano-ini] var(--limpio-aire)
      [hoja-ini] var(--limpio-hoja)
      [hoja-fin] max(var(--margen),calc((100% - 1184px) / 2))
      [pleno-fin];
    grid-template-rows:[cabecera] auto [sup] minmax(72px,1fr) [contenido] auto [inf] minmax(48px,1.25fr) [fin];
  }
  body.diseno-limpio .portada > .contenedor{grid-column:pleno-ini / pleno-fin;grid-row:cabecera}
  body.diseno-limpio .portada__texto{grid-column:texto-ini / plano-ini;grid-row:contenido;align-self:start;width:auto;max-width:none;margin:0;padding:34px clamp(32px,4vw,64px) 0 0}
  body.diseno-limpio .portada__texto > div{max-width:640px}
  body.diseno-limpio .areas{display:contents}
  body.diseno-limpio .banda{position:static;inset:auto;grid-column:plano-ini / pleno-fin;grid-row:sup / fin;margin-top:24px}
  body.diseno-limpio .hoja{position:relative;z-index:1;top:auto;right:auto;width:auto;grid-column:hoja-ini / hoja-fin;grid-row:contenido;align-self:start}
}
body.diseno-limpio .seccion{padding-top:var(--limpio-ritmo)}
body.diseno-limpio .seccion::before,
body.diseno-limpio .contacto::before{content:"";display:block;height:1px;background:var(--filete);margin-bottom:20px}
body.diseno-limpio .seccion__cabeza{max-width:820px}
body.diseno-limpio .seccion__cabeza h2,
body.diseno-limpio .contacto__intro h2{margin-top:16px;font:300 clamp(32px,3.8vw,52px)/1.1 var(--font-sans);letter-spacing:-.015em}
body.diseno-limpio .seccion__intro{margin-top:24px}
body.diseno-limpio .practica{margin-top:var(--limpio-bloque)}
body.diseno-limpio .practica li{padding:32px 0}
body.diseno-limpio .sectores{margin-top:var(--limpio-bloque)}
body.diseno-limpio .perfiles{margin-top:clamp(64px,8vw,96px)}
body.diseno-limpio .perfil{padding-top:28px;border-top:1px solid var(--filete)}
body.diseno-limpio .metodo{margin-top:var(--limpio-ritmo)}
body.diseno-limpio .seccion--sin-borde{padding-bottom:clamp(88px,10vw,136px)}
body.diseno-limpio .etapas{margin-top:var(--limpio-bloque);row-gap:48px}
body.diseno-limpio .metodo__datos{margin-top:clamp(56px,7vw,88px)}
body.diseno-limpio .contacto{padding-top:var(--limpio-ritmo);padding-bottom:var(--limpio-ritmo)}
body.diseno-limpio .contacto::before{flex:0 0 100%;grid-column:1 / -1;margin-bottom:-28px}
body.diseno-limpio .pie__sup{padding-top:40px}