/* =============================================================================
   isthemis · sistema de diseño «Encargo»
   -----------------------------------------------------------------------------
   Un despacho que publica sus honorarios. Lo que tiene que transmitir la web es
   SEGURIDAD: solidez, orden y compromiso por escrito. Tres decisiones mandan:

   1. PAPEL BLANCO, TINTA NEGRA, ORO. El blanco es el sustrato; el negro se usa en
      bandas enteras que marcan los momentos importantes, y ahí el oro brilla. El
      oro nunca es amarillo de oferta: es un oro profundo, de sello.
   2. EL PRECIO SE VE Y SE FIRMA. Cada importe aparece junto a lo que incluye y lo
      que NO incluye, con el mismo cuerpo de letra. Esa simetría es la prueba
      visual de que no hay letra pequeña.
   3. NINGÚN COLOR LITERAL FUERA DE :root.

   Tipografías (locales, sin CDN):
     Archivo Variable ...... titulares y cifras. Grotesca con autoridad.
     Geist Variable ........ texto e interfaz.
     Source Serif 4 ........ el lema, las citas y el cotizador (NO Instrument Serif: es condensada).
   ========================================================================== */

@font-face{font-family:Archivo;src:url('/fonts/archivo.woff2') format('woff2-variations');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:Geist;src:url('/fonts/geist.woff2') format('woff2-variations');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Source Serif 4';src:url('/fonts/source-serif.woff2') format('woff2-variations');font-weight:200 900;font-style:normal;font-display:swap}

:root{
  /* ---- papel ---- */
  --papel:#ffffff;
  --papel-2:#faf7f1;          /* banda alterna, hueso cálido */
  --papel-3:#f3ece0;
  --linea:#e7e2d8;
  --linea-2:#d5cec0;
  --linea-3:#b9b0a0;

  /* ---- tinta ---- */
  --tinta:#0d0f12;            /* 18,9:1 sobre papel */
  --tinta-2:#474d57;          /* 8,2:1 · texto secundario */
  --tinta-3:#77808e;          /* 4,6:1 · etiquetas y microcopy */

  /* ---- oro: único acento. Dos versiones porque el oro claro no contrasta ---- */
  --oro:#a07620;              /* 4,7:1 sobre papel · vale para texto */
  --oro-2:#8a651a;            /* estado activo sobre papel */
  --oro-luz:#d9b45c;          /* el oro, sobre negro */
  --oro-suave:#f7efda;        /* fondos de acento */
  --oro-linea:#e3d3a6;

  /* ---- bandas oscuras ---- */
  --noche:#0d0f12;
  --noche-2:#171a20;
  --noche-linea:#2a2f38;
  --noche-txt:#f4f1ea;
  --noche-txt-2:#b3b8c2;

  /* ---- tipografía ---- */
  --display:Archivo,'Helvetica Neue',system-ui,sans-serif;
  --sans:Geist,system-ui,-apple-system,'Segoe UI',sans-serif;
  --serif:'Source Serif 4',Georgia,'Times New Roman',serif;

  --t-display:clamp(2.4rem,1.15rem + 4.2vw,4.7rem);
  --t-h1:clamp(2.05rem,1.25rem + 2.7vw,3.4rem);
  --t-h2:clamp(1.68rem,1.2rem + 1.7vw,2.5rem);
  --t-h3:clamp(1.13rem,1.02rem + .45vw,1.36rem);
  --t-lead:clamp(1.02rem,.97rem + .25vw,1.16rem);
  --t-small:.875rem;
  --t-label:.7rem;

  /* ---- ritmo ---- */
  --gap:clamp(16px,2vw,28px);
  --pad-x:clamp(20px,4.2vw,68px);
  --sec-y:clamp(56px,7.5vw,120px);
  --sec-y-s:clamp(40px,5vw,82px);
  --ancho:1300px;

  /* ---- forma: esquinas casi rectas. Un despacho no tiene esquinas de juguete ---- */
  --r-s:4px;
  --r:6px;
  --r-l:10px;
  --r-xl:14px;

  /* ---- movimiento ---- */
  --ease:cubic-bezier(.2,.65,.25,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --t-fast:140ms;
  --t-med:280ms;
  --t-slow:600ms;

  color-scheme:light;
}

/* =============================== base =================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--papel);color:var(--tinta);font-family:var(--sans);font-size:1rem;line-height:1.62;
  font-synthesis-weight:none;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg,canvas{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
p{margin:0 0 1em}
::selection{background:var(--oro-suave);color:var(--tinta)}
:focus-visible{outline:2px solid var(--oro);outline-offset:3px;border-radius:3px}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--tinta);color:var(--papel);padding:12px 20px;font-weight:600}
.skip:focus{left:0}

.wrap{width:min(100% - (var(--pad-x) * 2),var(--ancho));margin-inline:auto}
.wrap--txt > *{max-width:72ch}

/* ============================ tipografía ================================ */
.display,.h1,.h2,.h3{font-family:var(--display);font-weight:700;letter-spacing:-.032em;line-height:1.04;margin:0 0 .4em;text-wrap:balance}
.display{font-size:var(--t-display);letter-spacing:-.038em;line-height:1.01}
.h1{font-size:var(--t-h1)}
.h2{font-size:var(--t-h2);line-height:1.06}
.h3{font-size:var(--t-h3);font-weight:650;letter-spacing:-.018em;line-height:1.22}
.lead{font-size:var(--t-lead);color:var(--tinta-2);max-width:62ch;line-height:1.65}
.lead--xl{font-size:clamp(1.08rem,1rem + .45vw,1.3rem);color:var(--tinta);line-height:1.5;max-width:46ch}
.small{font-size:var(--t-small);color:var(--tinta-2)}
.mute{color:var(--tinta-3)}
.oro{color:var(--oro)}
/* El lema y las citas: la voz serena del despacho, en serif */
.lema{font-family:var(--serif);font-weight:400;font-size:clamp(1.18rem,1rem + .9vw,1.72rem);line-height:1.38;
  letter-spacing:-.008em;color:var(--tinta);max-width:34ch}

.label{font-size:var(--t-label);font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--tinta-3);
  display:inline-flex;align-items:center;gap:10px;margin:0 0 18px}
.label--oro{color:var(--oro)}
.label--linea::before{content:"";width:24px;height:1px;background:var(--oro);flex:none}

/* ============================ estructura ================================ */
.sec{padding-block:var(--sec-y);position:relative}
.sec--s{padding-block:var(--sec-y-s)}
.sec--bg{background:var(--papel-2)}
.sec--top{padding-top:clamp(28px,4vw,54px)}
/* Banda oscura: los momentos en los que el sitio baja la voz y el oro brilla */
.sec--noche{background:var(--noche);color:var(--noche-txt)}
.sec--noche .lead,.sec--noche .small{color:var(--noche-txt-2)}
.sec--noche .label{color:var(--oro-luz)}
.sec--noche .h2,.sec--noche .display,.sec--noche .h3,.sec--noche .lema{color:var(--noche-txt)}
.sec--noche .panel{background:var(--noche-2);border-color:var(--noche-linea)}
.sec__head{max-width:56ch;margin-bottom:clamp(28px,4vw,54px)}
.sec__head .lead{margin-bottom:0}

/* ============================== cabecera ================================ */
.hdr{position:sticky;top:0;z-index:80;background:color-mix(in srgb,var(--papel) 90%,transparent);
  backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:border-color var(--t-med) var(--ease)}
.hdr.is-fija{border-bottom-color:var(--linea)}
.hdr__in{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:70px}
.marca{display:inline-flex;align-items:center;gap:10px;font-family:var(--display);font-size:1.32rem;font-weight:700;letter-spacing:-.04em}
.marca svg{flex:none;color:var(--oro)}
.nav{display:flex;align-items:center;gap:clamp(12px,1.7vw,28px)}
.nav a:not(.btn){font-size:.93rem;color:var(--tinta-2);transition:color var(--t-fast)}
.nav a:not(.btn):hover{color:var(--tinta)}
.nav a:not(.btn)[aria-current]{color:var(--oro);font-weight:600}
.nav__cta{margin-left:6px}
.burger{display:none;width:42px;height:38px;border:1px solid var(--linea-2);border-radius:var(--r-s);background:none;color:var(--tinta);
  flex-direction:column;align-items:center;justify-content:center;gap:5px;cursor:pointer}
.burger span{display:block;width:17px;height:1.5px;background:currentColor;transition:transform var(--t-med) var(--ease)}
.burger[aria-expanded=true] span:first-child{transform:translateY(3.25px) rotate(45deg)}
.burger[aria-expanded=true] span:last-child{transform:translateY(-3.25px) rotate(-45deg)}
@media (max-width:980px){
  .burger{display:flex}
  .nav{position:fixed;inset:70px 0 auto;flex-direction:column;align-items:stretch;gap:0;background:var(--papel);
    border-bottom:1px solid var(--linea-2);padding:6px var(--pad-x) 22px;box-shadow:0 20px 40px -30px rgba(13,15,18,.4);
    transform:translateY(-10px);opacity:0;visibility:hidden;transition:var(--t-med) var(--ease)}
  .nav.abierta{transform:none;opacity:1;visibility:visible}
  .nav a:not(.btn){padding:15px 0;border-bottom:1px solid var(--linea);font-size:1.02rem;color:var(--tinta)}
  .nav__cta{margin:16px 0 0;justify-content:center}
}

/* =============================== botones ================================ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:13px 24px;border-radius:var(--r-s);
  border:1px solid transparent;cursor:pointer;font-family:var(--sans);font-size:.94rem;font-weight:600;
  white-space:nowrap;transition:background var(--t-fast),border-color var(--t-fast),color var(--t-fast),box-shadow var(--t-med),transform var(--t-fast)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.3;pointer-events:none}
.btn--oro{background:var(--oro);color:#fff}
.btn--oro:hover{background:var(--oro-2);box-shadow:0 10px 24px -14px rgba(160,118,32,.9)}
.btn--tinta{background:var(--tinta);color:var(--papel)}
.btn--tinta:hover{background:#000;box-shadow:0 12px 26px -16px rgba(13,15,18,.8)}
.btn--ghost{border-color:var(--linea-2);color:var(--tinta);background:var(--papel)}
.btn--ghost:hover{border-color:var(--tinta)}
.btn--claro{background:var(--papel);color:var(--tinta)}
.btn--claro:hover{background:var(--oro-luz)}
.btn--s{padding:9px 16px;font-size:.86rem}
.btn--full{width:100%}
.btns{display:flex;flex-wrap:wrap;gap:10px}
.enlace{display:inline-flex;align-items:center;gap:7px;color:var(--oro);font-weight:600;font-size:.94rem}
.enlace::after{content:"→";transition:transform var(--t-med) var(--ease)}
.enlace:hover{color:var(--oro-2)}
.enlace:hover::after{transform:translateX(5px)}
.sec--noche .enlace{color:var(--oro-luz)}

/* ============================== LA CIFRA ================================ */
/* El precio, compuesto como la cantidad de una escritura: número en tinta y
   símbolo en oro. Tabular para que al recalcular no baile ni un píxel. */
.cifra{font-family:var(--display);font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.04em;
  line-height:.95;display:inline-flex;align-items:baseline;gap:0;color:var(--tinta)}
.cifra__n{font-size:inherit}
.cifra__sim{font-size:.68em;margin-left:.1em;color:var(--oro)}
.cifra__iva{font-family:var(--sans);font-size:max(.64rem,.2em);font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--tinta-3);white-space:nowrap;margin-left:1em;align-self:flex-end;padding-bottom:.45em}
.cifra--xl{font-size:clamp(3.2rem,2rem + 4.6vw,5.8rem)}
.cifra--l{font-size:clamp(2.3rem,1.6rem + 2.5vw,3.4rem)}
.cifra--m{font-size:1.66rem}
.cifra--s{font-size:1.04rem;letter-spacing:-.025em}
.cifra--s .cifra__sim{font-size:.8em}
.sec--noche .cifra{color:var(--noche-txt)}
.sec--noche .cifra__sim{color:var(--oro-luz)}

/* ============================== paneles ================================= */
.panel{background:var(--papel);border:1px solid var(--linea);border-radius:var(--r-l);padding:clamp(20px,2.4vw,30px);position:relative}
.panel--oro{border-color:var(--oro-linea);background:linear-gradient(180deg,var(--oro-suave),var(--papel) 60%)}
.panel--sombra{box-shadow:0 1px 2px rgba(13,15,18,.04),0 26px 50px -38px rgba(13,15,18,.4)}
.panel__cab{display:flex;align-items:center;justify-content:space-between;gap:14px;font-size:var(--t-label);font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-3);padding-bottom:14px;margin-bottom:16px;border-bottom:1px solid var(--linea)}
.panel__pie{display:flex;flex-wrap:wrap;gap:6px 20px;justify-content:space-between;margin-top:18px;padding-top:14px;
  border-top:1px solid var(--linea);font-size:var(--t-small);color:var(--tinta-2)}
.panel__pie b{color:var(--tinta);font-weight:600}

/* El sello: un precio publicado es un compromiso, no una estimación */
.sello{display:inline-flex;align-items:center;gap:8px;font-size:var(--t-label);font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--oro)}
.sello::before{content:"";width:13px;height:13px;flex:none;border:1.5px solid var(--oro);border-radius:50%;
  background:radial-gradient(circle at 50% 50%,var(--oro) 0 3px,transparent 3.5px)}
.sec--noche .sello{color:var(--oro-luz)}
.sec--noche .sello::before{border-color:var(--oro-luz);background:radial-gradient(circle at 50% 50%,var(--oro-luz) 0 3px,transparent 3.5px)}

/* ============================== tarjetas ================================ */
.rejilla{display:grid;gap:var(--gap)}
.rejilla--2{grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr))}
.rejilla--3{grid-template-columns:repeat(auto-fill,minmax(min(100%,288px),1fr))}
.rejilla--4{grid-template-columns:repeat(auto-fill,minmax(min(100%,222px),1fr))}

.tarjeta{display:flex;flex-direction:column;gap:9px;background:var(--papel);border:1px solid var(--linea);border-radius:var(--r);
  padding:20px;transition:border-color var(--t-fast),box-shadow var(--t-med),transform var(--t-med) var(--ease)}
.tarjeta:hover{border-color:var(--linea-3);box-shadow:0 14px 30px -24px rgba(13,15,18,.45);transform:translateY(-2px)}
.tarjeta h3{font-family:var(--display);font-size:1.08rem;font-weight:650;letter-spacing:-.02em;line-height:1.2;margin:0}
.tarjeta p{color:var(--tinta-2);font-size:.9rem;line-height:1.5;margin:0;flex:1}
.tarjeta__precio{display:flex;align-items:baseline;gap:7px;margin-top:8px;padding-top:12px;border-top:1px solid var(--linea)}
.tarjeta__precio .cifra{font-size:1.22rem}
.tarjeta__precio small{font-size:.66rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--tinta-3)}
.sec--noche .tarjeta{background:var(--noche-2);border-color:var(--noche-linea);color:var(--noche-txt)}
.sec--noche .tarjeta p{color:var(--noche-txt-2)}

/* ============================== listas ================================== */
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.ticks li{position:relative;padding-left:26px;color:var(--tinta-2);font-size:.93rem;line-height:1.5}
.ticks li::before{content:"";position:absolute;left:3px;top:.46em;width:10px;height:5.5px;
  border-left:1.8px solid var(--oro);border-bottom:1.8px solid var(--oro);transform:rotate(-45deg)}
.ticks--no li::before{border:0;border-top:1.8px solid var(--linea-3);width:11px;height:0;top:.72em;transform:none}
.sec--noche .ticks li{color:var(--noche-txt-2)}
.sec--noche .ticks li::before{border-color:var(--oro-luz)}

.filas{display:grid}
.fila{display:flex;align-items:baseline;gap:14px;padding:13px 0;border-bottom:1px solid var(--linea);
  transition:padding-inline var(--t-med) var(--ease),background var(--t-fast)}
a.fila:hover{background:var(--papel-2);padding-inline:12px}
a.fila:hover .fila__p{color:var(--oro-2)}
.fila__t{flex:1;font-size:.96rem}
.fila__t small{display:block;color:var(--tinta-3);font-size:.8rem;margin-top:2px}
.fila__p{font-family:var(--display);font-weight:700;font-variant-numeric:tabular-nums;font-size:1.02rem;
  letter-spacing:-.02em;color:var(--tinta);white-space:nowrap}

/* ============================ migas de pan ============================== */
.migas{border-bottom:1px solid var(--linea);background:var(--papel-2)}
.migas ol{list-style:none;display:flex;flex-wrap:wrap;gap:7px;margin:0;padding:11px 0;font-size:.76rem;color:var(--tinta-3)}
.migas li+li::before{content:"/";margin-right:7px;color:var(--linea-2)}
.migas a:hover{color:var(--oro)}
.migas [aria-current]{color:var(--tinta-2)}

/* =============================== datos ================================== */
.datos{display:flex;flex-wrap:wrap;gap:clamp(18px,3vw,42px);padding-top:22px;border-top:1px solid var(--linea)}
.datos b{display:block;font-family:var(--display);font-size:1.45rem;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.datos span{font-size:var(--t-label);font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--tinta-3)}
.sec--noche .datos{border-color:var(--noche-linea)}
.sec--noche .datos span{color:var(--noche-txt-2)}

.ficha{display:grid;gap:0;margin:0}
.ficha div{padding:11px 0;border-top:1px solid var(--linea)}
.ficha div:first-child{border-top:0;padding-top:0}
.ficha dt{font-size:var(--t-label);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-3)}
.ficha dd{margin:4px 0 0;font-size:.96rem;line-height:1.45}

/* =============================== FAQ ==================================== */
.faq{border-top:1px solid var(--linea)}
.faq details{border-bottom:1px solid var(--linea)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:flex-start;gap:20px;
  padding:19px 0;font-family:var(--display);font-size:1.05rem;font-weight:650;letter-spacing:-.018em}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--oro)}
.faq__mas{position:relative;flex:none;width:15px;height:15px;margin-top:6px}
.faq__mas::before,.faq__mas::after{content:"";position:absolute;background:var(--oro);transition:transform var(--t-med) var(--ease)}
.faq__mas::before{top:6.75px;left:0;width:15px;height:1.5px}
.faq__mas::after{top:0;left:6.75px;width:1.5px;height:15px}
.faq details[open] .faq__mas::after{transform:rotate(90deg)}
.faq p{color:var(--tinta-2);max-width:74ch;margin:0 0 20px}

/* ============================= formularios ============================== */
.campos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:14px}
.campo{display:block}
.campo>span{display:block;font-size:var(--t-label);font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tinta-3);margin-bottom:7px}
.campo input,.campo select,.campo textarea{width:100%;padding:12px 14px;border:1px solid var(--linea-2);border-radius:var(--r-s);
  background:var(--papel);color:var(--tinta);font:inherit;font-size:.95rem;transition:border-color var(--t-fast),box-shadow var(--t-fast)}
.campo textarea{min-height:120px;resize:vertical}
.campo input:hover,.campo select:hover,.campo textarea:hover{border-color:var(--linea-3)}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:none;border-color:var(--oro);box-shadow:0 0 0 3px var(--oro-suave)}
.campo select{appearance:none;padding-right:36px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2377808e' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center}
.check{display:flex;gap:11px;align-items:flex-start;font-size:.86rem;color:var(--tinta-2);line-height:1.5;margin-top:18px}
.check input{margin-top:3px;width:16px;height:16px;accent-color:var(--oro);flex:none}
.check a{color:var(--oro)}
.trampa{position:absolute;left:-9999px}
.errores{border:1px solid #d9b8b2;background:#fbf2f0;border-radius:var(--r-s);padding:13px 16px;margin-bottom:18px;font-size:.88rem;color:#8c2f1f}
.errores ul{margin:0;padding-left:18px}

/* ============================ banda de CTA ============================== */
.cta{background:var(--noche);color:var(--noche-txt);padding-block:clamp(44px,6vw,84px);position:relative;overflow:hidden}
.cta__in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:30px;position:relative;z-index:1}
.cta .h2{color:var(--noche-txt);max-width:20ch}
.cta .lead{color:var(--noche-txt-2);max-width:48ch;margin:0}
.cta .label{color:var(--oro-luz)}

/* ================================ pie =================================== */
.pie{border-top:1px solid var(--linea);padding-block:clamp(44px,5.5vw,74px) 26px;font-size:.9rem;color:var(--tinta-2);background:var(--papel-2)}
.pie__top{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:clamp(22px,3vw,46px);padding-bottom:34px;border-bottom:1px solid var(--linea)}
.pie h2{font-size:var(--t-label);font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--tinta);margin:0 0 14px}
.pie ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.pie a{color:var(--tinta-2);font-size:.87rem}
.pie a:hover{color:var(--oro)}
.pie__bajo{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;padding-top:22px;font-size:.76rem;color:var(--tinta-3)}
.pie__bajo p{margin:0}
@media (max-width:900px){.pie__top{grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr))}}

/* ============================== revelado ================================ */
.js .rev{opacity:0;transform:translateY(16px)}
.js .rev.visto{opacity:1;transform:none;transition:opacity var(--t-slow) var(--ease-out),transform var(--t-slow) var(--ease-out);
  transition-delay:calc(var(--i,0) * 70ms)}
@media (prefers-reduced-motion:reduce){
  .js .rev{opacity:1;transform:none}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ================================ HERO ==================================
   Lo primero que se ve, en una pantalla: el lema, la diosa y el cotizador. La
   diosa no va "al lado": es la textura del papel, grande y sangrada por la
   derecha, detrás del cotizador. Así acompaña sin competir. */
.hero{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--papel) 0%,var(--papel-2) 100%);
  border-bottom:1px solid var(--linea);padding-block:clamp(26px,3.4vw,50px) clamp(36px,4.6vw,66px);isolation:isolate}
.hero__agua{position:absolute;right:max(-6vw,-90px);top:-4%;width:clamp(360px,46vw,760px);z-index:0;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 62%,transparent 96%),linear-gradient(90deg,transparent 0%,#000 22%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(180deg,#000 0%,#000 62%,transparent 96%),linear-gradient(90deg,transparent 0%,#000 22%);
  mask-composite:intersect;animation:agua 1.6s var(--ease-out) both}
.hero__agua img{width:100%;height:auto}
@keyframes agua{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.hero__in{position:relative;z-index:1}
.hero__lema{max-width:none;margin-bottom:clamp(22px,3vw,40px)}
.hero__lema .display{margin-bottom:.3em;max-width:12ch;font-size:clamp(2.3rem,1.2rem + 3.4vw,4.2rem)}
.hero__lema .lead{margin:0;max-width:44ch}
.hero__datos{margin-top:clamp(22px,2.6vw,34px)}
@media (max-width:900px){
  .hero__agua{width:min(96vw,520px);right:-18vw;top:-2%;opacity:.72;
    -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 38%,transparent 72%),linear-gradient(90deg,transparent 0%,#000 30%);
    mask-image:linear-gradient(180deg,#000 0%,#000 38%,transparent 72%),linear-gradient(90deg,transparent 0%,#000 30%)}
  .hero__lema .display{max-width:none}
  .hero__lema .lead{max-width:34ch}
}
@media (prefers-reduced-motion:reduce){.hero__agua{animation:none}}

/* ============================= EL COTIZADOR =============================
   La pieza central. Una hoja, no un formulario: el campo del caso es grande y
   sin caja, el micrófono es el de una app de mensajes, y el precio aparece
   como la cantidad de una escritura. */
.cot{position:relative;background:var(--papel);border:1px solid var(--linea-2);border-radius:var(--r-xl);overflow:hidden;
  max-width:980px;
  box-shadow:0 1px 2px rgba(13,15,18,.05),0 2px 6px rgba(13,15,18,.04),0 48px 90px -60px rgba(13,15,18,.55)}
/* filete dorado superior: la firma de la pieza */
.cot::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,var(--oro),var(--oro-luz) 60%,var(--oro-suave));z-index:1}
.cot__cab{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:20px clamp(20px,2.6vw,32px) 0}
.cot__titulo{margin:0;font-family:var(--serif);font-weight:500;font-size:clamp(1.3rem,1.15rem + .7vw,1.72rem);line-height:1.15;letter-spacing:-.006em;color:var(--tinta)}

.cot__caso{padding:14px clamp(20px,2.6vw,32px) clamp(18px,2.4vw,26px)}
.cot__campo{position:relative}
.cot__campo textarea{width:100%;min-height:96px;padding:16px 74px 16px 0;border:0;border-bottom:1px solid var(--linea-2);border-radius:0;
  background:transparent;color:var(--tinta);font-family:var(--serif);font-size:clamp(1.08rem,1rem + .45vw,1.32rem);line-height:1.55;
  resize:none;transition:border-color var(--t-fast)}
.cot__campo textarea::placeholder{color:var(--tinta-3);opacity:1}
.cot__campo textarea:focus{outline:none;border-bottom-color:var(--oro)}
.cot__campo textarea:focus + .mic{border-color:var(--oro)}

/* Micrófono: circular, dorado, como el de WhatsApp */
.mic{position:absolute;right:0;bottom:14px;width:56px;height:56px;border-radius:50%;border:1px solid var(--oro-linea);
  background:linear-gradient(180deg,var(--papel),var(--oro-suave));color:var(--oro-2);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  box-shadow:0 8px 20px -12px rgba(160,118,32,.7);transition:transform var(--t-fast),box-shadow var(--t-med),background var(--t-fast)}
.mic svg{width:24px;height:24px}
.mic:hover{transform:translateY(-1px);box-shadow:0 12px 26px -12px rgba(160,118,32,.9);background:var(--oro-suave)}
.mic:active{transform:scale(.96)}
.mic[hidden]{display:none}
@media (max-width:640px){
  .cot__campo textarea{min-height:124px;padding-right:0;padding-bottom:64px}
  .mic{width:50px;height:50px;bottom:8px}
  .mic svg{width:22px;height:22px}
}

/* Modo grabación: sustituye al campo. Papelera · punto rojo · tiempo · onda · enviar */
.cot__grabando{display:flex;align-items:center;gap:14px;min-height:96px;padding:12px 0;border-bottom:1px solid var(--oro)}
.cot__grabando[hidden]{display:none}
.cot__descartar,.cot__enviar-audio{flex:none;width:46px;height:46px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  transition:transform var(--t-fast),background var(--t-fast)}
.cot__descartar{border:1px solid var(--linea-2);background:var(--papel);color:var(--tinta-3)}
.cot__descartar:hover{color:#b4392c;border-color:#b4392c}
.cot__enviar-audio{border:0;background:var(--oro);color:#fff;width:56px;height:56px;box-shadow:0 10px 24px -12px rgba(160,118,32,.9)}
.cot__enviar-audio:hover{background:var(--oro-2);transform:translateY(-1px)}
.cot__punto{width:10px;height:10px;border-radius:50%;background:#c0392b;flex:none;animation:latir 1.1s ease-in-out infinite}
@keyframes latir{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.8)}}
.cot__tiempo{font-family:var(--display);font-weight:700;font-variant-numeric:tabular-nums;font-size:1rem;color:var(--tinta);flex:none;min-width:3.2ch}
.cot__onda{flex:1;min-width:0;height:56px;display:block}

.cot__acc{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:16px}
.cot__estado{margin:0;font-size:.86rem;color:var(--tinta-3);flex:1;min-width:220px}
.cot__estado.trabajando{color:var(--oro-2);font-weight:600}
.cot__estado.trabajando::after{content:"";display:inline-block;width:14px;height:14px;margin-left:8px;vertical-align:-2px;border-radius:50%;
  border:2px solid var(--oro-linea);border-top-color:var(--oro);animation:girar .8s linear infinite}
@keyframes girar{to{transform:rotate(360deg)}}

/* ---- el resultado ---- */
.cot__res{border-top:1px solid var(--linea);background:var(--papel-2);scroll-margin-top:96px;padding:clamp(20px,2.6vw,30px) clamp(20px,2.6vw,32px)}
.cot__res[hidden],.cot__datos[hidden]{display:none}
.cot__resumen{margin:0 0 18px;font-family:var(--serif);font-size:clamp(1.08rem,1rem + .42vw,1.3rem);line-height:1.45;color:var(--tinta);max-width:52ch}
.cot__resumen:empty{display:none}
.cot__precio{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(18px,3vw,40px);align-items:end;
  padding:18px 0 20px;border-top:1px solid var(--linea);border-bottom:1px solid var(--linea)}
.cot__precio .label{display:flex;margin-bottom:8px}
.cot__precio .cifra{display:flex}
.cot__modalidad{margin:10px 0 0;font-size:.9rem;font-weight:600;color:var(--oro-2)}
.cot__meta{margin:0;display:grid;gap:10px}
.cot__meta div{display:grid;grid-template-columns:104px 1fr;gap:12px;align-items:baseline;font-size:.92rem}
.cot__meta dt{font-size:var(--t-label);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-3)}
.cot__meta dd{margin:0;font-weight:600;color:var(--tinta)}
.cot__meta .enlace{display:inline}
.cot__meta .enlace::after{display:inline-block;margin-left:6px}
@media (max-width:760px){.cot__precio{grid-template-columns:1fr}.cot__meta div{grid-template-columns:100px 1fr}}
.cot__aviso{margin:16px 0 0;padding:12px 16px;border-left:2px solid var(--oro);background:var(--oro-suave);font-size:.9rem;color:var(--tinta);border-radius:0 var(--r-s) var(--r-s) 0}
.cot__aviso[hidden]{display:none}
.cot__detalles{margin-top:6px}
.cot__detalle{border-bottom:1px solid var(--linea);padding:12px 0}
.cot__detalle:last-child{border-bottom:0}
.cot__detalle summary{cursor:pointer;font-size:.9rem;font-weight:600;color:var(--tinta-2);list-style:none;display:flex;align-items:center;gap:8px}
.cot__detalle summary::-webkit-details-marker{display:none}
.cot__detalle summary::before{content:"+";color:var(--oro);font-weight:700;width:12px;display:inline-block}
.cot__detalle[open] summary::before{content:"–"}
.cot__detalle summary:hover{color:var(--oro-2)}

/* Preguntas de afinado: se responden con un toque */
.afinar{border:1px solid var(--oro-linea);background:var(--papel);border-radius:var(--r);padding:16px 18px;margin:22px 0 0}
.afinar[hidden]{display:none}
.afinar .label{margin-bottom:12px}
/* Mientras se recalcula con una respuesta, las opciones no admiten otro toque */
.afinar.pensando .opcion{opacity:.45;pointer-events:none}
.afinar__estado{margin:-4px 0 14px;font-size:.88rem;line-height:1.45;color:var(--tinta-2)}
.afinar__estado[hidden]{display:none}
.afinar__estado--pensando{color:var(--oro-2);font-weight:600}
.afinar__estado--pensando::after{content:"";display:inline-block;width:13px;height:13px;margin-left:8px;vertical-align:-2px;border-radius:50%;
  border:2px solid var(--oro-linea);border-top-color:var(--oro);animation:girar .8s linear infinite}
.afinar__estado--cambio{padding:10px 14px;border-left:2px solid var(--oro);background:var(--oro-suave);color:var(--tinta);font-weight:600;border-radius:0 var(--r-s) var(--r-s) 0}
.afinar__estado--error{color:#b4392c;font-weight:600}
/* Lo ya contestado queda debajo, compacto y con su marca */
.pregunta--hecha .pregunta__t{color:var(--tinta-2);font-weight:500;display:flex;gap:8px;align-items:baseline}
.pregunta--hecha .pregunta__t::before{content:"";flex:none;width:9px;height:5px;margin:0 2px 3px 1px;border-left:2px solid var(--oro);border-bottom:2px solid var(--oro);transform:rotate(-45deg);align-self:center}
.pregunta--hecha .opcion{padding:6px 13px;font-size:.82rem}
/* El precio avisa cuando una respuesta lo cambia */
.cot__precio.cambio{animation:destello 1.6s var(--ease-out)}
@keyframes destello{0%{background:var(--oro-suave);box-shadow:0 0 0 10px var(--oro-suave)}100%{background:transparent;box-shadow:0 0 0 10px transparent}}
/* Volver atrás */
.cot__nav{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;margin:0 0 16px}
.cot__volver{display:inline-flex;align-items:center;gap:7px;padding:7px 14px 7px 11px;border-radius:999px;border:1px solid var(--linea-2);
  background:var(--papel);color:var(--tinta);font:inherit;font-size:.86rem;font-weight:600;cursor:pointer;transition:all var(--t-fast)}
.cot__volver:hover{border-color:var(--oro);color:var(--oro-2)}
.cot__volver:hover svg{transform:translateX(-2px)}
.cot__volver svg{transition:transform var(--t-fast)}
.cot__volver:disabled{opacity:.4;pointer-events:none}
.cot__volver-a{font-size:.8rem;color:var(--tinta-3)}
.pregunta + .pregunta{margin-top:14px;padding-top:14px;border-top:1px solid var(--linea)}
.pregunta__t{margin:0 0 9px;font-weight:600;font-size:.95rem;color:var(--tinta)}
.pregunta__p{margin:0 0 9px;font-size:.8rem;color:var(--tinta-3)}
.pregunta__ops{display:flex;flex-wrap:wrap;gap:7px}
.opcion{font-size:.86rem;font-weight:600;padding:8px 15px;border-radius:999px;border:1px solid var(--linea-2);
  background:var(--papel);color:var(--tinta-2);cursor:pointer;transition:all var(--t-fast)}
.opcion:hover{border-color:var(--oro);color:var(--tinta)}
.opcion.elegida{background:var(--tinta);border-color:var(--tinta);color:var(--papel)}

/* ---- los datos ---- */
.cot__datos{border-top:1px solid var(--linea);padding:clamp(20px,2.6vw,28px) clamp(20px,2.6vw,32px)}

/* ================================ pasos ================================= */
.pasos{list-style:none;margin:0;padding:0;display:grid;gap:clamp(20px,3vw,44px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.paso{position:relative;padding-top:22px;border-top:1px solid var(--linea-2)}
.paso::after{content:"";position:absolute;top:-1px;left:0;width:38%;height:1px;background:var(--oro)}
.paso__n{font-family:var(--display);font-size:.84rem;font-weight:700;letter-spacing:.14em;color:var(--oro)}
.paso h3{margin:.5em 0 .3em}
.paso p{margin:0}
.sec--noche .paso{border-color:var(--noche-linea)}
.sec--noche .paso::after{background:var(--oro-luz)}
.sec--noche .paso__n{color:var(--oro-luz)}

/* ================================ áreas ================================= */
.areas{display:grid;gap:clamp(20px,3vw,40px);grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr))}
.area{background:var(--papel);border:1px solid var(--linea);border-radius:var(--r-xl);padding:clamp(22px,2.6vw,36px);
  box-shadow:0 1px 2px rgba(13,15,18,.03)}
.area__cab{margin-bottom:20px}
.area__cab .lead{margin-bottom:0;font-size:1rem}
.area h3 a:hover{color:var(--oro)}

/* ================================ mapa ================================== */
.mapa{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(24px,4vw,56px);align-items:center}
.mapa__lienzo{position:relative}
.mapa__lienzo canvas{width:100%;height:auto;aspect-ratio:1000/826}
.mapa__hud{position:absolute;left:0;bottom:4px;margin:0;display:flex;flex-direction:column;gap:2px;font-size:var(--t-label);
  font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--tinta-3);border:1px solid var(--linea-2);
  border-radius:var(--r-s);padding:9px 13px;background:var(--papel);min-width:205px}
.mapa__hud b{color:var(--oro);font-weight:700}
@media (max-width:900px){.mapa{grid-template-columns:1fr}}

/* ============================== servicios =============================== */
.svc-hero{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(24px,4vw,58px);align-items:start}
@media (max-width:900px){.svc-hero{grid-template-columns:1fr}}
.dos-col{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:clamp(22px,3vw,48px)}
.pegajoso{position:sticky;top:92px}
@media (max-width:900px){.pegajoso{position:static}}

/* ============================= calculadora ============================== */
.calc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(22px,3vw,44px);background:var(--papel);
  border:1px solid var(--linea-2);border-radius:var(--r-xl);padding:clamp(22px,3vw,40px);
  box-shadow:0 2px 4px rgba(13,15,18,.03),0 40px 70px -60px rgba(13,15,18,.5)}
.calc__mandos{display:grid;gap:16px;align-content:start}
.calc__salida{background:var(--papel-2);border:1px solid var(--linea);border-radius:var(--r-l);padding:clamp(20px,2.4vw,28px)}
.calc__nota{font-size:var(--t-label);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--oro);margin:10px 0 0;min-height:1.2em}
@media (max-width:860px){.calc{grid-template-columns:1fr}}

/* ============================ tarifa (lista) ============================ */
.tarifa{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(14px,3vw,48px);align-items:start;
  padding:22px 0;border-bottom:1px solid var(--linea)}
.tarifa h3 a:hover{color:var(--oro)}
.tarifa .filas .fila:last-child{border-bottom:0}
@media (max-width:760px){.tarifa{grid-template-columns:1fr;gap:8px}}

/* ============================== páginas geo ============================= */
.nota-ley{border-left:2px solid var(--oro);background:var(--papel);border-radius:0 var(--r-l) var(--r-l) 0;
  padding:clamp(20px,2.6vw,30px);max-width:86ch;box-shadow:0 1px 2px rgba(13,15,18,.03)}
.listado{list-style:none;margin:0;padding:0;columns:5 165px;column-gap:26px}
.listado li{break-inside:avoid;padding:5px 0}
.listado a{font-size:.9rem;color:var(--tinta-2)}
.listado a:hover{color:var(--oro)}
.listado--ancho{columns:3 280px}
.listado--ancho a{font-size:.94rem}

/* ============================= prosa legal ============================== */
.prosa h2{font-family:var(--display);font-size:1.38rem;font-weight:650;letter-spacing:-.022em;margin:1.9em 0 .5em}
.prosa p,.prosa li{color:var(--tinta-2);max-width:74ch}
.prosa ul{padding-left:20px}
.prosa code{background:var(--papel-2);padding:2px 6px;border-radius:3px;font-size:.88em}
.prosa a{color:var(--oro)}