/* tiendasweb.com.co — la portada de Colombia.

   Deliberadamente distinta de las otras tres. engalicia y engandia son cálidas
   y regionales; tiendasweb.net es la marca de producto, tinta casi negra y
   retícula técnica, SIN una sola fotografía. Ésta es la primera portada
   fotográfica de la casa: el argumento aquí es «esto es para el negocio que ya
   tienes», y ese argumento se hace con caras de gente atendiendo, no con
   iconos.

   Verde esmeralda, oro viejo y papel crema. Ni un guiño a la bandera: el
   tricolor en una web comercial se ve a barato, y estos tres colores dicen
   Colombia sin gritarlo.

   Las reglas de siempre, que aquí además son una promesa por escrito en la
   página de privacidad de este dominio: sin fuentes externas, sin cookies, sin
   JavaScript y sin una sola petición a un servidor ajeno. Las fotos se
   descargaron de Pexels y se sirven desde aquí. La tipografía es la del
   sistema: un serif con carácter para los titulares y el palo seco para leer.
*/

:root{
  --tinta:#181310;            /* negro cálido, no azulado */
  --tinta-2:#2C231D;
  --suave:#6B5F55;
  --tenue:#9A8D82;
  --papel:#FBF7F0;            /* crema */
  --papel-2:#F3ECE1;
  --linea:#E4DACB;
  --linea-2:#CFC0AB;
  --verde:#0B4A38;            /* esmeralda profundo: el color de marca */
  --verde-2:#0F6349;
  --verde-claro:#E7F0EA;
  --oro:#C08A2E;              /* oro viejo: el único acento vivo */
  --oro-2:#A97521;
  --oro-suave:#FBF0DA;
  --blanco:#FFFFFF;

  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --sans:ui-sans-serif,"Segoe UI Variable Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --ancho:1180px;
  --r:6px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{margin:0; background:var(--papel); color:var(--tinta); font-family:var(--sans);
  font-size:17px; line-height:1.62; -webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0; font-family:var(--serif); font-weight:600; line-height:1.08;
  letter-spacing:-.015em}
p{margin:0}
a{color:inherit}
img{display:block; max-width:100%; height:auto}
:focus-visible{outline:2px solid var(--oro); outline-offset:3px}
.wrap{width:min(var(--ancho),100% - 44px); margin-inline:auto}

/* ── cabecera ─────────────────────────────────────────────── */
.top{position:sticky; top:0; z-index:20; background:rgba(251,247,240,.93);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--linea)}
.top .wrap{display:flex; align-items:center; gap:26px; padding:14px 0}
.mark{display:inline-flex; align-items:baseline; gap:8px; text-decoration:none; flex:none}
.mark b{font-family:var(--serif); font-size:21px; font-weight:600; letter-spacing:-.02em}
.mark span{font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--oro-2);
  font-weight:700}
.top nav{margin-left:auto; display:flex; gap:24px; font-size:15px; color:var(--suave)}
.top nav a{text-decoration:none}
.top nav a:hover{color:var(--verde)}

.btn{display:inline-flex; align-items:center; gap:9px; text-decoration:none;
  font-weight:600; font-size:16.5px; padding:13px 24px; border-radius:var(--r);
  border:1.5px solid transparent; transition:transform .16s ease, background .16s ease,
  border-color .16s ease, color .16s ease}
.btn.oro{background:var(--oro); color:#1B1206}
.btn.oro:hover{background:var(--oro-2); transform:translateY(-1px)}
.btn.linea{border-color:var(--linea-2); color:var(--tinta)}
.btn.linea:hover{border-color:var(--verde); color:var(--verde); transform:translateY(-1px)}
.btn.linea.claro{border-color:rgba(255,255,255,.4); color:var(--papel)}
.btn.linea.claro:hover{border-color:var(--papel); color:var(--blanco)}
.btn.sm{padding:9px 17px; font-size:15px}
.btn .arw{transition:transform .16s ease}
.btn:hover .arw{transform:translateX(4px)}

/* ── portada ──────────────────────────────────────────────── */
/* La foto va al fondo y el texto encima con un velo en degradado. El velo es
   fuerte a la izquierda y se abre a la derecha, que es donde está la cara: se
   lee el titular y se le sigue viendo la sonrisa. */
.hero{position:relative; isolation:isolate; min-height:min(86vh,760px); display:flex;
  align-items:flex-end; padding:120px 0 62px; overflow:hidden}
.hero-foto{position:absolute; inset:0; z-index:-2}
.hero-foto img{width:100%; height:100%; object-fit:cover; object-position:60% 40%}
.hero::after{content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(100deg, rgba(12,9,7,.94) 0%, rgba(12,9,7,.80) 38%,
             rgba(12,9,7,.34) 66%, rgba(12,9,7,.18) 100%)}
.hero-cuerpo{color:var(--papel); max-width:none}
.ceja{display:inline-block; font-size:12.5px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--oro); border:1px solid rgba(192,138,46,.5);
  border-radius:100px; padding:6px 15px; margin-bottom:26px}
.hero h1{font-size:clamp(40px,6.6vw,78px); max-width:15ch; color:var(--blanco)}
.hero .lede{margin-top:24px; max-width:52ch; font-size:clamp(17px,1.9vw,20.5px);
  color:rgba(251,247,240,.9)}
.hero .firma{margin-top:20px; font-family:var(--serif); font-style:italic;
  font-size:clamp(18px,2.1vw,23px); color:var(--oro)}
/* Sobre la foto, el botón de contorno tiene que ir en claro. Con el color de
   texto normal —tinta casi negra— queda negro sobre negro y desaparece: se ve
   el borde y no se lee la palabra. */
.hero .btn.linea{border-color:rgba(251,247,240,.45); color:var(--papel)}
.hero .btn.linea:hover{border-color:var(--papel); color:var(--blanco);
  background:rgba(251,247,240,.08)}
.hero .cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:32px}
.hero .nota{margin-top:16px; font-size:14.5px; color:rgba(251,247,240,.68)}

/* ── franja de fichas ─────────────────────────────────────── */
.franja{background:var(--verde); color:var(--papel); padding:22px 0}
.franja .wrap{display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px}
.franja b{font-family:var(--serif); font-size:18px; font-weight:600}
.fichas{display:flex; flex-wrap:wrap; gap:8px}
.fichas span{font-size:13.5px; letter-spacing:.04em; border:1px solid rgba(251,247,240,.28);
  border-radius:100px; padding:4px 13px}

/* ── secciones ────────────────────────────────────────────── */
.sec{padding:clamp(64px,8vw,104px) 0}
.sec-hd{max-width:64ch; margin-bottom:44px}
.sec-hd.centro{margin-inline:auto; text-align:center}
.kick{font-size:12.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--oro-2); margin-bottom:14px}
.kick.claro{color:var(--oro)}
h2{font-size:clamp(29px,4.1vw,46px)}
.sec-sub{margin-top:18px; font-size:18px; color:var(--suave)}

/* Cuatro columnas, no tres: aquí van las OCHO páginas que se construyen, y ocho
   en tres columnas dejan un hueco en la última fila que parece un error. Con
   cuatro son dos filas llenas, y la cuadrícula misma dice «son muchas». */
.rejilla{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--linea);
  border:1px solid var(--linea); border-radius:var(--r); overflow:hidden}
.celda{background:var(--papel); padding:30px 26px 32px; transition:background .2s ease}
.celda:hover{background:var(--papel-2)}
.celda .n{font-family:var(--serif); font-size:14px; color:var(--oro-2); letter-spacing:.08em}
.celda h3{font-size:20px; margin:10px 0 9px}
.celda p{font-size:15.2px; color:var(--suave)}
.rejilla-pie{margin-top:22px; color:var(--suave); font-size:16px; max-width:80ch}

/* ── bloque foto + texto ──────────────────────────────────── */
.dupla{padding:clamp(48px,6vw,76px) 0}
.dupla .wrap{display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1fr);
  gap:clamp(30px,5vw,64px); align-items:center}
.dupla.alterna .dupla-foto{order:2}
.dupla-foto{border-radius:var(--r); overflow:hidden; box-shadow:0 18px 44px -22px rgba(24,19,16,.5)}
.dupla-foto img{width:100%; transition:transform .6s cubic-bezier(.2,.6,.2,1)}
.dupla-foto:hover img{transform:scale(1.035)}
.dupla-texto h2{margin-top:6px}
.dupla-texto>p{margin-top:18px; color:var(--suave); font-size:17px}
.dupla-texto>p b{color:var(--tinta); font-weight:600}
.lista{margin:22px 0 0; padding:0; list-style:none; display:grid; gap:11px}
.lista li{position:relative; padding-left:26px; font-size:15.8px; color:var(--suave)}
.lista li b{color:var(--tinta); font-weight:600}
.lista li::before{content:""; position:absolute; left:0; top:.62em; width:9px; height:9px;
  border:2px solid var(--oro); border-radius:2px; transform:rotate(45deg)}

/* ── banda oscura: el panel ───────────────────────────────── */
.oscura{background:var(--verde); color:var(--papel); padding:clamp(66px,8vw,108px) 0}
.oscura h2{color:var(--blanco)}
.oscura .sec-sub{color:rgba(251,247,240,.76)}
.tablero{display:grid; grid-template-columns:minmax(0,380px) minmax(0,1fr);
  gap:clamp(28px,4vw,52px); align-items:start}

/* El dibujo del panel. No es una captura: una captura envejece con el primer
   cambio de pantalla y hay que volver a hacerla en cada idioma. */
.mini{background:var(--papel); color:var(--tinta); border-radius:8px; overflow:hidden;
  display:grid; grid-template-columns:132px 1fr; box-shadow:0 26px 60px -26px rgba(0,0,0,.6);
  position:sticky; top:92px}
.mini-lat{background:var(--tinta); color:var(--papel); padding:14px 0 18px; display:flex;
  flex-direction:column; gap:1px}
.mini-marca{font-family:var(--serif); font-size:14px; padding:0 14px 12px}
.mini-grp{font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--tenue);
  padding:11px 14px 4px}
.mini-it{font-size:12px; padding:5px 14px; color:rgba(251,247,240,.8); display:flex;
  align-items:center; gap:6px}
.mini-it.on{background:rgba(192,138,46,.22); color:var(--blanco); font-weight:600;
  box-shadow:inset 2px 0 0 var(--oro)}
.mini-it i{font-style:normal; font-size:9.5px; background:var(--oro); color:#1B1206;
  border-radius:100px; padding:0 5px; font-weight:700}
.mini-cuerpo{padding:16px 16px 18px; display:flex; flex-direction:column; gap:7px}
.mini-fila{font-size:11.5px; color:var(--suave); background:var(--papel-2); border-radius:4px;
  padding:8px 10px; display:flex; align-items:center; gap:7px}
.mini-fila.cifras{background:transparent; padding:0 0 4px; gap:14px}
.mini-fila.cifras span{display:flex; flex-direction:column; font-size:9.5px;
  letter-spacing:.05em; text-transform:uppercase; color:var(--tenue)}
.mini-fila.cifras b{font-family:var(--serif); font-size:22px; color:var(--verde);
  letter-spacing:-.02em}
.mini-fila.tenue{color:var(--tenue)}
.pt{width:7px; height:7px; border-radius:100px; background:var(--verde-2); flex:none}
.pt.am{background:var(--oro)}
.mini-pub{margin-top:auto; align-self:flex-start; background:var(--oro); color:#1B1206;
  font-size:11.5px; font-weight:700; border-radius:4px; padding:7px 14px}

.tablero-txt{display:grid; grid-template-columns:repeat(2,1fr); gap:26px 30px}
.tt h3{font-size:19px; color:var(--blanco)}
.tt p{margin-top:8px; font-size:15.2px; color:rgba(251,247,240,.76)}
.tt p b{color:var(--oro); font-weight:600}

/* ── mosaico de oficios ───────────────────────────────────── */
.mosaico{display:grid; grid-template-columns:repeat(6,1fr); gap:14px}
.mosaico figure{margin:0; position:relative; border-radius:var(--r); overflow:hidden;
  aspect-ratio:1; background:var(--papel-2)}
.mosaico img{width:100%; height:100%; object-fit:cover;
  transition:transform .6s cubic-bezier(.2,.6,.2,1)}
.mosaico figure:hover img{transform:scale(1.07)}
.mosaico figcaption{position:absolute; inset:auto 0 0 0; padding:26px 12px 11px;
  font-size:13px; font-weight:600; color:var(--blanco);
  background:linear-gradient(transparent,rgba(12,9,7,.86))}
.mosaico-pie{margin-top:22px; text-align:center; color:var(--suave); font-size:16px;
  max-width:74ch; margin-inline:auto}

/* ── galería de muestras ──────────────────────────────────────
   Las tarjetas llevan una captura de verdad de cada sitio, servida desde este
   dominio como todo lo demás. No se enlaza la imagen al servidor del sitio de
   muestra: la promesa de la página de privacidad es que aquí no se pide nada a
   un servidor ajeno, y una foto también es una petición.                    */
.muestras{background:var(--papel-2); border-block:1px solid var(--linea)}
.galeria{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.muestra{display:flex; flex-direction:column; text-decoration:none; color:inherit;
  background:var(--papel); border:1px solid var(--linea); border-radius:var(--r);
  overflow:hidden;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease}
.muestra:hover{transform:translateY(-3px); border-color:var(--linea-2);
  box-shadow:0 14px 34px rgba(24,19,16,.13)}
.muestra img{display:block; width:100%; height:auto; border-bottom:1px solid var(--linea)}
.muestra-txt{display:flex; flex-direction:column; gap:7px; flex:1;
  padding:15px 16px 17px}
.muestra .muestra-tipo{font-size:12px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--oro-2)}
.muestra h3{font-family:var(--serif); font-size:19px; margin:0}
.muestra p{font-size:15px; color:var(--suave); margin:0; flex:1}
.muestra-url{display:block; font-size:12.5px; font-weight:650;
  color:var(--verde); overflow-wrap:normal}
.muestra-url i{font-style:normal; margin-left:4px;
  transition:margin-left .25s ease}
.muestra:hover .muestra-url i{margin-left:8px}
.galeria-pie + .galeria-pie{margin-top:6px}
.galeria-pie a{color:inherit; font-weight:650}
.galeria-pie{margin-top:22px; text-align:center; color:var(--suave); font-size:15px;
  max-width:72ch; margin-inline:auto}
@media (max-width:1000px){ .galeria{grid-template-columns:repeat(3,1fr)} }
@media (max-width:760px){ .galeria{grid-template-columns:repeat(2,1fr)} }
@media (max-width:520px){ .galeria{grid-template-columns:1fr} }
@media (prefers-reduced-motion:reduce){
  .muestra, .muestra-url i{transition:none}
  .muestra:hover{transform:none}
  .muestra:hover .muestra-url i{margin-left:4px}
}

/* ── pasos ────────────────────────────────────────────────── */
.pasos{background:var(--papel-2); border-block:1px solid var(--linea)}
.pasos-lista{list-style:none; margin:0; padding:0; display:grid;
  grid-template-columns:repeat(3,1fr); gap:28px; counter-reset:p}
.pasos-lista li{background:var(--papel); border:1px solid var(--linea); border-radius:var(--r);
  padding:28px 26px 30px}
.paso-n{display:grid; place-items:center; width:38px; height:38px; border-radius:100px;
  background:var(--verde); color:var(--papel); font-family:var(--serif); font-size:19px}
.pasos-lista h3{font-size:21px; margin:16px 0 9px}
.pasos-lista p{font-size:15.5px; color:var(--suave)}

/* ── precio ───────────────────────────────────────────────── */
.tarifa{max-width:520px; margin-inline:auto; background:var(--papel); border:1px solid var(--linea);
  border-top:3px solid var(--oro); border-radius:var(--r); padding:34px 32px 32px;
  text-align:center; box-shadow:0 20px 50px -30px rgba(24,19,16,.6)}
/* La línea de tiempo del precio. No es un descuento con el precio tachado, es
   un compromiso: primero qué pagas ahora, después qué pagarías y con qué
   condición. Leído así, el segundo renglón tranquiliza en vez de amenazar. */
.linea-tiempo{list-style:none; margin:0 auto; padding:0; max-width:26rem; text-align:left}
.linea-tiempo li{padding:16px 0}
.linea-tiempo li + li{border-top:1px solid var(--linea)}
.lt-cuando{display:block; font-size:15px; color:var(--suave)}
.lt-precio{display:block; margin-top:4px; font-family:var(--serif); font-weight:600;
  font-size:clamp(34px,5.2vw,48px); letter-spacing:-.03em; line-height:1.05}
.lt-precio.menor{font-size:clamp(22px,3.2vw,30px); color:var(--tinta-2)}
.lt-si{display:block; margin-top:4px; font-size:15px; color:var(--tenue)}
.cifra-nota{margin:18px auto 0; max-width:26rem; color:var(--suave);
  font-size:15px}
.tarifa .btn{margin-top:22px}
.incluye{list-style:none; margin:26px 0 0; padding:24px 0 0; border-top:1px solid var(--linea);
  display:grid; gap:13px; text-align:left}
.incluye li{display:flex; flex-direction:column; padding-left:26px; position:relative}
.incluye li::before{content:""; position:absolute; left:2px; top:.44em; width:12px; height:7px;
  border-left:2px solid var(--verde-2); border-bottom:2px solid var(--verde-2);
  transform:rotate(-45deg)}
.incluye b{font-size:15.5px; font-weight:600}
.incluye span{font-size:14.5px; color:var(--suave)}
.precio-legal{margin:22px auto 0; max-width:60ch; text-align:center; font-size:14px;
  color:var(--tenue)}

/* ── preguntas ────────────────────────────────────────────── */
.faq{max-width:800px; margin-inline:auto; border-top:1px solid var(--linea)}
.faq details{border-bottom:1px solid var(--linea)}
.faq summary{cursor:pointer; list-style:none; padding:19px 40px 19px 0; position:relative;
  font-family:var(--serif); font-size:19.5px; font-weight:600}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:""; position:absolute; right:6px; top:50%; width:10px; height:10px;
  border-right:2px solid var(--oro-2); border-bottom:2px solid var(--oro-2);
  transform:translateY(-70%) rotate(45deg); transition:transform .2s ease}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq-a{padding:0 0 20px}
.faq-a p{color:var(--suave); font-size:16px; max-width:70ch}

/* ── cierre ───────────────────────────────────────────────── */
.cierre{background:var(--tinta); color:var(--papel); padding:clamp(66px,8vw,104px) 0;
  text-align:center}
.cierre h2{color:var(--blanco); font-size:clamp(29px,4.4vw,50px)}
.cierre p{margin-top:18px; color:rgba(251,247,240,.74); font-size:17.5px;
  max-width:60ch; margin-inline:auto}
.cierre .cta{display:flex; justify-content:center; flex-wrap:wrap; gap:12px; margin-top:30px}

/* ── pie ──────────────────────────────────────────────────── */
.pie{background:var(--tinta-2); color:rgba(251,247,240,.72); padding:52px 0 40px;
  font-size:15px}
.pie .mark{color:var(--papel)}
.pie .mark span{color:var(--oro)}
.pie-lema{margin-top:12px; max-width:44ch}
.pie-nav{display:flex; flex-wrap:wrap; gap:8px 20px; margin-top:26px; padding-top:22px;
  border-top:1px solid rgba(251,247,240,.14)}
.pie-nav a{text-decoration:none}
.pie-nav a:hover{color:var(--oro)}
.pie-ent{margin-top:22px; font-size:14px; line-height:1.7; color:rgba(251,247,240,.6)}
.pie-ent b{color:var(--papel); font-weight:600}
.pie-copy{margin-top:20px; font-size:13.5px; color:rgba(251,247,240,.45)}

/* ── entrada ──────────────────────────────────────────────── */
/* Una sola entrada escalonada al cargar. Nada al hacer scroll: sin JavaScript
   no hay observador, y un `animation` con retardo largo dispara aunque la
   sección esté fuera de pantalla, que se ve peor que no animar nada. */
@keyframes sube{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}
.hero .ceja,.hero h1,.hero .lede,.hero .firma,.hero .cta,.hero .nota{
  animation:sube .7s cubic-bezier(.2,.7,.3,1) backwards}
.hero h1{animation-delay:.06s}
.hero .lede{animation-delay:.12s}
.hero .firma{animation-delay:.18s}
.hero .cta{animation-delay:.24s}
.hero .nota{animation-delay:.3s}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important; transition:none !important}
}

/* ── pantallas medianas y celular ─────────────────────────── */
@media (max-width:1000px){
  .rejilla{grid-template-columns:repeat(2,1fr)}
  .tablero{grid-template-columns:1fr}
  .mini{position:static; max-width:420px}
  .mosaico{grid-template-columns:repeat(3,1fr)}
  .pasos-lista{grid-template-columns:1fr}
}
@media (max-width:760px){
  body{font-size:16.5px}
  .top nav{display:none}
  .hero{min-height:0; padding:78px 0 48px}
  .hero::after{background:linear-gradient(180deg,rgba(12,9,7,.72) 0%,rgba(12,9,7,.88) 55%,
               rgba(12,9,7,.95) 100%)}
  .hero h1{max-width:none}
  .franja .wrap{gap:12px}
  .rejilla{grid-template-columns:1fr}
  .dupla .wrap{grid-template-columns:1fr}
  .dupla.alterna .dupla-foto{order:0}
  .tablero-txt{grid-template-columns:1fr}
  .mosaico{grid-template-columns:repeat(2,1fr)}
  .sec-hd{margin-bottom:34px}
}

/* ── Por qué nosotros ───────────────────────────────────────────────
   Una lista de filas, no una tabla: en el celular una tabla de dos
   columnas se estruja hasta ser ilegible, y esto se apila solo.
   La última fila es la nuestra y es la única con color, para que el
   ojo llegue a ella después de haber leído lo que cuestan las demás. */
.pq-lista{list-style:none; margin:0; padding:0; border-top:1px solid var(--linea-2)}
.pq-fila{display:grid; grid-template-columns:minmax(0,.4fr) minmax(0,1fr);
  gap:6px 34px; align-items:baseline;
  padding:20px 0; border-bottom:1px solid var(--linea)}
.pq-que{font-size:16px; font-weight:700; color:var(--tinta)}
.pq-cuesta{font-size:16.5px; color:var(--suave)}
.pq-fila.nuestra{background:var(--verde); border-bottom:0; margin-top:14px;
  border-radius:var(--r); padding:24px clamp(18px,2.6vw,28px)}
.pq-fila.nuestra .pq-que{color:var(--oro)}
.pq-fila.nuestra .pq-cuesta{color:#fff; font-size:18px; line-height:1.55}
/* «Y sigue viva» vivía suelto debajo de la tabla: ni era una fila ni era una
   sección, y el hueco de la siguiente sección lo dejaba flotando. Va dentro
   del recuadro nuestro, separado por un filete, porque es el tercer argumento
   —la web no se queda vieja— y ese argumento es nuestro, no de la comparación. */
.pq-vive{display:block; margin-top:15px; padding-top:14px;
  border-top:1px solid rgba(251,247,240,.2); color:var(--oro);
  font-size:16.5px; font-weight:600; line-height:1.55}

@media (max-width:640px){
  .pq-fila{grid-template-columns:1fr; gap:4px}
  .pq-fila.nuestra{padding:20px}
}

/* ── Dropi ──────────────────────────────────────────────────────────
   El sello del héroe y la banda de cuatro pasos. El sello lleva el oro
   porque es lo único nuevo de la portada y tiene que verse antes que
   el resto del texto. */
/* Va SOBRE la foto, así que en claro. Con el color de texto normal —tinta casi
   negra— se pierde entera contra la imagen, que es justo lo que le pasa al
   botón de contorno unas líneas más arriba. */
.hero .hero-dropi{margin-top:18px; max-width:54ch; font-size:16.5px;
  line-height:1.6; color:rgba(251,247,240,.92);
  animation:sube .7s cubic-bezier(.2,.7,.3,1) backwards; animation-delay:.16s}
/* Sin margen a la derecha: detrás va el signo de dos puntos, y ocho píxeles de
   aire entre la etiqueta y el signo lo dejan flotando como si sobrara. */
.sello{display:inline-block; padding:3px 10px; border-radius:100px;
  background:var(--oro); color:var(--tinta); font-size:12.5px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; vertical-align:2px}
.dropi{background:var(--verde-claro); border-block:1px solid var(--linea)}
.pasos-lista.cuatro{grid-template-columns:repeat(4,1fr); gap:22px}
.dropi .pasos-lista li{background:var(--blanco)}
.dropi-nota{margin-top:28px; margin-inline:auto; max-width:70ch; text-align:center;
  font-size:15.5px; color:var(--suave)}

@media (max-width:1000px){
  .pasos-lista.cuatro{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .pasos-lista.cuatro{grid-template-columns:1fr}
}
.paso-enlace{margin-top:12px; font-size:15px}
.paso-enlace a{color:var(--verde-2); font-weight:600; text-decoration:none;
  border-bottom:1px solid var(--oro)}
.paso-enlace a:hover{color:var(--oro-2)}
.dropi-nota a{color:var(--verde-2); border-bottom:1px solid var(--oro);
  text-decoration:none}


/* Los rótulos de las dos columnas. Van escondidos para el lector de pantalla
   (`aria-hidden`) porque para quien escucha la lista no son una fila más: cada
   `li` ya se lee entero y de corrido, y meter dos rótulos sueltos delante
   sonaría a que la primera opción se llama «si la haces con». En el móvil se
   quitan del todo: ahí las columnas se apilan y un encabezado de columna
   encima de una sola columna no encabeza nada. */
.pq-cabecera{padding-bottom:9px; border-bottom-color:transparent}
.pq-cabecera .pq-que,.pq-cabecera .pq-cuesta{font-size:12.5px; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:var(--tenue)}

@media (max-width:640px){
  .pq-cabecera{display:none}
}

/* ── Compromisos ────────────────────────────────────────────────────
   Fondo crema oscuro y ni un botón: es la única sección de la página
   donde no se le pide nada al que lee. Van en tres columnas con un
   filete de oro encima de cada uno, como una lista de condiciones y no
   como una rejilla de funciones. */
.compromisos-sec{background:var(--papel-2); border-block:1px solid var(--linea)}
.compromisos{list-style:none; margin:0; padding:0; display:grid;
  grid-template-columns:repeat(3,1fr); gap:clamp(22px,3vw,34px)}
.compromisos li{padding-top:16px; border-top:2px solid var(--oro)}
.compromisos h3{font-size:19px; margin-bottom:8px}
.compromisos p{font-size:15.5px; color:var(--suave)}

@media (max-width:900px){
  .compromisos{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:600px){
  .compromisos{grid-template-columns:1fr}
}