/* tiendasweb.net — la portada de la plataforma.
   Deliberadamente distinta de los dominios regionales: aquellos son cálidos y
   locales (verde Atlántico, toxo, serif editorial); éste es la marca de
   producto — tinta casi negra, un solo acento vivo, retícula visible.
   Misma regla que el resto: sin fuentes externas, sin cookies, sin JS. */

:root{
  --ink:#12141A; --ink-2:#1C1F27; --ink-soft:#5A606E; --ink-faint:#8B92A1;
  --paper:#FFFFFF; --paper-2:#F4F5F7; --line:#E3E5EA; --line-2:#CBD0D9;
  --spark:#FF5A36;            /* el único acento: naranja señal */
  --spark-soft:#FFF1ED;
  --ok:#0E7C5A;
  --sans:ui-sans-serif,"Segoe UI Variable Display","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --wrap:1160px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans);
  font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0; line-height:1.06; letter-spacing:-.035em; font-weight:700}
p{margin:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--spark); outline-offset:3px}
.wrap{width:min(var(--wrap),100% - 44px); margin-inline:auto}

/* ── chrome ─────────────────────────────────────────────────── */
.top{border-bottom:1px solid var(--line); position:sticky; top:0; background:rgba(255,255,255,.92);
  backdrop-filter:blur(8px); z-index:10}
.top .wrap{display:flex; align-items:center; gap:24px; padding:15px 0}
.mark{display:inline-flex; align-items:center; gap:9px; text-decoration:none; font-weight:800;
  letter-spacing:-.02em; font-size:19px}
.mark i{width:11px; height:11px; background:var(--spark); border-radius:2px;
  transform:rotate(45deg); display:block}
.top nav{margin-left:auto; display:flex; gap:26px; font-size:15px; color:var(--ink-soft)}
.top nav a{text-decoration:none}
.top nav a:hover{color:var(--ink)}

.btn{display:inline-flex; align-items:center; gap:9px; text-decoration:none; font-weight:650;
  font-size:16px; padding:13px 22px; border-radius:4px; border:1.5px solid transparent;
  transition:transform .15s ease, background .15s ease, border-color .15s ease}
.btn.primary{background:var(--spark); color:#fff}
.btn.primary:hover{background:#F04A26; transform:translateY(-1px)}
.btn.line{border-color:var(--line-2); color:var(--ink)}
.btn.line:hover{border-color:var(--ink); transform:translateY(-1px)}
.btn.sm{padding:9px 16px; font-size:15px}
.btn .arw{transition:transform .15s ease}
.btn:hover .arw{transform:translateX(3px)}

/* ── hero: retícula técnica, no fotografía ──────────────────── */
.hero{position:relative; overflow:hidden; padding:clamp(64px,10vw,120px) 0 clamp(56px,8vw,96px)}
.hero::before{content:""; position:absolute; inset:0; z-index:0; opacity:.55;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),
                   linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(120% 80% at 70% 0%,#000 20%,transparent 72%)}
.hero .wrap{position:relative; z-index:1}
.eyebrow{display:inline-flex; align-items:center; gap:9px; font-size:12.5px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--spark);
  background:var(--spark-soft); border-radius:100px; padding:6px 14px; margin-bottom:24px}
.hero h1{font-size:clamp(38px,6.4vw,76px); max-width:15ch; text-wrap:balance}
.hero h1 span{color:var(--ink-faint)}
.hero .lede{margin-top:24px; max-width:54ch; font-size:clamp(17px,1.4vw,20px);
  color:var(--ink-soft); line-height:1.6}
.cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:34px; align-items:center}
.cta .note{font-size:14px; color:var(--ink-faint); width:100%; margin-top:4px}

/* ── franja de dominios ─────────────────────────────────────── */
.strip{border-block:1px solid var(--line); background:var(--paper-2)}
.strip .wrap{display:flex; align-items:center; gap:14px 30px; padding:20px 0; flex-wrap:wrap;
  font-size:15px; color:var(--ink-soft)}
.strip b{color:var(--ink); font-weight:650}
.strip .dom{display:inline-flex; align-items:center; gap:8px; background:var(--paper);
  border:1px solid var(--line-2); border-radius:4px; padding:6px 12px; font-size:14.5px}
.strip .dom::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--ok)}
.strip .dom.soon::before{background:var(--ink-faint)}

/* ── secciones ──────────────────────────────────────────────── */
.sec{padding:clamp(60px,8vw,104px) 0}
.sec-hd{max-width:58ch; margin-bottom:clamp(36px,5vw,54px)}
.sec-hd .kick{font-size:12.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-faint); margin-bottom:14px}
.sec-hd h2{font-size:clamp(28px,3.7vw,44px); text-wrap:balance}
.sec-hd p{margin-top:15px; color:var(--ink-soft); font-size:17.5px; max-width:52ch}

/* pasos numerados sobre línea */
.rail{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(22px,3vw,42px)}
.rail .step{border-top:2px solid var(--ink); padding-top:20px}
.rail .n{display:inline-grid; place-items:center; width:26px; height:26px; border-radius:4px;
  background:var(--ink); color:#fff; font-size:14px; font-weight:700; margin-bottom:14px}
.rail h3{font-size:20px; margin-bottom:9px}
.rail p{color:var(--ink-soft); font-size:16px}

/* rejilla de capacidades */
.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:6px; overflow:hidden}
.cell{background:var(--paper); padding:clamp(22px,2.4vw,30px)}
.cell h3{font-size:18px; margin-bottom:8px}
.cell p{color:var(--ink-soft); font-size:15.5px}
.cell .k{display:inline-block; font-size:11.5px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--spark); margin-bottom:10px}

/* ejemplo */
.demo{background:var(--ink); color:#fff}
.demo .sec-hd h2{color:#fff}
.demo .sec-hd p{color:#A8AEBC}
.demo .sec-hd .kick{color:var(--spark)}
.galeria{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.muestra{display:flex; flex-direction:column; text-decoration:none; color:inherit;
  background:var(--ink-2); border:1px solid #2A2E39; border-radius:8px; overflow:hidden;
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease}
.muestra:hover{transform:translateY(-3px); border-color:#3C424F;
  box-shadow:0 18px 40px rgba(0,0,0,.4)}
.muestra img{display:block; width:100%; height:auto; border-bottom:1px solid #2A2E39}
.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(--spark)}
.muestra h3{font-size:19px; margin:0; color:#fff}
.muestra p{font-size:15px; color:#A8AEBC; margin:0; flex:1}
.muestra-url{display:block; font-size:12.5px; font-weight:650;
  color:#fff; 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; color:#8B92A1; font-size:15px; max-width:70ch}
@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}
}

/* cierre */
.end{background:var(--paper-2); border-top:1px solid var(--line)}
.end h2{font-size:clamp(28px,4vw,44px); max-width:18ch; text-wrap:balance}
.end p{margin-top:16px; color:var(--ink-soft); max-width:48ch; font-size:17.5px}

/* ── páginas legales ────────────────────────────────────────── */
.legal-head{border-bottom:1px solid var(--line); padding:26px 0 clamp(30px,4vw,52px)}
.legal-head .mark{margin-bottom:clamp(24px,4vw,44px)}
.legal-head h1{font-size:clamp(30px,4.4vw,50px)}
.legal-body{padding:clamp(38px,5vw,64px) 0 clamp(50px,7vw,88px)}
.legal-body .col{max-width:66ch}
.legal-body h2{font-size:20px; margin:34px 0 12px}
.legal-body h2:first-child{margin-top:0}
.legal-body p{color:var(--ink-soft); margin-bottom:12px}
.legal-body strong{color:var(--ink); font-weight:650}
.legal-body .pend{border-left:3px solid var(--spark); background:var(--spark-soft);
  padding:15px 18px; border-radius:0 4px 4px 0; color:var(--ink-2); font-size:16px;
  margin-bottom:12px}
.legal-body .back{display:inline-block; margin-top:34px; text-decoration:none;
  font-weight:650; border-bottom:2px solid var(--spark); padding-bottom:2px}

.foot{border-top:1px solid var(--line); font-size:14.5px; color:var(--ink-soft)}
.foot .wrap{display:flex; flex-wrap:wrap; gap:16px 26px; align-items:center; padding:28px 0}
.foot a{text-decoration:none}
.foot a:hover{color:var(--ink)}
.foot .right{margin-left:auto; display:flex; gap:22px; flex-wrap:wrap}

@media (prefers-reduced-motion:no-preference){
  .rise{animation:rise .6s cubic-bezier(.2,.7,.3,1) backwards}
  .rise:nth-child(1){animation-delay:.03s} .rise:nth-child(2){animation-delay:.09s}
  .rise:nth-child(3){animation-delay:.15s} .rise:nth-child(4){animation-delay:.21s}
  @keyframes rise{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}
}

@media (max-width:900px){
  .rail{grid-template-columns:1fr; gap:26px}
  .grid{grid-template-columns:1fr 1fr}
  .top nav{display:none}
}
@media (max-width:560px){ .grid{grid-template-columns:1fr} .foot .right{margin-left:0; width:100%} }

/* ── secciones de la portada larga (2026-07-26) ─────────────── */
.hero .claim{margin-top:18px; font-weight:700; font-size:clamp(16px,1.4vw,19px); letter-spacing:-.01em}
.strip .chips{display:flex; flex-wrap:wrap; gap:8px}
.strip .chips span{background:var(--paper); border:1px solid var(--line-2); border-radius:100px;
  padding:5px 13px; font-size:14px; color:var(--ink)}
.rail.four{grid-template-columns:repeat(4,1fr)}
.rail code{font-size:.92em; background:var(--paper-2); padding:2px 6px; border-radius:3px;
  word-break:break-all}
.sec-cta{margin-top:clamp(28px,4vw,44px)}
.sec-cta .btn{margin-right:12px}

/* fondo alterno, para que la página no sea una sola columna infinita */
.contrast{background:var(--paper-2); border-block:1px solid var(--line)}

/* "no es un constructor": la comparación es el argumento, así que se ve */
.versus{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:6px; overflow:hidden}
.v-col{background:var(--paper); padding:clamp(22px,3vw,32px)}
.v-col h3{font-size:16px; margin-bottom:12px; text-transform:uppercase; letter-spacing:.08em;
  font-size:12.5px; color:var(--ink-faint)}
.v-col p{color:var(--ink-soft); font-size:16.5px}
.v-col.ours{background:var(--ink); color:#fff}
.v-col.ours h3{color:var(--spark)}
.v-col.ours p{color:#fff; font-size:19px; line-height:1.5}

/* lista de funcionalidades: densa a propósito, es una lista de cosas */
.feats{list-style:none; margin:0; padding:0; display:grid; gap:8px 22px;
  grid-template-columns:repeat(3,1fr)}
.feats li{position:relative; padding-left:22px; font-size:16px; color:var(--ink-soft)}
.feats li::before{content:"✓"; position:absolute; left:0; color:var(--spark); font-weight:700}
.feats.tight{grid-template-columns:repeat(4,1fr)}
.soon{margin-top:22px; font-size:15px; color:var(--ink-faint); font-style:italic}

/* WhatsApp */
.split .wrap{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,64px);
  align-items:center}
.sp-txt h2{margin-bottom:16px}
.sp-txt p{color:var(--ink-soft); margin-bottom:12px; font-size:17px}
.sp-txt .muted{color:var(--ink-faint); font-size:15.5px}
.sp-txt .btn{margin-top:14px}
.chat{background:var(--paper-2); border:1px solid var(--line); border-radius:10px;
  padding:20px; display:grid; gap:10px}
.chat p{max-width:82%; padding:11px 15px; border-radius:14px; font-size:15.5px; margin:0}
.chat .in{background:var(--paper); border:1px solid var(--line-2); border-bottom-left-radius:4px}
.chat .out{background:#25D366; color:#06301A; justify-self:end; border-bottom-right-radius:4px}

.doms{display:flex; flex-wrap:wrap; gap:12px}
.doms .dom{background:var(--paper); border:1px solid var(--line-2); border-radius:4px;
  padding:9px 15px; font-size:15px}
.sectors{font-size:clamp(17px,1.8vw,21px); line-height:1.9; color:var(--ink-soft);
  max-width:60ch}

/* FAQ: <details> nativo, se pliega sin JavaScript y el buscador lee el texto */
.faqs{display:grid; gap:10px; max-width:820px}
.faqs details{background:var(--paper); border:1px solid var(--line); border-radius:6px;
  overflow:hidden}
.faqs summary{cursor:pointer; padding:17px 20px; font-weight:650; font-size:17px;
  list-style:none; display:flex; align-items:center; justify-content:space-between; gap:16px}
.faqs summary::-webkit-details-marker{display:none}
.faqs summary::after{content:"+"; font-size:21px; color:var(--spark); flex:0 0 auto}
.faqs details[open] summary::after{content:"‘2"}
.faqs summary:hover{background:var(--paper-2)}
.faq-a{padding:0 20px 18px}
.faq-a p{color:var(--ink-soft); font-size:16.5px; line-height:1.65}

.foot .copy{width:100%; font-size:13px; color:var(--ink-faint); margin-top:4px}

@media (max-width:900px){
  .rail.four{grid-template-columns:1fr 1fr}
  .versus,.split .wrap{grid-template-columns:1fr}
  .sp-art{order:-1}
  .feats,.feats.tight{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .rail.four{grid-template-columns:1fr}
  .feats,.feats.tight{grid-template-columns:1fr}
}

/* ── v2: secciones nuevas ───────────────────────────────────── */
.rail.five{grid-template-columns:repeat(5,1fr); gap:clamp(16px,2vw,26px)}
.rail.five h3{font-size:17px}
.rail.five p{font-size:15px}
.grid.three{grid-template-columns:repeat(3,1fr)}
.grid.three .cell p{margin:0}
.sec-cta .aside{display:block; margin-top:14px; font-size:15px; color:var(--ink-faint)}
.aside{font-size:15.5px; color:var(--ink-faint); margin-top:20px; max-width:60ch}
.v-col.ours .v-note{margin-top:14px; font-size:16px; color:#A8AEBC}

/* profundidad: escalera numerada, no rejilla — el orden es el mensaje */
.depth{list-style:none; counter-reset:d; margin:0; padding:0; display:grid; gap:2px;
  border:1px solid var(--line); border-radius:6px; overflow:hidden; background:var(--line)}
.depth li{counter-increment:d; background:var(--paper); padding:18px 22px 18px 62px;
  position:relative; font-size:16.5px; color:var(--ink-soft)}
.depth li::before{content:counter(d); position:absolute; left:22px; top:18px;
  width:24px; height:24px; border-radius:50%; background:var(--ink); color:#fff;
  display:grid; place-items:center; font-size:13px; font-weight:700}
.depth li b{color:var(--ink)}

@media (max-width:1100px){ .rail.five{grid-template-columns:repeat(3,1fr)} }
@media (max-width:900px){
  .rail.five,.grid.three{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .rail.five,.grid.three{grid-template-columns:1fr}
  .depth li{padding:16px 18px 16px 54px}
}

/* Un borrador tiene que anunciarse como tal en la propia página. */
.legal-draft{background:#FFF3CD; border:1px solid #E0B84C; border-radius:4px;
  padding:12px 15px; margin:0 0 24px; font-size:14px; line-height:1.55; color:#5C4200}

/* Un hueco que nadie ha rellenado tiene que verse. Se imprime también: un
   documento con huecos no debe poder pasar por definitivo en papel. */
.legal-pending{background:#FFE9A8; color:#6B4C00; padding:1px 6px; border-radius:3px;
  font-size:.92em; font-weight:600; white-space:nowrap}

/* --------------------------------------------------------------- impresión
   No generamos PDF: la página imprime a PDF desde cualquier navegador, con la
   versión, la fecha y la URL en el pie. Un PDF almacenado sería una segunda
   copia del texto que envejece en silencio mientras la página se corrige. */
@media print{
  .legal-head{border:none; padding:0 0 18pt}
  .legal-head .mark,.foot,.back,nav{display:none !important}
  .legal-head h1{font-size:20pt}
  .legal-meta{font-size:9pt}
  .legal-body{padding:0}
  .legal-body .col{max-width:none}
  .legal-body h2{font-size:13pt; margin:16pt 0 6pt; page-break-after:avoid}
  .legal-body h3{font-size:11pt; page-break-after:avoid}
  .legal-body p,.legal-body li{font-size:10pt; line-height:1.45; color:#000; orphans:3; widows:3}
  .legal-table table{font-size:9pt; page-break-inside:avoid}
  body{background:#fff; color:#000}
  @page{margin:18mm 16mm 20mm}
}

/* tablas de los documentos v0.2 (anexos del encargo, categorías de datos) */
.legal-table{overflow-x:auto; margin:16px 0}
.legal-table table{border-collapse:collapse; width:100%; font-size:14px}
.legal-table th,.legal-table td{border:1px solid var(--line); padding:8px 10px;
  text-align:left; vertical-align:top}
.legal-table th{background:var(--paper-2); font-weight:650}
.legal-meta{font-size:13.5px; opacity:.65; margin-top:10px}

/* ── Precio ─────────────────────────────────────────────────────────────── */
/* Un panel, no dos tarjetas: los dos planes son el mismo producto y sólo
   cambian en cada cuánto se paga. Dos cajas casi idénticas obligan a leer lo
   mismo dos veces para encontrar la única palabra distinta.

   El conmutador son dos `radio` ocultos y selectores de hermano. Sin una línea
   de JavaScript: estas portadas no cargan ningún script y la página de
   privacidad lo afirma. De regalo, funciona con el teclado y un lector de
   pantalla lo anuncia como lo que es. */
.precio .sec-hd{text-align:center; margin-inline:auto}
.precio .sec-hd p{margin-inline:auto; max-width:52ch}

.tarifa{max-width:620px; margin:0 auto}
.tarifa>input{position:absolute; opacity:0; width:1px; height:1px}

.tarifa-panel{background:var(--paper); border:1px solid var(--line);
  border-radius:18px; padding:34px 34px 30px; text-align:center;
  box-shadow:0 18px 46px -30px rgba(0,0,0,.45)}

/* el segmentado */
.ciclo{display:inline-flex; gap:4px; padding:4px; margin-bottom:26px;
  background:var(--paper-2); border-radius:100px}
.tarifa-panel{box-shadow:0 18px 46px -30px rgba(18,20,26,.5)}
.ciclo label{cursor:pointer; padding:10px 22px; border-radius:100px;
  font-size:15px; font-weight:650; color:var(--ink-soft); white-space:nowrap;
  transition:background .16s ease, color .16s ease}
.ciclo label em{font-style:normal; font-size:12.5px; font-weight:700;
  color:var(--spark); margin-left:6px}
#ciclo-mes:checked~.tarifa-panel label[for="ciclo-mes"],
#ciclo-ano:checked~.tarifa-panel label[for="ciclo-ano"]{
  background:var(--paper); color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.14)}
/* El foco tiene que verse: el input real está oculto, así que el anillo se
   pinta sobre su etiqueta. Sin esto el conmutador es invisible al tabular. */
#ciclo-mes:focus-visible~.tarifa-panel label[for="ciclo-mes"],
#ciclo-ano:focus-visible~.tarifa-panel label[for="ciclo-ano"]{
  outline:2px solid var(--spark); outline-offset:2px}

.cifra{font-family:var(--sans); font-size:64px; line-height:1;
  color:var(--ink); font-variant-numeric:tabular-nums}
.cifra b{font-weight:600}
.cifra span{font-family:var(--sans); font-size:19px; font-weight:600;
  color:var(--ink-soft); margin-left:4px}
.cifra-nota{margin:14px auto 24px; max-width:42ch; font-size:15px;
  color:var(--ink-soft); min-height:3em}

/* lo que enseña cada ciclo */
.c-ano,.n-ano{display:none}
#ciclo-ano:checked~.tarifa-panel .c-mes,
#ciclo-ano:checked~.tarifa-panel .n-mes{display:none}
#ciclo-ano:checked~.tarifa-panel .c-ano,
#ciclo-ano:checked~.tarifa-panel .n-ano{display:block}

.tarifa-panel .btn{margin-bottom:30px}

.incluye{list-style:none; margin:0; padding:26px 0 0; text-align:left;
  border-top:1px solid var(--line);
  display:grid; grid-template-columns:repeat(2,1fr); gap:15px 24px}
.incluye li{position:relative; padding-left:25px; display:flex;
  flex-direction:column; gap:1px}
.incluye li::before{content:"✓"; position:absolute; left:0; top:0;
  color:var(--spark); font-weight:700}
.incluye li b{font-size:15px; font-weight:650}
.incluye li span{color:var(--ink-soft); font-size:14px; line-height:1.45}

.pl-legal{max-width:620px; margin:20px auto 0; font-size:13px;
  color:var(--ink-faint); line-height:1.5; text-align:center}
.pl-legal a{color:var(--ink-soft)}

@media (max-width:640px){
  .tarifa-panel{padding:26px 20px 24px}
  .cifra{font-size:52px}
  .incluye{grid-template-columns:1fr}
  .ciclo label{padding:10px 16px; font-size:14px}
}

/* La sociedad que responde. Va en el pie de las tres portadas y con el mismo
   texto: se entre por engalicia.es o por tiendasweb.net, quien contrata es la
   misma, y el visitante no debería tener que abrir el aviso legal para saberlo.
   Además es lo que Stripe exige ver publicado antes de dejar cobrar. */
.foot .entity{flex-basis:100%; order:9; font-size:13px; line-height:1.6; color:var(--ink-faint, #8A938E)}
.foot .entity b{font-weight:600; color:var(--ink-soft, #5C6A66)}
.foot .entity a{color:inherit}

/* ── fotografía ───────────────────────────────────────────────
   Esta portada nació a propósito SIN una sola fotografía: retícula técnica,
   tinta casi negra y un acento. La decisión cambia hoy, y conviene decir por
   qué: quien lee esto tiene una ferretería o una peluquería, y la cara de
   alguien atendiendo un mostrador dice «esto es para ti» mejor que cualquier
   retícula. La retícula se queda en la portada; las fotos entran después.

   Todas se descargan y se sirven desde nuestro propio dominio. En un dominio
   con portada eso no es una optimización: la página de privacidad afirma por
   escrito que no se carga nada de terceros. */
.foto-banda{overflow:hidden; border-bottom:1px solid var(--line)}
.foto-banda img{width:100%; height:clamp(220px,34vw,400px); object-fit:cover;
  object-position:center 40%; display:block}

/* Doce baldosas piden cuatro columnas: en tres son cuatro filas y se lee como
   una lista larga en vez de como un inventario. La otra rejilla de la página
   sigue con tres, que es lo que tiene. */
#todo .grid{grid-template-columns:repeat(4,1fr)}

.mosaico-intro{margin:clamp(30px,4vw,44px) 0 14px; color:var(--ink-soft); font-size:17px;
  max-width:60ch}
.mosaico{display:grid; grid-template-columns:repeat(6,1fr); gap:12px}
.mosaico figure{margin:0; position:relative; overflow:hidden; aspect-ratio:1;
  background:var(--paper-2); border-radius:4px}
.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:24px 10px 10px;
  font-size:12.5px; font-weight:650; color:#fff; line-height:1.3;
  background:linear-gradient(transparent,rgba(10,11,14,.86))}
.mosaico-pie{margin-top:20px; color:var(--ink-soft); font-size:16px; max-width:74ch}

@media (max-width:1000px){
  #todo .grid{grid-template-columns:repeat(2,1fr)}
  .mosaico{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:700px){
  #todo .grid{grid-template-columns:1fr}
  .mosaico{grid-template-columns:repeat(2,1fr)}
}

/* ── Por qué nosotros ───────────────────────────────────────────────
   Una lista de filas, no una tabla: en el móvil 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(--line)}
.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(--line)}
.pq-que{font-size:16px; font-weight:700; color:var(--ink)}
.pq-cuesta{font-size:16.5px; color:var(--ink-soft)}
.pq-fila.nuestra{background:var(--ink); border-bottom:0; margin-top:14px;
  padding:24px clamp(18px,2.6vw,28px)}
.pq-fila.nuestra .pq-que{color:var(--spark)}
.pq-fila.nuestra .pq-cuesta{color:#fff; font-size:18px; line-height:1.5}
.pq-cierre{margin-top:26px; max-width:62ch; font-size:17px; color:var(--ink-soft)}
.pq-cierre b{color:var(--ink)}

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