/* =============================================================
   base.css — ESTRUCTURA y TIPOGRAFIA compartidas por todo el sitio.

   Regla de oro de este archivo: NO define ni un solo color propio.
   Todo color sale de una variable (var(--algo)) que define el archivo
   de tema de cada pagina. Asi la pagina principal puede ser terracota,
   Nua verde, y Nivara otra cosa, sin tocar ni una linea de aqui.

   La tipografia SI es igual en todas las paginas: es lo que amarra
   que se sientan del mismo autor aunque cambie el color.
   ============================================================= */

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:86px}
body{
  margin:0;background-color:var(--papel);color:var(--tinta);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:16px;line-height:1.55;font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:"Bricolage Grotesque",Inter,sans-serif;font-weight:700;letter-spacing:-.025em;margin:0}
h1{font-size:clamp(2.4rem,6.4vw,4.1rem);line-height:1.01}
h2{font-size:clamp(1.7rem,3.4vw,2.45rem);line-height:1.1}
h3{font-size:1.24rem;line-height:1.24;letter-spacing:-.018em}
h4{font-size:1.02rem;letter-spacing:-.012em}
p{margin:0 0 1em;max-width:64ch}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
/* height:auto es clave: si el HTML trae width/height (que sirven para que el
   navegador reserve el espacio y la pagina no brinque al cargar), esos valores
   ganarian sobre aspect-ratio y deformarian la foto. */
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0}
input,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--acento);outline-offset:3px;border-radius:3px}

/* --- Layout --------------------------------------------------- */
.wrap{max-width:var(--ancho);margin:0 auto;padding:0 20px}
.seccion{padding-top:clamp(52px,7vw,86px);padding-bottom:clamp(52px,7vw,86px)}
/* Ojo: aqui solo se toca el padding vertical. Si escribieramos
   "padding: 60px 0" borrariamos el padding lateral que pone .wrap
   (misma especificidad, y .seccion va despues), y en celular el
   contenido quedaria pegado a los bordes de la pantalla. */
.linea-arriba{border-top:1px solid var(--linea)}
.cabeza{margin-bottom:34px;max-width:66ch}
.cabeza p{margin-top:12px;color:var(--suave)}
.eyebrow{font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--acento);margin:0 0 12px}

/* Corte diagonal entre bandas de color */
.diag{clip-path:polygon(0 3vw,100% 0,100% 100%,0 100%);margin-top:-3vw;padding-top:3vw;position:relative;z-index:1}
.diag-i{clip-path:polygon(0 0,100% 3vw,100% 100%,0 100%);margin-top:-3vw;padding-top:3vw;position:relative;z-index:1}

/* --- Header --------------------------------------------------- */
/* "body > header" y no "header" a secas: el selector suelto tambien le pega
   a cualquier <header> anidado (por ejemplo el de una ficha del buscador) y
   le mete fondo y position:sticky. El ">" lo limita al header del sitio. */
body > header{position:sticky;top:0;z-index:40;background:var(--papel-translucido);
  backdrop-filter:saturate(1.3) blur(12px);border-bottom:1px solid var(--linea)}
.barra{max-width:var(--ancho);margin:0 auto;padding:10px 20px;display:flex;align-items:center;gap:18px}
.asesor{display:flex;align-items:center;gap:11px;min-width:0}
.retrato{width:42px;height:42px;border-radius:50%;overflow:hidden;flex:none;box-shadow:0 0 0 1px var(--linea)}
.retrato img{width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.asesor b{display:block;font-size:.95rem;line-height:1.2;letter-spacing:-.01em}
.asesor span{display:block;font-size:.76rem;color:var(--suave);line-height:1.25}
.nav{margin-left:auto;display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav a{padding:8px 11px;border-radius:9px;font-size:.88rem;font-weight:500;color:var(--suave);white-space:nowrap}
.nav a:hover{background:var(--superficie);color:var(--tinta)}
@media (max-width:900px){.nav{display:none}}

/* Enlace de regreso de las subpáginas. En celular el texto largo
   ("Todos los desarrollos") rompía el encabezado en dos líneas y
   empujaba el botón de WhatsApp fuera de la pantalla. */
.volver{display:inline-flex;align-items:center;gap:7px;font-size:.87rem;font-weight:600;color:var(--suave);flex:none}
.volver:hover{color:var(--marca)}
.volver svg{width:15px;height:15px;fill:currentColor;flex:none}
.volver-corto{display:none}
@media (max-width:700px){
  .volver-largo{display:none}
  .volver-corto{display:inline}
}

/* --- Botones -------------------------------------------------- */
.btn{display:inline-flex;align-items:center;gap:9px;padding:12px 18px;border-radius:12px;
  font-weight:600;font-size:.94rem;border:1px solid transparent;transition:transform .15s, box-shadow .15s, background .15s}
.btn:hover{transform:translateY(-1px)}
.btn svg{width:18px;height:18px;fill:currentColor;flex:none}
.btn-marca{background:var(--marca);color:var(--marca-txt);box-shadow:var(--sombra-marca)}
.btn-marca:hover{background:var(--marca-fuerte)}
.btn-linea{border-color:var(--linea-fuerte);background:transparent;color:var(--tinta)}
.btn-linea:hover{background:var(--superficie)}
header .btn-marca{margin-left:6px;padding:9px 14px;font-size:.88rem}
@media (max-width:900px){header .btn-marca{margin-left:0}}
.flota{position:fixed;right:16px;bottom:16px;z-index:50;box-shadow:0 12px 30px -10px rgba(0,0,0,.45);
  transition:opacity .25s ease, transform .25s ease}
.flota-oculta{opacity:0;transform:translateY(14px);pointer-events:none}
@media (min-width:901px){.flota{display:none}}

/* --- Piezas reutilizables ------------------------------------- */
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:0}
.chips li{font-size:.8rem;font-weight:600;padding:5px 11px;border-radius:999px;
  background:var(--chip-fondo);color:var(--chip-txt);border:1px solid var(--chip-linea)}
.estado{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;font-weight:700;
  letter-spacing:.02em;padding:5px 11px;border-radius:999px;background:var(--estado-fondo);color:var(--estado-txt)}
.estado::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.dato{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-top:1px solid var(--linea);font-size:.92rem}
.dato span{color:var(--suave)}
.dato b{font-weight:700;text-align:right}
.aclara{font-size:.85rem;color:var(--suave);max-width:62ch}
.porconf{font-size:.78rem;font-weight:600;color:var(--suave);font-style:italic}

/* --- Footer --------------------------------------------------- */
footer{background:var(--pie-fondo);color:var(--pie-txt);padding:46px 0 34px}
.pie{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding-bottom:22px;border-bottom:1px solid var(--pie-linea)}
.pie-datos{display:flex;flex-direction:column;line-height:1.45}
.pie-datos b{font-size:1.05rem}
.pie-datos a{color:var(--pie-suave);font-size:.92rem}
.pie-datos a:hover{color:var(--pie-acento)}
.pie .btn-marca{margin-left:auto}
.legal{margin:20px 0 0;font-size:.76rem;line-height:1.55;color:var(--pie-suave);max-width:none}
.pie-links{display:flex;gap:16px;flex-wrap:wrap;margin-top:18px;font-size:.88rem}
.pie-links a{color:var(--pie-suave)}
.pie-links a:hover{color:var(--pie-acento)}

/* --- Área de toque en celular -------------------------------- */
/* Un enlace de texto mide ~20px de alto; el dedo necesita 44. En celular
   se les da padding vertical para que se puedan tocar sin fallar. */
@media (max-width:700px){
  /* En celular el cargo hacía que el encabezado creciera a cuatro líneas.
     Se queda sólo el nombre, en una línea, y el cargo se lee en la
     portada de todos modos. */
  .asesor span{display:none}
  .asesor b{white-space:nowrap}
  .barra{gap:10px;padding:9px 16px}
  .retrato{width:36px;height:36px}
  header .btn-marca{padding:9px 13px;font-size:.84rem}
  .pie-links{gap:4px 16px}
  .pie-links a{padding:9px 0}
  .pie-datos a{padding:7px 0}
  .nav a{padding:12px 11px}
  .volver{padding:8px 0}
}

/* --- Animacion de entrada ------------------------------------- */
/* Por que ".js .reveal" y no ".reveal" a secas:
   si el JavaScript falla (red lenta, bloqueador, error), un ".reveal{opacity:0}"
   dejaria el contenido invisible PARA SIEMPRE. Con esta version, el contenido
   nace visible y solo se esconde cuando el JS ya confirmo que puede animarlo. */
.js .reveal{opacity:0;transform:translateY(14px);transition:opacity .5s ease, transform .5s ease}
.js .reveal.visible{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  .js .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
  .btn:hover{transform:none}
}