/* ==========================================================================
   Fix and Focus Lab — hoja de estilo única
   No hay framework, no hay CDN, no hay dependencias. Todo vive aquí.
   Los colores salen del logo: el naranja y el grafito son los suyos.
   ========================================================================== */

/* --- Tipografías autoalojadas (nada sale hacia Google) ------------------- */
@font-face{font-family:'Newsreader';src:url('../fonts/newsreader-latin.woff2') format('woff2');font-weight:200 800;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Newsreader';src:url('../fonts/newsreader-latin-ext.woff2') format('woff2');font-weight:200 800;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Newsreader';src:url('../fonts/newsreader-latin-italic.woff2') format('woff2');font-weight:200 800;font-style:italic;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+FEFF,U+FFFD}
@font-face{font-family:'Archivo';src:url('../fonts/archivo-latin.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Archivo';src:url('../fonts/archivo-latin-ext.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Plex Mono';src:url('../fonts/plex-mono-latin.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Plex Mono';src:url('../fonts/plex-mono-latin-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}

/* --- Fichas de color ----------------------------------------------------- */
:root{
  /* Del logo */
  --naranja:      #EE8F2C;   /* el naranja de la marca, medido sobre el logo */
  --naranja-vivo: #FFA646;   /* sobre fondo oscuro */
  --naranja-tinta:#9A5307;   /* el mismo tono bajado hasta 4.5:1 sobre papel */
  --grafito:      #23262A;   /* el oscuro del logo */

  /* Superficies */
  --papel:      #F4F1EA;
  --papel-alto: #FCFAF6;
  --papel-hondo:#EAE5DA;
  --noche:      #17191C;
  --noche-alto: #22262A;

  /* Tinta */
  --tinta:   #1A1C1E;
  --tinta-2: #565B60;
  --tinta-3: #8B9096;
  --sobre-noche:   #EDE9E1;
  --sobre-noche-2: #A5A9AD;

  /* Trazos */
  --linea:      #DCD5C6;
  --linea-fina: #E7E1D5;
  --linea-noche:#33373C;

  /* Reflejos de tratamiento antirreflejante — solo en diagramas */
  --ambar:  #D99A3A;
  --magenta:#8E3B5C;
  --cian:   #2F6B70;

  /* Medidas */
  --ancho: 1240px;
  --ancho-texto: 68ch;
  --canal: clamp(1.25rem, 4.5vw, 4rem);
  --salto: clamp(4.5rem, 9vw, 8.5rem);

  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --sans:  'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --mono:  'Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}

/* --- Base ---------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
/* Sin esto, cualquier regla con display: (una rejilla, un flex) gana al atributo
   hidden y el elemento sigue viéndose. Pasó de verdad con el grupo de focal. */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}

body{
  margin:0;background:var(--papel);color:var(--tinta);
  font-family:var(--sans);font-size:clamp(1rem,.97rem + .18vw,1.0938rem);
  line-height:1.62;font-weight:380;
  font-variant-numeric:oldstyle-nums;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4{margin:0;font-weight:400;text-wrap:balance}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}
hr{border:0;border-top:1px solid var(--linea);margin:0}
::selection{background:var(--naranja);color:var(--grafito)}
:focus-visible{outline:2px solid var(--naranja-tinta);outline-offset:3px;border-radius:2px}

/* --- Retícula ------------------------------------------------------------ */
.env{width:100%;max-width:var(--ancho);margin-inline:auto;padding-inline:var(--canal)}
.env-estrecho{max-width:860px}
.seccion{padding-block:var(--salto)}
.seccion-fina{padding-block:calc(var(--salto) * .58)}
.prosa{max-width:var(--ancho-texto)}
.prosa p + h3{margin-top:2.1em}

/* --- Tipografía ---------------------------------------------------------- */
.display{
  font-family:var(--serif);font-weight:350;
  font-size:clamp(2.9rem,1.7rem + 5.4vw,6rem);
  line-height:.95;letter-spacing:-.021em;
  font-variation-settings:'opsz' 42;
  text-wrap:balance;
}
.display em{font-style:italic;font-weight:300}
h1.titulo,.titulo{
  font-family:var(--serif);font-weight:350;
  font-size:clamp(2.3rem,1.55rem + 3.2vw,4rem);
  line-height:1.02;letter-spacing:-.018em;font-variation-settings:'opsz' 34;
}
h2.titulo-2,.titulo-2{
  font-family:var(--serif);font-weight:380;
  font-size:clamp(1.75rem,1.3rem + 1.9vw,2.7rem);
  line-height:1.1;letter-spacing:-.014em;font-variation-settings:'opsz' 24;
}
h3.titulo-3,.titulo-3{
  font-family:var(--sans);font-weight:600;
  font-size:clamp(1.06rem,1rem + .3vw,1.24rem);
  line-height:1.3;letter-spacing:-.005em;
}
.entradilla{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(1.2rem,1.05rem + .72vw,1.62rem);
  line-height:1.42;letter-spacing:-.008em;color:var(--tinta);
  font-variation-settings:'opsz' 20;max-width:34ch;
}
.entradilla-ancha{max-width:52ch}

/* Rótulo mono — el motivo que se repite en toda la web */
.rotulo{
  font-family:var(--mono);font-weight:500;
  font-size:.688rem;letter-spacing:.17em;text-transform:uppercase;
  color:var(--tinta-3);display:block;
  font-variant-numeric:tabular-nums;
}
.rotulo-linea{
  display:flex;align-items:center;gap:1rem;margin-bottom:2.6rem;
}
.rotulo-linea::after{content:'';flex:1;height:1px;background:var(--linea)}
.rotulo-naranja{color:var(--naranja-tinta)}
.dato{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:.94em}
.nota{font-size:.875rem;line-height:1.55;color:var(--tinta-2)}
.tenue{color:var(--tinta-2)}

/* --- Enlaces ------------------------------------------------------------- */
.prosa a,.enlace{
  color:var(--naranja-tinta);text-decoration:none;
  background-image:linear-gradient(var(--naranja),var(--naranja));
  background-size:100% 1px;background-repeat:no-repeat;background-position:0 100%;
  padding-bottom:.09em;transition:background-size .2s ease
}
.prosa a:hover,.enlace:hover{background-size:100% 2px}

/* --- Botones ------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--sans);font-weight:560;font-size:.95rem;letter-spacing:.005em;
  padding:.86rem 1.5rem;border:1px solid var(--grafito);background:var(--grafito);
  color:var(--papel-alto);text-decoration:none;cursor:pointer;border-radius:2px;
  transition:background .16s ease,color .16s ease,border-color .16s ease,transform .16s ease;
}
.btn:hover{background:var(--noche);transform:translateY(-1px)}
.btn-naranja{background:var(--naranja);border-color:var(--naranja);color:var(--grafito)}
.btn-naranja:hover{background:var(--naranja-vivo);border-color:var(--naranja-vivo)}
.btn-linea{background:transparent;color:var(--tinta);border-color:var(--linea)}
.btn-linea:hover{background:transparent;border-color:var(--grafito)}
.btn-claro{background:transparent;color:var(--sobre-noche);border-color:var(--linea-noche)}
.btn-claro:hover{background:transparent;border-color:var(--sobre-noche)}
.btn svg{width:1.05em;height:1.05em;flex:none}
.btn-grupo{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center}

/* --- Cabecera ------------------------------------------------------------ */
.cabecera{
  position:sticky;top:0;z-index:60;background:rgba(244,241,234,.88);
  backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid transparent;transition:border-color .2s ease
}
.cabecera.pegada{border-bottom-color:var(--linea)}
.cabecera-int{display:flex;align-items:center;gap:1.5rem;height:70px}
.marca{display:flex;align-items:center;gap:.62rem;text-decoration:none;flex:none}
.marca svg{width:34px;height:34px}
.marca-txt{
  font-family:var(--sans);font-weight:700;font-size:.83rem;letter-spacing:.055em;
  text-transform:uppercase;line-height:1.1;color:var(--tinta)
}
.marca-txt span{display:block;font-weight:400;color:var(--tinta-3);letter-spacing:.135em;font-size:.66rem}
.nav{display:flex;align-items:center;gap:.15rem;margin-left:auto}
.nav a{
  font-size:.875rem;font-weight:450;text-decoration:none;color:var(--tinta-2);
  padding:.5rem .72rem;border-radius:2px;transition:color .15s ease
}
.nav a:hover,.nav a[aria-current]{color:var(--tinta)}
.nav a[aria-current]{font-weight:560}
.cabecera-acc{display:flex;align-items:center;gap:.6rem;margin-left:.4rem}
.idioma{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--tinta-3);text-decoration:none;padding:.4rem .5rem;border:1px solid var(--linea);border-radius:2px
}
.idioma:hover{color:var(--tinta);border-color:var(--tinta-3)}
.menu-btn{display:none;background:none;border:1px solid var(--linea);border-radius:2px;padding:.55rem;cursor:pointer}
.menu-btn svg{width:20px;height:20px;stroke:var(--tinta)}
@media (max-width:960px){
  .nav{
    position:fixed;inset:70px 0 auto;background:var(--papel-alto);flex-direction:column;
    align-items:stretch;gap:0;padding:.6rem var(--canal) 1.6rem;border-bottom:1px solid var(--linea);
    display:none;box-shadow:0 24px 40px -28px rgba(23,25,28,.35)
  }
  .nav.abierto{display:flex}
  .nav a{padding:.85rem .2rem;border-bottom:1px solid var(--linea-fina);font-size:1rem}
  .menu-btn{display:block;margin-left:auto;order:3}
  .cabecera-acc{margin-left:0}
}

/* --- Portada ------------------------------------------------------------- */
.portada{position:relative;padding-block:clamp(3.5rem,7vw,7rem) clamp(3rem,6vw,5.5rem);overflow:hidden}
.portada-rejilla{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);gap:clamp(2rem,5vw,4.5rem);align-items:end}
@media (max-width:900px){.portada-rejilla{grid-template-columns:1fr;gap:2.6rem}}
.portada .display{margin-bottom:1.6rem}
.portada-pie{display:flex;flex-wrap:wrap;gap:1.6rem 2.4rem;margin-top:2.4rem;padding-top:1.6rem;border-top:1px solid var(--linea)}
.portada-pie div{min-width:130px}
.portada-pie .rotulo{margin-bottom:.3rem}
.portada-pie strong{font-family:var(--sans);font-weight:560;font-size:.97rem}

/* --- Barra de confianza -------------------------------------------------- */
.barra{background:var(--grafito);color:var(--sobre-noche)}
.barra-int{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--linea-noche)}
@media (max-width:800px){.barra-int{grid-template-columns:repeat(2,1fr)}}
.barra-c{background:var(--grafito);padding:1.7rem clamp(1rem,2.4vw,1.9rem)}
.barra-c .rotulo{color:var(--naranja);margin-bottom:.45rem}
.barra-c p{font-size:.9rem;color:var(--sobre-noche-2);margin:0;line-height:1.45}
.barra-c b{display:block;font-family:var(--serif);font-weight:400;font-size:1.55rem;line-height:1.15;color:var(--sobre-noche);margin-bottom:.25rem;letter-spacing:-.01em}

/* --- Ficha de taller (el motivo estructural) ---------------------------- */
.ficha{
  border-top:2px solid var(--grafito);padding-top:1.4rem;
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(1.6rem,4vw,3.6rem);align-items:start
}
@media (max-width:860px){.ficha{grid-template-columns:1fr;gap:1.6rem}}
.ficha + .ficha{margin-top:clamp(3.2rem,6vw,5.5rem)}
.ficha-cab{display:flex;align-items:baseline;gap:1rem;margin-bottom:1rem}
.ficha-ref{
  font-family:var(--mono);font-weight:500;font-size:.72rem;letter-spacing:.14em;
  color:var(--papel-alto);background:var(--grafito);padding:.28rem .55rem;border-radius:2px;flex:none
}
.ficha h3{font-family:var(--serif);font-weight:380;font-size:clamp(1.5rem,1.2rem + 1.1vw,2.15rem);line-height:1.08;letter-spacing:-.014em}
.ficha-lead{font-size:1.03rem;color:var(--tinta);margin-bottom:1.5rem;max-width:52ch}
.ficha-datos{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));
  gap:1px;background:var(--linea);border:1px solid var(--linea);margin-top:1.6rem;border-radius:2px;overflow:hidden
}
.ficha-datos div{background:var(--papel-alto);padding:.85rem .9rem}
.ficha-datos .rotulo{font-size:.63rem;margin-bottom:.3rem}
.ficha-datos b{font-family:var(--sans);font-weight:560;font-size:.94rem;letter-spacing:-.005em}
.ficha-datos b .num{font-family:var(--mono);font-weight:500}

/* Listas de la ficha */
.lista-marca{list-style:none;margin:0 0 1.3rem;padding:0}
.lista-marca li{position:relative;padding-left:1.35rem;margin-bottom:.5rem;font-size:.955rem;line-height:1.5}
.lista-marca li::before{
  content:'';position:absolute;left:0;top:.62em;width:.5rem;height:1px;background:var(--naranja)
}
.lista-marca.compacta li{margin-bottom:.32rem;font-size:.9rem}
.sub-rotulo{font-family:var(--mono);font-size:.66rem;letter-spacing:.15em;text-transform:uppercase;color:var(--tinta-3);margin:0 0 .6rem;display:block}

/* --- Diagramas ----------------------------------------------------------- */
.diagrama{background:var(--papel-alto);border:1px solid var(--linea);border-radius:2px;padding:1.2rem}
.diagrama svg{width:100%;height:auto}
/* En versalitas monoespaciadas una frase de tres líneas se lee fatal. El rótulo
   corto sí va en mono; el pie explicativo va en la de texto y alineado a la
   izquierda, que es como se lee un pie de figura. */
.diagrama figcaption{font-family:var(--sans);font-size:.82rem;color:var(--tinta-2);
  margin-top:1rem;padding-top:.85rem;border-top:1px solid var(--linea-fina);line-height:1.55}

/* --- Proceso ------------------------------------------------------------- */
.proceso{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.2rem,2.6vw,2.4rem);counter-reset:paso}
@media (max-width:880px){.proceso{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.proceso{grid-template-columns:1fr}}
.paso{counter-increment:paso;border-top:1px solid var(--linea);padding-top:1.1rem;position:relative}
.paso::before{
  content:counter(paso,decimal-leading-zero);
  font-family:var(--mono);font-weight:500;font-size:.72rem;letter-spacing:.12em;
  color:var(--naranja-tinta);display:block;margin-bottom:.75rem
}
.paso h4{font-family:var(--sans);font-weight:600;font-size:1.02rem;margin-bottom:.45rem;letter-spacing:-.005em}
.paso p{font-size:.9rem;color:var(--tinta-2);line-height:1.55;margin:0}

/* --- Bloque oscuro ------------------------------------------------------- */
.noche{background:var(--noche);color:var(--sobre-noche)}
.noche .titulo,.noche .titulo-2,.noche .display{color:var(--sobre-noche)}
.noche .rotulo{color:var(--naranja)}
.noche .entradilla{color:var(--sobre-noche)}
.noche .tenue,.noche p{color:var(--sobre-noche-2)}
.noche .prosa p{color:var(--sobre-noche-2)}
.noche .prosa strong{color:var(--sobre-noche)}
.noche hr{border-color:var(--linea-noche)}
.noche .lista-marca li{color:var(--sobre-noche-2)}
.noche .rotulo-linea::after{background:var(--linea-noche)}

/* --- Aviso / callout -----------------------------------------------------
   Llevaba una barra naranja gruesa en el lado izquierdo. Es el recurso más
   reconocible de las interfaces generadas por IA, y aquí salía en las cinco
   fichas de servicio más envíos, presupuesto y próximamente: ocho veces en el
   sitio. Ahora usa la MISMA regla superior de 2 px que ya llevan las fichas de
   taller, así que el aviso deja de parecer un widget pegado y pasa a ser una
   pieza más del mismo sistema. El naranja sigue estando, donde tiene que estar:
   en el rótulo. */
.aviso{
  border-top:2px solid var(--grafito);background:var(--papel-hondo);
  padding:1.1rem 1.3rem 1.2rem;margin:2rem 0
}
.aviso .rotulo{margin-bottom:.5rem;color:var(--naranja-tinta)}
.aviso p{font-size:.94rem;line-height:1.58;color:var(--tinta)}
.noche .aviso{background:var(--noche-alto);border-top-color:var(--naranja)}
.noche .aviso p{color:var(--sobre-noche-2)}

/* --- Tarjetas de servicio (portada) -------------------------------------- */
.rejilla-serv{display:grid;grid-template-columns:repeat(auto-fit,minmax(206px,1fr));gap:1px;background:var(--linea);border:1px solid var(--linea);border-radius:2px;overflow:hidden}
.serv{
  background:var(--papel-alto);padding:1.6rem 1.25rem 1.4rem;text-decoration:none;color:inherit;
  display:flex;flex-direction:column;gap:.6rem;transition:background .18s ease;min-height:100%
}
.serv:hover{background:var(--papel)}
.serv-ico{width:38px;height:38px;color:var(--naranja-tinta);margin-bottom:.35rem}
.serv h3{font-family:var(--sans);font-weight:600;font-size:1.02rem;letter-spacing:-.005em}
.serv p{font-size:.9rem;color:var(--tinta-2);line-height:1.55;margin:0;flex:1}
.serv .desde{font-family:var(--mono);font-size:.75rem;letter-spacing:.06em;color:var(--naranja-tinta);margin-top:.5rem}

/* --- Fotos --------------------------------------------------------------- */
figure{margin:0}
.foto{background:var(--papel-hondo);border-radius:2px;overflow:hidden;position:relative}
.foto img{width:100%;display:block}
.foto figcaption{font-size:.83rem;color:var(--tinta-2);margin-top:.7rem;line-height:1.5}
.foto-ancha{margin-block:clamp(2.2rem,5vw,4rem)}
.rejilla-fotos{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(1rem,2.2vw,1.7rem)}
.par{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--linea);border:1px solid var(--linea);border-radius:2px;overflow:hidden}
.par figure{background:var(--papel-alto)}
.par .et{font-family:var(--mono);font-size:.64rem;letter-spacing:.15em;text-transform:uppercase;color:var(--tinta-3);padding:.7rem .9rem;display:block}

/* --- Tablas -------------------------------------------------------------- */
.tabla-env{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:1.8rem 0}
table{border-collapse:collapse;width:100%;font-size:.93rem;min-width:460px}
th,td{text-align:left;padding:.78rem 1rem;border-bottom:1px solid var(--linea-fina);vertical-align:top}
thead th{
  font-family:var(--mono);font-weight:500;font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--tinta-3);border-bottom:1px solid var(--linea)
}
tbody tr:last-child td{border-bottom:1px solid var(--linea)}
td.num,th.num{font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}

/* --- FAQ ----------------------------------------------------------------- */
.faq details{border-bottom:1px solid var(--linea-fina)}
.faq details:first-child{border-top:1px solid var(--linea)}
.faq summary{
  cursor:pointer;list-style:none;padding:1.15rem 2.4rem 1.15rem 0;position:relative;
  font-family:var(--sans);font-weight:520;font-size:1.01rem;line-height:1.4;letter-spacing:-.005em
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:'';position:absolute;right:.35rem;top:1.55rem;width:11px;height:11px;
  border-right:1.5px solid var(--naranja-tinta);border-bottom:1.5px solid var(--naranja-tinta);
  transform:rotate(45deg);transition:transform .2s ease
}
.faq details[open] summary::after{transform:rotate(-135deg);top:1.75rem}
.faq .resp{padding:0 2.4rem 1.4rem 0;max-width:66ch}
.faq .resp p{font-size:.955rem;color:var(--tinta-2);line-height:1.6}

/* --- Estimador ----------------------------------------------------------- */
.est{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,380px);gap:clamp(1.5rem,3.5vw,3rem);align-items:start}
@media (max-width:940px){.est{grid-template-columns:1fr}}
.est-paso{border-top:1px solid var(--linea);padding-top:1.3rem;margin-bottom:2.6rem}
.est-paso > .rotulo{margin-bottom:.55rem}
.est-paso h3{font-family:var(--serif);font-weight:380;font-size:clamp(1.3rem,1.1rem + .8vw,1.75rem);line-height:1.12;letter-spacing:-.014em;margin-bottom:.35rem}
.est-paso .ayuda{font-size:.9rem;color:var(--tinta-2);margin-bottom:1.2rem;max-width:56ch}
.opciones{display:grid;gap:.5rem}
.opciones.dos{grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.op{
  display:flex;align-items:flex-start;gap:.75rem;padding:.85rem 1rem;cursor:pointer;
  border:1px solid var(--linea);border-radius:2px;background:var(--papel-alto);
  transition:border-color .15s ease,background .15s ease
}
.op:hover{border-color:var(--tinta-3)}
.op input{
  appearance:none;-webkit-appearance:none;width:17px;height:17px;flex:none;margin-top:.14rem;
  border:1.5px solid var(--tinta-3);background:transparent;cursor:pointer;position:relative
}
.op input[type=radio]{border-radius:50%}
.op input[type=checkbox]{border-radius:2px}
.op input:checked{border-color:var(--naranja-tinta);background:var(--naranja-tinta)}
.op input:checked::after{
  content:'';position:absolute;left:4px;top:.5px;width:5px;height:10px;
  border-right:2px solid var(--papel-alto);border-bottom:2px solid var(--papel-alto);transform:rotate(42deg)
}
.op input[type=radio]:checked::after{
  left:3.5px;top:3.5px;width:6px;height:6px;border:0;border-radius:50%;background:var(--papel-alto);transform:none
}
.op:has(input:checked){border-color:var(--grafito);background:var(--papel-alto)}
.op-txt{flex:1;min-width:0}
.op-txt b{display:block;font-family:var(--sans);font-weight:520;font-size:.95rem;line-height:1.35;letter-spacing:-.005em}
.op-txt small{display:block;font-size:.82rem;color:var(--tinta-2);line-height:1.5;margin-top:.3rem}
.op[hidden]{display:none}

.campo{display:block;margin-bottom:1rem}
.campo > span{font-family:var(--mono);font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;color:var(--tinta-3);display:block;margin-bottom:.4rem}
.campo input,.campo textarea,.campo select{
  width:100%;font-family:var(--sans);font-size:.96rem;color:var(--tinta);
  padding:.68rem .8rem;border:1px solid var(--linea);border-radius:2px;background:var(--papel-alto)
}
.campo textarea{min-height:92px;resize:vertical;line-height:1.55}
.campo input:focus,.campo textarea:focus{border-color:var(--tinta-3);outline:none}
.campo-dos{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media (max-width:520px){.campo-dos{grid-template-columns:1fr}}

/* Panel de resultado */
.panel{
  position:sticky;top:92px;background:var(--grafito);color:var(--sobre-noche);
  border-radius:2px;padding:1.6rem 1.5rem;
}
@media (max-width:940px){.panel{position:static}}
.panel .rotulo{color:var(--naranja);margin-bottom:1rem}
.panel-cifra{
  font-family:var(--serif);font-weight:350;line-height:1;letter-spacing:-.025em;
  font-size:clamp(2.1rem,1.6rem + 2vw,3.1rem);color:var(--sobre-noche);
  font-variant-numeric:lining-nums tabular-nums;margin-bottom:.35rem
}
.panel-cifra small{font-size:.42em;letter-spacing:0;color:var(--sobre-noche-2);font-family:var(--sans);font-weight:400}
.panel-sub{font-size:.83rem;color:var(--sobre-noche-2);line-height:1.5;margin-bottom:1.2rem}
.panel-lista{list-style:none;margin:0 0 1.3rem;padding:1.1rem 0 0;border-top:1px solid var(--linea-noche);font-size:.86rem}
.panel-lista li{display:flex;justify-content:space-between;gap:1rem;padding:.32rem 0;color:var(--sobre-noche-2);line-height:1.45}
.panel-lista li span:last-child{font-family:var(--mono);font-size:.9em;color:var(--sobre-noche);white-space:nowrap;flex:none}
.panel-lista li.total{border-top:1px solid var(--linea-noche);margin-top:.5rem;padding-top:.65rem;color:var(--sobre-noche);font-weight:500}
.panel .btn-grupo{flex-direction:column;align-items:stretch;gap:.55rem}
.panel .btn{justify-content:center;width:100%}
.panel-legal{font-size:.74rem;line-height:1.5;color:var(--sobre-noche-2);margin-top:1.1rem;padding-top:1rem;border-top:1px solid var(--linea-noche)}
.panel-vacio{font-size:.9rem;color:var(--sobre-noche-2);line-height:1.55}

/* --- WhatsApp flotante --------------------------------------------------- */
.wa{
  position:fixed;right:clamp(1rem,3vw,2rem);bottom:clamp(1rem,3vw,2rem);z-index:70;
  display:inline-flex;align-items:center;gap:.55rem;
  background:var(--grafito);color:var(--papel-alto);text-decoration:none;
  padding:.72rem 1.05rem;border-radius:999px;font-size:.86rem;font-weight:520;
  box-shadow:0 14px 30px -14px rgba(23,25,28,.5);transition:transform .18s ease
}
.wa:hover{transform:translateY(-2px)}
.wa svg{width:19px;height:19px;fill:var(--naranja)}
@media (max-width:600px){.wa span{display:none}.wa{padding:.85rem;border-radius:50%}}
@media print{.wa,.cabecera{display:none}}

/* --- Pie ----------------------------------------------------------------- */
.pie{background:var(--noche);color:var(--sobre-noche-2);padding-block:clamp(3rem,6vw,4.5rem) 2rem;font-size:.88rem}
.pie-rejilla{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:2rem clamp(1.5rem,3vw,3rem);padding-bottom:2.6rem;border-bottom:1px solid var(--linea-noche)}
@media (max-width:820px){.pie-rejilla{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.pie-rejilla{grid-template-columns:1fr}}
.pie .rotulo{color:var(--naranja);margin-bottom:.95rem}
.pie a{color:var(--sobre-noche-2);text-decoration:none}
.pie a:hover{color:var(--sobre-noche)}
.pie ul{list-style:none;margin:0;padding:0}
.pie li{margin-bottom:.5rem;line-height:1.5}
.pie-marca svg{width:44px;height:44px;margin-bottom:1rem}
.pie-marca p{font-size:.86rem;line-height:1.6;max-width:32ch;color:var(--sobre-noche-2)}
.pie-bajo{display:flex;flex-wrap:wrap;gap:.8rem 1.8rem;justify-content:space-between;padding-top:1.7rem;font-size:.78rem;color:var(--tinta-3)}
.pie-bajo a{color:var(--tinta-3)}

/* --- Migas y misceláneos ------------------------------------------------- */
.migas{font-family:var(--mono);font-size:.68rem;letter-spacing:.11em;text-transform:uppercase;color:var(--tinta-3);padding-top:1.8rem}
.migas a{text-decoration:none;color:var(--tinta-3)}
.migas a:hover{color:var(--tinta)}
.migas span{margin:0 .5rem;opacity:.5}

.ancla{scroll-margin-top:90px}
.indice{display:flex;flex-wrap:wrap;gap:.45rem;margin:2rem 0 0}
.indice a{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;
  padding:.45rem .8rem;border:1px solid var(--linea);border-radius:2px;text-decoration:none;color:var(--tinta-2);
  transition:border-color .15s ease,color .15s ease
}
.indice a:hover{border-color:var(--grafito);color:var(--tinta)}

.dos-col{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.6rem,4vw,3.4rem);align-items:start}
@media (max-width:820px){.dos-col{grid-template-columns:1fr}}
.lado{display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,1fr);gap:clamp(1.4rem,3.5vw,3rem);align-items:start}
@media (max-width:820px){.lado{grid-template-columns:1fr;gap:1.2rem}}

/* Entrada suave */
/* Solo se esconde si sabemos que el JS está vivo: si falla, el contenido se ve.
   Un efecto de entrada que deja media página en blanco cuando algo se rompe es
   peor que no tener efecto. */
.js .aparece{opacity:0;transform:translateY(14px);transition:opacity .6s cubic-bezier(.2,.6,.3,1),transform .6s cubic-bezier(.2,.6,.3,1)}
.js .aparece.visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .aparece{opacity:1;transform:none}}
@media print{.js .aparece{opacity:1;transform:none}}

/* --- Impresión: SOLO la hoja de depósito --------------------------------
   La primera versión escondía la cabecera, el pie y el formulario, pero dejaba
   las secciones de la página fluyendo detrás: salían tres folios con trozos de
   web y la hoja perdida en medio. Ahora se apaga todo lo que cuelga de <body>
   y se enciende solo la hoja, que el JavaScript mueve a ser hija directa.

   Y va a una tinta, sin fondos: esto se imprime en una láser cualquiera y el
   cliente no tiene por qué gastar un cartucho en un fondo de color.
   ----------------------------------------------------------------------- */
.hoja{display:none}
@media print{
  @page{size:A4;margin:12mm 13mm}
  html,body{background:#fff!important;color:#000!important}
  body{font-family:'Archivo',Helvetica,Arial,sans-serif;font-size:9.4pt;line-height:1.4}
  body > *{display:none!important}
  body > #hoja{display:block!important}
  #hoja *{color:#000!important;background:transparent!important}

  #hoja .cab{display:flex;justify-content:space-between;align-items:flex-start;
    border-bottom:1.4pt solid #000;padding-bottom:2.5mm;margin-bottom:4mm}
  #hoja .cab svg{width:11mm;height:auto;float:left;margin-right:3mm}
  #hoja h1{font-size:13pt;font-weight:700;letter-spacing:-.2pt;margin:0;line-height:1.1}
  #hoja .sub{font-size:8pt;line-height:1.5;margin-top:.8mm}
  #hoja .ref{text-align:right;flex:none;margin-left:6mm}
  #hoja .ref .et{font-family:'Plex Mono',monospace;font-size:6.6pt;letter-spacing:.14em}
  #hoja .ref .n{font-family:'Plex Mono',monospace;font-size:14pt;font-weight:500;
    line-height:1.15;letter-spacing:-.2pt}
  #hoja .ref .f{font-size:8pt}

  #hoja h2{font-family:'Plex Mono',monospace;font-size:6.8pt;letter-spacing:.16em;
    text-transform:uppercase;margin:4.5mm 0 1.5mm;padding-bottom:.8mm;
    border-bottom:.4pt solid #000;font-weight:500}
  #hoja table{width:100%;border-collapse:collapse;font-size:9.4pt}
  #hoja td{padding:1.3mm 0;vertical-align:top;border-bottom:.3pt solid #bbb}
  #hoja td:first-child{width:32mm;font-size:8pt;padding-right:3mm}
  #hoja tr:last-child td{border-bottom:0}
  #hoja ul{margin:0;padding-left:4mm;font-size:9.2pt}
  #hoja li{margin-bottom:.6mm}
  #hoja .libre{border:.4pt solid #999;min-height:16mm;padding:2mm;font-size:9pt;
    white-space:pre-wrap}
  #hoja .cas{display:flex;flex-wrap:wrap;gap:1mm 6mm;font-size:8.6pt}
  #hoja .cas span{white-space:nowrap}
  #hoja .dos{display:flex;gap:8mm}
  #hoja .dos > *{flex:1}
  #hoja .est{border:1pt solid #000;padding:2.5mm 3mm;display:flex;
    justify-content:space-between;align-items:baseline;gap:4mm}
  #hoja .est b{font-family:'Plex Mono',monospace;font-size:12pt;font-weight:500}
  #hoja .est span{font-size:7.6pt;line-height:1.4}
  #hoja .legal{font-size:6.9pt;line-height:1.45;margin-top:4mm;
    border-top:.4pt solid #000;padding-top:2mm}
  #hoja .firmas{display:flex;gap:12mm;margin-top:9mm}
  #hoja .firmas div{flex:1;border-top:.5pt solid #000;padding-top:1.5mm;font-size:7.4pt}
}