/* ============================================
   HEDALEGAL - Estilos
   Paleta: negro + dorado
   Tipografía: Fraunces + Archivo
   ============================================ */

:root {
  /* Paleta */
  --black:        #0A0908;
  --black-soft:   #121110;
  --black-card:   #161514;
  --gold:         #C9A961;
  --gold-bright:  #DCBF82;
  --gold-deep:    #8A7344;
  --text:         #EFE9DD;
  --text-muted:   #8F8A7E;
  --text-dim:     #5F5C55;
  --border:       rgba(201, 169, 97, 0.12);
  --border-strong:rgba(201, 169, 97, 0.30);

  /* Tipografía */
  --font-serif: 'Fraunces', Georgia, serif;
  --font-sans:  'Archivo', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Layout */
  --container: 1200px;
  --nav-height: 76px;
  --radius: 4px;
  --radius-lg: 8px;

  /* Transiciones */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--black);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* El atributo hidden lo aplica el navegador con display:none desde su
   hoja base, y cualquier regla nuestra le gana. Sin esto, un elemento
   con display:flex ignora hidden y queda visible. */
[hidden] { display: none !important; }

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { background: none; border: none; color: inherit; font: inherit; cursor: pointer; }
ul { list-style: none; }

::selection { background: var(--gold); color: var(--black); }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--black); }
::-webkit-scrollbar-thumb { background: var(--gold-deep); border-radius: 10px; border: 2px solid var(--black); }
::-webkit-scrollbar-thumb:hover { background: var(--gold); }

/* Layout ===================================== */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 2.5rem);
}

.section {
  padding: clamp(5rem, 10vw, 8rem) 0;
  position: relative;
}

/* Tipografía ================================= */
h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--text);
}

em {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--gold);
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.25rem;
  position: relative;
  padding-left: 28px;
}

.eyebrow::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 20px;
  height: 1px;
  background: var(--gold);
}

.section-head { max-width: 640px; margin-bottom: 4rem; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }

.section-head.center .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding-left: 0;
  padding-right: 0;
}

.section-head.center .eyebrow::before {
  position: static;
  left: auto;
  top: auto;
  width: 20px;
  height: 1px;
  transform: none;
}

.section-head.center .eyebrow::after {
  content: '';
  display: block;
  width: 20px;
  height: 1px;
  background: var(--gold);
}

.section-title {
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.05;
  margin-bottom: 1rem;
}

.section-desc {
  color: var(--text-muted);
  font-size: 1.0625rem;
  line-height: 1.7;
  max-width: 58ch;
}

.section-head.center .section-desc { margin-left: auto; margin-right: auto; }

/* Buttons ==================================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.95rem 1.6rem;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  border-radius: var(--radius);
  transition: all 0.25s var(--ease);
  cursor: pointer;
  white-space: nowrap;
}

.btn-primary {
  background: var(--gold);
  color: var(--black);
  border: 1px solid var(--gold);
}

.btn-primary:hover {
  background: var(--gold-bright);
  border-color: var(--gold-bright);
  transform: translateY(-1px);
}

.btn-ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border-strong);
}

.btn-ghost:hover {
  border-color: var(--gold);
  color: var(--gold);
}

/* Navbar ===================================== */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--nav-height);
  z-index: 100;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease), backdrop-filter 0.3s var(--ease);
  border-bottom: 1px solid transparent;
}

.navbar.scrolled {
  background: rgba(10, 9, 8, 0.78);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom-color: var(--border);
}

.nav-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-sans);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: -0.035em;
  text-transform: lowercase;
  color: var(--text);
}

.logo-mark {
  width: 36px;
  height: 36px;
  background: var(--gold);
  color: var(--black);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.02em;
  border-radius: var(--radius);
  transition: background 0.25s var(--ease);
}

.logo-mark svg {
  width: 20px;
  height: 20px;
}

.logo:hover .logo-mark { background: var(--gold-bright); }

.logo-text { line-height: 1; }

.logo-text-unused em {
  font-style: italic;
  color: var(--gold);
  margin: 0 0.1em;
}

.nav-links {
  display: flex;
  gap: 2.25rem;
  margin: 0 auto;
}

.nav-links a {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  color: var(--text-muted);
  position: relative;
  padding: 0.5rem 0;
  transition: color 0.25s var(--ease);
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 1px;
  background: var(--gold);
  transition: width 0.3s var(--ease);
}

.nav-links a:hover { color: var(--text); }
.nav-links a:hover::after { width: 100%; }

.nav-toggle { display: none; width: 32px; height: 32px; flex-direction: column; justify-content: center; gap: 5px; }
.nav-toggle span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--text);
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
  margin: 0 auto;
}
.nav-toggle.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Hero ======================================= */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-top: calc(var(--nav-height) + 3rem);
  padding-bottom: 4rem;
  overflow: hidden;
}

.hero-grid-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse at 50% 40%, black 20%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 40%, black 20%, transparent 70%);
  pointer-events: none;
  opacity: 0.6;
}

.hero::before {
  content: '';
  position: absolute;
  top: -200px;
  right: -200px;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(201, 169, 97, 0.08) 0%, transparent 70%);
  pointer-events: none;
}

/* Spotlight: el foco dorado sigue al cursor por todo el hero.
   La versión anterior, más tenue, quedó guardada en
   _ARCHIVO/spotlight-anterior.css por si hay que volver. */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(
    620px circle at var(--mx, 50%) var(--my, 45%),
    rgba(201, 169, 97, 0.30) 0%,
    rgba(201, 169, 97, 0.10) 30%,
    transparent 66%
  );
  opacity: 0;
  transition: opacity 0.5s var(--ease);
}

/* La retícula se enciende en dorado solo alrededor del cursor: el foco
   no ilumina el vacío, ilumina algo. Es lo que le da profundidad. */
.hero-grid-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(201, 169, 97, 0.55) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201, 169, 97, 0.55) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(300px circle at var(--mx, 50%) var(--my, 45%), black 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(300px circle at var(--mx, 50%) var(--my, 45%), black 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.5s var(--ease);
}

.hero.spot-on .hero-grid-bg::after { opacity: 1; }

.hero.spot-on::after { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .hero::after,
  .hero-grid-bg::after { display: none; }
}

.hero-inner {
  position: relative;
  z-index: 1;
  max-width: 880px;
}

.hero-title {
  /* Bajado de 5.25rem: la línea tiene que aguantar la palabra
     más larga del rotador ("plataformas") sin partirse. */
  font-size: clamp(2.25rem, 5.6vw, 4.5rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin-bottom: 1.75rem;
  font-weight: 400;
}

.hero-title em {
  font-style: italic;
  color: var(--gold);
}

/* Rotador: la última palabra se escribe y se borra sola.
   La segunda línea no se parte nunca: si la palabra del rotador
   es más larga, la línea se estira, no salta abajo. */
.hero-title .l2 { white-space: nowrap; }

#rotador { display: inline-block; }

#rotador.cursor::after {
  content: '';
  display: inline-block;
  width: 3px;
  height: 0.7em;
  margin-left: 0.06em;
  background: var(--gold);
  vertical-align: baseline;
  animation: caret 1.1s steps(1) infinite;
}

@keyframes caret {
  0%, 48%   { opacity: 1; }
  49%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  #rotador.cursor::after { display: none; }
}

.hero-desc {
  font-size: clamp(1.0625rem, 1.5vw, 1.1875rem);
  color: var(--text-muted);
  max-width: 58ch;
  line-height: 1.65;
  margin-bottom: 2.75rem;
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* Servicios ================================== */
.section-services {
  border-top: 1px solid var(--border);
  background: var(--black-soft);
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.service-card {
  background: var(--black-soft);
  padding: 2.25rem 1.75rem;
  transition: background 0.3s var(--ease);
  position: relative;
}

.service-card:hover { background: var(--black-card); }

.service-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  color: var(--gold);
  margin-bottom: 1.75rem;
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease);
}

.service-card:hover .service-icon {
  border-color: var(--gold);
  color: var(--gold-bright);
}

.service-card h3 {
  font-size: 1.5rem;
  line-height: 1.2;
  margin-bottom: 0.75rem;

  /* Reparte las palabras entre las líneas en vez de dejar una huérfana
     colgando al final. */
  text-wrap: balance;
}

/* Red de seguridad: con las cuatro tarjetas en fila los títulos ocupan
   dos líneas. Si alguno se acorta en el futuro, este mínimo evita que
   su párrafo quede subido respecto de los vecinos.
   Solo desde 961px: abajo de eso la grilla baja a dos o una columna,
   los títulos entran en una línea y el mínimo dejaría un hueco. */
@media (min-width: 961px) {
  .service-card h3 { min-height: calc(2 * 1.2em); }
}

.service-card p {
  color: var(--text-muted);
  font-size: 0.9375rem;
  line-height: 1.6;
}

/* Nosotros =================================== */
.section-about {
  border-top: 1px solid var(--border);
}

.about-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 5rem;
  align-items: center;
}

.about-text .section-title { margin-bottom: 1.5rem; }

.about-text p {
  color: var(--text-muted);
  font-size: 1.0625rem;
  line-height: 1.75;
  margin-bottom: 1.25rem;
  max-width: 52ch;
}

.stats {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding-left: 2.5rem;
  border-left: 1px solid var(--border);
}

.stat { position: relative; }

.stat-num {
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(3rem, 5vw, 4rem);
  line-height: 1;
  color: var(--gold);
  margin-bottom: 0.5rem;
}

.stat-sign {
  font-size: 0.65em;
  vertical-align: top;
  margin-left: 0.05em;
}

.stat-label {
  font-family: var(--font-sans);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 500;
}

/* Equipo ===================================== */
.team-wrap {
  margin-top: 6rem;
  padding-top: 5rem;
  border-top: 1px solid var(--border);
}

.team-head {
  text-align: center;
  margin-bottom: 3.5rem;
}

.team-head .eyebrow {
  padding-left: 28px;
  padding-right: 28px;
}

.team-head .eyebrow::before {
  left: 50%;
  transform: translateX(-40px);
}

.team-head .eyebrow::after {
  content: '';
  position: absolute;
  right: 50%;
  top: 50%;
  width: 20px;
  height: 1px;
  background: var(--gold);
  transform: translateX(40px);
}

.team-heading {
  font-size: clamp(1.75rem, 3.2vw, 2.25rem);
  line-height: 1.15;
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  max-width: 1000px;
  margin: 0 auto;
}

.team-card {
  display: flex;
  gap: 1.75rem;
  padding: 2rem;
  background: var(--black-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
}

.team-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
}

.team-photo {
  flex-shrink: 0;
  width: 120px;
  height: 120px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  border: 1px solid var(--border-strong);
}

.team-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 70%, rgba(10, 9, 8, 0.3) 100%);
  pointer-events: none;
}

.team-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.9);
  transition: filter 0.4s var(--ease), transform 0.5s var(--ease);
}

.team-card:hover .team-photo img {
  filter: saturate(1);
  transform: scale(1.04);
}

.team-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.25rem;
  flex: 1;
  min-width: 0;
}

.team-name {
  font-family: var(--font-serif);
  font-size: 1.625rem;
  line-height: 1.1;
  font-weight: 400;
  color: var(--text);
  margin-bottom: 0.1rem;
}

.team-role {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--gold);
  font-weight: 500;
  letter-spacing: 0.02em;
}

.team-mat {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-top: 0.6rem;
  align-self: flex-start;
}

.team-bio {
  margin-top: 1rem;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--text-muted);
}

/* Equipo / Socios =========================== */
.section-team {
  border-top: 1px solid var(--border);
  background: var(--black-soft);
}

.team-grid {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 880px;
  margin: 0 auto;
}

/* Foto a sangre: ocupa la columna entera, de borde a borde de la
   ficha, y toma el alto que le da el texto. Por eso no hay padding
   en la tarjeta (lo pone .partner-info) ni gap entre columnas. */
.partner-card {
  background: var(--black-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 0;
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 0;
  align-items: stretch;
  overflow: hidden;
  transition: border-color 0.35s var(--ease), transform 0.35s var(--ease);
}

.partner-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
}

.partner-photo {
  position: relative;
  width: 100%;
  height: auto;
  overflow: hidden;
  background: var(--black);
  border-right: 1px solid var(--border);
}

/* Degradado lateral, para que la foto empalme con el fondo de la
   ficha en vez de cortarse con un canto duro */
.partner-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 75%, rgba(22, 21, 20, 0.5) 100%);
  pointer-events: none;
}

.partner-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform 0.6s var(--ease);
}

/* Sin desaturar: las fotos ya vienen tratadas y el gris apagaba el dorado */
.partner-card:hover .partner-photo img { transform: scale(1.04); }

.partner-info {
  text-align: left;
  padding: 1.75rem 2rem;
}

.partner-role {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.4rem;
}

.partner-name {
  font-size: 1.75rem;
  line-height: 1.1;
  margin-bottom: 0.5rem;
}

.partner-email {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--gold);
  letter-spacing: 0.01em;
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease);
  word-break: break-all;
}

.partner-email:hover {
  color: var(--gold-bright);
  border-bottom-color: var(--gold);
}

.partner-contacts {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}

.partner-phone {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--gold);
  letter-spacing: 0.02em;
  margin-bottom: 0.85rem;
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease);
}

.partner-phone:hover {
  color: var(--gold-bright);
  border-bottom-color: var(--gold);
}

.partner-phone svg {
  flex-shrink: 0;
}

.partner-linkedin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  color: var(--gold);
  background: rgba(201, 169, 97, 0.04);
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease), color 0.25s var(--ease), transform 0.25s var(--ease);
}

.partner-linkedin:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--black);
  transform: translateY(-1px);
}

.partner-linkedin svg { display: block; }

/* Nombre + LinkedIn + matrícula, todo en una línea */
.partner-namerow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}

.partner-namerow .partner-name { margin-bottom: 0; }
.partner-namerow .partner-license { margin-left: auto; }

/* Especialidades como fichas */
.partner-specialty {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0 0 0.85rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--border);
}

/* El degradado va como background-image: se pinta encima del color
   de fondo y debajo del texto, así el foco no lava las letras y no
   hace falta ningún pseudoelemento. */
.partner-specialty .tag {
  display: inline-block;
  padding: 0.25rem 0.6rem;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  background-color: rgba(201, 169, 97, 0.07);
  background-image: radial-gradient(
    80px circle at var(--mx, -200px) var(--my, -200px),
    rgba(201, 169, 97, 0.32),
    rgba(201, 169, 97, 0.10) 45%,
    transparent 72%
  );
  border-radius: var(--radius);
  transition: color 0.25s var(--ease), background-color 0.25s var(--ease);
}

.partner-card:hover .partner-specialty .tag {
  color: var(--text);
  background-color: rgba(201, 169, 97, 0.10);
}

.partner-bio {
  color: var(--text-muted);
  font-size: 0.875rem;
  line-height: 1.65;
  margin-bottom: 0.75rem;
  text-align: left;
}

/* Dato de respaldo, no argumento de venta: gris, no dorado */
.partner-license {
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 0.08em;
  font-weight: 400;
  white-space: nowrap;
}

/* Contacto =================================== */
.section-contact {
  border-top: 1px solid var(--border);
  background: var(--black-soft);
}

/* Llamado único de la sección Contacto ---------
   Una sola puerta, bien grande: el cuestionario. */

.cta-grande {
  position: relative;
  overflow: hidden;
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  padding: clamp(3rem, 7vw, 4.5rem) clamp(1.5rem, 4vw, 3.5rem);
  background: var(--black-soft);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
}

/* Escuadras en dos esquinas opuestas: el gesto de un sello o un
   certificado, que es el registro de un estudio jurídico. */
.cta-grande::before,
.cta-grande::after {
  content: '';
  position: absolute;
  width: 26px;
  height: 26px;
  border: 1px solid var(--gold);
  pointer-events: none;
}

.cta-grande::before {
  top: 14px;
  left: 14px;
  border-right: none;
  border-bottom: none;
}

.cta-grande::after {
  bottom: 14px;
  right: 14px;
  border-left: none;
  border-top: none;
}

/* La misma retícula del hero, más un resplandor dorado detrás del
   botón: da profundidad sin agregar un solo elemento visible. */
.cta-fondo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px),
    radial-gradient(ellipse at 50% 55%, rgba(201, 169, 97, 0.10) 0%, transparent 65%);
  background-size: 56px 56px, 56px 56px, 100% 100%;
  mask-image: radial-gradient(ellipse at 50% 50%, black 25%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, black 25%, transparent 78%);
}

/* Los tres datos: lo que el visitante quiere saber antes de empezar. */
.cta-datos {
  position: relative;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 5vw, 3rem);
  margin-bottom: clamp(2rem, 4vw, 2.75rem);
  list-style: none;
}

.cta-datos li {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

/* Separador fino entre datos, sin dibujar cajas. */
.cta-datos li + li::before {
  content: '';
  position: absolute;
  left: calc(clamp(1.5rem, 5vw, 3rem) / -2);
  top: 15%;
  bottom: 15%;
  width: 1px;
  background: var(--border);
}

.cta-datos strong {
  font-family: var(--font-serif);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 400;
  line-height: 1;
  color: var(--gold);
}

.cta-datos span {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.btn-xl {
  position: relative;
  padding: 1.25rem 2.75rem;
  font-size: 1rem;
  letter-spacing: 0.01em;
}

.cta-nota {
  position: relative;
  margin: 1.5rem auto 0;
  max-width: 46ch;
  color: var(--text-dim);
  font-size: 0.9375rem;
  line-height: 1.65;
}

@media (max-width: 560px) {
  .btn-xl { width: 100%; justify-content: center; padding: 1.125rem 1.5rem; }
}

.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  max-width: 1040px;
  margin: 0 auto;
}

.contact-card {
  background: var(--black-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  position: relative;
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
}

.contact-card-link:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
}

.contact-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  color: var(--gold);
  margin-bottom: 1.25rem;
}

.contact-label {
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 500;
}

.contact-value {
  font-family: var(--font-serif);
  font-size: 1.625rem;
  color: var(--text);
  line-height: 1.2;
  margin-top: 0.15rem;
}

.contact-sub {
  color: var(--text-muted);
  font-size: 0.9375rem;
  margin-top: 0.25rem;
}

.contact-arrow {
  position: absolute;
  top: 2.5rem;
  right: 2.5rem;
  color: var(--gold);
  font-size: 1.25rem;
  transition: transform 0.3s var(--ease);
}

.contact-card-link:hover .contact-arrow {
  transform: translate(4px, -4px);
}

/* Footer ===================================== */
.footer {
  background: var(--black);
  border-top: 1px solid var(--border);
  padding: 4.5rem 0 2rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1.2fr 1fr;
  gap: 3rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid var(--border);
}

/* El rubro de cada marca, debajo del nombre: aclara qué es sin que
   haya que entrar a averiguarlo. */
.footer-marca-que {
  display: block;
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 2px;
}

.logo-footer { margin-bottom: 1.25rem; }

.footer-address {
  color: var(--text-muted);
  font-size: 0.9375rem;
  line-height: 1.65;
  margin-bottom: 1rem;
  max-width: 280px;
}

.footer-email {
  display: inline-block;
  font-family: var(--font-serif);
  font-size: 1.125rem;
  color: var(--gold);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s var(--ease);
}

.footer-email:hover { border-bottom-color: var(--gold); }

.footer-col h4 {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.25rem;
}

.footer-col ul { display: flex; flex-direction: column; gap: 0.65rem; }
.footer-col a, .link-btn {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--text-muted);
  transition: color 0.25s var(--ease);
  text-align: left;
  padding: 0;
}
.footer-col a:hover, .link-btn:hover { color: var(--gold); }

.footer-bottom {
  padding-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.footer-bottom p {
  font-size: 13px;
  color: var(--text-dim);
}
.footer-note { font-style: italic; }

/* Páginas legales ============================ */
/* Reemplazan a los viejos modales: ahora cada documento es una página
   real, con su URL, indexable y enlazable desde un mail o un contrato. */

.section-legal {
  padding-top: calc(var(--nav-height) + clamp(2.5rem, 7vw, 5rem));
}

/* Medida de lectura corta: un texto legal a 1200px es ilegible. */
.legal-wrap { max-width: 760px; }

.legal-head { margin-bottom: 3rem; }
.legal-head .section-title { margin-bottom: 0.75rem; }

.legal-body section { margin-bottom: 2.25rem; }
.legal-body section:last-of-type { margin-bottom: 0; }

.legal-body h2 {
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--gold);
  margin-bottom: 0.625rem;
}

.legal-body p,
.legal-body ul {
  color: var(--text-muted);
  font-size: 0.9375rem;
  line-height: 1.75;
  margin-bottom: 0.75rem;
}

.legal-body p:last-child { margin-bottom: 0; }
.legal-body ul { padding-left: 1.25rem; list-style: disc; }
.legal-body li { margin-bottom: 0.35rem; }
.legal-body strong { color: var(--text); font-weight: 500; }

.legal-body a {
  color: var(--gold);
  border-bottom: 1px solid var(--border-strong);
  transition: border-color 0.25s var(--ease);
  overflow-wrap: anywhere;
}

.legal-body a:hover { border-bottom-color: var(--gold); }

.legal-updated {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
  font-size: 13px;
  font-style: italic;
  color: var(--text-dim);
}

.legal-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
  margin-top: 3rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--border);
  font-size: 14px;
}

.legal-nav a {
  color: var(--text-muted);
  transition: color 0.25s var(--ease);
}

.legal-nav a:hover { color: var(--gold); }
.legal-nav-home { margin-left: auto; color: var(--text); }

/* Cómo trabajamos ============================ */

.section-metodo {
  padding-top: calc(var(--nav-height) + clamp(3rem, 8vw, 6rem));
  padding-bottom: 0;
}

.metodo-wrap { max-width: 980px; }

.metodo-head .section-title { margin-bottom: 1.25rem; }

.metodo-lead {
  color: var(--text-muted);
  font-size: clamp(1.0625rem, 2.2vw, 1.1875rem);
  line-height: 1.7;
}

/* La declaración de que no se toman todos los casos. Va sola y con
   peso: no es una regla más, es la postura que ordena a las demás. */
.declaracion {
  margin-top: clamp(3rem, 7vw, 4.5rem);
  padding: clamp(2rem, 4vw, 2.75rem);
  padding-left: clamp(1.75rem, 3.5vw, 2.5rem);
  border-left: 2px solid var(--gold);
  background: var(--black-soft);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}

.declaracion h2 {
  font-size: clamp(1.5rem, 3.2vw, 2.125rem);
  line-height: 1.15;
  margin-bottom: 1.25rem;
}

.declaracion p {
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1.75;
}

.declaracion p + p { margin-top: 0.875rem; }
.declaracion-entrada { margin-bottom: 1.25rem; }

.declaracion-lista {
  list-style: none;
  margin-bottom: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.declaracion-lista li {
  position: relative;
  padding-left: 1.25rem;
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1.75;
}

.declaracion-lista li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
}

.declaracion-lista strong { color: var(--text); font-weight: 500; }

/* Acordeón horizontal de principios ------------
   Los paneles cerrados quedan como lomos verticales a la izquierda y
   el abierto ocupa el resto. */

.acordeon {
  display: flex;
  gap: 1px;
  height: 440px;
  background: var(--border);
  border: 1px solid var(--border);
  overflow: hidden;
}

/* Todos los paneles miden 88px de base y solo cambia flex-grow: el que
   está abierto se lleva el espacio sobrante. Animar únicamente
   flex-grow, que es un número sin unidad, evita las interpolaciones
   rotas que aparecen al pasar de 88px a 0%. */
.acordeon-panel {
  display: flex;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 88px;
  min-width: 0;
  background: var(--black);
  transition: flex-grow 0.55s var(--ease), background 0.3s var(--ease);
}

.acordeon-panel.activo { flex-grow: 1; }
.acordeon-panel:not(.activo):hover { background: var(--black-soft); }

.acordeon-lomo {
  flex: 0 0 88px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  padding: 1.75rem 0;
  cursor: pointer;
  color: var(--text-dim);
  transition: color 0.3s var(--ease);
}

.acordeon-panel.activo .acordeon-lomo { color: var(--gold); cursor: default; }
.acordeon-panel:not(.activo):hover .acordeon-lomo { color: var(--text-muted); }

.acordeon-numero {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  color: var(--gold);
}

/* El título girado hace de lomo de libro cuando el panel está cerrado. */
.acordeon-vertical {
  writing-mode: vertical-rl;
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: opacity 0.3s var(--ease);
}

.acordeon-panel.activo .acordeon-vertical { opacity: 0; }

.acordeon-cuerpo {
  min-width: 0;
  padding: 2.25rem 2.5rem 2.25rem 0.5rem;
  align-self: center;
  max-width: 520px;
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}

.acordeon-panel.activo .acordeon-cuerpo { opacity: 1; transition-delay: 0.25s; }

.acordeon-icono {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  color: var(--gold);
  margin-bottom: 1.5rem;
}

.acordeon-cuerpo h3 {
  font-size: clamp(1.25rem, 2.4vw, 1.625rem);
  line-height: 1.2;
  margin-bottom: 0.875rem;
}

.acordeon-cuerpo p {
  color: var(--text-muted);
  font-size: 0.9375rem;
  line-height: 1.75;
}

/* En pantallas chicas no hay ancho para lomos: se muestra todo abierto,
   uno debajo del otro. */
@media (max-width: 860px) {
  .acordeon { display: block; height: auto; }

  .acordeon-panel {
    display: block;
    border-bottom: 1px solid var(--border);
    padding: 1.75rem;
  }

  .acordeon-panel:last-child { border-bottom: none; }

  .acordeon-lomo {
    flex-direction: row;
    gap: 0.875rem;
    padding: 0 0 1rem;
    color: var(--gold);
    cursor: default;
    pointer-events: none;
  }

  .acordeon-vertical { display: none; }

  .acordeon-cuerpo {
    opacity: 1;
    padding: 0;
    max-width: none;
  }

  .acordeon-icono { display: none; }
}


/* Recorrido ------------------------------------
   Números grandes al margen y una línea fina separando cada paso: se
   lee como un índice de libro, no como una lista de viñetas. */

.recorrido { list-style: none; }

.recorrido-paso {
  display: grid;
  grid-template-columns: clamp(76px, 11vw, 132px) 1fr;
  gap: clamp(1rem, 3vw, 2rem);
  align-items: start;
  padding: clamp(1.75rem, 4vw, 2.75rem) 0;
  border-top: 1px solid var(--border);
}

.recorrido-paso:last-child { border-bottom: 1px solid var(--border); }

.recorrido-numero {
  font-family: var(--font-serif);
  font-size: clamp(2.75rem, 7vw, 4.5rem);
  line-height: 0.8;
  color: var(--gold);
  letter-spacing: -0.02em;
}

.recorrido-texto h3 {
  font-size: clamp(1.375rem, 2.8vw, 1.875rem);
  line-height: 1.2;
  margin-bottom: 0.75rem;
}

.recorrido-texto p {
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1.75;
  max-width: 60ch;
}

@media (max-width: 560px) {
  .recorrido-paso {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
  .recorrido-numero { font-size: 2.25rem; }
}

.section-metodo-cierre { padding-top: 0; }

.metodo-cierre {
  padding-top: clamp(3rem, 6vw, 4rem);
  border-top: 1px solid var(--border);
}

.metodo-cierre .metodo-lead { margin-bottom: 2rem; }

/* Embudo de admisión ========================= */
/* Una pregunta por pantalla. El que no califica nunca ve el formulario. */

.section-embudo {
  padding-top: calc(var(--nav-height) + clamp(2.5rem, 7vw, 4.5rem));
}

.embudo-wrap { max-width: 720px; }

.embudo-head { margin-bottom: 3rem; transition: opacity 0.3s var(--ease); }
.embudo-head.oculto { display: none; }
.embudo-head .section-title { margin-bottom: 1rem; }

.embudo-lead {
  color: var(--text-muted);
  font-size: 1.0625rem;
  line-height: 1.7;
}

.embudo-progreso { margin-top: 2.5rem; }

.embudo-barra {
  height: 2px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}

.embudo-barra span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--gold);
  transition: width 0.4s var(--ease);
}

.embudo-contador {
  margin-top: 0.625rem;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* Pasos: solo el activo se ve. */
.embudo-paso { display: none; }
.embudo-paso.activo { display: block; animation: embudoEntra 0.4s var(--ease); }

@keyframes embudoEntra {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.embudo-pregunta {
  font-size: clamp(1.5rem, 3.5vw, 2rem);
  line-height: 1.2;
  margin-bottom: 2rem;
}

.embudo-opciones {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Opciones grandes: se eligen de un clic, sin casillas ni "siguiente". */
.embudo-opcion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 1.125rem 1.375rem;
  text-align: left;
  background: var(--black-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 1rem;
  line-height: 1.4;
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease), transform 0.25s var(--ease);
}

.embudo-opcion svg { flex: none; color: var(--gold); opacity: 0; transition: opacity 0.25s var(--ease), transform 0.25s var(--ease); }

.embudo-opcion:hover {
  border-color: var(--gold);
  background: var(--black-card);
  transform: translateX(3px);
}

.embudo-opcion:hover svg { opacity: 1; transform: translateX(2px); }

.embudo-volver {
  margin-top: 1.75rem;
  font-size: 0.875rem;
  color: var(--text-dim);
  transition: color 0.25s var(--ease);
}

.embudo-volver::before { content: '\2190'; margin-right: 0.5rem; }
.embudo-volver:hover { color: var(--gold); }

/* Resultados */
.embudo-resultado { display: none; }
.embudo-resultado.activo { display: block; animation: embudoEntra 0.4s var(--ease); }
.embudo-resultado .section-title { margin: 1.25rem 0 1rem; }

.embudo-sello {
  display: inline-block;
  padding: 0.375rem 0.875rem;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.embudo-sello-ok {
  color: var(--gold);
  border: 1px solid var(--border-strong);
  background: rgba(201, 169, 97, 0.08);
}

.embudo-sello-no {
  color: var(--text-dim);
  border: 1px solid var(--border);
}

.embudo-motivo {
  color: var(--text-muted);
  font-size: 1.0625rem;
  line-height: 1.7;
  padding-left: 1.25rem;
  border-left: 2px solid var(--gold);
}

.embudo-cierre {
  margin: 1.75rem 0 2rem;
  color: var(--text-dim);
  font-size: 0.9375rem;
}

.embudo-resultado .consulta-form { margin-top: 2rem; }

.btn-enviar:disabled {
  opacity: 0.45;
  cursor: wait;
  transform: none;
}

/* Trampa antirrobots: fuera de pantalla, nunca oculta con display:none,
   porque algunos robots ignoran los campos ocultos de esa forma. */
.campo-trampa {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.campo-error {
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: #E0876B;
}

.consulta-form .con-error { border-color: #E0876B; }

.embudo-enviado { animation: embudoEntra 0.4s var(--ease); }
.embudo-enviado .section-title { margin: 1.25rem 0 1rem; }
.embudo-enviado .embudo-lead { margin-bottom: 2.5rem; }


.embudo-volver-inicio {
  display: inline-block;
  margin-top: 2rem;
  font-size: 0.875rem;
  color: var(--text-dim);
  transition: color 0.25s var(--ease);
}

.embudo-volver-inicio::before { content: '\2190'; margin-right: 0.5rem; }
.embudo-volver-inicio:hover { color: var(--gold); }

/* La aclaración de que nada se envía a un servidor no es un descargo
   legal: es el argumento de venta de un estudio que hace datos. */
.embudo-privacidad {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--text-dim);
}

.embudo-privacidad svg { flex: none; color: var(--gold); margin-top: 2px; }
.embudo-privacidad a { color: var(--gold); overflow-wrap: anywhere; }

@media (max-width: 560px) {
  .embudo-opcion { padding: 1rem 1.125rem; font-size: 0.9375rem; }
}

/* Formulario de consulta ===================== */

.section-consulta {
  padding-top: calc(var(--nav-height) + clamp(2.5rem, 7vw, 4.5rem));
}

.consulta-grid {
  display: grid;
  grid-template-columns: minmax(280px, 380px) 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
  max-width: 1140px;
}

.consulta-info .section-title { margin-bottom: 1.25rem; }

.consulta-lead {
  color: var(--text-muted);
  font-size: 1.0625rem;
  line-height: 1.7;
}

.consulta-datos {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
}

.consulta-datos li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  color: var(--text-muted);
  font-size: 0.875rem;
  line-height: 1.6;
}

.consulta-datos svg { flex: none; color: var(--gold); margin-top: 2px; }

.consulta-alt {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
  font-size: 0.9375rem;
  color: var(--text-dim);
}

.consulta-alt a {
  color: var(--gold);
  border-bottom: 1px solid var(--border-strong);
  overflow-wrap: anywhere;
}

/* --- El formulario --- */

.consulta-form {
  background: var(--black-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 4vw, 2.75rem);
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.campo-fila {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

.campo { display: block; border: none; }

.campo label,
.campo legend {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 0.5rem;
  padding: 0;
}

.req { color: var(--gold); }

.opt {
  color: var(--text-dim);
  font-weight: 400;
  font-size: 0.8125rem;
  text-transform: lowercase;
}

.campo-ayuda {
  font-size: 0.8125rem;
  color: var(--text-dim);
  line-height: 1.5;
  margin-bottom: 0.625rem;
}

.consulta-form input[type="text"],
.consulta-form input[type="email"],
.consulta-form input[type="tel"],
.consulta-form select,
.consulta-form textarea {
  width: 100%;
  padding: 0.75rem 0.875rem;
  background: var(--black);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  color: var(--text);
  /* 16px evita que iOS haga zoom al enfocar el campo. */
  font: 400 16px/1.5 var(--font-sans);
  transition: border-color 0.25s var(--ease);
}

.consulta-form textarea { resize: vertical; min-height: 160px; }

.consulta-form input:focus,
.consulta-form select:focus,
.consulta-form textarea:focus {
  outline: none;
  border-color: var(--gold);
}

.consulta-form select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%),
                    linear-gradient(135deg, var(--gold) 50%, transparent 50%);
  background-position: calc(100% - 18px) center, calc(100% - 13px) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 2.5rem;
}

/* Opciones en forma de pastilla: se tocan mejor que una casilla suelta. */
.opciones { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.opcion {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0.5rem 0.875rem;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease), background 0.25s var(--ease);
}

.opcion input { accent-color: var(--gold); margin: 0; }
.opcion:hover { border-color: var(--gold); color: var(--text); }
.opcion:has(input:checked) {
  border-color: var(--gold);
  color: var(--text);
  background: rgba(201, 169, 97, 0.08);
}

.campo-contador {
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  color: var(--text-dim);
}

.campo-contador.ok { color: var(--gold); }

.acepto {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 1.55;
  cursor: pointer;
}

.acepto input { accent-color: var(--gold); margin-top: 3px; flex: none; }
.acepto a { color: var(--gold); border-bottom: 1px solid var(--border-strong); }

.btn-enviar { align-self: flex-start; }

.consulta-nota {
  font-size: 0.8125rem;
  font-style: italic;
  color: var(--text-dim);
}

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

@media (max-width: 560px) {
  .campo-fila { grid-template-columns: 1fr; }
  .btn-enviar { align-self: stretch; justify-content: center; }
}

/* Cookie banner ============================== */
.cookie-banner {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%) translateY(140%);
  z-index: 150;
  width: calc(100% - 2rem);
  max-width: 820px;
  background: rgba(18, 17, 16, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(201, 169, 97, 0.05);
  transition: transform 0.7s var(--ease), opacity 0.5s var(--ease);
  opacity: 0;
}

.cookie-banner.visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

.cookie-banner[hidden] { display: none; }

.cookie-banner-inner {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.cookie-icon {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  background: rgba(201, 169, 97, 0.04);
}

.cookie-content {
  flex: 1;
  min-width: 0;
}

.cookie-title {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  color: var(--text);
  margin: 0 0 0.15rem;
  line-height: 1.1;
}

.cookie-text {
  color: var(--text-muted);
  font-size: 13.5px;
  line-height: 1.5;
  margin: 0;
}

.cookie-link {
  color: var(--gold);
  border-bottom: 1px solid var(--border-strong);
  padding: 0;
  font: inherit;
  font-size: inherit;
  cursor: pointer;
  transition: border-color 0.25s var(--ease);
}

.cookie-link:hover { border-bottom-color: var(--gold); }

.cookie-actions {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
}

.btn-sm { padding: 0.65rem 1.15rem; font-size: 13px; }

/* Animaciones reveal ========================= */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.hero .reveal:nth-child(1) { transition-delay: 0.05s; }
.hero .reveal:nth-child(2) { transition-delay: 0.15s; }
.hero .reveal:nth-child(3) { transition-delay: 0.28s; }
.hero .reveal:nth-child(4) { transition-delay: 0.4s; }

.services-grid .reveal:nth-child(1) { transition-delay: 0.05s; }
.services-grid .reveal:nth-child(2) { transition-delay: 0.15s; }
.services-grid .reveal:nth-child(3) { transition-delay: 0.25s; }
.services-grid .reveal:nth-child(4) { transition-delay: 0.35s; }

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

/* Responsive ================================= */
@media (max-width: 960px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }

  .about-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .stats {
    padding-left: 0;
    border-left: none;
    padding-top: 2rem;
    border-top: 1px solid var(--border);
    flex-direction: row;
    gap: 2rem;
    flex-wrap: wrap;
  }

  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }

  .team-grid { grid-template-columns: 1fr; }

  /* Con tres tarjetas de contacto, este ancho da para dos columnas y
     media: la tercera quedaba huérfana abajo. Se apilan. */
  .contact-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  /* En celular sí puede partirse: no hay ancho para sostener la línea */
  .hero-title .l2 { white-space: normal; }

  .nav-links {
    position: fixed;
    top: var(--nav-height);
    left: 0;
    right: 0;
    flex-direction: column;
    background: rgba(10, 9, 8, 0.96);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    padding: 2rem 1.5rem;
    gap: 0.5rem;
    border-bottom: 1px solid var(--border);
    transform: translateY(-110%);
    transition: transform 0.35s var(--ease);
    margin: 0;
  }

  .nav-links.open { transform: translateY(0); }

  .nav-links li { width: 100%; }
  .nav-links a {
    display: block;
    padding: 0.9rem 0.5rem;
    font-size: 16px;
    color: var(--text);
    border-bottom: 1px solid var(--border);
  }
  .nav-links a::after { display: none; }

  .nav-toggle { display: flex; }

  .hero { min-height: auto; padding-top: calc(var(--nav-height) + 2rem); }
  .hero-title { font-size: clamp(2.25rem, 9vw, 3.5rem); }

  .services-grid { grid-template-columns: 1fr; }

  .partner-card {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 0;
    text-align: center;
  }
  .partner-photo {
    width: 100%;
    height: 280px;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  .partner-name { font-size: 1.5rem; }
  .partner-info { text-align: center; padding: 1.5rem; }
  .partner-namerow { justify-content: center; }
  .partner-license { margin-left: 0; }
  .partner-specialty { justify-content: center; }
  .partner-bio { text-align: left; }

  .contact-grid { grid-template-columns: 1fr; }
  .contact-card { padding: 2rem; }
  .contact-arrow { top: 2rem; right: 2rem; }

  .stats { flex-direction: column; }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .footer-brand { grid-column: auto; }


  .cookie-banner { padding: 1rem; bottom: 0.75rem; }
  .cookie-banner-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 0.875rem;
    text-align: left;
  }
  .cookie-icon { display: none; }
  .cookie-actions { flex-direction: row; }
  .cookie-actions .btn { flex: 1; }

  .team-wrap { margin-top: 4rem; padding-top: 3rem; }
  .team-card {
    flex-direction: column;
    gap: 1.25rem;
    padding: 1.75rem;
  }
  .team-photo { width: 100px; height: 100px; }
}

@media (max-width: 480px) {
  .logo-text { font-size: 0.95rem; }
  .btn { padding: 0.85rem 1.3rem; }
  .section-title { font-size: 1.875rem; }
}
/* ============================================
   TEMA CLARO
   Se activa con data-theme="light" en <html>.
   Solo cambian colores: ni una regla de layout.
   ============================================ */
:root[data-theme="light"] {
  --black:        #F7F4ED;
  --black-soft:   #F2EEE4;
  --black-card:   #FFFFFF;

  /* El #C9A961 sobre papel da 2:1 de contraste: ilegible en
     texto chico. En claro el acento es un dorado más profundo. */
  --gold:         #8A7344;
  --gold-bright:  #6F5B34;
  --gold-deep:    #C9A961;

  --text:         #16130F;
  --text-muted:   #5B554B;
  --text-dim:     #8B8478;

  --border:       rgba(22, 19, 15, 0.10);
  --border-strong:rgba(138, 115, 68, 0.32);
}

/* Reglas que tenían el negro escrito a mano */
:root[data-theme="light"] .navbar.scrolled { background: rgba(247, 244, 237, 0.85); }

:root[data-theme="light"] .team-card:hover,
:root[data-theme="light"] .partner-card:hover {
  background: linear-gradient(180deg, transparent 70%, rgba(138, 115, 68, 0.06) 100%);
}


/* La luz del hero sobre papel hay que subirla o desaparece */
:root[data-theme="light"] .hero::before {
  background: radial-gradient(circle, rgba(201, 169, 97, 0.30) 0%, transparent 70%);
}

:root[data-theme="light"] .hero::after {
  background: radial-gradient(
    560px circle at var(--mx, 50%) var(--my, 45%),
    rgba(138, 115, 68, 0.13) 0%,
    rgba(138, 115, 68, 0.05) 32%,
    transparent 62%
  );
}

/* Papel sobre dorado profundo */
:root[data-theme="light"] .btn-primary,
:root[data-theme="light"] .logo-mark,

:root[data-theme="light"] .partner-photo img { filter: contrast(0.96) saturate(0.95); }

/* Botón de tema ============================== */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: var(--text-dim);
  transition: color 0.25s var(--ease);
}

.theme-toggle:hover { color: var(--gold); }

.theme-toggle svg { width: 16px; height: 16px; }

.theme-toggle .ico-luna { display: none; }
:root[data-theme="light"] .theme-toggle .ico-sol  { display: none; }
:root[data-theme="light"] .theme-toggle .ico-luna { display: block; }

/* El cambio de tema no debe ser un parpadeo seco */
body,
.service-card,
.partner-card,
.contact-card,
.navbar { transition: background-color 0.3s var(--ease), color 0.3s var(--ease); }

@media (max-width: 960px) {
  :root[data-theme="light"] .nav-links { background: rgba(247, 244, 237, 0.97); }
}

/* ============================================
   AJUSTES DE MOBILE
   ============================================ */

/* Sin esto, al entrar por /#servicios la sección queda tapada
   por la barra de navegación, que es fija. */
section[id] { scroll-margin-top: calc(var(--nav-height) + 8px); }

/* En móvil, 100vh cuenta la barra del navegador y deja el hero
   cortado. svh mide el alto que de verdad se ve. */
@supports (min-height: 100svh) {
  .hero { min-height: 100svh; }
}

@media (max-width: 760px) {
  /* Respeta el notch y las esquinas redondeadas. */
  .container {
    padding-left: max(1.25rem, env(safe-area-inset-left));
    padding-right: max(1.25rem, env(safe-area-inset-right));
  }

  .cookie-banner { padding-bottom: max(1rem, env(safe-area-inset-bottom)); }

  /* Área táctil mínima de 44px: por debajo de eso se falla el toque. */
  .nav-toggle,
  .theme-toggle { width: 44px; height: 44px; }

  /* El resaltado azul del navegador rompe la paleta. */
  a, button { -webkit-tap-highlight-color: rgba(201, 169, 97, 0.18); }

  /* Un mail largo no puede desbordar la tarjeta. */
  .contact-value { overflow-wrap: anywhere; }

  .legal-nav {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  .legal-nav-home { margin-left: 0; }
}

@media (max-width: 480px) {
  /* Botones a lo ancho: más fáciles de acertar con el pulgar. */
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn { justify-content: center; }
}