/* ============================================================================
   SAID INFORMÁTICA — Hoja de estilos principal
   Logroño · La Rioja
   Azules de marca heredados del logotipo original: #2048A0 y #1088C8
   Acento dorado: #D6A93A
   Dirección visual: oscuro, decisión deliberada.
   ========================================================================== */

/* ---------------------------------------------------------------- 1. FUENTES
   Autoalojadas. Coloca los .woff2 en /assets/fonts/ (ver NOTAS-FUENTES.txt).
   Mientras no estén, el navegador usa la pila de reserva sin romper nada.     */

/* Tipografías servidas desde este mismo servidor. Pesos sueltos de Archivo en
   lugar de la versión variable: pesan menos y no hace falta variable aquí.
   Al servirlas nosotros desaparece la conexión a los servidores de Google, que
   transmitía la IP del visitante antes de que aceptase nada. */
@font-face{
  font-family:"Archivo";font-style:normal;font-weight:500;font-display:swap;
  src:url("../fonts/archivo-500.woff2") format("woff2");
}
@font-face{
  font-family:"Archivo";font-style:normal;font-weight:600;font-display:swap;
  src:url("../fonts/archivo-600.woff2") format("woff2");
}
@font-face{
  font-family:"Archivo";font-style:normal;font-weight:700;font-display:swap;
  src:url("../fonts/archivo-700.woff2") format("woff2");
}
@font-face{
  font-family:"Archivo";font-style:normal;font-weight:800;font-display:swap;
  src:url("../fonts/archivo-800.woff2") format("woff2");
}
@font-face{
  font-family:"Plex";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/plex-sans-400.woff2") format("woff2");
}
@font-face{
  font-family:"Plex";font-style:normal;font-weight:600;font-display:swap;
  src:url("../fonts/plex-sans-600.woff2") format("woff2");
}
@font-face{
  font-family:"PlexMono";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/plex-mono-400.woff2") format("woff2");
}
@font-face{
  font-family:"PlexMono";font-style:normal;font-weight:500;font-display:swap;
  src:url("../fonts/plex-mono-500.woff2") format("woff2");
}

/* ---------------------------------------------------------------- 2. TOKENS */

:root{
  /* Fondos */
  --ground:#070B14;
  --ground-2:#0A1120;
  --surface:#0E1728;
  --surface-2:#14203A;

  /* Líneas */
  --line:#1E2C48;
  --line-2:#2A3C60;

  /* Marca */
  --deep:#2048A0;
  --glow:#1088C8;
  --cyan:#3FD0FF;
  --gold:#D6A93A;
  --gold-soft:#D9BC78;

  /* Texto */
  --ink:#EAF0FA;
  --ink-2:#A3B6D4;
  --ink-3:#6E82A4;

  /* Semánticos */
  --hot:#FF8A3D;
  --ok:#4ADE80;

  /* Degradados */
  --grad:linear-gradient(98deg,#2048A0 0%,#1088C8 52%,#3FD0FF 100%);

  /* El mismo degradado de marca, pero sin el azul profundo del principio.
     Es para los sitios donde encima va texto OSCURO: botones y texto
     recortado. Sobre #2048A0 el texto #03080F se queda en 2,39:1 —
     ilegible— y en un botón estrecho el degradado se comprime y el texto
     cae entero sobre esa parte. Quitando esa parada, el peor punto pasa a
     ser #1088C8, que da 5,1:1. Mismos colores de marca, uno menos. */
  --grad-claro:linear-gradient(98deg,#1088C8 0%,#2BB4E8 52%,#3FD0FF 100%);
  --grad-gold:linear-gradient(100deg,#C2962E,#F2D887 28%,#FFF8E2 48%,#E0B646 74%,#CFA236);

  /* Tipografía */
  --f-display:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-body:"Plex","IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"PlexMono","IBM Plex Mono",ui-monospace,"SFMono-Regular",Consolas,monospace;

  /* Formas y ritmo */
  --r-sm:8px; --r-md:14px; --r-lg:22px;
  --pad:clamp(20px,4vw,36px);
  --sec:clamp(56px,8vw,96px);
  --shadow:0 1px 2px rgba(0,0,0,.5),0 18px 44px -22px rgba(16,136,200,.35);
}

/* ------------------------------------------------------------- 3. BASE */

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,video{max-width:100%;height:auto;display:block}
p{margin:0}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:3px}

/* Sobre la barra dorada y sobre los botones dorados, el anillo cian se
   queda en 1,08:1 y el foco desaparece — y la barra superior es la segunda
   parada de tabulador de todas las páginas. Ahí el anillo se pinta oscuro,
   que sobre el dorado da 9,8:1. */
.topbar :focus-visible,
.btn-gold:focus-visible{outline-color:#070B14}

h1,h2,h3,h4{font-family:var(--f-display);margin:0}
/* Los titulares de sección ocupan todo el ancho disponible. `balance` los
   comprimiría en una columna estrecha, que es justo lo que no queremos. */
h1,h3,h4{text-wrap:balance}
h2{text-wrap:pretty}
h1{font-weight:800;font-size:clamp(34px,6.2vw,66px);line-height:1.02;letter-spacing:-.035em}
h2{font-weight:700;font-size:clamp(26px,4vw,40px);line-height:1.12;letter-spacing:-.028em}
h3{font-weight:700;font-size:clamp(19px,2.4vw,23px);line-height:1.2;letter-spacing:-.018em}
h4{font-weight:600;font-size:16.5px;letter-spacing:-.01em;line-height:1.3}

.wrap{max-width:1180px;margin-inline:auto;padding-inline:clamp(18px,4vw,40px)}
.mono{font-family:var(--f-mono)}
.muted{color:var(--ink-3)}
.grad-text{background:var(--grad-claro);-webkit-background-clip:text;background-clip:text;color:transparent}
.gold-text{background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent}
.eyebrow{
  font-family:var(--f-mono);font-size:11.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--cyan);
}
.lede{color:var(--ink-2);font-size:clamp(16px,1.9vw,19px);max-width:62ch}

.skip{
  position:absolute;left:-9999px;top:0;background:var(--cyan);color:#03080F;
  padding:10px 16px;border-radius:0 0 var(--r-sm) 0;z-index:200;font-weight:600;
}
.skip:focus{left:0}

/* ------------------------------------------------------------ 4. BOTONES */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--f-display);font-weight:600;font-size:15px;
  padding:13px 22px;border-radius:100px;border:1px solid transparent;
  cursor:pointer;white-space:nowrap;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease,color .18s ease;
}
.btn-primary{background:var(--grad-claro);color:#03080F;box-shadow:0 8px 30px -10px rgba(16,136,200,.75)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 40px -10px rgba(63,208,255,.6)}
.btn-ghost{border-color:var(--line-2);color:var(--ink);background:rgba(20,32,58,.5)}
.btn-ghost:hover{border-color:var(--cyan);color:var(--cyan)}
.btn-hot{background:var(--hot);color:#1A0A00}
.btn-hot:hover{transform:translateY(-2px);box-shadow:0 12px 34px -12px rgba(255,138,61,.7)}
.btn-wide{width:100%}

/* --------------------------------------------------------------- 5. LOGO */

.logo{display:inline-flex;align-items:center;gap:12px}
.logo img,.logo svg{
  flex:none;
  filter:drop-shadow(0 0 12px rgba(63,208,255,.30)) drop-shadow(0 0 22px rgba(214,169,58,.18));
}
.logo-word{font-family:var(--f-display);line-height:1;letter-spacing:-.02em}
.logo-word b{font-weight:800;font-size:20px;display:block}
.logo-word span{
  font-family:var(--f-mono);font-size:9.5px;letter-spacing:.22em;
  color:var(--gold-soft);text-transform:uppercase;display:block;margin-top:4px;
}

/* --------------------------------------------------- 5b. BARRA DE AVISO
   Franja dorada sobre la cabecera. Un solo mensaje, el más urgente.        */

.topbar{
  background:var(--grad-gold);color:#1A1204;
  font-size:13.5px;line-height:1.4;
}
.topbar-in{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:6px 14px;padding-block:9px;text-align:center;
}
.topbar b{font-family:var(--f-display);font-weight:700}
.topbar a{
  font-family:var(--f-display);font-weight:600;text-decoration:underline;
  text-underline-offset:3px;white-space:nowrap;
}
.topbar a:hover{opacity:.75}

/* ------------------------------------------------------------ 6. CABECERA */

header.nav{
  position:sticky;top:0;z-index:60;
  background:rgba(7,11,20,.86);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.nav-in{display:flex;align-items:center;gap:20px;padding-block:14px}
.nav-links{
  display:none;gap:26px;margin-left:auto;font-size:14.5px;color:var(--ink-2);
  list-style:none;margin-block:0;padding:0;
}
.nav-links a{display:block;padding-block:4px;transition:color .15s}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--cyan)}
.nav-cta{display:none}
.nav-toggle{
  margin-left:auto;background:transparent;border:1px solid var(--line-2);
  border-radius:var(--r-sm);width:42px;height:42px;display:grid;place-items:center;
  cursor:pointer;color:var(--ink);
}
.nav-toggle span{display:block;width:18px;height:2px;background:currentColor;box-shadow:0 -6px 0 currentColor,0 6px 0 currentColor}
.nav-panel{
  display:none;border-top:1px solid var(--line);background:var(--ground-2);
  padding-block:14px 20px;
}
.nav-panel[data-open="true"]{display:block}
.nav-panel ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
/* El :not(.btn) es importante y no es cosmético. Sin él, este color de
   texto le ganaba al del botón (misma especificidad, pero esta regla va
   después) y el CTA del menú móvil salía en gris claro sobre el degradado
   azul: 2,95:1. Medido en el navegador. */
.nav-panel a:not(.btn){display:block;padding:11px 4px;border-bottom:1px solid var(--line);color:var(--ink-2)}
.nav-panel a.btn{display:block}
.nav-panel .btn{margin-top:16px}
@media(min-width:1000px){
  .nav-links{display:flex}
  .nav-cta{display:inline-flex}
  .nav-toggle,.nav-panel{display:none !important}
}

/* ---------------------------------------------------------------- 7. HERO */

.hero{position:relative;padding-block:clamp(56px,9vw,104px) clamp(48px,7vw,84px);overflow:hidden}
.aurora{position:absolute;inset:0;pointer-events:none;z-index:0}
.aurora::before,.aurora::after{content:"";position:absolute;border-radius:50%;filter:blur(90px)}
.aurora::before{width:620px;height:620px;top:-280px;left:-140px;background:rgba(32,72,160,.5)}
.aurora::after{width:520px;height:520px;top:-180px;right:-160px;background:rgba(16,136,200,.32)}
.dots{
  position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(circle,rgba(110,130,164,.22) 1px,transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 75%);
          mask-image:linear-gradient(180deg,#000,transparent 75%);
}
.hero-grid{position:relative;z-index:1;display:grid;gap:clamp(32px,5vw,54px);align-items:center}
@media(min-width:960px){.hero-grid{grid-template-columns:1.08fr .92fr}}
.hero-copy{display:flex;flex-direction:column;gap:20px;animation:rise .55s ease-out both}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}

/* Franja de credenciales: ocupa TODO el ancho del contenedor, no la columna
   del texto, y reparte los cuatro datos por igual. */
.hero-foot{position:relative;z-index:1;margin-top:clamp(36px,5vw,58px)}
.trust{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:22px 28px;padding-top:26px;border-top:1px solid var(--line);
}
.trust > div{display:flex;flex-direction:column;gap:5px}
.trust b{
  font-family:var(--f-display);font-weight:800;font-size:26px;
  letter-spacing:-.025em;line-height:1;
}
.trust span{
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);line-height:1.4;
}
.flags{display:flex;gap:6px;align-items:center}
.flag{
  font-family:var(--f-mono);font-size:11px;font-weight:500;font-style:normal;
  border:1px solid var(--line-2);border-radius:4px;padding:2px 6px;color:var(--cyan);
}

/* --------------------------------------------------- 8. HUECOS DE IMAGEN
   Sustituye cada .slot por  <img src="..." alt="..." width height loading="lazy">
   Las medidas y el texto alt de cada uno están en el comentario del HTML.    */

.slot{
  position:relative;display:grid;place-items:center;text-align:center;
  border:1.5px dashed var(--line-2);border-radius:var(--r-md);
  background:linear-gradient(135deg,rgba(32,72,160,.22),rgba(16,136,200,.10) 60%,transparent),var(--ground-2);
  color:var(--ink-3);padding:22px;overflow:hidden;max-width:100%;
}
.slot::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(110,130,164,.07) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(110,130,164,.07) 1px,transparent 1px);
  background-size:32px 32px;
}
.slot > div{position:relative;z-index:1}
.slot-id{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cyan);display:block;margin-bottom:6px;
}
.slot-dim{font-family:var(--f-mono);font-size:12.5px;color:var(--ink-2);display:block}
.slot-hint{font-size:12.5px;margin-top:6px;max-width:34ch;line-height:1.45;margin-inline:auto}
.slot.r-43{aspect-ratio:4/3.2}
.slot.r-169{aspect-ratio:16/9}
.slot.r-1610{aspect-ratio:16/10}
.slot.r-11{aspect-ratio:1/1}

/* ----------------------------------------------------------- 9. SECCIONES */

section{padding-block:var(--sec);scroll-margin-top:84px}
/* Sin tope de ancho: el titular va de lado a lado. Solo el párrafo de
   entrada se limita, porque el texto corrido sí necesita medida corta. */
.sec-head{display:flex;flex-direction:column;gap:14px;margin-bottom:clamp(30px,4vw,48px)}
.sec-head .lede{max-width:72ch}

/* ------------------------------------------------------- 10. BENTO / CARDS */

/* Una fila ancha para la línea principal y una fila limpia de tres debajo.
   Se salta el paso por dos columnas a propósito: con cuatro tarjetas dejaría
   siempre una huérfana al final de la retícula. */
.bento{display:grid;gap:18px;grid-template-columns:1fr}
@media(min-width:940px){
  .bento{grid-template-columns:repeat(3,1fr)}
  .bento .card-xl{grid-column:1 / -1}
}
.card{
  position:relative;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:var(--pad);
  display:flex;flex-direction:column;gap:16px;
  transition:transform .2s ease;
}
.card::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:var(--grad);opacity:0;transition:opacity .2s ease;pointer-events:none;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}
.card:hover::before{opacity:.8}
.card:hover{transform:translateY(-3px)}
.card-xl{display:grid;gap:clamp(24px,4vw,44px);align-items:center}
@media(min-width:940px){.card-xl{grid-template-columns:1.05fr .95fr}}
.card-col{display:flex;flex-direction:column;gap:16px}
.card p{color:var(--ink-2);font-size:15.2px}

.rank{
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--cyan);border:1px solid rgba(16,136,200,.5);
  border-radius:100px;padding:4px 11px;align-self:flex-start;
}
ul.ticks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
/* posición absoluta en vez de grid: así el <li> admite <strong>, <a> o <b>
   sin que el texto suelto caiga en la columna del punto y se parta palabra a palabra */
ul.ticks li{position:relative;padding-left:28px;font-size:14.6px;line-height:1.55;color:var(--ink-2)}
ul.ticks li::before{content:"";position:absolute;left:0;top:8px;width:7px;height:7px;border-radius:2px;background:var(--grad)}
ul.ticks.gold li::before{background:var(--grad-gold)}

.price-from{
  font-family:var(--f-mono);font-size:13px;color:var(--ink-3);
  border-top:1px solid var(--line);padding-top:14px;margin-top:auto;
}
.price-from b{color:var(--ink);font-weight:500;font-size:15px}
.card-link{
  font-family:var(--f-display);font-weight:600;font-size:14.5px;color:var(--cyan);
  display:inline-flex;align-items:center;gap:7px;transition:gap .18s ease;
}
.card:hover .card-link{gap:12px}

/* ------------------------------------------------------- 11. BANDA URGENTE */

.urgent{
  position:relative;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid rgba(255,138,61,.35);
  background:linear-gradient(120deg,rgba(255,138,61,.10),var(--surface) 55%);
  padding:var(--pad);display:grid;gap:22px;align-items:center;
}
@media(min-width:800px){.urgent{grid-template-columns:1fr auto}}
.urgent .eyebrow{color:var(--hot)}
.pulse{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--hot);
}
.pulse i{width:7px;height:7px;border-radius:50%;background:var(--hot);animation:beat 1.9s ease-in-out infinite}
@keyframes beat{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.8)}}

/* ------------------------------------------------- 11b. VERIFACTU / FACTURANDOO
   El único bloque de la web con identidad dorada. Es normativa oficial y
   tiene que leerse como tal: serio, no estridente.                          */

.verifactu{
  position:relative;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid rgba(214,169,58,.38);
  background:linear-gradient(125deg,rgba(214,169,58,.11),var(--surface) 52%);
  padding:var(--pad);
}
.verifactu::before{
  content:"";position:absolute;width:420px;height:420px;border-radius:50%;
  top:-230px;left:-120px;background:rgba(214,169,58,.16);filter:blur(80px);pointer-events:none;
}
.vf-grid{position:relative;z-index:1;display:grid;gap:clamp(26px,4vw,46px);align-items:stretch}
@media(min-width:940px){
  .vf-grid{grid-template-columns:1.08fr .92fr}
  /* La imagen absorbe la altura sobrante de la columna derecha para que las
     dos columnas terminen a la misma altura. */
  .vf-media .slot{flex:1;aspect-ratio:auto;min-height:240px}
  /* el hueco vacío sí se estira para no dejar un agujero, pero una foto real NO:
     estirarla convertía una foto apaisada de 4:3 en un recorte vertical de 0,64 */
  /* la foto crece para acompañar a la columna de texto, pero con tope: sin él
     una foto apaisada de 4:3 acababa recortada a 0,64 y se cargaba la escena */
  .vf-media img{flex:1;width:100%;min-height:300px;max-height:480px;object-fit:cover;object-position:center 42%}
}
.vf-copy{display:flex;flex-direction:column;gap:16px}
.vf-copy .eyebrow{color:var(--gold-soft)}
.vf-copy p{color:var(--ink-2)}

.badge-oficial{
  display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:#1A1204;background:var(--grad-gold);
  border-radius:100px;padding:5px 13px;font-weight:500;
}

.deadlines{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.dl{
  border:1px solid var(--line);border-radius:var(--r-md);
  padding:15px 17px;background:var(--ground-2);
  display:flex;flex-direction:column;gap:3px;
}
.dl .when{
  font-family:var(--f-display);font-weight:800;font-size:20px;letter-spacing:-.02em;
  background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.dl .who{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3)}
.dl .what{font-size:13.5px;color:var(--ink-2);margin-top:4px}

.btn-gold{background:var(--grad-gold);color:#1A1204}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 12px 34px -12px rgba(214,169,58,.6)}

.vf-media{display:flex;flex-direction:column;gap:12px}

/* Desplegables de preguntas frecuentes */
.faq{display:flex;flex-direction:column;gap:10px}
.faq details{
  border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--ground-2);overflow:hidden;
}
.faq summary{
  cursor:pointer;list-style:none;padding:14px 16px;
  font-family:var(--f-display);font-weight:600;font-size:15px;line-height:1.35;
  display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";font-family:var(--f-mono);font-size:19px;line-height:1.1;
  color:var(--gold-soft);flex:none;
}
.faq details[open] summary::after{content:"–"}
.faq details[open] summary{border-bottom:1px solid var(--line)}
.faq details p{padding:13px 16px 16px;font-size:14.3px;color:var(--ink-2)}
.faq summary:focus-visible{outline:2px solid var(--cyan);outline-offset:-2px}
.legal-note{
  font-size:12.5px;color:var(--ink-3);line-height:1.5;
  border-top:1px solid var(--line);padding-top:12px;
}
.legal-note a{color:var(--cyan)}

/* --------------------------------------------------- 11c. VENTA CRUZADA */

.cross{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.xc{
  border:1px solid var(--line);border-radius:var(--r-md);padding:18px 20px;
  background:var(--ground-2);display:flex;flex-direction:column;gap:7px;
  transition:border-color .2s ease;
}
.xc:hover{border-color:var(--line-2)}
.xc .from{
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--cyan);
}
.xc .to{font-family:var(--f-display);font-weight:600;font-size:16px;letter-spacing:-.01em;line-height:1.3}
.xc p{font-size:14px;color:var(--ink-2)}

/* ------------------------------------------------------------ 12. PROCESO */

.steps{display:grid;gap:20px;counter-reset:st}
@media(min-width:760px){.steps{grid-template-columns:repeat(3,1fr)}}
.step{counter-increment:st;display:flex;flex-direction:column;gap:10px;padding-top:22px;border-top:2px solid var(--line)}
.step:first-child{border-top-color:var(--glow)}
.step::before{content:"0" counter(st);font-family:var(--f-mono);font-size:12px;letter-spacing:.12em;color:var(--cyan)}
.step p{color:var(--ink-2);font-size:14.8px}

/* ------------------------------------------------------------- 13. CLIENTES */

.clients{
  list-style:none;margin:0;padding:26px 0;display:grid;gap:14px 30px;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  border-block:1px solid var(--line);
}
.clients li{
  font-family:var(--f-display);font-weight:600;font-size:15px;letter-spacing:-.008em;
  color:var(--gold-soft);display:flex;align-items:center;gap:9px;line-height:1.3;
}
.clients li::before{content:"";flex:none;width:5px;height:5px;border-radius:50%;background:var(--gold)}

.proof{display:grid;gap:16px}
@media(min-width:720px){.proof{grid-template-columns:repeat(2,1fr)}}
.pcard{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  padding:22px;display:flex;flex-direction:column;gap:10px;
}
.pcard .who{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.pcard .what{font-size:15px;color:var(--ink-2)}
.pcard .num{font-family:var(--f-display);font-weight:800;font-size:28px;letter-spacing:-.02em}

/* --------------------------------------------- 14. BLOQUES ALTERNOS (feature) */

.feature{display:grid;gap:clamp(26px,4vw,52px);align-items:center;margin-bottom:clamp(40px,6vw,72px)}
.feature:last-child{margin-bottom:0}
@media(min-width:880px){
  .feature{grid-template-columns:1fr 1fr}
  .feature.reverse .feature-media{order:-1}
}
.feature-copy{display:flex;flex-direction:column;gap:16px}
.feature-copy p{color:var(--ink-2)}
.feature-media{display:flex;flex-direction:column;gap:12px}
.feature-media .slot,.feature-media > img{width:100%;height:auto}
/* un retrato vertical al 50 % de ancho se iría a 800 px de alto y dejaría el
   texto flotando arriba: lo limitamos y recortamos por abajo, no por la cara */
.feature-media > img.retrato{
  max-height:min(560px,76vh);object-fit:cover;object-position:center top;
  border-radius:var(--r-md)
}

.highlight{
  border-left:3px solid var(--gold);background:var(--surface);
  border-radius:var(--r-sm);padding:14px 18px;color:var(--ink-2);font-size:14.6px;
}
.highlight b{color:var(--gold-soft)}

.gallery{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));margin-top:28px}
.gallery .slot{aspect-ratio:4/3}

/* --------------------------------------------------------------- 15. BLOG */

.posts{display:grid;gap:16px}
@media(min-width:800px){.posts{grid-template-columns:repeat(3,1fr)}}
.post{
  border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;
  background:var(--surface);display:flex;flex-direction:column;transition:border-color .2s;
}
.post:hover{border-color:var(--line-2)}
.post .slot{border:0;border-radius:0;border-bottom:1px solid var(--line);aspect-ratio:16/9}
.post-body{padding:18px;display:flex;flex-direction:column;gap:8px}
.post-body .kicker{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan)}

/* -------------------------------------------------------- 16. CTA / FORMULARIO */

.final{
  position:relative;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--line-2);background:var(--surface);
  padding:clamp(28px,5vw,52px);display:grid;gap:clamp(26px,4vw,46px);
}
@media(min-width:900px){.final{grid-template-columns:1fr 1fr}}
.final::before{
  content:"";position:absolute;width:460px;height:460px;border-radius:50%;
  top:-240px;right:-140px;background:rgba(16,136,200,.28);filter:blur(90px);pointer-events:none;
}
.final > *{position:relative;z-index:1}
.form-col{display:flex;flex-direction:column;gap:12px}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.field input,.field select,.field textarea{
  background:var(--ground);border:1px solid var(--line-2);border-radius:var(--r-sm);
  padding:11px 13px;color:var(--ink);font-family:inherit;font-size:14.5px;width:100%;
}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-3)}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--cyan);outline-offset:1px;border-color:transparent}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Texto que está para los lectores de pantalla y para el aria-labelledby,
   pero no se ve. Con clip-path en vez de left:-9999px: ese desplazamiento
   enorme es el patrón clásico del texto oculto para engañar al buscador, y
   aunque aquí el uso es legítimo, no hay razón para parecerlo. */
.visually-hidden{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
}
.consent{display:flex;gap:9px;align-items:flex-start;font-size:12.5px;color:var(--ink-3);line-height:1.45}
.consent input{margin-top:3px;accent-color:var(--glow);width:auto}
.consent a{color:var(--cyan);text-decoration:underline}
.form-msg{font-size:14px;padding:11px 14px;border-radius:var(--r-sm);display:none}
.form-msg[data-state="ok"]{display:block;background:rgba(74,222,128,.12);border:1px solid rgba(74,222,128,.4);color:var(--ok)}
.form-msg[data-state="err"]{display:block;background:rgba(255,138,61,.12);border:1px solid rgba(255,138,61,.4);color:var(--hot)}
/* Estado intermedio: «un segundo, que lo estoy preparando». */
.form-msg[data-state="aviso"]{display:block;background:rgba(63,208,255,.10);border:1px solid rgba(63,208,255,.35);color:var(--cyan)}
/* El campo que falta, marcado también a la vista y no solo por aria. */
.form-col [aria-invalid="true"]{border-color:var(--hot);box-shadow:0 0 0 3px rgba(255,138,61,.18)}

/* --------------------------------------------------------------- 17. PIE */

footer.foot{border-top:1px solid var(--line);background:var(--ground-2);padding-block:44px 30px;margin-top:clamp(50px,7vw,80px)}
.foot-grid{display:grid;gap:28px}
@media(min-width:800px){.foot-grid{grid-template-columns:1.4fr 1fr 1fr}}
.foot h2{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin:0 0 12px;font-weight:500}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:14.5px;color:var(--ink-2)}
.foot ul a:hover{color:var(--cyan)}
.nap{font-size:14.5px;color:var(--ink-2);line-height:1.8;font-style:normal}
.nap a{color:var(--cyan)}
.foot-bottom{
  margin-top:32px;padding-top:20px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:10px 22px;justify-content:space-between;
  font-size:12.5px;color:var(--ink-3);
}

/* ------------------------------------------------------ 18. AVISO DE COOKIES
   Conforme a la guía de la AEPD: rechazar es tan fácil como aceptar.         */

.cookie{
  position:fixed;inset:auto 12px 12px;z-index:100;max-width:560px;margin-inline:auto;
  background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-md);
  padding:20px;box-shadow:0 20px 60px -20px rgba(0,0,0,.9);display:none;
}
.cookie[data-open="true"]{display:block}
.cookie p{font-size:13.8px;color:var(--ink-2);margin-bottom:14px}
.cookie a{color:var(--cyan);text-decoration:underline}
.cookie-actions{display:flex;flex-wrap:wrap;gap:10px}
.cookie-actions .btn{font-size:14px;padding:10px 18px;flex:1 1 auto}

/* ------------------------------------------------------- 19. ACCESIBILIDAD */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  html{scroll-behavior:auto}
}

/* ============================================================================
   20. PÁGINAS INTERIORES
   ========================================================================== */

/* ------------------------------------------------------------ Migas de pan */
.crumbs{padding-block:18px 0}
.crumbs ol{
  list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  font-family:var(--f-mono);font-size:11.5px;letter-spacing:.06em;color:var(--ink-3);
}
.crumbs li{display:flex;align-items:center;gap:8px}
.crumbs li+li::before{content:"/";color:var(--line-2)}
.crumbs a:hover{color:var(--cyan)}
.crumbs [aria-current]{color:var(--ink-2)}

/* --------------------------------------------------- Cabecera de página */
.page-hero{position:relative;padding-block:clamp(38px,6vw,64px) clamp(30px,4vw,48px);overflow:hidden}
.page-hero .aurora::before{background:rgba(214,169,58,.30)}
.page-hero .aurora::after{background:rgba(32,72,160,.34)}
.page-hero-in{position:relative;z-index:1;display:grid;gap:clamp(28px,4vw,48px);align-items:center}
@media(min-width:960px){.page-hero-in{grid-template-columns:1.05fr .95fr}}
.page-hero h1{font-size:clamp(31px,5vw,52px)}
.page-hero .lede{font-size:clamp(16px,1.8vw,19px)}

/* --------------------------------------------------------- Cuenta atrás */
.countdown{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));margin-top:6px}
.cd{
  border:1px solid rgba(214,169,58,.34);border-radius:var(--r-md);
  background:linear-gradient(140deg,rgba(214,169,58,.10),var(--surface) 60%);
  padding:18px 20px;display:flex;flex-direction:column;gap:4px;
}
.cd .dias{
  font-family:var(--f-display);font-weight:800;font-size:clamp(30px,4.4vw,40px);
  line-height:1;letter-spacing:-.03em;
  background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent;
  font-variant-numeric:tabular-nums;
}
.cd .dias small{font-size:15px;font-weight:600;letter-spacing:0}
.cd .quien{font-family:var(--f-display);font-weight:600;font-size:16px;margin-top:6px}
.cd .fecha{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}

/* ------------------------------------------------- ¿Me obliga a mí? */
.checker{
  border:1px solid var(--line-2);border-radius:var(--r-lg);background:var(--surface);
  padding:var(--pad);box-shadow:var(--shadow);
}
.checker-opts{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));margin-top:18px}
.opt{
  border:1px solid var(--line-2);border-radius:var(--r-md);background:var(--ground-2);
  padding:14px 16px;text-align:left;cursor:pointer;color:var(--ink);
  font-family:var(--f-body);font-size:14.6px;line-height:1.4;
  transition:border-color .18s ease,background .18s ease;
}
.opt:hover{border-color:var(--gold)}
.opt[aria-pressed="true"]{border-color:var(--gold);background:rgba(214,169,58,.12)}
.opt b{display:block;font-family:var(--f-display);font-weight:600;font-size:15.5px;margin-bottom:3px}
.checker-out{
  margin-top:18px;padding:18px 20px;border-radius:var(--r-md);
  border:1px solid var(--line);background:var(--ground-2);display:none;
}
.checker-out[data-shown="true"]{display:block}
.checker-out .verdict{
  font-family:var(--f-display);font-weight:700;font-size:18px;margin-bottom:8px;letter-spacing:-.01em;
}
.checker-out .verdict.si{color:var(--gold-soft)}
.checker-out .verdict.no{color:var(--ok)}
.checker-out p{color:var(--ink-2);font-size:14.6px}

/* ------------------------------------------------------------- Precios */
.planes{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.plan{
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);
  padding:24px;display:flex;flex-direction:column;gap:12px;
}
.plan.destacado{border-color:rgba(214,169,58,.45);background:linear-gradient(150deg,rgba(214,169,58,.09),var(--surface) 55%)}
.plan .etiqueta{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.plan .precio{font-family:var(--f-display);font-weight:800;font-size:32px;letter-spacing:-.03em;line-height:1}
.plan .precio span{font-size:14px;font-weight:500;color:var(--ink-3);letter-spacing:0}
.plan.destacado .precio{background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent}
.plan p{color:var(--ink-2);font-size:14.5px}
.plan .btn{margin-top:auto}

/* --------------------------------------------------------- Riesgo */
.riesgo{
  border:1px solid rgba(255,138,61,.34);border-left:3px solid var(--hot);
  border-radius:var(--r-md);background:linear-gradient(120deg,rgba(255,138,61,.08),var(--surface) 60%);
  padding:20px 22px;
}
.riesgo h3{color:var(--hot);margin-bottom:10px}
.riesgo p{color:var(--ink-2);font-size:14.8px;margin-bottom:10px}
.riesgo p:last-child{margin-bottom:0}
.cifras{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));margin:16px 0}
.cifra{border:1px solid var(--line);border-radius:var(--r-sm);padding:13px 15px;background:var(--ground-2)}
.cifra b{display:block;font-family:var(--f-display);font-weight:800;font-size:23px;color:var(--hot);letter-spacing:-.02em}
.cifra span{font-size:13px;color:var(--ink-3);line-height:1.4;display:block;margin-top:3px}

/* --------------------------------------------------- Proceso numerado */
/* son cinco fases: en escritorio van las cinco en fila (línea de tiempo) y
   en tablet la última ocupa el ancho, para no dejar nunca una tarjeta huérfana */
.fases{display:grid;gap:16px;grid-template-columns:1fr;counter-reset:f}
@media(min-width:620px){
  .fases{grid-template-columns:repeat(2,1fr)}
  .fases > :last-child{grid-column:1 / -1}
}
@media(min-width:1040px){
  .fases{grid-template-columns:repeat(5,1fr);gap:12px}
  .fases > :last-child{grid-column:auto}
}
.fase{
  counter-increment:f;border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--ground-2);padding:20px;display:flex;flex-direction:column;gap:8px;
}
.fase::before{
  content:counter(f,decimal-leading-zero);
  font-family:var(--f-mono);font-size:12px;letter-spacing:.12em;color:var(--gold-soft);
}
.fase h3{font-size:16.5px}
.fase p{font-size:14.3px;color:var(--ink-2)}
.fase .plazo{font-family:var(--f-mono);font-size:11.5px;color:var(--ink-3);margin-top:auto;padding-top:8px;border-top:1px solid var(--line)}

/* ---------------------------------------------- 21. CAPTURAS DE PANTALLA
   Marco de ventana para que una captura clara se asiente sobre el fondo
   oscuro sin parecer un recorte pegado.                                    */

.shot{
  border:1px solid var(--line-2);border-radius:var(--r-lg);overflow:hidden;
  background:var(--surface-2);box-shadow:0 30px 70px -32px rgba(0,0,0,.85);
}
.shot-bar{
  display:flex;align-items:center;gap:7px;padding:11px 15px;
  background:var(--surface-2);border-bottom:1px solid var(--line);
}
.shot-bar i{width:10px;height:10px;border-radius:50%;background:var(--line-2);flex:none}
.shot-bar span{
  font-family:var(--f-mono);font-size:11.5px;color:var(--ink-3);
  margin-left:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.shot img{display:block;width:100%;height:auto}
.shot-pie{
  font-size:13px;color:var(--ink-3);margin-top:12px;text-align:center;line-height:1.5;
}

/* Dos columnas bajo la captura */
.bajo-shot{display:grid;gap:clamp(22px,3vw,40px);margin-top:clamp(26px,4vw,40px)}
@media(min-width:820px){.bajo-shot{grid-template-columns:1.1fr .9fr}}

/* ------------------------------------------------ 22. BLOQUE DE FRANQUEZA
   Para decir lo que NO se vende. Acento azul, no rojo: no es una alarma,
   es una posición.                                                         */

.franco{
  border:1px solid var(--line-2);border-left:3px solid var(--cyan);
  border-radius:var(--r-md);background:linear-gradient(120deg,rgba(16,136,200,.08),var(--surface) 62%);
  padding:var(--pad);
}
.franco h2,.franco h3{margin-bottom:12px}
.franco > p{color:var(--ink-2);margin-bottom:14px}
.no-lista{list-style:none;margin:0;padding:0;display:grid;gap:12px}
@media(min-width:760px){.no-lista{grid-template-columns:repeat(2,1fr)}}
.no-lista li{
  display:grid;grid-template-columns:22px 1fr;gap:12px;
  font-size:14.8px;color:var(--ink-2);line-height:1.55;
}
.no-lista li::before{
  content:"×";font-family:var(--f-display);font-weight:700;font-size:17px;
  color:var(--hot);line-height:1.3;
}
.no-lista b{color:var(--ink);font-weight:600}

/* Ejemplos concretos de automatización */
.ejemplos{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.ej{
  border:1px solid var(--line);border-radius:var(--r-md);background:var(--ground-2);
  padding:20px;display:flex;flex-direction:column;gap:9px;
}
.ej .antes{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--hot)}
.ej .despues{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--ok);margin-top:4px}
.ej p{font-size:14.4px;color:var(--ink-2)}
.ej h3{font-size:16.5px}

/* ============================================================================
   23. PÁGINA DE AMAZON
   ========================================================================== */

/* ------------------------------------------------------ Cifras de cabecera */
/* 180px daban dos columnas de 140px útiles en un móvil de 414, y una cifra
   como «Componente» a 30px pide 205: se salía de la tarjeta y empujaba la
   página entera. Con 210 el móvil pasa a una sola columna, que además se
   lee mejor, y arriba sigue habiendo dos, tres o cuatro según quepa. */
.kpis{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.kpi{
  border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);
  padding:20px;display:flex;flex-direction:column;gap:5px;
}
.kpi b{
  font-family:var(--f-display);font-weight:800;font-size:30px;
  letter-spacing:-.03em;line-height:1;
}
.kpi .et{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.kpi p{font-size:13.4px;color:var(--ink-2);margin-top:4px}

/* ------------------------------------------- Comparativa de ficha antes/después */
.comparativa{display:grid;gap:16px}
@media(min-width:880px){.comparativa{grid-template-columns:1fr 1fr}}
.ficha{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column}
.ficha-cab{
  padding:12px 18px;font-family:var(--f-mono);font-size:11px;
  letter-spacing:.13em;text-transform:uppercase;display:flex;align-items:center;gap:9px;
}
.ficha.mala{border-color:rgba(255,138,61,.35)}
.ficha.mala .ficha-cab{background:rgba(255,138,61,.10);color:var(--hot);border-bottom:1px solid rgba(255,138,61,.28)}
.ficha.buena{border-color:rgba(74,222,128,.35)}
.ficha.buena .ficha-cab{background:rgba(74,222,128,.09);color:var(--ok);border-bottom:1px solid rgba(74,222,128,.26)}
.ficha-cuerpo{padding:20px;background:var(--surface);display:flex;flex-direction:column;gap:14px;flex:1}
.ficha-titulo{font-size:15px;line-height:1.45;color:var(--ink);font-weight:500}
.ficha-bullets{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:13.6px;color:var(--ink-2)}
.ficha-bullets li{padding-left:15px;position:relative;line-height:1.5}
.ficha-bullets li::before{content:"•";position:absolute;left:0;color:var(--ink-3)}
.ficha-nota{
  font-size:13px;color:var(--ink-3);border-top:1px solid var(--line);
  padding-top:13px;margin-top:auto;line-height:1.5;
}
.ficha-nota b{color:var(--ink-2)}

/* --------------------------------------------------------- Marketplaces */
.markets{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.mk{border:1px solid var(--line);border-radius:var(--r-md);background:var(--ground-2);padding:17px 19px}
.mk .cod{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;color:var(--cyan);
  border:1px solid var(--line-2);border-radius:4px;padding:2px 7px;display:inline-block;margin-bottom:9px;
}
.mk b{display:block;font-family:var(--f-display);font-weight:700;font-size:17px;letter-spacing:-.01em}
.mk p{font-size:13.4px;color:var(--ink-2);margin-top:6px;line-height:1.5}

/* ------------------------------------------------------------- Métricas */
/* tres columnas fijas en escritorio: con seis fichas quedan 3+3 y no sobra
   una fila coja de dos, que es lo que pasaba con auto-fit */
.metricas{display:grid;gap:16px 22px;grid-template-columns:1fr}
@media(min-width:620px){.metricas{grid-template-columns:repeat(2,1fr)}}
@media(min-width:940px){.metricas{grid-template-columns:repeat(3,1fr)}}
.met{border-left:2px solid var(--glow);padding:2px 0 2px 16px}
.met b{
  font-family:var(--f-mono);font-size:12.5px;letter-spacing:.07em;
  color:var(--cyan);display:block;margin-bottom:5px;
}
.met p{font-size:14.2px;color:var(--ink-2);line-height:1.55}

/* --------------------------------- Hueco reservado para un caso real futuro */
.slot.pendiente{
  border-style:dashed;border-color:rgba(214,169,58,.4);
  background:linear-gradient(135deg,rgba(214,169,58,.08),var(--ground-2) 60%);
  min-height:210px;
}
.slot.pendiente .slot-id{color:var(--gold-soft)}
.casos{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}

/* ═══════════════════════════════════════════════════════════════════════════
   24 · DISEÑO WEB Y MANTENIMIENTO
   ═══════════════════════════════════════════════════════════════════════════ */

/* --------------------------------------------- Galería de trabajos hechos */
.gal{display:grid;gap:18px;grid-template-columns:1fr}
@media(min-width:660px){.gal{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.gal{grid-template-columns:repeat(3,1fr)}}

.proyecto{
  display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-md);overflow:hidden;
  transition:border-color .18s ease, transform .18s ease;
}
.proyecto:hover{border-color:var(--line-2);transform:translateY(-2px)}
.proyecto > .slot,.proyecto > .shot{border-radius:0;border-left:0;border-right:0;border-top:0;margin:0}
.proyecto > .slot{aspect-ratio:16/10;min-height:0}
/* son webs claras dentro de una tarjeta oscura: la línea inferior las separa
   del cuerpo y evita que el blanco se derrame sobre el texto */
.proyecto > img{
  display:block;width:100%;height:auto;
  aspect-ratio:16/10;object-fit:cover;object-position:top center;
  border-bottom:1px solid var(--line);
  filter:saturate(.94);transition:filter .18s ease
}
.proyecto:hover > img{filter:saturate(1)}

.proyecto-cuerpo{display:flex;flex-direction:column;gap:9px;padding:18px 20px 20px;flex:1}
.proyecto-cab{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap}
.proyecto-cab h3{font-size:17.5px;font-weight:700;letter-spacing:-.015em;margin:0}
.proyecto .anyo{font-family:var(--f-mono);font-size:11.5px;color:var(--ink-3);flex:none}
.proyecto p{font-size:14px;color:var(--ink-2);line-height:1.55;flex:1}

.tag{
  display:inline-flex;align-self:flex-start;
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--cyan);background:rgba(63,208,255,.09);
  border:1px solid rgba(63,208,255,.22);border-radius:100px;padding:3px 10px;
}
.tag.oro{color:var(--gold-soft);background:rgba(214,169,58,.09);border-color:rgba(214,169,58,.26)}

.enlace-ext{
  display:inline-flex;align-items:center;gap:7px;margin-top:2px;
  font-size:13.5px;font-weight:600;color:var(--cyan);text-decoration:none;
}
.enlace-ext:hover{text-decoration:underline}
.enlace-ext svg{flex:none;opacity:.7}
.proyecto .sin-enlace{font-family:var(--f-mono);font-size:11.5px;color:var(--ink-3)}

/* ------------------------------------- Histórico compacto de otros trabajos */
.historial{
  display:grid;gap:0;margin-top:26px;
  border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;
  background:var(--ground-2);
}
.historial .fila{
  display:grid;grid-template-columns:1fr;gap:4px;
  padding:14px 18px;border-bottom:1px solid var(--line);
}
.historial .fila:last-child{border-bottom:0}
@media(min-width:720px){
  .historial .fila{grid-template-columns:minmax(0,1.1fr) minmax(0,1.5fr) 96px;align-items:baseline;gap:16px}
}
.historial .nom{font-weight:600;color:var(--ink);font-size:14.5px}
.historial .que{font-size:13.5px;color:var(--ink-2)}
.historial .cuando{font-family:var(--f-mono);font-size:11.5px;color:var(--ink-3)}
@media(min-width:720px){.historial .cuando{text-align:right}}

/* ------------------------------------ Riesgos de una web sin mantenimiento */
.riesgos{display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:620px){.riesgos{grid-template-columns:repeat(2,1fr)}}
@media(min-width:960px){.riesgos{grid-template-columns:repeat(3,1fr)}}
.riesgo-web{
  background:var(--ground-2);border:1px solid var(--line);
  border-left:2px solid var(--hot);border-radius:var(--r-sm);
  padding:16px 18px;display:flex;flex-direction:column;gap:7px;
}
.riesgo-web b{font-family:var(--f-display);font-size:15px;color:var(--ink);font-weight:700}
.riesgo-web p{font-size:13.8px;color:var(--ink-2);line-height:1.55}
.riesgo-web .coste{font-family:var(--f-mono);font-size:11.5px;color:var(--hot);margin-top:2px}

/* ------------------------------------------- Qué incluye cada mes / checklist */
.incluye{
  display:grid;gap:12px 26px;grid-template-columns:1fr;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-md);padding:clamp(20px,3vw,30px);
}
@media(min-width:700px){.incluye{grid-template-columns:repeat(2,1fr)}}
.incluye .it{display:grid;grid-template-columns:20px 1fr;gap:11px;align-items:start}
.incluye .it svg{margin-top:3px;color:var(--ok);flex:none}
.incluye .it span{font-size:14.2px;color:var(--ink-2);line-height:1.55}
.incluye .it b{color:var(--ink);font-weight:600}

/* Un h2 dentro de una columna a media anchura no puede llevar el mismo cuerpo
   que uno a todo lo ancho: se parte en tres renglones. Aquí baja un punto. */
.feature-copy h2{font-size:clamp(24px,2.6vw,31px)}

/* ═══════════════════════════════════════════════════════════════════════════
   25 · PÁGINAS LEGALES Y 404
   ═══════════════════════════════════════════════════════════════════════════ */

/* Columna de lectura larga. Ancho de línea corto a propósito: un texto legal
   a 1.100 px de ancho no lo lee nadie. */
.legal{max-width:76ch;margin:0 auto;display:flex;flex-direction:column;gap:26px}
/* los apartados son <section> anidados: hay que anular el padding global,
   o entre uno y otro quedan casi cien píxeles de aire */
.legal > section{display:flex;flex-direction:column;gap:12px;padding-block:0;scroll-margin-top:96px}
.legal h2{font-size:clamp(21px,2.4vw,26px);letter-spacing:-.02em;scroll-margin-top:90px}
.legal h3{font-size:16.5px;font-weight:700;color:var(--ink);margin-top:6px}
.legal p,.legal li{font-size:15.2px;line-height:1.72;color:var(--ink-2)}
.legal b,.legal strong{color:var(--ink);font-weight:600}
.legal a{color:var(--cyan)}
.legal ul,.legal ol{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:9px}
.legal ul li::marker{color:var(--glow)}
.legal .actualizado{
  font-family:var(--f-mono);font-size:12px;color:var(--ink-3);
  border-top:1px solid var(--line);padding-top:16px;margin-top:6px;
}

/* Ficha de datos identificativos */
.datos-id{
  display:grid;gap:0;border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--surface);overflow:hidden;
}
.datos-id > div{
  display:grid;grid-template-columns:1fr;gap:3px;
  padding:13px 18px;border-bottom:1px solid var(--line);
}
.datos-id > div:last-child{border-bottom:0}
@media(min-width:620px){.datos-id > div{grid-template-columns:190px 1fr;gap:18px;align-items:baseline}}
.datos-id dt,.datos-id .k{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);
}
.datos-id dd,.datos-id .v{margin:0;font-size:14.8px;color:var(--ink)}

/* Dato que solo puede rellenar Rolando: imposible de publicar por descuido */
.pendiente-dato{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--f-mono);font-size:12.5px;font-weight:500;
  color:var(--hot);background:rgba(255,138,61,.12);
  border:1px dashed rgba(255,138,61,.55);border-radius:6px;padding:2px 9px;
}

/* Índice de la propia página legal */
.indice{
  border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--ground-2);padding:18px 22px;
  display:flex;flex-direction:column;gap:10px;
}
.indice p{font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.indice ol{margin:0;padding-left:20px;display:grid;gap:7px}
@media(min-width:640px){.indice ol{grid-template-columns:repeat(2,1fr);column-gap:26px}}
.indice a{color:var(--ink-2);font-size:14.2px;text-decoration:none}
.indice a:hover{color:var(--cyan);text-decoration:underline}

/* ------------------------------------------------------------------- 404 */
.e404{
  min-height:62vh;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:clamp(50px,9vw,110px) 0;
}
.e404-in{display:flex;flex-direction:column;align-items:center;gap:20px;max-width:62ch}
.e404 .codigo{
  font-family:var(--f-display);font-weight:800;font-size:clamp(76px,16vw,150px);
  line-height:.88;letter-spacing:-.05em;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.e404 h1{font-size:clamp(25px,4vw,38px)}
.e404 p{color:var(--ink-2);font-size:16px}
.e404 .rutas{
  display:grid;gap:12px;grid-template-columns:1fr;width:100%;margin-top:14px;text-align:left;
}
@media(min-width:680px){.e404 .rutas{grid-template-columns:repeat(2,1fr)}}
.e404 .ruta{
  border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);
  padding:16px 18px;text-decoration:none;display:flex;flex-direction:column;gap:5px;
  transition:border-color .18s ease,transform .18s ease;
}
.e404 .ruta:hover{border-color:var(--line-2);transform:translateY(-2px)}
.e404 .ruta b{font-family:var(--f-display);font-size:15.5px;color:var(--ink);font-weight:700}
.e404 .ruta span{font-size:13.6px;color:var(--ink-2);line-height:1.5}

/* ═══════════════════════════════════════════════════════════════════════════
   26 · BLOG
   ═══════════════════════════════════════════════════════════════════════════ */

/* ------------------------------------------------------------ Índice del blog */
.post.destacado{border-color:rgba(214,169,58,.42);background:linear-gradient(155deg,rgba(214,169,58,.07),var(--surface) 55%)}
.post.destacado .kicker{color:var(--gold-soft)}
.post .meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:auto;padding-top:10px;
  font-family:var(--f-mono);font-size:11px;color:var(--ink-3);
}
.post .meta i{font-style:normal;opacity:.45}
.post h3 a{color:var(--ink);text-decoration:none}
.post h3 a:hover{color:var(--cyan)}
.post .entradilla{font-size:14.2px;color:var(--ink-2);line-height:1.6}

/* ----------------------------------------------------------------- Artículo */
.articulo{max-width:72ch;margin:0 auto}
.articulo > * + *{margin-top:20px}
.articulo h2{
  font-size:clamp(22px,2.8vw,29px);letter-spacing:-.022em;line-height:1.2;
  margin-top:clamp(36px,4.5vw,54px);scroll-margin-top:96px;
}
.articulo h3{font-size:18px;font-weight:700;color:var(--ink);margin-top:30px;letter-spacing:-.015em}
.articulo p,.articulo li{font-size:16.2px;line-height:1.78;color:var(--ink-2)}
.articulo p.entradilla{font-size:18.5px;line-height:1.66;color:var(--ink)}
.articulo b,.articulo strong{color:var(--ink);font-weight:600}
/* Enlaces dentro del texto de un artículo.

   Dos cosas aquí, y las dos son fallos que había:

   · El :not(.btn). Sin él, este cian le ganaba al texto oscuro de
     .btn-gold y el botón dorado del final de los cinco artículos salía
     con las letras en cian sobre el dorado: 1,08:1. Ilegible, y era el
     botón principal de cada artículo. Medido en el navegador.

   · El subrayado. Un enlace que solo se distingue por el color incumple
     el criterio 1.4.1 de las WCAG si la diferencia con el texto de
     alrededor no llega a 3:1, y aquí era de 1,14:1. Quien no distingue
     bien los colores no veía dónde estaban los enlaces. */
.articulo a:not(.btn){
  color:var(--cyan);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}
.articulo a:not(.btn):hover{text-decoration-thickness:2px}

/* Enlaces dentro de un párrafo, fuera de los artículos: páginas de servicio,
   textos legales y el 404. Antes iban con un style="color:var(--cyan)" suelto
   en cada etiqueta, sin subrayado. Ahora van por aquí, con subrayado, por lo
   mismo que en los artículos: el color solo no vale como única señal. */
.enlace,
.legal a:not(.btn),
.faq a:not(.btn){
  color:var(--cyan);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}
.enlace:hover,
.legal a:not(.btn):hover,
.faq a:not(.btn):hover{text-decoration-thickness:2px}
.articulo ul,.articulo ol{margin:0;padding-left:24px;display:flex;flex-direction:column;gap:11px}
.articulo ul li::marker{color:var(--glow)}
.articulo ol li::marker{color:var(--glow);font-family:var(--f-mono);font-size:14px}
.articulo figure{margin:clamp(28px,4vw,40px) 0}
.articulo figcaption{font-size:13px;color:var(--ink-3);margin-top:10px;text-align:center}
.articulo hr{border:0;border-top:1px solid var(--line);margin:clamp(34px,5vw,48px) 0}

/* Cabecera del artículo */
.art-cab{display:flex;flex-direction:column;gap:16px;max-width:72ch;margin:0 auto}
.art-meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  font-family:var(--f-mono);font-size:11.5px;color:var(--ink-3);
}
.art-meta i{font-style:normal;opacity:.45}
.art-meta .cat{color:var(--cyan);letter-spacing:.1em;text-transform:uppercase}
.art-meta .cat.oro{color:var(--gold-soft)}

/* Sumario / índice del artículo */
.sumario{
  border:1px solid var(--line);border-left:2px solid var(--glow);
  border-radius:var(--r-md);background:var(--ground-2);
  padding:20px 24px;display:flex;flex-direction:column;gap:11px;
}
.sumario p{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.sumario ol{margin:0;padding-left:20px;gap:8px}
.sumario a{color:var(--ink-2);font-size:14.6px;text-decoration:none}
.sumario a:hover{color:var(--cyan);text-decoration:underline}

/* Bloques destacados dentro del texto */
.clave{
  border:1px solid rgba(63,208,255,.26);border-left:3px solid var(--cyan);
  border-radius:var(--r-md);background:linear-gradient(115deg,rgba(63,208,255,.07),var(--surface) 62%);
  padding:20px 24px;
}
.clave p{font-size:15.6px}
.clave p + p{margin-top:11px}
.clave .et{
  display:block;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--cyan);margin-bottom:9px;
}
.clave.oro{border-color:rgba(214,169,58,.3);border-left-color:var(--gold);
  background:linear-gradient(115deg,rgba(214,169,58,.08),var(--surface) 62%)}
.clave.oro .et{color:var(--gold-soft)}
.clave.aviso{border-color:rgba(255,138,61,.3);border-left-color:var(--hot);
  background:linear-gradient(115deg,rgba(255,138,61,.08),var(--surface) 62%)}
.clave.aviso .et{color:var(--hot)}

/* Tabla comparativa dentro de un artículo */
.tabla-envoltura{overflow-x:auto;-webkit-overflow-scrolling:touch}
.articulo table{
  width:100%;border-collapse:collapse;font-size:14.6px;
  border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;
}
.articulo th,.articulo td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.articulo thead th{
  background:var(--surface-2);color:var(--ink);font-weight:600;font-size:13.4px;
  font-family:var(--f-display);letter-spacing:-.01em;
}
.articulo tbody th{color:var(--ink);font-weight:600;background:var(--ground-2);white-space:nowrap}
.articulo td{color:var(--ink-2);line-height:1.6}
.articulo tbody tr:last-child th,.articulo tbody tr:last-child td{border-bottom:0}

/* Cita del autor */
.articulo blockquote{
  border-left:3px solid var(--line-2);padding:4px 0 4px 22px;margin:0;
}
.articulo blockquote p{font-size:17.4px;line-height:1.62;color:var(--ink);font-style:italic}

/* Ficha del autor, al pie del artículo */
.autor{
  display:grid;gap:18px;grid-template-columns:1fr;align-items:start;
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);
  padding:clamp(20px,3vw,28px);
}
@media(min-width:620px){.autor{grid-template-columns:82px 1fr}}
.autor .retrato{
  width:82px;height:82px;border-radius:50%;overflow:hidden;flex:none;
  border:1px solid var(--line-2);background:var(--ground-2);
  display:flex;align-items:center;justify-content:center;
}
.autor .retrato img{width:100%;height:100%;object-fit:cover}
.autor .retrato span{font-family:var(--f-mono);font-size:9.5px;color:var(--ink-3);text-align:center;padding:6px;line-height:1.35}
.autor h3{font-size:17px;margin:0}
.autor p{font-size:14.4px;color:var(--ink-2);line-height:1.6;margin-top:7px}
.autor .enlaces{display:flex;flex-wrap:wrap;gap:14px;margin-top:12px}
.autor .enlaces a{font-size:13.6px;font-weight:600;color:var(--cyan);text-decoration:none}
.autor .enlaces a:hover{text-decoration:underline}

/* Llamada a la acción al final del artículo */
.art-cta{
  border:1px solid rgba(214,169,58,.4);border-radius:var(--r-lg);
  background:linear-gradient(150deg,rgba(214,169,58,.1),var(--surface) 58%);
  padding:clamp(24px,4vw,36px);display:flex;flex-direction:column;gap:14px;
}
.art-cta h3,.art-cta h2{font-size:clamp(19px,2.4vw,24px);margin:0}
.art-cta p{font-size:15.4px;color:var(--ink-2)}
.art-cta .botones{display:flex;flex-wrap:wrap;gap:12px;margin-top:4px}

/* Artículos relacionados */
.relacionados{display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:720px){.relacionados{grid-template-columns:repeat(3,1fr)}}
.relacionados a{
  border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);
  padding:17px 19px;text-decoration:none;display:flex;flex-direction:column;gap:7px;
  transition:border-color .18s ease,transform .18s ease;
}
.relacionados a:hover{border-color:var(--line-2);transform:translateY(-2px)}
.relacionados .k{font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan)}
.relacionados b{font-family:var(--f-display);font-size:15.2px;color:var(--ink);font-weight:700;line-height:1.3}
.relacionados span{font-size:13.4px;color:var(--ink-2);line-height:1.5}

/* Fuentes citadas */
.fuentes{border-top:1px solid var(--line);padding-top:18px}
.fuentes p{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:10px}
.fuentes ol{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:7px}
.fuentes li{font-size:13.4px;color:var(--ink-3);line-height:1.55}
.fuentes a{color:var(--ink-2)}

/* Índice del blog: dos columnas en escritorio. Con cuatro artículos quedan
   2+2 y no sobra ninguna tarjeta suelta; a una sola columna las fichas salían
   enormes y solo cabían dos en pantalla. */
.lista-blog{grid-template-columns:1fr;gap:20px}
@media(min-width:760px){.lista-blog{grid-template-columns:repeat(2,1fr)}}
.lista-blog .post .slot{aspect-ratio:16/9}
.lista-blog .post-body{padding:20px 22px 22px;gap:9px}
.lista-blog .post h3{font-size:19px;line-height:1.26;letter-spacing:-.018em}

/* El dominio de cada trabajo, bajo su nombre. En línea propia y no al lado del
   título: con nombres largos como "Hotel Castillo El Collado" saltaba de fila
   en unas tarjetas sí y en otras no, y la rejilla quedaba descuadrada. */
.proyecto .dominio{
  font-family:var(--f-mono);font-size:11.5px;letter-spacing:.02em;
  color:var(--ink-3);margin-top:-4px;
}
.proyecto:hover .dominio{color:var(--cyan)}


/* ═══════════════════════════════════════════════════════════════════════════
   27 · RED DE SEGURIDAD TIPOGRÁFICA
   Una sola palabra larga —una cifra con texto, un dominio, un nombre de
   archivo— metida en una rejilla estrecha es capaz de empujar la página entera
   y provocar scroll lateral en el móvil. Esto no cambia nada de lo que ya se
   ve bien: solo impide que vuelva a ocurrir con cualquier texto futuro.
   ═══════════════════════════════════════════════════════════════════════════ */

.kpi b,.cifra b,.met b,.market b,.plan h3,.caso b,
.kpi span,.proyecto .dominio,.datos-id .v,.historial .nom{
  overflow-wrap:anywhere;
}
h1,h2,h3,h4,.lede,p,li,td,.tag,.eyebrow{overflow-wrap:break-word}

/* El ancho de las cifras grandes se adapta al hueco en vez de desbordarlo */
.kpi b{font-size:clamp(25px,6.2vw,30px)}
.cifra b{font-size:clamp(22px,5.4vw,26px)}


/* ═══════════════════════════════════════════════════════════════════════════
   28 · TAMAÑO MÍNIMO DE LOS OBJETIVOS TÁCTILES (WCAG 2.2 · 2.5.8)
   La norma pide 24 × 24 px de zona pulsable para cualquier enlace que no vaya
   embebido en una frase. Varios de los nuestros medían 19 px de alto: en un
   móvil eso significa fallar el toque y volver a intentarlo. Se arregla
   ampliando la zona sensible, no el texto: visualmente no cambia nada.
   ═══════════════════════════════════════════════════════════════════════════ */

.topbar a,
.crumbs a,
.sumario a,
.relacionados a,
.nav-links a,
.autor .enlaces a,
footer.foot a,
.nap a,
.card-link,
.indice a,
.fuentes a,
.art-cta a,
.datos-id .v a,
.post h3 a,
.post-link{
  display:inline-block;
  min-height:24px;
  line-height:24px;
}

/* .enlace-ext ya es inline-flex y lleva un icono al lado: forzarlo a
   inline-block lo partiría en dos líneas. Aquí solo crece la altura. */
.enlace-ext{min-height:24px;align-items:center}

/* El pie es una lista de enlaces, no una frase: cada uno necesita su altura */
footer.foot li{margin-block:2px}
.nap a{line-height:1.8;min-height:24px}

/* Las migas llevan separador: el relleno lateral iría contra él, así que
   aquí solo crece la altura. */
.crumbs ol{align-items:center}

/* En pantallas táctiles damos algo más de aire alrededor del texto, sin
   mover nada de sitio: el relleno se compensa con un margen negativo. */
@media (hover:none) and (pointer:coarse){
  .topbar a,.sumario a,.relacionados a{
    padding-block:4px;
    margin-block:-4px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   29 · TAMAÑO MÍNIMO DE TEXTO EN MÓVIL
   Las etiquetas en versalitas y el rótulo del logotipo bajaban de 10px, que
   en una pantalla pequeña y con poco contraste cuesta leer de verdad.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width:820px){
  .logo-word span{font-size:10.5px}
  .relacionados .k{font-size:11px}
}
@media (max-width:520px){
  .tag,.eyebrow,.sumario p,.etiqueta{font-size:11.5px}
  .met b,.kpi span{font-size:12px}
}

/* Encabezado que solo leen los lectores de pantalla y los buscadores.
   Hace falta para que la jerarquía h1 → h2 → h3 no tenga saltos sin
   obligarnos a meter un título que visualmente sobra. */
.solo-lectores{
  position:absolute;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0;
}


/* ═══════════════════════════════════════════════════════════════════════════
   30 · REDES SOCIALES EN EL PIE
   Los iconos van dibujados dentro del propio HTML, no como imágenes ni como
   una tipografía de iconos. Así no hay ni una petición más, no dependemos de
   ningún servicio de fuera —que es lo que nos permite la política de contenido
   estricta— y se ven nítidos en cualquier pantalla.
   ═══════════════════════════════════════════════════════════════════════════ */

.redes{display:flex;gap:10px;margin-top:18px}
.redes .red{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;                 /* de sobra para el mínimo táctil */
  border:1px solid var(--line);border-radius:11px;
  background:var(--surface);color:var(--ink-2);
  transition:color .18s ease, border-color .18s ease, background .18s ease, transform .18s ease;
}
.redes .red:hover,.redes .red:focus-visible{
  color:var(--cyan);border-color:rgba(63,208,255,.4);
  background:rgba(63,208,255,.07);transform:translateY(-2px);
}
.redes .red svg{display:block}

/* Cada marca recupera su color al pasar por encima: se reconocen antes */
.redes .red[aria-label*="Facebook"]:hover{color:#4C7FE8;border-color:rgba(76,127,232,.45);background:rgba(76,127,232,.09)}
.redes .red[aria-label*="en X"]:hover{color:#FFFFFF;border-color:rgba(255,255,255,.42);background:rgba(255,255,255,.08)}
.redes .red[aria-label*="LinkedIn"]:hover{color:#3FA2E0;border-color:rgba(63,162,224,.45);background:rgba(63,162,224,.09)}

@media (prefers-reduced-motion:reduce){
  .redes .red{transition:none}
  .redes .red:hover{transform:none}
}

/* ═══════════════════════════════════════════════════════════════════════════
   31 · ILUSTRACIÓN CON PIE DE FOTO
   Para las imágenes que explican algo y necesitan decir qué son. El pie no es
   decorativo: cuando una imagen enseña cifras de ejemplo, es ahí donde se
   dice, y tiene que leerse igual de bien que el texto de alrededor.
   ═══════════════════════════════════════════════════════════════════════════ */

.ilustra{
  margin:0 auto;max-width:880px;
  display:flex;flex-direction:column;gap:14px;
}
.ilustra img{
  display:block;width:100%;height:auto;
  border:1px solid var(--line);border-radius:var(--r-md);
}
.ilustra figcaption{
  font-size:14.2px;line-height:1.6;color:var(--ink-2);
  border-left:2px solid var(--line-2);padding-left:14px;
}
.ilustra figcaption b{color:var(--ink)}

/* ═══════════════════════════════════════════════════════════════════════════
   32 · GRÁFICOS DE EJEMPLO
   Dibujados en SVG dentro del propio HTML: ni una petición más, nítidos en
   cualquier pantalla y con las cifras como texto de verdad, así que las lee
   un buscador y las lee un lector de pantalla. Ningún valor queda escondido
   detrás del ratón: todos están también escritos debajo.
   ═══════════════════════════════════════════════════════════════════════════ */

.ejemplos-graficos{display:grid;gap:clamp(26px,4vw,38px)}

.grafico{
  margin:0;display:grid;gap:18px;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:clamp(20px,3vw,30px);
}
.gr-cab{display:flex;flex-direction:column;gap:9px;max-width:68ch}
.gr-cab h3{font-size:clamp(18px,2.1vw,22px);letter-spacing:-.015em;margin:0}
.gr-cab p{font-size:14.8px;color:var(--ink-2);line-height:1.62}

.gr-lienzo{
  background:var(--ground-2);border:1px solid var(--line);
  border-radius:var(--r-md);padding:14px 12px 10px;
}
.gr-lienzo .gr{display:block;overflow:visible;height:auto}

/* Dos versiones del mismo gráfico. La ancha se encogería tanto en un móvil
   que las cifras del eje bajarían de 5 px; la estrecha es más alta en
   proporción, así que al escalarla el texto se queda a tamaño de lectura. */
.gr-lienzo .gr-estrecho{display:block}
.gr-lienzo .gr-ancho{display:none}
@media(min-width:680px){
  .gr-lienzo .gr-estrecho{display:none}
  .gr-lienzo .gr-ancho{display:block}
}

/* Leyenda: obligatoria en cuanto hay dos series, para que la identidad no
   dependa solo del color */
.gr-leyenda{
  display:flex;flex-wrap:wrap;gap:8px 22px;
  margin:10px 0 2px;padding-left:34px;list-style:none;
}
.gr-leyenda li{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-2)}
.gr-leyenda .pt{width:14px;height:3px;border-radius:2px;flex:none}
.gr-leyenda .pt.antes{background:#B8803A}
.gr-leyenda .pt.despues{background:#1E9AD0}

/* Las cifras, escritas. Esta es la versión en texto del gráfico. */
.gr-cifras{
  display:grid;gap:12px 20px;grid-template-columns:1fr;
  margin:0;padding:0;list-style:none;
}
@media(min-width:620px){.gr-cifras{grid-template-columns:repeat(3,1fr)}}
.gr-cifras li{
  display:flex;flex-direction:column;gap:3px;
  border-left:2px solid var(--line-2);padding-left:13px;
}
.gr-cifras b{
  font-family:var(--f-display);font-weight:800;
  font-size:clamp(17px,2vw,20px);letter-spacing:-.02em;color:var(--ink);
}
.gr-cifras span{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);
}

.gr-nota{font-size:14.2px;color:var(--ink-2);line-height:1.6;max-width:72ch}

@media (prefers-reduced-motion:reduce){.grafico *{transition:none;animation:none}}

/* El horario de atención, en el pie. Va visible a propósito: los datos
   estructurados declaran openingHoursSpecification, y Google espera que lo
   que se declara esté también en la página. */
.nap + .horario{
  font-size:13.5px;color:var(--ink-3);margin-top:8px;line-height:1.5;
}