/* =====================================================================
   Desarrollos MCC · base.css
   Reinicio, tipografía, estructura de página, fondo y animaciones de entrada.
   Sólo usa variables de tokens.css.
   ===================================================================== */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--alto-cabecera) + 32px)}
body{margin:0;min-height:100vh;background:var(--c-fondo);color:var(--c-tinta);font:400 var(--t-cuerpo)/var(--interlineado-texto) var(--fuente-texto);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
[hidden]{display:none!important}
img,svg,video{display:block;max-width:100%}
img{height:auto}
/* Las fotos van en <picture> con su WebP: la caja no existe para el diseño. */
picture{display:contents}
/* El <source> no es una celda (12/11/2026): con display:contents en <picture> ocupaba un lugar en las grillas y corría las fotos (y el bloque de la ubicación) a la derecha. */
picture>source{display:none}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
h1,h2,h3,h4,p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid var(--c-marca);outline-offset:3px;border-radius:6px}
::selection{background:var(--c-marca-suave)}

/* Transición entre páginas (navegadores que la soportan; el resto navega normal). */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:var(--d-media)}

/* ---------- Fondo «aurora»: luces pastel quietas detrás de todo ---------- */
body::before{content:"";position:fixed;inset:-20%;z-index:-1;pointer-events:none;
  background:radial-gradient(38% 34% at 12% 10%,var(--aurora-1),transparent 70%),radial-gradient(36% 32% at 88% 6%,var(--aurora-2),transparent 70%),radial-gradient(40% 36% at 70% 70%,var(--aurora-3),transparent 70%),radial-gradient(34% 30% at 20% 80%,var(--aurora-4),transparent 70%)}

/* ---------- Estructura ---------- */
.contenedor{width:100%;max-width:calc(var(--ancho-contenido) + 2 * var(--margen-lateral));margin-inline:auto;padding-inline:var(--margen-lateral)}
.seccion{margin-top:var(--e-10)}
.seccion--chica{margin-top:var(--e-9)}
main{display:block;padding-bottom:var(--e-10)}
.saltar{position:absolute;left:12px;top:-60px;z-index:999;padding:12px 18px;border-radius:var(--r-pildora);background:var(--c-tinta);color:var(--c-fondo);font-weight:600;text-decoration:none}
.saltar:focus{top:12px}
.solo-lectores{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Tipografía ---------- */
.titulo-mega,.titulo-1,.titulo-2,.titulo-3{font-family:var(--fuente-titulos);font-weight:var(--peso-titulo);letter-spacing:var(--espaciado-titulo);line-height:var(--interlineado-titulo);text-wrap:balance}
.titulo-mega{font-size:var(--t-mega);padding-bottom:.06em}
.titulo-1{font-size:var(--t-1);padding-bottom:.06em}
.titulo-2{font-size:var(--t-2);letter-spacing:-.03em;line-height:1.08}
.titulo-3{font-size:var(--t-3);letter-spacing:-.025em;line-height:1.12}
.resaltado{color:var(--c-marca-texto)}
/* Rótulo en minúsculas y en la tinta secundaria (12/11/2026): las mayúsculas
   espaciadas en rojo sobre cada título eran gramática de plantilla. Los rótulos
   que sólo repetían la sección («Desarrollos», «Galería»…) se sacaron; quedan los
   que dicen algo (el lugar, «Tu cuota estimada», «Dónde queda»). */
.ceja{display:block;font:600 var(--t-ceja)/1.4 var(--fuente-texto);color:var(--c-tinta-2)}
.ceja+.titulo-mega,.ceja+.titulo-1,.ceja+.titulo-2,.ceja+.titulo-3{margin-top:var(--e-3)}
.bajada{font-size:clamp(1.0625rem,1rem + .35vw,1.25rem);line-height:1.55;color:var(--c-tinta-2);max-width:62ch;text-wrap:pretty}
.texto-2{color:var(--c-tinta-2)}
.texto-3{color:var(--c-tinta-3)}
.chico{font-size:var(--t-chico)}
.mini{font-size:var(--t-mini)}
.numero{font-variant-numeric:tabular-nums}
.cabeza-seccion{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--e-6);flex-wrap:wrap;margin-bottom:var(--e-7)}

/* ---------- Superficies ---------- */
.superficie{background:var(--c-superficie);border:1px solid var(--c-linea);border-radius:var(--r-grande);box-shadow:var(--sombra-2)}
.vidrio{background:var(--c-superficie-vidrio);border:1px solid rgba(255,255,255,.7);border-radius:var(--r-grande)}

/* ---------- Animaciones de entrada ----------
   .aparece: título o bloque que sube al cargar la página.
   .al-ver: bloque que aparece al llegar con el scroll (CSS puro donde se puede,
            con IntersectionObserver de respaldo en sitio.js). */
@keyframes subir{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes mascara{from{clip-path:inset(0 0 100% 0);transform:translateY(18px)}to{clip-path:inset(0 0 -20% 0);transform:none}}
@keyframes aparecer{from{opacity:0}to{opacity:1}}
@keyframes saltar{0%{transform:scale(.6);opacity:0}100%{transform:none;opacity:1}}
@keyframes girar{to{transform:rotate(360deg)}}
@keyframes temblar{20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}
@keyframes crecer-x{from{transform:scaleX(0)}to{transform:none}}
@keyframes dibujar{from{stroke-dashoffset:var(--largo,2000)}to{stroke-dashoffset:0}}

.aparece{animation:subir var(--d-entrada) var(--curva-salida) both}
.aparece-titulo{animation:mascara var(--d-entrada) var(--curva-salida) both}
.retraso-1{animation-delay:calc(var(--d-escalonado) * 1)}
.retraso-2{animation-delay:calc(var(--d-escalonado) * 2)}
.retraso-3{animation-delay:calc(var(--d-escalonado) * 3)}
.retraso-4{animation-delay:calc(var(--d-escalonado) * 4)}

/* Con scroll: CSS puro (Chrome, Edge, Safari 26+). */
@supports (animation-timeline:view()){
  .al-ver{animation:subir linear both;animation-timeline:view();animation-range:entry 0% cover 22%}
}
/* Respaldo: sitio.js agrega .js-al-ver y .visible con IntersectionObserver. */
.js-al-ver .al-ver{opacity:0;transform:translateY(24px);transition:opacity var(--d-entrada) var(--curva-salida),transform var(--d-entrada) var(--curva-salida)}
.js-al-ver .al-ver.visible{opacity:1;transform:none}

/* ---------- Reducir movimiento: se apaga todo lo que se mueve ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:1ms!important;animation-iteration-count:1!important;animation-delay:0ms!important;transition-duration:1ms!important;scroll-behavior:auto!important}
  .al-ver,.js-al-ver .al-ver{animation:none!important;opacity:1!important;transform:none!important}
  @view-transition{navigation:none}
}