/* ============================================================
   CONTROL HOUSE — base
   Un mundo visual cálido, silencioso y editorial. La arquitectura y la luz
   llevan el protagonismo; la interfaz acompaña sin competir.
   ============================================================ */

@font-face{
  font-family:'Fraunces'; font-style:normal; font-weight:100 900; font-display:swap;
  src:url('../fonts/fraunces.woff2') format('woff2');
}
@font-face{
  font-family:'Fraunces'; font-style:italic; font-weight:100 900; font-display:swap;
  src:url('../fonts/fraunces-italica.woff2') format('woff2');
}
@font-face{
  font-family:'Archivo'; font-style:normal; font-weight:100 900; font-display:swap;
  src:url('../fonts/archivo.woff2') format('woff2');
}
@font-face{
  font-family:'Plex Mono'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../fonts/mono.woff2') format('woff2');
}

:root{
  /* fondos */
  --fondo:#080909; --fondo-2:#0D0F0E; --panel:#121413; --panel-2:#191B19;
  --borde:#252825; --borde-2:#3A3E39;
  /* texto */
  --texto:#F2F0EA; --texto-2:#B2B2A9; --texto-3:#777A73;
  /* azul del monograma + acento cálido para la experiencia */
  --marca:#B99B73; --marca-claro:#D2B891; --marino:#0B2247;
  /* semánticos */
  --calido:#D2B891; --ok:#75B887; --aviso:#C99B5B;
  /* medidas */
  --ancho:1280px;
  --paso:clamp(76px, 9.5vw, 132px);
  --r:5px;
  color-scheme:dark;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  margin:0; background:var(--fondo); color:var(--texto);
  font-family:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:16px; line-height:1.68; -webkit-font-smoothing:antialiased;
}

h1,h2,h3{
  font-family:'Fraunces',Georgia,'Times New Roman',serif; font-weight:200;
  letter-spacing:-.022em; line-height:1.08; text-wrap:balance; margin:0;
}
h1{font-size:clamp(38px,6.6vw,72px); letter-spacing:-.032em}
h2{font-size:clamp(32px,5vw,58px); letter-spacing:-.035em}
h3{font-size:19px; font-family:'Archivo',sans-serif; font-weight:500;
   letter-spacing:-.01em; line-height:1.3}
p{margin:0}
a{color:inherit}
img,video{max-width:100%; display:block}
::selection{background:var(--marca); color:#fff}

.env{width:100%; max-width:var(--ancho); margin-inline:auto; padding-inline:20px}
.env-nar{max-width:760px}
@media (max-width:520px){ .env{padding-inline:16px} }

section{padding-block:var(--paso)}
.linea{border-top:1px solid var(--borde)}

.eyebrow{
  display:flex; align-items:center; gap:10px; margin:0 0 18px;
  font-size:11px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--texto-3);
}
.eyebrow::before{content:""; width:26px; height:1px; background:var(--marca); flex:none}
.eyebrow.centro{justify-content:center}

.bajada{color:var(--texto-2); font-size:17px; max-width:58ch; margin-top:18px}
.cuerpo{color:var(--texto-2); font-size:15.5px}
.mono{font-family:'Plex Mono',ui-monospace,SFMono-Regular,monospace}
.cabecera{max-width:62ch; margin-bottom:44px}
.centro{text-align:center}
.centro .bajada{margin-inline:auto}

/* ---------- botones ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font:inherit; font-size:14.5px; font-weight:500; text-decoration:none; cursor:pointer;
  border-radius:3px; padding:12px 21px; border:1px solid transparent; white-space:nowrap;
  transition:background .2s, border-color .2s, color .2s;
}
.btn-pri{background:#EAE4D9; color:#111311}
.btn-pri:hover{background:#D8C9B1}
.btn-sec{border-color:rgba(242,240,234,.42); color:var(--texto)}
.btn-sec:hover{border-color:var(--texto); background:rgba(255,255,255,.06)}
.btn-chico{padding:9px 15px; font-size:13.5px}
.btn-lg{padding:14px 24px; font-size:15.5px}
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--marca-claro); outline-offset:2px; border-radius:4px;
}

/* Con el dedo, nada tocable por debajo de 44 px. En escritorio se
   dejan compactos: con mouse, 44 px de alto se ven pesados. */
@media (pointer: coarse), (max-width: 900px){
  .btn-chico, .guion, .tecla, .filtro, .miniatura, .logo{
    min-height:44px; display:inline-flex; align-items:center;
  }
  .btn-chico{padding-block:11px}
  .guion, .tecla, .filtro{padding-block:10px}
  .menu a{min-height:44px; display:inline-flex; align-items:center}
  /* los enlaces del pie también se tocan con el pulgar */
  .pie ul{gap:2px}
  .pie ul a, .contacto-lin a{min-height:44px; min-width:44px; display:inline-flex; align-items:center}
}

/* ---------- barra ---------- */
.barra{
  position:sticky; top:env(safe-area-inset-top, 0px); z-index:40;
  background:color-mix(in srgb, var(--fondo) 92%, transparent);
  backdrop-filter:blur(18px); border-bottom:1px solid rgba(242,240,234,.10);
}
.barra .env{display:flex; align-items:center; justify-content:space-between; gap:16px; height:66px}
.logo{display:flex; align-items:center; gap:11px; text-decoration:none; flex:none}
.logo svg{width:30px; height:30px; display:block}
.logo b{font-size:14px; font-weight:500; letter-spacing:.01em}
.menu{display:flex; gap:30px}
.menu a{font-size:12px; letter-spacing:.035em; color:var(--texto-2); text-decoration:none; transition:color .2s}
.menu a:hover, .menu a[aria-current="page"]{color:var(--texto)}
@media (max-width:900px){ .menu{display:none} }
.nav-movil{display:none; position:relative}
.nav-movil summary{display:flex; align-items:center; gap:9px; cursor:pointer; list-style:none;
  color:var(--texto-2); font-size:11px; letter-spacing:.06em; text-transform:uppercase}
.nav-movil summary::-webkit-details-marker{display:none}
.nav-movil summary{min-height:44px; min-width:44px; justify-content:center; padding-inline:6px}
.nav-movil summary b{font-size:20px; font-weight:300; line-height:1; transition:transform .2s}
.nav-movil[open] summary b{transform:rotate(45deg)}
.nav-movil-list{position:absolute; top:calc(100% + 20px); right:-10px; z-index:60; width:min(280px,calc(100vw - 32px));
  display:flex; flex-direction:column; padding:10px 18px; background:#101211; border:1px solid var(--borde-2);
  box-shadow:0 20px 48px rgba(0,0,0,.42)}
.nav-movil-list a{display:flex; align-items:center; min-height:48px; color:var(--texto-2); text-decoration:none;
  border-bottom:1px solid var(--borde); font-size:14px}
.nav-movil-list a:last-child{border-bottom:0}
.nav-movil-list a:hover,.nav-movil-list a[aria-current="page"]{color:var(--texto)}
@media (max-width:900px){ .nav-movil{display:block} }
@media (max-width:390px){ .logo b{font-size:12px}.barra .btn-chico{font-size:11.5px;padding-inline:9px} }

/* ---------- pie ---------- */
.pie{border-top:1px solid var(--borde); padding-block:44px 52px; color:var(--texto-3); font-size:13.5px}
.pie-reja{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:34px}
@media (max-width:760px){ .pie-reja{grid-template-columns:1fr; gap:26px} }
.pie h4{font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
        color:var(--texto-2); margin:0 0 12px}
.pie ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px}
.pie a{text-decoration:none}
.pie a:hover{color:var(--texto-2)}
.pie-abajo{margin-top:36px; padding-top:20px; border-top:1px solid var(--borde);
           display:flex; flex-wrap:wrap; gap:10px 26px; justify-content:space-between}

/* ---------- whatsapp flotante ---------- */
.wa-flota{
  position:fixed; right:16px; z-index:50;
  bottom:calc(16px + env(safe-area-inset-bottom, 0px));
  display:inline-flex; align-items:center; gap:9px; text-decoration:none;
  background:var(--panel-2); border:1px solid rgba(210,184,145,.45); color:var(--texto);
  border-radius:99px; padding:11px 17px; font-size:14px; font-weight:500;
  box-shadow:0 10px 30px rgba(0,0,0,.45);
}
.wa-flota:hover{border-color:var(--marca)}
.wa-flota svg{width:17px; height:17px; fill:var(--ok)}
@media (max-width:520px){
  .wa-flota{width:48px; height:48px; justify-content:center; padding:0; border-radius:50%}
  .wa-flota span{display:none}
}
@media (max-width:360px){
  .barra .env{gap:8px}
  .logo{gap:6px}
  .logo svg{width:26px; height:26px}
  .logo b{font-size:11.5px}
  .nav-movil summary span{display:none}
  .barra .btn-chico{font-size:10px; padding-inline:7px}
}

@media (prefers-reduced-motion:reduce){ *{animation:none!important; transition-duration:.01ms!important} }