/* ============================================================
   ASESORÍA LEGAL VIRTUAL — Hoja de estilos
   Paleta: azul petróleo + arena discreta sobre fondo marfil
   ============================================================ */

:root{
  --azul-900:#0A2A38;
  --azul-800:#0E3646;
  --azul-700:#12475A;
  --azul-500:#1D6B84;
  --arena:#C2A15B;
  --arena-clara:#EFE6D3;
  --marfil:#FAF8F4;
  --blanco:#FFFFFF;
  --tinta:#1C2124;
  --gris-600:#5C6469;
  --gris-400:#9AA0A4;
  --gris-200:#E4DFD7;

  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  --ancho:1160px;
  --radio:10px;
  --sombra:0 1px 2px rgba(10,42,56,.06),0 8px 28px rgba(10,42,56,.07);
  --transicion:180ms ease;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:96px;}
body{
  margin:0;
  background:var(--marfil);
  color:var(--tinta);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block;}
a{color:var(--azul-700);text-underline-offset:3px;}
a:hover{color:var(--azul-500);}

h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.2;color:var(--azul-900);margin:0 0 .5em;letter-spacing:-.01em;}
h1{font-size:clamp(2rem,4.6vw,3.35rem);}
h2{font-size:clamp(1.6rem,3.1vw,2.35rem);}
h3{font-size:1.2rem;}
p{margin:0 0 1.1em;}
ul,ol{margin:0 0 1.1em;padding-left:1.15em;}
li{margin-bottom:.4em;}
strong{font-weight:600;}

.contenedor{width:100%;max-width:var(--ancho);margin-inline:auto;padding-inline:22px;}
.seccion{padding-block:clamp(56px,7vw,92px);}
.seccion--marfil{background:var(--marfil);}
.seccion--blanca{background:var(--blanco);}
.seccion--azul{background:var(--azul-900);color:#E8EEF1;}
.seccion--azul h2,.seccion--azul h3{color:var(--blanco);}
.seccion--arena{background:var(--arena-clara);}

/* --- Etiqueta superior de sección (elemento de firma) --- */
.epigrafe{
  display:flex;align-items:center;gap:12px;
  font-family:var(--sans);font-size:.74rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--azul-500);
  margin-bottom:14px;
}
.epigrafe::before{content:"";width:34px;height:2px;background:var(--arena);flex:none;}
.seccion--azul .epigrafe{color:var(--arena);}
.seccion--azul .epigrafe::before{background:var(--arena);}

.intro{max-width:62ch;color:var(--gris-600);font-size:1.06rem;}
.seccion--azul .intro{color:#C7D5DC;}

/* --- Botones --- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 26px;border-radius:var(--radio);border:1.5px solid transparent;
  font-family:var(--sans);font-size:.97rem;font-weight:600;line-height:1;
  text-decoration:none;cursor:pointer;transition:var(--transicion);
}
.btn--primario{background:var(--azul-800);color:var(--blanco);}
.btn--primario:hover{background:var(--azul-700);color:var(--blanco);transform:translateY(-1px);}
.btn--secundario{background:transparent;color:var(--azul-800);border-color:var(--azul-800);}
.btn--secundario:hover{background:var(--azul-800);color:var(--blanco);}
.btn--claro{background:var(--arena);color:var(--azul-900);}
.btn--claro:hover{background:#D3B570;color:var(--azul-900);}
.btn--borde-claro{background:transparent;color:var(--blanco);border-color:rgba(255,255,255,.5);}
.btn--borde-claro:hover{background:var(--blanco);color:var(--azul-900);}
.btn--bloque{width:100%;}
.acciones{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px;}

:where(a,button,input,select,textarea,summary):focus-visible{
  outline:3px solid var(--arena);outline-offset:2px;border-radius:4px;
}

/* --- Barra superior --- */
.barra-aviso{
  background:var(--azul-900);color:#CBDCE3;
  font-size:.83rem;text-align:center;padding:9px 22px;
}
.barra-aviso strong{color:var(--arena);font-weight:600;}

/* --- Cabecera / navegación --- */
.cabecera{
  position:sticky;top:0;z-index:60;background:rgba(250,248,244,.94);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--gris-200);
}
.cabecera__fila{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:74px;}
.logo{display:flex;align-items:center;gap:11px;text-decoration:none;}
.logo__marca{width:38px;height:38px;flex:none;border-radius:7px;background:var(--azul-900);
  display:grid;place-items:center;color:var(--arena);font-family:var(--serif);font-size:1.05rem;font-weight:600;letter-spacing:.02em;}
.logo__texto{display:flex;flex-direction:column;line-height:1.15;}
.logo__nombre{font-family:var(--serif);font-size:1.06rem;font-weight:600;color:var(--azul-900);}
.logo__bajada{font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;color:var(--gris-600);}

.nav{display:flex;align-items:center;gap:4px;}
.nav a{
  padding:9px 12px;border-radius:7px;font-size:.93rem;font-weight:500;
  color:var(--azul-900);text-decoration:none;transition:var(--transicion);
}
.nav a:hover{background:var(--arena-clara);}
.nav__cta{margin-left:8px;}

.menu-btn{display:none;background:none;border:1.5px solid var(--gris-200);border-radius:8px;
  padding:9px 13px;font:600 .9rem var(--sans);color:var(--azul-900);cursor:pointer;}

/* --- Hero --- */
.hero{background:linear-gradient(180deg,var(--blanco) 0%,var(--marfil) 100%);
  border-bottom:1px solid var(--gris-200);padding-block:clamp(44px,6vw,78px);}
.hero__grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,5vw,64px);align-items:center;}
.hero h1{margin-bottom:.35em;}
.hero__sub{font-size:1.12rem;color:var(--gris-600);max-width:54ch;}
.hero__nota{margin-top:22px;padding-left:16px;border-left:2px solid var(--arena);
  font-size:.9rem;color:var(--gris-600);max-width:52ch;}
.hero__sellos{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px;}
.sello{display:inline-flex;align-items:center;gap:7px;background:var(--blanco);border:1px solid var(--gris-200);
  border-radius:100px;padding:7px 15px;font-size:.82rem;color:var(--azul-800);font-weight:500;}
.sello::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--arena);}

/* --- Marcadores de fotografía --- */
.foto{position:relative;border-radius:14px;overflow:hidden;background:var(--arena-clara);box-shadow:var(--sombra);}
.foto img{width:100%;height:100%;object-fit:cover;}
.foto--retrato{aspect-ratio:4/5;}
.foto--panoramica{aspect-ratio:16/10;}
.foto__pendiente{
  position:absolute;inset:0;display:grid;place-content:center;gap:6px;text-align:center;padding:22px;
  background:repeating-linear-gradient(45deg,#EFE6D3,#EFE6D3 12px,#E7DBC3 12px,#E7DBC3 24px);
  color:var(--azul-800);font-size:.85rem;
}
.foto__pendiente b{display:block;font-family:var(--serif);font-size:1rem;}
.foto__pendiente code{font-size:.76rem;background:rgba(255,255,255,.75);padding:2px 6px;border-radius:4px;}

/* --- Tarjetas --- */
.rejilla{display:grid;gap:20px;margin-top:36px;}
.rejilla--2{grid-template-columns:repeat(2,1fr);}
.rejilla--3{grid-template-columns:repeat(3,1fr);}
.rejilla--4{grid-template-columns:repeat(4,1fr);}

.tarjeta{
  background:var(--blanco);border:1px solid var(--gris-200);border-radius:var(--radio);
  padding:26px 24px;transition:var(--transicion);
}
.tarjeta:hover{border-color:var(--arena);transform:translateY(-2px);box-shadow:var(--sombra);}
.tarjeta h3{margin-bottom:.45em;font-size:1.15rem;}
.tarjeta p{font-size:.94rem;color:var(--gris-600);margin-bottom:.8em;}
.tarjeta ul{font-size:.9rem;color:var(--gris-600);padding-left:1.05em;margin-bottom:0;}
.tarjeta__num{display:block;font-family:var(--sans);font-size:.72rem;font-weight:700;letter-spacing:.14em;
  color:var(--arena);margin-bottom:10px;}
.seccion--azul .tarjeta{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.16);}
.seccion--azul .tarjeta p,.seccion--azul .tarjeta ul{color:#BFD1D9;}
.seccion--azul .tarjeta:hover{border-color:var(--arena);}

/* --- Proceso numerado --- */
.pasos{counter-reset:paso;list-style:none;padding:0;margin:34px 0 0;display:grid;gap:16px;}
.pasos li{counter-increment:paso;position:relative;padding:20px 22px 20px 68px;background:var(--blanco);
  border:1px solid var(--gris-200);border-radius:var(--radio);font-size:.96rem;}
.pasos li::before{
  content:counter(paso,decimal-leading-zero);position:absolute;left:22px;top:19px;
  font-family:var(--serif);font-size:1.15rem;font-weight:600;color:var(--arena);
}
.pasos li b{display:block;color:var(--azul-900);font-family:var(--serif);font-size:1.05rem;margin-bottom:2px;}
.seccion--azul .pasos li{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.16);color:#CFDDE3;}
.seccion--azul .pasos li b{color:var(--blanco);}

/* --- Aviso destacado --- */
.aviso{
  border-left:3px solid var(--arena);background:var(--blanco);
  padding:18px 22px;border-radius:0 var(--radio) var(--radio) 0;
  font-size:.92rem;color:var(--gris-600);margin-top:28px;
}
.aviso strong{color:var(--azul-900);}
.seccion--azul .aviso{background:rgba(255,255,255,.06);color:#C7D5DC;}
.seccion--azul .aviso strong{color:var(--blanco);}
.seccion--arena .aviso{background:rgba(255,255,255,.7);}

/* --- Directora --- */
.directora__grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(26px,4vw,56px);align-items:start;}
.ficha{display:grid;gap:10px;margin:24px 0;padding:20px 22px;background:var(--blanco);
  border:1px solid var(--gris-200);border-radius:var(--radio);font-size:.93rem;}
.ficha div{display:flex;gap:10px;flex-wrap:wrap;}
.ficha dt{font-weight:600;color:var(--azul-900);min-width:170px;}
.ficha dd{margin:0;color:var(--gris-600);}

/* --- Preguntas frecuentes --- */
.faq{margin-top:32px;border-top:1px solid var(--gris-200);}
.faq details{border-bottom:1px solid var(--gris-200);}
.faq summary{
  cursor:pointer;list-style:none;padding:19px 44px 19px 0;position:relative;
  font-family:var(--serif);font-size:1.08rem;font-weight:600;color:var(--azul-900);
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";position:absolute;right:8px;top:50%;transform:translateY(-50%);
  font-size:1.4rem;color:var(--arena);font-family:var(--sans);line-height:1;}
.faq details[open] summary::after{content:"–";}
.faq p{font-size:.95rem;color:var(--gris-600);padding-right:44px;}

/* --- Formularios --- */
.formulario{background:var(--blanco);border:1px solid var(--gris-200);border-radius:14px;
  padding:clamp(24px,3.4vw,40px);box-shadow:var(--sombra);}
.campos{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;}
.campo{display:flex;flex-direction:column;gap:6px;}
.campo--ancho{grid-column:1/-1;}
.campo label{font-size:.87rem;font-weight:600;color:var(--azul-900);}
.campo .ayuda{font-size:.79rem;color:var(--gris-600);font-weight:400;}
.campo input,.campo select,.campo textarea{
  font:inherit;font-size:.95rem;padding:12px 14px;border:1.5px solid var(--gris-200);
  border-radius:8px;background:var(--marfil);color:var(--tinta);width:100%;transition:var(--transicion);
}
.campo input:focus,.campo select:focus,.campo textarea:focus{border-color:var(--azul-500);background:var(--blanco);outline:none;}
.campo textarea{min-height:130px;resize:vertical;}
.campo input[aria-invalid="true"],.campo select[aria-invalid="true"],.campo textarea[aria-invalid="true"]{border-color:#B3261E;}
.error{font-size:.8rem;color:#B3261E;min-height:0;}
.casilla{display:flex;gap:11px;align-items:flex-start;grid-column:1/-1;font-size:.88rem;color:var(--gris-600);}
.casilla input{width:19px;height:19px;flex:none;margin-top:2px;accent-color:var(--azul-700);}
.miel{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.mensaje-envio{margin-top:16px;padding:14px 18px;border-radius:8px;font-size:.92rem;display:none;}
.mensaje-envio--ok{display:block;background:#E7F1EC;border:1px solid #9CC4AF;color:#14532D;}
.mensaje-envio--error{display:block;background:#FBEAE8;border:1px solid #E0A9A3;color:#7F1D1D;}

/* --- Pagos --- */
.lista-limpia{list-style:none;padding:0;display:grid;gap:12px;margin-top:24px;}
.lista-limpia li{display:flex;gap:12px;align-items:flex-start;font-size:.95rem;color:var(--gris-600);}
.lista-limpia li::before{content:"";width:7px;height:7px;border-radius:2px;background:var(--arena);margin-top:9px;flex:none;}
.seccion--azul .lista-limpia li{color:#C7D5DC;}

/* --- Contacto --- */
.contacto__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);align-items:start;}
.datos-contacto{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:16px;}
.datos-contacto li{display:grid;gap:2px;}
.datos-contacto span{font-size:.76rem;letter-spacing:.13em;text-transform:uppercase;color:var(--arena);}
.datos-contacto a{font-size:1.02rem;color:#EAF1F4;text-decoration:none;word-break:break-word;}
.datos-contacto a:hover{text-decoration:underline;color:var(--blanco);}

/* --- WhatsApp flotante --- */
.wa-flotante{
  position:fixed;right:18px;bottom:18px;z-index:70;
  display:inline-flex;align-items:center;gap:9px;
  background:var(--azul-800);color:var(--blanco);text-decoration:none;
  padding:13px 19px;border-radius:100px;font-size:.92rem;font-weight:600;
  box-shadow:0 6px 24px rgba(10,42,56,.28);transition:var(--transicion);
}
.wa-flotante:hover{background:var(--azul-700);color:var(--blanco);transform:translateY(-2px);}
.wa-flotante svg{width:19px;height:19px;fill:currentColor;}

/* --- Pie de página --- */
.pie{background:var(--azul-900);color:#A9BEC7;font-size:.9rem;padding-block:56px 26px;}
.pie h4{color:var(--blanco);font-family:var(--sans);font-size:.78rem;letter-spacing:.14em;
  text-transform:uppercase;margin-bottom:14px;}
.pie__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:34px;}
.pie ul{list-style:none;padding:0;margin:0;display:grid;gap:8px;}
.pie a{color:#A9BEC7;text-decoration:none;}
.pie a:hover{color:var(--blanco);text-decoration:underline;}
.pie__legal{margin-top:44px;padding-top:22px;border-top:1px solid rgba(255,255,255,.14);
  font-size:.81rem;color:#8AA3AD;display:grid;gap:12px;}
.redes{display:flex;gap:10px;margin-top:16px;}
.redes a{width:36px;height:36px;border:1px solid rgba(255,255,255,.22);border-radius:8px;
  display:grid;place-items:center;}
.redes svg{width:17px;height:17px;fill:currentColor;}

/* --- Banner de cookies --- */
.cookies{
  position:fixed;left:16px;right:16px;bottom:16px;z-index:90;max-width:520px;
  background:var(--blanco);border:1px solid var(--gris-200);border-radius:12px;
  padding:20px 22px;box-shadow:0 12px 40px rgba(10,42,56,.2);display:none;
}
.cookies[data-visible="true"]{display:block;}
.cookies p{font-size:.88rem;color:var(--gris-600);margin-bottom:14px;}
.cookies .acciones{margin-top:0;}

/* --- Páginas de texto legal --- */
.legal{max-width:78ch;}
.legal h2{margin-top:1.8em;font-size:1.45rem;}
.legal h3{margin-top:1.4em;}
.legal ul{color:var(--gris-600);}
.actualizado{font-size:.85rem;color:var(--gris-600);border:1px dashed var(--gris-200);
  padding:12px 16px;border-radius:8px;display:inline-block;}

/* --- Utilidades --- */
.oculto{display:none !important;}
.saltar{position:absolute;left:-9999px;background:var(--azul-900);color:#fff;padding:12px 18px;z-index:100;}
.saltar:focus{left:12px;top:12px;}
.centro{text-align:center;}
.centro .epigrafe{justify-content:center;}
.centro .intro{margin-inline:auto;}

/* ============ RESPONSIVE ============ */
@media (max-width:980px){
  .hero__grid,.directora__grid,.contacto__grid{grid-template-columns:1fr;}
  .rejilla--4{grid-template-columns:repeat(2,1fr);}
  .rejilla--3{grid-template-columns:repeat(2,1fr);}
  .pie__grid{grid-template-columns:repeat(2,1fr);}
  .nav{
    display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;
    align-items:stretch;background:var(--blanco);border-bottom:1px solid var(--gris-200);
    padding:12px 18px 20px;gap:2px;box-shadow:var(--sombra);
  }
  .nav[data-abierto="true"]{display:flex;}
  .nav a{padding:13px 10px;border-bottom:1px solid var(--gris-200);border-radius:0;}
  .nav__cta{margin:12px 0 0;justify-content:center;}
  .menu-btn{display:inline-block;}
  .cabecera__fila{position:relative;}
}
@media (max-width:640px){
  body{font-size:16px;}
  .rejilla--2,.rejilla--3,.rejilla--4{grid-template-columns:1fr;}
  .campos{grid-template-columns:1fr;}
  .pie__grid{grid-template-columns:1fr;}
  .acciones .btn{width:100%;}
  .wa-flotante{right:12px;bottom:12px;padding:12px 16px;font-size:.86rem;}
  .ficha dt{min-width:100%;}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important;scroll-behavior:auto !important;}
  .tarjeta:hover,.btn:hover,.wa-flotante:hover{transform:none;}
}

@media print{
  .cabecera,.wa-flotante,.cookies,.barra-aviso,.formulario{display:none !important;}
  body{background:#fff;}
}

/* ============================================================
   LOGO EN CABECERA Y PIE
   ============================================================ */
.logo__img{width:44px;height:44px;flex:none;object-fit:contain;}
.pie__logo{display:inline-block;background:var(--marfil);border-radius:10px;padding:14px 18px;margin-bottom:16px;}
.pie__logo img{width:180px;height:auto;}

/* ============================================================
   SECUENCIA DE ENTRADA (se muestra una vez por sesión)
   ============================================================ */
html.intro-activa,html.intro-activa body{overflow:hidden;}

.intro{
  position:fixed;inset:0;z-index:200;display:none;
  background:radial-gradient(circle at 50% 42%,#FFFFFF 0%,var(--marfil) 55%,#F1EBE0 100%);
  place-items:center;text-align:center;padding:24px;
}
html.intro-activa .intro{display:grid;}
.intro[data-cerrando="true"]{animation:intro-salir .55s ease forwards;}
@keyframes intro-salir{to{opacity:0;visibility:hidden;}}

.intro__escena{display:grid;justify-items:center;gap:0;max-width:520px;}

/* 1. Logo */
.intro__logo{
  width:min(260px,58vw);height:auto;
  opacity:0;transform:scale(.9);
  animation:intro-logo 1.5s cubic-bezier(.22,.7,.3,1) forwards;
}
@keyframes intro-logo{
  0%{opacity:0;transform:scale(.9);}
  22%{opacity:1;transform:scale(1);}
  72%{opacity:1;transform:scale(1);}
  100%{opacity:1;transform:scale(.86) translateY(-10px);}
}

/* Filete dorado que se abre bajo el logo */
.intro__filete{
  width:0;height:2px;background:var(--arena);margin-top:14px;
  animation:intro-filete 1.5s ease .55s forwards;
}
@keyframes intro-filete{to{width:210px;}}

/* 2. Retrato */
.intro__retrato{
  width:132px;height:132px;border-radius:50%;overflow:hidden;margin-top:22px;
  border:2px solid var(--arena);background:var(--arena-clara);
  display:grid;place-items:center;
  opacity:0;transform:translateY(14px) scale(.94);
  animation:intro-aparece .8s cubic-bezier(.22,.7,.3,1) 1.05s forwards;
}
.intro__retrato img{width:100%;height:100%;object-fit:cover;}
.intro__iniciales{font-family:var(--serif);font-size:2.1rem;color:var(--azul-800);letter-spacing:.02em;}

/* 3. Nombre */
.intro__nombre{
  font-family:var(--serif);font-size:clamp(1.5rem,4.6vw,2.1rem);font-weight:600;
  color:var(--azul-900);margin:20px 0 0;line-height:1.15;
  opacity:0;transform:translateY(12px);
  animation:intro-aparece .8s cubic-bezier(.22,.7,.3,1) 1.75s forwards;
}
.intro__cargo{
  font-size:.8rem;letter-spacing:.17em;text-transform:uppercase;color:var(--azul-500);
  margin:9px 0 0;
  opacity:0;transform:translateY(10px);
  animation:intro-aparece .8s cubic-bezier(.22,.7,.3,1) 2s forwards;
}
@keyframes intro-aparece{to{opacity:1;transform:translateY(0) scale(1);}}

.intro__saltar{
  position:absolute;right:20px;bottom:20px;
  background:none;border:1px solid var(--gris-200);border-radius:100px;
  padding:9px 18px;font:500 .84rem var(--sans);color:var(--gris-600);cursor:pointer;
  transition:var(--transicion);
}
.intro__saltar:hover{border-color:var(--azul-800);color:var(--azul-900);}

@media (prefers-reduced-motion:reduce){
  html.intro-activa,html.intro-activa body{overflow:auto;}
  .intro{display:none !important;}
}
@media (max-width:640px){
  .intro__retrato{width:108px;height:108px;margin-top:18px;}
  .intro__saltar{right:50%;transform:translateX(50%);bottom:26px;}
}