/* customizenapkins.com — sistema «día y noche» (decisión de Juan, 18/08/2026).
   Ver maquetas/sistema-definitivo.html y ESTADO.md §3.

   Las reglas que definen el sistema:
   1. DÍA  = lienzo crema (#eeefe9) con tinta cálida (#23251d): lo accesible.
      NOCHE = la MISMA tinta convertida en lienzo (#2b2622) con el crema como
      texto: lo premium (Deluxe, metálicos, Ramadán). El par no cambia, solo
      se invierte — por eso las dos mitades se leen como una sola web.
   2. UN acento: oro #f7a501. SIEMPRE fondo de botón con tinta encima; NUNCA
      texto sobre claro (1,6:1, ilegible). Sobre crema y sobre carbón pasa AA.
   3. La banda Sadu (carbón cálido + oro, sin nada azulado) separa el día de
      la noche, como en el telar separa los campos. 12px: se reconoce de
      cerca, no grita.
   4. Árabe: cuerpo 17px con interlineado 1.85, titulares 1.35,
      letter-spacing 0 SIEMPRE (el tracking rompe las ligaduras), negrita con
      cuentagotas, cifras occidentales. La misma hoja sirve al inglés: por eso
      todo el espaciado usa propiedades lógicas, no left/right. */

@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/plex-arabic-arabic-400.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:500;font-display:swap;
  src:url(../fonts/plex-arabic-arabic-500.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:600;font-display:swap;
  src:url(../fonts/plex-arabic-arabic-600.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:700;font-display:swap;
  src:url(../fonts/plex-arabic-arabic-700.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/plex-arabic-latin-400.woff2) format("woff2");unicode-range:U+0000-00FF,U+2013-2014,U+2018-201D,U+2026}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:500;font-display:swap;
  src:url(../fonts/plex-arabic-latin-500.woff2) format("woff2");unicode-range:U+0000-00FF,U+2013-2014,U+2018-201D,U+2026}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:600;font-display:swap;
  src:url(../fonts/plex-arabic-latin-600.woff2) format("woff2");unicode-range:U+0000-00FF,U+2013-2014,U+2018-201D,U+2026}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:700;font-display:swap;
  src:url(../fonts/plex-arabic-latin-700.woff2) format("woff2");unicode-range:U+0000-00FF,U+2013-2014,U+2018-201D,U+2026}

:root{
  --f:"IBM Plex Sans Arabic","Noto Sans Arabic","Segoe UI",system-ui,sans-serif;
  --crema:#eeefe9; --crema-suave:#e5e7e0; --blanco:#ffffff;
  --tinta:#23251d; --carbon:#2b2622; --carbon-alto:#332e29;
  --gris:#4d4f46;              /* 7.5:1 sobre crema */
  --crema-texto:#c9c0ad;       /* 7.4:1 sobre carbón */
  --oro:#f7a501; --oro-oscuro:#8a5e0b; /* texto sobre claro: 4.6:1 */
  --oro-claro:#e8dfc9;
  --borde-dia:#c9cbc0; --borde-noche:#3f3a36;
  --radio:6px;  --ancho:1080px;
}
*,*::before,*::after{box-sizing:border-box;letter-spacing:0}
html{scroll-behavior:smooth}
main [id]{scroll-margin-top:70px}
body{margin:0;font-family:var(--f);font-size:17px;line-height:1.85;
  background:var(--crema);color:var(--tinta);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
.wrap{max-width:var(--ancho);margin-inline:auto;padding-inline:24px}
h1,h2,h3{line-height:1.35;margin:0 0 .5em;font-weight:600}
h1{font-size:clamp(1.9rem,4.2vw,2.7rem)}
h2{font-size:clamp(1.55rem,3vw,2.1rem)}
h3{font-size:1.1rem}
p{margin:0 0 1.1em}
/* El inglés no necesita el aire del árabe: se ajusta por lang */
:lang(en) body,body:lang(en){line-height:1.6}
:lang(en) h1,:lang(en) h2,:lang(en) h3{line-height:1.2}

.skip{position:absolute;inset-inline-start:-9999px;top:0;background:var(--tinta);
  color:#fff;padding:12px 18px;z-index:100}
.skip:focus{inset-inline-start:0}

/* ---------- banda Sadu ---------- */
.sadu{height:12px;background-repeat:repeat-x;background-size:24px 12px;background-image:
  linear-gradient(135deg,var(--carbon) 25%,transparent 25%),
  linear-gradient(225deg,var(--carbon) 25%,transparent 25%),
  linear-gradient(45deg,var(--oro) 25%,transparent 25%),
  linear-gradient(315deg,var(--oro) 25%,transparent 25%);
  background-position:0 0,0 0,12px 0,12px 0}

/* ---------- cabecera ---------- */
.cab{background:var(--crema);border-bottom:1px solid var(--borde-dia)}
.cab .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;
  gap:6px 14px;padding-block:10px;min-height:58px}
/* La marca va en árabe en ambos idiomas (decisión de la tanda 5 de logos,
   P30): «كستمايز نابكنز» con la segunda palabra en oro oscuro. */
.logo{font-weight:700;font-size:22px;text-decoration:none}
.logo b{font-weight:700;color:var(--oro-oscuro)}
.nav{display:flex;flex-wrap:wrap;align-items:center;gap:4px 18px;font-size:15px}
.nav a{text-decoration:none}
.nav a:hover{text-decoration:underline}
.nav .cta{background:var(--oro);color:var(--tinta);padding:9px 18px;border-radius:var(--radio);
  font-weight:700;text-decoration:none}
.nav .idioma{border:1px solid var(--borde-dia);border-radius:var(--radio);
  padding:7px 12px;font-weight:500;text-decoration:none}

/* ---------- botones ---------- */
.btn{display:inline-block;padding:14px 30px;font-size:16.5px;font-weight:700;
  border-radius:var(--radio);text-decoration:none;border:0;cursor:pointer;font-family:var(--f)}
.btn:focus-visible{outline:3px solid var(--oro-oscuro);outline-offset:2px}
.b-oro{background:var(--oro);color:var(--tinta)}
.b-linea{background:transparent;border:1.5px solid var(--borde-dia);color:var(--tinta);
  font-weight:500;margin-inline-start:10px}
.noche .b-linea{border-color:var(--borde-noche);color:#f7f5f0}

/* ---------- día ---------- */
.hero{padding-block:52px 48px}
.hero h1{max-width:17em}
.hero .lead{font-size:18px;color:var(--gris);max-width:32em;margin-bottom:26px}
.garantias{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:36px}
.g{background:var(--blanco);border:1px solid var(--borde-dia);border-radius:var(--radio);padding:20px}
.g b{display:block;font-size:16.5px;margin-bottom:4px}
.g span{font-size:14.5px;color:var(--gris);line-height:1.75}

.seccion{padding-block:52px}
.suave{background:var(--crema-suave)}
.seccion .lead{color:var(--gris);max-width:30em}

/* ---------- noche ---------- */
.noche{background:var(--carbon);color:#f7f5f0;padding-block:56px}
.noche .noche h2{color:#f7f5f0}
.noche .lead{color:var(--crema-texto)}
.ram{background:var(--carbon-alto);border-top:1px solid var(--borde-noche);
  color:#f7f5f0;padding-block:30px}
.ram .wrap{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center}
.ram h2{color:var(--oro-claro);margin-bottom:4px;font-size:1.3rem}
.ram p{margin:0;color:var(--crema-texto);font-size:15.5px}

/* ---------- fichas de tamaño ---------- */
.fichas{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:34px}
.ficha{background:var(--blanco);border:1px solid var(--borde-dia);border-radius:var(--radio);
  padding:22px;display:flex;flex-direction:column}
.ficha-escala{display:flex;align-items:flex-end;height:72px;margin-bottom:14px}
.ficha-escala svg{display:block}
.ficha h3{margin-bottom:2px}
.ficha .sub{font-size:14px;color:var(--gris);margin:0 0 12px}
.ficha .clave{margin:0 0 12px}
.ficha .pie{margin-top:auto;padding-top:12px;border-top:1px solid var(--borde-dia);
  font-size:14px;color:var(--gris);line-height:1.6;margin-bottom:0}

/* ---------- calidades ---------- */
.calidades{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:34px}
.cal{background:var(--blanco);border:1px solid var(--borde-dia);border-radius:var(--radio);
  padding:22px;display:flex;flex-direction:column}
.cal .sub{font-size:14px;color:var(--oro-oscuro);font-weight:600;margin:0 0 10px}
.cal p{font-size:15.5px;color:var(--gris);margin-bottom:10px}
.cal .pie{margin-top:auto;padding-top:12px;border-top:1px solid var(--borde-dia);
  font-size:13.5px;color:var(--gris);line-height:1.7;margin-bottom:0;direction:ltr;text-align:end}

/* ---------- carta de tintas ---------- */
.carta{list-style:none;margin:34px 0 0;padding:0;display:grid;gap:14px 10px;
  grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}
.chip{min-width:0}
.chip-color{display:block;width:100%;aspect-ratio:3/2;max-height:104px;
  border-radius:var(--radio);border:1px solid rgba(35,37,29,.14);margin-bottom:6px}
.chip-nombre{display:block;font-size:13.5px;font-weight:600;line-height:1.3;direction:ltr;text-align:end}
.chip-codigo{display:block;font-size:12px;color:var(--gris);line-height:1.3;direction:ltr;text-align:end}
:lang(en) .chip-nombre,:lang(en) .chip-codigo{text-align:start}
.aviso{margin-top:22px;font-size:14.5px;color:var(--gris);max-width:70ch}

/* ---------- FAQ ---------- */
/* Estrecho y apilado: filas a todo el ancho del sitio hacían kilométrica cada
   pregunta corta, y la cabecera a dos columnas dejaba la entradilla colgada
   abajo a la derecha. A 860px la línea de lectura es natural. */
#faq .wrap{max-width:780px}
#faq .cabeza{display:block;margin-bottom:4px}
#faq .cabeza h2{margin-bottom:5px}
#faq .cabeza .lead{margin:0;font-size:16px}
.faq{border-top:1px solid var(--borde-dia);margin-top:20px}
.faq-item{border-bottom:1px solid var(--borde-dia)}
.faq-item summary{display:flex;align-items:baseline;gap:14px;padding-block:10px;
  cursor:pointer;list-style:none;font-weight:600;font-size:16px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";margin-inline-start:auto;flex-shrink:0;
  font-weight:400;font-size:1.5rem;line-height:1;color:var(--oro-oscuro);transition:transform .18s ease}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item>p{margin:0 0 14px;max-width:75ch;color:var(--gris);font-size:15.5px}

/* ---------- formulario ---------- */
.form-aviso{margin-bottom:20px;padding:14px 20px;border-radius:var(--radio);
  border:1px solid var(--borde-dia);background:var(--blanco);font-size:15px}
.form-aviso-ok{border-color:var(--oro-oscuro)}
.form-aviso[hidden]{display:none}
.cuadro{background:var(--blanco);border:1px solid var(--borde-dia);border-radius:var(--radio);
  padding:22px}
/* Densidad propia del formulario: el interlineado 1.85 del árabe, correcto en
   párrafos, infla etiquetas y notas — aquí se compacta sin tocar el resto. */
#quote h2{font-size:clamp(1.35rem,2.4vw,1.7rem)}
#quote .lead{font-size:16px;margin-bottom:16px}
#quote .campo{margin-bottom:11px}
#quote .campo label{font-size:13px;line-height:1.4;margin-bottom:3px}
#quote .campo small{line-height:1.5}
#quote .campo input,#quote .campo select,#quote .campo textarea{font-size:15px;padding:8px 11px;line-height:1.4}
#quote .campo textarea{min-height:76px}
#quote .cuadro{padding:18px 20px}
.cuadro .btn{padding:11px 24px;font-size:15px}
.fila{display:grid;grid-template-columns:1fr 1fr;gap:0 18px;align-items:start}
.campo{display:flex;flex-direction:column;margin-bottom:18px}
.campo label{font-size:14.5px;font-weight:600;margin-bottom:6px}
.campo small{font-size:12.5px;color:var(--gris);margin-top:5px}
/* width:100% es obligatorio: sin él cada control coge su ancho intrínseco
   (los select más cortos que los input, el numérico a su aire) y en RTL la
   rejilla queda dentada — fue el fallo visible del primer render. */
.campo input,.campo select,.campo textarea{
  width:100%;font-family:var(--f);font-size:16px;padding:11px 14px;
  border:1.5px solid var(--borde-dia);border-radius:var(--radio);background:#fff;color:var(--tinta)}
.campo input[type="file"]{padding:9px 12px;background:var(--crema)}
.campo select{appearance:none;-webkit-appearance:none;background-image:
  linear-gradient(45deg,transparent 50%,var(--gris) 50%),linear-gradient(135deg,var(--gris) 50%,transparent 50%);
  background-position:calc(18px) calc(50% - 2px),calc(18px + 5px) calc(50% - 2px);
  background-size:5px 5px;background-repeat:no-repeat;padding-inline-end:14px}
[dir="ltr"] .campo select{background-position:calc(100% - 23px) calc(50% - 2px),calc(100% - 18px) calc(50% - 2px)}
.campo textarea{resize:vertical;min-height:110px}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:2.5px solid var(--oro-oscuro);outline-offset:1px;border-color:var(--oro-oscuro)}
.nota-datos{font-size:13.5px;color:var(--gris);max-width:52ch;margin-top:14px}
.trampa{position:absolute;inset-inline-start:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- galería ---------- */
.galeria{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:34px}
.obra{background:var(--blanco);border:1px solid var(--borde-dia);border-radius:var(--radio);overflow:hidden}
.obra img{width:100%;aspect-ratio:4/3;object-fit:cover}
.obra figcaption{padding:12px 16px;font-size:14px;color:var(--gris);line-height:1.6}
figure{margin:0}

/* ---------- cierre y pie ---------- */
.cierre{padding-block:54px;text-align:center}
.cierre p{color:var(--gris);max-width:30em;margin-inline:auto}
/* footer.pie, no .pie a secas: las fichas también usan class="pie" para su
   pie de tarjeta y heredaban el fondo carbón del footer — texto casi
   invisible. El estilo del pie de página queda atado al elemento. */
footer.pie{background:var(--tinta);color:#b8b3a4;font-size:14px;padding-block:44px 28px}
footer.pie a{color:#d8d2c2;text-decoration:none}
footer.pie a:hover{color:#fff;text-decoration:underline}
.pie-rejilla{display:grid;grid-template-columns:1.6fr 1fr 1.2fr;gap:36px}
/* La marca del pie: estrella AL LADO de la palabra (aviso del usuario),
   con el latín espaciado debajo de la palabra. */
.pie-estandarte{display:flex;align-items:center;gap:12px;margin:0 0 16px}
.pie-textos{display:flex;flex-direction:column;gap:2px}
.pie-estandarte svg{display:block}
.pie-ar{font-weight:700;font-size:24px;color:var(--crema)}
.pie-ar b{color:var(--oro)}
.pie-lat{font-size:11px;letter-spacing:.18em;color:var(--crema-texto)}
.pie-marca{margin:0 0 14px;line-height:1.9;max-width:36ch}
.pie-titulo{font-size:13.5px;font-weight:700;color:var(--crema);margin:0 0 10px}
footer.pie ul{list-style:none;margin:0;padding:0}
footer.pie li{line-height:2.2}
.pie-idiomas{display:flex;flex-wrap:wrap;gap:8px}
.pie-idiomas a{border:1px solid rgba(238,239,233,.25);border-radius:999px;padding:6px 14px}
.pie-base{border-top:1px solid rgba(238,239,233,.16);margin-top:32px;padding-top:16px;
  /* hueco para el flotante de WhatsApp, que vive en inline-end en ambos idiomas */
  padding-inline-end:72px;
  display:flex;justify-content:space-between;gap:10px 24px;flex-wrap:wrap;
  font-size:12.5px;color:#8f8a7c}
@media (max-width:900px){.pie-rejilla{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.pie-rejilla{grid-template-columns:1fr;gap:26px}}

/* ---------- banner de consentimiento ----------
   Sale solo si hay GA4. [hidden] necesita su propia regla: el display:flex
   de la clase gana al hidden del atributo si no se declara. En móvil sube
   por encima del flotante de WhatsApp (52px + 18 de margen). */
.consentimiento{position:fixed;inset-inline:16px;bottom:16px;z-index:80;
  max-width:640px;margin-inline:auto;background:var(--blanco);
  border:1px solid var(--borde-dia);border-radius:var(--radio);
  box-shadow:0 10px 30px rgba(35,37,29,.18);padding:16px 18px;
  display:flex;align-items:center;gap:14px 18px;flex-wrap:wrap}
.consentimiento[hidden]{display:none}
.consentimiento p{margin:0;font-size:14.5px;line-height:1.65;color:var(--gris);flex:1 1 260px}
.consentimiento-botones{display:flex;gap:8px;flex-shrink:0}
.consentimiento .btn{padding:9px 18px;font-size:14.5px}
@media (max-width:760px){.consentimiento{bottom:86px}}

/* ---------- tabla de la privacidad ---------- */
.tabla-legal{width:100%;border-collapse:collapse;margin:18px 0 22px;font-size:15px}
.tabla-legal th,.tabla-legal td{border:1px solid var(--borde-dia);padding:10px 12px;
  text-align:start;vertical-align:top;line-height:1.7}
.tabla-legal th{background:var(--crema-suave,#e5e7e0);font-weight:700;color:var(--tinta)}
.tabla-legal td{color:var(--gris)}
.tabla-legal code{font-size:13.5px;background:var(--crema);padding:1px 5px;border-radius:4px}

/* ---------- texto legal ---------- */
.legal{padding-block:48px}
.legal .wrap{max-width:820px}
.legal h2{font-size:1.45rem;margin-top:38px}
.legal p,.legal li{max-width:72ch;color:var(--gris)}
.legal ul{padding-inline-start:1.3em}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .garantias{grid-template-columns:1fr 1fr}
  .fichas,.calidades,.galeria{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
    .garantias,.fichas,.calidades,.galeria{grid-template-columns:1fr}
  .ram .wrap{grid-template-columns:1fr}
  /* en la rejilla a una columna el botón se estiraba a todo el ancho */
  .ram .btn{justify-self:start}
  .fila{grid-template-columns:1fr}
  .b-linea{margin-inline-start:0;margin-top:10px}
  /* a 4 columnas los nombres partían en dos líneas por todas partes;
     a 3 la carta respira y casi todos caben en una */
  .carta{grid-template-columns:repeat(3,1fr)}
  /* el CTA de cabecera duplica el del héroe justo debajo y se comía
     un cuarto de la primera pantalla */
  .cab .cta{display:none}
  /* la ficha a una columna dejaba el dibujo diminuto en un lado con
     todo el vacío en el otro: centrado lee como tarjeta de producto */
  .ficha-escala{justify-content:center}
  /* holgura para que el botón flotante de WhatsApp no tape la última
     línea del pie (52px + 18 de margen) */
  footer.pie{padding-bottom:92px}
}
@media (max-width:640px){
  /* iOS hace zoom al enfocar cualquier control por debajo de 16px:
     en móvil los campos vuelven a 16 aunque el escritorio vaya compacto. */
  #quote .campo input,#quote .campo select,#quote .campo textarea{font-size:16px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .faq-item summary::after{transition:none}
}

/* ---------- reorganización a lo printed-napkin (18/08/2026) ---------- */
/* hero a dos columnas: texto al inicio, servilleta al final de línea.
   La imagen va RECORTADA con transparencia (napkin-hero.png): nada de la losa
   blanca del PNG original sobre el crema; la sombra la pone drop-shadow. */
.hero-par{display:grid;grid-template-columns:1.15fr .85fr;gap:38px;align-items:center;
  padding-block:34px 44px}
.hero .eyebrow{color:var(--oro-oscuro);font-weight:600;font-size:16px;margin:0 0 10px}
.insignias{display:flex;flex-wrap:wrap;gap:8px 26px;margin-top:20px;font-size:15px;color:var(--gris)}
.insignias b{color:var(--tinta)}
.hero-foto{width:100%;max-width:460px;height:auto;justify-self:end;
  filter:drop-shadow(0 16px 28px rgba(35,37,29,.22))}
@media (max-width:900px){
  .hero-par{grid-template-columns:1fr;padding-block:28px 36px}
  .hero-foto{max-width:330px;justify-self:center;margin-top:6px}
}

/* cabecera de sección a dos columnas en ancho, como allí */
.cabeza{margin-bottom:30px}
@media (min-width:900px){
  .cabeza{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:28px;align-items:end;margin-bottom:34px}
  .cabeza h2{margin:0}
  .cabeza .lead{margin:0;max-width:34em}
}

/* las dos técnicas, tarjetas iguales con foto arriba (noche) */
.tarjetas{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.tarjeta{background:var(--carbon-alto);border:1px solid var(--borde-noche);
  border-radius:var(--radio);overflow:hidden}
.tarjeta img{width:100%;aspect-ratio:4/3;object-fit:cover;max-height:34vh}
.tarjeta .cuerpo{padding:18px 20px}
.tarjeta h3{color:var(--oro);margin-bottom:6px}
.tarjeta p{margin:0;font-size:15px;color:var(--crema-texto)}
.nota-tintas{margin:22px 0 0;font-size:15px;color:var(--crema-texto);max-width:72ch}
.nota-tintas a{color:var(--oro)}

/* tamaños a escala real, con la foto de cada uno */
.escala{list-style:none;display:grid;grid-template-columns:repeat(6,1fr);gap:18px;
  margin:0;padding:0}
.escala li{min-width:0;text-align:center}
/* Zona de dibujo de altura fija con la silueta apoyada en la base: así el
   texto de las seis arranca a la misma altura y la comparación se lee sola. */
.escala .dib{display:flex;align-items:flex-end;justify-content:center;height:150px;margin-bottom:12px}
.escala b{display:block;font-size:15.5px}
.escala .ref{display:block;font-size:13px;color:var(--oro-oscuro);font-weight:600;margin-bottom:4px}
.escala .uso{display:block;font-size:13.5px;color:var(--gris);line-height:1.65}

/* el formulario con su columna de datos, como allí */
#quote .wrap{max-width:940px}
.quote-grid{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:30px;align-items:start}
.kf h3{font-size:13.5px;font-weight:700;color:var(--oro-oscuro);margin:0 0 8px}
.kf ul{list-style:none;margin:0 0 20px;padding:0}
.kf li{display:flex;gap:9px;align-items:baseline;font-size:14.5px;color:var(--gris);
  line-height:1.7;margin-bottom:6px}
.kf li::before{content:"◆";color:var(--oro);font-size:9px;flex-shrink:0}
.kf a{color:var(--tinta)}

@media (max-width:900px){
  .tarjetas{grid-template-columns:1fr}
  .quote-grid{grid-template-columns:1fr}
  .kf{order:-1}
  .escala{grid-template-columns:repeat(3,1fr);gap:14px}
  .escala .dib{height:120px;transform:scale(.8);transform-origin:bottom center}
}