/* ============================================================
   MERIDIANO ABOGADOS — style.css
   Índice
   00. Tokens (variables de diseño)
   01. Reset y base
   02. Tipografía y utilidades
   03. Botones y enlaces CTA
   04. Header / Navegación
   05. Hero
   06. Sobre nosotros
   07. Áreas de práctica
   08. Por qué elegirnos (banda oscura)
   09. Equipo
   10. Proceso
   11. Casos de éxito
   12. FAQ (acordeón)
   13. Formulario (agenda)
   14. Ubicación
   15. CTA final
   16. Footer
   17. Volver arriba
   18. Animaciones (reveal, stagger, keyframes)
   19. Responsive
   20. Accesibilidad / reduced-motion
============================================================ */

/* ============================================================
   00. TOKENS
============================================================ */
:root {
  /* Paleta — blanco predomina, negro autoridad, rojo énfasis */
  --paper:        #ffffff;
  --paper-warm:   #f8f7f3;   /* off-white cálido para alternar secciones */
  --paper-line:   #ecebe6;
  --ink:          #14141a;   /* texto principal (negro suave, no #000) */
  --ink-deep:     #0b0b0f;   /* bandas oscuras de autoridad */
  --ink-soft:     #4a4a52;   /* texto secundario */
  --ink-muted:    #7c7c85;   /* texto terciario / captions */
  --line:         #e5e3dd;   /* hairlines */
  --line-strong:  #d8d5cd;

  --red:          #b31627;   /* énfasis / sello */
  --red-strong:   #97101e;   /* hover / pressed */
  --red-tint:     #fbeced;   /* fondo tenue de acento */
  --red-on-dark:  #e0313f;   /* rojo legible sobre negro */

  /* Tipografía */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body:    "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;

  /* Escala tipográfica fluida */
  --fs-display: clamp(2.7rem, 1.6rem + 4.6vw, 5rem);
  --fs-h2:      clamp(1.9rem, 1.3rem + 2.4vw, 3rem);
  --fs-h3:      clamp(1.2rem, 1.05rem + 0.6vw, 1.45rem);
  --fs-lead:    clamp(1.05rem, 1rem + 0.35vw, 1.25rem);
  --fs-body:    1.0625rem;
  --fs-small:   0.875rem;
  --fs-eyebrow: 0.75rem;

  /* Espaciado */
  --gutter:  clamp(1.25rem, 5vw, 3rem);
  --maxw:    1200px;
  --section-y: clamp(4.5rem, 3rem + 6vw, 8.5rem);

  /* Radios y sombras */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(20,20,26,.04), 0 4px 14px rgba(20,20,26,.05);
  --shadow-md: 0 8px 24px rgba(20,20,26,.07), 0 2px 6px rgba(20,20,26,.05);
  --shadow-lg: 0 24px 60px rgba(20,20,26,.12);

  /* Easing — curvas personalizadas (Emil / animations.dev) */
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);       /* entradas responsivas */
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);      /* movimiento en pantalla */
  --ease-soft:   cubic-bezier(0.33, 1, 0.68, 1);       /* hovers suaves */

  --header-h: 74px;
}

/* ============================================================
   01. RESET Y BASE
============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* Corta cualquier desborde horizontal sin crear un contenedor de scroll
     (a diferencia de overflow:hidden, clip no rompe position: sticky). */
  overflow-x: clip;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  /* Evita que palabras largas (correos, URLs) empujen el ancho en móvil. */
  overflow-wrap: break-word;
}

img, svg, iframe { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

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

.section { padding-block: var(--section-y); }

/* Compensar header fijo al saltar con anclas */
section[id], [id] { scroll-margin-top: calc(var(--header-h) + 12px); }

/* ============================================================
   02. TIPOGRAFÍA Y UTILIDADES
============================================================ */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0;
}

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

.section-title {
  font-size: var(--fs-h2);
  margin-bottom: 1.1rem;
}

.lead {
  font-size: var(--fs-lead);
  color: var(--ink-soft);
  max-width: 54ch;
  line-height: 1.6;
}
.lead--center { margin-inline: auto; text-align: center; }

/* Eyebrow — motivo "expediente" en mono */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red);
  margin: 0 0 1.1rem;
}
.eyebrow__mark {
  width: 26px; height: 1px;
  background: var(--red);
}
/* Variante "artículo" con pestaña roja */
.eyebrow--file {
  padding-left: 0.9rem;
  border-left: 2px solid var(--red);
  color: var(--ink-soft);
}
.eyebrow--light { color: rgba(255,255,255,.72); }

.section-head {
  max-width: 720px;
  margin: 0 auto clamp(2.5rem, 5vw, 4rem);
  text-align: center;
}
.section-head--left { text-align: left; margin-inline: 0; }
.section-head--dark .section-title,
.section-head--dark .eyebrow--file { color: #fff; }
.section-head--dark .eyebrow--file { border-color: var(--red-on-dark); }

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

.skip-link {
  position: absolute; left: 0; top: -60px;
  background: var(--ink); color: #fff;
  padding: 0.75rem 1.25rem; z-index: 200;
  border-radius: 0 0 var(--r-sm) 0;
  transition: top 150ms var(--ease-out);
}
.skip-link:focus { top: 0; }

/* Foco visible global */
:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ============================================================
   03. BOTONES Y ENLACES CTA
============================================================ */
.btn {
  --btn-py: 0.9rem;
  --btn-px: 1.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: var(--btn-py) var(--btn-px);
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  transition: transform 160ms var(--ease-out),
              background-color 200ms var(--ease-soft),
              color 200ms var(--ease-soft),
              box-shadow 200ms var(--ease-soft),
              border-color 200ms var(--ease-soft);
  will-change: transform;
}
.btn--sm { --btn-py: 0.62rem; --btn-px: 1.15rem; font-size: 0.9rem; }
.btn--block { width: 100%; }

/* Feedback de presión (Emil: los botones deben sentirse escuchados) */
.btn:active { transform: scale(0.97); }

.btn--primary {
  background: var(--red);
  color: #fff;
  box-shadow: 0 6px 18px rgba(179,22,39,.22);
}
.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
}
.btn--outline-light {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,.32);
}

@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover {
    background: var(--red-strong);
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(179,22,39,.30);
  }
  .btn--ghost:hover {
    border-color: var(--ink);
    transform: translateY(-2px);
  }
  .btn--outline-light:hover {
    background: rgba(255,255,255,.10);
    border-color: rgba(255,255,255,.6);
    transform: translateY(-2px);
  }
}

/* Enlace CTA con flecha */
.link-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--red);
}
.link-cta span {
  transition: transform 200ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .link-cta:hover span { transform: translateX(4px); }
}

/* ============================================================
   04. HEADER / NAVEGACIÓN
============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,0.85);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 250ms var(--ease-soft),
              background-color 250ms var(--ease-soft),
              box-shadow 250ms var(--ease-soft);
}
.site-header.is-scrolled {
  border-bottom-color: var(--line);
  box-shadow: 0 1px 0 rgba(20,20,26,.02), 0 6px 20px rgba(20,20,26,.04);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: var(--header-h);
}

/* Marca / sello */
.brand { display: inline-flex; align-items: center; gap: 0.7rem; color: var(--ink); }
.brand__seal { color: var(--red); display: inline-flex; }
.brand__word { display: flex; flex-direction: column; line-height: 1; }
.brand__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.18rem;
  letter-spacing: 0.02em;
}
.brand__sub {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-top: 3px;
}

.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.4vw, 2.1rem);
  list-style: none;
  margin: 0; padding: 0;
}
.nav__list a {
  position: relative;
  font-size: 0.94rem;
  font-weight: 500;
  color: var(--ink-soft);
  padding-block: 0.3rem;
  transition: color 180ms var(--ease-soft);
}
.nav__list a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%; height: 1.5px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 240ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .nav__list a:hover { color: var(--ink); }
  .nav__list a:hover::after { transform: scaleX(1); }
}

.site-header__actions { display: flex; align-items: center; gap: 0.75rem; }

/* Toggle móvil */
.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: transparent;
  position: relative;
}
.nav-toggle__bar {
  position: absolute;
  left: 50%; top: 50%;
  width: 20px; height: 1.5px;
  background: var(--ink);
  transform: translate(-50%, -50%);
  transition: transform 260ms var(--ease-out), opacity 200ms var(--ease-out);
}
.nav-toggle__bar:first-child { transform: translate(-50%, -6px); }
.nav-toggle__bar:last-child  { transform: translate(-50%, 6px); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:first-child { transform: translate(-50%, 0) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:last-child  { transform: translate(-50%, 0) rotate(-45deg); }

/* ============================================================
   05. HERO
============================================================ */
.hero {
  position: relative;
  padding-block: clamp(3rem, 2rem + 5vw, 6rem) var(--section-y);
  background:
    radial-gradient(120% 90% at 85% -10%, var(--red-tint) 0%, transparent 45%),
    var(--paper);
  overflow: hidden;
}
.hero__inner {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(2rem, 4vw, 4.5rem);
  align-items: center;
}
.hero__title {
  font-size: var(--fs-display);
  font-weight: 500;
  letter-spacing: -0.025em;
  margin-bottom: 1.5rem;
  max-width: 15ch;
}
.hero__title em {
  font-style: italic;
  color: var(--red);
}
.hero__lead {
  font-size: var(--fs-lead);
  color: var(--ink-soft);
  max-width: 48ch;
  margin-bottom: 2rem;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-bottom: 2.6rem;
}

/* Indicadores de confianza */
.hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 4vw, 3rem);
  list-style: none;
  margin: 0; padding: 1.6rem 0 0;
  border-top: 1px solid var(--line);
}
.hero__trust-num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 1.3rem + 1.5vw, 2.4rem);
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.hero__trust-label {
  font-size: 0.8rem;
  color: var(--ink-muted);
  letter-spacing: 0.01em;
}

/* Panel lateral */
.hero__panel {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--paper);
  box-shadow: var(--shadow-md);
}
.hero__media {
  position: relative;
  aspect-ratio: 16 / 11;
  /* Reemplaza la url por tu foto en assets/. El degradado es el respaldo. */
  background-image:
    linear-gradient(150deg, rgba(11,11,15,.15), rgba(11,11,15,.55)),
    linear-gradient(135deg, #2a2a33 0%, #14141a 100%);
  /* background-image: linear-gradient(150deg, rgba(11,11,15,.10), rgba(11,11,15,.5)), url('assets/hero.jpg'); */
  background-size: cover;
  background-position: center;
}
.hero__badge {
  position: absolute;
  left: 1rem; bottom: 1rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: var(--red);
  padding: 0.4rem 0.8rem;
  border-radius: var(--r-pill);
}
.hero__card { padding: 1.5rem; }
.hero__card-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 0.7rem;
}
.hero__contact {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 500;
  color: var(--ink);
  padding: 0.35rem 0;
  transition: color 180ms var(--ease-soft);
}
.hero__contact svg { color: var(--red); }
@media (hover: hover) and (pointer: fine) {
  .hero__contact:hover { color: var(--red); }
}
.hero__divider { border: 0; border-top: 1px solid var(--line); margin: 1.1rem 0; }
.hero__hours { margin: 0; display: grid; gap: 0.4rem; }
.hero__hours div { display: flex; justify-content: space-between; font-size: 0.92rem; }
.hero__hours dt { color: var(--ink-soft); margin: 0; }
.hero__hours dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ============================================================
   06. SOBRE NOSOTROS
============================================================ */
.about { background: var(--paper-warm); }
.about__grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(2rem, 5vw, 5rem);
}
.about__intro {
  position: sticky;
  top: calc(var(--header-h) + 2rem);
  align-self: start;
}
.about__intro .btn { margin-top: 1.5rem; }
.about__block { margin-bottom: 2rem; }
.about__block h3 { font-size: var(--fs-h3); margin-bottom: 0.5rem; }
.about__block p { color: var(--ink-soft); }

.about__values {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  padding: 1.75rem 0;
  border-block: 1px solid var(--line);
  margin-bottom: 1.75rem;
}
.about__value h4 {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 0.5rem;
}
.about__value p { color: var(--ink-soft); font-size: 0.98rem; }

.about__pillars {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  list-style: none;
  margin: 0; padding: 0;
}
.about__pillars li {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--ink);
  padding: 0.5rem 1rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
}

/* ============================================================
   07. ÁREAS DE PRÁCTICA
============================================================ */
.areas__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: 1.5rem;
}
.area-card {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: transform 260ms var(--ease-out),
              box-shadow 260ms var(--ease-out),
              border-color 260ms var(--ease-out);
  will-change: transform;
}
@media (hover: hover) and (pointer: fine) {
  .area-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: var(--line-strong);
  }
  .area-card:hover .area-card__media { transform: scale(1.05); }
}
.area-card__media {
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
  transition: transform 500ms var(--ease-out);
  /* Cada área con su tono/foto de respaldo (reemplaza por assets/) */
}
.area-card--penal .area-card__media          { background-image: linear-gradient(135deg,#3a2226,#14141a); }
.area-card--civil .area-card__media          { background-image: linear-gradient(135deg,#2b2f36,#14141a); }
.area-card--laboral .area-card__media        { background-image: linear-gradient(135deg,#2f2b26,#14141a); }
.area-card--migratorio .area-card__media     { background-image: linear-gradient(135deg,#26313a,#14141a); }
.area-card--familia .area-card__media        { background-image: linear-gradient(135deg,#382630,#14141a); }
.area-card--administrativo .area-card__media { background-image: linear-gradient(135deg,#2a2e2b,#14141a); }
.area-card--transito .area-card__media       { background-image: linear-gradient(135deg,#3a2f22,#14141a); }

.area-card__body { padding: 1.5rem; display: flex; flex-direction: column; flex: 1; }
.area-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  margin-bottom: 1rem;
  color: var(--red);
  background: var(--red-tint);
  border-radius: var(--r-sm);
}
.area-card h3 { font-size: var(--fs-h3); margin-bottom: 0.6rem; }
.area-card p { color: var(--ink-soft); font-size: 0.97rem; margin-bottom: 0.85rem; }
.area-card__cases {
  font-size: 0.86rem !important;
  color: var(--ink-muted) !important;
  padding-top: 0.85rem;
  border-top: 1px solid var(--line);
}
.area-card .link-cta { margin-top: auto; }

/* ============================================================
   08. POR QUÉ ELEGIRNOS (banda oscura de autoridad)
============================================================ */
.why {
  background: var(--ink-deep);
  color: #fff;
}
.why .section-title { color: #fff; }
.why__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  padding: 2.25rem 0;
  margin-bottom: 3.5rem;
  border-block: 1px solid rgba(255,255,255,.12);
}
.why__stat { text-align: center; }
.why__num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3.4rem);
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: #fff;
}
.why__label {
  display: block;
  margin-top: 0.6rem;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,.6);
}
.why__reasons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.why__reason {
  padding: 1.75rem;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--r-md);
  background: rgba(255,255,255,.02);
  position: relative;
}
.why__reason::before {
  content: "";
  position: absolute;
  left: 1.75rem; top: 1.75rem;
  width: 26px; height: 2px;
  background: var(--red-on-dark);
}
.why__reason h3 { color: #fff; font-size: var(--fs-h3); margin: 1.4rem 0 0.5rem; }
.why__reason p { color: rgba(255,255,255,.66); font-size: 0.97rem; }

/* ============================================================
   09. EQUIPO
============================================================ */
.team__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 1.75rem;
}
.team-card {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--paper);
  transition: transform 260ms var(--ease-out), box-shadow 260ms var(--ease-out);
  will-change: transform;
}
@media (hover: hover) and (pointer: fine) {
  .team-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
}
.team-card__photo {
  position: relative;
  aspect-ratio: 4 / 5;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  background-size: cover;
  background-position: center;
  /* Reemplaza por assets/team-*.jpg */
}
.team-card__photo--1 { background-image: linear-gradient(160deg,#33323b,#191922); }
.team-card__photo--2 { background-image: linear-gradient(160deg,#2c3138,#191922); }
.team-card__photo--3 { background-image: linear-gradient(160deg,#382a30,#191922); }
.team-card__initials {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 3.5rem;
  font-weight: 500;
  color: rgba(255,255,255,.16);
}
.team-card__body { padding: 1.5rem; }
.team-card__name { font-size: var(--fs-h3); margin-bottom: 0.25rem; }
.team-card__role { color: var(--red); font-weight: 600; font-size: 0.9rem; margin-bottom: 0.15rem; }
.team-card__exp {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  margin-bottom: 0.85rem;
}
.team-card__bio { color: var(--ink-soft); font-size: 0.95rem; margin-bottom: 1.2rem; }
.team-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}
.team-card__social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--ink-soft);
  transition: color 200ms var(--ease-soft), border-color 200ms var(--ease-soft), transform 200ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .team-card__social:hover { color: var(--red); border-color: var(--red); transform: translateY(-2px); }
}

/* ============================================================
   10. PROCESO
============================================================ */
.process { background: var(--paper-warm); }
.process__steps {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.25rem;
  counter-reset: step;
}
.process__step {
  position: relative;
  padding: 1.75rem 1.25rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
/* Conector rojo entre pasos (se revela en JS con --draw) */
.process__step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%; right: -1.25rem;
  width: 1.25rem; height: 2px;
  background: var(--red);
  transform: scaleX(var(--draw, 0));
  transform-origin: left;
  transition: transform 500ms var(--ease-out);
}
.process__num {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 500;
  color: #fff;
  background: var(--red);
  padding: 0.2rem 0.55rem;
  border-radius: var(--r-sm);
  margin-bottom: 1rem;
}
.process__step h3 { font-size: 1.1rem; margin-bottom: 0.4rem; }
.process__step p { color: var(--ink-soft); font-size: 0.9rem; }

/* ============================================================
   11. CASOS DE ÉXITO
============================================================ */
.cases__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr));
  gap: 1.5rem;
}
.case-card {
  margin: 0;
  padding: 1.75rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  display: flex;
  flex-direction: column;
  transition: transform 260ms var(--ease-out), box-shadow 260ms var(--ease-out);
  will-change: transform;
}
@media (hover: hover) and (pointer: fine) {
  .case-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
}
.case-card__rating { color: var(--red); letter-spacing: 0.1em; margin-bottom: 1rem; font-size: 0.95rem; }
.case-card blockquote { margin: 0 0 1.25rem; }
.case-card blockquote p {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-style: italic;
  line-height: 1.5;
  color: var(--ink);
}
.case-card figcaption { margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--line); }
.case-card__name { display: block; font-weight: 600; }
.case-card__type {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  margin-top: 0.2rem;
}
.cases__note {
  text-align: center;
  font-size: 0.82rem;
  color: var(--ink-muted);
  margin-top: 2rem;
}

/* ============================================================
   12. FAQ (acordeón)
============================================================ */
.faq__inner {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.faq .section-head { margin-bottom: 0; }
.faq__list { display: grid; gap: 0.75rem; }
.faq__item {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--paper);
  overflow: hidden;
  transition: border-color 200ms var(--ease-soft), box-shadow 200ms var(--ease-soft);
}
.faq__item[open] { border-color: var(--line-strong); box-shadow: var(--shadow-sm); }
.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.35rem;
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.faq__item summary::-webkit-details-marker { display: none; }

/* Ícono +/- construido con pseudo-elementos (rota al abrir) */
.faq__icon {
  position: relative;
  flex: 0 0 auto;
  width: 18px; height: 18px;
}
.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  background: var(--red);
  transition: transform 260ms var(--ease-out), opacity 260ms var(--ease-out);
}
.faq__icon::before { width: 14px; height: 2px; transform: translate(-50%,-50%); }
.faq__icon::after  { width: 2px; height: 14px; transform: translate(-50%,-50%); }
.faq__item.is-open .faq__icon::after { transform: translate(-50%,-50%) rotate(90deg); opacity: 0; }

/* Contenido: transición de altura con grid-template-rows (suave e interrumpible) */
.faq__answer {
  display: grid;
  grid-template-rows: 1fr;
  padding: 0 1.35rem 1.25rem;
  color: var(--ink-soft);
}
.faq__answer p { min-height: 0; }

/* ============================================================
   13. FORMULARIO (agenda)
============================================================ */
.booking { background: var(--paper-warm); }
.booking__grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.booking__intro {
  position: sticky;
  top: calc(var(--header-h) + 2rem);
}
.booking__perks {
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}
.booking__perks li {
  position: relative;
  padding-left: 1.9rem;
  color: var(--ink);
  font-weight: 500;
}
.booking__perks li::before {
  content: "";
  position: absolute;
  left: 2px; top: 0.35rem;
  width: 12px; height: 6px;
  border-left: 2px solid var(--red);
  border-bottom: 2px solid var(--red);
  transform: rotate(-45deg);
  transform-origin: bottom left;
}

.booking__form {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  box-shadow: var(--shadow-sm);
}
.field { margin-bottom: 1.15rem; }
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.field label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0.5rem;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  padding: 0.8rem 0.95rem;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  transition: border-color 180ms var(--ease-soft), box-shadow 180ms var(--ease-soft);
}
.field textarea { resize: vertical; min-height: 110px; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 3px var(--red-tint);
}
.field.is-invalid input,
.field.is-invalid select,
.field.is-invalid textarea {
  border-color: var(--red);
}
.field__error {
  display: block;
  min-height: 1rem;
  margin-top: 0.35rem;
  font-size: 0.78rem;
  color: var(--red);
}
.booking__legal {
  margin-top: 1rem;
  font-size: 0.78rem;
  color: var(--ink-muted);
  text-align: center;
}
.booking__success {
  margin-top: 1.25rem;
  padding: 1rem 1.15rem;
  background: var(--red-tint);
  border: 1px solid #f2c9cd;
  border-radius: var(--r-sm);
  color: var(--red-strong);
  font-weight: 500;
  font-size: 0.95rem;
}

/* Separador "o escríbenos directamente" + botón de WhatsApp */
.booking__or {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin: 1.15rem 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.booking__or::before,
.booking__or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}
.booking__whatsapp-icon { color: #25d366; flex: none; }

@media (hover: hover) and (pointer: fine) {
  .booking__whatsapp:hover {
    border-color: #25d366;
    color: #128c3e;
  }
  .booking__whatsapp:hover .booking__whatsapp-icon { color: #128c3e; }
}

/* ============================================================
   14. UBICACIÓN
============================================================ */
.location__grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: stretch;
}
.location__info .btn { margin-top: 1.75rem; }
.location__list {
  margin: 2rem 0 0;
  display: grid;
  gap: 1.5rem;
}
.location__item dt {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 0.35rem;
}
.location__item dd { margin: 0; color: var(--ink-soft); line-height: 1.6; }
.location__item a { color: var(--ink); font-weight: 500; transition: color 160ms var(--ease-soft); }
@media (hover: hover) and (pointer: fine) { .location__item a:hover { color: var(--red); } }
.location__map {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  min-height: 380px;
  box-shadow: var(--shadow-sm);
}
.location__map iframe { width: 100%; height: 100%; min-height: 380px; border: 0; filter: grayscale(0.2) contrast(1.05); }

/* ============================================================
   15. CTA FINAL
============================================================ */
.cta-final {
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(179,22,39,.18) 0%, transparent 55%),
    var(--ink-deep);
  color: #fff;
  padding-block: clamp(4rem, 3rem + 6vw, 7rem);
  text-align: center;
}
.cta-final__inner { max-width: 720px; margin-inline: auto; }
.cta-final__title {
  color: #fff;
  font-size: var(--fs-h2);
  margin: 0.5rem 0 1rem;
}
.cta-final__lead {
  color: rgba(255,255,255,.7);
  font-size: var(--fs-lead);
  margin-bottom: 2rem;
}
.cta-final__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  justify-content: center;
}

/* ============================================================
   16. FOOTER
============================================================ */
.site-footer { background: var(--ink); color: rgba(255,255,255,.72); }
.site-footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-block: clamp(3rem, 5vw, 4.5rem);
}
.brand--footer { color: #fff; margin-bottom: 1.1rem; }
.brand--footer .brand__seal { color: var(--red-on-dark); }
.brand--footer .brand__sub { color: rgba(255,255,255,.5); }
.site-footer__tagline { color: rgba(255,255,255,.6); max-width: 34ch; font-size: 0.95rem; }
.site-footer__social {
  display: flex; gap: 0.6rem;
  list-style: none; margin: 1.5rem 0 0; padding: 0;
}
.site-footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 50%;
  color: rgba(255,255,255,.8);
  transition: color 200ms var(--ease-soft), border-color 200ms var(--ease-soft), transform 200ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .site-footer__social a:hover { color: #fff; border-color: var(--red-on-dark); transform: translateY(-2px); }
}
.site-footer__col h3 {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
  margin-bottom: 1.1rem;
}
.site-footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.site-footer__col a { color: rgba(255,255,255,.72); font-size: 0.94rem; transition: color 160ms var(--ease-soft); }
@media (hover: hover) and (pointer: fine) { .site-footer__col a:hover { color: #fff; } }
.site-footer__contact li { font-size: 0.94rem; }

.site-footer__bottom { border-top: 1px solid rgba(255,255,255,.1); }
.site-footer__bottom-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.5rem;
  font-size: 0.82rem;
  color: rgba(255,255,255,.5);
}
.site-footer__legal { display: flex; flex-wrap: wrap; gap: 1.25rem; list-style: none; margin: 0; padding: 0; }
.site-footer__legal a { color: rgba(255,255,255,.5); }
@media (hover: hover) and (pointer: fine) { .site-footer__legal a:hover { color: #fff; } }

/* ============================================================
   17. VOLVER ARRIBA
============================================================ */
.to-top {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 90;
  width: 46px; height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: var(--ink);
  border: none;
  border-radius: 50%;
  box-shadow: var(--shadow-md);
  opacity: 0;
  transform: translateY(10px) scale(0.95);
  transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out), background-color 200ms var(--ease-soft);
}
.to-top.is-visible { opacity: 1; transform: translateY(0) scale(1); }
@media (hover: hover) and (pointer: fine) {
  .to-top:hover { background: var(--red); transform: translateY(-2px); }
}

/* ============================================================
   18. ANIMACIONES — scroll reveal + stagger
============================================================ */
/* Estado inicial (fade-up) — solo cuando JS marca .reveal-ready */
.reveal-ready [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 620ms var(--ease-out), transform 620ms var(--ease-out);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}
/* Stagger para grupos: se aplican delays vía variable en JS */
[data-reveal] { transition-delay: var(--reveal-delay, 0ms); }

/* Entrada orquestada del hero al cargar (una sola vez → puede tener deleite) */
.reveal-ready .hero [data-reveal] { transition-duration: 720ms; }

/* ============================================================
   19. RESPONSIVE
============================================================ */
@media (max-width: 1024px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__panel { max-width: 480px; }
  .about__grid { grid-template-columns: 1fr; }
  .about__intro { position: static; }
  .why__stats { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
  .why__reasons { grid-template-columns: 1fr; }
  .process__steps { grid-template-columns: repeat(2, 1fr); }
  .process__step:not(:last-child)::after { display: none; }
  .faq__inner,
  .booking__grid,
  .location__grid { grid-template-columns: 1fr; }
  .booking__intro { position: static; }
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
  .site-footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  /* Navegación móvil: panel deslizante */
  .nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out), visibility 240ms;
  }
  .nav.is-open { transform: translateY(0); opacity: 1; visibility: visible; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; padding: 0.5rem var(--gutter) 1.25rem; }
  .nav__list li { border-bottom: 1px solid var(--line); }
  .nav__list a { display: block; padding: 0.95rem 0; font-size: 1.05rem; }
  .nav__list a::after { display: none; }
  .nav-toggle { display: block; }

  .about__values { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .site-footer__grid { grid-template-columns: 1fr; }
  .site-footer__bottom-inner { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 480px) {
  .why__stats { grid-template-columns: 1fr; gap: 1.75rem; }
  .process__steps { grid-template-columns: 1fr; }
  .hero__actions .btn { flex: 1; }
}

/* ============================================================
   20. ACCESIBILIDAD / REDUCED MOTION
   (Reduced motion = menos movimiento, no cero: conservamos
    la opacidad que ayuda a comprender; quitamos desplazamientos.)
============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal-ready [data-reveal] { opacity: 1; transform: none; transition: opacity 200ms ease; }
  .area-card:hover,
  .team-card:hover,
  .case-card:hover,
  .btn:hover { transform: none !important; }
  .process__step::after { transform: scaleX(1) !important; }
}