/* Estilos del sitio. Salieron de index.html para que las landings por área
   compartan exactamente la misma identidad y el navegador los descargue una
   sola vez. Se piden con ?v=<huella>: los pone scripts/versionar.mjs. */

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


:root {
  /* ── Paleta oscura ── */
  --cream:     #09090B;   /* fondo principal → negro */
  --cream-d:   #0F1116;   /* fondo alterno */
  --cream-dd:  #141720;
  --steel:     #7A90A6;
  --steel-m:   #8DA4B8;
  --steel-d:   #A8BBCA;   /* acento claro sobre negro */
  --steel-l:   #4E6275;
  --warm:      #C5A55A;   /* dorado principal */
  --warm-l:    #D4BC7C;   /* dorado claro */
  --charcoal:  #F0EDE7;   /* texto principal → crema */
  --charcoal2: #0F1116;
  --ink:       #C8CDD8;   /* texto cuerpo → gris claro */
  --muted:     #7A8898;   /* texto suave */
  --white:     #141720;   /* "blanco" → negro suave */
}

html { scroll-behavior: smooth; }
body { background: #09090B; font-family: 'Montserrat', sans-serif; overflow-x: hidden; color: var(--charcoal); }



/* ── Pie de página y preguntas frecuentes ──
   Estas reglas las borró por error la limpieza automática de CSS del 5/9 al
   quitar la intro; las detectó el revisor ("clases usadas sin estilo") y se
   restauraron con el texto exacto del commit anterior, sin reescribir valores. */
footer{background:var(--bg2);border-top:1px solid rgba(197,165,90,.12);padding:3rem 2rem;display:flex;flex-direction:column;align-items:center;gap:1.2rem;text-align:center;}
.fc{font-size:.7rem;color:var(--muted);}
.flinks{display:flex;gap:1.5rem;}
.flinks a{font-size:.68rem;color:var(--muted);text-decoration:none;transition:color .2s;}
.flinks a:hover{color:var(--gold);}
#faq{background:var(--bg2);padding:5rem 2rem;}
.faq-list{display:flex;flex-direction:column;gap:1rem;}
.faq-item{border:1px solid rgba(197,165,90,.18);background:var(--bg3);cursor:pointer;transition:border-color .2s;}
.faq-item:hover{border-color:rgba(197,165,90,.4);}
.faq-item summary{font-family:'Cinzel',serif;font-size:.75rem;letter-spacing:.08em;color:var(--gold);list-style:none;cursor:pointer;padding:1.2rem 1.4rem;display:flex;justify-content:space-between;align-items:center;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:'+';color:var(--gold);font-size:1.1rem;font-weight:300;flex-shrink:0;}
.faq-item[open] summary::after{content:'-';}
.faq-item p{font-size:.82rem;color:var(--ink);line-height:1.85;padding:.2rem 1.4rem 1.3rem;margin:0;}

/* ══════════════════════════════════════════
   ANIMACIÓN
══════════════════════════════════════════ */

/* Lo que hace responsiva a la intro está al FINAL de esta hoja de estilos,
   en el bloque "INTRO EN EL TELÉFONO". Va ahí porque las definiciones de las
   escenas están repartidas más abajo que este punto, y con la misma
   especificidad gana la última del documento: puesto acá no aplicaba nada. */

/* ── Escenas ── */

/* fondo estatua difuso — compartido por S3, S4, S5 */
/*
 * Fondo de las escenas de la intro.
 *
 * Antes usaba s5-logo.jpg, que es el LOGO del estudio: azul grisáceo, fuera de
 * la paleta (negro, dorado y acero), y con el nombre escrito adentro —o sea,
 * texto de fondo compitiendo con el texto de cada escena.
 *
 * Ahora usa la estatua dorada, que es solo figura y coincide con el acento del
 * sitio. Ojo con los filtros: el original era una imagen CLARA y por eso
 * llevaba brightness(.35) para hundirla. Esta ya viene oscura —dorado sobre
 * negro—, así que con ese valor desaparecía. Va más alto y con algo más de
 * opacidad para que quede la silueta.
 *
 * s5-logo.jpg NO se toca: sigue siendo el logo declarado en los datos
 * estructurados y la imagen que Google usa para identificar al estudio.
 */

/* ── S1: Logo Reveal ── */

/* ── S2: Abogadas ── */

/* ── S3: Quote ── */

/* ── S4: Áreas ── */

/* ── S5: CTA + QR ── */

/* QR claro */

/* corners */

/* warm accent line left */

/* progress */

/* particles (light version) */

/* replay */

:root{--bg:#09090B;--bg2:#0F1116;--bg3:#141720;--gold:#C5A55A;--gold-l:#E8D48A;--cream:#F0EDE7;--ink:#C8CDD8;--muted:#7A8898;--steel:#8DA4B8;}
#landing{display:block;background:var(--bg);font-family:'Montserrat',sans-serif;}
#nav{position:fixed;top:0;left:0;right:0;z-index:500;background:rgba(9,9,11,.96);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(197,165,90,.12);padding:.75rem 2rem;display:flex;align-items:center;justify-content:space-between;opacity:0;transform:translateY(-100%);pointer-events:none;transition:opacity .35s,transform .35s;}
#nav.show{opacity:1;transform:translateY(0);pointer-events:auto;}
.nav-links{display:flex;list-style:none;gap:2.4rem;margin:0;padding:0;}
.nav-links a{font-family:'Cinzel',serif;font-size:.58rem;letter-spacing:.22em;color:var(--steel);text-decoration:none;text-transform:uppercase;transition:color .2s;padding:.3rem 0;border-bottom:2px solid transparent;}
.nav-links a:hover,.nav-links a.active{color:var(--gold);border-bottom-color:var(--gold);}
.nav-cta{font-family:'Cinzel',serif;font-size:.56rem;letter-spacing:.28em;background:var(--gold);color:#09090B;text-decoration:none;padding:.55rem 1.5rem;text-transform:uppercase;transition:opacity .2s;}
.nav-cta:hover{opacity:.82;}
.nav-hamburger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:4px;}
.nav-hamburger span{width:22px;height:2px;background:var(--steel);display:block;transition:all .25s;}
@media(max-width:768px){
  .nav-links{display:none;flex-direction:column;gap:0;position:absolute;top:100%;left:0;right:0;background:rgba(9,9,11,.98);border-bottom:1px solid rgba(197,165,90,.12);padding:1rem 2rem;}
  #nav.menu-open .nav-links{display:flex;}
  .nav-hamburger{display:flex;}
  .nav-cta{display:none;}
  .nav-links a{padding:.85rem 0;border-bottom:1px solid rgba(197,165,90,.08);}
  .nav-links li:last-child a{border-bottom:none;}
}
.reveal{opacity:0;transform:translateY(28px);transition:opacity .65s ease,transform .65s ease;}
.reveal.vis{opacity:1;transform:translateY(0);}
.sec-tag{display:inline-flex;align-items:center;gap:.6rem;font-family:'Cinzel',serif;font-size:.52rem;letter-spacing:.38em;color:var(--gold);text-transform:uppercase;margin-bottom:.8rem;}
.sec-tag::before,.sec-tag::after{content:'';display:block;width:22px;height:1px;background:var(--gold);opacity:.5;}
#inicio{min-height:100vh;background:var(--bg);background-image:radial-gradient(ellipse 80% 60% at 70% 40%,rgba(197,165,90,.06) 0%,transparent 65%),radial-gradient(ellipse 60% 50% at 20% 70%,rgba(197,165,90,.04) 0%,transparent 60%);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:7rem 2rem 4rem;position:relative;overflow:hidden;}
.hero-eyebrow{font-family:'Cinzel',serif;font-size:.56rem;letter-spacing:.4em;color:var(--gold);text-transform:uppercase;margin-bottom:1.5rem;}
.hero-h1{font-family:'Cinzel',serif;font-size:clamp(2.2rem,5vw,3.8rem);font-weight:600;color:var(--cream);line-height:1.15;margin-bottom:1.6rem;}
.hero-h1 em{font-style:normal;color:var(--gold);}
.hero-p{font-size:.88rem;color:var(--ink);line-height:1.9;margin-bottom:2.4rem;max-width:500px;}
.hero-btns{display:flex;flex-wrap:wrap;gap:1rem;}
.btn-p{font-family:'Cinzel',serif;font-size:.58rem;letter-spacing:.28em;text-transform:uppercase;background:var(--gold);color:#09090B;padding:.85rem 2rem;text-decoration:none;transition:opacity .2s,transform .2s;display:inline-block;}
.btn-p:hover{opacity:.85;transform:translateY(-1px);}
.btn-g{font-family:'Cinzel',serif;font-size:.58rem;letter-spacing:.28em;text-transform:uppercase;border:1.5px solid rgba(197,165,90,.45);color:var(--gold);padding:.85rem 2rem;text-decoration:none;transition:background .2s,color .2s,border-color .2s,transform .2s;display:inline-block;}
.btn-g:hover{background:var(--gold);color:#09090B;border-color:var(--gold);transform:translateY(-1px);}
#stats{background:var(--bg2);padding:5rem 2rem;}
.stat-card{text-align:center;padding:2.5rem 1rem;border-right:1px solid rgba(197,165,90,.1);transition:background .25s;}
.stat-card:last-child{border-right:none;}
.stat-card:hover{background:rgba(197,165,90,.05);}
.stat-num{font-family:'Cinzel',serif;font-size:clamp(2rem,4vw,3rem);font-weight:600;color:var(--gold);line-height:1;display:block;}
.stat-lbl{font-family:'Cinzel',serif;font-size:.52rem;letter-spacing:.22em;color:var(--steel);text-transform:uppercase;margin-top:.8rem;display:block;}
.stat-sub{font-size:.72rem;color:var(--muted);margin-top:.35rem;display:block;}
#equipo{background:var(--bg);padding:5.5rem 2rem;}
.sec-h2{font-family:'Cinzel',serif;font-size:clamp(1.6rem,3.5vw,2.4rem);font-weight:400;color:var(--cream);margin:.5rem 0 1rem;line-height:1.3;}
.sec-h2 em{font-style:italic;color:var(--gold);}
.sec-p{font-size:.88rem;color:var(--ink);max-width:580px;margin:0 auto;line-height:1.9;}
.google-badge{display:inline-flex;align-items:center;gap:8px;margin-top:1.2rem;padding:7px 18px;border:1px solid rgba(197,165,90,.2);background:rgba(255,255,255,.03);border-radius:2px;}
.google-stars{color:#C5A55A;font-size:1rem;letter-spacing:2px;line-height:1;}
.google-count{font-family:'Cinzel',serif;font-size:.52rem;letter-spacing:.2em;color:var(--ink);text-transform:uppercase;}
.team-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2rem;}
.team-card{background:var(--bg2);border:1px solid rgba(197,165,90,.12);transition:border-color .3s,box-shadow .3s,transform .3s;position:relative;overflow:hidden;}
.team-card:hover{border-color:rgba(197,165,90,.35);box-shadow:0 12px 48px rgba(197,165,90,.1);transform:translateY(-4px);}
.team-accent{height:3px;background:linear-gradient(90deg,transparent,var(--gold),transparent);}
.team-avatar-wrap{padding:2.5rem 2.5rem 1.5rem;text-align:center;}
.team-avatar-wrap img{width:160px;height:200px;object-fit:cover;object-position:top;filter:grayscale(30%) brightness(.9);transition:filter .4s;border:2px solid rgba(197,165,90,.2);}
.team-card:hover .team-avatar-wrap img{filter:grayscale(0) brightness(1);}
.team-body{padding:0 2.5rem 1.5rem;}
.team-name{font-family:'Cinzel',serif;font-size:.95rem;font-weight:500;color:var(--cream);margin:0 0 .4rem;}
.team-sub{font-family:'Cormorant Garamond',serif;font-size:1rem;font-style:italic;color:var(--gold);margin:.3rem 0;}
.team-tags{display:flex;flex-wrap:wrap;gap:.4rem;margin:.8rem 0;}
.team-tag{font-family:'Cinzel',serif;font-size:.44rem;letter-spacing:.2em;color:var(--muted);border:1px solid rgba(197,165,90,.15);padding:.3rem .7rem;text-transform:uppercase;}
.team-divider{height:1px;background:rgba(197,165,90,.12);margin:1rem 0;}

.team-credentials{list-style:none;padding:0;margin:0;font-size:.8rem;color:var(--ink);line-height:1.85;}
.team-credentials li{padding:.1rem 0 .1rem 1.2rem;position:relative;}
.team-credentials li::before{content:"—";position:absolute;left:0;color:var(--gold);opacity:.7;}
.team-credentials li em{color:var(--gold);font-style:italic;font-size:.75rem;}
.team-footer{padding:1.2rem 2.5rem 2rem;display:flex;gap:1.5rem;flex-wrap:wrap;}
.team-meta{display:flex;flex-direction:column;gap:.2rem;}
.team-meta-lbl{font-size:.6rem;color:var(--muted);letter-spacing:.1em;text-transform:uppercase;}
.team-meta-val{font-size:.78rem;color:var(--steel);font-weight:500;}
@media(max-width:768px){.team-grid{grid-template-columns:1fr;}}
#servicios{background:var(--bg2);padding:5.5rem 2rem;}
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:3.5rem;}
.svc-card{background:var(--bg3);padding:2rem 1.8rem;border:1px solid rgba(197,165,90,.1);border-left:3px solid transparent;transition:border-color .25s,box-shadow .25s,transform .25s;}
.svc-card:hover{border-left-color:var(--gold);box-shadow:0 8px 32px rgba(197,165,90,.1);transform:translateY(-3px);}
.svc-num{font-family:'Cinzel',serif;font-size:.52rem;letter-spacing:.28em;color:rgba(197,165,90,.3);margin-bottom:.8rem;}
.svc-icon{font-size:1.6rem;display:block;margin-bottom:.8rem;}
.svc-title{font-family:'Cinzel',serif;font-size:.78rem;letter-spacing:.12em;color:var(--cream);text-transform:uppercase;margin:.5rem 0 .8rem;}
.svc-desc{font-size:.79rem;color:var(--ink);line-height:1.85;}
@media(max-width:900px){.svc-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:600px){.svc-grid{grid-template-columns:1fr;}}
#tarifa{background:var(--bg2);padding:5rem 2rem;display:flex;justify-content:center;}
#contacto{background:var(--bg);padding:5.5rem 2rem;}
.ct-p{font-size:.85rem;color:var(--ink);line-height:1.85;margin:.8rem 0 1.8rem;}
.ct-deets{display:flex;flex-direction:column;gap:1.2rem;}
.ct-item{display:flex;gap:1rem;align-items:flex-start;}
.ct-icon{font-size:1.1rem;flex-shrink:0;margin-top:.1rem;}
.ct-text{display:flex;flex-direction:column;gap:.2rem;}
.ct-lbl{font-family:'Cinzel',serif;font-size:.52rem;letter-spacing:.2em;color:var(--gold);text-transform:uppercase;}
.ct-text>a,.ct-text>div{font-size:.82rem;color:var(--ink);line-height:1.7;}
.ct-text>a{color:var(--ink);text-decoration:none;}
.ct-text>a:hover{color:var(--gold);}
.ct-tags{display:flex;gap:.6rem;margin:.8rem 0;flex-wrap:wrap;}
.ct-tag{font-family:'Cinzel',serif;font-size:.5rem;letter-spacing:.3em;border:1px solid rgba(197,165,90,.3);padding:4px 12px;text-transform:uppercase;}
.ct-tag.gold{color:var(--gold);}
.ct-tag.blue{color:var(--steel);border-color:rgba(141,164,184,.3);}
.ct-form{background:var(--bg2);padding:2.5rem;border:1px solid rgba(197,165,90,.1);}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem;}
.fg{display:flex;flex-direction:column;gap:.35rem;margin-bottom:1rem;}
.fg label{font-family:'Cinzel',serif;font-size:.56rem;letter-spacing:.2em;color:var(--muted);text-transform:uppercase;}
.fg input,.fg select,.fg textarea{background:var(--bg3);border:1px solid rgba(197,165,90,.15);color:var(--cream);padding:.75rem .95rem;font-size:.82rem;font-family:'Montserrat',sans-serif;width:100%;outline:none;transition:border-color .2s;}
.fg input::placeholder,.fg textarea::placeholder{color:rgba(197,165,90,.3);}
.fg input:focus,.fg select:focus,.fg textarea:focus{border-color:var(--gold);}
.fg select option{background:var(--bg3);color:var(--cream);}
.fg textarea{min-height:110px;resize:vertical;}
.ferr{display:none;font-size:.68rem;color:#EF4444;}
.ferr.on{display:block;}
.fg input.err,.fg select.err,.fg textarea.err{border-color:#EF4444;}
.fg input.ok,.fg textarea.ok{border-color:#22C55E;}
.btn-send{font-family:'Cinzel',serif;font-size:.56rem;letter-spacing:.28em;text-transform:uppercase;background:var(--gold);color:#09090B;padding:.85rem 1.5rem;transition:opacity .2s;font-weight:600;}
.btn-send:hover{opacity:.85;}
.form-ok{display:none;text-align:center;padding:3rem 1rem;}
.form-ok.show{display:block;animation:fade .5s ease;}
.form-ok-icon{font-size:2rem;color:var(--gold);margin-bottom:.8rem;}
.form-ok-txt{font-family:'Cinzel',serif;font-size:.8rem;letter-spacing:.2em;color:var(--cream);text-transform:uppercase;}
.form-ok-sub{font-size:.78rem;color:var(--ink);margin-top:.6rem;line-height:1.7;}
@keyframes fade{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
@media(max-width:700px){
  #stats>div>div[style*="grid-template-columns:repeat(4,1fr)"]{grid-template-columns:repeat(2,1fr) !important;}
}

/* ── Maquetación inline en el teléfono ──────────────────────────────────
   La portada está maquetada con atributos style="" con medidas de escritorio.
   Un atributo style le gana a cualquier regla CSS, así que las media queries
   de arriba no pueden corregirlos: por eso los grids ya estaban parcheados
   con [style*=…] e !important. Faltaban los márgenes y las tipografías, que
   son los que obligaban a alejar la pantalla para leer.

   El caso peor era padding:3rem 4rem — 64px de aire a cada lado, que en una
   pantalla de 360px dejan 232px útiles para el texto.

   Esto NO cambia el escritorio: vive dentro de la consulta de 640px. Si
   algún día los estilos inline pasan a clases de verdad, este bloque entero
   se borra. */
@media(max-width:640px){
  [style*="padding:3rem 4rem"]{padding:2rem 1.25rem !important;}
  [style*="padding:7rem 2rem 4rem"]{padding:5rem 1.25rem 3rem !important;}
  [style*="padding:5rem 2rem"]{padding:3.5rem 1.25rem !important;}
  [style*="padding:5.5rem 2rem"]{padding:3.5rem 1.25rem !important;}
  [style*="padding:3rem"]:not([style*="padding:3rem 4rem"]){padding:1.75rem !important;}
  [style*="font-size:2.6rem"]{font-size:1.85rem !important;}
  [style*="font-size:2rem"]{font-size:1.5rem !important;}
  /* Las reseñas iban de a tres por pantalla: en el teléfono, una entera. */
  .rg-card{min-width:calc(100% - .8rem) !important;}
}

    #rg{background:#07080C;background-image:radial-gradient(ellipse 130% 55% at 50% 0%,rgba(197,165,90,.08) 0%,transparent 68%);padding:5.5rem 2rem 5rem}
    .rg-inner{max-width:960px;margin:0 auto;text-align:center}
    .rg-title-line{width:52px;height:2px;background:linear-gradient(90deg,transparent,#C5A55A,transparent);margin:.9rem auto 0;border:none}
    .rg-score-box{display:inline-flex;align-items:center;gap:1.8rem;background:rgba(197,165,90,.05);border:1px solid rgba(197,165,90,.12);border-radius:16px;padding:1.1rem 2.2rem;margin:1.8rem 0 3rem}
    .rg-stage{position:relative;padding:0 54px}
    .rg-wrap{overflow:hidden;position:relative}
    .rg-wrap::before,.rg-wrap::after{content:'';position:absolute;top:0;bottom:0;width:90px;z-index:2;pointer-events:none}
    .rg-wrap::before{left:0;background:linear-gradient(to right,#07080C,transparent)}
    .rg-wrap::after{right:0;background:linear-gradient(to left,#07080C,transparent)}
    .rg-track{display:flex;gap:1.2rem;transition:transform .55s cubic-bezier(.4,0,.2,1)}
    .rg-card{min-width:calc(33.333% - .8rem);flex-shrink:0;background:linear-gradient(145deg,rgba(197,165,90,.08) 0%,rgba(10,11,18,.97) 55%);border:1px solid rgba(197,165,90,.14);border-radius:16px;padding:1.6rem 1.7rem 1.4rem;text-align:left;text-decoration:none;display:flex;flex-direction:column;position:relative;overflow:hidden;transition:transform .32s cubic-bezier(.4,0,.2,1),border-color .32s,box-shadow .32s}
    .rg-card::before{content:'\201C';position:absolute;top:-.6rem;right:.9rem;font-size:6.5rem;line-height:1;color:rgba(197,165,90,.09);font-family:Georgia,serif;pointer-events:none}
    .rg-card:hover{transform:translateY(-7px);border-color:rgba(197,165,90,.45);box-shadow:0 20px 52px rgba(197,165,90,.12),0 4px 16px rgba(0,0,0,.5)}
    .rg-av{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.95rem;color:#fff;flex-shrink:0;font-family:'Montserrat',sans-serif;box-shadow:0 2px 8px rgba(0,0,0,.4)}
    .rg-name{font-family:'Montserrat',sans-serif;font-weight:600;font-size:.84rem;color:#E8DEC8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .rg-sub{font-size:.67rem;color:rgba(176,196,212,.4);font-family:'Montserrat',sans-serif;margin-top:.1rem}
    .rg-stars{color:#FBBC05;font-size:.92rem;letter-spacing:.05em;margin:.8rem 0 .65rem;text-shadow:0 1px 6px rgba(251,188,5,.25)}
    .rg-text{font-family:'Montserrat',sans-serif;font-size:.81rem;color:#BEC7D3;line-height:1.8;margin:0;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.rg-text.expanded{display:block;overflow:visible}

    .rg-more{background:none;border:none;padding:.35rem 0 0;color:rgba(197,165,90,.65);font-family:'Montserrat',sans-serif;font-size:.74rem;cursor:pointer;display:none;align-self:flex-start;letter-spacing:.02em;transition:color .2s}
    .rg-more:hover{color:#C5A55A}
    .rg-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:42px;height:42px;border-radius:50%;background:rgba(197,165,90,.09);border:1px solid rgba(197,165,90,.22);color:#C5A55A;font-size:1.5rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .22s,border-color .22s,transform .22s;padding:0;line-height:1}
    .rg-arrow:hover{background:rgba(197,165,90,.22);border-color:rgba(197,165,90,.55);transform:translateY(-50%) scale(1.1)}
    #rgPrev{left:0}
    #rgNext{right:0}
    .rg-dot{width:7px;height:7px;border-radius:4px;background:rgba(197,165,90,.2);border:none;cursor:pointer;padding:0;transition:background .25s,width .3s,transform .25s}
    .rg-dot.active{background:#C5A55A;width:22px;transform:none}
    .rg-cta{display:inline-flex;align-items:center;gap:.75rem;padding:.9rem 2.2rem;border:1px solid rgba(197,165,90,.28);border-radius:50px;color:#C5A55A;font-family:'Montserrat',sans-serif;font-size:.78rem;font-weight:600;text-decoration:none;letter-spacing:.07em;text-transform:uppercase;background:rgba(197,165,90,.04);transition:border-color .25s,background .25s,box-shadow .25s,transform .25s}
    .rg-cta:hover{border-color:rgba(197,165,90,.6);background:rgba(197,165,90,.09);box-shadow:0 6px 28px rgba(197,165,90,.13);transform:translateY(-2px)}
    @media(max-width:700px){
      .rg-card{min-width:100%}
      #rg{padding:4rem 1.2rem}
      .rg-stage{padding:0}
      .rg-arrow{display:none}
      .rg-wrap::before,.rg-wrap::after{display:none}
      .rg-score-box{padding:.9rem 1.4rem;gap:1.2rem}
    }

  /* ══════════════════════════════════════════
     ACCESIBILIDAD
  ══════════════════════════════════════════ */

  /* Foco visible para navegación con teclado.
     :focus-visible solo se dispara con teclado, así que el mouse no ve el contorno. */
  a:focus-visible,
  button:focus-visible,
  summary:focus-visible,
  [tabindex]:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible{
    outline:2px solid var(--gold-l,#E8D48A);
    outline-offset:3px;
    border-radius:2px;
  }
  .fg input:focus-visible,.fg select:focus-visible,.fg textarea:focus-visible{outline-offset:0;}

  /* Saltar al contenido: primer tabulador de la página, oculto hasta recibir foco. */
  .skip-link{
    position:absolute;left:-9999px;top:0;z-index:10000;
    background:#C5A55A;color:#09090B;padding:.7rem 1.3rem;
    font-family:'Cinzel',serif;font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;
    text-decoration:none;
  }
  .skip-link:focus{left:.5rem;top:.5rem;}

  /* Respetar a quien pidió menos movimiento en su sistema operativo.
     Vestibular: las animaciones de entrada y el parallax pueden marear. */
  @media (prefers-reduced-motion: reduce){
    *,*::before,*::after{
      animation-duration:.01ms !important;
      animation-iteration-count:1 !important;
      transition-duration:.01ms !important;
      scroll-behavior:auto !important;
    }
    html{scroll-behavior:auto;}
    /* Los elementos que aparecen con .reveal deben quedar visibles igual,
       si no la página se ve vacía cuando se anula la animación. */
    .reveal{opacity:1 !important;transform:none !important;}
  }

  /* ══════════════════════════════════════════
     INTRO EN EL TELÉFONO
  ══════════════════════════════════════════

  La animación estaba maquetada SOLO para escritorio: no había una sola media
  query para las escenas. Como #anim recorta con overflow:hidden, en el
  teléfono no aparecía barra de desplazamiento — el contenido quedaba cortado
  por los dos lados, y había que alejar la pantalla para leerlo.

  El peor caso era la escena del equipo: dos tarjetas en fila con 40px de
  separación y 32px de relleno a cada lado. En 360px no entran, y las socias
  salían mochadas.

  ESTE BLOQUE VA AL FINAL A PROPÓSITO. Las reglas de escena (.s2-cards,
  .s4-grid, .s5-inner…) están repartidas más arriba, y con la misma
  especificidad gana la última del documento. La primera versión de este
  arreglo estaba puesta arriba y no hacía absolutamente nada. Si se mueve,
  deja de funcionar. */
  /* ── EL DESBORDE HORIZONTAL DEL ENCABEZADO ──────────────────────────
     #nav es flex con padding 2rem y, en el teléfono, carga: 64px de relleno
     + ~170px de logo (el SVG es 340x100 a 50px de alto) + ~30px de
     hamburguesa + ~120px del selector ES/EN/PT = ~385px. En una pantalla de
     360px eso se sale, y ESO era el scroll hacia la derecha.

     .nav-cta sí se ocultaba en móvil; el selector de idioma no, porque lo
     inyecta i18n.js y nunca tuvo una regla para pantalla chica (allá se
     achican los botones; acá, el relleno y el logo).

     El alto del logo está en un atributo style, así que sin !important no
     hay forma de bajarlo desde una hoja de estilos. */
  @media (max-width: 640px) {
    #nav { padding: .6rem 1rem; gap: .4rem; }
    #nav > a > svg { height: 36px !important; }
  }

  /* Red de seguridad: el overflow-x estaba solo en body. Con html en visible
     el recorte no es fiable en los navegadores de teléfono, que es donde
     importa. */
  html { overflow-x: hidden; }

  @media (max-width: 640px) {

    /* Las dos socias siguen lado a lado —es la idea de la escena— pero ahora
       se encogen para entrar. min-width:0 es lo que permite que un hijo flex
       baje de su ancho de contenido. */

    /* La esquina de abajo a la derecha es del botón del chat (#fab: 18px,
       18px, 56px de lado). .replay-btn estaba en 28/28 y se superponía. */
  }

/* ── Aviso de cookies ─────────────────────────────────────────────────── */
#cookie-banner{display:none;position:fixed;bottom:0;left:0;right:0;z-index:9999;
    background:rgba(9,9,11,.97);border-top:1px solid rgba(197,165,90,.15);
    padding:1rem 2rem;align-items:center;justify-content:space-between;
    flex-wrap:wrap;gap:1rem;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);}
  #cookie-banner.show{display:flex;}
  /* El aviso de cookies tapa la esquina: este boton tambien se corre. */
  #back-top{bottom:calc(90px + var(--alto-banner, 0px)) !important;transition:bottom .25s;}
  @media (prefers-reduced-motion:reduce){ #back-top{transition:none !important;} }

  #cookie-banner p{font-size:.72rem;color:rgba(240,237,231,.65);margin:0;max-width:620px;line-height:1.6;}
  #cookie-banner a{color:#C5A55A;text-decoration:none;border-bottom:1px solid rgba(197,165,90,.35);}
  #cookie-banner a:hover{color:#E8D48A;}
  .cb-actions{display:flex;gap:.6rem;flex-wrap:wrap;}
  .cb-btn{font-family:'Cinzel',serif;font-size:.52rem;letter-spacing:.25em;
    padding:.55rem 1.4rem;cursor:pointer;white-space:nowrap;text-transform:uppercase;
    border:1px solid #C5A55A;transition:background .2s,color .2s;}
  .cb-accept{color:#09090B;background:#C5A55A;}
  .cb-accept:hover{background:#E8D48A;border-color:#E8D48A;}
  .cb-reject{color:#C5A55A;background:transparent;}
  .cb-reject:hover{background:rgba(197,165,90,.12);}
  @media (max-width:640px){ #cookie-banner{padding:1rem 1.2rem;} .cb-actions{width:100%;} .cb-btn{flex:1;text-align:center;} }

/* ══════════════════════════════════════════════════════════════════════════
   ⚠ OJO CON LAS VARIABLES: ESTA HOJA TIENE DOS VOCABULARIOS
   ══════════════════════════════════════════════════════════════════════════
   Hay DOS bloques :root. El de arriba (línea ~10) es el de la intro y define
   `--cream` como el FONDO negro. El de la línea ~325 es el del sitio y vuelve
   a definir `--cream`, pero como el COLOR DE TEXTO crema (#F0EDE7).

   Como el segundo viene después, gana: de la línea 325 en adelante —o sea,
   acá— `var(--cream)` es CREMA CLARO, no negro.

   Todo lo que va debajo de esa línea usa el vocabulario del sitio:
       fondos → --bg (#09090B), --bg2 (#0F1116), --bg3 (#141720)
       dorado → --gold, --gold-l
       texto  → --cream, --ink, --muted

   Esto ya rompió la sección "Cómo trabajamos" una vez: se publicó con
   `background:var(--cream)` creyendo que era negro y salió un recuadro claro
   con letras claras encima, ilegible. Si vas a poner un fondo oscuro acá,
   usá --bg, --bg2 o --bg3.
   ══════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════════
   BARRA FIJA DE CONTACTO  ·  prefijo .bf-
   ══════════════════════════════════════════════════════════════════════════
   Solo en celular. En el escritorio ya está el menú fijo arriba con su botón
   "Consultar"; abajo sería redundante y tapa contenido.

   Un solo número, a propósito: mostrar los dos WhatsApp obliga a elegir entre
   dos abogadas a alguien que todavía no sabe qué necesita, y esa duda cuesta
   la consulta. A quién le toca cada una lo resuelve el estudio adentro.
   ══════════════════════════════════════════════════════════════════════════ */
.barra-fija{display:none;}

@media (max-width:880px){
  .barra-fija{
    display:flex;gap:.5rem;position:fixed;bottom:0;left:0;right:0;z-index:9000;
    padding:.55rem .7rem calc(.55rem + env(safe-area-inset-bottom,0px));
    background:rgba(9,9,11,.97);border-top:1px solid rgba(197,165,90,.18);
    backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  }
  .bf-btn{
    flex:1;text-align:center;text-decoration:none;white-space:nowrap;
    font-family:'Cinzel',serif;font-size:.55rem;letter-spacing:.16em;text-transform:uppercase;
    /* 44px de alto mínimo: es el tamaño por debajo del cual un dedo falla. */
    padding:.85rem .6rem;min-height:44px;display:flex;align-items:center;justify-content:center;
    border:1px solid var(--warm);transition:background .2s,color .2s;
  }
  /* Los dos botones comparten estilo exacto: destacar uno sería elegir a una
     de las dos socias, que es justamente lo que hay que evitar. */
  .bf-wa{background:var(--gold);color:var(--bg);}
  .bf-wa:active{background:var(--gold-l);}

  /* En la portada la barra espera a que termine la intro. La clase la pone el
     mismo IntersectionObserver que muestra el menú. Las landings por área no
     tienen intro ni ese JS, así que ahí la barra se ve desde el principio: por
     eso la espera se pide explícitamente con .intro-primero y no al revés. */

  /* La barra tapa el final de la página y la esquina de abajo a la derecha,
     donde ya viven el botón del asistente y el "volver arriba". Los dos suben.
     Van con selector de clase + id para ganarle al CSS que contacto.js inyecta
     en el head después de cargar: a igual peso, gana el último, y ese es él. */
  .con-barra{padding-bottom:64px;}
  .con-barra #back-top{bottom:calc(154px + var(--alto-banner,0px)) !important;}
  .con-barra #fab{bottom:calc(82px + var(--alto-banner,0px)) !important;}

}

/* ══════════════════════════════════════════════════════════════════════════
   LANDINGS POR ÁREA  ·  prefijo .ar-
   ══════════════════════════════════════════════════════════════════════════
   Las arma scripts/generar-areas.mjs. Usan las mismas variables, las mismas
   fuentes y el mismo logo que la portada: cambia el contenido, no la identidad.
   ══════════════════════════════════════════════════════════════════════════ */

/* El #nav nace invisible y lo muestra el JS de la portada al desplazarse. Acá
   no corre ese JS, así que sin esto el menú no aparecería NUNCA. */
.nav-solido{opacity:1 !important;transform:none !important;pointer-events:auto !important;}

.pagina-area{background:var(--bg);color:var(--ink);}

.ar-hero{background:var(--bg);padding:8.5rem 2rem 4.5rem;position:relative;overflow:hidden;}
.ar-hero::after{
  content:'';position:absolute;top:-200px;right:-200px;width:560px;height:560px;
  background:radial-gradient(circle,rgba(197,165,90,.08) 0%,transparent 70%);pointer-events:none;
}
.ar-hero-in{max-width:900px;margin:0 auto;position:relative;z-index:1;}

.ar-miga{font-size:.72rem;color:var(--muted);margin-bottom:1.8rem;line-height:1.9;}
.ar-miga a{color:var(--steel-d);text-decoration:none;border-bottom:1px solid rgba(168,187,202,.25);}
.ar-miga a:hover{color:var(--warm);}
.ar-miga span[aria-current]{color:var(--charcoal);}

.ar-eyebrow{
  font-family:'Cinzel',serif;font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--warm);margin-bottom:1.1rem;
}
.ar-h1{
  font-family:'Playfair Display',serif;font-weight:400;line-height:1.12;
  font-size:clamp(2.1rem,5.5vw,3.6rem);color:var(--charcoal);margin:0 0 1.3rem;
}
.ar-bajada{
  font-family:'Cormorant Garamond',serif;font-size:clamp(1.1rem,2.4vw,1.45rem);
  line-height:1.75;color:var(--ink);max-width:44ch;margin:0 0 2.2rem;
}
.ar-nota{font-size:.74rem;color:var(--muted);margin-top:1.4rem;letter-spacing:.04em;}

.ar-acciones{display:flex;flex-wrap:wrap;gap:.8rem;}
.ar-acciones-centro{justify-content:center;}
.ar-btn{
  font-family:'Cinzel',serif;font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;
  text-decoration:none;padding:1rem 2rem;min-height:44px;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--warm);transition:background .25s,color .25s;
}
.ar-btn-oro{background:var(--gold);color:var(--bg);}
.ar-btn-oro:hover{background:var(--gold-l);border-color:var(--gold-l);}
.ar-btn-linea{background:transparent;color:var(--warm);}
.ar-btn-linea:hover{background:rgba(197,165,90,.12);}

.ar-sec{padding:5rem 2rem;background:var(--bg);}
.ar-sec-alt{background:var(--bg2);}
.ar-sec-in{max-width:1080px;margin:0 auto;}
.ar-angosto{max-width:760px;}
.ar-sec-tit{
  font-family:'Playfair Display',serif;font-weight:400;
  font-size:clamp(1.6rem,3.6vw,2.4rem);color:var(--charcoal);margin:0 0 2.4rem;line-height:1.25;
}

.ar-grid{display:grid;gap:1.4rem;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));}
.ar-card{
  background:var(--bg3);border:1px solid rgba(197,165,90,.13);
  padding:2rem 1.7rem;transition:border-color .25s,transform .25s;
}
.ar-card:hover{border-color:rgba(197,165,90,.34);transform:translateY(-3px);}
.ar-card-n{font-family:'Cinzel',serif;font-size:.7rem;letter-spacing:.24em;color:var(--warm);margin-bottom:.9rem;}
.ar-card-t{font-family:'Playfair Display',serif;font-weight:400;font-size:1.16rem;color:var(--charcoal);margin:0 0 .8rem;line-height:1.35;}
.ar-card-p{font-size:.87rem;line-height:1.8;color:var(--ink);margin:0;}

.ar-dos{display:grid;gap:3rem;grid-template-columns:1fr 1fr;align-items:start;}
.ar-lista{list-style:none;padding:0;margin:0;}
.ar-lista li{
  position:relative;padding-left:1.6rem;margin-bottom:1rem;
  font-size:.92rem;line-height:1.75;color:var(--ink);
}
.ar-lista li::before{content:'—';position:absolute;left:0;color:var(--warm);}

.ar-marco{background:var(--bg);border-left:2px solid var(--gold);padding:1.8rem 1.8rem 1.6rem;}
.ar-marco-t{font-family:'Playfair Display',serif;font-weight:400;font-size:1.2rem;color:var(--charcoal);margin:0 0 1rem;}
.ar-marco-p{font-size:.9rem;line-height:1.85;color:var(--ink);margin:0 0 1.2rem;}
.ar-marco-aviso{font-size:.76rem;line-height:1.7;color:var(--muted);margin:0;font-style:italic;}

.ar-faq{border-top:1px solid rgba(197,165,90,.14);}
.ar-faq-item{border-bottom:1px solid rgba(197,165,90,.14);}
.ar-faq-p{
  cursor:pointer;list-style:none;padding:1.3rem 2.2rem 1.3rem 0;position:relative;
  font-family:'Playfair Display',serif;font-size:1.03rem;color:var(--charcoal);line-height:1.5;
}
.ar-faq-p::-webkit-details-marker{display:none;}
.ar-faq-p::after{content:'+';position:absolute;right:.3rem;top:1.15rem;color:var(--warm);font-size:1.3rem;line-height:1;}
.ar-faq-item[open] .ar-faq-p::after{content:'−';}
.ar-faq-r{font-size:.9rem;line-height:1.85;color:var(--ink);margin:0 0 1.5rem;padding-right:2rem;}

.ar-cta{background:var(--bg2);padding:5rem 2rem;text-align:center;}
.ar-cta-t{font-family:'Playfair Display',serif;font-weight:400;font-size:clamp(1.7rem,4vw,2.5rem);color:var(--charcoal);margin:0 0 1.1rem;}
.ar-cta-p{font-size:.95rem;line-height:1.85;color:var(--ink);max-width:52ch;margin:0 auto 2.2rem;}

.ar-otras{
  margin-top:3rem;padding-top:1.8rem;border-top:1px solid rgba(197,165,90,.14);
  display:flex;flex-wrap:wrap;gap:.9rem;justify-content:center;align-items:center;
  font-size:.82rem;color:var(--muted);
}
.ar-otras a{color:var(--steel-d);text-decoration:none;border-bottom:1px solid rgba(168,187,202,.28);}
.ar-otras a:hover{color:var(--warm);}

@media (max-width:880px){
  .ar-dos{grid-template-columns:1fr;gap:2.2rem;}
}
@media (max-width:640px){
  .ar-hero{padding:6.5rem 1.2rem 3.5rem;}
  .ar-sec,.ar-cta{padding:3.5rem 1.2rem;}
  .ar-card{padding:1.6rem 1.3rem;}
  .ar-btn{width:100%;}
  .ar-marco{padding:1.4rem 1.3rem;}
}
@media (prefers-reduced-motion:reduce){
  .ar-card{transition:none;}
  .ar-card:hover{transform:none;}
}

/* ══════════════════════════════════════════════════════════════════════════
   CÓMO TRABAJAMOS  ·  prefijo .proc-
   ══════════════════════════════════════════════════════════════════════════ */
.proc-eyebrow{
  font-family:'Cinzel',serif;font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--warm);margin-bottom:1rem;
}
.proc-tit{
  font-family:'Playfair Display',serif;font-weight:400;line-height:1.2;
  font-size:clamp(1.6rem,3.8vw,2.5rem);color:var(--charcoal);margin:0 0 1.1rem;
}
.proc-sub{font-size:.92rem;line-height:1.8;color:var(--ink);max-width:56ch;margin:0 auto;}

.proc-grid{display:grid;gap:1.3rem;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));}
.proc-paso{
  position:relative;padding:2rem 1.5rem 1.8rem;
  background:var(--bg);border:1px solid rgba(197,165,90,.12);
}
/* La línea dorada de arriba crece al pasar por encima: sugiere avance sin
   mover la caja, que en una grilla de cuatro haría bailar a las vecinas. */
.proc-paso::before{
  content:'';position:absolute;top:-1px;left:-1px;width:34px;height:2px;
  background:var(--warm);transition:width .35s;
}
.proc-paso:hover::before{width:calc(100% + 2px);}
.proc-n{font-family:'Cinzel',serif;font-size:.72rem;letter-spacing:.24em;color:var(--warm);margin-bottom:.9rem;}
.proc-t{font-family:'Playfair Display',serif;font-weight:400;font-size:1.1rem;color:var(--charcoal);margin:0 0 .8rem;line-height:1.35;}
.proc-p{font-size:.85rem;line-height:1.8;color:var(--ink);margin:0;}

/* ══════════════════════════════════════════════════════════════════════════
   LA INTRO YA NO ES UN PEAJE
   ══════════════════════════════════════════════════════════════════════════
   Durante meses la animación de 31 segundos fue lo primero que veía todo el
   mundo. La medición del propio sitio, sobre 35 visitas, dijo esto:

     · 0 personas tocaron "Ver el sitio ↓"
     · 20 visitas duraron MENOS que la intro
     · 12 se fueron sin pasar del 10% de la página

   Un tercio del tráfico se perdía antes de ver el estudio. Así que la intro
   se saca del camino sin borrarla: queda escondida y se abre desde un botón
   discreto en el hero.

   El display:none no es solo estético — mientras el elemento no se dibuja,
   sus 45 animaciones con retardo no corren. Al mostrarlo arrancan de cero,
   que es justo lo que se quiere cuando alguien la pide.
   ══════════════════════════════════════════════════════════════════════════ */
/* Con la intro abierta se bloquea el desplazamiento del fondo: si no, se
   scrollea el sitio por detrás de la animación. */

/* ══════════════════════════════════════════════════════════════════════════
   LO QUE NOS DEFINE  ·  prefijo .prin-
   ══════════════════════════════════════════════════════════════════════════
   Sin recuadros ni marcos: son tres afirmaciones, y encerrarlas en tarjetas
   las volvería "características de producto". Una regla dorada arriba de cada
   una alcanza para agruparlas.
   ══════════════════════════════════════════════════════════════════════════ */
/*
 * La estatua de la Justicia, como TEXTURA y no como ilustración.
 *
 * Es un render 3D dorado: mostrado en grande competiría con la tipografía y
 * leería como banco de imágenes. Al 7% de opacidad solo queda la silueta, que
 * es lo que aporta — y el dorado coincide con el acento del sitio.
 *
 * Va detrás de "Lo que nos define" porque es la sección que habla de ética, y
 * porque es la única de texto suelto donde hay lugar para una imagen sin que
 * moleste. En celular se oculta: ahí el texto ocupa todo el ancho y la figura
 * quedaría justo debajo de las palabras.
 */
#principios { position: relative; overflow: hidden; }
#principios::before {
  content: '';
  position: absolute;
  top: 50%; right: -4%;
  transform: translateY(-50%);
  width: 340px; height: 510px;
  background: url('/imagenes/estatua-justicia.webp') center / contain no-repeat;
  opacity: .07;
  pointer-events: none;
}
#principios > div { position: relative; z-index: 1; }

@media (max-width: 1100px) {
  /* Sin ancho de sobra, la figura se cruza con el texto. Mejor no estar. */
  #principios::before { display: none; }
}

.prin-eyebrow{
  font-family:'Cinzel',serif;font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--gold);margin-bottom:1rem;
}
.prin-tit{
  font-family:'Playfair Display',serif;font-weight:400;line-height:1.2;
  font-size:clamp(1.6rem,3.8vw,2.5rem);color:var(--cream);margin:0;
}
.prin-grid{display:grid;gap:2.4rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));}
.prin-item{border-top:1px solid rgba(197,165,90,.35);padding-top:1.4rem;}
.prin-t{
  font-family:'Cinzel',serif;font-weight:400;font-size:.72rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold);margin:0 0 .9rem;
}
.prin-p{font-size:.9rem;line-height:1.85;color:var(--ink);margin:0;}

@media (max-width:640px){
  .prin-grid{gap:1.9rem;}
}

/* ══════════════════════════════════════════════════════════════════════════
   ÁREA DESTACADA (Derecho Deportivo)  ·  prefijo .dep-
   ══════════════════════════════════════════════════════════════════════════
   Es la única sección de la portada con marco dorado completo. Ese privilegio
   sirve mientras sea UNA sola: si mañana se destacan tres áreas, dejan de
   destacarse las tres y hay que buscar otra jerarquía.
   ══════════════════════════════════════════════════════════════════════════ */
.dep-panel{
  max-width:900px;margin:0 auto;padding:3rem 3rem 2.6rem;position:relative;
  background:linear-gradient(160deg,rgba(197,165,90,.07) 0%,rgba(197,165,90,0) 55%);
  border:1px solid rgba(197,165,90,.3);
}
.dep-marca{
  position:absolute;top:-.62rem;left:2.4rem;background:var(--bg);padding:0 .8rem;
  font-family:'Cinzel',serif;font-size:.55rem;letter-spacing:.32em;text-transform:uppercase;
  color:var(--gold);
}
.dep-tit{
  font-family:'Playfair Display',serif;font-weight:400;line-height:1.15;
  font-size:clamp(1.9rem,4.6vw,3rem);color:var(--cream);margin:0 0 1.2rem;
}
.dep-lead{font-size:.95rem;line-height:1.85;color:var(--ink);max-width:62ch;margin:0 0 2rem;}

.dep-items{
  list-style:none;padding:0;margin:0 0 2.2rem;
  display:flex;flex-wrap:wrap;gap:.55rem;
}
.dep-items li{
  font-family:'Cinzel',serif;font-size:.55rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);border:1px solid rgba(197,165,90,.28);padding:.5rem .9rem;
}
.dep-cta{
  display:inline-flex;align-items:center;justify-content:center;min-height:44px;
  font-family:'Cinzel',serif;font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;
  text-decoration:none;padding:.95rem 2rem;
  background:var(--gold);color:var(--bg);border:1px solid var(--gold);
  transition:background .25s,border-color .25s;
}
.dep-cta:hover{background:var(--gold-l);border-color:var(--gold-l);}

@media (max-width:640px){
  .dep-panel{padding:2.4rem 1.3rem 2rem;}
  .dep-marca{left:1.1rem;}
  .dep-cta{width:100%;}
}

/* ══════════════════════════════════════════════════════════════════════════
   NOTAS INFORMATIVAS  ·  prefijo .nota-
   ══════════════════════════════════════════════════════════════════════════
   Estas páginas son para LEER, no para escanear. Por eso van a una sola
   columna angosta, con más interlineado y tipografía más grande que el resto
   del sitio: 65 caracteres por renglón es donde el ojo deja de perderse al
   volver al margen.
   ══════════════════════════════════════════════════════════════════════════ */
.nota { max-width: 720px; margin: 0 auto; padding: 8.5rem 1.5rem 4rem; }

.nota-cabecera { margin-bottom: 3rem; }
.nota-h1 {
  font-family: 'Playfair Display', serif; font-weight: 400; line-height: 1.14;
  font-size: clamp(1.9rem, 5vw, 3.1rem); color: var(--cream); margin: 0 0 1.2rem;
}
.nota-bajada {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.1rem, 2.4vw, 1.4rem); line-height: 1.7;
  color: var(--ink); margin: 0 0 1.4rem;
}
.nota-fecha { font-size: .78rem; color: var(--muted); margin: 0; letter-spacing: .04em; }

.nota-cuerpo { font-size: 1.02rem; line-height: 1.95; color: var(--ink); }
.nota-entrada {
  font-size: 1.12rem; line-height: 1.85; color: var(--cream);
  padding-bottom: 2rem; margin-bottom: 1rem;
  border-bottom: 1px solid rgba(197, 165, 90, .16);
}
.nota-seccion { margin-bottom: 2.6rem; }
.nota-seccion h2 {
  font-family: 'Playfair Display', serif; font-weight: 400;
  font-size: clamp(1.35rem, 3vw, 1.8rem); color: var(--cream);
  margin: 0 0 1.1rem; line-height: 1.3;
}
.nota-cuerpo p { margin: 0 0 1.3rem; }

.nota-lista { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.nota-lista li {
  position: relative; padding: .55rem 0 .55rem 1.5rem;
  border-bottom: 1px solid rgba(197, 165, 90, .1);
}
.nota-lista li::before {
  content: ''; position: absolute; left: 0; top: 1.35rem;
  width: 9px; height: 1px; background: var(--gold);
}

/* El aviso de que esto no es asesoramiento. Se ve, no se esconde. */
.nota-aviso {
  background: var(--bg2);
  border-left: 2px solid var(--gold);
  padding: 1.3rem 1.4rem;
  margin: 3rem 0 0;
}
.nota-aviso p { margin: 0; font-size: .92rem; line-height: 1.8; color: var(--ink); }
.nota-aviso strong { color: var(--cream); font-weight: 400; }

.nota-preguntas { margin-top: 4rem; }
.nota-preguntas h2 {
  font-family: 'Playfair Display', serif; font-weight: 400;
  font-size: clamp(1.4rem, 3vw, 1.9rem); color: var(--cream); margin: 0 0 1.6rem;
}

.nota-cierre {
  margin-top: 4rem; padding-top: 2.5rem;
  border-top: 1px solid rgba(197, 165, 90, .16);
  text-align: center;
}
.nota-cierre h2 {
  font-family: 'Playfair Display', serif; font-weight: 400;
  font-size: clamp(1.4rem, 3.2vw, 2rem); color: var(--cream); margin: 0 0 1rem;
}
.nota-cierre p { color: var(--ink); max-width: 52ch; margin: 0 auto 1.8rem; }
.nota-cierre .ar-nota a { color: var(--steel-d); }
.nota-cierre .ar-nota a:hover { color: var(--gold); }

/* "Seguir leyendo": va ANTES del cierre a propósito. Quien todavía está
   entendiendo qué le pasó no quiere que le ofrezcan una consulta: quiere leer
   otra cosa. La invitación a consultar queda después, para quien ya leyó. */
.nota-relacionadas { margin-top: 4rem; }
.nota-relacionadas h2 {
  font-family: 'Playfair Display', serif; font-weight: 400;
  font-size: 1.35rem; color: var(--cream); margin: 0 0 1.2rem;
}
.nota-relacionadas ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .9rem; }
.nota-relacionadas li {
  border-left: 2px solid rgba(197,165,90,.25);
  padding: .2rem 0 .2rem 1rem;
}
.nota-relacionadas a { color: var(--cream); text-decoration: none; font-size: 1.02rem; line-height: 1.5; }
.nota-relacionadas a:hover { color: var(--gold); }
.nota-rel-area {
  display: block; margin-top: .25rem;
  font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}

/* Enlace desde la landing del área hacia sus notas. */
.ar-notas { margin-top: 3rem; padding-top: 1.8rem; border-top: 1px solid rgba(197, 165, 90, .14); }
.ar-notas-t {
  font-family: 'Cinzel', serif; font-size: .58rem; letter-spacing: .28em;
  text-transform: uppercase; color: var(--gold); margin: 0 0 1rem;
}
.ar-notas ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .8rem; }
.ar-notas a {
  color: var(--cream); text-decoration: none; font-size: .95rem;
  border-bottom: 1px solid rgba(197, 165, 90, .25); padding-bottom: 3px;
}
.ar-notas a:hover { color: var(--gold); border-bottom-color: var(--gold); }

@media (max-width: 640px) {
  .nota { padding: 6.5rem 1.2rem 3rem; }
  .nota-cuerpo { font-size: .98rem; }
}

/* Enlace a la landing del área, dentro de la tarjeta de servicios. */
.svc-mas{
  display:inline-block;margin-top:1rem;text-decoration:none;
  font-family:'Cinzel',serif;font-size:.55rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--warm);border-bottom:1px solid rgba(197,165,90,.35);padding-bottom:2px;
}
.svc-mas:hover{color:var(--warm-l);border-bottom-color:var(--warm-l);}

@media (max-width:640px){
  .proc-paso{padding:1.5rem 1.2rem;}
}
@media (prefers-reduced-motion:reduce){
  .proc-paso::before{transition:none;}
  .proc-paso:hover::before{width:34px;}
}

/* ══════════════════════════════════════════════════════════════════════════
   TELÉFONO: APILAR LO QUE EN ESCRITORIO VA EN COLUMNAS
   ══════════════════════════════════════════════════════════════════════════
   Estas reglas alcanzan a cuadrículas declaradas en el atributo style del
   HTML, y por eso el selector es por [style*=…] y lleva !important: es la
   única forma de ganarle a un estilo en línea sin tocar las 16 páginas.

   ⚠ NO BORRAR. Un limpiador automático de CSS no las reconoce como "en uso"
   —no nombran ninguna clase— y ya se las llevó una vez, el 5/9/26. El sitio
   quedó dos días en dos columnas en el teléfono. scripts/revisar.mjs ahora
   comprueba que existan. */
@media(max-width:900px){
  #inicio>div>div[style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr !important;gap:2rem !important;}
  #contacto>div[style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr !important;gap:2rem !important;}
  #equipo>div>div[style*="grid-template-columns:repeat(3,1fr)"]{grid-template-columns:1fr !important;}
}

/* Los pares de campos del formulario, uno debajo del otro. */
@media(max-width:768px){.form-row{grid-template-columns:1fr;}}