/* Codec Agency · codecagency.com
   Dirección «La frase es la composición» (tasteskill, semilla 855089397) con la marca Codec v4:
   Bricolage Grotesque para titulares, Mona Sans para texto; porcelana, noche, voltio solo en la acción,
   coral solo en la barra «/» de la marca. Referencias de styles.refero.design en DESIGN.md.
   Reglas de casa: sin rótulos sobre títulos, sin monoespaciada, sin numeración, sin filetes finos,
   sin degradados, sin sombras en reposo. Las superficies se separan por un paso de tono. */

@font-face { font-family: "Bricolage"; src: url("/fonts/bricolage-titulares.woff2") format("woff2"); font-weight: 600 800; font-display: swap; }
@font-face { font-family: "Mona"; src: url("/fonts/mona-sans-texto.woff2") format("woff2"); font-weight: 400 650; font-display: swap; }

:root {
  --noche: #0b0c10;
  --porcelana: #f4f3ef;
  --voltio: #d2f53c;
  --voltio-hondo: #c3e92a;
  --ambar: #f5b746;
  --menta: #45d49a;
  --cielo: #62c3ff;
  --coral-claro: #ff7a6e;

  --fondo: #f4f3ef;
  --tono: #eae8e1;
  --tono-2: #dfdcd3;
  --tinta: #121318;
  --tinta-suave: #3f424b;
  --coral: #c0362c;
  --campo: #ffffff;
  --borde-campo: #8a8d97;
  --foco: #0b0c10;

  --t-titular: "Bricolage", "Arial Narrow", system-ui, sans-serif;
  --t-texto: "Mona", system-ui, -apple-system, "Segoe UI", sans-serif;

  --s-display: clamp(1.875rem, 0.2rem + 8.7vw, 8.25rem);
  --s-titulo: clamp(2rem, 1.15rem + 3.6vw, 4.25rem);
  --s-entrada: 1.25rem;
  --s-medio: clamp(1.25rem, 1.05rem + 0.8vw, 1.75rem);
  --s-texto: 1.0625rem;
  --s-nota: 1rem;

  --margen: max(20px, env(safe-area-inset-left), env(safe-area-inset-right));
  --ancho: 1360px;
  --hueco: clamp(96px, 12vw, 200px);
  /* Altura real de la cabecera fija: 68 px más la zona segura de arriba (muesca o isla del iPhone). */
  --seguro-arriba: env(safe-area-inset-top, 0px);
  --alto-cab: calc(68px + var(--seguro-arriba));
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  color-scheme: light;
}
:root[data-tema="oscuro"] {
  --fondo: #0b0c10; --tono: #15171d; --tono-2: #1f222b; --tinta: #f2f2f5; --tinta-suave: #b3b6c2;
  --coral: #ff7a6e; --campo: #15171d; --borde-campo: #7f8391; --foco: #d2f53c; color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --fondo: #0b0c10; --tono: #15171d; --tono-2: #1f222b; --tinta: #f2f2f5; --tinta-suave: #b3b6c2;
    --coral: #ff7a6e; --campo: #15171d; --borde-campo: #7f8391; --foco: #d2f53c; color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--alto-cab) + 12px); }
body { margin: 0; background: var(--fondo); color: var(--tinta); font: 400 var(--s-texto)/1.55 var(--t-texto); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
p { margin: 0 0 1em; text-wrap: pretty; }
h1, h2, h3 { font-family: var(--t-titular); font-weight: 700; margin: 0; text-wrap: balance; letter-spacing: -0.035em; }
h2 { font-size: var(--s-titulo); line-height: 1; }
h3 { font-size: var(--s-medio); line-height: 1.15; letter-spacing: -0.02em; }
:focus-visible { outline: 2px solid var(--foco); outline-offset: 3px; }
.cab, .menu-hoja, .montaje, .cierre, .pie, .cabecera-pagina { --foco: #d2f53c; }
::selection { background: var(--voltio); color: var(--noche); }
.oculto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.salto { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--voltio); color: var(--noche); padding: 12px 16px; font-weight: 600; text-decoration: none; }
.salto:focus { left: 8px; }
.envoltura { width: min(100% - 2 * var(--margen), var(--ancho)); margin-inline: auto; }
.nota { font-size: var(--s-nota); color: var(--tinta-suave); }

/* ---------- Botones: planos, esquinas rectas, un solo color de acción ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 0 26px; border: 0; border-radius: 0;
  background: var(--voltio); color: var(--noche);
  font: 650 1.0625rem/1 var(--t-texto); text-decoration: none; cursor: pointer;
  transition: transform 0.16s var(--ease-out), background-color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
.boton:hover { background: var(--voltio-hondo); }
.boton:active { transform: scale(0.97); }
.boton .flecha { width: 18px; height: 18px; transition: transform 0.2s var(--ease-out); }
.boton:hover .flecha { transform: translateX(4px); }
.boton[aria-busy="true"] { opacity: 0.7; cursor: progress; }
.enlace { font-weight: 600; text-decoration: underline; text-underline-offset: 0.25em; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; transition: opacity 0.2s ease; }
.enlace:hover { opacity: 0.75; }
.acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }

/* ---------- Cabecera: barra plana ---------- */
.cab { position: sticky; top: 0; z-index: 40; background: var(--noche); color: #f2f2f5; padding-top: var(--seguro-arriba); }
.cab .envoltura { display: flex; align-items: center; gap: 12px; height: 68px; }
.marca { display: inline-flex; align-items: center; flex: none; text-decoration: none; }
.marca img { height: 26px; width: auto; }
.nav { display: flex; gap: 2px; margin-left: auto; }
.nav a { color: #c9cbd3; text-decoration: none; font-weight: 500; font-size: var(--s-nota); padding: 12px; white-space: nowrap; transition: color 0.15s ease; }
.nav a:hover, .nav a[aria-current="page"] { color: #ffffff; }
.nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--coral-claro); text-decoration-thickness: 2px; text-underline-offset: 8px; }
.cab-acciones { display: flex; align-items: center; gap: 6px; margin-left: 10px; }
.cab .boton { min-height: 44px; padding: 0 16px; font-size: var(--s-nota); }
.tema { width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: transparent; color: #c9cbd3; cursor: pointer; transition: color 0.15s ease, transform 0.16s var(--ease-out); }
.tema:hover { color: #fff; }
.tema:active { transform: scale(0.92); }
.tema svg { width: 20px; height: 20px; }
.tema .sol { display: none; }
:root[data-tema="oscuro"] .tema .sol { display: block; }
:root[data-tema="oscuro"] .tema .luna { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .tema .sol { display: block; } :root:not([data-tema="claro"]) .tema .luna { display: none; } }
.menu { display: none; }
.menu summary { list-style: none; width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer; color: #fff; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary svg { width: 24px; height: 24px; }
.menu-hoja { position: fixed; inset: var(--alto-cab) 0 auto 0; background: var(--noche); padding: 8px var(--margen) 28px; display: grid; }
.menu-hoja a { color: #f2f2f5; text-decoration: none; font: 700 1.75rem/1.1 var(--t-titular); letter-spacing: -0.03em; padding: 12px 0; }
.menu-hoja a[aria-current="page"] { color: var(--voltio); }
@media (max-width: 1080px) { .nav { display: none; } .menu { display: block; } .cab-acciones { margin-left: auto; } }
@media (max-width: 380px) { .cab .boton { display: none; } }

/* ---------- Secciones ---------- */
.seccion { padding: var(--hueco) 0 0; }
.dividida { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 32px clamp(32px, 5vw, 96px); align-items: end; }
.dividida h2 { max-width: 12ch; }
.dividida p { max-width: 40ch; margin: 0; font-size: var(--s-entrada); }
@media (max-width: 900px) { .dividida { grid-template-columns: minmax(0, 1fr); } }

/* Prueba con tu negocio: lo que se puede tocar */
.prueba { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.prueba h2 { max-width: 13ch; }
.prueba > div > p { max-width: 44ch; margin: 22px 0 0; font-size: var(--s-entrada); }
.prueba-campo { margin-top: clamp(28px, 4vw, 48px); }
.prueba-campo label { display: block; font-weight: 600; margin-bottom: 8px; }
.prueba-campo input { width: 100%; border: 0; border-bottom: 3px solid var(--tinta); background: transparent; color: var(--tinta); font: 700 var(--s-titulo)/1.15 var(--t-titular); letter-spacing: -0.03em; padding: 6px 0 10px; border-radius: 0; }
.prueba-campo input:focus-visible { outline: 2px solid var(--foco); outline-offset: 6px; }
.ejemplos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; align-items: center; }
.ejemplos > span { font-size: var(--s-nota); color: var(--tinta-suave); margin-right: 4px; }
.ejemplos button { font: 500 var(--s-nota)/1 var(--t-texto); min-height: 44px; padding: 0 14px; border: 0; background: var(--tono); color: var(--tinta); cursor: pointer; transition: background-color 0.15s ease, transform 0.16s var(--ease-out); }
.ejemplos button:hover { background: var(--tono-2); }
.ejemplos button:active { transform: scale(0.96); }
.prueba .acciones { margin-top: 28px; }
.telefono-nota { font-size: var(--s-nota); color: var(--tinta-suave); text-align: center; margin: 14px 0 0; }
@media (max-width: 900px) { .prueba { grid-template-columns: minmax(0, 1fr); } }

/* Precio: un campo de color con la oferta como frase */
.campo-precio { background: var(--ambar); color: var(--noche); margin-top: var(--hueco); padding: clamp(72px, 9vw, 152px) 0; }
.campo-precio h2 { color: var(--noche); font-size: var(--s-display); line-height: 1.02; max-width: 15ch; }
.precio-bloque { display: inline-block; background: var(--noche); color: var(--porcelana); padding: 0 0.14em; }
.precio-pie { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px 48px; align-items: end; margin-top: clamp(40px, 5vw, 64px); }
.precio-pie p { font-size: var(--s-entrada); margin: 0; max-width: 36ch; }
.precio-pie .acciones { justify-content: flex-end; }
.campo-precio .boton { outline: 2px solid var(--noche); outline-offset: -2px; }
.campo-precio .boton:focus-visible { outline: 3px solid var(--noche); outline-offset: 4px; }
.campo-precio a:not(.boton) { color: var(--noche); }
.incluye { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 32px; margin-top: clamp(56px, 7vw, 96px); }
.incluye h3 { font-size: var(--s-medio); margin-bottom: 14px; color: var(--noche); }
.incluye ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.incluye li { position: relative; padding-left: 20px; line-height: 1.4; }
.incluye li::before { content: "/"; position: absolute; left: 0; font-weight: 700; }
.letra { margin-top: clamp(40px, 5vw, 64px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 48px; }
.letra p { margin: 0; max-width: 52ch; }
@media (max-width: 1000px) { .incluye { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .precio-pie, .letra { grid-template-columns: minmax(0, 1fr); }
  .precio-pie .acciones { justify-content: flex-start; }
  .incluye { grid-template-columns: minmax(0, 1fr); }
}

/* Trabajos: imagen enorme y un grupo pequeño al lado */
.trabajo { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); align-items: end; margin-top: clamp(48px, 6vw, 88px); }
.trabajo + .trabajo { margin-top: clamp(96px, 10vw, 160px); }
.trabajo-visual { background: var(--tono); }
.trabajo-visual > picture img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.trabajo-grupo { display: grid; gap: 14px; align-content: end; }
.trabajo-grupo .movil { width: 46%; max-width: 220px; background: var(--noche); padding: 5px; border-radius: 24px; margin-bottom: 12px; }
.trabajo-grupo .movil img { border-radius: 19px; aspect-ratio: 390 / 800; object-fit: cover; object-position: top; }
.trabajo-grupo p { margin: 0; max-width: 40ch; }
.estado { font-size: var(--s-nota); color: var(--tinta-suave); display: inline-flex; align-items: center; gap: 8px; }
.estado::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #1f9d63; }
@media (max-width: 900px) { .trabajo { grid-template-columns: minmax(0, 1fr); } .trabajo-grupo .movil { display: none; } }

/* Cómo trabajamos: líneas que bajan en escalera */
.lineas { list-style: none; margin: clamp(40px, 5vw, 72px) 0 0; padding: 0; display: grid; gap: clamp(32px, 3.4vw, 52px); }
.lineas li { padding-left: calc(var(--n, 0) * clamp(0px, 5.5vw, 104px)); }
.lineas li:nth-child(2) { --n: 1; } .lineas li:nth-child(3) { --n: 2; } .lineas li:nth-child(4) { --n: 3; } .lineas li:nth-child(5) { --n: 4; }
.lineas strong { display: block; font: 700 var(--s-titulo)/1.02 var(--t-titular); letter-spacing: -0.035em; max-width: 20ch; text-wrap: balance; }
.lineas p { margin: 12px 0 0; max-width: 56ch; }
@media (max-width: 700px) { .lineas li { padding-left: 0; } }

/* Productos: cada uno sobre su campo de color */
.productos { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 4.5fr) minmax(0, 4.5fr); gap: 12px; }
.productos .lado { padding-right: 24px; }

.productos .lado p { margin-top: 20px; max-width: 30ch; }
.producto { display: grid; grid-template-rows: auto 1fr; text-decoration: none; color: var(--noche); transition: transform 0.3s var(--ease-out); }
.producto:hover { transform: translateY(-4px); }
.producto:active { transform: translateY(-1px) scale(0.995); }
.producto-tile { padding: clamp(20px, 2.4vw, 36px) clamp(20px, 2.4vw, 36px) 0; overflow: hidden; }
.producto-tile img { width: 100%; aspect-ratio: 16 / 10.5; object-fit: cover; object-position: top; transform-origin: bottom; transition: transform 0.6s var(--ease-out); }
.producto:hover .producto-tile img { transform: scale(1.02); }
.producto-texto { padding: 24px clamp(20px, 2.4vw, 36px) 32px; display: grid; gap: 10px; align-content: start; }
.producto-texto h3 { color: var(--noche); }
.producto-texto p { margin: 0; }
.producto-texto .ir { font-weight: 650; text-decoration: underline; text-underline-offset: 0.25em; }
.p-vuelven { background: var(--menta); }
.p-qrumbo { background: var(--cielo); }
@media (max-width: 1000px) { .productos { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .productos .lado { grid-column: 1 / -1; padding: 0 0 24px; } }
@media (max-width: 640px) { .productos { grid-template-columns: minmax(0, 1fr); } }
.ia { margin-top: clamp(64px, 8vw, 120px); }

/* Preguntas: título ancho, preguntas sangradas, sin filetes */
.preguntas-titulo { max-width: 16ch; }
.preguntas { margin-top: clamp(40px, 6vw, 80px); margin-left: 33.333%; display: grid; gap: 8px; }
.pregunta { padding: 0 20px; transition: background-color 0.2s ease; }
.pregunta:hover, .pregunta[open] { background: var(--tono); }
.pregunta summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 16px 0; font: 500 var(--s-entrada)/1.3 var(--t-texto); }
.pregunta summary::-webkit-details-marker { display: none; }
.pregunta summary svg { flex: none; width: 20px; height: 20px; transition: transform 0.25s var(--ease-out); }
.pregunta[open] summary svg { transform: rotate(180deg); }
.pregunta .respuesta { padding: 0 0 22px; max-width: 56ch; }
.pregunta .respuesta p:last-child { margin: 0; }
@media (max-width: 900px) { .preguntas { margin-left: 0; } }

/* Cierre invertido + pie con el contacto como titular */
.cierre { background: var(--noche); color: #f2f2f5; margin-top: var(--hueco); padding: clamp(96px, 12vw, 200px) 0 clamp(48px, 6vw, 96px); }
.cierre h2 { color: #f4f3ef; font-size: var(--s-display); line-height: 0.98; max-width: 14ch; }
.cierre-pie { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 24px; align-items: end; margin-top: clamp(48px, 7vw, 120px); }
.cierre-pie p { font-size: var(--s-entrada); max-width: 36ch; margin: 0; color: #eeeff2; }
.cierre-pie .acciones { justify-content: flex-end; }
@media (max-width: 760px) { .cierre-pie { grid-template-columns: minmax(0, 1fr); } .cierre-pie .acciones { justify-content: flex-start; } .cierre-pie .boton { width: 100%; } }

.pie { background: var(--noche); color: #c9cbd3; padding: clamp(80px, 10vw, 160px) 0 calc(36px + env(safe-area-inset-bottom)); font-size: var(--s-nota); }
.pie > .envoltura { container-type: inline-size; }
.cierre + .pie { padding-top: clamp(40px, 6vw, 96px); }
.pie-notas { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px 32px; align-items: center; }
.pie-notas p { margin: 0; max-width: 46ch; }
.pie-notas .marca img { height: 24px; }
.pie a { color: #f2f2f5; }
.pie-correo { display: block; width: fit-content; max-width: 100%; margin: clamp(56px, 8vw, 120px) 0 clamp(40px, 5vw, 72px); font: 700 clamp(1.5rem, 8.2cqi, 8.25rem)/1 var(--t-titular); letter-spacing: -0.045em; color: #f4f3ef; text-decoration: none; overflow-wrap: normal; transition: color 0.2s ease; }
.pie-correo:hover { color: var(--voltio); }
.pie-correo .arroba { color: var(--coral-claro); }
.pie-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 32px; font-size: var(--s-nota); align-items: start; }
.pie-meta nav { display: flex; flex-wrap: wrap; gap: 0 18px; }
.pie-meta nav a { min-height: 32px; display: inline-flex; align-items: center; }
.pie-meta p { margin: 0; }
.pie-meta p:last-child { text-align: right; }
@media (max-width: 760px) { .pie-meta { grid-template-columns: minmax(0, 1fr); } .pie-meta p:last-child { text-align: left; } }

/* ---------- Páginas interiores ---------- */
.cabecera-pagina { background: var(--noche); color: #f2f2f5; padding: clamp(64px, 9vw, 152px) 0 clamp(56px, 7vw, 112px); }
.cabecera-pagina h1 { color: #f4f3ef; font-size: var(--s-display); line-height: 1; max-width: 14ch; }
.cabecera-pagina .entradilla { font-size: var(--s-entrada); max-width: 46ch; margin: clamp(24px, 3vw, 40px) 0 0; color: #eeeff2; }
.cabecera-pagina .acciones { margin-top: 32px; }
.cabecera-pagina a:not(.boton) { color: #fff; }
.prosa { max-width: 46em; }
.prosa h2 { font-size: var(--s-medio); margin: 56px 0 16px; }
.prosa h2:first-child { margin-top: 0; }
.prosa ul { padding-left: 1.2em; }
.prosa li { margin-bottom: 8px; }
.tabla-datos { width: 100%; border-collapse: collapse; margin: 8px 0 24px; }
.tabla-datos th, .tabla-datos td { text-align: left; vertical-align: top; padding: 14px 16px; }
.tabla-datos tr:nth-child(odd) { background: var(--tono); }
.tabla-datos th { font-weight: 650; width: 32%; }
@media (max-width: 600px) { .tabla-datos th, .tabla-datos td { display: block; width: 100%; } .tabla-datos td { padding-top: 0; } }
.version { color: var(--tinta-suave); font-size: var(--s-nota); margin-top: 56px; }
.dos-campos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin-top: clamp(40px, 5vw, 64px); }
.dos-campos > div { background: var(--tono); padding: clamp(24px, 3vw, 44px); }
.dos-campos h3 { margin-bottom: 16px; }
.dos-campos ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.dos-campos li { position: relative; padding-left: 20px; }
.dos-campos li::before { content: "/"; position: absolute; left: 0; color: var(--coral); font-weight: 700; }
.dos-campos .no li::before { content: "×"; color: var(--tinta-suave); }
.dos-campos .chip { display: inline-block; font-weight: 650; font-size: var(--s-nota); padding: 6px 12px; margin-bottom: 14px; color: var(--noche); }
@media (max-width: 760px) { .dos-campos { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Contacto ---------- */
.contacto { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
@media (max-width: 960px) { .contacto { grid-template-columns: minmax(0, 1fr); } }
.formulario { background: var(--tono); padding: clamp(24px, 3.4vw, 48px); }
.formulario h2 { font-size: var(--s-titulo); margin-bottom: 28px; }
.campos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 16px; }
.campo { display: grid; gap: 8px; align-content: start; }
.campo-ancho { grid-column: 1 / -1; }
@media (max-width: 620px) { .campos { grid-template-columns: minmax(0, 1fr); } }
.campo label { font-weight: 600; }
.campo .opcional { font-weight: 400; color: var(--tinta-suave); }
.campo input:not([type="checkbox"]), .campo select, .campo textarea { width: 100%; min-height: 52px; padding: 12px 14px; border-radius: 0; font: 400 1.0625rem/1.4 var(--t-texto); color: var(--tinta); background: var(--campo); border: 1px solid var(--borde-campo); appearance: none; -webkit-appearance: none; transition: border-color 0.15s ease; }
.campo select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23808390' stroke-width='1.8'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 16px; padding-right: 42px; }
.campo textarea { min-height: 128px; resize: vertical; }
.campo input:not([type="checkbox"]):hover, .campo select:hover, .campo textarea:hover { border-color: var(--tinta); }
.campo input:not([type="checkbox"]):focus-visible, .campo select:focus-visible, .campo textarea:focus-visible { outline: 2px solid var(--foco); outline-offset: 0; border-color: var(--foco); }
.campo .ayuda { font-size: var(--s-nota); color: var(--tinta-suave); margin: 0; }
.campo .error { font-size: var(--s-nota); color: var(--coral); margin: 0; font-weight: 600; }
.campo .error:empty { display: none; }
.campo [aria-invalid="true"] { border-color: var(--coral); border-width: 2px; }
.casilla { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
.casilla input { flex: none; width: 24px; height: 24px; margin: 0; appearance: auto; -webkit-appearance: checkbox; accent-color: var(--noche); cursor: pointer; }
.casilla input:focus-visible { outline: 2px solid var(--foco); outline-offset: 3px; }
:root[data-tema="oscuro"] .casilla input { accent-color: var(--voltio); }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .casilla input { accent-color: var(--voltio); } }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* taste-skill-ignore: campo trampa invisible */
.envio { margin-top: 28px; display: grid; gap: 16px; justify-items: start; }
.cf-turnstile { min-height: 65px; }
.mensaje-form { margin: 0; padding: 14px 18px; background: var(--tono-2); font-weight: 600; }
.mensaje-form:empty { display: none; }
.lateral { display: grid; gap: 40px; padding-top: 8px; }
.lateral h3 { margin-bottom: 12px; }
.lateral p { margin: 0; }
.lateral ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.lateral li { position: relative; padding-left: 20px; }
.lateral li::before { content: "/"; position: absolute; left: 0; color: var(--coral); font-weight: 700; }

/* ---------- Movimiento ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .montaje h1 .linea > span { transform: translateY(105%); animation: sube-linea 0.9s var(--ease-out) forwards; }
  .js .montaje h1 .linea:nth-child(2) > span { animation-delay: 0.11s; }
  .js .e-hero > :not(h1) { opacity: 0; transform: translateY(12px); animation: aparece 0.7s var(--ease-out) 0.5s forwards; }
  .js .e-hero > .precio-linea { animation-delay: 0.62s; }
  .js .montaje .m-pantalla { opacity: 0; animation: aparece 1s var(--ease-out) 0.3s forwards; }
  @keyframes sube-linea { to { transform: none; } }
  @keyframes aparece { to { opacity: 1; transform: none; } }
  .js .aparece { opacity: 0; transform: translateY(24px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); transition-delay: calc(var(--i, 0) * 80ms); }
  .js .aparece.visto { opacity: 1; transform: none; }
}
[data-i="1"] { --i: 1; } [data-i="2"] { --i: 2; } [data-i="3"] { --i: 3; } [data-i="4"] { --i: 4; } [data-i="5"] { --i: 5; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
@media print { .cab, .pie, .cierre, .boton { display: none !important; } }

/* Un <details> cerrado no debe dejar su contenido medible (Chrome usa content-visibility). */
.menu:not([open]) .menu-hoja { display: none; }

/* Cabeceras interiores en dos columnas: texto y su material */
.cabecera-rejilla { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px clamp(32px, 5vw, 80px); align-items: center; }
.cabecera-media { display: grid; justify-items: center; }
.simbolo-grande { width: min(100%, 360px); height: auto; }
@media (max-width: 900px) { .cabecera-rejilla { grid-template-columns: minmax(0, 1fr); } .simbolo-grande { width: 120px; justify-self: start; } .cabecera-media:has(.simbolo-grande) { justify-items: start; } }
.obra { position: relative; width: 100%; padding: 0 8% 10% 0; }
.obra-pantalla { background: #20232c; border-radius: 12px; overflow: hidden; }
.obra-pantalla img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.movil-marco { background: var(--noche); padding: 5px; border-radius: 26px; box-sizing: border-box; }
.cabecera-pagina .movil-marco { background: #000; }
.movil-marco img { border-radius: 21px; aspect-ratio: 390 / 800; object-fit: cover; object-position: top; width: 100%; }
.obra-movil { position: absolute; right: 0; bottom: 0; width: 30%; }
.moviles { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; width: min(100%, 460px); }
.moviles .movil-marco:nth-child(2) { margin-top: 48px; }
.lateral-telefono { margin: 0; }
.prosa > p, .prosa li { max-width: 68ch; }
@media (prefers-reduced-motion: no-preference) {
  .js .cabecera-texto > *, .js .cabecera-media { opacity: 0; transform: translateY(20px); animation: aparece 0.8s var(--ease-out) forwards; }
  .js .cabecera-texto > :nth-child(2) { animation-delay: 0.08s; }
  .js .cabecera-texto > :nth-child(3) { animation-delay: 0.16s; }
  .js .cabecera-media { animation-delay: 0.24s; }
}
/* En las cabeceras con material al lado, el titular baja un paso para quedarse en dos líneas. */
.cabecera-rejilla { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
.cabecera-pagina h1 { font-size: clamp(2.25rem, 0.4rem + 6.4vw, 6.5rem); max-width: none; }
.campo .ayuda, .nota { font-size: 1rem; }
@media (max-width: 600px) { .cabecera-pagina h1 { font-size: clamp(1.75rem, 0.6rem + 6.2vw, 2.25rem); } }
@media (max-width: 900px) { .cabecera-rejilla { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 400px) { .formulario { margin-inline: calc(-1 * var(--margen)); padding: 24px 10px; } .cf-turnstile { max-width: 100%; } }

/* ---------- Portada: la escena «así te encuentran» ----------
   Un móvil dibujado monta la web de un negocio de ejemplo. Sin JavaScript o con movimiento reducido
   se lee en orden y con todo montado. Con .viva, la sección mide 500svh, el escenario queda fijo
   y public/js/codec.js lo mueve como función pura del desplazamiento (ir atrás dibuja lo mismo). */
.montaje { background: var(--noche); color: #f2f2f5; padding: clamp(56px, 8vw, 120px) 0 clamp(64px, 8vw, 120px); position: relative; }
.e-pin { width: min(100% - 2 * var(--margen), var(--ancho)); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px clamp(32px, 5vw, 96px); align-items: start; position: relative; }
.e-fondo, .e-progreso, .e-saltar { display: none; }
.e-textos { display: grid; gap: clamp(56px, 7vw, 96px); }
/* El titular se mide con el ancho de su propia columna (cqi): «Webs para negocios» ocupa unas 9,6 veces
   su tamaño, así que nunca se recorta, sea cual sea la pantalla. */
.e-hero { container-type: inline-size; }
.montaje h1 { color: #f4f3ef; font-size: min(10.2cqi, 6.5rem); line-height: 0.98; letter-spacing: -0.045em; }
.montaje h1 .linea { display: block; overflow: hidden; padding-bottom: 0.06em; white-space: nowrap; }
.montaje h1 .linea > span { display: inline-block; }
.e-hero .entradilla { font-size: var(--s-entrada); line-height: 1.5; max-width: 40ch; margin: clamp(24px, 3vw, 40px) 0 32px; color: #eeeff2; }
.montaje .enlace { color: #f2f2f5; }
.precio-linea { margin: 26px 0 0; color: #c9cbd3; font-size: var(--s-nota); max-width: 52ch; }
.precio-linea strong { color: #fff; }
.e-texto h2 { color: #f4f3ef; font-size: clamp(2rem, 1rem + 2.6vw, 3.75rem); line-height: 1; max-width: 14ch; }
.e-texto p { font-size: var(--s-entrada); max-width: 34ch; margin: 18px 0 0; color: #eeeff2; }
.e-texto .e-incluye { font-size: var(--s-nota); color: #c9cbd3; margin-top: 20px; }
.e-texto .e-incluye b { color: var(--voltio); font-weight: 650; }
.e-texto .acciones { margin-top: 28px; }
.e-objeto { display: grid; justify-items: center; gap: 16px; position: sticky; top: 100px; }
.e-ejemplo, .m-nota { margin: 0; font-size: var(--s-nota); color: #b3b6c2; text-align: center; }

/* El móvil dibujado. Dentro, todo se mide en cqi (1 % del ancho de la pantalla). */
.m-movil { --mw: clamp(250px, 21vw, 320px); width: var(--mw); aspect-ratio: 9 / 19.2; padding: calc(var(--mw) * 0.03); border-radius: calc(var(--mw) * 0.16); background: #1d1f27; outline: 1px solid rgba(255, 255, 255, 0.14); flex: none; }
.m-pantalla { --marca: #1e3a5f; container-type: inline-size; position: relative; height: 100%; border-radius: calc(var(--mw) * 0.13); overflow: hidden; background: #f6f4ef; color: #121318; font-family: var(--t-texto); }
.m-estado { position: relative; z-index: 3; height: 12cqi; display: flex; align-items: center; justify-content: space-between; padding: 0 9cqi; font: 650 4.2cqi/1 var(--t-texto); background: #f6f4ef; }
.m-estado i { position: absolute; left: 35cqi; top: 2.6cqi; width: 30cqi; height: 7.4cqi; border-radius: 4cqi; background: #000; }
.m-logo { display: grid; place-items: center; width: 10cqi; height: 10cqi; flex: none; border-radius: 2.6cqi; background: var(--marca); color: #fff; font: 700 3.8cqi/1 var(--t-titular); }
.m-busqueda { position: absolute; z-index: 2; inset: 12cqi 0 0; padding: 4cqi 5cqi; background: #fff; display: grid; gap: 3.4cqi; align-content: start; visibility: hidden; }
.m-barra-busca { display: flex; align-items: center; gap: 3cqi; height: 12cqi; padding: 0 4.4cqi; border-radius: 6cqi; background: #eef0f3; font-size: 4.4cqi; }
.m-barra-busca svg { width: 5cqi; height: 5cqi; flex: none; color: #4a4d57; }
.m-barra-busca span::after { content: ""; display: inline-block; width: 0.5cqi; height: 4.6cqi; margin-left: 0.4cqi; vertical-align: -0.6cqi; background: var(--marca); }
.m-resultado { display: grid; grid-template-columns: 10cqi minmax(0, 1fr); gap: 3cqi; align-items: center; padding: 3.4cqi; border-radius: 4cqi; background: #f3f2ee; }
.m-resultado b { display: block; font: 700 4.4cqi/1.15 var(--t-titular); letter-spacing: -0.02em; }
.m-resultado span { display: block; font-size: 3.5cqi; color: #4a4d57; margin-top: 0.8cqi; }
.m-tuyo { background: #fff; outline: 0.6cqi solid var(--marca); transform-origin: center; }
.m-gris > i { width: 10cqi; height: 10cqi; border-radius: 2.6cqi; background: #e2e0d9; }
.m-gris div i { display: block; height: 2.8cqi; border-radius: 2cqi; background: #e2e0d9; width: 80%; }
.m-gris div i + i { margin-top: 2cqi; width: 55%; }
.m-web { position: absolute; inset: 12cqi 0 0; overflow: hidden; }
.m-desliza { display: grid; gap: 3.4cqi; padding-bottom: 8cqi; }
.m-cab { display: flex; align-items: center; gap: 3cqi; padding: 2cqi 5cqi 0; }
.m-cab b { font: 700 4.6cqi/1 var(--t-titular); letter-spacing: -0.02em; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-hamb { margin-left: auto; display: grid; gap: 1.4cqi; }
.m-hamb i { display: block; width: 6cqi; height: 0.8cqi; background: #121318; }
.m-hero { transition: background-color 0.4s ease; position: relative; overflow: hidden; margin: 0 4cqi; min-height: 64cqi; padding: 6cqi 5cqi 5.4cqi; border-radius: 4cqi; background: var(--marca); color: #fff; display: grid; align-content: end; gap: 1.6cqi; }
.m-hero small { font-size: 3.5cqi; color: #d8e2ee; }
.m-hero strong { font: 700 8.6cqi/1 var(--t-titular); letter-spacing: -0.035em; max-width: 72%; }
.m-puerta { position: absolute; right: -2cqi; top: 7cqi; width: 40cqi; height: 30cqi; border: 1cqi solid rgba(255, 255, 255, 0.2); border-bottom: 0; display: grid; align-content: start; gap: 4.4cqi; padding: 4cqi 3cqi; }
.m-puerta i { display: block; height: 1cqi; background: rgba(255, 255, 255, 0.2); }
.m-botones { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4cqi; margin: 0 4cqi; }
.m-botones span { display: flex; align-items: center; justify-content: center; gap: 1.6cqi; height: 12cqi; border-radius: 3cqi; background: #e4e2db; font: 650 4.1cqi/1 var(--t-texto); }
.m-botones svg { width: 4.6cqi; height: 4.6cqi; }
.m-botones .m-wa { background: #176b3c; color: #fff; }
.m-servicios { margin: 0 4cqi; padding: 4.4cqi; border-radius: 4cqi; background: #fff; display: grid; gap: 2.2cqi; }
.m-servicios b { font: 700 4.6cqi/1 var(--t-titular); }
.m-servicios span { font-size: 3.8cqi; padding-left: 4cqi; position: relative; }
.m-servicios span::before { content: ""; position: absolute; left: 0; top: 1.5cqi; width: 1.8cqi; height: 1.8cqi; border-radius: 50%; background: #e2572b; }
.m-mapa { position: relative; margin: 0 4cqi; border-radius: 4cqi; overflow: hidden; }
.m-mapa svg { width: 100%; height: auto; }
.m-mapa span { position: absolute; left: 3cqi; bottom: 3cqi; padding: 1.6cqi 3cqi; border-radius: 2cqi; background: #fff; font: 650 3.6cqi/1 var(--t-texto); }
.m-resena { margin: 0 4cqi; padding: 5cqi; border-radius: 4cqi; background: #fff3d6; display: grid; gap: 3cqi; }
.m-resena b { font: 700 5cqi/1.05 var(--t-titular); letter-spacing: -0.02em; color: var(--marca); }
.m-resena span { padding: 3cqi; border-radius: 3cqi; background: var(--marca); color: #fff; text-align: center; font: 650 3.8cqi/1.2 var(--t-texto); }

/* Las tarjetas que salen del móvil */
.t-tarjeta { width: min(100%, 280px); background: #fff; color: #121318; border-radius: 16px; padding: 14px; font-size: 1rem; }
.t-tarjeta p { margin: 0; }
.t-chat-cab { display: flex; align-items: center; gap: 8px; }
.t-chat-cab svg { width: 22px; height: 22px; color: #1f8f4e; }
.t-chat-cab b { font-weight: 650; }
.t-tarjeta .t-burbuja { margin-top: 10px; background: #e3f5e8; padding: 10px 12px; border-radius: 14px 14px 14px 4px; line-height: 1.35; }
.t-mapa svg { width: 100%; height: auto; border-radius: 10px; }
.t-tarjeta.t-mapa p { margin-top: 10px; }
.t-mapa b, .t-qr b { display: block; font-weight: 650; line-height: 1.25; }
.t-mapa span, .t-qr span { display: block; color: #4a4d57; }
.t-qr { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; align-items: center; }
.m-qr { width: 76px; height: 76px; }

@media (max-width: 899px) {
  .e-pin { grid-template-columns: minmax(0, 1fr); }
  .e-textos { display: contents; }
  .e-hero { order: 0; }
  .e-objeto { order: 1; position: static; }
  .e-textos > .e-texto:not(.e-hero) { order: 3; }
}

/* Con movimiento: el escenario se queda fijo y la escena se recorre con el scroll */
.montaje.viva { height: 500svh; padding: 0; }
.viva .e-pin { position: sticky; top: var(--alto-cab); height: calc(100svh - var(--alto-cab)); width: auto; margin: 0; display: block; overflow: hidden; }
.viva .e-fondo { display: block; position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.e-fantasma { position: absolute; right: -3vw; top: 34%; font: 800 min(70vh, 46vw)/0.8 var(--t-titular); letter-spacing: -0.06em; color: transparent; -webkit-text-stroke: 1.5px rgba(244, 243, 239, 0.08); will-change: transform; white-space: nowrap; }
.e-fantasma span { -webkit-text-stroke-color: rgba(255, 122, 110, 0.22); }
.viva .e-textos { display: block; position: absolute; z-index: 4; top: 0; bottom: 0; left: max(var(--margen), calc((100% - var(--ancho)) / 2)); width: min(56vw, 840px); pointer-events: none; }
.viva .e-texto { position: absolute; left: 0; right: 0; top: calc(50% - 26px); translate: 0 -50%; opacity: 0; transform: translateY(18px); transition: opacity 0.18s ease, transform 0.18s ease; will-change: transform, opacity; }
/* El que entra espera a que el que sale casi haya desaparecido: el solape dura un instante y nunca se queda. */
.viva .e-texto.activo { opacity: 1; transform: none; transition: opacity 0.4s ease 0.14s, transform 0.55s var(--ease-out) 0.14s; }
.viva .e-texto:not(.e-hero) { right: auto; width: min(38vw, 540px); }

.viva .e-texto.activo a, .viva .e-texto.activo button { pointer-events: auto; }
.viva .e-objeto { position: absolute; inset: 0 0 52px; display: block; pointer-events: none; } /* sin z-index: la franja (z 4) tapa el teléfono y el aviso (z 5) queda encima */
/* La franja de abajo tapa lo que asoma del teléfono y lleva «Saltar la animación» y el aviso del ejemplo. */
.viva .e-pin::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 52px; background: var(--noche); z-index: 4; }
.viva .m-movil { position: absolute; left: 50%; top: 50%; margin: calc(var(--mw) * -1.0667) 0 0 calc(var(--mw) * -0.5); will-change: transform; transform-origin: center; }
.viva .t-tarjeta { position: absolute; left: 50%; top: 50%; width: clamp(200px, 16vw, 250px); margin: 0; opacity: 0; visibility: hidden; will-change: transform, opacity; }
.viva .m-busqueda { visibility: visible; transform: translateX(104%); will-change: transform; }
.viva .m-desliza, .viva [data-m-pieza] { will-change: transform, opacity; }
.viva .e-ejemplo { position: absolute; z-index: 5; right: var(--margen); bottom: -52px; height: 52px; display: flex; align-items: center; margin: 0; }
.viva .e-saltar { display: flex; align-items: center; position: absolute; z-index: 6; left: var(--margen); bottom: 0; height: 52px; color: #eeeff2; font-size: var(--s-nota); font-weight: 600; text-underline-offset: 0.25em; }
.viva .e-saltar:hover { color: #fff; }
.viva .e-progreso { display: block; position: absolute; z-index: 5; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, 0.08); }
.e-progreso i { display: block; height: 100%; background: var(--voltio); transform: scaleX(0); transform-origin: left; }
.m-wa.latido { animation: latido 1.2s var(--ease-out) infinite; }
@keyframes latido { 0% { outline: 0 solid rgba(31, 143, 78, 0.55); } 100% { outline: 4cqi solid rgba(31, 143, 78, 0); } }
@media (max-width: 899px) {
  .montaje.viva { height: 440svh; }
  .viva .e-textos { left: var(--margen); right: var(--margen); width: auto; }
  .viva .e-texto, .viva .e-texto:not(.e-hero) { top: 20px; translate: none; width: auto; right: 0; }
  .viva .e-ejemplo-largo { display: none; }
  .viva .e-texto h2 { font-size: clamp(1.75rem, 7.6vw, 2.5rem); }
  .viva .e-texto p { font-size: var(--s-texto); margin-top: 10px; }
  .viva .e-texto .e-incluye { margin-top: 10px; }
  .viva .e-hero .entradilla { margin: 16px 0 20px; font-size: var(--s-texto); }
  .viva .e-hero .precio-linea { margin-top: 16px; }
  .viva .t-tarjeta { width: 210px; padding: 12px; }
}

/* Cabeceras interiores: el mismo móvil, ya montado */
.cabecera-movil { display: grid; justify-items: center; }
.cabecera-movil .m-movil { --mw: clamp(230px, 22vw, 300px); }
.cabecera-movil { gap: 14px; }
@media (max-width: 900px) { .cabecera-movil { display: none; } }
.tras-lineas { margin-top: clamp(40px, 5vw, 72px); margin-bottom: clamp(32px, 5vw, 72px); }

/* La prueba y el contacto usan el mismo móvil, que cambia con lo que escribes */
.prueba-movil { margin: 0; display: grid; justify-items: center; }
.prueba-movil .m-movil, .lateral-telefono .m-movil { --mw: clamp(250px, 24vw, 310px); }
.lateral-telefono { margin: 0; display: grid; justify-items: start; }
.ejemplos button[aria-pressed="true"] { background: var(--tinta); color: var(--fondo); }

/* ---------- Precios: tres opciones, la recomendada destacada ---------- */
.planes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: clamp(40px, 5vw, 64px); align-items: start; }
.plan { background: var(--porcelana); color: var(--noche); padding: clamp(24px, 2.6vw, 36px); display: grid; gap: 14px; align-content: start; }
.plan h3 { font-size: var(--s-medio); color: inherit; }
.plan-recomendado { background: var(--noche); color: #f4f3ef; }
.plan-recomendado h3 { color: #f4f3ef; }
.plan-precio .plan-marca { display: inline-block; margin: 0 0 0 auto; padding: 4px 10px; letter-spacing: 0; font-family: var(--t-texto); background: var(--voltio); color: var(--noche); font-weight: 650; font-size: var(--s-nota); }
.plan-precio { margin: 0; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.plan-precio b { font: 700 var(--s-titulo)/1 var(--t-titular); letter-spacing: -0.03em; }
.plan-precio span { font-size: var(--s-nota); }
.plan-texto { margin: 0; }
.plan .boton { width: 100%; }
.campo-precio .boton-linea { background: transparent; color: var(--noche); }
.campo-precio .boton-linea:hover { background: var(--noche); color: var(--porcelana); }
.plan-lista ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.plan-lista li { position: relative; padding-left: 20px; line-height: 1.4; }
.plan-lista li::before { content: "/"; position: absolute; left: 0; font-weight: 700; }
.plan-lista h4 { margin: 18px 0 8px; font: 650 1rem/1.3 var(--t-texto); }
.plan-lista h4:first-child { margin-top: 4px; }
.plan-recomendado .plan-lista li::before { color: var(--voltio); }
@media (max-width: 960px) {
  .planes { grid-template-columns: minmax(0, 1fr); }
  .plan-recomendado { order: -1; }
}

/* ---------- ¿Qué negocio tienes? ---------- */
.negocios { list-style: none; margin: clamp(40px, 5vw, 64px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.negocios a { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 14px 18px; background: var(--tono); color: var(--tinta); text-decoration: none; font-weight: 600; transition: background-color 0.2s ease, transform 0.16s var(--ease-out); }
.negocios a:hover { background: var(--tono-2); }
.negocios a:active { transform: scale(0.98); }
.negocio-punto { flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--c, var(--tinta)); }
.negocios a .flecha { margin-left: auto; width: 16px; height: 16px; flex: none; }
@media (max-width: 1000px) { .negocios { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .negocios { grid-template-columns: minmax(0, 1fr); } }
.ejemplos-todos { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; font-weight: 600; font-size: var(--s-nota); text-underline-offset: 0.25em; }

/* El logo dentro del resultado de búsqueda: no hereda el gris ni el tamaño de la línea de texto. */
.m-resultado .m-logo { display: grid; color: #fff; margin-top: 0; font-size: 3.8cqi; }