/* Coordinadora Juridica — hoja de estilos del sitio estatico.
   Paleta de marca: negro + naranja (#E67E22). Replica el diseno aprobado. */

:root {
  --radius: 0.5rem;
  --background: oklch(1 0 0);
  --foreground: oklch(0.18 0.01 250);
  --card: oklch(1 0 0);
  --primary: oklch(0.19 0.02 258);
  --primary-foreground: oklch(0.985 0.005 250);
  --secondary: oklch(0.975 0.006 250);
  --muted: oklch(0.97 0.005 250);
  --muted-foreground: oklch(0.46 0.015 250);
  --accent: oklch(0.68 0.163 52);
  --gold: oklch(0.68 0.163 52);
  --gold-soft: oklch(0.76 0.14 55);
  --navy-deep: oklch(0.15 0.02 258);
  --border: oklch(0.91 0.012 250);
  --whatsapp: oklch(0.68 0.17 148);
  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display: "Playfair Display", ui-serif, Georgia, "Times New Roman", serif;
  --ancho: 72rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--sans);
  color: var(--foreground);
  background: var(--background);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.15; margin: 0; }
p { margin: 0 0 1rem; }

.contenedor { max-width: var(--ancho); margin: 0 auto; padding: 0 1.25rem; }
.estrecho { max-width: 56rem; }

/* ---------- Encabezado ---------- */
.cabecera {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.cabecera-fila { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-height: 4.25rem; padding: .5rem 0; }
.marca { display: flex; align-items: center; flex: none; text-decoration: none; }
.marca img { width: auto; height: 2rem; }
@media (min-width: 480px) { .marca img { height: 2.35rem; } }
/* Logo del pie, version para fondo oscuro */
.pie-logo { width: auto; height: 2.5rem; margin-bottom: 1rem; }
/* En pantallas muy pequenas el boton de WhatsApp se compacta para que la marca no se parta */
.cabecera-acciones .btn { padding: .6rem 1rem; font-size: .82rem; }
@media (min-width: 560px) { .cabecera-acciones .btn { padding: .8rem 1.35rem; font-size: .9rem; } }
.marca-punto { width: .55rem; height: .55rem; border-radius: 50%; background: var(--gold); flex: none; }
.menu { display: none; gap: 1.4rem; align-items: center; }
.menu a { text-decoration: none; font-size: .9rem; color: color-mix(in oklch, var(--foreground) 85%, transparent); transition: color .15s; }
.menu a:hover, .menu a[aria-current="page"] { color: var(--gold); }
.cabecera-acciones { display: flex; align-items: center; gap: .6rem; }
.menu-boton { display: inline-flex; background: none; border: 1px solid var(--border); border-radius: var(--radius); padding: .5rem .7rem; cursor: pointer; font-size: .85rem; }
@media (min-width: 900px) {
  .menu { display: flex; }
  .menu-boton { display: none; }
}
.menu-movil { display: none; border-top: 1px solid var(--border); padding: .75rem 0; }
.menu-movil.abierto { display: block; }
.menu-movil a { display: block; padding: .55rem 0; text-decoration: none; font-size: .95rem; }
@media (min-width: 900px) { .menu-movil, .menu-movil.abierto { display: none; } }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .8rem 1.35rem; border-radius: var(--radius); font-size: .9rem; font-weight: 600;
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
  transition: transform .15s, box-shadow .15s, background-color .15s;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,.10); }
.btn-wa { background: var(--whatsapp); color: #fff; }
.btn-tel { background: var(--gold); color: #fff; }
.btn-linea { background: transparent; border-color: var(--border); color: var(--primary); }
.btn-linea-claro { background: transparent; border-color: rgba(255,255,255,.35); color: #fff; }
.acciones { display: flex; flex-wrap: wrap; gap: .75rem; }

/* ---------- Secciones ---------- */
.seccion { padding: 4.5rem 0; }
/* El hero abre la pagina: menos aire arriba para que el mensaje se vea de
   inmediato, mas abajo para respirar antes de la siguiente seccion. */
.hero { padding: 3.25rem 0 4.5rem; }
@media (min-width: 950px) { .hero { padding: 4.5rem 0 6rem; } }
.seccion-oscura {
  background: var(--navy-deep);
  color: var(--primary-foreground);
  position: relative; overflow: hidden;
  background-image:
    radial-gradient(60rem 30rem at 75% 0%, color-mix(in oklch, var(--gold) 22%, transparent), transparent 60%),
    linear-gradient(0deg, var(--navy-deep), var(--navy-deep));
}
/* Seccion clara con profundidad: degradado sutil y un halo calido de marca */
.seccion-suave {
  position: relative;
  background:
    radial-gradient(48rem 24rem at 88% 0%, color-mix(in oklch, var(--gold) 6%, transparent), transparent 70%),
    linear-gradient(to bottom, var(--secondary), color-mix(in oklch, var(--secondary) 55%, var(--background)));
}
.kicker { font-size: .72rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); margin: 0 0 .5rem; }
.seccion-oscura .kicker { color: var(--gold-soft); }
.titulo { font-size: clamp(1.7rem, 1.2rem + 2vw, 2.6rem); }
.titulo-hero { font-size: clamp(2rem, 1.2rem + 3.2vw, 3.4rem); }
.raya { width: 3.5rem; height: 1px; background: var(--gold); margin: 1rem 0; }
.intro { max-width: 42rem; color: var(--muted-foreground); }
.seccion-oscura .intro { color: rgba(255,255,255,.85); }

/* ---------- Tarjetas ---------- */
.rejilla { display: grid; gap: 1.25rem; }
@media (min-width: 700px) { .rejilla-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 950px) { .rejilla-3 { grid-template-columns: repeat(3, 1fr); } }
.tarjeta {
  position: relative; overflow: hidden;
  background: var(--card); border: 1px solid var(--border); border-radius: 1rem;
  padding: 1.75rem;
  box-shadow: 0 1px 2px rgba(16,20,32,.04), 0 6px 16px -8px rgba(16,20,32,.08);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
/* Filo de acento que aparece al pasar el cursor: da vida sin ruido permanente */
.tarjeta::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: linear-gradient(to right, var(--gold), var(--gold-soft));
  transform: scaleX(0); transform-origin: left; transition: transform .28s ease;
}
.tarjeta:hover {
  transform: translateY(-3px);
  border-color: color-mix(in oklch, var(--gold) 28%, var(--border));
  box-shadow: 0 2px 4px rgba(16,20,32,.05), 0 16px 36px -12px rgba(16,20,32,.16);
}
.tarjeta:hover::before { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .tarjeta, .tarjeta::before { transition: none; }
  .tarjeta:hover { transform: none; }
}
.tarjeta h3 { font-size: 1.15rem; color: var(--primary); }
.tarjeta p { color: var(--muted-foreground); font-size: .93rem; margin-top: .75rem; }
/* Numeracion del proceso: el orden es informacion real (son etapas sucesivas) */
.num {
  display: inline-block; font-family: var(--display); font-size: 2.1rem;
  color: var(--gold); line-height: 1; letter-spacing: -.02em;
  padding-bottom: .35rem; border-bottom: 2px solid color-mix(in oklch, var(--gold) 30%, transparent);
}

/* ---------- Listas ---------- */
.lista-flecha { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .5rem; }
.lista-flecha li { font-size: .93rem; color: var(--muted-foreground); }
.lista-flecha li::before { content: "→"; color: var(--gold); margin-right: .5rem; }

/* ---------- Formulario ---------- */
.campo { margin-bottom: 1rem; }
.campo label { display: block; font-size: .9rem; font-weight: 500; margin-bottom: .35rem; }
.campo input, .campo textarea {
  width: 100%; padding: .65rem .8rem; font: inherit; font-size: .92rem;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--background);
}
.campo input:focus, .campo textarea:focus { outline: 2px solid color-mix(in oklch, var(--gold) 60%, transparent); outline-offset: 1px; }
.aviso { font-size: .8rem; color: var(--muted-foreground); }
.casilla {
  display: flex; align-items: flex-start; gap: .65rem; cursor: pointer;
  font-weight: 500; font-size: .92rem; padding: .85rem 1rem;
  border: 1px solid color-mix(in oklch, var(--gold) 35%, transparent);
  background: color-mix(in oklch, var(--gold) 7%, transparent);
  border-radius: var(--radius);
}
.casilla input { width: 1.05rem; height: 1.05rem; margin: .15rem 0 0; accent-color: var(--gold); flex: none; }

/* ---------- Pie ---------- */
.pie { background: var(--navy-deep); color: rgba(255,255,255,.82); padding: 3.5rem 0 2rem; font-size: .9rem; }
.pie-rejilla { display: grid; gap: 2rem; }
@media (min-width: 800px) { .pie-rejilla { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; } }
.pie h4 { font-family: var(--sans); font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-soft); margin: 0 0 .9rem; }
.pie ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .45rem; }
.pie a { color: rgba(255,255,255,.82); text-decoration: none; }
.pie a:hover { color: var(--gold-soft); text-decoration: underline; }
.pie-legal { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.12); font-size: .8rem; color: rgba(255,255,255,.6); }

/* ---------- Animacion de aparicion (CSS puro) ---------- */
.aparece { opacity: 0; transform: translateY(12px); animation: subir .6s ease-out forwards; }
.aparece-1 { animation-delay: .08s; }
.aparece-2 { animation-delay: .16s; }
.aparece-3 { animation-delay: .24s; }
@keyframes subir { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .aparece { animation: none; opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Ilustraciones e iconos ---------- */
/* Ilustracion decorativa de fondo: anclada al borde derecho, contenida en su
   seccion, sin empujar el contenido ni dominar la composicion. */
.ilustracion-fondo {
  position: absolute; right: -6%; top: 50%; transform: translateY(-50%);
  width: min(30rem, 42%); color: var(--gold); opacity: .10;
  pointer-events: none; display: none;
}
@media (min-width: 1100px) { .ilustracion-fondo { display: block; } }

/* Ilustracion visible dentro de una columna: con peso suficiente para leerse */
.ilustracion {
  width: 100%; max-width: 20rem; color: var(--gold); opacity: 1; margin: 0 auto;
  filter: drop-shadow(0 8px 24px color-mix(in oklch, var(--gold) 18%, transparent));
}
.ilustracion-chica { max-width: 13rem; }

/* Figura del dictamen en el hero: hoja realista con leve inclinacion, como un
   documento fotografiado sobre una mesa. Sombra profunda para destacar sobre
   el fondo oscuro del hero. Datos de ejemplo con formato "XXXX" (nunca datos
   de un caso real). */
.figura-doc-hero { margin: 0; text-align: center; position: relative; padding: 1.5rem; }
.doc-dictamen {
  width: 100%; max-width: 21rem; height: auto;
  filter: drop-shadow(0 24px 48px rgba(0,0,0,.45)) drop-shadow(0 4px 12px rgba(0,0,0,.3));
  opacity: 0;
  transform: rotate(-2deg);
  animation: docEntra .9s cubic-bezier(.2,.8,.2,1) .35s forwards;
}
@keyframes docEntra {
  0% { opacity: 0; transform: rotate(-8deg) translateY(30px) scale(.94); }
  60% { opacity: 1; transform: rotate(1deg) translateY(-4px) scale(1.01); }
  100% { opacity: 1; transform: rotate(-2deg) translateY(0) scale(1); }
}
.figura-doc-hero:hover .doc-dictamen { transform: rotate(0deg) translateY(-4px) scale(1.02); transition: transform .3s ease; }

/* El doblez de esquina ahora vive DENTRO del propio SVG del dictamen (ver
   plantillas/graficos.js e inicio.js), por lo que no necesita reglas de
   posicionamiento aparte: hereda la rotacion y el sistema de coordenadas del
   documento sin desfase. */

/* Simbolos de iluminacion (destellos) alrededor de la hoja, en vez de puntos
   simples: pequenas "estrellas" de cuatro puntas que titilan como brillos de
   luz, mas un halo suave y un anillo giratorio que enmarcan el documento sin
   competir con el, todo detras de la hoja (z-index bajo). Ornamental
   (aria-hidden). */
.doc-adorno { position: absolute; pointer-events: none; z-index: 0; }
.doc-adorno-halo {
  top: 50%; left: 50%; width: 20rem; height: 20rem;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in oklch, var(--gold) 22%, transparent) 0%, transparent 68%);
  animation: haloPulso 3.4s ease-in-out infinite;
}
.doc-adorno-anillo {
  top: 50%; left: 50%; width: 17.5rem; height: 17.5rem;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px dashed color-mix(in oklch, var(--gold-soft) 55%, transparent);
  animation: adornoGira 22s linear infinite;
}
/* Destello tipo "sparkle": una cruz de cuatro puntas dibujada con dos rombos
   superpuestos via clip-path, mas titileo de opacidad y escala. */
.doc-destello {
  width: 1.1rem; height: 1.1rem;
  background: var(--gold-soft);
  clip-path: polygon(50% 0%, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0% 50%, 38% 38%);
}
.doc-destello-1 { top: 6%; left: 4%; animation: destelloTitila 2.6s ease-in-out infinite; }
.doc-destello-2 {
  bottom: 12%; right: 0%; width: .8rem; height: .8rem; background: var(--gold);
  animation: destelloTitila 2.1s ease-in-out .5s infinite;
}
.doc-destello-3 {
  top: 40%; right: -1.5rem; width: .65rem; height: .65rem; background: var(--gold-soft);
  animation: destelloTitila 3.1s ease-in-out 1s infinite;
}
.doc-destello-4 {
  bottom: 32%; left: -1rem; width: .6rem; height: .6rem; background: var(--gold);
  animation: destelloTitila 2.4s ease-in-out .3s infinite;
}
@keyframes destelloTitila {
  0%, 100% { opacity: .25; transform: scale(.6) rotate(0deg); }
  50% { opacity: 1; transform: scale(1.15) rotate(25deg); }
}
@keyframes haloPulso {
  0%, 100% { opacity: .45; transform: translate(-50%, -50%) scale(.94); }
  50% { opacity: .85; transform: translate(-50%, -50%) scale(1.04); }
}
@keyframes adornoGira {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Resaltado pulsante sobre el campo clave (incapacidad medico legal), para
   dirigir la mirada al dato que sustenta "dice mas de lo que usted cree".
   Continuo y perceptible, no solo al cargar la pagina. */
.doc-resaltado {
  animation: docPulso 2.4s ease-in-out 1.2s infinite;
  transform-origin: center;
}
@keyframes docPulso {
  0%, 100% { opacity: .16; }
  50% { opacity: .55; }
}
.doc-marco-pulso {
  animation: docMarco 2.4s ease-in-out 1.2s infinite;
}
@keyframes docMarco {
  0%, 100% { stroke-opacity: .4; stroke-width: 1.2; }
  50% { stroke-opacity: 1; stroke-width: 1.8; }
}

.doc-envoltura {
  position: relative; z-index: 1; display: inline-block; overflow: hidden; border-radius: 4px;
}

.figura-doc-hero figcaption {
  margin-top: 1.1rem; font-size: .74rem; line-height: 1.5;
  color: rgba(255,255,255,.55); max-width: 21rem;
  margin-left: auto; margin-right: auto;
}
@media (prefers-reduced-motion: reduce) {
  .doc-dictamen { animation: none; opacity: 1; transform: rotate(-2deg); }
  .figura-doc-hero:hover .doc-dictamen { transition: none; transform: rotate(-2deg); }
  .doc-resaltado, .doc-marco-pulso { animation: none; opacity: .25; stroke-opacity: .6; }
  .doc-adorno { animation: none; }
}

/* Iconos pequenos */
.ico { width: 1.35rem; height: 1.35rem; flex: none; }
.icono-marco {
  display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%;
  border: 1px solid color-mix(in oklch, var(--gold) 40%, transparent);
  background: color-mix(in oklch, var(--gold) 10%, transparent);
  color: var(--gold); margin-bottom: 1rem;
}
.seccion-oscura .icono-marco { color: var(--gold-soft); }

/* Lista con iconos (perjuicios reclamables) */
.lista-iconos { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: .9rem; }
.lista-iconos li { display: flex; align-items: flex-start; gap: .85rem; font-size: .95rem; }
.lista-iconos .icono-marco { width: 2.1rem; height: 2.1rem; margin: 0; }
.lista-iconos .ico { width: 1.05rem; height: 1.05rem; }

/* Rejilla de fondo: textura sutil pero perceptible, sin ensuciar el texto */
.seccion-oscura::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(to bottom, #000 0%, transparent 75%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 75%);
}
.seccion-oscura > * { position: relative; z-index: 1; }

/* Filo luminoso al pie de las secciones oscuras */
.seccion-oscura::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(to right, transparent, color-mix(in oklch, var(--gold) 55%, transparent), transparent);
}

/* Panel translucido sobre fondo oscuro (tarjeta del hero) */
.panel-oscuro {
  position: relative; border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.045); backdrop-filter: blur(6px);
  border-radius: 1rem; padding: 1.75rem;
  box-shadow: 0 20px 60px -25px rgba(0,0,0,.6);
}
.panel-oscuro h2 { font-size: 1.4rem; }

/* Rejilla del hero: texto + panel */
.hero-rejilla { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 950px) { .hero-rejilla { grid-template-columns: 1.15fr 1fr; } }

/* Franja de credibilidad: datos verificables, sin promesas de resultado */
.franja {
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  background: var(--card);
}
.franja-rejilla {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem 1.5rem;
  padding: 2.5rem 0; text-align: center;
}
@media (min-width: 800px) { .franja-rejilla { grid-template-columns: repeat(4, 1fr); } }
/* Cada dato ocupa dos lineas fijas para que las cuatro columnas queden alineadas */
/* Se usa block con altura fija en vez de flex, para que los espacios entre
   palabras del HTML se respeten con normalidad. */
.franja-dato {
  font-family: var(--display); font-size: 1.5rem; color: var(--primary);
  line-height: 1.3; margin: 0; min-height: 2.6em;
  display: block; padding-top: .3em;
}
.franja-dato span { color: var(--gold); }
.franja-etiqueta { font-size: .82rem; color: var(--muted-foreground); margin: .4rem 0 0; }

/* ---------- Utilidades ---------- */
.centro { text-align: center; }
.mt-2 { margin-top: 2rem; }
.oculto { display: none; }
.saltar {
  position: absolute; left: -9999px; top: 0; background: var(--gold); color: #fff;
  padding: .6rem 1rem; z-index: 100; text-decoration: none;
}
.saltar:focus { left: .5rem; top: .5rem; }