/* ============================================================
   OKAERI — sistema visual
   Paleta tomada del logotipo: tinta azul, madera clara, crema.
   Sin fuentes externas: no se carga nada de terceros, asi que
   ningun dato del visitante viaja a Google Fonts.
   ============================================================ */

:root{
  --crema:#FAF5EC;
  --crema-2:#F2EADB;
  --linea:#E3D7C3;
  --tinta:#2C3E4F;
  --tinta-2:#55697A;
  --madera:#C1904F;
  --madera-clara:#DDB77E;
  --madera-texto:#8A5F24;

  --serif:Georgia,"Iowan Old Style","Times New Roman",serif;
  --sans:system-ui,-apple-system,"Segoe UI",sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;font-size:16px}

/* En pantallas grandes crece la tipografia, y con ella los contenedores,
   que estan medidos en rem. Asi la pagina se agranda entera en vez de
   estirar la columna y dejar las lineas ilegibles de largas. */
@media(min-width:1450px){html{font-size:17.5px}}
@media(min-width:1800px){html{font-size:19px}}
@media(min-width:2300px){html{font-size:20.5px}}
body{
  margin:0;
  background:var(--crema);
  color:var(--tinta);
  font-family:var(--sans);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--madera-texto)}
img{max-width:100%;height:auto}

/* ---------- estructura ---------- */
.envoltorio{max-width:53rem;margin:0 auto;padding:10vh 1.6rem 13vh}
.ancho{max-width:72rem;margin:0 auto;padding:0 1.6rem}
.banda{padding:6.5rem 0;border-top:1px solid var(--linea)}
.banda-oscura{background:var(--tinta);color:var(--crema);padding:6.5rem 0;border:0}
.banda-oscura .rotulo{color:var(--madera-clara)}
.banda-oscura .titular-2{color:var(--crema)}
.banda-oscura .sub{color:#B9C6D1;max-width:none}

/* ---------- tipografia ---------- */
h1{font-family:var(--serif);font-weight:400;letter-spacing:-.015em;margin:0 0 1.1rem}
h2{font-family:var(--serif);font-weight:400;letter-spacing:-.01em;margin:0 0 .5rem}
.titular{font-size:clamp(2.1rem,5.2vw,3.4rem);line-height:1.12}
.titular-2{font-size:clamp(1.7rem,3.6vw,2.4rem);line-height:1.18;margin:0 0 2.8rem}
.sub{font-size:1.12rem;color:var(--tinta-2);max-width:36em;margin:0 0 2.5rem}
.rotulo{
  font-family:var(--sans);
  font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--madera-texto);font-weight:600;margin:0 0 1.3rem;
}

/* ---------- cabecera ---------- */
.cabecera{display:flex;align-items:center;justify-content:space-between;padding:1.6rem 0;gap:1rem}
.logo{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:inherit}
.logo svg{display:block;flex:0 0 auto}
.logo .icono{display:block;width:auto;height:34px;flex:0 0 auto}
.logo .nombre{font-family:var(--serif);font-size:1.45rem}
.enlace-discreto{font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-2);text-decoration:none}
.enlace-discreto:hover{color:var(--madera-texto)}

/* ---------- hero ---------- */
.hero{padding-top:5vh;padding-bottom:5.5rem}
.hero-rejilla{display:grid;gap:2.4rem;align-items:center}
.marca-grande{display:block;width:100%;max-width:30rem;height:auto;margin:0}
.hero .titular{max-width:none;margin-bottom:1.2rem}
.hero .sub{max-width:34em;margin-bottom:2.2rem}
/* Hero de página sola (sin imagen al lado, p. ej. /gestion-salud/): que el
   texto ocupe el ancho del bloque en vez de dejar hueco vacío a la derecha. */
.hero > .hero-texto .sub{max-width:none}
@media(min-width:900px){
  .hero{padding-top:7vh;padding-bottom:6.5rem}
  .hero-rejilla{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:4rem}
  .marca-grande{max-width:100%}
}
.cinta{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:.5rem 1.3rem;
  font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--tinta-2);margin:0 0 2.4rem;
}
.punto{width:4px;height:4px;border-radius:50%;background:var(--madera);display:inline-block}

/* ---------- rejillas ---------- */
.rejilla{display:grid;gap:1px;background:var(--linea);border:1px solid var(--linea);border-radius:12px;overflow:hidden}
@media(min-width:720px){.rejilla-2{grid-template-columns:1fr 1fr}}
.bloque{background:var(--crema);padding:2.2rem 2rem}
.bloque .indice{font-size:.68rem;letter-spacing:.14em;color:var(--madera-texto);font-weight:600;display:block;margin-bottom:.9rem}
.bloque h2{font-size:1.32rem}
.bloque p{margin:0;color:var(--tinta-2);font-size:.96rem}
.bloque ul{margin:1rem 0 0;padding-left:1.1rem;color:var(--tinta-2);font-size:.9rem}
.bloque li{margin-bottom:.3rem}

/* ---------- metodo ---------- */
.hito{display:grid;gap:.4rem 1.6rem;padding:2rem 0;border-top:1px solid rgba(255,255,255,.14)}
@media(min-width:720px){.hito{grid-template-columns:4.5rem 1fr 9rem}}
.hito .paso-num{font-family:var(--serif);font-size:1.9rem;color:var(--madera-clara);line-height:1}
.hito h2{font-size:1.22rem;color:var(--crema);margin-bottom:.35rem}
.hito p{margin:0;color:#B9C6D1;font-size:.96rem;max-width:36em}
.hito .plazo{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--madera-clara)}

/* ---------- trabajos ---------- */
.caso{display:block;text-decoration:none;color:inherit;background:var(--crema);padding:2.2rem 2rem;transition:background .18s ease}
.caso:hover{background:var(--crema-2)}
.etiqueta{
  display:inline-block;font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--madera-texto);border:1px solid var(--linea);
  border-radius:100px;padding:.2rem .7rem;margin-bottom:1rem;
}
.caso h2{font-size:1.28rem}
.caso p{margin:0;color:var(--tinta-2);font-size:.96rem}
.caso .flecha{color:var(--madera-texto);font-size:.88rem;margin-top:1rem;display:block}
.hueco{background:var(--crema);padding:2.2rem 2rem;color:var(--tinta-2);font-size:.94rem}
.hueco strong{display:block;color:var(--tinta);font-family:var(--serif);font-size:1.15rem;font-weight:400;margin-bottom:.4rem}

/* ---------- botones ---------- */
.boton{
  display:inline-block;text-decoration:none;font-family:var(--sans);
  background:var(--tinta);color:var(--crema);font-weight:600;
  padding:.95rem 1.9rem;border-radius:8px;font-size:.96rem;
  transition:transform .16s ease,opacity .16s ease;
}
.boton:hover{transform:translateY(-1px);opacity:.92}
.banda-oscura .boton{background:var(--madera-clara);color:var(--tinta)}

/* ---------- pie ---------- */
.pie-sitio{
  border-top:1px solid var(--linea);padding:2.4rem 0 3.5rem;
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;
  align-items:center;font-size:.84rem;color:var(--tinta-2);
}

/* ============================================================
   Clases heredadas por las presentaciones internas
   ============================================================ */
.marca{font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--madera-texto);margin:0 0 3.2rem;font-weight:600}
.envoltorio h1{font-size:clamp(1.9rem,5vw,2.8rem);line-height:1.16}
.entrada{font-size:1.12rem;color:var(--tinta-2);margin:0 0 3.5rem;max-width:34em}
.epigrafe{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--madera-texto);font-weight:600;margin:0 0 1.2rem}
.tarjeta{
  display:block;text-decoration:none;color:inherit;
  border:1px solid var(--linea);border-radius:10px;
  padding:1.5rem 1.6rem;margin-bottom:.8rem;background:#fff;
  transition:border-color .18s ease,transform .18s ease;
}
.tarjeta:hover{border-color:var(--madera);transform:translateY(-2px)}
.tarjeta h2{font-size:1.2rem;margin-bottom:.25rem}
.tarjeta p{margin:0;color:var(--tinta-2);font-size:.94rem}
.pie{margin-top:4.5rem;padding-top:1.4rem;border-top:1px solid var(--linea);color:var(--tinta-2);font-size:.85rem}
.aviso{border:1px dashed var(--linea);border-radius:10px;padding:1.4rem 1.6rem;color:var(--tinta-2);font-size:.95rem;background:#fff}
.seccion{margin:0 0 3.5rem}
.problema{list-style:none;padding:0;margin:0}
.problema li{border-left:2px solid var(--madera-clara);padding:0 0 0 1.2rem;margin:0 0 1.4rem}
.problema strong{display:block;font-weight:600;margin-bottom:.15rem}
.problema span{color:var(--tinta-2);font-size:.95rem;display:block;max-width:33em}
.paso{display:flex;gap:1rem;margin:0 0 1.3rem;align-items:baseline}
.paso b{
  flex:0 0 1.9rem;height:1.9rem;line-height:1.8rem;text-align:center;
  border:1px solid var(--madera);border-radius:50%;color:var(--madera-texto);
  font-size:.8rem;font-weight:600;
}
.paso div{flex:1}
.paso strong{display:block;margin-bottom:.1rem}
.paso span{color:var(--tinta-2);font-size:.95rem;display:block;max-width:33em}
table{width:100%;border-collapse:collapse;font-size:.93rem;margin:0}
th{text-align:left;font-weight:600;color:var(--madera-texto);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;padding:0 1rem .7rem 0;border-bottom:1px solid var(--linea)}
td{padding:.85rem 1rem .85rem 0;border-bottom:1px solid var(--linea);vertical-align:top}
td:last-child,th:last-child{padding-right:0}
.fase{color:var(--madera-texto);font-weight:600;white-space:nowrap}
.dato{border:1px solid var(--linea);border-radius:10px;background:#fff;padding:1.5rem 1.6rem;margin:0 0 .8rem}
.dato .cifra{font-family:var(--serif);font-size:2rem;letter-spacing:-.02em;display:block}
.dato .pie-dato{color:var(--tinta-2);font-size:.9rem}
.tachado{color:var(--tinta-2);text-decoration:line-through}

.tabla-scroll{overflow-x:auto}

@media(prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  html{scroll-behavior:auto}
}