/* =========================================================
   YDR Soluciones Jurídicas — estilos del sitio
   Paleta: tinta (negro cálido), dorado y papel (beige).
   ========================================================= */

:root{
  --ink:#15120E;
  --ink-2:#1E1913;
  --ink-3:#2A231A;
  --ink-line:rgba(198,161,91,0.22);
  --paper:#F6F1E6;
  --paper-2:#EEE5D2;
  --paper-card:#FBF8F1;
  --paper-line:rgba(34,28,19,0.14);
  --gold:#C6A15B;
  --gold-soft:#DCC28C;
  --gold-dark:#7D6230;
  --text-ink:#F3EEE1;
  --text-ink-muted:rgba(243,238,225,0.68);
  --text-paper:#221C13;
  --text-paper-muted:#6E6250;
  --wa:#1FAF55;
  --error:#E39A7E;
  --max:1160px;
  --radius:4px;
  --header-h:72px;
  --serif:'Fraunces', Georgia, 'Times New Roman', serif;
  --sans:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --ease-salida:cubic-bezier(.16, 1, .3, 1);
  --ease-cortina:cubic-bezier(.77, 0, .18, 1);
  --ease-rebote:cubic-bezier(.34, 1.56, .64, 1);
}

/* ---------- Base ---------- */
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-padding-top:calc(var(--header-h) + 16px); }
@media (prefers-reduced-motion:no-preference){ html{ scroll-behavior:smooth; } }
body{
  margin:0;
  background:var(--paper);
  color:var(--text-paper);
  font-family:var(--sans);
  font-size:1rem;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{ font-family:var(--serif); font-weight:500; line-height:1.18; margin:0; }
p{ margin:0; }
a{ color:inherit; }
img,svg{ display:block; max-width:100%; }
[hidden]{ display:none !important; }
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.saltar{
  position:absolute; left:-9999px; top:12px; z-index:100;
  background:var(--gold); color:var(--ink); padding:10px 16px;
  font-weight:600; text-decoration:none; border-radius:var(--radius);
}
.saltar:focus{ left:16px; }

.icono{
  width:1.25em; height:1.25em; flex:none;
  fill:none; stroke:currentColor; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round;
}

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

/* ---------- Encabezado ---------- */
header.site{
  position:sticky; top:0; z-index:50;
  min-height:var(--header-h);
  background:rgba(21,18,14,0.95);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--ink-line);
}
.nav{
  max-width:var(--max); margin:0 auto; padding:0 32px;
  min-height:var(--header-h);
  display:flex; align-items:center; gap:32px;
}
.marca{
  display:flex; flex-direction:column;
  text-decoration:none; line-height:1.15;
  margin-right:auto;
}
.marca-nombre{
  font-family:var(--serif); font-style:italic; font-weight:500;
  font-size:1.22rem; color:var(--text-ink);
}
.marca-firma{
  margin-top:4px;
  font-size:0.66rem; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--gold);
}
.nav-panel{ display:flex; align-items:center; gap:28px; }
.nav-links{ display:flex; gap:24px; list-style:none; margin:0; padding:0; }
.nav-links a{
  position:relative; display:block; padding:6px 0;
  color:var(--text-ink-muted); text-decoration:none; font-size:0.9rem;
  transition:color .2s ease;
}
.nav-links a:hover{ color:var(--gold-soft); }
.nav-links a[aria-current="page"]{ color:var(--text-ink); }
/* Subrayado que crece desde la izquierda al pasar el mouse */
@media (min-width: 1061px){
  .nav-links a::after{
    content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
    background:var(--gold);
    transform:scaleX(0); transform-origin:right;
    transition:transform .45s var(--ease-salida);
  }
  .nav-links a:hover::after{ transform:scaleX(1); transform-origin:left; }
  .nav-links a[aria-current="page"]::after{ transform:scaleX(1); }
}
.nav-links .solo-movil{ display:none; }
.nav-boton{
  display:none;
  width:44px; height:44px; padding:0;
  align-items:center; justify-content:center;
  background:transparent; color:var(--text-ink);
  border:1px solid var(--ink-line); border-radius:var(--radius);
  cursor:pointer; font-size:1.2rem;
}
.nav-boton .cerrar{ display:none; }
header.site.abierto .nav-boton .abrir{ display:none; }
header.site.abierto .nav-boton .cerrar{ display:block; }

/* ---------- Botones y enlaces ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 24px;
  border:1px solid transparent; border-radius:var(--radius);
  font:600 0.95rem/1.2 var(--sans);
  text-decoration:none; cursor:pointer;
  transition:background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.btn .icono{ width:1.15em; height:1.15em; }
.btn-primario{ background:var(--gold); color:var(--ink); }
.btn-primario:hover{ background:var(--gold-soft); transform:translateY(-1px); }
.btn-borde{ border-color:var(--ink-line); color:var(--text-ink); background:transparent; }
.btn-borde:hover{ border-color:var(--gold); color:var(--gold-soft); }
.btn-oscuro{ background:var(--ink); color:var(--text-ink); }
.btn-oscuro:hover{ background:var(--ink-3); transform:translateY(-1px); }
.btn-borde-claro{ border-color:rgba(34,28,19,0.28); color:var(--text-paper); background:transparent; }
.btn-borde-claro:hover{ border-color:var(--gold-dark); color:var(--gold-dark); }
.btn-sm{ padding:10px 16px; font-size:0.86rem; }
.btn-bloque{ width:100%; }

.enlace-flecha{
  display:inline-flex; align-items:center; gap:8px;
  font-weight:600; font-size:0.92rem;
  color:var(--gold-dark); text-decoration:none;
  transition:gap .2s ease;
}
.enlace-flecha:hover{ gap:12px; }
.oscuro .enlace-flecha{ color:var(--gold-soft); }

.acciones{ display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; }

/* ---------- Títulos de sección ---------- */
.eyebrow{
  display:flex; align-items:center; gap:12px;
  margin-bottom:18px;
  font-size:0.78rem; font-weight:600; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--gold-dark);
}
.eyebrow::before{ content:""; width:28px; height:1px; background:currentColor; }
.hero .eyebrow, .page-hero .eyebrow, .oscuro .eyebrow{ color:var(--gold-soft); }

.lead{
  margin-top:22px; max-width:54ch;
  font-size:1.1rem; line-height:1.7;
  color:var(--text-paper-muted);
}
.hero .lead, .page-hero .lead, .oscuro .lead{ color:var(--text-ink-muted); }

/* ---------- Portada (inicio) ---------- */
.hero, .page-hero{
  position:relative; overflow:hidden;
  background:var(--ink); color:var(--text-ink);
}
.hero::before, .page-hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(640px 420px at 82% 28%, rgba(198,161,91,0.12), transparent 70%);
}
.hero{ padding:88px 0 96px; }
.hero .wrap{
  position:relative;
  display:grid; grid-template-columns:1.15fr 0.85fr; gap:56px; align-items:center;
}
.hero h1{ font-size:clamp(2.2rem, 4.4vw, 3.5rem); max-width:15ch; }

.cifras{
  display:grid; grid-template-columns:repeat(3, 1fr);
  margin-top:48px; padding-top:22px;
  border-top:1px solid var(--ink-line);
}
.cifras > div{ padding:0 16px; border-left:1px solid var(--ink-line); }
.cifras > div:first-child{ padding-left:0; border-left:none; }
.cifras strong{
  display:block;
  font-family:var(--serif); font-size:1.75rem; font-weight:500; line-height:1.1;
  color:var(--gold-soft);
}
.cifras span{ display:block; margin-top:6px; font-size:0.82rem; line-height:1.4; color:var(--text-ink-muted); }
.cifras.claro{ border-top-color:var(--paper-line); }
.cifras.claro > div{ border-left-color:var(--paper-line); }
.cifras.claro strong{ color:var(--gold-dark); }
.cifras.claro span{ color:var(--text-paper-muted); }

.retrato{
  position:relative;
  width:100%; max-width:400px; margin-left:auto;
  aspect-ratio:3 / 4;
  border:1px solid var(--ink-line);
  border-radius:50% 50% 6px 6px / 38% 38% 6px 6px;
  background:linear-gradient(180deg, rgba(198,161,91,0.20), rgba(198,161,91,0.03) 75%);
  overflow:hidden;
}
.retrato img{ width:100%; height:100%; object-fit:cover; object-position:center bottom; }
.retrato.claro{ border-color:rgba(125,98,48,0.35); background:linear-gradient(180deg, rgba(198,161,91,0.30), rgba(198,161,91,0.08) 75%); }

/* ---------- Encabezado de páginas internas ---------- */
.page-hero{ padding:56px 0 72px; }
.page-hero .wrap{ position:relative; }
.page-hero h1{ font-size:clamp(2rem, 4vw, 3.1rem); max-width:22ch; }

.migas{
  display:flex; flex-wrap:wrap; gap:8px;
  list-style:none; margin:0 0 32px; padding:0;
  font-size:0.82rem; color:var(--text-ink-muted);
}
.migas li + li::before{ content:"/"; margin-right:8px; color:var(--gold); opacity:0.7; }
.migas a{ text-decoration:none; }
.migas a:hover{ color:var(--gold-soft); }
.migas [aria-current="page"]{ color:var(--text-ink); }

/* ---------- Secciones ---------- */
/* overflow-x: clip evita que lo que entra animado desde los lados ensanche la página (y no afecta los elementos fijos) */
.seccion{ padding:96px 0; overflow-x:clip; }
.seccion.alterna{ background:var(--paper-2); }
.seccion.oscuro{ background:var(--ink); color:var(--text-ink); }
.seccion.compacta{ padding:72px 0; }

.seccion-cabeza{
  display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:end;
  margin-bottom:52px;
}
.seccion-cabeza h2, .titulo-seccion{ font-size:clamp(1.8rem, 3.2vw, 2.5rem); }
.seccion-cabeza p{ color:var(--text-paper-muted); line-height:1.65; max-width:46ch; }
.oscuro .seccion-cabeza p{ color:var(--text-ink-muted); }
.seccion-cabeza.sola{ grid-template-columns:1fr; }
.seccion-pie{ margin-top:40px; }

/* ---------- Tarjetas de áreas ---------- */
.tarjetas{ display:grid; grid-template-columns:repeat(4, 1fr); gap:20px; }
.tarjeta{
  display:flex; flex-direction:column; gap:14px;
  padding:30px 26px;
  background:var(--paper-card);
  border:1px solid var(--paper-line); border-radius:var(--radius);
  text-decoration:none;
  transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
a.tarjeta:hover{
  border-color:var(--gold);
  transform:translateY(-3px);
  box-shadow:0 16px 32px -20px rgba(34,28,19,0.45);
}
.tarjeta h3{ font-size:1.25rem; }
.tarjeta p{ color:var(--text-paper-muted); font-size:0.95rem; }
.tarjeta .enlace-flecha{ margin-top:auto; padding-top:6px; }

.icono-caja{
  display:grid; place-items:center; flex:none;
  width:48px; height:48px;
  border:1px solid var(--gold); border-radius:50%;
  color:var(--gold-dark); font-size:1.3rem;
  transition:transform .45s var(--ease-rebote), background-color .3s ease;
}
.oscuro .icono-caja, .formulario .icono-caja{ color:var(--gold-soft); }
a.tarjeta:hover .icono-caja{ transform:rotate(-12deg) scale(1.08); background-color:rgba(198,161,91,0.14); }

/* Tarjetas grandes (página de servicios) */
.areas{ display:grid; grid-template-columns:repeat(2, 1fr); gap:24px; }
.area{
  display:flex; flex-direction:column;
  padding:40px 36px;
  background:var(--paper-card);
  border:1px solid var(--paper-line); border-radius:var(--radius);
}
.area-cabeza{ display:flex; justify-content:space-between; align-items:center; margin-bottom:22px; }
.area-num{ font-family:var(--serif); font-style:italic; font-size:1.4rem; color:var(--gold-dark); }
.area h2{ font-size:1.6rem; }
.area > p{ margin-top:12px; color:var(--text-paper-muted); }
.area .btn{ margin-top:auto; align-self:flex-start; }
.area .lista-guion{ margin:20px 0 28px; }

.lista-guion{ list-style:none; margin:0; padding:0; color:var(--text-paper-muted); font-size:0.96rem; }
.lista-guion li{ position:relative; padding-left:18px; margin-bottom:8px; }
.lista-guion li::before{ content:"—"; position:absolute; left:0; color:var(--gold-dark); }

/* ---------- Pasos ---------- */
.pasos{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:32px;
  list-style:none; margin:0; padding:0;
}
.paso{ padding-top:24px; border-top:1px solid var(--paper-line); }
.paso-num{ font-family:var(--serif); font-style:italic; font-size:2.2rem; line-height:1; color:var(--gold-dark); }
.paso h3{ margin-top:16px; font-size:1.15rem; }
.paso p{ margin-top:8px; color:var(--text-paper-muted); font-size:0.95rem; }
.oscuro .paso{ border-top-color:var(--ink-line); }
.oscuro .paso-num{ color:var(--gold-soft); }
.oscuro .paso p{ color:var(--text-ink-muted); }

/* ---------- Bloque dividido (texto + imagen) ---------- */
.dividido{ display:grid; grid-template-columns:0.8fr 1.2fr; gap:72px; align-items:center; }
.dividido .retrato{ margin:0; }
.cita{
  font-family:var(--serif); font-style:italic;
  font-size:1.3rem; line-height:1.55;
}
.texto p + p{ margin-top:16px; }
.texto p{ color:var(--text-paper-muted); line-height:1.75; }
.texto .cita{ color:var(--text-paper); }

/* ---------- Preguntas frecuentes ---------- */
.faq-lista{ border-top:1px solid var(--paper-line); }
.faq-item{ border-bottom:1px solid var(--paper-line); }
.faq-item summary{
  position:relative;
  padding:22px 48px 22px 0;
  list-style:none; cursor:pointer;
  font-family:var(--serif); font-weight:500; font-size:1.1rem; line-height:1.4;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:"+";
  position:absolute; right:6px; top:50%;
  transform:translateY(-50%);
  font-family:var(--sans); font-size:1.5rem; font-weight:300; color:var(--gold-dark);
  transition:transform .2s ease;
}
.faq-item[open] summary::after{ transform:translateY(-50%) rotate(45deg); }
.faq-item summary:hover{ color:var(--gold-dark); }
.faq-respuesta{ padding:0 0 26px; max-width:74ch; color:var(--text-paper-muted); line-height:1.75; }
.faq-respuesta p + p, .faq-respuesta p + ul, .faq-respuesta ul + p, .faq-respuesta .tabla-scroll + p{ margin-top:12px; }
.faq-respuesta ul{ list-style:none; margin:12px 0 0; padding:0; }
.faq-respuesta li{ position:relative; padding-left:18px; margin-bottom:6px; }
.faq-respuesta li::before{ content:"—"; position:absolute; left:0; color:var(--gold-dark); }
.faq-respuesta strong{ color:var(--text-paper); font-weight:600; }

.tabla-scroll{ overflow-x:auto; margin-top:12px; }
.faq-tabla{ width:100%; min-width:520px; border-collapse:collapse; font-size:0.9rem; }
.faq-tabla th, .faq-tabla td{ padding:10px 12px; border:1px solid var(--paper-line); text-align:left; vertical-align:top; }
.faq-tabla th{ background:var(--paper-2); color:var(--gold-dark); font-weight:600; font-size:0.84rem; }

.faq-herramientas{ display:flex; flex-wrap:wrap; gap:16px; align-items:center; justify-content:space-between; margin-bottom:48px; }
.buscador{ position:relative; flex:1 1 320px; max-width:440px; }
.buscador .icono{ position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--text-paper-muted); }
.buscador input{
  width:100%; padding:13px 16px 13px 44px;
  background:var(--paper-card); color:var(--text-paper);
  border:1px solid var(--paper-line); border-radius:var(--radius);
  font:1rem var(--sans);
}
.buscador input:focus{ outline:none; border-color:var(--gold-dark); }
.chips{ display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:0; padding:0; }
.chips a{
  display:block; padding:8px 14px;
  border:1px solid var(--paper-line); border-radius:999px;
  font-size:0.85rem; text-decoration:none; color:var(--text-paper);
  background:var(--paper-card);
}
.chips a:hover{ border-color:var(--gold-dark); color:var(--gold-dark); }
.faq-grupo + .faq-grupo{ margin-top:72px; }
.faq-grupo-cabeza{ display:flex; align-items:center; gap:16px; margin-bottom:20px; }
.faq-grupo-cabeza h2{ font-size:clamp(1.5rem, 2.6vw, 1.9rem); }
.sin-resultados{ padding:32px; text-align:center; color:var(--text-paper-muted); border:1px dashed var(--paper-line); }
.nota-legal{ margin-top:64px; font-size:0.85rem; color:var(--text-paper-muted); max-width:80ch; }

/* ---------- Página de cada servicio ---------- */
.detalle{ display:grid; grid-template-columns:minmax(0, 1fr) 340px; gap:72px; align-items:start; }
.bloque + .bloque{ margin-top:72px; }
.bloque > h2{ font-size:clamp(1.6rem, 2.6vw, 2rem); margin-bottom:24px; }
.bloque > p.intro{ color:var(--text-paper-muted); margin:-8px 0 24px; max-width:60ch; }

.lista-check{ list-style:none; margin:0; padding:0; border-top:1px solid var(--paper-line); }
.lista-check li{ display:grid; grid-template-columns:28px 1fr; gap:14px; padding:22px 0; border-bottom:1px solid var(--paper-line); }
.lista-check .icono{ color:var(--gold-dark); margin-top:3px; }
.lista-check h3{ font-size:1.12rem; }
.lista-check p{ margin-top:4px; color:var(--text-paper-muted); font-size:0.96rem; }

.situaciones{ display:grid; grid-template-columns:1fr 1fr; gap:12px; list-style:none; margin:0; padding:0; }
.situaciones li{
  padding:14px 16px;
  background:var(--paper-card);
  border:1px solid var(--paper-line); border-left:3px solid var(--gold);
  border-radius:var(--radius);
  font-size:0.95rem;
}

.linea-pasos{ list-style:none; margin:0; padding:0; counter-reset:paso; }
.linea-pasos li{ position:relative; padding:0 0 28px 60px; counter-increment:paso; }
.linea-pasos li::before{
  content:counter(paso);
  position:absolute; left:0; top:0;
  width:40px; height:40px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--ink); color:var(--gold-soft);
  font-family:var(--serif); font-style:italic; font-size:1.1rem;
}
.linea-pasos li::after{
  content:""; position:absolute; left:19px; top:44px; bottom:4px;
  width:1px; background:var(--paper-line);
}
.linea-pasos li:last-child{ padding-bottom:0; }
.linea-pasos li:last-child::after{ display:none; }
.linea-pasos h3{ font-size:1.12rem; padding-top:8px; }
.linea-pasos p{ margin-top:4px; color:var(--text-paper-muted); font-size:0.96rem; }

.aviso{
  display:flex; gap:14px; align-items:flex-start;
  margin-top:28px; padding:18px 20px;
  background:rgba(198,161,91,0.13);
  border:1px solid rgba(198,161,91,0.5); border-radius:var(--radius);
  font-size:0.95rem;
}
.aviso .icono{ color:var(--gold-dark); margin-top:2px; font-size:1.1rem; }

.lateral{ position:sticky; top:calc(var(--header-h) + 24px); display:grid; gap:20px; }
.tarjeta-cta{ padding:32px 28px; background:var(--ink); color:var(--text-ink); border-radius:var(--radius); }
.tarjeta-cta h2{ font-size:1.4rem; }
.tarjeta-cta p{ margin-top:12px; color:var(--text-ink-muted); font-size:0.95rem; }
.tarjeta-cta .btn{ width:100%; margin-top:22px; }
.tarjeta-cta small{ display:block; margin-top:12px; color:var(--text-ink-muted); font-size:0.78rem; text-align:center; }
.otros{ padding:24px 26px; background:var(--paper-card); border:1px solid var(--paper-line); border-radius:var(--radius); }
.otros h2{ font-family:var(--sans); font-size:0.74rem; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:var(--gold-dark); margin-bottom:10px; }
.otros ul{ list-style:none; margin:0; padding:0; }
.otros a{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--paper-line); text-decoration:none; font-size:0.94rem; }
.otros li:last-child a{ border-bottom:none; }
.otros a:hover{ color:var(--gold-dark); }

/* ---------- Razones y compromisos ---------- */
.razones{
  display:grid; grid-template-columns:repeat(3, 1fr);
  border-top:1px solid var(--paper-line); border-left:1px solid var(--paper-line);
}
.razon{ padding:36px 30px; border-right:1px solid var(--paper-line); border-bottom:1px solid var(--paper-line); }
.razon h3{ margin-top:20px; font-size:1.2rem; }
.razon p{ margin-top:10px; color:var(--text-paper-muted); font-size:0.96rem; }

.compromisos{ display:grid; grid-template-columns:repeat(4, 1fr); gap:32px; }
.compromiso h3{ margin-top:18px; font-size:1.15rem; }
.compromiso p{ margin-top:8px; color:var(--text-ink-muted); font-size:0.95rem; }
.seccion:not(.oscuro) .compromiso p{ color:var(--text-paper-muted); }

/* ---------- Trayectoria y formación ---------- */
.trayectoria{ list-style:none; margin:0; padding:0; border-left:1px solid var(--gold); }
.trayectoria li{ position:relative; padding:0 0 40px 34px; }
.trayectoria li:last-child{ padding-bottom:0; }
.trayectoria li::before{
  content:""; position:absolute; left:-7px; top:5px;
  width:13px; height:13px; border-radius:50%;
  background:var(--paper); border:2px solid var(--gold);
}
.fecha{ font-size:0.78rem; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--gold-dark); }
.trayectoria h3{ margin-top:6px; font-size:1.25rem; }
.trayectoria .lugar{ font-size:0.92rem; color:var(--text-paper); margin-top:2px; }
.trayectoria p{ margin-top:8px; color:var(--text-paper-muted); font-size:0.96rem; max-width:62ch; }

.formacion{ display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; list-style:none; margin:0; padding:0; }
.formacion li{ padding:28px 26px; background:var(--paper-card); border:1px solid var(--paper-line); border-radius:var(--radius); }
.formacion h3{ margin-top:18px; font-size:1.12rem; }
.formacion p{ margin-top:6px; font-size:0.92rem; color:var(--text-paper-muted); }

/* ---------- Banda de llamado a la acción ---------- */
.cta-banda{ padding:80px 0; background:var(--ink); color:var(--text-ink); border-top:1px solid var(--ink-line); }
.cta-banda .wrap{ display:flex; justify-content:space-between; align-items:center; gap:40px; flex-wrap:wrap; }
.cta-banda h2{ font-size:clamp(1.7rem, 3vw, 2.3rem); max-width:22ch; }
.cta-banda p{ margin-top:14px; color:var(--text-ink-muted); max-width:52ch; }
.cta-banda .acciones{ margin-top:0; }

/* ---------- Contacto ---------- */
.contacto-grid{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:72px; align-items:start; }
.metodos{ list-style:none; margin:0; padding:0; border-top:1px solid var(--paper-line); }
.metodos li{ display:flex; gap:16px; align-items:center; padding:20px 0; border-bottom:1px solid var(--paper-line); }
.metodos .icono-caja{ width:44px; height:44px; font-size:1.15rem; }
.etiqueta{ display:block; font-size:0.74rem; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--text-paper-muted); }
.metodos a, .metodos .valor{ display:block; margin-top:2px; font-size:1.02rem; text-decoration:none; overflow-wrap:anywhere; }
.metodos a:hover{ color:var(--gold-dark); }

.siguiente{ margin-top:48px; }
.siguiente h2{ font-size:1.4rem; margin-bottom:20px; }

.formulario{
  padding:40px 36px;
  background:var(--ink); color:var(--text-ink);
  border-radius:var(--radius);
  color-scheme:dark;
}
.formulario h2{ font-size:1.6rem; }
.formulario > p{ margin-top:8px; color:var(--text-ink-muted); font-size:0.95rem; }
.campos{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:28px; }
.campo{ display:flex; flex-direction:column; gap:8px; }
.campo.ancho{ grid-column:1 / -1; }
.campo label{ font-size:0.82rem; color:var(--text-ink-muted); }
.campo input, .campo select, .campo textarea{
  width:100%; padding:12px 14px;
  background:rgba(255,255,255,0.04); color:var(--text-ink);
  border:1px solid var(--ink-line); border-radius:var(--radius);
  font:1rem var(--sans);
  transition:border-color .2s ease;
}
.campo select option{ background:var(--ink-2); color:var(--text-ink); }
.campo textarea{ min-height:140px; resize:vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus{ outline:none; border-color:var(--gold); }
.campo input:user-invalid, .campo textarea:user-invalid{ border-color:var(--error); }
.autorizacion{ display:flex; gap:12px; align-items:flex-start; margin-top:22px; font-size:0.86rem; color:var(--text-ink-muted); line-height:1.5; }
.autorizacion input{ width:18px; height:18px; margin-top:2px; accent-color:var(--gold); flex:none; }
.autorizacion a{ color:var(--gold-soft); }
.form-botones{ display:grid; grid-template-columns:1.4fr 1fr; gap:12px; margin-top:26px; }
.form-nota{ margin-top:14px; font-size:0.8rem; color:var(--text-ink-muted); }
.form-estado{ margin-top:14px; font-size:0.9rem; color:var(--gold-soft); }
.form-estado:empty{ display:none; }

/* ---------- Texto legal ---------- */
.texto-legal{ max-width:780px; }
.texto-legal h2{ margin:48px 0 14px; font-size:1.45rem; }
.texto-legal h2:first-child{ margin-top:0; }
.texto-legal p, .texto-legal li{ color:var(--text-paper-muted); line-height:1.75; }
.texto-legal p + p{ margin-top:12px; }
.texto-legal ul{ list-style:none; margin:12px 0 0; padding:0; }
.texto-legal li{ position:relative; padding-left:18px; margin-bottom:8px; }
.texto-legal li::before{ content:"—"; position:absolute; left:0; color:var(--gold-dark); }
.texto-legal strong{ color:var(--text-paper); }

/* ---------- Página no encontrada ---------- */
.no-encontrada{ min-height:60vh; display:flex; align-items:center; }
.no-encontrada .codigo{ font-family:var(--serif); font-style:italic; font-size:5rem; line-height:1; color:var(--gold-soft); }

/* ---------- Pie de página ---------- */
footer.site{ background:var(--ink); color:var(--text-ink-muted); border-top:1px solid var(--ink-line); padding-top:72px; }
.pie-grid{ display:grid; grid-template-columns:1.3fr 0.9fr 1fr 1.5fr; gap:48px; padding-bottom:56px; }
.pie-marca .marca{ margin-bottom:18px; }
.pie-marca p{ font-size:0.9rem; max-width:36ch; }
.pie-tp{ margin-top:14px; color:var(--gold-soft); font-size:0.82rem !important; }
.pie-titulo{ margin-bottom:16px; font-family:var(--sans); font-size:0.74rem; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:var(--gold); }
footer.site ul{ list-style:none; margin:0; padding:0; display:grid; gap:10px; font-size:0.9rem; }
footer.site a{ text-decoration:none; }
footer.site a:hover{ color:var(--gold-soft); }
.pie-contacto li{ display:flex; gap:10px; align-items:flex-start; overflow-wrap:anywhere; }
.pie-contacto .icono{ color:var(--gold); margin-top:2px; font-size:0.95rem; }
.pie-legal{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px 24px; padding:22px 32px; border-top:1px solid var(--ink-line); font-size:0.8rem; }
.pie-aviso{ padding-bottom:96px; font-size:0.76rem; opacity:0.8; }

/* ---------- Botón flotante de WhatsApp ---------- */
.wa-flotante{
  position:fixed; right:22px; bottom:22px; z-index:60;
  display:flex; align-items:center; gap:10px;
  height:56px; padding:0 22px 0 18px;
  background:var(--wa); color:#fff;
  border-radius:999px;
  font-weight:600; font-size:0.92rem; text-decoration:none;
  box-shadow:0 12px 28px -10px rgba(0,0,0,0.5);
  transition:transform .2s ease;
}
.wa-flotante:hover{ transform:translateY(-2px); }
.wa-flotante .icono{ width:26px; height:26px; stroke-width:1.8; }
.wa-flotante::before{
  content:""; position:absolute; inset:0;
  border:2px solid var(--wa); border-radius:inherit;
  opacity:0; pointer-events:none;
}

/* ---------- Cinta de temas en movimiento ---------- */
.cinta{
  overflow:hidden; padding:22px 0;
  background:var(--ink-2);
  border-top:1px solid var(--ink-line); border-bottom:1px solid var(--ink-line);
}
.cinta-pista{ display:flex; width:max-content; }
.cinta-grupo{ display:flex; align-items:center; flex:none; list-style:none; margin:0; padding:0; }
.cinta-grupo li{
  display:flex; align-items:center; white-space:nowrap;
  font-family:var(--serif); font-style:italic; font-size:clamp(1.15rem, 2vw, 1.5rem);
  color:var(--text-ink);
}
.cinta-grupo li::after{
  content:""; flex:none;
  width:7px; height:7px; margin:0 34px;
  background:var(--gold); transform:rotate(45deg);
}

/* =========================================================
   Animaciones y transiciones
   - Se desactivan si la persona pidió "reducir movimiento" en su equipo.
   - Nada queda oculto si el JavaScript no carga: la clase .animar la pone sitio.js.
   ========================================================= */

/* Transición suave al cambiar de página (Chrome, Edge y Safari recientes).
   El encabezado y el botón de WhatsApp se quedan quietos; el contenido se desvanece. */
@media (prefers-reduced-motion: no-preference){
  @view-transition{ navigation:auto; }
}
header.site{ view-transition-name:encabezado; }
.wa-flotante{ view-transition-name:boton-whatsapp; }
::view-transition-old(root){ animation:vt-salir .28s cubic-bezier(.4, 0, 1, 1) both; }
::view-transition-new(root){ animation:vt-entrar .6s var(--ease-salida) .08s both; }
@keyframes vt-salir{ to{ opacity:0; transform:translateY(-14px); } }
@keyframes vt-entrar{ from{ opacity:0; transform:translateY(22px); } }

/* Elementos que aparecen al llegar a ellos con el scroll (sitio.js les pone data-revelar) */
.animar [data-revelar]{
  transition:
    opacity .9s var(--ease-salida) var(--retraso, 0ms),
    transform .9s var(--ease-salida) var(--retraso, 0ms),
    clip-path 1.2s var(--ease-cortina) var(--retraso, 0ms);
}
.animar [data-revelar]:not(.revelado){ opacity:0; }
.animar [data-revelar="subir"]:not(.revelado){ transform:translateY(28px); }
.animar [data-revelar="izquierda"]:not(.revelado){ transform:translateX(-64px); }
.animar [data-revelar="derecha"]:not(.revelado){ transform:translateX(64px); }
/* Fotos: se descubren de abajo hacia arriba, como una cortina, mientras la imagen se acomoda */
.animar [data-revelar="cortina"]:not(.revelado){ opacity:1; clip-path:inset(100% 0 0 0); }
.animar [data-revelar="cortina"] img{ transition:scale 1.8s var(--ease-salida) var(--retraso, 0ms); }
.animar [data-revelar="cortina"]:not(.revelado) img{ scale:1.15; }
/* Íconos redondos: entran girando */
.animar [data-revelar] .icono-caja{
  transition:
    transform .9s var(--ease-rebote) calc(var(--retraso, 0ms) + 120ms),
    opacity .5s ease calc(var(--retraso, 0ms) + 120ms);
}
.animar [data-revelar]:not(.revelado) .icono-caja{ opacity:0; transform:scale(.4) rotate(-140deg); }

/* Foto de la portada: se mueve un poco más lento que la página al bajar (efecto de profundidad) */
@supports (animation-timeline: scroll()){
  .animar .hero .retrato img{
    transform:scale(1.1);
    animation:paralaje linear both;
    animation-timeline:scroll(root);
    animation-range:0 85vh;
  }
  @keyframes paralaje{ to{ translate:0 4.5%; } }
}

/* Brillo dorado de fondo que se mueve lentamente */
.animar .hero::before, .animar .page-hero::before{ animation:brillo 16s ease-in-out infinite alternate; }
@keyframes brillo{ to{ transform:translate(-6%, 4%) scale(1.08); } }

/* Cinta: avanza sin parar y se detiene al pasar el mouse */
.animar .cinta-pista{ animation:cinta 50s linear infinite; }
.cinta:hover .cinta-pista{ animation-play-state:paused; }
@keyframes cinta{ to{ transform:translateX(-50%); } }

/* Botón de WhatsApp: un "latido" suave cada pocos segundos para llamar la atención */
.animar .wa-flotante::before{ animation:latido 5s ease-out 2.5s infinite; }
@keyframes latido{
  0%{ opacity:.8; transform:scale(1); }
  45%, 100%{ opacity:0; transform:scale(1.35); }
}

/* Menú del celular: el panel baja y las opciones entran una tras otra */
.animar header.site.abierto .nav-panel{ animation:menu-abrir .35s var(--ease-salida); }
.animar header.site.abierto .nav-links li{ animation:menu-opcion .45s var(--ease-salida) both; animation-delay:calc(var(--i, 0) * 45ms + 60ms); }
@keyframes menu-abrir{ from{ opacity:0; transform:translateY(-10px); } }
@keyframes menu-opcion{ from{ opacity:0; transform:translateX(-14px); } }

@media print{
  .animar [data-revelar]{ opacity:1 !important; transform:none !important; clip-path:none !important; }
}

/* ---------- Adaptación a pantallas medianas y celulares ---------- */
@media (max-width: 1060px){
  .nav{ gap:16px; }
  .nav-boton{ display:inline-flex; }
  .nav-panel{
    display:none;
    position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:stretch; gap:0;
    padding:8px 32px 28px;
    background:var(--ink);
    border-bottom:1px solid var(--ink-line);
    max-height:calc(100vh - var(--header-h)); overflow-y:auto;
  }
  header.site.abierto .nav-panel{ display:flex; }
  .nav-links{ flex-direction:column; gap:0; }
  .nav-links .solo-movil{ display:block; }
  .nav-links a{ padding:15px 0; font-size:1rem; border-bottom:1px solid var(--ink-line); }
  .nav-links a[aria-current="page"]{ border-bottom-color:var(--ink-line); color:var(--gold-soft); }
  .nav-panel .btn{ margin-top:20px; padding:14px 24px; font-size:0.95rem; }
}

@media (max-width: 960px){
  .hero{ padding:40px 0 72px; }
  .hero .wrap{ grid-template-columns:1fr; gap:32px; }
  .hero .retrato{ order:-1; max-width:260px; margin:0 auto; }
  .seccion{ padding:72px 0; }
  .seccion-cabeza{ grid-template-columns:1fr; gap:16px; margin-bottom:40px; }
  .tarjetas{ grid-template-columns:repeat(2, 1fr); }
  .areas{ grid-template-columns:1fr; }
  .pasos{ grid-template-columns:repeat(2, 1fr); }
  .dividido{ grid-template-columns:1fr; gap:40px; }
  .dividido .retrato{ max-width:320px; margin:0 auto; }
  .detalle{ grid-template-columns:1fr; gap:56px; }
  .lateral{ position:static; }
  .razones{ grid-template-columns:repeat(2, 1fr); }
  .compromisos{ grid-template-columns:repeat(2, 1fr); }
  .formacion{ grid-template-columns:1fr; }
  .contacto-grid{ grid-template-columns:1fr; gap:56px; }
  .pie-grid{ grid-template-columns:1fr 1fr; }
  .cta-banda{ padding:64px 0; }
  .animar [data-revelar="izquierda"]:not(.revelado){ transform:translateX(-28px); }
  .animar [data-revelar="derecha"]:not(.revelado){ transform:translateX(28px); }
}

@media (max-width: 600px){
  :root{ --header-h:64px; }
  .wrap{ padding:0 20px; }
  .nav{ padding:0 20px; }
  .nav-panel{ padding:4px 20px 24px; }
  .marca-nombre{ font-size:1.08rem; }
  .marca-firma{ font-size:0.6rem; }
  .hero .retrato{ max-width:220px; }
  .cifras strong{ font-size:1.4rem; }
  .cifras span{ font-size:0.76rem; }
  .cifras > div{ padding:0 10px; }
  .acciones .btn{ flex:1 1 100%; }
  .page-hero{ padding:36px 0 52px; }
  .migas{ margin-bottom:24px; }
  .seccion{ padding:60px 0; }
  .tarjetas, .pasos, .situaciones, .razones, .compromisos{ grid-template-columns:1fr; }
  .area{ padding:30px 24px; }
  .area .btn{ align-self:stretch; }
  .campos{ grid-template-columns:1fr; }
  .form-botones{ grid-template-columns:1fr; }
  .formulario{ padding:30px 22px; }
  .pie-grid{ grid-template-columns:1fr; gap:36px; }
  .pie-legal{ padding:22px 20px; }
  .faq-item summary{ font-size:1.02rem; }
  .wa-flotante{ right:16px; bottom:16px; width:56px; padding:0; justify-content:center; }
  .wa-flotante .wa-texto{ display:none; }
}