/* ---------------------------------------------------------
   7 Días — Agencia
   Mismo sistema visual que vitomartinez.com (v3, estilo
   danmall.com): negro puro, cero border-radius, display sans
   ultra-pesado en mayusculas con interlineado negativo,
   numerales gigantes, bloques de color a sangre. Mobile-first,
   sin dependencias externas.

   >>> UN SOLO COLOR DE ACENTO. Es la misma regla que rige el
   sitio hermano y no es capricho: alli se probo magenta + cian
   a la vez y quedo "colorinche" (Vito, 2026-08-03). Dos acentos
   compiten y el sistema pierde el equilibrio. Para cambiar el
   color se cambia --accent y nada mas.

   --accent = #ffd60a. Es el amarillo de la diagonal del 7: el
   logo ya lo traia (#faae4e, un ambar mas apagado), asi que el
   sitio vuelve al color de la marca en vez de imponerle uno.
   Los PNG de img/ vienen repintados a este tono exacto.

   Rinde 14,9:1 sobre negro y el negro encima del bloque a
   sangre rinde lo mismo. Eso importa: el acento aqui no es solo
   un detalle, es una superficie entera con titulares negros.
   Se descarto #ff5b1f (naranja incandescente) justo por ahi —
   se veia bien en el hero, pero el bloque a sangre bajaba a
   6,8:1 y pesaba demasiado.

   POR QUE AMARILLO Y NO CIAN: cian es la marca personal
   (vitomartinez.com, el que piensa el sistema); amarillo es la
   agencia (la que lo ejecuta). Extremos opuestos de la rueda:
   nadie confunde los dos sitios, y se nota que son de la misma
   mano.
--------------------------------------------------------- */

/* ---------- Anton, la condensada de los titulares ----------
   Alojada aqui mismo, NO enlazada a Google: cero dependencias
   externas, igual que en el sitio hermano. 12 KB, subconjunto
   latino. Licencia SIL OFL — ver fuentes/LICENCIA-anton.txt */
@font-face{
  font-family:"Anton";
  src:url("fuentes/anton.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

:root{
  --accent:#ffd60a;
  --accent-ink:#000000;   /* negro sobre el amarillo: 14,9:1 */
  --text:#ffffff;
  --white:#ffffff;
  --muted:rgba(255,255,255,0.55);
  --faint:rgba(255,255,255,0.30);
  --hair:rgba(255,255,255,0.16);
  --maxw:1180px;
  --pad:24px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{scroll-behavior:smooth}

body{
  background:#000;
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;display:block}
a{color:inherit}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}

/* ---------- tipografia de display ---------- */
.display,h1,h2{
  font-family:"Anton",Impact,"Haettenschweiler","Arial Narrow Bold",sans-serif;
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:-0.012em;
  line-height:0.88;
}
h1{font-size:clamp(40px,8.2vw,86px)}
h2,.display{font-size:clamp(30px,5.4vw,60px)}
.stacked-sm{font-size:clamp(26px,4.2vw,44px)}
.accent{color:var(--accent)}
.line{display:block}

.kicker{
  font-size:11px;
  font-weight:700;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:20px;
}
.kicker-ink{color:rgba(0,0,0,0.62)}

.lede{max-width:560px;font-size:clamp(16px,2.1vw,19px);line-height:1.62;color:var(--muted)}

/* ---------- cabecera ---------- */
.site-header{
  position:sticky;top:0;z-index:60;
  display:flex;align-items:center;gap:20px;
  padding:14px var(--pad);
  background:rgba(0,0,0,0.88);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--hair);
}
.wordmark{
  display:flex;align-items:center;gap:11px;
  font-weight:800;font-size:16px;text-decoration:none;
  letter-spacing:-0.01em;
  white-space:nowrap;   /* si no, "7 Dias" parte en dos lineas en movil */
  flex-shrink:0;
}
/* 38px es el minimo: por debajo la burbuja del isotipo se empasta */
.wordmark img{width:38px;height:auto}

/* En movil los enlaces de seccion desbordaban la barra. Se ocultan:
   la pagina es corta, se recorre haciendo scroll, y lo que de verdad
   tiene que estar siempre a la vista es el boton. */
.site-nav{display:none}
.site-nav a{text-decoration:none;color:var(--muted);transition:color .18s}
.site-nav a:hover{color:var(--text)}
.header-cta{
  margin-left:auto;
  background:var(--accent);color:var(--accent-ink);
  font-weight:700;font-size:13px;
  padding:11px 16px;text-decoration:none;white-space:nowrap;
}

/* ---------- hero ---------- */
.hero{padding:74px 0 60px}
.hero h1{margin-bottom:28px}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:34px}
.hero-grid{display:grid;gap:44px}
/* La foto viene recortada a la silueta (el PNG original tenia un 62%
   de lienzo transparente). Por eso aqui se limita por ancho y se
   centra, en vez de estirarse. */
.hero-figure{margin:0;display:flex;justify-content:center}
/* Es un retrato vertical (467x720): el limite util es el ALTO, no el
   ancho. A 420px de ancho pasaba de 640px de alto y empujaba los
   botones fuera de la primera pantalla. */
.hero-figure img{width:auto;max-height:clamp(300px,52vh,470px);max-width:74vw}

.btn{
  display:inline-block;
  background:var(--accent);color:var(--accent-ink);
  font-weight:700;font-size:15px;letter-spacing:0.01em;
  padding:17px 28px;text-decoration:none;
  border:none;cursor:pointer;
  transition:transform .16s;
}
.btn:hover{transform:translateY(-2px)}
.btn-ghost{
  background:transparent;color:var(--text);
  border:1px solid var(--hair);
  padding:16px 26px;font-weight:600;
}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}

/* ---------- marquesina ---------- */
.marquee{
  border-top:1px solid var(--hair);
  border-bottom:1px solid var(--hair);
  overflow:hidden;padding:16px 0;
}
.marquee-track{
  display:flex;gap:0;white-space:nowrap;
  animation:desliza 26s linear infinite;
  font-family:"Anton",Impact,sans-serif;
  text-transform:uppercase;
  font-size:15px;letter-spacing:0.06em;
  color:var(--faint);
}
.marquee-track span{padding-right:34px}
.marquee-track .accent{color:var(--accent)}
@keyframes desliza{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .marquee-track{animation:none}
}

/* ---------- bloques de seccion ---------- */
section{padding:84px 0}
.symptom{padding:80px 0}
.rows{margin-top:52px;border-top:1px solid var(--hair)}
.row{
  display:grid;grid-template-columns:auto 1fr;gap:20px;
  padding:32px 0;border-bottom:1px solid var(--hair);
  align-items:start;
}
.row-num{
  font-family:"Anton",Impact,sans-serif;
  font-size:clamp(38px,6vw,64px);line-height:0.8;
  color:var(--accent);
}
.row-title{
  font-family:"Anton",Impact,sans-serif;
  text-transform:uppercase;font-size:clamp(19px,2.6vw,26px);
  line-height:1;margin-bottom:12px;
}
.row-text{color:var(--muted);max-width:640px}

/* ---------- la raiz ---------- */
.principle{padding:86px 0;border-top:1px solid var(--hair)}
.principle-text{
  font-family:"Anton",Impact,sans-serif;
  text-transform:uppercase;
  font-size:clamp(28px,5vw,56px);line-height:0.92;
}
.principle-text em{
  font-family:Georgia,"Times New Roman",serif;
  font-style:italic;text-transform:none;
  font-weight:400;color:var(--accent);
  letter-spacing:-0.01em;
}
.principle-body{margin-top:38px;display:grid;gap:22px;max-width:660px}
.principle-body p{color:var(--muted)}
.principle-close{
  margin-top:38px;padding-top:30px;border-top:1px solid var(--hair);
  font-size:clamp(17px,2.3vw,21px);line-height:1.45;max-width:660px;
}
.principle-close strong{color:var(--accent);font-weight:700}

/* ---------- que hacemos ---------- */
.system{padding:84px 0;border-top:1px solid var(--hair)}
.node-flow{
  display:flex;flex-wrap:wrap;align-items:stretch;gap:10px;
  margin:56px 0;
}
.node{
  flex:1 1 130px;
  border:1px solid var(--hair);
  padding:18px 16px;
  display:flex;align-items:center;justify-content:center;
  text-align:center;
  font-family:"Anton",Impact,sans-serif;
  text-transform:uppercase;font-size:14px;letter-spacing:0.03em;
  line-height:1.1;
}
.node-link{
  flex:0 0 34px;align-self:center;
  text-align:center;color:var(--accent);font-size:18px;
}
.blocks{display:grid;gap:38px}
.block-num{
  font-family:"Anton",Impact,sans-serif;
  font-size:34px;line-height:1;color:var(--accent);margin-bottom:14px;
}
.block h3{
  font-family:"Anton",Impact,sans-serif;font-weight:400;
  text-transform:uppercase;font-size:clamp(18px,2.4vw,23px);
  line-height:1.02;margin-bottom:12px;
}
.block p{color:var(--muted)}

/* ---------- quien ---------- */
.about{padding:84px 0;border-top:1px solid var(--hair)}
.about-grid{display:grid;gap:44px}
.about-body{display:grid;gap:20px;margin-top:26px}
.about-body p{color:var(--muted)}
/* El isotipo grande que releva a la foto en esta seccion. Va discreto
   —opacidad baja— porque acompana, no compite con el texto. */
.about-mark{margin:0;display:flex;justify-content:center}
.about-mark img{width:min(300px,62%);height:auto;opacity:0.9}

/* ---------- cta final, bloque a sangre ---------- */
.cta-final{background:var(--accent);color:var(--accent-ink);padding:84px 0}
.cta-final h2{color:var(--accent-ink)}
.cta-sub{
  margin-top:24px;max-width:560px;
  font-size:clamp(16px,2.1vw,19px);line-height:1.55;
  color:rgba(0,0,0,0.72);
}
.btn-ink{background:#000;color:var(--accent);margin-top:34px}
.btn-ink:hover{background:#111}
.cta-note{margin-top:20px;font-size:13px;color:rgba(0,0,0,0.6)}

/* ---------- pie ---------- */
.site-footer{border-top:1px solid var(--hair);padding:54px 0 44px}
.footer-grid{display:grid;gap:16px}
.footer-brand{
  font-family:"Anton",Impact,sans-serif;text-transform:uppercase;
  font-size:22px;letter-spacing:0.01em;
}
.footer-note{color:var(--muted);font-size:14px;max-width:420px}
.footer-legal{color:var(--faint);font-size:12px}
.footer-claim{color:var(--accent);font-size:11px;letter-spacing:0.34em;text-transform:uppercase}

/* ---------- aparicion al hacer scroll ---------- */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s ease}
.reveal.in-view{opacity:1;transform:none}
.d1{transition-delay:.08s}
.d2{transition-delay:.16s}
.d3{transition-delay:.24s}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
}

/* ---------- escritorio ---------- */
@media (min-width:760px){
  :root{--pad:40px}
  .site-nav{display:flex;margin-left:auto;gap:26px;font-size:14px}
  .header-cta{margin-left:0;padding:11px 18px}
  .blocks{grid-template-columns:repeat(3,1fr);gap:34px}
  .row{grid-template-columns:auto 1fr;gap:34px}
  .node-link{flex:0 0 44px}
}

@media (min-width:1000px){
  .hero{padding:96px 0 84px}
  section,.symptom,.principle,.system,.about,.cta-final{padding:104px 0}
  /* El titular manda: se lleva la columna ancha. La foto acompana. */
  .hero-grid{grid-template-columns:1.08fr 0.92fr;gap:56px;align-items:center}
  .about-grid{grid-template-columns:1.25fr 0.75fr;gap:64px;align-items:center}
  .node-flow{flex-wrap:nowrap;max-width:1000px}
}