/* ==========================================================================
   Carlos Bottaro — Arquitecto · Home (index.html)
   Mobile-first: base pensada para ~375px, media queries para desktop (~1440px).
   Depende de css/tokens.css.
   ========================================================================== */

/* --- Scroll / base de página ------------------------------------------- */
html{
  scroll-behavior:smooth;
  scroll-padding-top:76px; /* alto aprox. del header sticky */
}
body{ overflow-x:hidden; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ transition-duration:.01ms !important; animation-duration:.01ms !important; }
}

.container{
  width:100%;
  max-width:var(--container-max);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.section{ padding-block:var(--section-y-tight); }
@media (min-width:900px){ .section{ padding-block:var(--section-y); } }

.skip-link{
  position:absolute; left:var(--space-4); top:var(--space-4); z-index:100;
  padding:var(--space-3) var(--space-5);
  background:var(--ink-900); color:var(--white);
  border-radius:var(--radius-sm);
  transform:translateY(-200%);
  transition:transform var(--dur-base) var(--ease-standard);
}
.skip-link:focus{ transform:none; color:var(--white); }

.visually-hidden{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0;
  clip:rect(0 0 0 0); clip-path:inset(50%); overflow:hidden; white-space:nowrap;
}

/* --- Wordmark --------------------------------------------------------- */
.wordmark{
  display:inline-flex; align-items:baseline; gap:.5em;
  font-family:var(--font-core); text-transform:uppercase;
  letter-spacing:var(--ls-wordmark); line-height:1; white-space:nowrap;
  color:var(--ink-900);
}
.wordmark:hover{ color:var(--ink-900); }
.wordmark__name{ font-weight:var(--fw-bold); font-size:1.25rem; }
.wordmark__role{ font-weight:var(--fw-light); font-size:.75rem; letter-spacing:.12em; color:var(--ink-400); }
@media (min-width:900px){ .wordmark__name{ font-size:1.375rem; } }
.wordmark--light .wordmark__name{ color:var(--white); }
.wordmark--light .wordmark__role{ color:var(--ink-300); }

/* --- Botones ------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-3);
  padding:14px 28px;
  font-family:var(--font-core); font-weight:var(--fw-medium); font-size:var(--fs-caption);
  line-height:1; letter-spacing:var(--ls-caption); text-transform:uppercase;
  border-radius:var(--radius-sm); border:1px solid transparent;
  cursor:pointer; transition:var(--transition-color);
}
.btn--sm{ padding:10px 18px; font-size:var(--fs-micro); }
.btn--primary{ background:var(--ink-900); color:var(--white); border-color:var(--ink-900); }
.btn--primary:hover{ background:var(--ink-700); border-color:var(--ink-700); color:var(--white); }
.btn--on-dark{ background:var(--white); color:var(--ink-900); border-color:var(--white); }
.btn--on-dark:hover{ background:var(--ink-100); border-color:var(--ink-100); color:var(--ink-900); }

/* --- Íconos (SVG inline, glifos oficiales de marca, currentColor) --- */
.icon{ width:1em; height:1em; fill:currentColor; flex-shrink:0; }
.btn .icon{ width:1.15em; height:1.15em; }

/* --- Enlace con chevron (›) ------------------------------------- */
.arrow-link{
  display:inline-flex; align-items:center; gap:var(--space-3);
  font-family:var(--font-core); font-weight:var(--fw-medium);
  font-size:var(--fs-caption); letter-spacing:var(--ls-caption); text-transform:uppercase;
  color:var(--text-muted);
  background:none; border:0; padding:0; cursor:pointer;
  transition:var(--transition-color);
}
.arrow-link:hover{ color:var(--ink-900); }
.arrow-link > span{ display:inline-block; transition:transform var(--dur-base) var(--ease-standard); }
.arrow-link:hover > span{ transform:translateX(3px); }
.arrow-link.is-disabled{ color:var(--text-faint); cursor:not-allowed; pointer-events:none; }

/* --- Encabezado de sección (número + eyebrow + título serif) --- */
.section-heading{ display:flex; flex-direction:column; gap:var(--space-4); margin-bottom:var(--space-8); }
@media (min-width:900px){ .section-heading{ margin-bottom:var(--space-9); } }
.section-heading__eyebrow{
  display:flex; align-items:center; gap:var(--space-3);
  font:var(--type-caption); letter-spacing:var(--ls-caption); text-transform:uppercase;
  color:var(--text-muted);
}
.section-heading__num{ font:var(--type-eyebrow-num); }
.section-heading__rule{ width:14px; height:1px; background:currentColor; display:inline-block; }
.section-heading h2{ font:var(--type-h2); letter-spacing:-0.01em; color:var(--text-primary); }
@media (min-width:900px){ .section-heading h2{ font-size:var(--fs-h1); } }
.section-heading--light .section-heading__eyebrow{ color:var(--ink-400); }
.section-heading--light h2{ color:var(--white); }

/* --- Foto / placeholder de imagen --------------------------- */
.photo{
  margin:0; display:block; overflow:hidden;
  border-radius:var(--radius-md);
  background:var(--surface-photo-placeholder);
}
.photo img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1); }
.photo--frame{ border:1px solid var(--border-subtle); box-shadow:var(--shadow-photo); }
.photo--portrait{ aspect-ratio:1/1; width:100%; } /* retrato cuadrado, según el design system */

.photo--placeholder{ position:relative; min-height:180px; }
.photo--placeholder::after{
  content:attr(data-label);
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  padding:var(--space-6);
  font:var(--type-caption); letter-spacing:var(--ls-caption); text-transform:uppercase;
  color:var(--text-muted); text-align:center;
  background:var(--surface-photo-placeholder);
}
/* si la imagen carga, tapa la etiqueta; si falla, el <img> se quita (onerror) y vuelve la etiqueta */
.photo--placeholder:has(img)::after{ content:none; }

/* --- Marcadores de contenido pendiente ---------------------- */
.is-placeholder{ color:var(--text-faint); }
p.is-placeholder,
.press-card__title.is-placeholder{
  border-left:2px solid var(--border-default);
  padding-left:var(--space-4);
  font-style:normal;
}
.section-note{
  font:var(--type-caption); letter-spacing:var(--ls-caption); text-transform:uppercase;
  color:var(--text-muted);
  padding:var(--space-5) var(--space-6);
  background:var(--surface-muted);
  border-radius:var(--radius-sm);
  margin-bottom:var(--space-8);
}

/* ======================================================================
   HEADER
   ====================================================================== */
.site-header{
  position:sticky; top:0; z-index:20;
  background:var(--white);
  border-bottom:1px solid var(--border-subtle);
}
.site-header__inner{
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-6);
  padding-block:var(--space-5);
}
@media (min-width:900px){ .site-header__inner{ padding-block:var(--space-6); } }

.nav-toggle{
  appearance:none; border:0; background:none; cursor:pointer;
  width:44px; height:44px; padding:0; margin-right:calc(-1 * var(--space-3));
  display:inline-flex; align-items:center; justify-content:center;
}
.nav-toggle__bar,
.nav-toggle__bar::before,
.nav-toggle__bar::after{
  content:""; display:block; width:22px; height:2px; background:var(--ink-900);
  transition:transform var(--dur-base) var(--ease-standard), opacity var(--dur-base) var(--ease-standard), background var(--dur-base);
}
.nav-toggle__bar{ position:relative; }
.nav-toggle__bar::before{ position:absolute; left:0; top:-7px; }
.nav-toggle__bar::after{ position:absolute; left:0; top:7px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar{ background:transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar::before{ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar::after{ transform:translateY(-7px) rotate(-45deg); }

.site-nav{
  position:fixed; inset:0 0 0 auto;
  width:min(88vw,340px);
  background:var(--white);
  border-left:1px solid var(--border-subtle);
  padding:calc(var(--space-10) + var(--space-4)) var(--gutter) var(--space-8);
  display:flex; flex-direction:column; gap:var(--space-7);
  transform:translateX(100%); visibility:hidden;
  transition:transform var(--dur-slow) var(--ease-standard), visibility var(--dur-slow);
  overflow-y:auto;
}
.site-nav.is-open{ transform:none; visibility:visible; }

.site-nav__list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--space-5); }
.site-nav__list a{
  display:inline-block; padding-block:var(--space-2);
  font:var(--type-nav); font-size:var(--fs-body-sm);
  text-transform:uppercase; letter-spacing:var(--ls-nav);
  color:var(--text-muted);
  border-bottom:2px solid transparent;
}
.site-nav__list a:hover,
.site-nav__list a.is-active{ color:var(--text-primary); }
.site-nav__list a.is-active{ border-bottom-color:var(--ink-900); }
/* Contacto = acción principal: siempre destacado */
.site-nav__list a.is-primary{ font-weight:var(--fw-bold); color:var(--text-primary); }

.nav-backdrop{
  position:fixed; inset:0; z-index:19;
  background:var(--overlay-scrim);
  opacity:0; visibility:hidden;
  transition:opacity var(--dur-base) var(--ease-standard), visibility var(--dur-base);
}
.nav-backdrop.is-open{ opacity:1; visibility:visible; }

@media (min-width:900px){
  .nav-toggle{ display:none; }
  .nav-backdrop{ display:none; }
  .site-nav{
    position:static; width:auto; transform:none; visibility:visible;
    border:0; padding:0; overflow:visible;
    flex-direction:row; align-items:center; gap:var(--space-6);
  }
  .site-nav__list{ flex-direction:row; align-items:center; gap:var(--space-6); }
  .site-nav__list a{ padding-block:var(--space-3); }
}

/* ======================================================================
   HERO
   ====================================================================== */
.hero{
  position:relative; overflow:hidden;
  background:var(--ink-900); color:var(--white);
}
.hero__media{
  position:absolute; inset:0; border-radius:0; min-height:0;
}
.hero__media img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) brightness(.62) contrast(1.05);
}
/* estado sin foto: bloque + etiqueta */
.hero__media.photo--placeholder::after{ background:var(--ink-800); color:var(--ink-300); }
/* con foto: la etiqueta se oculta (regla global :has(img)) y aparecen los scrims.
   Dos capas: vertical (más densa abajo, donde va el texto) + lateral desde la izquierda. */
.hero__media:has(img)::before{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(14,14,14,.25) 0%, rgba(14,14,14,.34) 45%, rgba(14,14,14,.85) 100%),
    linear-gradient(90deg, rgba(14,14,14,.6) 0%, rgba(14,14,14,0) 62%);
}

.hero__inner{
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:flex-start; gap:var(--space-6);
  min-height:72vh; justify-content:flex-end;
  padding-block:var(--space-10);
}
@media (min-width:900px){ .hero__inner{ min-height:78vh; padding-block:var(--space-12); } }

.hero__title{
  font:var(--type-display); font-family:var(--font-display);
  color:var(--white); letter-spacing:var(--ls-display);
  text-shadow:0 1px 14px rgba(14,14,14,.55);
}
.hero__title span{ display:block; font-weight:var(--fw-light); color:var(--ink-100); }
.hero__lead{
  max-width:52ch;
  font-size:var(--fs-body-lg); line-height:var(--lh-relaxed);
  color:var(--ink-050);
  text-shadow:0 1px 12px rgba(14,14,14,.6);
}

/* ======================================================================
   ACERCA DE
   ====================================================================== */
.about__body{ display:flex; flex-direction:column; gap:var(--space-7); }
.about__text{ display:flex; flex-direction:column; gap:var(--space-5); max-width:62ch; }
.about__text p:first-child{ font-size:var(--fs-body-lg); color:var(--text-primary); }
.about__text p{ color:var(--text-secondary); }
.photo--portrait{ max-width:280px; }
@media (min-width:768px){
  .about__body{ display:grid; grid-template-columns:260px 1fr; gap:var(--space-9); align-items:start; }
  .photo--portrait{ max-width:none; }
}

/* ======================================================================
   FRASE SEPARADORA
   ====================================================================== */
.quote{
  background:var(--surface-muted);
  border-block:1px solid var(--border-subtle);
  padding-block:var(--space-10);
}
@media (min-width:900px){ .quote{ padding-block:var(--space-11); } }
.quote__text{
  margin:0;
  font-family:var(--font-display); font-weight:var(--fw-light);
  font-size:var(--fs-display); line-height:var(--lh-tight); letter-spacing:var(--ls-display);
  color:var(--text-primary);
  text-align:center;
}

/* ======================================================================
   SERVICIOS
   ====================================================================== */
.services__grid{ list-style:none; margin:0; padding:0; display:grid; gap:var(--grid-gap); }
@media (min-width:640px){ .services__grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px){ .services__grid{ grid-template-columns:repeat(4,1fr); } }

.service-card{
  display:flex; flex-direction:column; gap:var(--space-5);
  padding:var(--space-6);
  background:var(--surface-muted);
  border-radius:var(--radius-md);
}
.service-card__title{
  font:var(--fw-bold) var(--fs-body)/1.2 var(--font-core);
  letter-spacing:var(--ls-nav); text-transform:uppercase;
  color:var(--text-secondary);
  padding-bottom:var(--space-4);
  border-bottom:2px solid var(--rule-accent);
}
.service-card__list{
  list-style:none; margin:0; padding:0;
  display:grid; gap:var(--space-4);
  font:var(--type-body); color:var(--text-primary);
}
.service-card__list li{ font-size:var(--fs-body-sm); }
.service-card__text{ font:var(--type-body); font-size:var(--fs-body-sm); color:var(--text-secondary); }

/* Tarjeta destacada — Pericia Judicial: fondo oscuro, CTA en botón blanco */
.service-card--feature{
  justify-content:space-between;
  background:var(--ink-700);
  color:var(--white);
}
.service-card--feature .service-card__title{
  color:var(--white);
  border-bottom-color:var(--border-on-dark);
}
.service-card--feature .service-card__text{ color:var(--ink-200); }
.service-card--feature > div{ display:flex; flex-direction:column; gap:var(--space-4); }
.service-card__cta{ align-self:flex-start; margin-top:var(--space-2); }

/* ======================================================================
   PROYECTOS
   ====================================================================== */
.projects__featured{ display:grid; gap:var(--grid-gap); margin-bottom:var(--space-9); }
@media (min-width:768px){ .projects__featured{ grid-template-columns:repeat(2,1fr); } }

.projects__grid{ list-style:none; margin:0; padding:0; display:grid; gap:var(--grid-gap); }
@media (min-width:600px){ .projects__grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px){ .projects__grid{ grid-template-columns:repeat(3,1fr); } }

.project-card{
  display:flex; flex-direction:column; gap:var(--space-5);
  padding:var(--space-6);
  background:var(--surface-muted);
  border-radius:var(--radius-md);
  transition:transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard);
}
.project-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-photo); }
.project-card .photo{ aspect-ratio:16/9; }
.project-card--featured .photo{ aspect-ratio:4/3; }
.project-card__body{ display:flex; flex-direction:column; gap:var(--space-3); }
.project-card__meta{
  font:var(--type-caption); letter-spacing:var(--ls-caption); text-transform:uppercase;
  color:var(--text-muted);
}
.project-card__title{ font:var(--type-h3); color:var(--text-primary); }
.project-card__text{ font:var(--type-body); font-size:var(--fs-body-sm); color:var(--text-secondary); }
.project-card__pending{ font:var(--type-caption); letter-spacing:var(--ls-caption); text-transform:uppercase; color:var(--text-faint); }

/* ======================================================================
   PRENSA
   ====================================================================== */
.press__grid{ list-style:none; margin:0; padding:0; display:grid; gap:var(--grid-gap); }
@media (min-width:600px){ .press__grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px){ .press__grid{ grid-template-columns:repeat(3,1fr); } }
.press-card{
  display:flex; flex-direction:column; gap:var(--space-5);
  padding:var(--space-6);
  background:var(--surface-muted);
  border-radius:var(--radius-md);
}
.press-card .photo{ aspect-ratio:16/10; }
.press-card__body{ display:flex; flex-direction:column; gap:var(--space-2); }
.press-card__date{ font:var(--type-caption); color:var(--text-faint); }
.press-card__outlet{ font:var(--fw-semibold) var(--fs-body-sm)/1.3 var(--font-core); color:var(--text-secondary); }
.press-card__title{ font:var(--type-h3); color:var(--text-primary); }

/* ======================================================================
   CONTACTO (franja oscura)
   ====================================================================== */
.contact{ background:var(--surface-dark); color:var(--text-inverse); }
.contact__body{ display:flex; flex-direction:column; gap:var(--space-7); max-width:420px; }
.contact__wa{ align-self:flex-start; }
.contact__list{ margin:0; display:grid; gap:var(--space-6); }
.contact__list dt{
  font:var(--type-caption); letter-spacing:var(--ls-caption); text-transform:uppercase;
  color:var(--ink-400); margin-bottom:var(--space-2);
}
.contact__list dd{ margin:0; font:var(--type-body); color:var(--white); }
.contact__list dd a{ color:var(--white); }
.contact__list dd a:hover{ color:var(--ink-300); }

/* Redes: solo ícono, linkeado */
.contact__social{ list-style:none; margin:var(--space-2) 0 0; padding:0; display:flex; gap:var(--space-5); }
.contact__social a{ display:inline-flex; color:var(--ink-300); }
.contact__social a:hover{ color:var(--white); }
.contact__social .icon{ width:24px; height:24px; }

/* ======================================================================
   FOOTER (tira negra de copyright)
   ====================================================================== */
.site-footer{
  background:var(--surface-darkest); color:var(--ink-500);
  padding-bottom:84px; /* aire para que el FAB de WhatsApp no tape el pie */
}
.site-footer__inner{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:var(--space-4) var(--space-6);
  padding-block:var(--space-6);
}
.site-footer .wordmark__name{ font-size:1rem; color:var(--ink-300); }
.site-footer .wordmark__role{ font-size:.75rem; color:var(--ink-500); }
.site-footer__copyright{ font:var(--type-caption); color:var(--ink-500); }
.site-footer__credit{
  border-top:1px solid var(--border-on-dark);
  padding-top:var(--space-6);
  text-align:center;
  font:var(--type-caption); color:var(--ink-500);
}
.site-footer__credit a{ color:var(--ink-300); font-weight:var(--fw-bold); }
.site-footer__credit a:hover{ color:var(--white); }

/* ======================================================================
   FAB de WhatsApp — circular, solo ícono, visible en todos los anchos
   ====================================================================== */
.whatsapp-fab{
  position:fixed; right:var(--space-6); bottom:var(--space-6); z-index:15;
  display:inline-flex; align-items:center; justify-content:center;
  width:56px; height:56px;
  background:var(--ink-900); color:var(--white);
  border-radius:50%;
  box-shadow:var(--shadow-overlay);
}
.whatsapp-fab:hover{ background:var(--ink-700); color:var(--white); }
.whatsapp-fab .icon{ width:24px; height:24px; }

/* ======================================================================
   MODAL — galería de proyecto
   ====================================================================== */
.modal{ position:fixed; inset:0; z-index:50; display:flex; align-items:center; justify-content:center; padding:var(--gutter); }
.modal[hidden]{ display:none; }
.modal__backdrop{ position:absolute; inset:0; background:var(--overlay-scrim); -webkit-backdrop-filter:var(--blur-scrim); backdrop-filter:var(--blur-scrim); }
.modal__dialog{
  position:relative;
  width:min(920px,100%); max-height:90vh; overflow-y:auto;
  background:var(--white); color:var(--text-primary);
  border-radius:var(--radius-md); padding:var(--space-8);
  box-shadow:var(--shadow-overlay);
  display:flex; flex-direction:column; gap:var(--space-4);
}
.modal__close{
  position:absolute; top:var(--space-4); right:var(--space-4);
  width:40px; height:40px; border:0; background:none; cursor:pointer;
  font-size:1.6rem; line-height:1; color:var(--text-muted);
}
.modal__close:hover{ color:var(--ink-900); }
.modal__meta{ font:var(--type-caption); letter-spacing:var(--ls-caption); text-transform:uppercase; color:var(--text-muted); }
.modal__title{ font:var(--type-h2); }
.modal__note{ font-size:var(--fs-body-sm); color:var(--text-faint); border-left:2px solid var(--border-default); padding-left:var(--space-4); }
.modal__gallery{ display:grid; gap:var(--space-4); margin-top:var(--space-3); }
@media (min-width:600px){ .modal__gallery{ grid-template-columns:repeat(2,1fr); } }
.modal__gallery .photo{ aspect-ratio:4/3; }