/* ================================
   SYSTEM CSS — Home + Cases
   No case-specific selectors.
   ================================ */

:root{
  /* Core */
  --bg:#F9F9F7;
  --text:#111111;
  --muted:#6b7280;
  --line:#d1d5db;
  --lineSoft:#e5e7eb;
  --accent:#f97316;

  /* Layout */
  --container-max:1536px;
  --pad-mobile:24px;
  --pad-desktop:48px;

  /* Rhythm */
  --space-xs:8px;
  --space-sm:14px;
  --space-md:28px;
  --space-lg:56px;
  --space-xl:96px;

  /* Chips */
  --chip-bg: rgba(255,255,255,.40);
  --chip-border: rgba(17,17,17,.10);
  --chip-text: #111111;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

::selection{background:rgba(249,115,22,.25);color:#7c2d12;}
a{color:inherit;text-decoration:none;}

/* Container */
.container{
  width:min(100% - (var(--pad-mobile) * 2), var(--container-max));
  margin-inline:auto;
}
@media (min-width:768px){
  .container{
    width:min(100% - (var(--pad-desktop) * 2), var(--container-max));
  }
}

/* Type utilities */
.font-mono{
  font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
}
.tight-heading{letter-spacing:-0.03em;line-height:0.95;}
.mono-label{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#888;
}
.muted{color:#9ca3af;}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line);
  padding:12px 14px;
  font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  transition:border-color .2s ease,color .2s ease,transform .2s ease, background .2s ease;
  background:transparent;
}
.btn:hover{
  border-color:#111;
  color:#111;
  transform:translateY(-1px);
  background:rgba(255,255,255,.25);
}

/* Chips / Tags (AGREGADO NUEVO) */
.chips{
  display:flex;flex-wrap:wrap;gap:8px;
  margin-top:16px;
}

.chip{
  display:inline-flex;align-items:center;
  padding:6px 10px;
  border:1px solid var(--chip-border);
  background:var(--chip-bg);
  color:var(--chip-text);
  border-radius:99px; /* Forma de píldora */
  font-size:11px;
  line-height:1;
  white-space:nowrap;
}

/* ================================
   NAV
   ================================ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 24px;
  background:rgba(249,249,247,.80);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--lineSoft);
}
@media (min-width:768px){.nav{padding:18px 48px;}}
.nav__brand{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;}
.nav__brandMark{color:var(--accent);}
.nav__links{display:flex;gap:24px;font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:#6b7280;}
.nav__link:hover{color:#111;}

/* ================================
   HOME — HERO
   ================================ */

.hero{
  padding-top:calc(112px + 6vh);
  padding-bottom:calc(var(--space-lg) + 6vh);
  border-bottom:1px solid var(--line);
  min-height:85vh;
}

@media (min-width:768px){
  .hero{
    padding-top:calc(128px + 6vh);
  }
}

.hero__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:64px;
  align-items:flex-end;
}

@media (min-width:768px){
  .hero__grid{
    grid-template-columns:4fr 8fr;
    gap:64px;
  }
}

.hero__lead{
  margin:0;
  font-size:18px;
  line-height:1.5;
  font-weight:500;
  max-width:50ch;
}

@media (min-width:768px){
  .hero__lead{
    font-size:20px;
  }
}

.hero__accent{
  width:40px;
  height:2px;
  background:var(--accent);
  margin:20px 0;
}

.hero__support{
  margin:0;
  margin-top:14px;
  font-size:15px;
  line-height:1.6;
  color:var(--muted);
  max-width:60ch;
}

@media (min-width:768px){
  .hero__support{
    font-size:17px;
  }
}

.hero__cta{
  margin-top:28px;
}

.hero__right{
  display:flex;
  justify-content:flex-end;
}

/* === HERO TITLE (CONTROLLED LINE BREAK) === */
.hero__title{
  margin:0;
  text-transform:uppercase;
  text-align:right;
  font-weight:900;
  letter-spacing:-0.05em;
  line-height:0.95;
  font-size:64px;

  /* 👇 CLAVE: controla saltos sin tocar font-size */
  max-width: 10.5ch;
}

/* HERO — two-tone headline */
.hero__line--primary{
  color: var(--text);          /* negro cálido */
  letter-spacing: -0.02em;    /* más aire para lectura */
}

.hero__line--secondary{
  color: #5a5a58;             /* gris cálido sobre f6f6f8 */
  letter-spacing: -0.01em;    /* aún más calmado */
}

@media (min-width:768px){
  .hero__title{
    font-size:104px;
    max-width: 11ch;          /* un poco más aire en desktop */
  }
}

@media (min-width:1024px){
  .hero__title{
    font-size:128px;
    max-width: 11.5ch;        /* evita huérfanas en pantallas grandes */
  }
}

@media (max-width:767px){
  .hero__grid{
    gap:32px;
  }

  .hero__title{
    text-align:left;
    font-size:44px;
    line-height:1;
    max-width: 14ch;          /* respirable en móvil */
  }
}

/* === HERO LINE CONTROL (NO ORPHANS) === */
.hero__line{
  display:block;
}

.hero__nowrap{
  white-space:nowrap;
}

.hero__is{
  color: var(--accent); /* naranja del sistema */
}



/* =====================================
   WORK — 33 / 66 EDITORIAL SYSTEM
===================================== */

.work{
  padding: 140px 0;
}

.workStack{
  display: grid;
  gap: 40px;
}

/* CARD */
.workCase{
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--lineSoft);
  border-radius: 20px;
  background: color-mix(in srgb, var(--bg), #f6f6f8 45%);
  transition:
    border-color .2s ease,
    transform .25s ease;
}

.workCase:hover{
  border-color: rgba(17,17,17,.28);
  transform: translateY(-2px);
}

/* LAYOUT */
.workCase__layout{
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 32px;
  padding: 28px;
}

@media (max-width: 900px){
  .workCase__layout{
    grid-template-columns: 1fr;
  }
}

/* LEFT */
.workCase__info{
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-self: center;
}

.workCase__top{
  color: #9ca3af;
  display: flex;
  gap: 12px;
}

.workCase__impact{
  font-size: clamp(22px, 2.6vw, 32px);
  font-weight: 900;
  letter-spacing: -0.03em;
  color: var(--accent); /* single orange */
  transition: color .2s ease;
}

.workCase__title{
  font-size: 20px;
  font-weight: 800;
}

.workCase__meta{
  color: #6b7280;
}

.workCase__cta{
  margin-top: 6px;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* subtle accent on hover */
.workCase:hover .workCase__impact{
  color: color-mix(in srgb, var(--accent), black 15%);
}

/* RIGHT */
.workCase__media{
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  transition: transform .35s ease;
}

.workCase:hover .workCase__media{
  transform: scale(1.02);
}

.workCase__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ================================
   HOME — ABOUT
   ================================ */
.about{border-top:1px solid var(--lineSoft);padding:120px 0;}
.about__grid{display:grid;grid-template-columns:1fr;gap:48px;align-items:start;}
@media (min-width:1024px){.about__grid{grid-template-columns:1.15fr .85fr;gap:72px;}}
.about__title{margin:0;font-size:44px;font-weight:800;letter-spacing:-0.02em;}
@media (min-width:768px){.about__title{font-size:56px;}}
.about__body{margin-top:18px;font-size:18px;line-height:1.75;font-weight:300;max-width:88ch;}
.about__body p{margin:0 0 16px 0;color:#374151;}
.about__closing{margin-top:18px;padding-left:16px;border-left:2px solid var(--accent);}
.about__closing p{margin:0;color:#111;font-weight:400;}
.about__cta{margin-top:26px;}
.aboutSide{padding-top:8px;}

.panel{margin-bottom:36px;}
.panel__title{padding-bottom:10px;border-bottom:1px solid var(--lineSoft);color:#111;font-weight:800;}
.panel__desc{margin:12px 0 16px 0;font-size:13px;line-height:1.6;color:#4b5563;}

/* === NUEVO: INTERSECTION BOX (CORREGIDO) === */
.intersection-box {
  /* 1. Eliminamos la caja "borde negro" que peleaba */
  border: none;
  
  /* 2. Usamos tu color de acento para darle "perrenque" y marca visual */
  border-left: 3px solid var(--accent);
  
  /* 3. Fondo sutil que se mezcla, no un parche blanco */
  background: linear-gradient(to right, rgba(255,255,255,0.6), transparent);
  
  /* 4. Espaciado */
  margin-top: 24px;
  padding-left: 0; /* Reseteo */
}

.intersection-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  
  /* Alineación visual con el borde naranja */
  padding: 16px 20px; 
  
  /* Líneas divisorias sutiles (el mismo gris que usas en el resto del sitio) */
  border-bottom: 1px solid var(--lineSoft);
  transition: all 0.2s ease;
}

/* El primer item necesita borde arriba para cerrar la forma visualmente */
.intersection-row:first-child {
  border-top: 1px solid var(--lineSoft);
}

/* Efecto Hover: Elegante, no agresivo */
.intersection-row:hover {
  background: rgba(255,255,255, 0.8); /* Se ilumina un poco */
  padding-left: 28px; /* Pequeño desplazamiento a la derecha (micro-interacción) */
}

.int-skill {
  font-size: 13px;
  font-weight: 700; 
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text);
}

.int-role {
  font-size: 11px;
  color: var(--muted); /* Empezamos suave (gris) */
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: color 0.2s ease;
}

/* Al pasar el mouse, el Rol se enciende en Naranja */
.intersection-row:hover .int-role {
  color: var(--accent);
}

/* Ajuste del título para que no tenga línea debajo, ya que la caja lo resuelve */
.panel--intersection .panel__title {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 4px;
  color: var(--accent);
}
/* === FIN INTERSECTION BOX === */

.map{margin-top:10px;display:grid;gap:10px;}
.mapRow{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:18px;padding:6px 0;}
.mapLeft{font-size:11px;letter-spacing:.10em;text-transform:uppercase;color:#111;}
.mapRight{font-size:11px;letter-spacing:.10em;text-transform:uppercase;text-align:right;}

.timeline{list-style:none;padding:0;margin:12px 0 0 0;display:grid;gap:14px;}
.timelineItem{padding-top:12px;border-top:1px solid var(--lineSoft);}
.timelineMain{display:flex;flex-direction:column;gap:4px;}
.timelineTitle{font-weight:700;color:#111;}
.timelineSub{font-size:12px;letter-spacing:.06em;text-transform:uppercase;}

.panel--toolkit{margin-top:6px;}
.toolkit{margin-top:14px;display:grid;grid-template-columns:1fr;gap:18px;}
@media (min-width:900px){.toolkit{grid-template-columns:repeat(3,1fr);gap:18px;}}
.toolkitCol{display:flex;flex-direction:column;min-width:0;}
.toolkitCol__title{margin:0 0 10px 0;font-size:13px;font-weight:700;color:#111;line-height:1.2;}
.toolkitList{list-style:none;padding:0;margin:0;display:grid;grid-auto-rows:1fr;gap:8px;align-content:stretch;height:100%;}
.toolkitItem{
  position:relative;display:flex;align-items:center;min-height:44px;
  padding:10px 10px 10px 14px;border:1px solid var(--lineSoft);
  background:rgba(255,255,255,.35);font-size:13px;color:#111;line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
@media (max-width:520px){.toolkitItem{white-space:normal;min-height:52px;line-height:1.25;}}
.toolkitItem::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent);}
.toolkitItem:hover{background:rgba(255,255,255,.55);border-color:rgba(17,17,17,.12);}

/* ================================
   HOME — CONTACT
   ================================ */

.contact{
  border-top:1px solid var(--line);
  background:#fff;
  padding:72px 0;
}

.contact__intro{
  margin-bottom:4rem;
}

.contact__kicker{
  display:block;
  margin-bottom:1rem;
}

.contact__title{
  margin:0 0 1.5rem 0;

  /* MISMA VOZ QUE EL HERO */
  font-weight:900;
  letter-spacing:-0.05em;
  line-height:0.95;

  /* Escala menor, misma presencia */
  font-size:clamp(44px, 4.5vw, 72px);
}

.contact__mail{
  display:inline-block;
  font-size:clamp(1.5rem, 3vw, 2.5rem);
  font-weight:400;
  color:#111;
  text-decoration:none;
  border-bottom:1px solid #111;
  padding-bottom:3px;
}

.contact__footerGrid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:2.5rem;
  border-top:1px solid var(--lineSoft);
  padding-top:2.5rem;
}

.contact__brand{
  display:block;
  margin-bottom:.5rem;
  font-size:.95rem;
}

.contact__desc{
  font-size:.9rem;
  line-height:1.5;
  color:#666;
  max-width:220px;
}

.contact__label{
  display:block;
  margin-bottom:1rem;
  font-size:.75rem;
  letter-spacing:.05em;
  text-transform:uppercase;
}

.contact__list{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:.6rem;
}

.contact__list a{
  font-size:.9rem;
}

.contact__status{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:5px 10px;
  border:1px solid var(--lineSoft);
  border-radius:50px;
  background:#fafafa;
}

.contact__statusDot{
  width:7px;
  height:7px;
  background:#10B981;
  border-radius:50%;
}


/* =========================================
   CASE SYSTEM — Movements (A–E)
   No case-specific selectors.
   ========================================= */

/* Keep anchors readable under fixed nav */
.movement{scroll-margin-top:110px;}

.caseMain{
  padding-top: calc(var(--space-xl) - 8px); /* gives breathing room under fixed nav */
  padding-bottom: var(--space-xl);
}

/* Base movement */
.movement{
  padding-block: var(--space-lg);
  border-bottom: 1px solid var(--lineSoft);
}
.movement:last-of-type{border-bottom:none;}

/* Movement header/body */
.movement__header{display:grid;gap:var(--space-sm);}
.movement__kicker{color:#9ca3af;}
.movement__title{
  margin:0 0 var(--space-sm) 0; /* FIX: more air below title */
  font-weight:900;
  letter-spacing:-0.035em;
  line-height:1.05;
  font-size: clamp(34px, 4.2vw, 64px);
  max-width: 26ch;
}
.movement__subtitle{
  margin:0;
  font-size:18px;
  line-height:1.75;
  font-weight:300;
  color:#374151;
  max-width: 78ch;
}
.movement__body{
  font-size:18px;
  line-height:1.75;
  font-weight:300;
  color:#374151;
  max-width: 80ch;
}
.movement__body p{margin:0 0 var(--space-sm) 0;} /* FIX: consistent paragraph rhythm */
.movement__body p:last-child{margin-bottom:0;}

/* Role variants */
.movement--declaration{
  padding-top: var(--space-xl);
  padding-bottom: var(--space-lg);
}
.movement--context{
  padding-top: var(--space-md);
  padding-bottom: var(--space-md);
}
.movement--context .movement__body{max-width: 70ch;}
.movement--decision{
  padding-block: var(--space-lg);
}
.movement--system{
  padding-block: var(--space-xl);
}
.movement--closure{
  padding-top: var(--space-xl); /* FIX: stronger pause before closure */
  padding-bottom: var(--space-xl);
}
.movement--closure .movement__body{max-width: 60ch;}

/* Movement layout grid (optional helper) */
.movement__grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  align-items:start;
}
@media (min-width:1024px){
  .movement__grid{
    grid-template-columns: 1.05fr .95fr;
    gap: 56px;
    align-items:center; /* FIX: vertical centering of text/image pairs */
  }
}

/* Media roles */
.movement-media{
  margin:0;
  border:1px solid var(--lineSoft);
  background:#fff;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.movement-media img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.movement-media--hero{
  aspect-ratio: 16 / 9;
  margin-top: var(--space-md);
}
.movement-media--primary{
  aspect-ratio: 16 / 9;
  margin-top: var(--space-md);
}
.movement-media--supporting{
  aspect-ratio: 4 / 3;
  margin-top: var(--space-sm);
}

/* Caption (optional) */
.movement-caption{
  margin:0;
  padding:10px 12px;
  border:1px solid var(--lineSoft);
  border-top:none;
  background:#fff;
  color:#b6bcc6;
  font-size:12px;
  letter-spacing:.06em;
}

/* Inline emphasis block */
.movement-emphasis{
  margin-top: var(--space-sm);
  padding: 14px 16px;
  border: 1px solid rgba(17,17,17,.10);
  background: rgba(255,255,255,.35);
  border-left: 3px solid var(--accent);
  border-radius: 14px;
  font-weight: 600;
  color: #111;
  max-width: 80ch;
}

/* Case meta row */
.caseMeta{
  display:flex;
  gap:18px;
  flex-wrap:wrap;
  align-items:baseline;
  margin-top: var(--space-xs);
}
.caseMeta .mono-label{color:#9ca3af;}
.caseMeta__dot{color:#cbd5e1;}

/* Case nav */
.caseNav{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:24px;
  padding-top: var(--space-md);
}
.caseNav__backLink{
  display:inline-block;
  font-size:11px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#9ca3af;
  border-bottom:1px solid transparent;
  padding-bottom:2px;
}
.caseNav__backLink:hover{color:#111;border-color:#111;}
.caseNav__next{text-align:right;max-width:44ch;}
.caseNav__nextLink{display:inline-block;margin-top:8px;}
.caseNav__nextTitle{
  display:block;
  font-size:18px;
  font-weight:800;
  letter-spacing:-0.01em;
}
.caseNav__nextLink:hover .caseNav__nextTitle{color:var(--accent);}

/* =========================================
   MEDIA — VARIABLE RATIO SUPPORT (SYSTEMIC)
   ========================================= */

/* Allow media ratio override when needed */
.movement-media[data-ratio="vertical"]{
  aspect-ratio: 3 / 4;
}

.movement-media[data-fit="contain"] img{
  object-fit: contain;
  background: #fff;
}

/* =========================================
   SYSTEM — Vertical UI Snapshot (Catalog / Dashboard / Tools)
   Role-based media variant (no case hacks)
   ========================================= */

/* Vertical MVP container (catalog view) */
.movement-media--mvp {
  aspect-ratio: 4 / 5;          /* Vertical: shows 2+ product rows */
  max-width: 680px;             /* Prevents over-scaling */
  margin-inline: auto;          /* Centers inside movement */
  background: #ffffff;
}

/* Image behavior: preserve all UI information */
.movement-media--mvp img {
  width: 100%;
  height: 100%;
  object-fit: contain;          /* CRITICAL: no cropping */
  background: #ffffff;
}

/* Optional refinement for large screens */
@media (min-width: 1200px) {
  .movement-media--mvp {
    max-width: 760px;
  }
}