/* ==========================================================================
   Disco Mad · hoja de estilos de la web pública

   Sustituye a Skel (2015). Sin framework: son unos pocos componentes y no
   compensa cargar 200 KB para usar el 5%.

   Estructura: barra superior oscura, resto claro, y en las páginas de
   catálogo un árbol de categorías a la izquierda con la rejilla de productos
   a la derecha.

   El rojo está sacado del propio logo (#FF1C42). Para botones y enlaces se
   usa un tono algo más oscuro porque el de marca, sobre blanco, no llega al
   contraste mínimo para leerse con comodidad.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tipografía · Hanken Grotesk

   Una grotesca de la familia de la Helvetica, pero con remates algo más
   cálidos: se lee igual de limpia y con un punto más de carácter.

   Autoalojada, NO desde Google Fonts: cargarla desde Google llamaría a sus
   servidores en cada visita (petición extra y datos del visitante sin
   consentimiento). Así se sirve desde nuestro propio dominio.

   Es una fuente VARIABLE: un solo fichero cubre del grosor 400 al 800, en vez
   de cuatro ficheros. Y `font-display: swap` hace que el texto se vea al
   instante con la fuente de reserva y cambie a esta cuando cargue, sin
   bloquear el pintado. El grueso del español entra en la subset "latin"
   (33 KB); la "latin-ext" solo se descarga si aparece algún carácter raro.
   -------------------------------------------------------------------------- */
@font-face {
    font-family: 'Hanken Grotesk';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('/fonts/hanken-grotesk-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
        U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
        U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Hanken Grotesk';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('/fonts/hanken-grotesk-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
        U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
        U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
        U+A720-A7FF;
}

:root {
    --marca:         #ff1c42;
    --accion:        #d10030;
    --accion-oscura: #a30026;
    --accion-suave:  #fff0f3;

    --barra:         #141013;
    --barra-alta:    #1f1a1d;

    --tinta:         #1a1416;
    --tinta-media:   #5c5257;
    --tinta-suave:   #746a6e;   /* era #867c80, que sobre blanco daba 4,03:1; así llega a 5,2:1 (mínimo 4,5) */
    --linea:         #e6e1e3;
    --linea-suave:   #f0ecee;
    --fondo:         #ffffff;
    --fondo-alt:     #f7f5f6;
    --punto:         rgba(20, 16, 19, .085);  /* retícula de puntos del fondo del catálogo */

    --exito:  #067a4a;
    --aviso:  #8a5a00;

    /* Hanken Grotesk delante; detrás, la misma pila de antes: mientras la
       fuente carga (y si fallara), el texto se ve como hasta ahora. */
    --tipo: "Hanken Grotesk", "Helvetica Neue", Helvetica, Arial, system-ui, -apple-system, sans-serif;
    --radio: 10px;
    --radio-s: 6px;
    --sombra: 0 1px 3px rgba(26, 20, 22, .07), 0 6px 20px rgba(26, 20, 22, .05);
    --sombra-alta: 0 4px 12px rgba(26, 20, 22, .1), 0 16px 40px rgba(26, 20, 22, .08);
    --ancho: 1320px;
}

*, *::before, *::after { box-sizing: border-box; }

/* El atributo hidden tiene que ganar siempre. Sin esto, cualquier regla de
   clase con display lo anula, y un elemento "oculto" se queda tapando la
   pantalla e interceptando los clics: fue justo lo que pasó con el velo del
   menú. */
[hidden] { display: none !important; }

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

body {
    margin: 0;
    background-color: var(--fondo);
    /* Retícula de puntos muy tenue bajo todo el catálogo. Las páginas de Eventos
       y las landings reponen el fondo plano en eventos.css. Fija para que no
       "baile" con el scroll; es una sola capa barata, también en móvil. */
    background-image: radial-gradient(var(--punto) 1px, transparent 1.5px);
    background-size: 22px 22px;
    background-attachment: fixed;
    color: var(--tinta);
    font-family: var(--tipo);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--accion); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.2; text-wrap: balance; font-weight: 700; }
h1 { font-size: clamp(28px, 4vw, 42px); letter-spacing: -.02em; }
h2 { font-size: clamp(21px, 2.6vw, 29px); letter-spacing: -.015em; }
h3 { font-size: clamp(17px, 2vw, 21px); }
h4 { font-size: 17px; }
p  { margin: 0 0 1em; }

:focus-visible { outline: 3px solid var(--accion); outline-offset: 2px; border-radius: 3px; }

.contenedor { max-width: var(--ancho); margin: 0 auto; padding: 0 20px; }

.salta {
    position: absolute; left: -9999px; top: 0; z-index: 100;
    background: var(--accion); color: #fff; padding: 12px 20px;
}
.salta:focus { left: 0; }

/* ==========================================================================
   Barra superior
   ========================================================================== */
.barra {
    position: sticky; top: 0; z-index: 50;
    box-shadow: 0 1px 0 rgba(255,255,255,.07);
}
/* Fondo de la barra. Arriba del todo es opaca (sobre el blanco de la página
   la transparencia se quedaba en un gris pobre); en cuanto se hace scroll pasa
   a un poco transparente y se intuye lo que pasa por debajo. La clase
   .barra--flota la pone web.js con un IntersectionObserver, sin escuchar el
   scroll. Solo transparencia, SIN desenfoque (backdrop-filter): el desenfoque
   obliga a recalcular la franja en cada fotograma y en móviles modestos se
   nota; la transparencia sola no cuesta nada. Sin JavaScript, queda opaca. */
.barra::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: var(--barra); transition: background-color .25s;
}
.barra--flota::before { background: rgba(20, 16, 19, .88); }
.barra-centinela { position: absolute; top: 0; left: 0; width: 1px; height: 12px; pointer-events: none; }
.barra__interior {
    max-width: var(--ancho); margin: 0 auto; padding: 0 20px;
    display: flex; align-items: center; gap: 24px; min-height: 68px;
}
.barra__logo { flex-shrink: 0; display: block; padding: 10px 0; }
.barra__logo img { width: 158px; height: auto; }

.barra__abrir {
    margin-left: auto; gap: 8px;
    font-family: var(--tipo); font-size: 13px;
}
.barra__abrir span {
    display: block; width: 21px; height: 2px; background: #fff; border-radius: 2px;
    transition: transform .2s, opacity .2s;
}
.barra__abrir span + span { margin-top: 5px; }
.barra__abrir em { font-style: normal; font-weight: 600; letter-spacing: .04em; }
.barra__abrir[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.barra__abrir[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.barra__abrir[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav { margin-left: auto; display: flex; align-items: center; gap: 26px; }
.nav__lista { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; }
.nav__item { position: relative; }
.nav__item > a {
    display: flex; align-items: center; gap: 6px;
    color: #fff; padding: 10px 13px; border-radius: var(--radio-s);
    font-size: 14.5px; font-weight: 600; white-space: nowrap;
}
.nav__item > a:hover { background: var(--barra-alta); text-decoration: none; }
.nav__item > a[aria-current="page"] { color: var(--marca); }

.nav__submenu {
    list-style: none; margin: 0; padding: 8px;
    position: absolute; top: calc(100% + 6px); left: 0; min-width: 265px;
    background: #fff; border-radius: var(--radio); box-shadow: var(--sombra-alta);
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity .15s, transform .15s, visibility .15s;
}
.nav__item--desplegable:hover .nav__submenu,
.nav__item--desplegable:focus-within .nav__submenu {
    opacity: 1; visibility: visible; transform: none;
}
.nav__submenu a {
    display: block; padding: 9px 13px; border-radius: var(--radio-s);
    color: var(--tinta); font-size: 14.5px; font-weight: 500;
}
.nav__submenu a:hover { background: var(--fondo-alt); color: var(--accion); text-decoration: none; }
.nav__submenu a[aria-current="page"] { color: var(--accion); font-weight: 700; }

.nav__contacto { display: flex; gap: 10px; }

/* Fondo --accion y no --marca: con el rojo vivo el texto blanco se quedaba en
   3,8:1; con este llega a 5,6:1 (el mínimo legible es 4,5). Lo mismo en el resto
   de botones y etiquetas con letra blanca sobre rojo. */
.boton--llamar {
    background: var(--accion); color: #fff; font-weight: 700; white-space: nowrap;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 18px; border-radius: 999px; font-size: 15px;
}
.boton--llamar:hover { background: #fff; color: var(--barra); text-decoration: none; }

/* ==========================================================================
   Botones
   ========================================================================== */
.boton {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 22px; border-radius: var(--radio-s); border: 2px solid transparent;
    font-family: var(--tipo); font-size: 15px; font-weight: 700; cursor: pointer;
    transition: background .16s, color .16s, border-color .16s;
    text-align: center;
}
.boton:hover { text-decoration: none; }
.boton--principal { background: var(--accion); color: #fff; }
.boton--principal:hover { background: var(--accion-oscura); color: #fff; }
.boton--linea { border-color: var(--linea); color: var(--tinta); background: #fff; }
.boton--linea:hover { border-color: var(--tinta); color: var(--tinta); }
.boton--pequeno { padding: 9px 15px; font-size: 14px; }
.boton--ancho { width: 100%; }
.boton[disabled] { opacity: .5; cursor: not-allowed; }

/* ==========================================================================
   Migas de pan
   ========================================================================== */
.migas { background: var(--fondo-alt); border-bottom: 1px solid var(--linea); font-size: 13.5px; }
.migas ol {
    list-style: none; margin: 0; padding: 11px 0; display: flex; gap: 8px;
    flex-wrap: wrap; color: var(--tinta-suave);
}
.migas li + li::before { content: "›"; margin-right: 8px; color: var(--tinta-suave); }
.migas a { color: var(--tinta-media); }
.migas [aria-current] { color: var(--tinta); font-weight: 600; }

/* ==========================================================================
   Portadilla de categoría
   ========================================================================== */
.portadilla { padding: 28px 0 24px; }
.portadilla__rejilla {
    display: grid; grid-template-columns: 1.15fr .85fr; gap: 44px; align-items: center;
}
.portadilla__subtitulo {
    font-size: clamp(16px, 1.9vw, 19px); color: var(--accion);
    font-weight: 700; margin: -.2em 0 .7em;
}
.portadilla__intro { color: var(--tinta-media); font-size: 16.5px; max-width: 62ch; }
.portadilla__extra {
    font-size: 16px; color: var(--tinta-media); font-weight: 600;
    margin: 0 0 .45em;
}
.portadilla__acciones { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; }
.portadilla__foto img {
    border-radius: var(--radio); box-shadow: var(--sombra);
    width: 100%; display: block;
    /* La cabecera queda compacta y uniforme en todas las categorías: la foto
       se encaja en 4:3 (algunas, como conferencia, venían cuadradas y estiraban
       el bloque a lo alto). */
    aspect-ratio: 4 / 3; object-fit: cover;
}

/* ==========================================================================
   Catálogo: árbol lateral + rejilla
   ========================================================================== */
.catalogo { padding: 8px 0 20px; }
.catalogo__rejilla {
    display: grid; grid-template-columns: 246px minmax(0, 1fr); gap: 34px;
    align-items: start;
}

.arbol {
    position: sticky; top: 88px;
    border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden;
    background: #fff;
}
.arbol__titulo {
    margin: 0; padding: 13px 17px; font-size: 13px; font-weight: 800;
    letter-spacing: .07em; text-transform: uppercase;
    background: var(--fondo-alt); border-bottom: 1px solid var(--linea);
    color: var(--tinta-media);
}
.arbol__lista { list-style: none; margin: 0; padding: 6px; }
.arbol__lista li + li { margin-top: 1px; }
.arbol__lista a {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 10px 12px; border-radius: var(--radio-s);
    color: var(--tinta); font-size: 14.5px; font-weight: 500;
}
.arbol__lista a:hover { background: var(--fondo-alt); color: var(--accion); text-decoration: none; }
.arbol__lista a[aria-current="page"] {
    background: var(--accion-suave); color: var(--accion); font-weight: 700;
}
.arbol__cuenta {
    font-size: 12px; color: var(--tinta-suave); font-variant-numeric: tabular-nums;
    background: var(--fondo-alt); border-radius: 999px; padding: 1px 8px; flex-shrink: 0;
}
.arbol__lista a[aria-current="page"] .arbol__cuenta { background: #fff; color: var(--accion); }
.arbol__sublista { list-style: none; margin: 2px 0 2px 12px; padding: 0 0 0 10px;
                   border-left: 2px solid var(--linea-suave); }
.arbol__sublista a { font-size: 13.5px; padding: 7px 10px; }

.arbol__abrir { display: none; }

/* --- barra de filtros --- */
.filtros {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    padding: 0 0 18px; border-bottom: 1px solid var(--linea); margin-bottom: 22px;
}
.filtros__cuenta { font-size: 14px; color: var(--tinta-media); }
.filtros__cuenta strong { color: var(--tinta); }
.filtros__orden { margin-left: auto; display: flex; align-items: center; gap: 9px; font-size: 14px; }
.filtros select {
    appearance: none; -webkit-appearance: none;
    font-family: var(--tipo); font-size: 14px; padding: 8px 34px 8px 13px; color: var(--tinta);
    border: 1px solid var(--linea); border-radius: var(--radio-s); background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23777' stroke-width='1.6' stroke-linecap='round' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center;
    cursor: pointer; transition: border-color .15s, box-shadow .15s;
}
.filtros select:hover { border-color: var(--tinta-suave); }
.filtros select:focus { outline: none; border-color: var(--accion); box-shadow: 0 0 0 3px var(--accion-suave); }

/* La rejilla de productos se define más abajo como flexbox (busca
   ".rejilla-productos" en la sección de rejillas). Aquí había además una
   definición en grid que no llegaba a aplicarse nunca —el flex posterior la
   pisa y grid-template-columns no hace nada sobre un flex—, así que se quitó
   para no confundir a quien la edite. */

.tarjeta {
    display: flex; flex-direction: column;
    border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden;
    background: #fff; transition: border-color .16s, box-shadow .16s, transform .16s;
}
.tarjeta:hover { border-color: var(--tinta-suave); box-shadow: var(--sombra); transform: translateY(-2px); }

.tarjeta__seo {
    margin: 0 0 -4px; padding: 0; font-size: 10.5px; font-weight: 800;
    text-transform: uppercase; letter-spacing: .07em; line-height: 1.3;
    color: var(--tinta-suave);
}
.tarjeta__foto {
    display: block; position: relative; aspect-ratio: 4 / 3; background: #fff; padding: 14px;
    border-bottom: 1px solid var(--linea-suave);
}
.tarjeta__foto img { width: 100%; height: 100%; object-fit: contain; }
.tarjeta__sinfoto { display: block; width: 100%; height: 100%; background: var(--fondo-alt); }

/* Badge/distintivo de producto (p.ej. "Con batería"). Genérico y reutilizable. */
.etiqueta-badge {
    display: inline-flex; align-items: center; gap: 5px;
    background: var(--tinta); color: #fff;
    font-size: 12px; font-weight: 700; line-height: 1; white-space: nowrap;
    padding: 5px 10px; border-radius: 999px; letter-spacing: .01em;
}
.tarjeta__badge { position: absolute; top: 8px; left: 8px; z-index: 2; box-shadow: 0 1px 4px rgba(0,0,0,.18); }
.ficha__etiquetas { margin: 0 0 14px; }

/* Lightbox: ampliar la foto de la ficha a pantalla completa (lo crea web.js) */
.lightbox {
    position: fixed; inset: 0; z-index: 1000;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 14px; padding: 24px; background: rgba(0, 0, 0, .88); cursor: zoom-out;
    overflow: hidden;
}
.lightbox__grande {
    max-width: 96vw; max-height: 84vh; object-fit: contain;
    border-radius: var(--radio-s); background: #fff; box-shadow: 0 10px 40px rgba(0, 0, 0, .5);
    cursor: zoom-in; transition: transform .2s ease-out; user-select: none; -webkit-user-drag: none;
}
/* Zoom: un toque amplía hacia donde se ha tocado; arrastrando se recorre la
   foto y otro toque la devuelve a su tamaño. */
.lightbox__grande.ampliada { transform: scale(2.5); cursor: zoom-out; touch-action: none; }
.lightbox__grande.arrastrando { transition: none; cursor: grabbing; }
.lightbox__cerrar, .lightbox__tiras { z-index: 2; }
.lightbox__pista { margin: 0; font-size: 12.5px; color: rgba(255,255,255,.62); z-index: 2; pointer-events: none; }
.lightbox__cerrar {
    position: absolute; top: 14px; right: 18px; width: 44px; height: 44px;
    border: 0; border-radius: 999px; background: rgba(255, 255, 255, .14);
    color: #fff; font-size: 30px; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.lightbox__cerrar:hover { background: rgba(255, 255, 255, .28); }
/* Tira de miniaturas dentro de la ampliación (solo si el producto tiene varias
   fotos): se pintan desde web.js. */
.lightbox__tiras { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; max-width: 96vw; }
.lightbox__tira {
    width: 66px; height: 50px; padding: 0; flex: 0 0 auto;
    border: 2px solid transparent; border-radius: var(--radio-s);
    overflow: hidden; background: #fff; cursor: pointer;
    opacity: .55; transition: opacity .15s, border-color .15s;
}
.lightbox__tira img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lightbox__tira:hover { opacity: .85; }
.lightbox__tira.activa { opacity: 1; border-color: #fff; }

.tarjeta__cuerpo { padding: 15px 16px 17px; display: flex; flex-direction: column; flex: 1; gap: 9px; }
.tarjeta__nombre { margin: 0; font-size: 15.5px; line-height: 1.35; font-weight: 700; }
.tarjeta__nombre a { color: var(--tinta); }
.tarjeta__nombre a:hover { color: var(--accion); text-decoration: none; }
.tarjeta__descripcion {
    margin: 0; font-size: 13.5px; color: var(--tinta-media); line-height: 1.5;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    line-clamp: 3; overflow: hidden;
}
.tarjeta__pie { margin-top: auto; padding-top: 12px; display: flex; }
.tarjeta__precio { display: flex; flex-direction: column; line-height: 1.15; }
.tarjeta__precio-valor {
    font-size: 25px; font-weight: 800; color: var(--tinta); letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}
.tarjeta__precio-unidad { font-size: 12px; color: var(--tinta-suave); margin-top: 3px; }

.disponible { font-size: 12.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.disponible::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.disponible--si { color: var(--exito); }
.disponible--pocas { color: var(--aviso); }

/* --- nota y tarifas dentro de la ficha --- */
.tarifas { margin: 0; padding: 0; }
.tarifas__fila {
    display: flex; justify-content: space-between; gap: 14px;
    padding: 8px 0; border-bottom: 1px solid var(--linea-suave); font-size: 14.5px;
}
.tarifas__fila:last-child { border-bottom: 0; }
.tarifas dt { color: var(--tinta-media); margin: 0; }
.tarifas dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tarifas__fila--destacada dd { color: var(--accion); font-size: 17px; }

/* Dentro de la tarjeta van más apretadas: son un dato de apoyo, no el
   protagonista. El precio grande sigue siendo el que manda. */
.tarifas--tarjeta { font-size: 12.5px; margin-top: 2px; }
.tarifas--tarjeta .tarifas__fila { padding: 5px 0; font-size: 12.5px; }
.tarifas--tarjeta dt { color: var(--tinta-suave); }
.tarifas--tarjeta dd { font-weight: 600; color: var(--tinta-media); }
.tarjeta__nota { margin: 0; font-size: 12px; color: var(--tinta-suave); line-height: 1.45; }

/* ==========================================================================
   Ficha de producto
   ========================================================================== */
.ficha { padding: 32px 0 12px; }
.ficha__rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: 46px; align-items: start; }
.ficha__principal {
    margin: 0; position: relative; border: 1px solid var(--linea); border-radius: var(--radio);
    padding: 24px; background: #fff;
}
.ficha__principal img { width: 100%; height: auto; object-fit: contain; max-height: 460px; }
/* Pista de "ampliar" (lupa) siempre visible en la esquina de la foto */
.ficha__zoom {
    position: absolute; right: 12px; bottom: 12px; width: 38px; height: 38px;
    display: flex; align-items: center; justify-content: center; border-radius: 999px;
    background: rgba(20, 17, 16, .72); color: #fff; pointer-events: none;
    transition: background .16s, transform .16s;
}
.ficha__principal:hover .ficha__zoom { background: var(--accion); transform: scale(1.06); }
.ficha__miniaturas { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.miniatura {
    width: 74px; height: 60px; padding: 5px; cursor: pointer; background: #fff;
    border: 1px solid var(--linea); border-radius: var(--radio-s);
}
.miniatura img { width: 100%; height: 100%; object-fit: contain; }
.miniatura.activa { border-color: var(--accion); }

.ficha__categoria { font-size: 13.5px; margin: 0 0 8px; }
.ficha__marca { font-size: 14px; color: var(--tinta-suave); margin: -.4em 0 1em; font-weight: 600; }
.ficha__precio { display: flex; align-items: baseline; gap: 11px; flex-wrap: wrap; margin: 0 0 4px; }
.ficha__precio-valor {
    font-size: 38px; font-weight: 800; color: var(--accion); letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
}
.ficha__precio-unidad { font-size: 14px; color: var(--tinta-suave); }
/* La base sin IVA, para el cliente de empresa. Discreta, bajo el precio final. */
.ficha__precio-base {
    margin: 0 0 18px; font-size: 13.5px; color: var(--tinta-suave);
    font-variant-numeric: tabular-nums;
}
.ficha__texto { color: var(--tinta-media); }
.ficha__subtitulo { font-size: 17px; margin: 26px 0 10px; }
.ficha__nota {
    font-size: 13.5px; color: var(--tinta-media); background: var(--fondo-alt);
    padding: 11px 15px; border-radius: var(--radio-s); margin: 14px 0 0;
}
.ficha__acciones { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }

.specs { width: 100%; border-collapse: collapse; margin: 10px 0 0; font-size: 14.5px; }
.specs th, .specs td { text-align: left; padding: 10px 0; border-bottom: 1px solid var(--linea-suave); }
.specs th { color: var(--tinta-media); font-weight: 500; width: 42%; }
.specs td { font-weight: 600; }

/* ==========================================================================
   Relacionados
   ========================================================================== */
.relacionados { padding: 40px 0; border-top: 1px solid var(--linea); margin-top: 40px; }
.relacionados__rejilla {
    display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.relacionado {
    display: flex; flex-direction: column; gap: 8px; padding: 14px;
    border: 1px solid var(--linea); border-radius: var(--radio); color: var(--tinta);
}
.relacionado:hover { border-color: var(--tinta-suave); text-decoration: none; }
.relacionado img { width: 100%; aspect-ratio: 4/3; object-fit: contain; }
.relacionado__nombre { font-size: 13.5px; font-weight: 600; line-height: 1.35; }
.relacionado__precio { font-size: 15px; font-weight: 800; color: var(--accion); }
.relacionados__todo { margin: 26px 0 0; text-align: center; }

/* ==========================================================================
   Cuerpo de las páginas de contenido
   ========================================================================== */
.cuerpo { padding: 10px 0 30px; }
.cuerpo .bloque {
    display: grid; grid-template-columns: 1fr 1fr; align-items: center;
}
.cuerpo .bloque figure { margin: 0; }
.cuerpo .bloque figure img { border-radius: var(--radio); width: 100%; }
.cuerpo .prosa > *:first-child { margin-top: 0; }
.cuerpo .prosa p { color: var(--tinta-media); }
.cuerpo .prosa ul { padding-left: 20px; color: var(--tinta-media); }
.cuerpo .prosa li { margin-bottom: 6px; }

.cuerpo .prosa .titulo { font-weight: 700; color: var(--tinta); font-size: 17px; }
.cuerpo .prosa .enlace a {
    display: inline-flex; padding: 11px 20px; border: 2px solid var(--linea);
    border-radius: var(--radio-s); color: var(--tinta); font-weight: 700; font-size: 15px;
}
.cuerpo .prosa .enlace a:hover { border-color: var(--tinta); text-decoration: none; }

.bloque--galeria { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.bloque--galeria figure img { aspect-ratio: 4/3; object-fit: cover; }

.video { position: relative; aspect-ratio: 16/9; border-radius: var(--radio); overflow: hidden;
         background: var(--fondo-alt); }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video__poster { width: 100%; height: 100%; object-fit: cover; }
.video__play {
    position: absolute; inset: 0; display: grid; place-items: center; border: 0;
    background: rgba(20,16,19,.35); cursor: pointer; color: #fff;
}
.video__play span {
    width: 66px; height: 66px; border-radius: 50%; background: var(--accion);
    display: grid; place-items: center; font-size: 21px;
}

/* ==========================================================================
   Ventajas
   ========================================================================== */

/* ==========================================================================
   Contacto
   ========================================================================== */

.contacto__rejilla { display: grid; }
.contacto__texto h2 { margin-bottom: .35em; }
.contacto__texto > p { color: var(--tinta-media); max-width: 46ch; }

.contacto__datos li a:hover { background: var(--fondo-alt); color: var(--accion); }
.contacto__datos strong { font-size: 16px; font-weight: 700; }
.contacto__datos span { font-size: 13px; color: var(--tinta-suave); }

.formulario__fila { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.campo { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.campo label { font-size: 13.5px; font-weight: 700; }
.campo input, .campo textarea, .campo select {
    font-family: var(--tipo); font-size: 15.5px; padding: 12px 14px; color: var(--tinta);
    background: #fff; border: 1px solid var(--linea); border-radius: var(--radio-s);
    width: 100%;
}
.campo textarea { resize: vertical; min-height: 108px; line-height: 1.5; }
.campo input:focus, .campo textarea:focus { border-color: var(--accion); outline: none;
    box-shadow: 0 0 0 3px rgba(209,0,48,.12); }
.campo__error { font-size: 13px; color: var(--accion); min-height: 1em; font-weight: 600; }
.campo--mal input, .campo--mal textarea { border-color: var(--accion); }
/* --tinta-media, no --tinta-suave: el gris suave sobre blanco daba 4,03:1, por
   debajo del mínimo legible (4,5). Con el medio sube a ~7,5:1. */
.formulario__aviso { font-size: 12.5px; color: var(--tinta-media); margin: 12px 0 0; text-align: center; }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.aviso-form {
    padding: 14px 18px; border-radius: var(--radio-s); margin-bottom: 20px; font-weight: 600;
    border-left: 4px solid;
}
.aviso-form--ok { background: #e9f7f0; border-color: var(--exito); color: #075c39; }
.aviso-form--error { background: var(--accion-suave); border-color: var(--accion); color: var(--accion-oscura); }

/* ==========================================================================
   Pie
   ========================================================================== */
.pie { background: var(--barra); color: #b9b0b4; margin-top: 0; padding-top: 50px; font-size: 14.5px; }
.pie__rejilla {
    display: grid; gap: 38px; grid-template-columns: 1.4fr 1fr 1fr 1fr; padding-bottom: 42px;
}
/* El PNG del logo trae un 10 % de margen transparente a la izquierda: sin
   compensarlo, el logo quedaba 17 px más adentro que los textos y los títulos
   del pie. Con el margen negativo todo arranca en la misma vertical. */
.pie__marca img { width: 168px; margin: 0 0 15px -17px; }
.pie__marca p { color: #8e8489; max-width: 34ch; font-size: 14px; }
/* Enlaces a la empresa hermana. El párrafo sigue siendo discreto, pero los
   enlaces tienen que reconocerse como tales (antes eran casi del mismo gris
   que el texto y nadie sabía que se podían pulsar): más claros, subrayados y
   con el interlineado justo para acertar con el dedo. */
.pie__hermana { margin-top: 14px; font-size: 13.5px; color: #8e8489; line-height: 1.85; }
.pie__hermana a { color: #e6dfe2; font-weight: 600; text-decoration: underline;
    text-decoration-color: var(--marca); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.pie__hermana a:hover { color: #fff; text-decoration-color: #fff; }
.pie__bloque h2 { font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
                  color: #fff; margin-bottom: 14px; }
.pie__bloque ul { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.pie__bloque a { color: #b9b0b4; }
.pie__bloque a:hover { color: #fff; }
.pie address { font-style: normal; color: #8e8489; font-size: 14px; line-height: 1.6; }
.pie__legal { border-top: 1px solid rgba(255,255,255,.09); padding: 18px 0; }
/* #8e8489 y no el #7d7478 de antes: sobre el fondo del pie aquel daba 4,17:1,
   por debajo del mínimo (4,5). Es el mismo gris del resto del pie. */
.pie__legal p { margin: 0; font-size: 13px; color: #8e8489; }
.pie__legal .contenedor { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; }
.pie__legal nav { margin-left: auto; display: flex; gap: 18px; flex-wrap: wrap; }
.pie__legal nav a { color: #8e8489; font-size: 13px; }

/* ==========================================================================
   WhatsApp flotante
   ========================================================================== */
.whatsapp {
    position: fixed; right: 18px; bottom: 18px; z-index: 45;
    width: 56px; height: 56px; border-radius: 50%;
    background: #25d366; color: #fff; display: grid; place-items: center;
    /* La sombra va por filter, no por box-shadow: en un elemento fixed con
       border-radius, Chrome dejaba el borde del círculo dentado (aliasing de la
       capa compositada); drop-shadow rerasteriza la forma con AA limpio. */
    filter: drop-shadow(0 4px 12px rgba(0,0,0,.32));
}
.whatsapp:hover { background: #1eb455; text-decoration: none; }

/* ==========================================================================
   404
   ========================================================================== */
.error404 { padding: 70px 0 60px; text-align: center; }
.error404__codigo { font-size: 74px; font-weight: 800; color: var(--accion); margin: 0; line-height: 1; }
.error404__texto { color: var(--tinta-media); max-width: 52ch; margin: 0 auto 24px; }
.error404 .portadilla__acciones { justify-content: center; }
.error404__enlaces {
    list-style: none; padding: 0; margin: 0 auto 30px; display: flex; gap: 10px;
    flex-wrap: wrap; justify-content: center; max-width: 640px;
}
.error404__enlaces a {
    display: inline-block; padding: 9px 15px; border: 1px solid var(--linea);
    border-radius: 999px; color: var(--tinta); font-size: 14px;
}
.error404__enlaces a:hover { border-color: var(--accion); color: var(--accion); text-decoration: none; }

/* ==========================================================================
   Adaptación a pantallas pequeñas
   ========================================================================== */
@media (max-width: 1080px) {
    .catalogo__rejilla { grid-template-columns: 214px minmax(0, 1fr); gap: 26px; }
    .ficha__rejilla { gap: 32px; }
    .pie__rejilla { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
    .barra__abrir { display: flex; }
    

    /* --- Menú lateral -----------------------------------------------------
       Panel que entra desde la derecha con un velo detrás, en lugar de un
       bloque que empujaba el contenido. Los enlaces son grandes porque se
       tocan con el pulgar, no se pinchan con un ratón. */
    .nav {
        position: fixed; top: 0; right: 0; bottom: 0; left: auto;
        width: min(340px, 88vw); margin: 0; z-index: 60;
        flex-direction: column; align-items: stretch; gap: 0;
        /* Misma transparencia que la barra al hacer scroll (88 %). Su
           cabecera pegajosa sí es opaca: los enlaces pasan por debajo. */
        background: rgba(20, 16, 19, .88); padding: 0;
        overflow-y: auto; overscroll-behavior: contain;
        transform: translateX(100%);
        transition: transform .26s cubic-bezier(.32, .72, 0, 1);
        box-shadow: -8px 0 30px rgba(0, 0, 0, .35);
        display: flex;
    }
    .nav.abierto { transform: none; }

    .nav__fondo {
        position: fixed; inset: 0; z-index: 55;
        background: rgba(10, 8, 9, .55);
        opacity: 0; transition: opacity .26s;
        -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
    }
    .nav__fondo.visible { opacity: 1; }

    .nav__cabeza { align-items: center; justify-content: space-between;
        padding: 18px 20px; border-bottom: 1px solid rgba(255, 255, 255, .1);
        color: #fff; font-weight: 700; font-size: 13px;
        letter-spacing: .12em; text-transform: uppercase;
        position: sticky; top: 0; background: var(--barra); z-index: 2;
    }
    .nav__cerrar {
        background: none; border: 0; color: #fff; font-size: 30px; line-height: 1;
        cursor: pointer; padding: 0 4px; width: 40px; height: 40px;
    }

    .nav__lista { flex-direction: column; gap: 0; padding: 8px 12px; }
    .nav__item + .nav__item { border-top: 1px solid rgba(255, 255, 255, .07); }
    .nav__item > a {
        padding: 16px 12px; font-size: 16.5px; justify-content: space-between;
        border-radius: var(--radio-s);
    }
    .nav__item > a svg { transition: transform .2s; }
    .nav__item--desplegable.desplegado > a svg { transform: rotate(180deg); }

    /* Las subcategorías empiezan cerradas: si no, el menú abre con doce
       enlaces de golpe y no se encuentra nada. */
    .nav__submenu {
        position: static; opacity: 1; visibility: visible; transform: none;
        box-shadow: none; background: rgba(0, 0, 0, .22); padding: 4px;
        border-radius: var(--radio-s); margin: 0 0 8px;
        display: none;
    }
    .nav__item--desplegable.desplegado .nav__submenu { display: block; }
    .nav__submenu a { color: #d6ced1; padding: 13px 14px; font-size: 15px; }
    .nav__submenu a:hover { background: rgba(255, 255, 255, .07); }

    .nav__contacto {
        margin-top: auto; padding: 18px 20px 26px; display: block;
        border-top: 1px solid rgba(255, 255, 255, .1);
    }
    .boton--llamar { width: 100%; justify-content: center; font-size: 17px; padding: 14px; }
    .nav__horario {
        margin: 10px 0 0; text-align: center; font-size: 12.5px; color: #8e8489;
    }

    
    .portadilla__foto { order: -1; }
    
    
    
    
    
    .cuerpo .bloque figure { order: -1; }

    /* El árbol pasa a ser un desplegable */
    .catalogo__rejilla { grid-template-columns: 1fr; gap: 18px; }
    .arbol { position: static; }
    .arbol__abrir {
        display: flex; align-items: center; justify-content: space-between; width: 100%;
        padding: 15px 17px; background: var(--fondo-alt); border: 0; cursor: pointer;
        font-family: var(--tipo); font-size: 15px; font-weight: 700; color: var(--tinta);
    }
    .arbol__abrir svg { transition: transform .2s; }
    .arbol__abrir[aria-expanded="true"] svg { transform: rotate(180deg); }
    .arbol__titulo { display: none; }
    .arbol__contenido { display: none; border-top: 1px solid var(--linea); }
    .arbol__contenido.abierto { display: block; }
}

@media (max-width: 620px) {
    .contenedor { padding: 0 15px; }
    .barra__interior { padding: 0 15px; min-height: 60px; }
    .barra__logo img { width: 132px; }
    .nav { inset-block-start: 60px; }
    .portadilla { padding: 26px 0 22px; }
    .rejilla-productos { gap: 13px; }   /* el nº de columnas lo fija el flex, más abajo */
    .tarjeta__cuerpo { padding: 12px 12px 14px; gap: 7px; }
    /* En móvil el texto de las tarjetas sube ~2 px para leerse mejor. */
    .tarjeta__nombre { font-size: 16px; }
    .tarjeta__descripcion { -webkit-line-clamp: 2; line-clamp: 2; font-size: 15px; }
    .tarifas--tarjeta .tarifas__fila { font-size: 14px; }
    .tarjeta__precio-valor { font-size: 22px; }
    .tarjeta__precio-unidad { font-size: 13.5px; }
    .tarjeta__pie { gap: 9px; }
    
    
    .pie__rejilla { grid-template-columns: 1fr; gap: 28px; }
    .ficha__precio-valor { font-size: 31px; }
    .whatsapp { width: 50px; height: 50px; right: 13px; bottom: 13px; }
    .error404__codigo { font-size: 56px; }
}

/* ==========================================================================
   Portada: rejilla de categorías
   ========================================================================== */
.rejilla-categorias {
    display: grid; margin-top: 26px;
}
.categoria-tarjeta {
    display: flex; flex-direction: column; color: var(--tinta);
    border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden;
    background: #fff; transition: border-color .16s, box-shadow .16s, transform .16s;
}
.categoria-tarjeta:hover {
    border-color: var(--tinta-suave); box-shadow: var(--sombra);
    transform: translateY(-2px); text-decoration: none;
}
.categoria-tarjeta__foto { display: block; overflow: hidden; background: var(--fondo-alt); }
.categoria-tarjeta__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease-out; }
.categoria-tarjeta:hover .categoria-tarjeta__foto img { transform: scale(1.04); }
.categoria-tarjeta__cuerpo { display: flex; flex-direction: column; border-top: 1px solid var(--linea-suave); }
.categoria-tarjeta__nombre { font-weight: 700; font-size: 16.5px;
    display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
/* Flecha a la derecha del nombre: dice "esto se abre". */
.categoria-tarjeta__nombre::after { content: "→"; flex: 0 0 auto; color: var(--accion);
    font-weight: 400; opacity: .45; transition: transform .2s, opacity .2s; }
.categoria-tarjeta:hover .categoria-tarjeta__nombre::after { opacity: 1; transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
    .categoria-tarjeta__foto img, .categoria-tarjeta__nombre::after { transition: none; }
}
/* Texto que no se ve pero sí leen los lectores de pantalla y los buscadores.
   Se usa para completar enlaces como «Más información» (¿de qué?) sin cambiar
   lo que se ve en la página. */
.solo-lectores {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.categoria-tarjeta__datos { font-size: 13.5px; color: var(--tinta-suave); }
.categoria-tarjeta:hover .categoria-tarjeta__nombre { color: var(--accion); }

@media (max-width: 620px) {
    .rejilla-categorias { grid-template-columns: 1fr 1fr; gap: 12px; }
    .categoria-tarjeta__cuerpo { padding: 11px 12px 13px; }
    .categoria-tarjeta__nombre { font-size: 16px; line-height: 1.25; }   /* a 14 px no se leía bien en el móvil */
    .categoria-tarjeta__datos { font-size: 12px; }
    /* A dos columnas la flecha le quitaba sitio al nombre y lo partía. */
    .categoria-tarjeta__nombre::after { display: none; }
}

/* ==========================================================================
   Barra de acción de móvil

   Sustituye a la burbuja flotante en pantallas pequeñas: la burbuja acababa
   colocándose encima de los botones de teléfono y los tapaba.
   ========================================================================== */
.barra-accion { display: none; }

@media (max-width: 620px) {
    .whatsapp { display: none; }

    /* Un "muelle" flotante y redondeado en vez de dos bloques pegados al
       borde: se lee como dos botones, no como un pie de página de colores. */
    .barra-accion {
        /* Márgenes y hueco calculados para que los dos botones caigan justo
           encima de «Añadir» y «Más info» de las tarjetas (mismo ancho y
           misma posición): 23 px = margen de página + relleno de la tarjeta
           − el relleno de este marco. */
        display: grid; grid-template-columns: 1fr 1fr; gap: 7px;
        position: fixed; left: 23px; right: 23px; z-index: 46;
        bottom: calc(10px + env(safe-area-inset-bottom));
        padding: 5px; border-radius: 16px;
        background: rgba(23,18,20,.94);
        box-shadow: 0 10px 30px rgba(23,18,20,.34), 0 0 0 1px rgba(255,255,255,.07) inset;
    }
    .barra-accion__boton {
        display: flex; align-items: center; justify-content: center; gap: 8px;
        /* Del tamaño de «Añadir» y «Más info» de las tarjetas, un punto más. */
        min-height: 42px; padding: 0 10px; border-radius: 11px;
        font-weight: 700; font-size: 14px; color: #fff;
    }
    .barra-accion__boton svg { width: 17px; height: 17px; }
    .barra-accion__boton:hover { text-decoration: none; color: #fff; }
    .barra-accion__boton:active { transform: scale(.98); }
    .barra-accion__boton--llamar { background: var(--accion); }
    .barra-accion__boton--wa { background: #127f3e; }   /* era #17964a: 3,8:1 con el blanco; así, 5,1:1 */

    /* Hueco para que la barra no tape el final de la página */
    body { padding-bottom: 72px; }
}

/* ==========================================================================
   Cabecera de la portada

   Se separa de .portadilla porque la portada no lleva botones pegados al
   titular: el teléfono ya está fijo arriba y el catálogo va justo debajo.
   ========================================================================== */

.hero__texto h1 { margin-bottom: .35em; }
.hero__reclamo p { color: var(--tinta-media); margin: 0 0 .5em; }
.hero__reclamo p:first-child { font-weight: 700;
    letter-spacing: -.01em;
}

/* Teléfono suelto de la barra, solo en móvil: llamar es la acción principal
   de este negocio y no puede quedar escondida detrás del menú. */

.barra__hamburguesa { display: block; }
.barra__hamburguesa span {
    display: block; background: #fff; border-radius: 2px;
    transition: transform .2s, opacity .2s;
}

.nav__cabeza, .nav__cerrar, .nav__fondo, .nav__horario { display: none; }

@media (max-width: 900px) {
    
    .nav__cabeza { display: flex; }
    .nav__cerrar { display: block; }
    .nav__fondo { display: block; }
    .nav__horario { display: block; }
    /* Con el menú abierto, el fondo no debe poder desplazarse */
    body.menu-abierto { overflow: hidden; }
}

@media (max-width: 620px) {
    
    
}

/* "Ver todo el catálogo" dentro del submenú desplegado */
.nav__submenu-todo { display: none; }
@media (max-width: 900px) {
    .nav__submenu-todo { display: block; margin-bottom: 4px; }
    .nav__submenu-todo a {
        color: #fff !important; font-weight: 700;
        border-bottom: 1px solid rgba(255,255,255,.12); border-radius: 0;
    }
}

/* ==========================================================================
   Correcciones responsive
   Van al final a propósito: en CSS gana la última regla, así que cualquier
   ajuste para pantallas pequeñas tiene que ir por detrás de las de
   escritorio o no se aplica.
   ========================================================================== */
@media (max-width: 900px) {
    
    
    
}

@media (max-width: 620px) {
    
    .hero__reclamo p { font-size: 16px; }
    .hero__reclamo p:first-child { font-size: 18px; }
    
}

.catalogo__intro { margin-bottom: 4px; }
.catalogo__intro h2 { margin-bottom: .25em; }
.catalogo__intro p { color: var(--tinta-media); max-width: 62ch; }

/* Las entradas del menú lateral pueden ocupar dos líneas: hay nombres largos
   y cortarlos con puntos suspensivos deja al usuario adivinando. */
@media (max-width: 900px) {
    .nav__item > a {
        white-space: normal; line-height: 1.3; gap: 12px; align-items: flex-start;
    }
    .nav__item > a svg { flex-shrink: 0; margin-top: 6px; }
    .nav__submenu a { white-space: normal; }
}

/* ==========================================================================
   Aviso de cookies
   ========================================================================== */
.cookies {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    background: #fff; border-top: 3px solid var(--accion);
    box-shadow: 0 -6px 30px rgba(26, 20, 22, .16);
    padding: 20px 0 calc(20px + env(safe-area-inset-bottom));
}
.cookies__caja {
    max-width: var(--ancho); margin: 0 auto; padding: 0 20px;
    display: flex; gap: 30px; align-items: center; flex-wrap: wrap;
}
.cookies__texto { flex: 1; min-width: 280px; }
.cookies__texto h2 { font-size: 17px; margin: 0 0 6px; }
.cookies__texto p { margin: 0 0 6px; font-size: 14px; color: var(--tinta-media); max-width: 72ch; }
.cookies__enlaces { font-size: 13px; }
/* Los dos botones tienen el mismo tamaño a propósito: rechazar tiene que
   costar lo mismo que aceptar. */
.cookies__botones { display: flex; gap: 11px; flex-wrap: wrap; }
.cookies__botones .boton { min-width: 172px; }

.pie__cookies {
    /* Es un <button> pero tiene que verse igual que los enlaces legales de al
       lado: mismo color y tamaño, SIN subrayado (antes desentonaba). Padding
       vertical solo para que sea cómodo de tocar; el line-height lo alinea con
       los <a> gracias al align-items:center del nav. */
    background: none; border: 0; padding: 0; cursor: pointer;
    color: #8e8489; font-size: 13px; font-family: var(--tipo);
    line-height: inherit; text-decoration: none;
}
.pie__legal nav a:hover,
.pie__cookies:hover { color: #fff; text-decoration: underline; }

/* ==========================================================================
   Presupuesto
   ========================================================================== */
.presupuesto-burbuja {
    position: fixed; right: 18px; bottom: 84px; z-index: 45;
    display: inline-flex; align-items: center; gap: 9px;
    background: var(--accion); color: #fff; font-weight: 700; font-size: 14.5px;
    padding: 12px 18px; border-radius: 999px;
    box-shadow: 0 4px 18px rgba(209, 0, 48, .35);
}
.presupuesto-burbuja:hover { background: var(--accion-oscura); text-decoration: none; }
.presupuesto-burbuja em {
    font-style: normal; background: #fff; color: var(--accion);
    border-radius: 999px; min-width: 22px; height: 22px; display: grid;
    place-items: center; font-size: 12.5px; padding: 0 6px;
}

.presupuesto-pagina { padding: 34px 0 60px; }
.presupuesto-pagina__intro { color: var(--tinta-media); max-width: 60ch; }
.presupuesto-pagina__rejilla {
    display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 40px;
    align-items: start; margin-top: 28px;
}
.presupuesto__fechas {
    display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
    background: var(--fondo-alt); padding: 18px; border-radius: var(--radio);
    margin-bottom: 20px;
}
.presupuesto__linea {
    display: grid; grid-template-columns: 56px minmax(0, 1fr) auto auto;
    gap: 14px; align-items: center;
    padding: 14px 0; border-bottom: 1px solid var(--linea);
}
.presupuesto__linea img { border-radius: var(--radio-s); object-fit: contain; background: #fff; }
.presupuesto__datos { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.presupuesto__datos a { color: var(--tinta); font-weight: 600; font-size: 14.5px; line-height: 1.35; }
.presupuesto__datos a:hover { color: var(--accion); }
.presupuesto__datos span { font-size: 13px; color: var(--tinta-suave); }
.presupuesto__opcion { align-self: flex-start; padding: 2px 9px; border-radius: 999px;
    background: var(--accion-suave); color: var(--accion-oscura); font-size: 13px; font-weight: 700; line-height: 1.5; }
.presupuesto__cantidad {
    display: flex; align-items: center; gap: 4px;
    border: 1px solid var(--linea); border-radius: var(--radio-s); padding: 2px;
}
.presupuesto__cantidad button {
    width: 30px; height: 30px; border: 0; background: none; cursor: pointer;
    font-size: 17px; color: var(--tinta); border-radius: 4px;
}
.presupuesto__cantidad button:hover { background: var(--fondo-alt); color: var(--accion); }
.presupuesto__cantidad span { min-width: 24px; text-align: center; font-weight: 700; font-size: 14px; }
/* Productos de "solo uno" (fotomatón, servicios): la cifra sin botones. */
.presupuesto__cantidad--unica { border-color: transparent; background: none; }
.presupuesto__cantidad--unica span::before { content: "×"; font-weight: 400; margin-right: 3px; color: var(--tinta-suave); }
.presupuesto__quitar {
    background: none; border: 0; cursor: pointer; font-size: 22px;
    color: var(--tinta-suave); width: 32px; height: 32px; border-radius: 50%;
}
.presupuesto__quitar:hover { background: var(--accion-suave); color: var(--accion); }
.presupuesto__vacio { color: var(--tinta-suave); padding: 30px 0; }
.presupuesto__seguir { margin-top: 22px; }

/* Resumen y formulario son UNA tarjeta (antes, una caja gris con otra blanca
   dentro): cabecera oscura como la de los demás formularios, el total bien
   visible y, debajo, los datos de contacto. */
.presupuesto__resumen {
    --lado: 26px;   /* margen lateral de TODA la tarjeta: cabecera, totales y campos */
    background: #fff; border-radius: 14px; overflow: hidden; position: sticky; top: 88px;
    box-shadow: 0 1px 2px rgba(23,18,20,.06), 0 14px 34px rgba(23,18,20,.10);
}
.presupuesto__cab { padding: 15px var(--lado) 13px; background: #171214; color: #fff;
    border-bottom: 3px solid var(--accion); }
.presupuesto__cab h2 { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; color: #fff; }
.presupuesto__cab p { margin: 5px 0 0; font-size: 13px; color: rgba(255,255,255,.72); }
#presupuesto-totales { padding: 4px var(--lado) 14px; background: var(--fondo-alt); border-bottom: 1px solid var(--linea); }
#presupuesto-totales > div {
    display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
    padding: 10px 0; border-bottom: 1px solid var(--linea);
}
#presupuesto-totales > div:last-of-type { border-bottom: 0; }
#presupuesto-totales strong { font-size: 20px; font-variant-numeric: tabular-nums; }
.presupuesto__total span { display: flex; flex-direction: column; gap: 2px; font-weight: 700; font-size: 15px; }
.presupuesto__total small { font-size: 12.5px; font-weight: 400; color: var(--tinta-suave); }
#presupuesto-totales .presupuesto__total strong { font-size: 30px; font-weight: 800; letter-spacing: -.02em;
    line-height: 1; color: var(--accion); }
.presupuesto__fianza strong { color: var(--tinta-media); font-size: 16px; }
.presupuesto__nota { font-size: 13px; color: var(--tinta-media); margin: 8px 0 0; padding-left: 12px;
    border-left: 3px solid #e2dcde; line-height: 1.45; }
.presupuesto__paso { margin-top: 0; margin-bottom: 10px; font-size: 16px; font-weight: 800; color: var(--tinta); }

@media (max-width: 900px) {
    
    .presupuesto__resumen { position: static; }
}
@media (max-width: 620px) {
    .cookies { padding: 16px 0 calc(16px + env(safe-area-inset-bottom)); }
    .cookies__caja { gap: 16px; }
    .cookies__botones { width: 100%; }
    .cookies__botones .boton { flex: 1; min-width: 0; }
    .presupuesto-burbuja { right: 12px; padding: 10px 14px; font-size: 13.5px; }
    .presupuesto__fechas { grid-template-columns: 1fr; gap: 0; }
    .presupuesto__linea { grid-template-columns: 46px minmax(0, 1fr) auto; row-gap: 10px; }
    .presupuesto__quitar { grid-column: 3; }
}

/* Aviso en el hueco de las opiniones cuando no hay consentimiento */
.opiniones-aviso {
    background: var(--fondo-alt); border: 1px dashed var(--linea);
    border-radius: var(--radio); padding: 24px; text-align: center;
}
.opiniones-aviso p { color: var(--tinta-media); font-size: 14.5px; margin: 0 0 14px; }

/* ==========================================================================
   REVISIÓN DE MAQUETACIÓN
   Va al final porque en CSS gana la última regla.
   ========================================================================== */

/* --- Cabecera: en móvil solo la hamburguesa, pegada a la derecha ---------- */

.barra__hamburguesa span { width: 24px; height: 2.5px; }
.barra__hamburguesa span + span { margin-top: 6px; }
@media (max-width: 900px) {
    .barra__interior { gap: 0; }
    .barra__abrir { margin-left: auto; }
}

/* --- Tarjetas de ventajas ------------------------------------------------
   Las pinta el parcial _ventajas.php y también vienen dentro del contenido
   guardado de algunas páginas. En los dos casos el marcado es el mismo
   (.bloque--ventajas > article), así que se ven igual estén donde estén;
   antes heredaban la rejilla de dos columnas del cuerpo y quedaban
   desparramadas.
   ========================================================================== */
.ventajas { margin-top: 0; }
.bloque--ventajas {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.bloque--ventajas > article { position: relative;
}

/* El check va arriba, sobre un círculo rojo suave, como en la web original */

/* Dentro del cuerpo hay que anular la rejilla genérica de bloques */
.cuerpo .bloque--ventajas { padding: 30px 0; }

@media (max-width: 1080px) {
    .bloque--ventajas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    .bloque--ventajas { grid-template-columns: 1fr; gap: 14px; }
    .bloque--ventajas > article { padding: 20px; }
}

/* --- Rejilla de categorías: siempre cuadrada -----------------------------
   Con auto-fill, ocho categorías dejaban huecos sueltos al final según el
   ancho. Con un número fijo de columnas por tramo, 8 siempre cierra filas
   completas: 4+4, 3+3+2, 2+2+2+2.
   ========================================================================== */
/* Las CATEGORÍAS van en grid (no flex): así todas las tarjetas miden igual y,
   si la última fila queda coja, se dejan huecos blancos en vez de estirar las
   que hay (a diferencia de la rejilla de productos, que sí rellena la fila). */
.rejilla-categorias { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 1080px) { .rejilla-categorias { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 780px)  { .rejilla-categorias { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } }

.categoria-tarjeta__foto { aspect-ratio: 16 / 11; }
.categoria-tarjeta__cuerpo { padding: 16px 18px 18px; gap: 5px; }

/* --- Contacto ------------------------------------------------------------ */
.contacto { padding: 62px 0; background: var(--fondo-alt); border-top: 1px solid var(--linea); }
.contacto__rejilla { grid-template-columns: 1fr 1.05fr; gap: 48px; }
.contacto__entrada { color: var(--tinta-media); max-width: 46ch; font-size: 16.5px; }

.contacto__datos { display: grid; gap: 10px; margin: 26px 0 0; padding: 0; list-style: none; }
.contacto__datos li a {
    display: flex; gap: 15px; padding: 14px 16px;
    background: #fff; border: 1px solid var(--linea); border-radius: var(--radio);
    color: var(--tinta); transition: border-color .16s, transform .16s;
}
.contacto__datos li a:hover {
    border-color: var(--accion); transform: translateX(3px); text-decoration: none;
}
.contacto__icono {
    flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--accion-suave); color: var(--accion);
}
.contacto__icono--wa { background: #e7f9ee; color: #128c40; }
.contacto__valor { display: flex; min-width: 0; }
/* El color, explícito: .contacto__valor es un <span> y la regla de los <span>
   de la lista (gris) se lo pasaba también al dato principal. */
.contacto__valor strong { font-size: 15.5px; font-weight: 700; word-break: break-word; color: var(--tinta); }
.contacto__valor span { font-size: 13px; color: var(--tinta-suave); }

.formulario { background: #fff; }

/* --- Mapa ---------------------------------------------------------------- */
.mapa {
    margin-top: 20px; border-radius: var(--radio); overflow: hidden;
    border: 1px solid var(--linea); background: #fff;
}
.mapa__abrir {
    display: flex; gap: 15px; width: 100%; cursor: pointer;
    padding: 20px 18px; border: 0; background: none; text-align: left;
    font-family: var(--tipo); color: var(--tinta);
}
.mapa__abrir:hover { background: var(--fondo-alt); }
.mapa__icono {
    flex-shrink: 0; width: 46px; height: 46px; border-radius: 50%;
    display: grid; place-items: center; background: var(--accion); color: #fff;
}
.mapa__abrir strong { display: block; font-size: 15.5px; }
.mapa__abrir small { color: var(--tinta-suave); font-size: 13px; }
.mapa iframe { display: block; }

/* --- Páginas de texto legal ---------------------------------------------- */
.cuerpo--texto .bloque { grid-template-columns: 1fr; }
.cuerpo--texto .prosa p,
.cuerpo--texto .prosa li { color: var(--tinta-media); }
.cuerpo--texto .prosa ul { padding-left: 22px; margin-bottom: 1.2em; }

/* --- Bloques de contenido: menos rígidos --------------------------------- */
.cuerpo .bloque { gap: 44px; padding: 34px 0; }
.cuerpo .bloque + .bloque { border-top: 1px solid var(--linea-suave); }
.cuerpo .bloque figure img { box-shadow: var(--sombra); }
.cuerpo .prosa h2 { font-size: clamp(20px, 2.4vw, 27px); }
.cuerpo .prosa h3 { font-size: clamp(18px, 2.1vw, 22px); }

/* ==========================================================================
   Rejillas que siempre cierran fila

   Con grid, ocho tarjetas en tres columnas dejan un hueco al final, y la
   fila queda coja. Con flex, las de la última fila se estiran hasta ocupar
   el ancho completo, así que cuadra con cualquier número de elementos: 8, 7
   o 33. El min-width evita que una tarjeta suelta se vuelva gigante.
   ========================================================================== */
.rejilla-productos,
.relacionados__rejilla {
    display: flex; flex-wrap: wrap; gap: 20px;
}
.rejilla-productos > *,
.relacionados__rejilla > * {
    flex: 1 1 250px; min-width: 240px; max-width: 100%;
}

@media (max-width: 780px) {
    .rejilla-productos, .relacionados__rejilla { gap: 14px; }
}

/* ==========================================================================
   El menú pasa a hamburguesa antes de que se rompa

   A 1024 px los tres enlaces del menú más el botón de teléfono no caben y
   se salían de la pantalla. El corte estaba en 900 px, que era tarde.
   El árbol de categorías sigue siendo barra lateral hasta 900: ahí sí cabe.
   ========================================================================== */
@media (max-width: 1100px) {
    
    .barra__interior { gap: 0; }

    .nav {
        position: fixed; top: 0; right: 0; bottom: 0; left: auto;
        width: min(340px, 88vw); margin: 0; z-index: 60;
        flex-direction: column; align-items: stretch; gap: 0;
        /* Misma transparencia que la barra al hacer scroll (88 %). Su
           cabecera pegajosa sí es opaca: los enlaces pasan por debajo. */
        background: rgba(20, 16, 19, .88); padding: 0;
        overflow-y: auto; overscroll-behavior: contain;
        transform: translateX(100%);
        transition: transform .26s cubic-bezier(.32, .72, 0, 1);
        box-shadow: -8px 0 30px rgba(0, 0, 0, .35);
        display: flex;
    }
    .nav.abierto { transform: none; }

    .nav__cabeza { display: flex; }
    .nav__cerrar { display: block; }
    .nav__fondo { display: block; }
    .nav__horario { display: block; }
    .nav__submenu-todo { display: block; }

    .nav__lista { flex-direction: column; gap: 0; padding: 8px 12px; }
    .nav__item + .nav__item { border-top: 1px solid rgba(255, 255, 255, .07); }
    .nav__item > a {
        padding: 16px 12px; font-size: 16.5px; justify-content: space-between;
        white-space: normal; line-height: 1.3; align-items: flex-start; gap: 12px;
    }
    .nav__item > a svg { flex-shrink: 0; margin-top: 6px; transition: transform .2s; }
    .nav__item--desplegable.desplegado > a svg { transform: rotate(180deg); }

    .nav__submenu {
        position: static; opacity: 1; visibility: visible; transform: none;
        box-shadow: none; background: rgba(0, 0, 0, .22); padding: 4px;
        border-radius: var(--radio-s); margin: 0 0 8px; display: none;
    }
    .nav__item--desplegable.desplegado .nav__submenu { display: block; }
    .nav__submenu a { color: #d6ced1; padding: 13px 14px; font-size: 15px; white-space: normal; }

    .nav__contacto {
        margin-top: auto; padding: 18px 20px 26px; display: block;
        border-top: 1px solid rgba(255, 255, 255, .1);
    }
    .boton--llamar { width: 100%; justify-content: center; font-size: 17px; padding: 14px; }

    body.menu-abierto { overflow: hidden; }
}

/* ==========================================================================
   Últimas correcciones responsive

   Todo lo que ajuste pantallas pequeñas tiene que vivir AQUÍ, al final del
   fichero. Ya ha pasado dos veces: se añade una regla de escritorio detrás de
   su media query y, al ganar la última, el móvil se queda con la maquetación
   de escritorio. Si añades estilos nuevos, respeta este orden.
   ========================================================================== */
@media (max-width: 900px) {
    .contacto__rejilla { grid-template-columns: 1fr; gap: 32px; }
    .presupuesto-pagina__rejilla { grid-template-columns: 1fr; gap: 26px; }
    .cuerpo .bloque { grid-template-columns: 1fr; gap: 22px; padding: 24px 0; }
    .ficha__rejilla { grid-template-columns: 1fr; }
    
    .portadilla__rejilla { grid-template-columns: 1fr; gap: 24px; }
}

@media (max-width: 620px) {
    .contacto { padding: 40px 0; }
    .formulario { padding: 18px; }
    .formulario__fila { grid-template-columns: 1fr; gap: 0; }
    .contacto__datos li a { padding: 12px 13px; gap: 12px; }
    .contacto__icono { width: 38px; height: 38px; }
    .contacto__valor strong { font-size: 14.5px; }
    .mapa iframe { height: 220px; }
    .cuerpo .bloque { padding: 18px 0; }
}

/* --- Contacto: icono al lado del texto, no encima -------------------------
   La regla original ponía flex-direction:column y la nueva no lo reescribía,
   así que el icono seguía colocándose sobre el texto y todo salía centrado.
   Hay que decirlo explícitamente. */
.contacto__datos li a {
    flex-direction: row; align-items: center; text-align: left;
}
.contacto__valor { flex-direction: column; align-items: flex-start; }

/* --- Hueco para la burbuja del presupuesto -------------------------------
   Solo cuando hay algo dentro: si no, se quedaría un hueco blanco al final
   de todas las páginas sin motivo. */
@media (max-width: 620px) {
    .presupuesto-burbuja { bottom: calc(74px + env(safe-area-inset-bottom)); }
    body:has(.presupuesto-burbuja:not([hidden])) { padding-bottom: 134px; }
}

/* En pantallas medianas la burbuja tampoco debe pisar el botón de WhatsApp */
@media (min-width: 621px) {
    .presupuesto-burbuja { bottom: 88px; }
}

/* ==========================================================================
   Tarjetas de ventajas: un solo aspecto en toda la web

   Estén en el parcial o dentro del contenido guardado, el marcado es el mismo
   y el estilo también. El fondo gris del bloque desaparece: la portada no
   podía tenerlo (el bloque va dentro del contenedor) y así las dos versiones
   se ven idénticas.
   ========================================================================== */
.ventajas { background: transparent; padding: 44px 0 10px; }

.bloque--ventajas {
    display: flex; flex-wrap: wrap; gap: 20px; align-items: stretch;
    padding: 26px 0;
}
.bloque--ventajas > article {
    flex: 1 1 230px; min-width: 220px;
    background: #fff; border: 1px solid var(--linea); border-radius: var(--radio);
    padding: 26px 24px; display: flex; flex-direction: column;
    box-shadow: var(--sombra);
    transition: transform .16s, box-shadow .16s, border-color .16s;
}
.bloque--ventajas > article:hover {
    transform: translateY(-3px); box-shadow: var(--sombra-alta);
    border-color: var(--accion-suave);
}
.bloque--ventajas > article::before {
    content: ""; display: block; width: 42px; height: 42px; border-radius: 50%;
    margin-bottom: 16px; flex-shrink: 0;
    background: var(--accion-suave) no-repeat center / 21px 21px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d10030' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
}
.bloque--ventajas > article h3 {
    font-size: 17px; margin: 0 0 8px; letter-spacing: -.01em; color: var(--tinta);
}
.bloque--ventajas > article p {
    margin: 0; font-size: 14.5px; color: var(--tinta-media); line-height: 1.55;
}

/* ==========================================================================
   Productos: las tarjetas no se estiran

   En una categoría, si sobra una en la última fila debe quedarse del tamaño
   de las demás. Estirarla a todo el ancho la convertía en una tarjeta enorme
   sin ningún motivo. Esto solo se hace en la rejilla de categorías, donde sí
   interesa que la fila cierre.
   ========================================================================== */
.rejilla-productos > * { flex: 0 1 262px; min-width: 240px; }
.relacionados__rejilla > * { flex: 0 1 210px; min-width: 190px; }

@media (max-width: 780px) {
    .rejilla-productos > * { flex: 0 1 calc(50% - 7px); min-width: calc(50% - 7px); }
    .relacionados__rejilla > * { flex: 0 1 calc(50% - 7px); min-width: calc(50% - 7px); }
}
@media (max-width: 420px) {
    .rejilla-productos > *, .relacionados__rejilla > * { flex-basis: 100%; min-width: 0; }
}

/* ==========================================================================
   Opiniones de clientes a todo el ancho

   El widget venía dentro de un <figure> de un bloque de dos columnas, así que
   quedaba encajonado en media página. Las opiniones son de lo que más vende:
   se le da la banda entera, con fondo para separarlas del resto.
   ========================================================================== */
.bloque:has(> figure > [class*="elfsight-app"]),
.bloque:has(> figure > .opiniones-aviso) {
    display: block; padding: 0; border-top: 0;
}
.bloque > figure > [class*="elfsight-app"] { width: 100%; }
.bloque:has([class*="elfsight-app"]) > figure { margin: 0; width: 100%; }

.cuerpo .bloque:has([class*="elfsight-app"]) {
    /* Sale del contenedor para ocupar la ventana completa */
    width: 100vw; max-width: 100vw;
    margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
    background: var(--fondo-alt); padding: 42px clamp(15px, 4vw, 40px);
    border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea);
}

/* ==========================================================================
   Galerías de fotos

   Las tres fotos de las páginas de DJ salían con la rejilla genérica de
   bloques y quedaban de tamaños distintos y sin recortar. Ahora comparten
   proporción, se recortan al centro y tienen el mismo aspecto que el resto
   de tarjetas.
   ========================================================================== */
.cuerpo .bloque--galeria {
    display: flex; flex-wrap: wrap; gap: 16px; padding: 26px 0; align-items: stretch;
}
.cuerpo .bloque--galeria figure {
    flex: 1 1 260px; min-width: 240px; margin: 0;
    border-radius: var(--radio); overflow: hidden; background: var(--fondo-alt);
    box-shadow: var(--sombra);
}
.cuerpo .bloque--galeria figure img {
    width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover;
    display: block; transition: transform .3s;
}
.cuerpo .bloque--galeria figure:hover img { transform: scale(1.04); }

/* Las capturas de tarifas son documentos, no fotos: no se recortan */
.cuerpo .bloque--galeria figure img[src*="empresas-colaboradoras"] {
    aspect-ratio: auto; object-fit: contain; height: auto; background: #fff;
}
.cuerpo .bloque--galeria figure:has(img[src*="empresas-colaboradoras"]) {
    flex-basis: 100%; box-shadow: none; background: transparent;
}

/* --- Bloques de texto e imagen: más aire y mejor proporción -------------- */
.cuerpo .bloque > figure { margin: 0; }
.cuerpo .bloque > figure > img {
    width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
    border-radius: var(--radio); box-shadow: var(--sombra);
}
.cuerpo .prosa p:last-child { margin-bottom: 0; }

/* --- Vídeos ------------------------------------------------------------- */
.video { box-shadow: var(--sombra); }
.video__play span { box-shadow: 0 4px 16px rgba(209, 0, 48, .4); }

/* ==========================================================================
   Páginas de servicio: menos sosas

   Eran texto e imagen alternándose sin más. Se les da ritmo vertical, un
   filete de color bajo los encabezados y un tratamiento propio al precio,
   que en estas páginas es el dato que más se busca.
   ========================================================================== */
.cuerpo .bloque > .prosa > h2:first-child,
.cuerpo .bloque > .prosa > h3:first-child {
    position: relative; padding-top: 14px;
}
.cuerpo .bloque > .prosa > h2:first-child::before,
.cuerpo .bloque > .prosa > h3:first-child::before {
    content: ""; position: absolute; top: 0; left: 0;
    width: 42px; height: 3px; border-radius: 2px; background: var(--accion);
}

.cuerpo .prosa .precio {
    display: inline-flex; align-items: baseline; gap: 6px;
    background: var(--accion-suave); color: var(--accion);
    padding: 8px 16px; border-radius: 999px;
    font-size: clamp(19px, 2.2vw, 24px); font-weight: 800; letter-spacing: -.02em;
    margin-bottom: .8em;
}
/* Cuando el "precio" es en realidad una captura de tarifas, no lleva píldora */
.cuerpo .prosa .precio:has(img) {
    display: block; background: none; padding: 0; border-radius: 0;
}

/* El primer bloque de una página de servicio suele ser el reclamo: se le da
   tamaño de entradilla en vez de dejarlo como un encabezado más. */
.cuerpo .bloque:first-child > .prosa > h2:only-child,
.cuerpo .bloque:first-child > .prosa > h3:only-child { font-weight: 600; line-height: 1.4;
    color: var(--tinta-media); padding-top: 0;
}
.cuerpo .bloque:first-child > .prosa > h2:only-child::before,
.cuerpo .bloque:first-child > .prosa > h3:only-child::before { display: none; }

/* ==========================================================================
   Galería con encabezado propio

   "Ejemplos de servicios que ofrecemos:" va delante de las dos capturas de
   tarifas. El encabezado ocupa todo el ancho y las figuras quedan debajo, en
   vez de meterse en la misma fila que ellas.
   ========================================================================== */
.bloque--galeria > .prosa { flex: 1 0 100%; margin-bottom: 4px; }

/* ==========================================================================
   Un bloque con un solo hijo no reserva una columna vacía

   .bloque siempre monta una rejilla de dos columnas. Si solo hay texto (el
   banner de "Intentamos ofrecer algo diferente...") o solo una figura, se
   quedaba a media anchura con la otra columna en blanco. Con un único hijo,
   pasa a ocupar el ancho completo.
   ========================================================================== */
.cuerpo .bloque:has(> :only-child) { grid-template-columns: 1fr; }
.cuerpo .bloque > :only-child.prosa { max-width: 74ch; }

/* ==========================================================================
   Revisión: cabeceras de página, contacto y accesos

   Todo esto va al final por la misma razón de siempre: la última regla gana.
   ========================================================================== */

/* --- Hero de la portada: sin foto, a todo el ancho y un poco más grande --- */
.hero {
    position: relative; overflow: hidden;
}
.hero__texto { position: relative; z-index: 1; }
.hero__texto h1 {
    font-size: clamp(32px, 5.2vw, 54px); letter-spacing: -.025em;
}
.hero__reclamo p { font-size: 19.5px; }
.hero__reclamo p:first-child {
    font-size: clamp(21px, 2.9vw, 30px); color: var(--tinta);
}

/* Un acento discreto: un resplandor muy suave del rojo de marca detrás del
   titular. No es una mancha de color a la vista, es algo que se nota sin
   que se note: un fondo con un poco más de vida que el blanco liso. */
/* Los dos resplandores son más grandes que la cabecera y antes se cortaban en
   seco en su borde de abajo (se veía una raya, sobre todo en pantallas anchas).
   Ahora ocupan la cabecera entera y una máscara los apaga poco a poco hacia
   abajo: llegan al borde ya transparentes. */
.hero::before, .hero::after {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 30%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 0, #000 30%, transparent 100%);
}
.hero::before {
    background: radial-gradient(circle 310px at calc(100% - 150px) 110px,
                rgba(255, 28, 66, .10), rgba(255, 28, 66, 0));
}
.hero::after {
    background: radial-gradient(circle 260px at 80px 45%,
                rgba(20, 16, 19, .045), rgba(20, 16, 19, 0));
}

/* --- Páginas de servicio: el H1 se alinea con el texto de debajo ---------
   Antes el título salía centrado y el párrafo justo debajo, a la izquierda:
   dos alineaciones distintas en el mismo golpe de vista, y de ahí la
   sensación de "cutre". Ahora los dos van a la izquierda, a todo el ancho, y
   el titular sube un poco de tamaño para pesar más en la página. */
.portadilla--pagina { position: relative; overflow: hidden;
}
.portadilla--pagina::before {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: radial-gradient(circle 230px at calc(100% - 90px) 70px,
                rgba(255, 28, 66, .08), rgba(255, 28, 66, 0));
    /* Igual que en la portada: se apaga antes de llegar al borde de abajo. */
    -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 30%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 0, #000 30%, transparent 100%);
}
.portadilla--pagina .contenedor { position: relative; z-index: 1; }
.portadilla--pagina h1 { letter-spacing: -.02em; }

/* El primer párrafo de la página (la "entradilla") ya no se aprieta a 62ch:
   respira a todo lo ancho del contenedor, igual que el título de encima. */

/* --- Contacto: la columna de la izquierda se cuadra con el formulario -----
   El grid ya igualaba la altura de las dos cajas; lo que faltaba era que el
   contenido de la izquierda llegara hasta abajo. El mapa crece para rellenar
   el hueco en vez de dejarlo en blanco. */

.contacto__texto { display: flex; flex-direction: column; }
/* El flex de .contacto__datos lo fija la sección de "alturas iguales", abajo. */
.mapa { display: flex; flex-direction: column; min-height: 160px;
}
.mapa__abrir { align-items: center; }
.mapa iframe { width: 100%; border: 0; }

@media (max-width: 900px) {
    .contacto__texto { height: auto; }
    .mapa { min-height: 120px; }
}
@media (max-width: 620px) {
    
    .hero::before, .hero::after { display: none; }
    .portadilla--pagina { padding: 34px 0 14px; }
    .portadilla--pagina::before { display: none; }
    .portadilla--pagina h1 { max-width: none; }
}

/* ==========================================================================
   Hamburguesa: una sola definición, bien centrada

   Había tres reglas repartidas por el fichero peleándose. Y una de ellas,
   `.barra__abrir span`, alcanzaba también al CONTENEDOR (que es un <span>) y
   le fijaba 2px de alto: las tres barras se salían por abajo y el icono se
   dibujaba unos 9px más bajo que su propia caja. A ojo se notaba descentrado
   y era exactamente eso.

   Ahora el contenedor es flex con gap, así no depende de márgenes entre
   hermanos, y las barras se seleccionan de forma explícita.
   ========================================================================== */
.barra__abrir {
    display: none; align-items: center; justify-content: center;
    width: 46px; height: 46px; padding: 0;
    background: none; border: 0; cursor: pointer; color: #fff;
}
.barra__abrir .barra__hamburguesa {
    display: flex; flex-direction: column; justify-content: center;
    gap: 6px; width: 26px; height: auto;
    background: none; border-radius: 0; margin: 0;
}
.barra__abrir .barra__hamburguesa span {
    display: block; width: 100%; height: 2.5px; margin: 0;
    background: #fff; border-radius: 2px;
    transition: transform .22s, opacity .22s;
}
/* La X al abrir. 8.5px = altura de barra (2.5) + hueco (6). */
.barra__abrir[aria-expanded="true"] .barra__hamburguesa span:nth-child(1) {
    transform: translateY(8.5px) rotate(45deg);
}
.barra__abrir[aria-expanded="true"] .barra__hamburguesa span:nth-child(2) { opacity: 0; }
.barra__abrir[aria-expanded="true"] .barra__hamburguesa span:nth-child(3) {
    transform: translateY(-8.5px) rotate(-45deg);
}

@media (max-width: 1100px) {
    .barra__abrir { display: flex; margin-left: auto; }
}

/* ==========================================================================
   Titulares centrados

   Antes el H1 salía centrado y el párrafo de debajo a la izquierda, y esa
   mezcla era la que hacía que la cabecera se viera descuadrada. Se resuelve
   centrando LOS DOS, no alineando los dos a la izquierda: es la decisión del
   cliente y además da más presencia al titular.
   ========================================================================== */
.portadilla--pagina { text-align: center; padding: 60px 0 22px; }
.portadilla--pagina h1 {
    margin-inline: auto; max-width: 26ch;
    font-size: clamp(32px, 5.2vw, 54px);
}
.portadilla--pagina .portadilla__acciones { justify-content: center; }

/* La entradilla de las páginas de servicio (el primer bloque, que es solo un
   encabezado suelto) se centra con el título que tiene encima.
   El `margin-inline: auto` de la .prosa es imprescindible: la regla general
   le pone `max-width: 74ch` para que el texto largo se lea bien, y sin
   márgenes automáticos esa caja se queda pegada a la izquierda. El encabezado
   se centraba entonces respecto a ella y no respecto a la página: ese era el
   descuadre de las páginas de DJ. */
.cuerpo .bloque:first-child:has(> .prosa:only-child) { text-align: center; }
/* Sin `max-width: none` la entradilla no se ensancha por mucho que se le
   suba el suyo: la .prosa la topa a 74ch calculados sobre el tamaño de letra
   normal (unos 658 px), y manda el más estrecho de los dos. Aquí el ancho lo
   decide el propio encabezado, que es más grande. */
.cuerpo .bloque:first-child > .prosa:only-child {
    margin-inline: auto; max-width: none;
}
.cuerpo .bloque:first-child > .prosa > h2:only-child,
.cuerpo .bloque:first-child > .prosa > h3:only-child {
    max-width: 62ch; margin-inline: auto;
    font-size: clamp(20px, 2.7vw, 30px); text-wrap: balance;
}

/* Portada: mismo criterio. */
.hero { text-align: center; }
/* El titular NO lleva tope de ancho: ocupa todo el contenido y va en una sola
   línea siempre que quepa (en escritorio y tablet cabe de sobra). Solo se
   parte en dos en pantallas muy estrechas, donde es inevitable. */
.hero__texto h1 { margin-inline: auto; max-width: none; text-wrap: balance; }
.hero__reclamo p { margin-inline: auto; max-width: 64ch; }

/* En la ficha de categoría el H1 va junto a su foto, así que ahí no se
   centra: rompería la pareja texto-imagen. */
.portadilla:not(.portadilla--pagina) .portadilla__texto { text-align: left; }

/* ==========================================================================
   Contacto: las dos columnas centradas entre sí

   Antes estiraba el mapa para llegar al fondo del formulario. Cuando el
   formulario es más alto (que es lo normal), eso dejaba un mapa
   desproporcionado. Centrando las dos columnas, el desnivel se reparte
   arriba y abajo en vez de acumularse abajo, que era el "espacio raro".
   ========================================================================== */
/* Las dos columnas terminan a la misma altura. La izquierda se estira hasta el
   alto del formulario, y sus cuatro tarjetas de contacto se reparten ese alto
   por igual (crecen un poco cada una), mientras el mapa se queda abajo con su
   tamaño. Antes se estiraba solo el mapa y quedaba desproporcionado; repartir
   entre las tarjetas queda equilibrado y alinea los pies de las dos columnas. */
.contacto__rejilla { align-items: stretch; }
.contacto__texto { height: auto; }
.contacto__datos { flex: 1 1 auto; grid-auto-rows: 1fr; }
.contacto__datos li { display: flex; }
.contacto__datos li a { flex: 1; }   /* el align-items:center ya está más arriba */
.mapa { flex: 0 0 auto; }
/* El botón llena la tarjeta del mapa y su contenido se centra, en vez de
   quedarse arriba con un hueco vacío debajo. */
.mapa__abrir { flex: 1 1 auto; justify-content: center; }
.mapa iframe { height: 260px; min-height: 0; flex: 0 0 auto; }

/* --- Índice del catálogo: aire antes del formulario ---------------------- */
.catalogo--indice { padding-bottom: 56px; }
.catalogo--indice .catalogo__intro { text-align: center; margin-bottom: 30px; }
.catalogo--indice .catalogo__intro h2 { margin-bottom: .4em; }
.catalogo--indice .catalogo__intro p {
    color: var(--tinta-media); max-width: 62ch; margin-inline: auto;
}

@media (max-width: 900px) {
    .contacto__rejilla { align-items: stretch; }
    .catalogo--indice { padding-bottom: 34px; }
}

/* ==========================================================================
   Casilla de consentimiento
   ========================================================================== */
.campo--consentimiento { margin-bottom: 18px; }
.consentimiento {
    display: flex; align-items: flex-start; gap: 11px; cursor: pointer;
    font-size: 13.5px; line-height: 1.5; color: var(--tinta-media); font-weight: 400;
}
.consentimiento input[type="checkbox"] {
    width: 19px; height: 19px; margin: 1px 0 0; flex-shrink: 0;
    accent-color: var(--accion); cursor: pointer;
}
.consentimiento a { text-decoration: underline; }
.campo--consentimiento.campo--mal .consentimiento { color: var(--accion); }
.campo--consentimiento.campo--mal input[type="checkbox"] { outline: 2px solid var(--accion); }

/* ==========================================================================
   Cabecera de la portada

   Etiqueta pequeña, titular y reclamo. Sin foto: el peso lo lleva la
   tipografía. Aquí hubo también tres cifras y dos botones; se quitaron
   porque la rejilla de categorías que va justo debajo ya dice cuántos
   equipos hay y desde cuánto, y el teléfono está en la barra de arriba.
   ========================================================================== */
/* Menos relleno que antes (68/52): sobraba aire vertical y la portada se veía
   vacía. */
.hero { padding: 50px 0 42px; }

/* La etiqueta lleva una línea corta a cada lado: un anclaje gráfico discreto y
   crisp (acorde con el buscador cuadrado) que le da algo a la cabecera sin
   añadir botones ni cifras. */
.hero__etiqueta {
    display: flex; align-items: center; justify-content: center; gap: 14px;
    font-size: 12.5px; font-weight: 700; letter-spacing: .18em;
    text-transform: uppercase; color: var(--accion);
    margin: 0 0 18px;
}
.hero__etiqueta::before,
.hero__etiqueta::after {
    content: ""; height: 1px; width: 34px; flex: 0 0 auto;
    background: currentColor; opacity: .4;
}

@media (max-width: 620px) {
    .hero { padding: 30px 0 28px; }
    .hero__etiqueta { font-size: 11px; letter-spacing: .14em; margin-bottom: 12px; gap: 10px; }
    .hero__etiqueta::before, .hero__etiqueta::after { width: 20px; }
}

/* Disponibilidad en la ficha de producto */
.ficha__stock { margin: -8px 0 18px; }
.ficha__stock .disponible { font-size: 14px; }

/* ==========================================================================
   Portada: el cuerpo de debajo del catálogo

   Estos bloques van detrás de la rejilla de categorías, que ocupa todo el
   ancho. Si el texto siguiera igual de ancho, la página no respiraría en
   ningún punto: se estrecha, y las fotos se recortan más apaisadas para que
   no coman tanto alto.
   ========================================================================== */
.cuerpo--portada .contenedor { max-width: 1120px; }

/* Las fotos de los bloques de texto van apaisadas en TODAS las páginas, no
   solo en la portada: a 3:2 comían tanto alto que el texto de al lado
   quedaba flotando en medio de una columna medio vacía.
   Las galerías se quedan a 4:3, que tienen su propia regla y más peso. */
.cuerpo .bloque figure img {
    aspect-ratio: 16 / 9; object-fit: cover; display: block;
}

/* Aire antes de la franja de opiniones, que va a sangre y sin él se pega al
   bloque anterior. Los márgenes laterales que la sacan del contenedor ya los
   pone la regla general con `calc(50% - 50vw)`: el porcentaje se recalcula
   solo sobre el contenedor estrecho, no hay que repetirlos. */
.cuerpo--portada .bloque:has([class*="elfsight-app"]) { margin-top: 52px; }

@media (max-width: 620px) {
    .cuerpo--portada .bloque:has([class*="elfsight-app"]) { margin-top: 30px; }
}

/* ==========================================================================
   Lista de ventajas dentro del texto ("Qué podemos ofrecerte?")

   En la web antigua era una caja de color crema con las esquinas redondeadas
   y la lista sin viñetas. Se recupera esa idea —un bloque que destaca sobre
   el texto corrido— con los colores de ahora, y las viñetas pasan a ser
   marcas de verificación: son argumentos de venta, no una enumeración
   cualquiera.

   El marcado viene del contenido guardado y es `<p class="titulo">` seguido
   de `<ul>`, así que la caja se monta con las dos piezas pegadas: el título
   redondea por arriba y la lista por abajo.
   ========================================================================== */
.cuerpo .prosa .titulo:has(+ ul) {
    background: var(--fondo-alt); color: var(--titulo);
    border: 1px solid var(--linea); border-bottom: 0;
    border-radius: var(--radio) var(--radio) 0 0;
    margin: 0; padding: 18px 24px 6px;
    font-size: 18px;
}
.cuerpo .prosa .titulo:has(+ ul) + ul {
    background: var(--fondo-alt);
    border: 1px solid var(--linea); border-top: 0;
    border-radius: 0 0 var(--radio) var(--radio);
    margin: 0 0 26px; padding: 8px 24px 20px;
    list-style: none;
}
.cuerpo .prosa .titulo:has(+ ul) + ul li {
    position: relative; padding-left: 28px; margin-bottom: 9px;
    line-height: 1.55;
}
.cuerpo .prosa .titulo:has(+ ul) + ul li::before {
    content: ""; position: absolute; left: 4px; top: .45em;
    width: 11px; height: 6px;
    border-left: 2.5px solid var(--accion);
    border-bottom: 2.5px solid var(--accion);
    transform: rotate(-45deg);
}

/* ==========================================================================
   Hueco reservado para las opiniones

   El widget es externo y ya no se carga al abrir la página: espera a que el
   bloque se acerque a la pantalla. Sin una altura reservada, aparecer de
   golpe empujaría hacia abajo el pie y las tarjetas de ventajas, que es
   justo el salto de maquetación que Google penaliza.

   400 px es lo que ocupa el carrusel de reseñas una vez montado. Se aplica
   al contenedor, no al widget, para que cuando esté dentro pueda crecer si
   necesita más.
   ========================================================================== */
.cuerpo .bloque:has([class*="elfsight-app"]) > figure,
.cuerpo .bloque > figure > [class*="elfsight-app"] {
    min-height: 400px;
}

@media (max-width: 780px) {
    .cuerpo .bloque:has([class*="elfsight-app"]) > figure,
    .cuerpo .bloque > figure > [class*="elfsight-app"] {
        min-height: 520px;   /* en una columna las reseñas se apilan */
    }
}

/* Autoría de las fotos que no son propias, bajo la galería de la ficha */
.ficha__creditos {
    margin: 10px 0 0; font-size: 12.5px; color: var(--tinta-suave);
    line-height: 1.4;
}

/* ==========================================================================
   Buscador
   ========================================================================== */
.buscador-caja {
    position: relative;
    flex: 1 1 auto;
    /* min-width: 0 es imprescindible: sin él, este elemento flex no encoge por
       debajo del ancho de su contenido (el campo con su texto de ejemplo), y
       en móvil empujaba la hamburguesa fuera de la pantalla, provocando que la
       página se moviera un poco en horizontal. */
    min-width: 0;
    max-width: 420px;
    margin: 0 16px;
}
.buscador {
    display: flex; align-items: center; gap: 8px;
    /* BLANCO en todas las pantallas (móvil incluido): contrasta con la barra
       oscura y va a juego con el desplegable de resultados. */
    background: #fff;
    border: 1px solid #fff;
    border-radius: var(--radio);
    padding: 0 6px 0 13px;
    transition: box-shadow .15s;
}
/* Al escribir, un aro claro en color de marca: una sombra oscura no se vería
   sobre la barra negra, pero este halo sí, y ata el campo a los resultados. */
.buscador:focus-within {
    box-shadow: 0 0 0 3px var(--accion-suave);
}
.buscador__lupa { color: var(--tinta-suave); flex: 0 0 auto; }
.buscador__campo {
    flex: 1 1 auto; min-width: 0;
    background: none; border: 0; outline: 0;
    color: var(--tinta); font: inherit; font-size: 14.5px;
    padding: 7px 0;   /* 4 px menos de alto en la barra */
}
.buscador__campo::placeholder { color: var(--tinta-suave); }
/* Fuera el aspa nativa de los input[type=search] (la "X" azul de webkit): ya
   tenemos la nuestra (.buscador__limpiar); si no, saldrían dos. */
.buscador__campo::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
/* El aspa de borrar */
.buscador__limpiar {
    flex: 0 0 auto; width: 26px; height: 26px; border: 0; border-radius: 50%;
    background: none; cursor: pointer; font-size: 20px; line-height: 1;
    color: var(--tinta-suave);
}
.buscador__limpiar:hover { background: rgba(0, 0, 0, .08); }

/* Botón "Buscar" colapsado. Oculto por defecto (en móvil el campo va visible);
   en escritorio se muestra y, al pulsarlo, web.js despliega el campo. */
.buscador__toggle {
    display: none; align-items: center; gap: 7px;
    background: #fff; border: 1px solid #fff;
    border-radius: var(--radio); padding: 9px 16px;
    color: var(--tinta); font: inherit; font-size: 14px; line-height: 1;
    cursor: pointer; white-space: nowrap; transition: background .15s, color .15s;
}
.buscador__toggle:hover { background: var(--fondo-alt); }
.buscador__toggle .buscador__lupa { color: var(--tinta-suave); }

@media (min-width: 901px) {
    /* El campo va SIEMPRE visible (no hay botón ni despliegue); en escritorio le
       damos un ancho holgado de origen. El color blanco lo pone ya la base. */
    /* Ocupa el hueco que deje el menú, entre 140 y 300 px: con ancho fijo de
       300 el menú se salía de la barra por la derecha (cortaba el teléfono). */
    .buscador-caja { flex: 1 1 150px; min-width: 140px; max-width: 300px; margin: 0; }
    /* Un poco menos de aire en el menú para dejarle sitio al buscador */
    .barra__interior { gap: 18px; }
    .nav { gap: 16px; }
    .nav__item > a { padding: 10px 10px; }
}
/* Entre el salto a hamburguesa y las pantallas anchas no cabe todo: el menú se
   aprieta y el botón de llamar se queda solo con el icono (el número sigue en
   la barra de contacto y en el pie). */
@media (min-width: 1101px) and (max-width: 1250px) {
    .nav { gap: 10px; }
    .nav__item > a { padding: 10px 7px; font-size: 13.5px; }
    .nav__contacto .boton--llamar { font-size: 0; gap: 0; padding: 9px 12px; }
}

/* El desplegable */
.buscador__panel {
    /* El desplegable es más ancho que el campo: se ancla a la izquierda y se
       extiende hacia la derecha, así caben sin cortarse los nombres largos
       ("2 Cajas acústicas HK Audio Linear de alta gama…"). El tope en vw evita
       que se salga de la ventana en pantallas medianas. */
    position: absolute; top: calc(100% + 8px); left: 0; right: auto;
    width: 480px; max-width: 92vw;
    background: #fff; color: var(--tinta);
    border: 1px solid var(--linea); border-radius: var(--radio);
    box-shadow: var(--sombra-alta);
    max-height: min(70vh, 460px); overflow-y: auto;
    z-index: 60; padding: 6px;
}
.buscador__grupo {
    font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--tinta-suave); margin: 8px 10px 4px;
}
.buscador__op {
    display: flex; align-items: center; gap: 11px;
    padding: 8px 10px; border-radius: var(--radio-s);
    color: var(--tinta); text-decoration: none;
}
.buscador__op:hover,
.buscador__op.activa { background: var(--accion-suave); }
.buscador__op-foto {
    flex: 0 0 auto; width: 44px; height: 34px; object-fit: cover;
    border-radius: 5px; background: var(--fondo-alt); border: 1px solid var(--linea-suave);
}
.buscador__op-foto--vacia { display: block; }
.buscador__op-texto { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.buscador__op-nombre { font-size: 14px; font-weight: 600; }
.buscador__op-nombre mark { background: transparent; color: var(--accion); font-weight: 800; padding: 0; }
.buscador__op-meta { font-size: 12.5px; color: var(--tinta-suave); }
.buscador__op-tipo {
    margin-left: auto; font-size: 11px; color: var(--tinta-suave);
    border: 1px solid var(--linea); border-radius: 999px; padding: 2px 8px;
}
.buscador__todos {
    display: block; text-align: center; padding: 11px;
    margin-top: 4px; border-top: 1px solid var(--linea-suave);
    font-size: 13.5px; font-weight: 600; color: var(--accion); text-decoration: none;
}
.buscador__todos:hover,
.buscador__todos.activa { background: var(--accion-suave); border-radius: var(--radio-s); }
.buscador__vacio { padding: 16px 12px; color: var(--tinta-media); font-size: 14px; }

/* El buscador grande de la página de resultados: fondo claro, no barra oscura */
.buscador--pagina {
    max-width: 520px; margin: 20px auto 0;
    background: var(--fondo-alt); border-color: var(--linea);
    padding: 4px 4px 4px 15px;
}
.buscador--pagina .buscador__campo { color: var(--tinta); padding: 9px 0; }
.buscador--pagina .buscador__campo::placeholder { color: var(--tinta-suave); }
.buscar__mensaje, .buscar__resumen { font-size: 16px; color: var(--tinta-media); margin: 8px 0 20px; }
.buscar__seccion { font-size: 18px; margin: 26px 0 12px; }
.buscar__categorias { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 8px; }
.buscar__categorias a {
    display: inline-block; padding: 8px 16px; border: 1px solid var(--linea);
    border-radius: 999px; text-decoration: none; color: var(--tinta); font-weight: 600;
}
.buscar__categorias a:hover { background: var(--accion-suave); border-color: var(--accion); color: var(--accion); }

/* --- pantallas pequeñas: esto va al final para ganar por orden de fuente --- */
@media (max-width: 1100px) {
    /* En la barra de móvil el orden es logo · buscador · hamburguesa. El
       buscador se queda, que en el móvil es más útil que un logo grande, pero
       encoge y se le quita el margen ancho. */
    .buscador-caja { margin: 0 10px; max-width: none; }
}
@media (max-width: 520px) {
    /* En lo más estrecho, el desplegable ocupa todo el ancho de la ventana,
       no solo el del campo, para que quepan bien las miniaturas. */
    .buscador__panel {
        position: fixed; left: 8px; right: 8px; top: 64px;
    }
    .buscador__campo { font-size: 16px; }   /* 16px: así el móvil no hace zoom al enfocar */
}

/* ==========================================================================
   Banda "Cómo trabajamos" (páginas de DJ)
   ========================================================================== */
.pasos { background: var(--fondo-alt); padding: 54px 0; margin-top: 8px; }
.pasos__titulo { text-align: center; margin: 0 0 6px; }
.pasos__intro {
    text-align: center; color: var(--tinta-media); max-width: 52ch;
    margin: 0 auto 34px;
}
.pasos__lista {
    list-style: none; margin: 0; padding: 0;
    display: grid; gap: 20px;
    grid-template-columns: repeat(4, 1fr);
    counter-reset: paso;
}
.paso {
    position: relative;
    background: var(--fondo); border: 1px solid var(--linea);
    border-radius: var(--radio); padding: 26px 22px 22px;
}
.paso__num {
    position: absolute; top: -14px; left: 22px;
    width: 30px; height: 30px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--accion); color: #fff;
    font-weight: 800; font-size: 14px;
    box-shadow: 0 3px 8px rgba(209, 0, 48, .3);
}
.paso__icono {
    display: grid; place-items: center;
    width: 48px; height: 48px; border-radius: 12px;
    background: var(--accion-suave); color: var(--accion);
    margin: 6px 0 14px;
}
.paso__titulo { font-size: 16.5px; margin: 0 0 6px; }
.paso__texto { font-size: 14px; color: var(--tinta-media); margin: 0; line-height: 1.5; }

/* ==========================================================================
   Bloques de foto + texto de las páginas de servicio: un poco más de vida.
   Alternan lado, la foto se enmarca y sube un pelo al pasar por encima. No
   cambia el marcado ni el contenido; es solo cómo se ven.
   ========================================================================== */
.cuerpo .bloque:not(.bloque--ventajas):not(.bloque--galeria) figure img {
    box-shadow: var(--sombra);
    transition: transform .3s ease, box-shadow .3s ease;
}
.cuerpo .bloque:not(.bloque--ventajas):not(.bloque--galeria):hover figure img {
    transform: translateY(-4px);
    box-shadow: var(--sombra-alta);
}

/* --- pantallas pequeñas: al final para ganar por orden de fuente --- */
@media (max-width: 900px) {
    .pasos__lista { grid-template-columns: repeat(2, 1fr); gap: 22px 16px; }
}
@media (max-width: 480px) {
    .pasos { padding: 40px 0; }
    .pasos__lista { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Paginación
   ========================================================================== */
.paginacion {
    display: flex; align-items: center; justify-content: center;
    flex-wrap: wrap; gap: 8px 14px; margin: 34px 0 8px;
}
.paginacion__nums { display: flex; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; }
.paginacion__num {
    display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 6px;
    border: 1px solid var(--linea); border-radius: var(--radio-s);
    color: var(--tinta); text-decoration: none; font-weight: 600; font-size: 14.5px;
}
.paginacion__num:hover { border-color: var(--accion); color: var(--accion); text-decoration: none; }
.paginacion__num--actual {
    background: var(--accion); border-color: var(--accion); color: #fff; cursor: default;
}
.paginacion__hueco { color: var(--tinta-suave); padding: 0 2px; align-self: end; }
.paginacion__salto {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 0 14px; height: 40px; border-radius: var(--radio-s);
    font-weight: 600; font-size: 14.5px; color: var(--accion); text-decoration: none;
}
.paginacion__salto:hover { background: var(--accion-suave); text-decoration: none; }
.paginacion__salto--inerte { color: var(--tinta-suave); opacity: .55; }
.buscar__pag { color: var(--tinta-suave); font-weight: 400; }

@media (max-width: 480px) {
    /* En móvil, los saltos ocupan toda la fila y los números van en medio */
    .paginacion { gap: 10px; }
    .paginacion__salto { padding: 0 10px; }
    /* 40px es el mínimo cómodo para tocar con el dedo. */
    .paginacion__num { min-width: 40px; height: 40px; }
}


/* ==========================================================================
   Formularios (rediseño 03/10/2026)
   La tarjeta lleva una cabecera oscura, como la barra y el pie, para que se
   lea como "aquí se pide el presupuesto" y no como una caja blanca más. Los
   campos van con fondo suave y borde visible: en blanco sobre blanco apenas
   se distinguían, sobre todo en el móvil.
   ========================================================================== */
.formulario { padding: 0; border: 0; border-radius: 14px; overflow: hidden;
    box-shadow: 0 1px 2px rgba(23,18,20,.06), 0 14px 34px rgba(23,18,20,.10); }
.formulario > * { margin-left: 26px; margin-right: 26px; }
.formulario > .trampa { margin: 0; }
.formulario__cab { margin: 0 0 22px; padding: 20px 26px 18px; background: #171214; color: #fff;
    border-bottom: 3px solid var(--accion); }
.formulario__titulo { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; }
.formulario__sub { margin: 5px 0 0; font-size: 13px; color: rgba(255,255,255,.72); }
.formulario > .aviso-form { margin-bottom: 18px; }

.formulario .campo { gap: 7px; margin-bottom: 14px; }
.formulario .campo label:not(.consentimiento) { font-size: 12px; font-weight: 700;
    letter-spacing: .07em; text-transform: uppercase; color: var(--tinta-media); }
.formulario .campo input:not([type="checkbox"]), .formulario .campo textarea, .formulario .campo select {
    background: #f6f3f4; border: 1.5px solid #e2dcde; border-radius: 10px;
    padding: 13px 14px; font-size: 16px;   /* 16px: el iPhone no hace zoom al tocar */
    transition: border-color .15s, background-color .15s, box-shadow .15s; }
.formulario .campo input:not([type="checkbox"]):hover, .formulario .campo textarea:hover { border-color: #cbc2c5; }
.formulario .campo input:not([type="checkbox"]):focus, .formulario .campo textarea:focus {
    background: #fff; border-color: var(--accion); box-shadow: 0 0 0 4px rgba(209,0,48,.12); }
.formulario .campo textarea::placeholder { color: #8c8286; }
.formulario .campo__error:empty { display: none; }
.formulario .campo--mal input:not([type="checkbox"]), .formulario .campo--mal textarea {
    border-color: var(--accion); background: #fff5f7; }
.formulario .campo--consentimiento { margin: 4px 26px 18px; padding: 12px 14px;
    background: #f6f3f4; border-radius: 10px; }
.formulario__enviar { min-height: 52px; font-size: 16.5px; border-radius: 10px; width: calc(100% - 52px); }
.formulario__enviar::after { content: "→"; margin-left: 10px; transition: transform .15s; display: inline-block; }
.formulario__enviar:hover::after { transform: translateX(4px); }
.formulario .formulario__aviso { margin: 14px 26px 22px; font-size: 13.5px; }
.formulario__aviso a { font-weight: 700; white-space: nowrap; }

/* El del presupuesto no lleva cabecera: recupera su aire por arriba. Es una
   tarjeta dentro de la del resumen. */
.formulario--presupuesto { padding: 22px 0 0; margin-top: 0; background: #fff;
    border-radius: 0; box-shadow: none; }
.formulario.formulario--presupuesto > * { margin-left: var(--lado); margin-right: var(--lado); }
.formulario--presupuesto > button[type="submit"] { width: auto; min-height: 48px; border-radius: 10px; }
/* Más prieto que los demás formularios: va debajo del resumen y, con el aire
   de siempre, obligaba a bajar demasiado para llegar al botón. La letra de los
   campos sigue a 16px (con menos, el iPhone hace zoom al tocarlos). */
.formulario--presupuesto { padding-top: 16px; }
.formulario--presupuesto .campo { gap: 5px; margin-bottom: 15px; }
.formulario--presupuesto .campo label:not(.consentimiento) { font-size: 11.5px; }
.formulario--presupuesto .campo input:not([type="checkbox"]),
.formulario--presupuesto .campo textarea { padding: 8px 12px; }
.formulario--presupuesto .campo textarea { min-height: 60px; }
.formulario.formulario--presupuesto .campo--consentimiento { margin: 2px var(--lado) 16px; padding: 9px 12px; }
/* Dos columnas solo para la pareja nombre + teléfono; lo demás, a lo ancho. */
.formulario--presupuesto { display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; padding-bottom: 20px; }
.formulario--presupuesto > * { grid-column: 1 / -1; }
.formulario--presupuesto > .campo--media { grid-column: auto; min-width: 0; }
.formulario.formulario--presupuesto > .campo--media { margin-right: 0; }
.formulario.formulario--presupuesto > .campo--media + .campo--media { margin-left: 0; margin-right: var(--lado); }

@media (max-width: 900px) {
    .formulario { padding: 0; }
    .formulario > * { margin-left: 18px; margin-right: 18px; }
    .formulario__cab { margin: 0 0 18px; padding: 18px 18px 16px; }
    .formulario .campo--consentimiento { margin: 4px 18px 16px; }
    .formulario .formulario__aviso { margin: 14px 18px 20px; }
    .formulario__enviar { width: calc(100% - 36px); }
    /* Presupuesto en el móvil: menos margen por dentro, para que los campos
       no se queden estrechos. El mismo en toda la tarjeta. */
    .presupuesto__resumen { --lado: 16px; }
    .formulario.formulario--presupuesto { padding: 16px 0 18px; }
}
@media (prefers-reduced-motion: reduce) {
    .formulario .campo input, .formulario .campo textarea, .formulario__enviar::after { transition: none; }
}


/* ==========================================================================
   Páginas legales (rediseño 03/10/2026)
   Texto largo que hay que poder leer: apartados numerados con el rojo de la
   marca, línea más corta y más aire. La numeración sale de un contador de
   CSS, así que vale para cualquier página legal sin tocar su contenido.
   ========================================================================== */
.cuerpo--texto { background: var(--fondo-alt); padding: 34px 0 56px; }
.cuerpo--texto .bloque { background: #fff; border: 1px solid var(--linea); border-radius: 14px;
    padding: 38px 44px; max-width: 880px; margin: 0 auto;
    box-shadow: 0 1px 2px rgba(23,18,20,.04), 0 10px 28px rgba(23,18,20,.05); }
.cuerpo--texto .prosa { max-width: none; counter-reset: apartado; font-size: 16px; line-height: 1.7; }
.cuerpo--texto .prosa h2 { counter-increment: apartado; position: relative;
    font-size: 19px; line-height: 1.3; margin: 2.2em 0 .7em; padding: 0 0 0 52px;
    border: 0; min-height: 36px; display: flex; align-items: center; }
.cuerpo--texto .prosa h2::before { content: counter(apartado); position: absolute; left: 0; top: 0;
    width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center;
    background: var(--accion-suave); color: var(--accion); font-size: 15px; font-weight: 800;
    font-variant-numeric: tabular-nums; }
.cuerpo--texto .prosa h2:first-child { margin-top: 0; }
/* Gana a dos reglas generales de .cuerpo: la que centra un bloque de texto
   único y la que le pone una rayita al primer título. */
.cuerpo.cuerpo--texto .bloque:first-child:has(> .prosa:only-child) { text-align: left; }
.cuerpo.cuerpo--texto .bloque > .prosa > h2:first-child { padding: 0 0 0 52px; }
.cuerpo.cuerpo--texto .bloque > .prosa > h2:first-child::before { content: counter(apartado);
    left: 0; top: 0; width: 36px; height: 36px; border-radius: 10px; margin: 0; transform: none;
    background: var(--accion-suave); }
.cuerpo--texto .prosa h2 ~ p, .cuerpo--texto .prosa h2 ~ ul { margin-left: 52px; }
.cuerpo--texto .prosa p { margin: 0 0 .95em; }
.cuerpo--texto .prosa strong { color: var(--tinta); }
.cuerpo--texto .prosa a { text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 700px) {
    .cuerpo--texto { padding: 18px 0 36px; }
    .cuerpo--texto .bloque { padding: 24px 18px; border-radius: 12px; }
    .cuerpo--texto .prosa { font-size: 15.5px; }
    .cuerpo--texto .prosa h2 { font-size: 17.5px; padding-left: 44px; min-height: 32px; }
    .cuerpo--texto .prosa h2::before { width: 32px; height: 32px; border-radius: 9px; font-size: 14px; }
    .cuerpo.cuerpo--texto .bloque > .prosa > h2:first-child { padding-left: 44px; }
    .cuerpo.cuerpo--texto .bloque > .prosa > h2:first-child::before { width: 32px; height: 32px; border-radius: 9px; }
    .cuerpo--texto .prosa h2 ~ p, .cuerpo--texto .prosa h2 ~ ul { margin-left: 0; }
}


/* ==========================================================================
   «Más info» en las tarjetas y en la ficha, y su hoja de contacto
   En el móvil el único botón era «Añadir» y parecía que todo pasaba por el
   presupuesto. Ahora van dos: a la izquierda, en rojo, «Añadir»; a la derecha,
   en verde, «Más info», que abre una hoja para llamar o escribir por WhatsApp.
   ========================================================================== */
.boton--info { background: #127f3e; color: #fff; }
.boton--info:hover { background: #0f6c34; color: #fff; }
/* Igual en todas las pantallas: el precio arriba y debajo los dos botones a
   partes iguales. Con los botones al lado del precio, las tarjetas de precio
   largo los bajaban de línea y las filas quedaban desiguales. */
.tarjeta__pie { flex-direction: column; align-items: stretch; gap: 10px; }
.tarjeta__acciones { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.tarjeta__acciones .boton { white-space: nowrap; min-width: 0; }
@media (max-width: 620px) {
    .tarjeta__acciones .boton { padding: 10px 4px; font-size: 13.5px; }
}

.hoja-info { position: fixed; inset: 0; z-index: 80; display: flex; align-items: flex-end;
    justify-content: center; background: rgba(23,18,20,.55); }
.hoja-info__panel { width: 100%; max-width: 460px; background: #fff; color: var(--tinta);
    border-radius: 20px 20px 0 0; padding: 10px 20px calc(22px + env(safe-area-inset-bottom));
    box-shadow: 0 -12px 40px rgba(23,18,20,.28); animation: hoja-sube .22s ease-out; }
/* Zona de agarre: toda la franja de arriba, no solo la rayita, para que el
   dedo la encuentre. Arrastrándola hacia abajo se cierra la hoja. */
.hoja-info__agarre { margin: -10px -20px 6px; padding: 12px 0 14px; cursor: grab; touch-action: none; }
.hoja-info__asa { width: 46px; height: 5px; border-radius: 3px; background: #cfc8cb; margin: 0 auto; }
.hoja-info__panel.arrastrando { transition: none; }
.hoja-info__panel { transition: transform .2s ease-out; }
@media (max-width: 620px) {
    .ficha__acciones { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
    .ficha__telefono, .ficha__anadir-largo { display: none; }
}
.hoja-info__sobre { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--accion); }
.hoja-info__nombre { margin: 4px 0 6px; font-size: 19px; font-weight: 800; line-height: 1.25; }
.hoja-info__texto { margin: 0 0 16px; font-size: 14.5px; color: var(--tinta-media); line-height: 1.5; }
.hoja-info__botones { display: grid; gap: 9px; }
.hoja-info__boton { display: flex; align-items: center; justify-content: center; gap: 9px;
    min-height: 52px; border-radius: 13px; font-weight: 700; font-size: 16px; color: #fff; }
.hoja-info__boton:hover { text-decoration: none; color: #fff; }
.hoja-info__boton--wa { background: #127f3e; }
.hoja-info__boton--llamar { background: var(--accion); }
.hoja-info__pie { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; }
.hoja-info__ficha { font-size: 14.5px; font-weight: 700; }
.hoja-info__cerrar { border: 0; background: none; font: inherit; font-size: 14.5px;
    color: var(--tinta-media); padding: 8px 4px; cursor: pointer; }
/* Elegir opción al añadir un producto con precio "desde": una fila por
   opción, con lo que es a la izquierda y su precio a la derecha. */
.hoja-info--opciones .hoja-info__panel { padding-top: 22px; }
.hoja-info--opciones .hoja-info__nombre { margin-bottom: 14px; }
.hoja-info__opciones { display: grid; gap: 8px; max-height: 58vh; overflow-y: auto; }
.hoja-info__opcion { display: flex; align-items: center; justify-content: space-between; gap: 14px;
    width: 100%; min-height: 52px; padding: 10px 16px; border: 1.5px solid #e4dde0; border-radius: 13px;
    background: #fff; color: var(--tinta); font: inherit; font-size: 15.5px; font-weight: 600;
    text-align: left; cursor: pointer; }
.hoja-info__opcion strong { flex: none; font-weight: 800; color: var(--accion); white-space: nowrap; }
.hoja-info__opcion:hover, .hoja-info__opcion:focus-visible { border-color: var(--accion); background: #fdf5f6; }
/* En la ficha del producto no hay enlace «Ver la ficha completa» al lado:
   «Cerrar» va solo y se centra. */
.hoja-info__cerrar:only-child { margin: 0 auto; padding: 8px 18px; }
/* En ordenador no es una hoja que sube desde abajo sino una ventana centrada. */
@media (min-width: 621px) {
    .hoja-info { align-items: center; padding: 20px; }
    .hoja-info__panel { border-radius: 18px; padding: 26px 26px 20px; animation: hoja-aparece .18s ease-out; }
    .hoja-info__agarre { display: none; }
}
@keyframes hoja-aparece { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes hoja-sube { from { transform: translateY(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .hoja-info__panel { animation: none; transition: none; }
    .lightbox__grande { transition: none; }
}


/* Botón del teléfono en la barra, en ordenador: menos alto, a la medida del
   buscador que tiene al lado (antes sobresalía). En el menú del móvil no cambia. */
@media (min-width: 1251px) {
    .nav__contacto .boton--llamar { padding: 7px 18px; }
}

/* Horario en el menú del móvil: una línea por tramo. */
.nav__horario span { display: block; }
.nav__horario strong { color: #b9b0b4; font-weight: 600; }

/* Contador y orden en el móvil: en una sola fila, el contador a la izquierda
   y el desplegable a la derecha. Antes «Ordenar por» no cabía al lado, saltaba
   a una segunda línea y quedaba descolgado a media anchura. La etiqueta se
   oculta a la vista (el desplegable ya dice «Recomendado», «Precio…») pero
   sigue ahí para los lectores de pantalla. */
@media (max-width: 620px) {
    .filtros { flex-wrap: nowrap; align-items: center; gap: 12px; padding-bottom: 14px; margin-bottom: 18px; }
    .filtros__cuenta { flex: 0 0 auto; }
    .filtros__orden { flex: 0 1 auto; min-width: 0; }
    .filtros__orden label { position: absolute; width: 1px; height: 1px; overflow: hidden;
        clip-path: inset(50%); white-space: nowrap; }
    .filtros select { width: 100%; max-width: 190px; text-overflow: ellipsis; }
}

/* ==========================================================================
   Página de «enviado» (gracias)
   Una tarjeta oscura, con el rojo de la marca asomando por arriba, sobre el
   fondo claro: se distingue de la barra y del pie, que también son oscuros.
   El visto se dibuja solo una vez al entrar (trazo de SVG, sin JavaScript).
   ========================================================================== */
.gracias { background: var(--fondo-alt); padding: 54px 0 70px; }
.gracias__tarjeta {
    max-width: 780px; margin: 0 auto; padding: 46px 40px 40px; text-align: center; color: #fff;
    border-radius: 22px; overflow: hidden;
    background: #171214 radial-gradient(120% 90% at 50% -10%, rgba(255, 28, 66, .30), rgba(255, 28, 66, 0) 60%);
    box-shadow: 0 24px 60px rgba(23, 18, 20, .28);
}
.gracias__sello { width: 84px; height: 84px; margin: 0 auto 18px; }
.gracias__sello svg { display: block; width: 100%; height: 100%; }
.gracias__aro, .gracias__check { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.gracias__aro { stroke: #2fd27a; stroke-width: 3; stroke-dasharray: 239; stroke-dashoffset: 239;
    transform: rotate(-90deg); transform-origin: 50% 50%;
    animation: gracias-traza .7s ease-out .15s forwards; }
.gracias__check { stroke: #fff; stroke-width: 4.5; stroke-dasharray: 48; stroke-dashoffset: 48;
    animation: gracias-traza .35s ease-out .75s forwards; }
@keyframes gracias-traza { to { stroke-dashoffset: 0; } }
.gracias__sobre { margin: 0 0 8px; font-size: 12.5px; font-weight: 700; letter-spacing: .14em;
    text-transform: uppercase; color: #2fd27a; }
.gracias h1 { margin: 0 0 12px; color: #fff; font-size: clamp(27px, 4.4vw, 40px); letter-spacing: -.02em; }
.gracias__texto { margin: 0 auto 28px; max-width: 46ch; font-size: 17px; line-height: 1.55; color: rgba(255, 255, 255, .78); }
.gracias__pasos { list-style: none; margin: 0 0 30px; padding: 0; counter-reset: paso;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; text-align: left; }
.gracias__pasos li { counter-increment: paso; padding: 16px 16px 17px; border-radius: 14px;
    background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .10);
    font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, .72); }
.gracias__pasos li::before { content: counter(paso); display: grid; place-items: center;
    width: 28px; height: 28px; margin-bottom: 10px; border-radius: 8px;
    background: var(--accion); color: #fff; font-weight: 800; font-size: 13.5px; }
.gracias__pasos strong { display: block; margin-bottom: 3px; color: #fff; font-size: 15px; }
.gracias__pasos span { display: block; }
.gracias__acciones { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.gracias__acciones .boton--linea { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .32); }
.gracias__acciones .boton--linea:hover { border-color: #fff; color: #fff; }
@media (max-width: 700px) {
    .gracias { padding: 20px 0 40px; }
    .gracias__tarjeta { padding: 34px 18px 22px; border-radius: 18px; }
    .gracias__sello { width: 72px; height: 72px; }
    .gracias__texto { font-size: 16px; margin-bottom: 22px; }
    .gracias__pasos { grid-template-columns: 1fr; gap: 9px; margin-bottom: 22px; }
    /* En el móvil, el número a la izquierda y el texto a su lado. */
    .gracias__pasos li { display: grid; grid-template-columns: 28px 1fr; column-gap: 13px; padding: 14px; }
    .gracias__pasos li::before { grid-row: 1 / span 2; margin: 2px 0 0; }
    .gracias__pasos strong, .gracias__pasos span { grid-column: 2; }
    .gracias__acciones .boton { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .gracias__aro, .gracias__check { animation: none; stroke-dashoffset: 0; }
}

/* ==========================================================================
   Ejemplos de servicio con precio (páginas de DJ)

   Dos tarjetas con el nombre, el precio en grande y lo que incluye. Antes eran
   dos carteles escaneados (detalle-precio.jpg y maximo-servicio.jpg), torcidos
   y con el precio dentro de la imagen. Ahora son texto: se leen en el móvil,
   los encuentra Google y el precio se cambia desde el panel.
   En las páginas de escena oscura, landing.css les cambia los colores.
   ========================================================================== */
.bloque--ejemplos { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: stretch; }
.cuerpo .bloque--ejemplos { gap: 20px; align-items: stretch; }
.bloque--ejemplos > .prosa { grid-column: 1 / -1; }
.ejemplo {
    position: relative; display: flex; flex-direction: column; overflow: hidden;
    padding: 32px 28px 28px; border-radius: 20px;
    background: #fff; border: 1px solid var(--linea); box-shadow: var(--sombra);
}
.ejemplo::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
    background: linear-gradient(90deg, var(--marca), var(--accion) 60%, transparent);
}
.ejemplo__nombre {
    margin: 0; font-size: 12.5px; font-weight: 800; line-height: 1.3;
    letter-spacing: .16em; text-transform: uppercase; color: var(--accion);
}
.ejemplo__precio {
    display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; margin: 12px 0 0;
    font-size: clamp(46px, 6vw, 62px); font-weight: 800; line-height: 1; letter-spacing: -.035em;
    color: var(--tinta);
}
.ejemplo__precio span {
    padding: 6px 13px; border-radius: 999px; font-size: 12.5px; font-weight: 700; letter-spacing: .02em;
    line-height: 1.2; background: var(--fondo-alt); border: 1px solid var(--linea); color: var(--tinta-media);
}
.ejemplo__lista {
    list-style: none; display: grid; gap: 13px;
    margin: 26px 0 0; padding: 24px 0 0; border-top: 1px solid var(--linea);
}
.ejemplo__lista li { position: relative; margin: 0; padding-left: 33px; font-size: 15.5px; line-height: 1.4; color: var(--tinta); }
.ejemplo__lista li::before {
    content: ""; position: absolute; left: 0; top: -1px; width: 22px; height: 22px; border-radius: 50%;
    background: var(--accion-suave) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23d10030' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round' d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.ejemplo__pie { margin: auto 0 0; padding-top: 28px; }
.ejemplo__pie .boton, .ejemplo__pie .boton:hover { text-decoration: none; }
/* El completo es el destacado: borde y sombra de marca */
.ejemplo--completo { border-color: var(--accion); box-shadow: 0 18px 44px rgba(209, 0, 48, .16); }
@media (min-width: 760px) {
    .bloque--ejemplos, .cuerpo .bloque--ejemplos { grid-template-columns: 1fr 1fr; gap: 24px; }
}