/* =========================================================
   RAMIREZ ESTUDIO — Sistema de diseño
   Estructura y diagramación inspiradas en wearecollins.com:
   nav mínima, hero de línea única + cinta de credenciales,
   lista de programas, grid asimétrico de casos de estudio,
   teaser final, footer expandido.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,700;0,800;0,900;1,700;1,800;1,900&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --ink:#0b0b0a;
  --paper:#faf9f6;
  --red:#e3350f;
  --stone:#8c8a82;
  --line-dark: rgba(250,249,246,.16);
  --line-light: rgba(11,11,10,.14);

  --f-display:'Archivo', sans-serif;
  --f-body:'Inter', sans-serif;
  --f-mono:'IBM Plex Mono', monospace;

  --gutter: clamp(20px, 5vw, 56px);
  --maxw: 1520px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  background:var(--ink);
  color:var(--paper);
  font-family:var(--f-body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
button{ font-family:inherit; background:none; border:none; color:inherit; cursor:pointer; }

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

em, i{ font-style:italic; color:var(--red); }
::selection{ background:var(--red); color:var(--paper); }

a:focus-visible, button:focus-visible{ outline:2px solid var(--red); outline-offset:4px; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
}

/* =================== NAV (mínima, tipo Collins) =================== */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:110;
  display:flex; align-items:center; justify-content:space-between;
  padding:24px var(--gutter);
  mix-blend-mode:difference; color:#fff;
}
.nav__logo{ font-family:var(--f-display); font-weight:900; font-size:20px; letter-spacing:-0.02em; }
.nav__logo span{ color:var(--red); -webkit-text-fill-color:var(--red); }

.nav__right{ display:flex; align-items:center; gap:22px; }
.nav__status{
  display:flex; align-items:center; gap:8px;
  font-family:var(--f-mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase;
}
.nav__dot{
  width:6px; height:6px; border-radius:50%; background:#3ddc6a;
  box-shadow:0 0 0 0 rgba(61,220,106,.6); animation:pulse 2s infinite;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(61,220,106,.5); }
  70%{ box-shadow:0 0 0 8px rgba(61,220,106,0); }
  100%{ box-shadow:0 0 0 0 rgba(61,220,106,0); }
}
.nav__burger{
  font-family:var(--f-mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  display:flex; align-items:center; gap:10px;
}
.nav__burger .bars{ display:flex; flex-direction:column; gap:4px; width:20px; }
.nav__burger .bars span{ height:1px; background:currentColor; transition:transform .3s ease, opacity .3s ease; }
.nav.is-open .nav__burger .bars span:first-child{ transform:translateY(2.5px) rotate(45deg); }
.nav.is-open .nav__burger .bars span:last-child{ transform:translateY(-2.5px) rotate(-45deg); }

.nav__links{
  position:fixed; inset:0; z-index:105;
  background:var(--ink); color:var(--paper);
  display:flex; flex-direction:column; justify-content:center; gap:22px;
  padding:0 var(--gutter);
  opacity:0; pointer-events:none; transform:translateY(-16px);
  transition:opacity .4s ease, transform .4s ease;
}
.nav.is-open .nav__links{ opacity:1; pointer-events:auto; transform:translateY(0); }
.nav__links a{
  font-family:var(--f-display); font-weight:800; font-style:italic;
  font-size:clamp(32px, 7vw, 64px); letter-spacing:-0.02em;
  display:flex; align-items:baseline; gap:18px;
}
.nav__links a .n{ font-family:var(--f-mono); font-style:normal; font-size:14px; color:var(--red); }
.nav__links .nav__links-foot{
  margin-top:20px; font-family:var(--f-mono); font-size:12px; color:var(--stone);
  text-transform:uppercase; letter-spacing:.05em;
}

/* =================== HERO =================== */
.hero{ padding:130px var(--gutter) 0; }
.hero h1{
  font-family:var(--f-display); font-weight:900;
  font-size:clamp(48px, 11vw, 176px);
  line-height:.86; letter-spacing:-0.045em; max-width:17ch;
}
.hero h1 em{ font-style:normal; color:var(--red); }

.credentials{
  margin-top:64px; border-top:1px solid var(--line-dark); border-bottom:1px solid var(--line-dark);
  overflow:hidden; white-space:nowrap; padding:18px 0;
}
.credentials__track{ display:inline-flex; gap:44px; animation:scroll 30s linear infinite; }
.credentials:hover .credentials__track{ animation-play-state:paused; }
@keyframes scroll{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }
.credentials span{
  font-family:var(--f-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--stone);
  display:inline-flex; align-items:center; gap:44px;
}
.credentials span.hi{ font-family:var(--f-display); font-weight:800; font-style:italic; color:var(--paper); font-size:16px; text-transform:none; letter-spacing:-0.01em; }
.credentials em.dot{ color:var(--red); font-style:normal; }

.hero__media{ margin-top:0; width:100%; aspect-ratio:16/8.4; overflow:hidden; position:relative; }
.hero__media img{ width:100%; height:100%; object-fit:cover; }
.hero__media::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(11,11,10,0) 55%, rgba(11,11,10,.55) 100%);
}
.hero__media-cap{
  position:absolute; left:var(--gutter); bottom:22px; z-index:2;
  font-family:var(--f-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--paper);
}

/* =================== SECTION HEAD =================== */
.section{ padding:130px var(--gutter); }
.section--tight{ padding-top:100px; }
.section-head{
  display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:end;
  margin-bottom:64px;
}
.eyebrow{
  font-family:var(--f-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--red); display:flex; align-items:center; gap:10px; margin-bottom:18px;
}
.eyebrow::before{ content:''; width:22px; height:1px; background:var(--red); display:inline-block; }
.section-head h2{
  font-family:var(--f-display); font-weight:900; letter-spacing:-0.02em;
  font-size:clamp(30px, 4.2vw, 56px); line-height:1.03;
}
.section-head__right{ display:flex; flex-direction:column; align-items:flex-start; gap:20px; }
.section-head__right p{ font-size:16px; line-height:1.6; color:#d8d6cf; max-width:38ch; }
.explore-link{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--f-mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  border-bottom:1px solid currentColor; padding-bottom:3px;
}
.explore-link:hover{ color:var(--red); }

/* =================== PROGRAMAS (lista numerada) =================== */
.programs{ border-top:1px solid var(--line-dark); }
.program-row{
  display:grid; grid-template-columns:56px 1fr auto; align-items:center; gap:24px;
  padding:30px 0; border-bottom:1px solid var(--line-dark);
  transition:padding-left .4s cubic-bezier(.2,.8,.2,1), color .3s ease;
}
.program-row:hover{ padding-left:14px; color:var(--red); }
.program-row__num{ font-family:var(--f-mono); font-size:13px; color:var(--stone); }
.program-row__text{ display:flex; flex-wrap:wrap; align-items:baseline; gap:12px; }
.program-row__title{ font-family:var(--f-display); font-weight:800; font-style:italic; font-size:clamp(22px,3.4vw,36px); letter-spacing:-0.01em; }
.program-row__tag{ font-family:var(--f-mono); font-size:13px; color:var(--stone); }
.program-row:hover .program-row__tag{ color:inherit; }
.program-row__arrow{ font-size:20px; transition:transform .3s ease; }
.program-row:hover .program-row__arrow{ transform:translate(4px,-4px); }
.programs-foot{ padding-top:30px; }

/* =================== PROYECTOS — grid asimétrico =================== */
.cs-grid{ display:grid; grid-template-columns:repeat(3, 1fr); grid-auto-rows:230px; gap:20px; }
.cs-card{ position:relative; overflow:hidden; display:block; background:#141311; }
.cs-card--lg{ grid-column:span 2; grid-row:span 2; }
.cs-card--tall{ grid-row:span 2; }
.cs-card img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .6s cubic-bezier(.2,.8,.2,1), filter .5s ease;
}
.cs-card:hover img{ transform:scale(1.06); }
.cs-card::before{
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(11,11,10,0) 45%, rgba(11,11,10,.82) 100%);
}
.cs-card__info{ position:absolute; left:22px; right:22px; bottom:20px; z-index:2; display:flex; justify-content:space-between; align-items:flex-end; gap:12px; }
.cs-card__name{ font-family:var(--f-display); font-weight:800; font-style:italic; font-size:clamp(20px,2.4vw,30px); letter-spacing:-0.01em; }
.cs-card__tag{ font-family:var(--f-mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--stone); margin-top:6px; display:block; }
.cs-card__arrow{
  width:34px; height:34px; border-radius:50%; border:1px solid var(--line-dark);
  display:flex; align-items:center; justify-content:center; font-size:15px; flex-shrink:0;
  transition:background .3s ease, transform .3s ease;
}
.cs-card:hover .cs-card__arrow{ background:var(--red); border-color:var(--red); transform:rotate(45deg); }
.cs-foot{ margin-top:44px; display:flex; justify-content:flex-end; }

.stories{
  margin-top:20px; display:flex; flex-wrap:wrap; gap:14px;
  border-top:1px solid var(--line-dark); padding-top:26px;
}
.stories a{
  font-family:var(--f-mono); font-size:12px; letter-spacing:.03em;
  padding:10px 18px; border:1px solid var(--line-dark); border-radius:100px;
  color:var(--stone); transition:color .3s ease, border-color .3s ease;
}
.stories a:hover{ color:var(--paper); border-color:var(--paper); }

/* =================== TEASER (Estudio) =================== */
.teaser{ background:var(--paper); color:var(--ink); }
.teaser .section-head h2{ max-width:16ch; }
.teaser-body{ display:grid; grid-template-columns:1.2fr 1fr; gap:70px; }
.teaser-body p{ font-size:17px; line-height:1.7; color:#3a3a35; }
.teaser-body p + p{ margin-top:18px; }
.teaser-services{ display:flex; flex-direction:column; }
.teaser-services .service-item{
  display:flex; justify-content:space-between; align-items:baseline;
  padding:18px 0; border-top:1px solid var(--line-light);
  font-family:var(--f-display); font-weight:700; font-size:clamp(16px,1.8vw,21px);
}
.teaser-services .service-item:last-child{ border-bottom:1px solid var(--line-light); }
.teaser-services .service-item span{ font-family:var(--f-mono); font-size:12px; color:var(--red); }

/* =================== FOOTER (expandido, tipo Collins) =================== */
.site-footer{ padding:130px var(--gutter) 0; }
.footer-cta{ border-bottom:1px solid var(--line-dark); padding-bottom:70px; }
.footer-cta blockquote{
  font-family:var(--f-display); font-weight:800; font-style:italic;
  font-size:clamp(30px, 5.6vw, 66px); line-height:1.05; letter-spacing:-0.02em; max-width:16ch;
}
.footer-cta__row{ margin-top:36px; display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.footer-cta__email{ font-family:var(--f-mono); font-size:14px; letter-spacing:.02em; border-bottom:1px solid var(--paper); padding-bottom:3px; }
.footer-cta__copy{ font-family:var(--f-mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--stone); }

.footer-grid{ padding:64px 0; display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; border-bottom:1px solid var(--line-dark); }
.footer-col__label{ font-family:var(--f-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--stone); margin-bottom:18px; display:block; }
.footer-col ul{ display:flex; flex-direction:column; gap:12px; }
.footer-col a{ font-family:var(--f-body); font-size:15px; }
.footer-col a:hover{ color:var(--red); }
.footer-col--brand p{ font-size:14px; color:var(--stone); line-height:1.6; max-width:32ch; }
.footer-col--brand .footer-logo{ font-family:var(--f-display); font-weight:900; font-size:24px; margin-bottom:16px; display:block; }

.footer-bottom{ padding:26px 0 40px; display:flex; justify-content:space-between; align-items:center; font-family:var(--f-mono); font-size:12px; color:var(--stone); flex-wrap:wrap; gap:16px; }
.footer-bottom__social{ display:flex; gap:20px; }
.footer-bottom__social a:hover{ color:var(--red); }

/* =================== PROJECT DETAIL PAGE =================== */
.p-hero{ padding:150px var(--gutter) 60px; }
.p-hero__meta{ font-family:var(--f-mono); font-size:12px; letter-spacing:.05em; text-transform:uppercase; color:var(--red); margin-bottom:20px; }
.p-hero h1{ font-family:var(--f-display); font-weight:900; letter-spacing:-0.03em; font-size:clamp(44px, 9vw, 128px); line-height:.96; }
.p-hero__row{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; margin-top:44px; padding-top:28px; border-top:1px solid var(--line-dark); }
.p-hero__tags{ display:flex; gap:14px; flex-wrap:wrap; font-family:var(--f-mono); font-size:12px; color:var(--stone); text-transform:uppercase; }
.p-hero__year{ font-family:var(--f-mono); font-size:13px; color:var(--stone); }
.p-desc{ max-width:760px; font-size:18px; line-height:1.7; color:#d8d6cf; margin-top:30px; }

.p-gallery{ display:flex; flex-direction:column; gap:20px; padding:0 var(--gutter) 100px; }
.p-gallery img{ width:100%; height:auto; }
.p-gallery iframe{ width:100%; aspect-ratio:16/9; border:0; }

.p-nav{ display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--line-dark); }
.p-nav a{ padding:44px var(--gutter); display:flex; flex-direction:column; gap:10px; transition:background .3s ease; }
.p-nav a:first-child{ border-right:1px solid var(--line-dark); }
.p-nav a:hover{ background:rgba(250,249,246,.04); }
.p-nav .dir{ font-family:var(--f-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--stone); }
.p-nav .name{ font-family:var(--f-display); font-weight:800; font-style:italic; font-size:clamp(22px,3vw,32px); }
.p-nav a:last-child{ text-align:right; align-items:flex-end; }

/* =================== RESPONSIVE =================== */
@media (max-width:900px){
  .section-head{ grid-template-columns:1fr; }
  .teaser-body{ grid-template-columns:1fr; gap:36px; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .cs-grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:220px; }
  .cs-card--lg{ grid-column:span 2; grid-row:span 1; aspect-ratio:16/10; height:auto; }
}
@media (max-width:640px){
  .program-row{ grid-template-columns:32px 1fr; }
  .program-row__arrow{ display:none; }
  .cs-grid{ grid-template-columns:1fr; grid-auto-rows:260px; }
  .cs-card--lg, .cs-card--tall{ grid-column:span 1; grid-row:span 1; }
  .footer-grid{ grid-template-columns:1fr 1fr; gap:28px 20px; }
  .p-nav{ grid-template-columns:1fr; }
  .p-nav a:first-child{ border-right:0; border-bottom:1px solid var(--line-dark); }
  .section{ padding:80px var(--gutter); }
  .hero{ padding-top:130px; }
}