/* ==========================================================================
   Cartple · "Vanguardia Blanca"
   Directorio público. Se carga DESPUÉS de Bootstrap y lo reajusta mediante
   sus propias variables (--bs-*), así que las vistas siguen usando su rejilla.

   Paleta:  blanco #FFFFFF · negro #000000 · azul noche #0F172A (acento)
   Tipos:   DM Serif Display (títulos) · Lato (texto)
   ========================================================================== */

/* Las @font-face (DM Serif Display, Lato y sus fuentes de reserva con las mismas medidas)
   están en fonts.css, que se carga antes que este archivo. */

:root {
    color-scheme: light;           /* controles nativos claros aunque el sistema esté en modo oscuro */
    /* ---- Paleta ---- */
    --cp-white: #FFFFFF;
    --cp-black: #000000;
    --cp-night: #0F172A;            /* acentos, enlaces y botones */
    --cp-night-hover: #1E293B;
    --cp-muted: #595959;            /* texto secundario: contraste 7:1 sobre blanco (WCAG AAA) */
    --cp-hairline: rgba(0, 0, 0, .08);
    --cp-surface: #F7F7F7;          /* fondo neutro para huecos sin foto */

    /* ---- Tipografía ---- */
    --cp-font-display: "DM Serif Display", "DM Serif Display Fallback", Georgia, "Times New Roman", serif;
    --cp-font-body: "Lato", "Lato Fallback", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

    /* ---- Sombras (difuminadas, estilo Apple) ---- */
    --cp-shadow-sm: 0 1px 2px rgba(0, 0, 0, .04), 0 4px 16px rgba(0, 0, 0, .04);
    --cp-shadow-md: 0 2px 6px rgba(0, 0, 0, .05), 0 16px 40px rgba(0, 0, 0, .08);
    --cp-shadow-lg: 0 4px 12px rgba(0, 0, 0, .06), 0 28px 64px rgba(0, 0, 0, .12);

    /* ---- Ritmo ---- */
    --cp-radius: 20px;
    --cp-ease: cubic-bezier(.2, .7, .2, 1);
    --cp-section-space: clamp(4rem, 9vw, 8rem);

    /* ---- Bootstrap reajustado a la paleta ---- */
    --bs-body-bg: var(--cp-white);
    --bs-body-bg-rgb: 255, 255, 255;
    --bs-body-color: var(--cp-black);
    --bs-body-color-rgb: 0, 0, 0;
    --bs-emphasis-color: var(--cp-black);
    --bs-secondary-color: var(--cp-muted);
    --bs-tertiary-bg: var(--cp-surface);
    --bs-border-color: var(--cp-hairline);
    --bs-body-font-family: var(--cp-font-body);
    --bs-body-font-size: 1.0625rem;
    --bs-body-line-height: 1.65;
    --bs-link-color: var(--cp-night);
    --bs-link-color-rgb: 15, 23, 42;
    --bs-link-hover-color: var(--cp-black);
    --bs-link-hover-color-rgb: 0, 0, 0;
    --bs-dark-rgb: 15, 23, 42;
    --bs-focus-ring-color: rgba(15, 23, 42, .25);
    --bs-border-radius: 12px;
    --bs-border-radius-lg: var(--cp-radius);
    --bs-border-radius-pill: 999px;
}

/* ==========================================================================
   Base
   ========================================================================== */

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    background: var(--cp-white);
    color: var(--cp-black);
    font-family: var(--cp-font-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, .h1, .h2, .h3, .display-1, .display-2, .display-3, .display-4, .display-5, .display-6, .cp-serif {
    font-family: var(--cp-font-display);
    font-weight: 400;               /* DM Serif Display solo tiene un peso */
    letter-spacing: -.015em;
    line-height: 1.1;
    color: var(--cp-black);
}

h4, h5, h6, .h4, .h5, .h6 { font-family: var(--cp-font-body); font-weight: 700; }

a { text-underline-offset: .2em; text-decoration-thickness: 1px; }

::selection { background: var(--cp-night); color: var(--cp-white); }

:focus-visible { outline: 2px solid var(--cp-night); outline-offset: 3px; }

/* height:auto: con los atributos width/height (que evitan saltos de diseño) y max-width,
   sin esto la foto se estiraba al estrecharse. */
img { max-width: 100%; height: auto; }

/* ---- Marco de foto "de revista" ----
   Cualquier foto, sea del tamaño que sea, llena el marco 4:5 recortándose por el centro
   (object-fit: cover): nunca se deforma ni deja bandas. Variantes: --landscape (3:2), --square. */
.cp-media {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--cp-surface);
}
.cp-media--landscape { aspect-ratio: 3 / 2; }
.cp-media--square { aspect-ratio: 1 / 1; }
.cp-media > img,
.cp-media > picture > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center;
}

.text-body-secondary { color: var(--cp-muted) !important; }

/* Etiqueta pequeña en versalitas: "ZONAS", "RECIÉN LLEGADAS"… */
.cp-eyebrow {
    display: inline-block;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--cp-muted);
}

.cp-section { padding-block: var(--cp-section-space); }

.cp-section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

.cp-section-title { font-size: clamp(2rem, 4.5vw, 3.25rem); margin: .35rem 0 0; }

/* Enlace "Ver todas →" */
.cp-link-arrow {
    color: var(--cp-night);
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
    transition: opacity .2s var(--cp-ease);
}
.cp-link-arrow:hover { opacity: .6; color: var(--cp-night); }

/* ==========================================================================
   Botones: sobrios, en azul noche. Nada de colores chillones.
   ========================================================================== */

/* Píldora "Apple": radio 50px, mismo alto y relleno en todas, icono y texto centrados en una línea. */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    border-radius: 50px;
    padding: .75rem 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .01em;
    white-space: nowrap;
    transition: all .2s var(--cp-ease);
}
.btn > svg { flex: none; display: block; }
.btn-sm { padding: .5rem 1.1rem; gap: .4rem; }
.btn-sm > svg { width: 16px; height: 16px; }
.btn-lg { padding: .95rem 2rem; font-size: 1.0625rem; }

.btn-dark, .cp-btn {
    --bs-btn-bg: var(--cp-night);
    --bs-btn-border-color: var(--cp-night);
    --bs-btn-color: var(--cp-white);
    --bs-btn-hover-bg: var(--cp-night-hover);
    --bs-btn-hover-border-color: var(--cp-night-hover);
    --bs-btn-hover-color: var(--cp-white);
    --bs-btn-active-bg: var(--cp-black);
    --bs-btn-active-border-color: var(--cp-black);
    --bs-btn-disabled-bg: var(--cp-night);
    --bs-btn-disabled-border-color: var(--cp-night);
    border-radius: 999px;
}

.btn-outline-dark {
    --bs-btn-color: var(--cp-night);
    --bs-btn-border-color: rgba(15, 23, 42, .2);
    --bs-btn-hover-bg: var(--cp-night);
    --bs-btn-hover-border-color: var(--cp-night);
    --bs-btn-hover-color: var(--cp-white);
    --bs-btn-active-bg: var(--cp-black);
    border-radius: 999px;
}

.btn-light { --bs-btn-bg: var(--cp-white); --bs-btn-border-color: var(--cp-hairline); border-radius: 999px; }

/* Botón "texto": sin caja, solo subrayado fino al pasar */
.cp-btn-text {
    background: none;
    border: 0;
    padding: 0;
    color: var(--cp-night);
    font-weight: 700;
    font-size: .9375rem;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    text-decoration: none;
}
.cp-btn-text:hover { text-decoration: underline; }
.cp-btn-text:disabled { opacity: .5; }

/* ==========================================================================
   Cabecera: blanca, translúcida y con línea de 1px (estilo Apple)
   ========================================================================== */

.cp-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    border-bottom: 1px solid var(--cp-hairline);
}
/* El cristal va en una capa aparte: un backdrop-filter en la propia cabecera haría que el menú
   móvil (position: fixed, dentro de ella) midiera lo que la cabecera y no la pantalla entera. */
.cp-header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(255, 255, 255, .82);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
}

.cp-header .navbar { min-height: 64px; }
/* Móvil: el logo y la hamburguesa se separan de los bordes. */
@media (max-width: 767.98px) {
    .cp-header .navbar { min-height: 72px; padding: 1rem 1.5rem; }
}

.cp-brand {
    font-family: var(--cp-font-display);
    font-size: 1.75rem;
    letter-spacing: -.02em;
    color: var(--cp-black);
    text-decoration: none;
}
.cp-brand:hover { color: var(--cp-black); }

.cp-header .nav-link {
    color: var(--cp-black);
    font-size: .9375rem;
    padding-inline: .9rem !important;
    opacity: .7;
    transition: opacity .2s var(--cp-ease);
}
.cp-header .nav-link:hover, .cp-header .nav-link.active { opacity: 1; color: var(--cp-black); }


/* ==========================================================================
   Hero de la portada: inmenso, centrado y con mucho blanco
   ========================================================================== */

.cp-hero {
    padding-top: clamp(5rem, 14vw, 11rem);
    padding-bottom: clamp(4rem, 10vw, 8rem);
    text-align: center;
}

.cp-hero-title {
    font-size: clamp(3rem, 9vw, 7.5rem);
    line-height: .98;
    letter-spacing: -.03em;
    max-width: 14ch;
    margin: 1.5rem auto 0;
}

.cp-hero-lead {
    font-size: clamp(1.125rem, 1.6vw, 1.375rem);
    font-weight: 300;
    color: var(--cp-muted);
    max-width: 38rem;
    margin: 2rem auto 0;
    line-height: 1.6;
}

.cp-hero-search { max-width: 980px; margin: clamp(3rem, 6vw, 4.5rem) auto 0; }

.cp-zones {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .25rem 1.75rem;
    margin-top: 2.25rem;
    font-size: .9375rem;
}
.cp-zones a { color: var(--cp-black); text-decoration: none; opacity: .65; transition: opacity .2s var(--cp-ease); }
.cp-zones a:hover { opacity: 1; text-decoration: underline; }

/* ==========================================================================
   Buscador flotante tipo píldora
   ========================================================================== */

.cp-search {
    display: flex;
    align-items: center;
    background: var(--cp-white);
    border: 1px solid var(--cp-hairline);
    border-radius: 999px;
    box-shadow: var(--cp-shadow-md);
    padding: .5rem .5rem .5rem 0;
    transition: box-shadow .3s var(--cp-ease);
}
.cp-search:focus-within { box-shadow: var(--cp-shadow-lg); }

.cp-search-field {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    padding: .35rem 1.75rem;
}
.cp-search-field--grow { flex-grow: 1.6; }

/* Separador vertical de 1px entre campos */
.cp-search-field + .cp-search-field::before {
    content: "";
    position: absolute;
    left: 0;
    top: 20%;
    bottom: 20%;
    width: 1px;
    background: var(--cp-hairline);
}

.cp-search-label {
    display: block;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--cp-black);
    margin-bottom: .1rem;
}

.cp-search-input,
.cp-search-select {
    display: block;
    width: 100%;
    border: 0;
    background: transparent;
    padding: 0;
    font: inherit;
    font-size: 1rem;
    color: var(--cp-black);
    outline: none;
    text-overflow: ellipsis;
}
.cp-search-input::placeholder { color: var(--cp-muted); opacity: 1; }
/* Select nativo (móvil y sin JS): sin aspecto del sistema, con una flecha fina propia. */
.cp-search-select {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    padding-right: 1.25rem;
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right center;
}
/* Si el sistema pinta la lista nativa, que al menos sea blanca y negra (no oscura ni azul). */
.cp-search-select option,
.cp-search-select optgroup { background: var(--cp-white); color: var(--cp-black); }
.cp-search-field:focus-within .cp-search-label { color: var(--cp-night); }

.cp-search-submit {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    height: 3.5rem;
    min-width: 3.5rem;
    padding: 0 1.6rem;
    border: 0;
    border-radius: 999px;
    background: var(--cp-night);
    color: var(--cp-white);
    font-weight: 700;
    transition: background .2s var(--cp-ease), transform .2s var(--cp-ease);
}
.cp-search-submit:hover { background: var(--cp-night-hover); }
.cp-search-submit:active { transform: scale(.97); }

.cp-search-extra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .75rem 1.5rem;
    margin-top: 1.5rem;
}

/* ---- "Cerca de mí": píldora grande de acento debajo del buscador ---- */
:root {
    --cp-accent: #C2410C;           /* terracota: contraste 5.2:1 con texto blanco (WCAG AA) */
    --cp-accent-hover: #9A3412;
}
.cp-nearby {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    min-height: 4rem;
    padding: .55rem .7rem .55rem .6rem;
    border: 0;
    border-radius: 999px;
    background: var(--cp-accent);
    color: var(--cp-white);
    font-family: var(--cp-font-body);
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.1;
    box-shadow: 0 6px 20px rgba(194, 65, 12, .28);
    transition: background-color .2s var(--cp-ease), transform .2s var(--cp-ease), box-shadow .2s var(--cp-ease);
}
.cp-nearby:hover { background: var(--cp-accent-hover); box-shadow: 0 8px 26px rgba(194, 65, 12, .36); }
.cp-nearby:active { transform: scale(.97); }
.cp-nearby:focus-visible { outline: 3px solid var(--cp-night); outline-offset: 3px; }
.cp-nearby:disabled { opacity: .85; cursor: progress; }
.cp-nearby.is-active { background: var(--cp-night); box-shadow: var(--cp-shadow-sm); }   /* ya filtrando por cercanía */

/* Círculo blanco con el pin y, detrás, una onda de radar que se expande. */
.cp-nearby-icon {
    position: relative;
    display: grid;
    place-items: center;
    width: 2.85rem;
    height: 2.85rem;
    flex: none;
    border-radius: 50%;
    background: var(--cp-white);
    color: var(--cp-accent);
}
.cp-nearby.is-active .cp-nearby-icon { color: var(--cp-night); }
.cp-nearby-icon > * { grid-area: 1 / 1; }
.cp-nearby-pulse {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid var(--cp-white);
    animation: cp-radar 2.2s var(--cp-ease) infinite;
    pointer-events: none;
}
.cp-nearby-spinner { display: none; color: var(--cp-accent); }
.cp-nearby.is-loading .cp-nearby-pin,
.cp-nearby.is-loading .cp-nearby-pulse { display: none; }
.cp-nearby.is-loading .cp-nearby-spinner { display: block; }

.cp-nearby-label { padding-inline: .1rem; white-space: nowrap; }
.cp-nearby-km {
    padding: .35rem .7rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .18);
    font-size: .8125rem;
    letter-spacing: .02em;
    white-space: nowrap;
}

.cp-nearby-feedback {
    flex-basis: 100%;
    font-size: .875rem;
    color: #B42318;
    text-align: center;
}
.cp-search--compact + .cp-search-extra .cp-nearby-feedback { text-align: left; }

@keyframes cp-radar {
    0% { transform: scale(1); opacity: .8; }
    80%, 100% { transform: scale(1.75); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .cp-nearby-pulse { animation: none; opacity: 0; }
}

/* Debajo del buscador grande: centrado y con aire. En la versión compacta (resultados), algo menor. */
.cp-search--compact + .cp-search-extra .cp-nearby { min-height: 3rem; font-size: 1rem; padding-block: .35rem; }
.cp-search--compact + .cp-search-extra .cp-nearby-icon { width: 2.15rem; height: 2.15rem; }

/* ---- Desplegable propio (public/js/select.js): los estilos comunes están en cartple-ui.css.
   Aquí solo lo del buscador: la lista sale algo más abajo y alineada con el texto del campo. ---- */
.cp-search-field .cp-select-list {
    top: calc(100% + .9rem);
    left: .75rem;
    min-width: calc(100% - 1.5rem);
}
.cp-search-field.is-open .cp-select-button::after { transform: rotate(180deg); }
.cp-search-field.is-open .cp-search-label { color: var(--cp-night); }

/* Versión compacta (encima de los resultados) */
.cp-search--compact { box-shadow: var(--cp-shadow-sm); padding: .35rem .35rem .35rem 0; }
.cp-search--compact .cp-search-field { padding: .2rem 1.25rem; }
.cp-search--compact .cp-search-submit { height: 2.85rem; min-width: 2.85rem; padding: 0 1.25rem; }
.cp-search--compact + .cp-search-extra { justify-content: flex-start; margin-top: 1rem; }

/* Móvil: la píldora pasa a ser una tarjeta redondeada con campos apilados */
@media (max-width: 767.98px) {
    .cp-search { flex-direction: column; align-items: stretch; border-radius: 28px; padding: .5rem; }
    .cp-search-field { padding: .75rem 1.1rem; }
    .cp-search-field + .cp-search-field::before { left: 1.1rem; right: 1.1rem; top: 0; bottom: auto; width: auto; height: 1px; }
    .cp-search-submit { width: 100%; margin-top: .35rem; height: 3.25rem; }
    .cp-search--compact .cp-search-field { padding: .6rem 1rem; }
    .cp-search--compact .cp-search-submit { height: 3rem; }
    .cp-search-extra .cp-nearby { width: 100%; justify-content: center; }
}

/* ==========================================================================
   Tarjeta de tienda: sin bordes, foto 4:5, sombra que crece al pasar
   ========================================================================== */

.cp-card {
    position: relative;
    height: 100%;
    background: var(--cp-white);
    border-radius: var(--cp-radius);
    box-shadow: var(--cp-shadow-sm);
    overflow: hidden;
    transition: box-shadow .4s var(--cp-ease), transform .4s var(--cp-ease);
}
.cp-card:hover, .cp-card:focus-within { box-shadow: var(--cp-shadow-lg); transform: translateY(-4px); }

/* Foto de la tarjeta: marco 4:5 fijo. La foto lo llena recortándose por el centro
   (object-fit: cover), sea vertical, horizontal o cuadrada: nunca se deforma. */
.cp-card .cp-card-media {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;            /* reserva el hueco: sin saltos de diseño (CLS 0) */
    flex: none;                     /* dentro de un flex no se estira ni se encoge */
    background: var(--cp-surface);
    overflow: hidden;
}
.cp-card .cp-card-media > img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: none;
    object-fit: cover;
    object-position: 50% 50%;
    transition: transform .8s var(--cp-ease);
}
.cp-card:hover .cp-card-media > img { transform: scale(1.04); }

.cp-card-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-family: var(--cp-font-display);
    font-size: 5rem;
    color: rgba(0, 0, 0, .12);
}

/* Distancia: discreta, sobre la foto */
.cp-card-distance {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    padding: .3rem .75rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .9);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    font-size: .8125rem;
    font-weight: 700;
    color: var(--cp-black);
}

.cp-card-body { padding: 1.4rem 1.5rem 1.6rem; }

.cp-card-title { font-size: 1.625rem; line-height: 1.15; margin: 0 0 .4rem; }
.cp-card-title a { color: var(--cp-black); text-decoration: none; }
.cp-card-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; } /* toda la tarjeta es clicable */

.cp-card-meta { font-size: .875rem; color: var(--cp-muted); margin: 0; }

/* "Ofertas activas": punto + texto en negrita, nada más */
.cp-offer-flag {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-top: .9rem;
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--cp-night);
}
.cp-offer-flag::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--cp-night);
}

/* ==========================================================================
   Bloque final "¿Tienes una tienda?"
   ========================================================================== */

.cp-cta {
    text-align: center;
    border-top: 1px solid var(--cp-hairline);
    padding-block: var(--cp-section-space);
}
.cp-cta-title { font-size: clamp(2.25rem, 5vw, 4rem); max-width: 18ch; margin: 1rem auto 0; }
.cp-cta p { color: var(--cp-muted); font-size: 1.125rem; margin: 1.5rem auto 2.5rem; max-width: 34rem; }

/* ==========================================================================
   Listado de resultados
   ========================================================================== */

.cp-results-head { padding-top: clamp(2.5rem, 5vw, 4rem); }

.cp-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem .95rem;
    border: 1px solid var(--cp-hairline);
    border-radius: 999px;
    background: var(--cp-white);
    color: var(--cp-black);
    font-size: .875rem;
    text-decoration: none;
    transition: border-color .2s var(--cp-ease);
}
.cp-chip:hover { border-color: var(--cp-night); color: var(--cp-black); }
.cp-chip--active { background: var(--cp-night); border-color: var(--cp-night); color: var(--cp-white); }
.cp-chip--active:hover { color: var(--cp-white); }

.pagination { --bs-pagination-color: var(--cp-night); --bs-pagination-border-color: transparent; --bs-pagination-active-bg: var(--cp-night); --bs-pagination-active-border-color: var(--cp-night); --bs-pagination-hover-bg: var(--cp-surface); --bs-pagination-focus-box-shadow: 0 0 0 .2rem var(--bs-focus-ring-color); gap: .25rem; }
.pagination .page-link { border-radius: 999px !important; min-width: 2.5rem; text-align: center; }

/* ==========================================================================
   Ficha de tienda: revista en vertical, una sola columna y mucho aire
   Orden: cabecera → fotos → descripción → ofertas → marcas → mapa → contacto y horario
   ========================================================================== */

.cp-shop-header {
    padding-top: clamp(2.5rem, 7vw, 6rem);
    padding-bottom: clamp(2.5rem, 5vw, 4rem);
    text-align: center;
}
.cp-shop-title {
    font-size: clamp(3rem, 9vw, 7.5rem);
    line-height: .95;
    letter-spacing: -.035em;
    max-width: 14ch;
    margin: 1.25rem auto 0;
    text-wrap: balance;
}

/* Etiquetas: categoría · zona · verificado · abierto, separadas por puntos finos */
.cp-shop-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem 0;
    list-style: none;
    margin: 1.75rem 0 0;
    padding: 0;
    font-size: .9375rem;
}
.cp-shop-tags li { display: inline-flex; align-items: center; }
.cp-shop-tags li + li::before { content: "·"; margin-inline: .9rem; color: var(--cp-muted); }
.cp-shop-tags a { color: var(--cp-black); text-decoration: none; border-bottom: 1px solid var(--cp-hairline); }
.cp-shop-tags a:hover { border-color: var(--cp-black); }

/* Nombre + corazón de favoritos. Rejilla de 3 columnas iguales a los lados: el nombre sigue
   centrado en la página y el corazón queda a su derecha (la columna izquierda es su contrapeso). */
.cp-shop-title-row {
    --cp-fav-size: 2.75rem;
    --cp-fav-gap: clamp(.5rem, 1.5vw, 1rem);
    display: grid;
    grid-template-columns:
        minmax(calc(var(--cp-fav-size) + var(--cp-fav-gap)), 1fr)
        minmax(0, auto)
        minmax(calc(var(--cp-fav-size) + var(--cp-fav-gap)), 1fr);
    align-items: center;
    margin-top: 1.25rem;
}
.cp-shop-title-row .cp-shop-title { grid-column: 2; margin: 0 auto; }
.cp-fav-form,
.cp-shop-title-row > .cp-fav { grid-column: 3; justify-self: start; margin-left: var(--cp-fav-gap); }
.cp-fav-form { margin-bottom: 0; }

/* Corazón: contorno negro; guardada → relleno granate (--cp-favorite). */
.cp-fav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--cp-fav-size, 2.75rem);
    height: var(--cp-fav-size, 2.75rem);
    padding: 0;
    border: 1px solid var(--cp-hairline);
    border-radius: 50%;
    background: var(--cp-white);
    color: var(--cp-black);
    cursor: pointer;
    transition: border-color .2s var(--cp-ease), color .2s var(--cp-ease), transform .2s var(--cp-ease);
}
.cp-fav:hover { border-color: var(--cp-black); color: var(--cp-black); }
.cp-fav:active { transform: scale(.94); }
.cp-fav:focus-visible { outline: 2px solid var(--cp-black); outline-offset: 3px; }
.cp-fav-icon { fill: transparent; transition: fill .2s var(--cp-ease); }
.cp-fav[aria-pressed="true"] { color: var(--cp-favorite); }
.cp-fav[aria-pressed="true"]:hover { border-color: var(--cp-favorite); }
.cp-fav[aria-pressed="true"] .cp-fav-icon { fill: currentColor; }
.cp-fav[aria-busy="true"] { cursor: progress; }
.cp-fav.is-popping { animation: cp-fav-pop .38s var(--cp-ease); }
@keyframes cp-fav-pop {
    0% { transform: scale(1); }
    45% { transform: scale(1.18); }
    100% { transform: scale(1); }
}

/* Aviso bajo el nombre: los mensajes de "guardada / quitada" solo los oye el lector de
   pantalla (el corazón ya lo dice); el de error sí se ve. */
.cp-fav-status:not(.is-error) {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.cp-fav-status.is-error { margin: .75rem 0 0; font-size: .875rem; color: var(--bs-danger, #b02a37); }

/* Mis favoritos sin tiendas: mensaje centrado con el corazón vacío encima. */
.cp-favorites-empty { max-width: 34rem; margin: 0 auto; padding: clamp(2rem, 6vw, 4rem) 0; text-align: center; }
.cp-favorites-empty .cp-fav-icon { width: 2.5rem; height: 2.5rem; margin-bottom: 1.25rem; color: var(--cp-muted); }
@media (max-width: 575.98px) {
    .cp-shop-title-row { --cp-fav-size: 2.5rem; }
}
@media (prefers-reduced-motion: reduce) {
    .cp-fav, .cp-fav-icon { transition: none; }
    .cp-fav.is-popping { animation: none; }
}

.cp-shop-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin-top: 2.25rem; }
.cp-shop-actions .btn { min-width: 11rem; }

.cp-breadcrumb { --bs-breadcrumb-divider-color: var(--cp-muted); --bs-breadcrumb-item-active-color: var(--cp-muted); font-size: .8125rem; }
.cp-breadcrumb a { color: var(--cp-muted); text-decoration: none; }
.cp-breadcrumb a:hover { color: var(--cp-black); }

/* Fotos: tira horizontal de fotos 4:5 que se desliza (3 a la vista en escritorio) */
.cp-strip {
    --cp-strip-gap: clamp(.75rem, 1.5vw, 1.25rem);
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 82%;
    gap: var(--cp-strip-gap);
    list-style: none;
    margin: 0;
    padding: 0 0 .5rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    scrollbar-color: var(--cp-hairline) transparent;
}
.cp-strip:focus-visible { outline: 2px solid var(--cp-night); outline-offset: 4px; border-radius: var(--cp-radius); }
.cp-strip > li { border-radius: var(--cp-radius); scroll-snap-align: start; }
@media (min-width: 768px) { .cp-strip { grid-auto-columns: calc((100% - var(--cp-strip-gap)) / 2); } }
@media (min-width: 992px) { .cp-strip { grid-auto-columns: calc((100% - 2 * var(--cp-strip-gap)) / 3); } }
/* Con 1 o 2 fotos no hay nada que deslizar: se centran. */
.cp-strip--few { justify-content: center; }

/* Bloques de la ficha */
.cp-shop-section { margin-top: clamp(4.5rem, 10vw, 8rem); }
.cp-shop-section--last { padding-top: clamp(3.5rem, 7vw, 5rem); border-top: 1px solid var(--cp-hairline); }
.cp-shop-section .cp-section-head { align-items: baseline; margin-bottom: 1.25rem; }

/* Columna de lectura: 800 px centrados */
.cp-column { width: 100%; max-width: calc(800px + 2 * var(--bs-gutter-x, 1.5rem)); margin-inline: auto; padding-inline: calc(var(--bs-gutter-x, 1.5rem) * .5); }

.cp-block-title { font-size: clamp(1.875rem, 3.5vw, 2.5rem); margin: .5rem 0 1.75rem; }

/* Descripción: cuerpo grande y ligero, letra capital */
.cp-prose {
    font-size: clamp(1.1875rem, 1.6vw, 1.375rem);
    line-height: 1.8;
    font-weight: 300;
    white-space: pre-line;
    margin: 0;
}
.cp-prose::first-letter {
    float: left;
    font-family: var(--cp-font-display);
    font-size: 4.8em;
    line-height: .8;
    padding: .06em .12em 0 0;
    color: var(--cp-black);
}

/* Ofertas: cuadrícula de tarjetas blancas con borde sutil.
   1 columna en móvil, 2 en tableta (≥ 640 px) y 3 en escritorio (≥ 1100 px); centradas si hay pocas. */
.cp-offer-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);                 /* móvil: 1 columna a todo el ancho */
    gap: 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
/* Tableta: 2 columnas · escritorio: 3, de 360 px como máximo. Cada tarjeta ocupa 2 medias pistas
   (4 u 6 pistas), así la última fila incompleta se desplaza y queda centrada. */
.cp-offer-grid > li { display: flex; min-width: 0; }
@media (min-width: 640px) {
    .cp-offer-grid { grid-template-columns: repeat(4, minmax(0, 180px)); justify-content: center; gap: clamp(1.25rem, 2.5vw, 1.75rem); }
    .cp-offer-grid > li { grid-column: span 2; }
    .cp-offer-grid > li:nth-child(2n + 1):last-child { grid-column: 2 / span 2; }
}
@media (min-width: 1100px) {
    .cp-offer-grid { grid-template-columns: repeat(6, minmax(0, 180px)); }
    .cp-offer-grid > li:nth-child(2n + 1):last-child { grid-column: span 2; }        /* anula la regla de tableta */
    .cp-offer-grid > li:nth-child(3n + 1):last-child { grid-column: 3 / span 2; }
    .cp-offer-grid > li:nth-child(3n + 1):nth-last-child(2) { grid-column: 2 / span 2; }
}
.cp-offer-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    background: #FFFFFF;
    border: 1px solid var(--cp-hairline);
    border-radius: var(--cp-radius);
    box-shadow: var(--cp-shadow-sm);
}
/* Imagen: siempre 4:3 (= OfferController::RATIO, el recorte del panel) y a sangre (cover):
   ni se deforma ni deja bandas, sea cual sea el ancho de la tarjeta. */
.cp-offer-card-media { aspect-ratio: 4 / 3; border-bottom: 1px solid var(--cp-hairline); }
.cp-offer-card-media > img { object-fit: cover; object-position: center 30%; }   /* fotos antiguas verticales: se prioriza la parte de arriba (caras, cabeceras) */
.cp-offer-card-body { display: flex; flex-direction: column; flex: 1; padding: 1.75rem 1.5rem 1.5rem; }
.cp-offer-discount { font-family: var(--cp-font-display); font-size: clamp(2rem, 4vw, 2.5rem); line-height: 1; color: var(--cp-night); overflow-wrap: anywhere; }
.cp-offer-title { font-family: var(--cp-font-body); font-weight: 700; font-size: 1.125rem; line-height: 1.35; margin: .875rem 0 .5rem; overflow-wrap: anywhere; }
.cp-offer-text { color: var(--cp-black); white-space: pre-line; margin-bottom: .75rem; overflow-wrap: anywhere; }
.cp-offer-date { margin: auto 0 0; padding-top: 1rem; border-top: 1px solid var(--cp-hairline); font-size: .875rem; color: var(--cp-muted); }   /* fechas siempre abajo */
@media (max-width: 575.98px) {
    .cp-offer-card { border-radius: calc(var(--cp-radius) - 4px); }
    .cp-offer-card-body { padding: 1.5rem 1.25rem 1.25rem; }
}

/* Restos de la ficha antigua que también usa el pie (.cp-social) */
.cp-social { display: flex; flex-wrap: wrap; gap: 1.25rem; font-size: .9375rem; }
.cp-social a { color: var(--cp-black); text-decoration: none; border-bottom: 1px solid var(--cp-hairline); }
.cp-social a:hover { border-color: var(--cp-black); }
.cp-status { font-size: .8125rem; font-weight: 700; display: inline-flex; align-items: center; gap: .45rem; }
.cp-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--cp-muted); }
.cp-status--open::before { background: var(--cp-night); }

/* Barra flotante de acciones: píldora de cristal abajo en el centro */
.cp-actionbar {
    position: fixed;
    left: 50%;
    bottom: clamp(1rem, 3vw, 2rem);
    z-index: 1040;
    display: flex;
    gap: .5rem;
    padding: .4rem;
    border: 1px solid var(--cp-hairline);
    border-radius: 999px;
    background: rgba(255, 255, 255, .88);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    box-shadow: var(--cp-shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 16px);
    transition: opacity .3s var(--cp-ease), transform .3s var(--cp-ease), visibility .3s;
}
.cp-actionbar.is-visible { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.cp-actionbar .btn { padding: .65rem 1.25rem; }
.cp-actionbar .btn-outline-dark { --bs-btn-border-color: transparent; }
/* Móvil: la barra ocupa el ancho libre a la izquierda del botón "Volver arriba". */
@media (max-width: 575.98px) {
    .cp-actionbar { left: 1rem; right: calc(1rem + 48px + .75rem); transform: translateY(16px); }
    .cp-actionbar.is-visible { transform: none; }
    .cp-actionbar .btn { flex: 1 1 0; padding-inline: .75rem; }
}

/* ==========================================================================
   Pie: blanco, con línea fina
   ========================================================================== */

.cp-footer { border-top: 1px solid #E5E5E5; padding-block: clamp(3.5rem, 7vw, 5.5rem) 2rem; margin-top: var(--cp-section-space); font-size: .9375rem; }
.cp-footer-title { font-family: var(--cp-font-body); font-size: .75rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--cp-muted); margin-bottom: 1rem; }
.cp-footer ul { list-style: none; padding: 0; margin: 0; }
.cp-footer li + li { margin-top: .5rem; }
.cp-footer a { color: var(--cp-black); text-decoration: none; }
.cp-footer-legal a { color: var(--cp-muted); }

/* ==========================================================================
   Accesibilidad: sin animaciones si el usuario lo pide
   ========================================================================== */

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

/* ==========================================================================
   WhatsApp: verde sobrio. #075E54 es el verde oscuro de WhatsApp;
   con texto blanco da un contraste 7,6:1 (el verde claro #25D366 no llega a 2:1).
   ========================================================================== */

.cp-btn-whatsapp {
    --bs-btn-bg: #075E54;
    --bs-btn-border-color: #075E54;
    --bs-btn-color: #FFFFFF;
    --bs-btn-hover-bg: #054C44;
    --bs-btn-hover-border-color: #054C44;
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-active-bg: #043D37;
    --bs-btn-active-border-color: #043D37;
    --bs-btn-active-color: #FFFFFF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    border-radius: 999px;
}

/* ==========================================================================
   Logos de marcas: tarjetas editoriales de tamaño fijo (140 × 70 px)
   Cada logo llega ya recortado a su contenido (ImageOptimizer, trim) y se encaja en su
   tarjeta con object-fit: contain. En gris; al pasar el ratón recupera su color.
   ========================================================================== */

/* Fila de tarjetas centrada: 2 por fila en móvil, 4 desde tableta. Con flex-wrap y
   justify-content: center, una última fila incompleta queda centrada sola. */
.cp-brands {
    --logo-gap: .75rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--logo-gap);
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: calc(4 * 140px + 3 * var(--logo-gap));      /* como mucho 4 por fila */
}
@media (min-width: 768px) { .cp-brands { --logo-gap: 1rem; } }

/* Tarjeta de tamaño fijo: blanca, borde gris muy fino y el logo centrado dentro. */
.logo-box {
    flex: 0 0 140px;
    width: 140px;
    max-width: calc(50% - var(--logo-gap) / 2);             /* móviles de 320 px: siguen cabiendo 2 */
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
    background: #FFFFFF;
    border: 1px solid #EEEEEE;
    border-radius: 4px;
    transition: transform .35s var(--cp-ease), box-shadow .35s var(--cp-ease), border-color .35s var(--cp-ease);
}

/* El logo llena el hueco interior (108 × 46 px) sin deformarse ni salirse.
   mix-blend-mode: multiply hace desaparecer el fondo blanco de un JPG sobre la tarjeta blanca. */
.cp-brand-logo {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
    filter: grayscale(1);
    opacity: .6;
    transition: filter .35s var(--cp-ease), opacity .35s var(--cp-ease);
}

/* Al pasar el ratón: el logo recupera su color y la tarjeta se eleva un poco. */
@media (hover: hover) {
    .logo-box:hover { transform: translateY(-3px); border-color: #E2E2E2; box-shadow: var(--cp-shadow-sm); }
    .logo-box:hover .cp-brand-logo { filter: none; opacity: 1; }
}
@media (hover: none) {
    .cp-brand-logo { opacity: .75; }   /* en táctil no hay hover: un poco más visibles */
}
@media (prefers-reduced-motion: reduce) {
    .logo-box:hover { transform: none; }
}

/* ==========================================================================
   Enlaces editoriales (cabecera y pie): una línea negra de 1 px que crece
   desde el centro hacia los lados. Se dibuja con background (no con ::after),
   así funciona también en enlaces de varias líneas.
   ========================================================================== */

.cp-header .nav-link,
.cp-footer a,
.cp-footer .cp-link-button {
    text-decoration: none;
    background-image: linear-gradient(currentColor, currentColor);
    background-origin: content-box;          /* la línea mide lo que el texto, no el padding */
    background-repeat: no-repeat;
    background-position: 50% 100%;
    background-size: 0% 1px;
    padding-bottom: 2px;
    transition: background-size .35s var(--cp-ease), opacity .2s var(--cp-ease), color .2s var(--cp-ease);
}
.cp-header .nav-link:hover,
.cp-header .nav-link:focus-visible,
.cp-header .nav-link.active,
.cp-footer a:hover,
.cp-footer a:focus-visible,
.cp-footer .cp-link-button:hover,
.cp-footer .cp-link-button:focus-visible { background-size: 100% 1px; }
.cp-footer-legal a:hover, .cp-footer-legal .cp-link-button:hover { color: var(--cp-black); }

/* Botón con aspecto de enlace ("Configurar cookies") */
.cp-link-button { padding: 0 0 2px; border: 0; background-color: transparent; color: inherit; font: inherit; cursor: pointer; }

/* ==========================================================================
   Selector de idioma
   ========================================================================== */

.cp-lang { display: flex; align-items: center; gap: .15rem; list-style: none; margin: 0; padding: 0; font-size: .8125rem; font-weight: 700; letter-spacing: .08em; }
.cp-lang a { display: block; padding: .35rem .5rem; color: var(--cp-black); text-decoration: none; opacity: .45; border-radius: 6px; transition: opacity .2s var(--cp-ease); }
.cp-lang a:hover { opacity: 1; }
.cp-lang a[aria-current="true"] { opacity: 1; text-decoration: underline; text-underline-offset: .35em; }

/* ==========================================================================
   Botón "Volver arriba"
   ========================================================================== */

.cp-to-top {
    position: fixed;
    right: clamp(1rem, 3vw, 2rem);
    bottom: clamp(1rem, 3vw, 2rem);
    z-index: 1040;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: 1px solid var(--cp-hairline);
    border-radius: 50%;
    background: rgba(255, 255, 255, .9);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    color: var(--cp-night);
    box-shadow: var(--cp-shadow-md);
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity .3s var(--cp-ease), transform .3s var(--cp-ease), visibility .3s, box-shadow .3s var(--cp-ease);
}
.cp-to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.cp-to-top:hover { box-shadow: var(--cp-shadow-lg); color: var(--cp-black); }

/* ==========================================================================
   Botón flotante "Cerca de mí" (public/_nearby-fab): solo el pin, en el terracota
   del botón grande del buscador, en el mismo sitio que "Volver arriba".
   Cuando "Volver arriba" aparece (html.cp-to-top-visible), sube y se queda justo
   encima de él. Portada: aparece con fundido al bajar; ficha: visible siempre.
   ========================================================================== */
.cp-nearby-fab-wrap {
    --cp-fab-size: 52px;
    --cp-fab-gap: .75rem;
    position: fixed;
    right: clamp(1rem, 3vw, 2rem);
    bottom: clamp(1rem, 3vw, 2rem);
    z-index: 1040;
    display: flex;
    align-items: center;
    gap: .75rem;
    pointer-events: none;            /* solo el botón y el aviso reciben clics */
    transition: transform .35s var(--cp-ease);
}
/* "Volver arriba" mide 48px: el FAB (más grande) se centra con él y sube su alto + el hueco. */
.cp-nearby-fab-wrap { margin-right: calc((48px - var(--cp-fab-size)) / 2); }
.cp-to-top-visible .cp-nearby-fab-wrap { transform: translateY(calc(-48px - var(--cp-fab-gap))); }

.cp-nearby-fab {
    position: relative;
    order: 2;
    display: grid;
    place-items: center;
    width: var(--cp-fab-size);
    height: var(--cp-fab-size);
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--cp-accent);
    color: var(--cp-white);
    box-shadow: 0 6px 20px rgba(194, 65, 12, .28), 0 2px 6px rgba(0, 0, 0, .06);
    pointer-events: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px) scale(.92);
    transition: opacity .35s var(--cp-ease), transform .35s var(--cp-ease), visibility .35s,
                background-color .2s var(--cp-ease), box-shadow .2s var(--cp-ease);
}
.cp-nearby-fab > * { grid-area: 1 / 1; }
.cp-nearby-fab.is-visible { opacity: 1; visibility: visible; transform: none; }
.cp-nearby-fab:hover { background: var(--cp-accent-hover); box-shadow: 0 8px 26px rgba(194, 65, 12, .36), 0 2px 6px rgba(0, 0, 0, .06); }
.cp-nearby-fab.is-visible:active { transform: scale(.94); }
.cp-nearby-fab:focus-visible { outline: 3px solid var(--cp-night); outline-offset: 3px; }
.cp-nearby-fab:disabled { cursor: progress; }
.cp-nearby-fab-spinner { display: none; }
.cp-nearby-fab.is-loading .cp-nearby-fab-pin { display: none; }
.cp-nearby-fab.is-loading .cp-nearby-fab-spinner { display: block; }

/* Aviso de error (sin permiso, fuera de Baleares...): bocadillo a la izquierda del botón. */
.cp-nearby-fab-feedback {
    order: 1;
    max-width: min(18rem, calc(100vw - 6rem));
    padding: .7rem .95rem;
    border: 1px solid var(--cp-hairline);
    border-radius: 14px;
    background: var(--cp-white);
    color: #B42318;
    font-size: .875rem;
    line-height: 1.35;
    box-shadow: var(--cp-shadow-md);
    pointer-events: auto;
    cursor: pointer;
}
.cp-nearby-fab-feedback[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
    .cp-nearby-fab-wrap, .cp-nearby-fab { transition: opacity .2s linear, visibility .2s; }
    .cp-nearby-fab { transform: none; }
}
/* Pie: ® del logo y enlaces legales en línea */
.cp-brand-mark { font-family: var(--cp-font-body); font-size: .4em; font-weight: 400; top: -1.4em; margin-left: .1em; }
.cp-footer-legal-links { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; list-style: none; margin: 0; padding: 0; }
.cp-footer .cp-footer-legal-links li + li { margin-top: 0; }

/* ==========================================================================
   Botón en píldora (banner de cookies, política de cookies)
   ========================================================================== */

.cp-pill { border-radius: 999px; padding: .65rem 1.4rem; font-weight: 700; font-size: .9375rem; }

/* Interruptores (form-switch) en negro, no en el azul de Bootstrap */
.form-check-input:checked { background-color: var(--cp-night); border-color: var(--cp-night); }
.form-check-input:focus { border-color: var(--cp-night); box-shadow: 0 0 0 .2rem rgba(15, 23, 42, .15); }
.form-switch .form-check-input:focus:not(:checked) {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e");
}
.form-switch .form-check-input { width: 2.6em; height: 1.4em; cursor: pointer; }
.form-check-input:disabled { opacity: .45; }

/* ==========================================================================
   Banner de cookies: tarjeta blanca flotante abajo a la izquierda
   ========================================================================== */

.cp-cookies {
    position: fixed;
    left: clamp(1rem, 3vw, 2rem);
    bottom: clamp(1rem, 3vw, 2rem);
    z-index: 1060;
    width: min(26rem, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    padding: 1.75rem;
    background: var(--cp-white);
    color: var(--cp-black);
    border: 1px solid var(--cp-hairline);
    border-radius: var(--cp-radius);
    box-shadow: var(--cp-shadow-lg);
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .35s var(--cp-ease), transform .35s var(--cp-ease);
}
.cp-cookies.is-visible { opacity: 1; transform: none; }
.cp-cookies-title { font-size: 1.5rem; margin: 0 0 .6rem; }
.cp-cookies-text { font-size: .9375rem; line-height: 1.6; margin: 0; }
.cp-cookies-text a { color: var(--cp-black); }
.cp-cookies-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-top: 1.5rem; }
.cp-cookies-actions .cp-pill { flex: 1 1 0; }
.cp-cookies-configure { flex-basis: 100%; margin-top: .35rem; font-size: .875rem; font-weight: 700; color: var(--cp-black); text-align: center; text-decoration: underline; text-underline-offset: .3em; }
.cp-cookies-option { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.25rem; padding-block: 1.1rem; border-top: 1px solid var(--cp-hairline); }
.cp-cookies-option:first-of-type { margin-top: 1rem; }
.cp-cookies-option-title { font-weight: 700; font-size: .9375rem; }
.cp-cookies-option-text { font-size: .8125rem; color: var(--cp-muted); line-height: 1.5; margin: .2rem 0 0; }
@media (max-width: 575.98px) {
    .cp-cookies { left: .75rem; right: .75rem; bottom: .75rem; width: auto; padding: 1.4rem; }
}

/* ==========================================================================
   Páginas legales: misma columna de lectura que la ficha
   ========================================================================== */

.cp-legal-header { padding-top: clamp(3rem, 8vw, 6rem); padding-bottom: clamp(2rem, 4vw, 3rem); }
.cp-legal-title { font-size: clamp(2.75rem, 7vw, 5rem); line-height: 1; letter-spacing: -.03em; margin: 1rem 0 0; }
.cp-legal-updated { margin: 1.25rem 0 0; font-size: .875rem; color: var(--cp-muted); }
.cp-legal-nav { display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; list-style: none; margin: 2.25rem 0 0; padding: 1.25rem 0 0; border-top: 1px solid var(--cp-hairline); font-size: .9375rem; }
.cp-legal-nav a { color: var(--cp-muted); text-decoration: none; }
.cp-legal-nav a:hover, .cp-legal-nav a[aria-current="page"] { color: var(--cp-black); }
.cp-legal-nav a[aria-current="page"] { font-weight: 700; }

.cp-legal-body { font-size: 1.0625rem; line-height: 1.75; }
.cp-legal-body h2 { font-size: clamp(1.5rem, 2.6vw, 1.875rem); margin: 3.5rem 0 1rem; }
.cp-legal-body p, .cp-legal-body ul { margin-bottom: 1.1rem; }
.cp-legal-body li + li { margin-top: .5rem; }
.cp-legal-body a { color: var(--cp-black); text-underline-offset: .2em; }
.cp-legal-lead { font-size: 1.25rem; font-weight: 300; line-height: 1.7; }
.cp-legal-notice { padding: 1rem 1.25rem; border: 1px solid var(--cp-hairline); border-radius: 14px; font-size: .9375rem; }

.cp-legal-data { display: grid; grid-template-columns: max-content 1fr; gap: .6rem 2rem; margin: 1.5rem 0 0; padding: 1.5rem 0; border-block: 1px solid var(--cp-hairline); }
.cp-legal-data dt { font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--cp-muted); padding-top: .3rem; }
.cp-legal-data dd { margin: 0; }
@media (max-width: 575.98px) {
    .cp-legal-data { grid-template-columns: 1fr; gap: .15rem; }
    .cp-legal-data dd { margin-bottom: .75rem; }
}

.cp-legal-table { width: 100%; margin: 1rem 0 1.5rem; font-size: .9375rem; line-height: 1.5; border-collapse: collapse; }
.cp-legal-table th { font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--cp-muted); text-align: left; padding: 0 1.25rem .75rem 0; }
.cp-legal-table td { padding: .9rem 1.25rem .9rem 0; border-top: 1px solid var(--cp-hairline); vertical-align: top; }
.cp-legal-table code { color: var(--cp-black); font-size: .875em; white-space: nowrap; }
.cp-link-button--inline { font-weight: 700; text-decoration: underline; text-underline-offset: .2em; padding: 0; }

/* ==========================================================================
   Ficha: foto principal contenida y contacto en píldoras
   ========================================================================== */

/* La foto nunca pasa de 600 px de alto; con una sola foto, columna centrada de 480 px. */
.cp-strip > li { max-height: 600px; }
.cp-strip--single { grid-auto-columns: min(100%, 480px) !important; }


/* ==========================================================================
   Portada: cinta infinita de tiendas (CSS puro)
   Nombres de las tiendas verificadas en DM Serif Display, separados por un punto fino. Dos copias iguales seguidas; la animación desplaza la
   pista -50 % y la segunda copia ocupa el sitio de la primera: el bucle no tiene salto.
   La duración la pone la vista (--cp-marquee-duration) según el nº de elementos, así la
   velocidad es la misma tenga la cinta 10 elementos o 40.
   ========================================================================== */

.cp-marquee {
    --cp-marquee-gap: clamp(1.25rem, 3vw, 2.25rem);   /* a cada lado del punto */
    --cp-marquee-height: clamp(2.25rem, 4vw, 2.75rem);
    overflow: hidden;
    padding-block: clamp(1.5rem, 3.5vw, 2.25rem);
    margin-bottom: var(--cp-section-space);
    border-block: 1px solid var(--cp-hairline);
    /* Los extremos se desvanecen: los elementos entran y salen sin cortarse en seco. */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.cp-marquee-track {
    display: flex;
    width: max-content;
    animation: cp-marquee var(--cp-marquee-duration, 40s) linear infinite;
    will-change: transform;
}
.cp-marquee:hover .cp-marquee-track,
.cp-marquee:focus-within .cp-marquee-track { animation-play-state: paused; }

.cp-marquee-list {
    display: flex;
    flex: none;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}
.cp-marquee-list li {
    display: flex;
    flex: none;
    align-items: center;
}
/* Separador "•" después de cada elemento (también del último: así la unión entre las
   dos copias tiene el mismo punto y el mismo espacio que el resto). */
.cp-marquee-list li::after {
    content: "•";
    padding-inline: var(--cp-marquee-gap);
    color: var(--cp-black);
    opacity: .25;
    font-size: 1rem;
    line-height: 1;
}

.cp-marquee-item {
    display: flex;
    align-items: center;
    height: var(--cp-marquee-height);
    font-family: var(--cp-font-display);
    font-size: clamp(1.5rem, 2.6vw, 2.125rem);
    line-height: 1;
    letter-spacing: -.01em;
    white-space: nowrap;
    color: var(--cp-black);
    text-decoration: none;
    opacity: .45;
    transition: opacity .25s var(--cp-ease);
}
.cp-marquee-item:hover,
.cp-marquee-item:focus-visible { opacity: 1; color: var(--cp-black); }

@keyframes cp-marquee { to { transform: translate3d(-50%, 0, 0); } }

/* "Reducir movimiento": cinta quieta que se desliza a mano, sin la copia ni las repeticiones. */
@media (prefers-reduced-motion: reduce) {
    .cp-marquee { overflow-x: auto; scrollbar-width: none; -webkit-mask-image: none; mask-image: none; }
    .cp-marquee::-webkit-scrollbar { display: none; }
    .cp-marquee-track { animation: none; padding-inline: 1rem; }
    .cp-marquee-list[aria-hidden="true"],
    .cp-marquee-list li[aria-hidden="true"] { display: none; }
}
/* ==========================================================================
   Flechas de navegación: SVG de trazo fino, del alto de la letra
   ========================================================================== */

.cp-arrow { width: 1em; height: 1em; flex: none; display: inline-block; vertical-align: -.125em; transition: transform .25s var(--cp-ease); }
.cp-arrow--left { transform: scaleX(-1); }
a:hover > .cp-arrow:not(.cp-arrow--left), a:focus-visible > .cp-arrow:not(.cp-arrow--left) { transform: translateX(3px); }

/* ==========================================================================
   Portada: "Ver todas las tiendas" + fila de categorías en píldoras
   ========================================================================== */

.cp-browse { display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem; margin-bottom: clamp(2rem, 4vw, 3.5rem); }

/* Puntos de color: 10 tonos vivos pero sobrios, uno por categoría, fáciles de distinguir.
   Qué número lleva cada categoría lo decide Category::DOT_COLORS (por slug), así no se
   repiten ni cambian si se reordena la fila. */
:root {
    --cp-dot-1: #B22222;   /* rojo fuego     · moda y complementos */
    --cp-dot-2: #D2691E;   /* naranja terracota · souvenirs y artesanía */
    --cp-dot-3: #556B2F;   /* verde oliva    · alimentación y gourmet */
    --cp-dot-4: #C71585;   /* rosa           · belleza y cosmética */
    --cp-dot-5: #2E8B57;   /* verde mar      · deporte y aire libre */
    --cp-dot-6: #CD853F;   /* arena          · hogar y decoración */
    --cp-dot-7: #4682B4;   /* azul acero     · libros y papelería */
    --cp-dot-8: #483D8B;   /* azul noche     · tecnología */
    --cp-dot-9: #20B2AA;   /* turquesa       · salud y bienestar */
    --cp-dot-10: #DAA520;  /* mostaza        · mascotas */

    --cp-favorite: #8C2F39; /* corazón de favoritos guardado: granate, rojo sobrio */
}

/*
 * Fila de categorías con scroll horizontal.
 *  - Sale del .container hasta el borde de la pantalla (margen negativo = medio gutter) y lo
 *    recupera como padding: la primera píldora queda alineada con el botón de arriba y, al
 *    deslizar, las píldoras llegan al borde de la pantalla en vez de cortarse a 12px de él.
 *  - Bordes difuminados con mask-image (funciona sobre cualquier fondo, no solo blanco).
 *    Derecho: "hay más". Izquierdo: solo aparece cuando ya se ha deslizado.
 *  - Si caben todas (escritorio) no hay scroll: la fila queda alineada a la izquierda, como el
 *    botón, y el difuminado cae sobre el padding vacío, así que no corta ninguna píldora.
 */
@property --cp-fade-start { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --cp-fade-end { syntax: '<length>'; inherits: false; initial-value: 48px; }

.cp-category-pills {
    --cp-pills-edge: calc(var(--bs-gutter-x, 1.5rem) * .5);   /* el padding del .container */
    --cp-pills-tail: 3.5rem;                                   /* aire tras la última píldora */
    --cp-fade-size: 3rem;

    align-self: stretch;            /* .cp-browse es flex en columna con align-items: flex-start */
    margin-inline: calc(var(--cp-pills-edge) * -1);
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
    scroll-padding-inline: var(--cp-pills-edge);
    scrollbar-width: none;          /* Firefox */
    -ms-overflow-style: none;       /* Edge antiguo */

    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--cp-fade-start), #000 calc(100% - var(--cp-fade-end)), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 var(--cp-fade-start), #000 calc(100% - var(--cp-fade-end)), transparent 100%);
}
.cp-category-pills::-webkit-scrollbar { display: none; }   /* Chrome, Safari */
.cp-category-pills ul {
    display: flex;
    gap: .5rem;
    width: max-content;
    margin: 0;
    padding: 2px var(--cp-pills-tail) 2px var(--cp-pills-edge);   /* 2px: hueco para el foco */
    list-style: none;
}
.cp-category-pills li { flex: none; scroll-snap-align: start; }

/* Navegadores con animaciones ligadas al scroll: el difuminado sigue la posición.
   Al principio solo a la derecha, en medio a los dos lados y al final solo a la izquierda. */
@supports (animation-timeline: scroll()) {
    .cp-category-pills {
        animation: cp-pills-fade linear both;
        animation-timeline: scroll(self inline);
    }
    @keyframes cp-pills-fade {
        0%   { --cp-fade-start: 0px; --cp-fade-end: var(--cp-fade-size); }
        8%   { --cp-fade-start: var(--cp-fade-size); }
        92%  { --cp-fade-end: var(--cp-fade-size); }
        100% { --cp-fade-start: var(--cp-fade-size); --cp-fade-end: 0px; }
    }
}

/* Escritorio: a 1440px las 10 categorías ya no caben en una fila (≈1850px). En vez de
   cortarlas contra el borde del .container, se reparten en varias líneas alineadas a la
   izquierda: todas visibles, sin scroll ni difuminado. */
@media (min-width: 992px) {
    .cp-category-pills {
        margin-inline: 0;
        overflow: visible;
        animation: none;
        -webkit-mask-image: none;
        mask-image: none;
    }
    .cp-category-pills ul {
        flex-wrap: wrap;
        row-gap: .6rem;
        width: auto;
        padding: 2px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cp-category-pills { scroll-behavior: auto; }
}

.cp-category-pill {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .55rem 1.1rem;
    border: 1px solid var(--cp-hairline);
    border-radius: 50px;
    background: var(--cp-white);
    color: var(--cp-black);
    font-size: .9375rem;
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none;
    transition: border-color .2s var(--cp-ease), background-color .2s var(--cp-ease);
}
.cp-category-pill:hover, .cp-category-pill:focus-visible { border-color: var(--cp-black); color: var(--cp-black); }
.cp-category-dot { width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--cp-dot, var(--cp-black)); }

/* Cursor personalizado: ahora en public/css/cartple-ui.css (compartido con el panel y los logins). */

/* ==========================================================================
   Escudo de cookies: el banner recogido, abajo a la IZQUIERDA (donde estaba el banner).
   La derecha queda para "Volver arriba": en móvil no se tocan.
   ========================================================================== */

.cp-cookie-shield {
    --cp-shield-edge: clamp(1rem, 3vw, 2rem);    /* mismo margen que .cp-to-top, en el lado opuesto */
    position: fixed;
    left: var(--cp-shield-edge);
    bottom: var(--cp-shield-edge);
    z-index: 1045;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #0F172A;
    color: #FFFFFF;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .22), 0 2px 6px rgba(15, 23, 42, .12);
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px) scale(.9);
    transition: opacity .3s var(--cp-ease), transform .3s var(--cp-ease), visibility .3s, box-shadow .2s var(--cp-ease);
}
.cp-cookie-shield[hidden] { display: none; }
.cp-cookie-shield.is-visible { opacity: 1; visibility: visible; transform: none; }
.cp-cookie-shield:hover { box-shadow: 0 12px 32px rgba(15, 23, 42, .3), 0 2px 6px rgba(15, 23, 42, .12); }
.cp-cookie-shield:focus-visible { outline: 2px solid #0F172A; outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
    .cp-cookie-shield { transition: opacity .2s linear, visibility .2s; transform: none; }
}

/* ==========================================================================
   Pie editorial: logo grande en DM Serif Display, 4 columnas, newsletter
   con una sola línea y fila inferior legal (izquierda) + redes (derecha)
   ========================================================================== */

.cp-footer-logo {
    font-family: var(--cp-font-display);
    font-size: clamp(2.75rem, 5vw, 3.75rem);
    line-height: .95;
    letter-spacing: -.02em;
    color: var(--cp-black);
    margin: 0 0 1.25rem;
}
.cp-footer-logo .cp-brand-mark { font-size: .3em; top: -1.9em; }
.cp-footer-about { max-width: 24rem; margin: 0; color: var(--cp-muted); line-height: 1.6; }

/* Newsletter */
.cp-footer-newsletter-text { margin: 0 0 1.25rem; color: var(--cp-muted); }
.cp-newsletter { max-width: 24rem; }
.cp-newsletter-field {
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--cp-black);
    transition: border-color .2s var(--cp-ease);
}
.cp-newsletter-field:focus-within { border-bottom-width: 2px; margin-bottom: -1px; }
.cp-newsletter-field input {
    flex: 1 1 auto;
    min-width: 0;
    padding: .65rem 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--cp-black);
    font: inherit;
    font-size: 1rem;              /* 16 px: iOS no hace zoom al enfocar */
    outline: none;
}
.cp-newsletter-field input::placeholder { color: var(--cp-muted); opacity: 1; }
.cp-newsletter-field input[aria-invalid="true"] { color: #B91C1C; }
.cp-newsletter-field button {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-right: -10px;          /* la flecha queda alineada con el final de la línea */
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--cp-black);
    cursor: pointer;
}
.cp-newsletter-field button svg { transition: transform .3s var(--cp-ease); }
.cp-newsletter-field button:hover svg,
.cp-newsletter-field button:focus-visible svg { transform: translateX(4px); }
.cp-newsletter-field button:focus-visible { outline: 2px solid var(--cp-black); outline-offset: 2px; border-radius: 50%; }
.cp-newsletter-trap { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.cp-newsletter-error { margin: .5rem 0 0; font-size: .8125rem; color: #B91C1C; }
.cp-newsletter-legal { margin: .75rem 0 0; font-size: .75rem; color: var(--cp-muted); }
.cp-newsletter-legal a { color: inherit; }
.cp-newsletter-status { margin: 0; padding-bottom: .65rem; border-bottom: 1px solid var(--cp-black); font-family: var(--cp-font-display); font-size: 1.25rem; }

/* Fila inferior */
.cp-footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem 2rem;
    margin-top: clamp(3rem, 6vw, 4.5rem);
    padding-top: 1.75rem;
    border-top: 1px solid #E5E5E5;
    font-size: .8125rem;
    color: var(--cp-muted);
}
.cp-footer-legal { display: flex; flex-direction: column; gap: .6rem; }
.cp-footer-legal a, .cp-footer-legal .cp-link-button { color: var(--cp-black); }
.cp-footer-copy { margin: 0; }
.cp-footer-copy a { color: var(--cp-muted) !important; }

/* Redes: iconos de trazo fino, sin la línea de subrayado de los enlaces del pie */
.cp-social { display: flex; gap: .25rem; margin-left: auto; }
.cp-footer .cp-social li + li { margin-top: 0; }
.cp-footer .cp-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
    background-image: none;
    color: var(--cp-black);
    transition: background-color .2s var(--cp-ease), transform .2s var(--cp-ease);
}
.cp-footer .cp-social a:hover, .cp-footer .cp-social a:focus-visible { background-color: rgba(0, 0, 0, .05); transform: translateY(-2px); }

@media (max-width: 575.98px) {
    .cp-footer-bottom { flex-direction: column; align-items: flex-start; }
    .cp-social { margin-left: -10px; }   /* el primer icono, alineado con el texto */
}

/* Móvil, ficha de tienda: si el escudo está a la vista, la barra de acciones empieza a su derecha
   (escudo a la izquierda · barra en el centro · "Volver arriba" a la derecha, sin solaparse). */
@media (max-width: 575.98px) {
    body:has(.cp-cookie-shield.is-visible) .cp-actionbar { left: calc(1rem + 48px + .75rem); }
}

/* ==========================================================================
   Menú de navegación
   - Escritorio (≥ 768 px): la barra de siempre, en una línea.
   - Móvil: pantalla completa, baja desde arriba con fundido. Enlaces grandes en
     DM Serif Display, centrados en vertical; idiomas y cuenta abajo, tras una línea fina.
   ========================================================================== */

.cp-menu-toggle,
.cp-menu-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-right: -12px;            /* el icono queda alineado con el borde del contenido */
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: var(--cp-black);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;   /* sin el recuadro gris al tocar en iOS/Android */
}
/* Sin círculo ni fondo: solo las líneas. El foco con teclado se marca con un contorno fino. */
.cp-menu-toggle:hover, .cp-menu-close:hover,
.cp-menu-toggle:active, .cp-menu-close:active,
.cp-menu-toggle:focus, .cp-menu-close:focus { background: none; box-shadow: none; outline: 0; }
.cp-menu-toggle:focus-visible, .cp-menu-close:focus-visible { outline: 1px solid currentColor; outline-offset: -6px; }

/* Iconos de abrir / cerrar: la línea corta se alarga y la X gira un poco al pasar el ratón */
.cp-menu-icon { overflow: visible; }
/* Hamburguesa de tres líneas (18 · 12 · 6, alineadas a la derecha): al pasar el ratón se igualan, en cascada. */
.cp-menu-line { transform-box: fill-box; transform-origin: right center; transition: transform .45s var(--cp-ease); }
.cp-menu-line--short { transition-delay: .05s; }
.cp-menu-toggle:hover .cp-menu-line--mid, .cp-menu-toggle:focus-visible .cp-menu-line--mid { transform: scaleX(1.5); }
.cp-menu-toggle:hover .cp-menu-line--short, .cp-menu-toggle:focus-visible .cp-menu-line--short { transform: scaleX(3); }
.cp-menu-close .cp-menu-icon { transition: transform .35s var(--cp-ease); }
.cp-menu-close:hover .cp-menu-icon,
.cp-menu-close:focus-visible .cp-menu-icon { transform: rotate(90deg); }

@media (min-width: 768px) {
    .cp-menu-footer { display: flex; align-items: center; gap: 1rem; }
    .cp-menu-account { flex-direction: row; align-items: center; gap: .5rem; }
}

@media (max-width: 767.98px) {
    /* Con el menú abierto la página de detrás no se desplaza, y la cabecera pasa por encima
       del banner de cookies y de los botones flotantes. */
    html.cp-menu-open { overflow: hidden; }
    html.cp-menu-open .cp-header { z-index: 1070; }

    .cp-menu {
        position: fixed;
        inset: 0;
        z-index: 1;
        width: 100vw;
        height: 100vh;
        height: 100dvh;                 /* sin la barra del navegador en iOS/Android */
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: stretch;
        gap: 3rem;
        padding: 3rem 2rem;
        padding: max(3rem, env(safe-area-inset-top)) max(2rem, env(safe-area-inset-right)) max(3rem, env(safe-area-inset-bottom)) max(2rem, env(safe-area-inset-left));
        overflow-y: auto;               /* pantallas muy bajas: se hace scroll, nada se corta */
        overscroll-behavior: contain;
        background: #FFFFFF;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-24px);
        transition: opacity .45s var(--cp-ease), transform .45s var(--cp-ease), visibility 0s linear .45s;
    }
    .cp-menu.is-open {
        opacity: 1;
        visibility: visible;
        transform: none;
        transition: opacity .45s var(--cp-ease), transform .45s var(--cp-ease), visibility 0s;
    }

    /* X grande arriba a la derecha, a la altura de la hamburguesa */
    .cp-menu-close { position: absolute; top: 12px; right: max(1.5rem, env(safe-area-inset-right)); margin-right: -12px; }

    /* Enlaces principales. margin-block: auto los centra en el espacio libre, y si no caben
       (móvil apaisado) se puede hacer scroll desde arriba sin que el primero quede cortado. */
    .cp-menu-main {
        flex-direction: column;
        gap: 2.5rem;                    /* entre enlaces principales */
        margin-block: auto !important;
        padding-top: 4.5rem;            /* nunca por debajo de la X */
    }
    .cp-menu .cp-menu-main .nav-link {
        display: block;
        padding: .25rem 0 !important;   /* el aire lo da el gap de la lista */
        font-family: var(--cp-font-display);
        font-size: clamp(2.25rem, 10vw, 3rem);
        line-height: 1.05;
        letter-spacing: -.02em;
        color: var(--cp-black);
        opacity: 1;
        background-image: none;
    }
    .cp-menu .cp-menu-main .nav-link:not(.active) { color: rgba(0, 0, 0, .55); }
    .cp-menu .cp-menu-main .nav-link:hover { color: var(--cp-black); }

    /* Entrada escalonada de los enlaces al abrir */
    .cp-menu-main > li,
    .cp-menu-footer {
        opacity: 0;
        transform: translateY(-8px);
        transition: opacity .4s var(--cp-ease), transform .4s var(--cp-ease);
    }
    .cp-menu.is-open .cp-menu-main > li,
    .cp-menu.is-open .cp-menu-footer { opacity: 1; transform: none; }
    .cp-menu.is-open .cp-menu-main > li:nth-child(1) { transition-delay: .08s; }
    .cp-menu.is-open .cp-menu-main > li:nth-child(2) { transition-delay: .13s; }
    .cp-menu.is-open .cp-menu-main > li:nth-child(3) { transition-delay: .18s; }
    .cp-menu.is-open .cp-menu-footer { transition-delay: .22s; }

    /* Abajo: línea fina, idiomas pequeños y la píldora azul noche */
    .cp-menu-footer {
        display: flex;
        flex-direction: column;
        gap: 2rem;
        padding-top: 2.5rem;
        border-top: 1px solid #E5E5E5;
    }
    .cp-menu-footer .cp-lang { gap: 1rem; font-size: .8125rem; margin-left: -.5rem; }
    .cp-menu-account { flex-direction: column; align-items: stretch; gap: 1.25rem; }
    .cp-menu-account .nav-link { padding: .75rem 0 !important; font-size: 1rem; opacity: .7; text-align: center; }
    .cp-menu-account form .nav-link { width: 100%; }
    /* "Mi panel" / "Registrar mi tienda": separada del resto con un margen generoso */
    .cp-menu .cp-menu-cta {
        width: 100%;
        margin-top: 2rem;
        padding: 1.125rem 1.5rem;
        font-size: 1rem;
        background-color: var(--cp-night);
        border-color: var(--cp-night);
    }
}

@media (max-width: 767.98px) and (prefers-reduced-motion: reduce) {
    .cp-menu, .cp-menu.is-open { transform: none; transition: opacity .2s linear, visibility 0s linear .2s; }
    .cp-menu.is-open { transition: opacity .2s linear, visibility 0s; }
    .cp-menu-main > li, .cp-menu-footer { transform: none; transition: none; opacity: 1; }
}

/* ==========================================================================
   Ficha de tienda: hero a ancho completo (estilo revista / hotel de lujo)
   - Solo la foto, de borde a borde, con un zoom muy lento (Ken Burns).
   - Nombre, etiquetas y botones debajo, centrados sobre blanco.
   - La segunda foto es una tarjeta a caballo entre la foto y el blanco.
   - Sin fotos (--plain): franja crema con un patrón de puntos.
   ========================================================================== */

/* Las medidas de la tarjeta van en el artículo: también las usa el bloque que sigue al hero. */
.cp-shop {
    --cp-hero-card-w: clamp(7.5rem, 26vw, 15rem);                /* ancho de la tarjeta flotante */
    --cp-hero-card-shift: .4;                                      /* fracción de su alto que asoma por debajo */
    --cp-hero-card-out: calc(var(--cp-hero-card-w) * 1.25 * var(--cp-hero-card-shift));  /* 4:5 → alto = ancho × 1,25 */
}
@media (max-width: 767.98px) {
    .cp-shop { --cp-hero-card-w: 26vw; --cp-hero-card-shift: .3; }
}

.cp-shop-hero { position: relative; }

/* Marco de la foto, con alto fijo (la foto se posiciona dentro, no depende de su tamaño).
   overflow: hidden recorta SOLO el exceso del zoom (hasta un 15 %) en el borde de este marco,
   que es lo que hace que se vea como un acercamiento. Sin él, la foto ampliada taparía la
   cabecera y el texto de debajo. La tarjeta flotante está FUERA de este marco y sobresale libremente. */
.cp-shop-hero-media {
    position: relative;
    overflow: hidden;
    width: 100%;
    background: var(--cp-surface);    /* mientras carga la foto */
}
/* Móvil y tableta (< 992 px): la foto se ve SIEMPRE entera (contain). El marco tiene la
   proporción de la portada (16:9), así que una portada normal lo llena; una foto con otra
   proporción queda centrada sobre fondo oscuro, sin cortar el logo ni el escaparate. */
@media (max-width: 991.98px) {
    .cp-shop-hero-media { aspect-ratio: 16 / 9; height: auto; min-height: 0; max-height: 80svh; background: #0B0B0B; }
    .cp-shop .cp-shop-hero-media > img.cp-shop-hero-img { object-fit: contain; }
}
/* Escritorio (≥ 992 px): foto a sangre (cover) en el 70 % de la pantalla. */
@media (min-width: 992px) {
    .cp-shop-hero-media { height: 70vh; height: 70svh; min-height: 420px; }   /* escritorio: 70 % de la pantalla */
}

/* Más específico que la regla global img { height: auto } y que .cp-media > img. */
.cp-shop-hero-media > .cp-shop-hero-img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center center;
    transform-origin: center center;
}

/* Ken Burns: zoom de 1 a 1,15 con un leve desplazamiento, en 14 s, ida y vuelta, sin fin.
   Se anima la propia <img> (.cp-shop-hero-img) dentro de su marco con overflow: hidden.
   Solo anima transform (lo hace la tarjeta gráfica, sin repintar la página).
   Se ejecuta salvo que el sistema tenga "Reducir movimiento" activado (entonces queda quieta). */
@keyframes cp-kenburns {
    0% { transform: scale(1) translate3d(0, 0, 0); }
    100% { transform: scale(1.15) translate3d(-1.5%, -1%, 0); }
}
/* Móvil y tableta: "respira" entre 0,94 y 1, sin pasar nunca del marco: la foto sigue entera. */
@keyframes cp-kenburns-sm {
    0% { transform: scale(.94); }
    100% { transform: scale(1); }
}
@media (prefers-reduced-motion: no-preference) {
    .cp-shop .cp-shop-hero-media > img.cp-shop-hero-img {
        will-change: transform;
        animation: cp-kenburns 14s ease-in-out infinite alternate both;
    }
}
@media (max-width: 991.98px) and (prefers-reduced-motion: no-preference) {
    .cp-shop .cp-shop-hero-media > img.cp-shop-hero-img { animation-name: cp-kenburns-sm; animation-duration: 12s; }
}

/* ---- Segunda foto: tarjeta flotante entre la foto y el blanco ---- */
.cp-shop-hero-card {
    position: absolute;
    right: clamp(1rem, 4vw, 3.5rem);
    bottom: 0;
    z-index: 2;
    width: var(--cp-hero-card-w);
    margin: 0;
    border: clamp(4px, .6vw, 8px) solid #FFFFFF;
    border-radius: var(--cp-radius);
    box-shadow: var(--cp-shadow-lg);
    transform: translateY(calc(var(--cp-hero-card-shift) * 100%)) rotate(2deg);
    transition: transform .5s var(--cp-ease);
}
.cp-shop-hero-card:hover { transform: translateY(calc(var(--cp-hero-card-shift) * 100%)) rotate(0deg) scale(1.02); }
@media (max-width: 767.98px) {
    /* Dentro de la pantalla (1 rem del borde), con borde fino y sin giro: el texto de debajo
       empieza siempre por debajo de lo que asoma (ver .cp-shop-hero--with-card + .cp-shop-intro). */
    .cp-shop-hero-card { right: 1rem; border-width: 3px; border-radius: 14px; }
    .cp-shop-hero-card, .cp-shop-hero-card:hover { transform: translateY(calc(var(--cp-hero-card-shift) * 100%)); }
}
.cp-shop-hero-card > img { border-radius: calc(var(--cp-radius) - 6px); }
@media (max-width: 767.98px) {
    .cp-shop-hero > .cp-shop-hero-card > img { border-radius: 11px; }
}

/* ---- Nombre, etiquetas y botones: centrados sobre blanco, con aire ---- */
.cp-shop-intro {
    padding-top: clamp(3.5rem, 8vw, 6.5rem);
    padding-bottom: clamp(1rem, 3vw, 2rem);
    text-align: center;
}
/* Con tarjeta: el texto empieza por debajo de lo que asoma, nunca a su lado. */
.cp-shop-hero--with-card + .cp-shop-intro {
    padding-top: max(clamp(3.5rem, 8vw, 6.5rem), calc(var(--cp-hero-card-out) + 2.5rem));
}
@media (max-width: 767.98px) {
    .cp-shop-intro .cp-shop-actions .btn { flex: 1 1 0; min-width: 0; }
}

/* ---- Imagen por defecto (sin Home ni Portada): fondo negro con el nombre ----
   El marco va en el mismo negro que la imagen, así no se nota el borde cuando la foto
   "respira" (móvil) o queda centrada. */
.cp-shop .cp-shop-hero-media--placeholder { background: #000; }

/* ---- Sin fotos: franja crema con un patrón de puntos ---- */
.cp-shop-hero--plain {
    height: clamp(8rem, 18vw, 14rem);
    background-color: #F6F2EA;
    background-image: radial-gradient(rgba(0, 0, 0, .09) 1px, transparent 1.4px);
    background-size: 18px 18px;
}


@media (prefers-reduced-motion: reduce) {
    .cp-shop-hero-card, .cp-shop-hero-card:hover { transition: none; transform: translateY(calc(var(--cp-hero-card-shift) * 100%)); }
}

/* ==========================================================================
   Galería de la ficha: cuadrícula 2 / 3 columnas + visor a pantalla completa
   ========================================================================== */

.cp-shop-gallery { margin-top: clamp(3rem, 7vw, 5rem); }
.cp-gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(.5rem, 1.5vw, 1.25rem);
    list-style: none;
    margin: 0;
    padding: 0;
}
@media (min-width: 992px) {
    .cp-gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Cada foto es un botón: se pulsa con el dedo, el ratón o el teclado. */
.cp-gallery-item,
.cp-shop-hero-card {
    padding: 0;
    cursor: zoom-in;
}
.cp-gallery-item {
    display: block;
    width: 100%;
    border: 0;
    border-radius: var(--cp-radius);
}
.cp-shop-hero-card { background: #FFFFFF; }
.cp-gallery-item > img { transition: transform .6s var(--cp-ease), opacity .3s var(--cp-ease); }
.cp-gallery-item:hover > img { transform: scale(1.04); }
.cp-gallery-item::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0);
    transition: background-color .3s var(--cp-ease);
}
.cp-gallery-item:hover::after { background: rgba(0, 0, 0, .08); }
.cp-gallery-item:focus-visible { outline: 2px solid var(--cp-night); outline-offset: 3px; }

/* ---- Visor: fondo casi negro, foto entera (contain), flechas finas ---- */
.cp-lightbox .modal-content {
    display: flex;
    flex-direction: column;
    border: 0;
    border-radius: 0;
    background: #0B0B0C;
    color: #FFFFFF;
}
.cp-lightbox-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: max(.75rem, env(safe-area-inset-top)) clamp(1rem, 3vw, 2rem) .75rem;
    background: linear-gradient(rgba(0, 0, 0, .55), transparent);
}
/* "LORD TON · Galería": nombre en versalitas, "Galería" en serif; el contador, pequeño y tenue */
.cp-lightbox-heading { display: flex; align-items: baseline; gap: 1rem; min-width: 0; color: #FFFFFF; }
.cp-lightbox-title { display: flex; align-items: baseline; gap: .6rem; min-width: 0; margin: 0; font-family: var(--cp-font-body); font-size: inherit; font-weight: 400; color: inherit; }
.cp-lightbox-shop { font-size: .75rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-lightbox-sep { opacity: .5; }
.cp-lightbox-label { font-family: var(--cp-font-display); font-size: 1.125rem; letter-spacing: .01em; }
.cp-lightbox-counter { flex: none; font-size: .6875rem; letter-spacing: .14em; font-variant-numeric: tabular-nums; opacity: .45; }
@media (max-width: 575.98px) { .cp-lightbox-counter { display: none; } }
.cp-lightbox-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-right: -12px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #FFFFFF;
}
.cp-lightbox-close:hover { background: rgba(255, 255, 255, .1); }
.cp-lightbox-close:focus-visible,
.cp-lightbox-nav:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; }

.cp-lightbox-carousel, .cp-lightbox-carousel .carousel-inner { height: 100%; }
.cp-lightbox-carousel { flex: 1 1 auto; }
.cp-lightbox-carousel .carousel-item { height: 100%; }
.cp-lightbox-carousel .carousel-item.active,
.cp-lightbox-carousel .carousel-item-next,
.cp-lightbox-carousel .carousel-item-prev { display: flex; align-items: center; justify-content: center; }
.cp-lightbox-carousel .carousel-item img {
    display: block;
    max-width: calc(100% - 2rem);
    max-height: calc(100% - 7rem);    /* sitio para la barra de arriba */
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 6px;
    user-select: none;
}

.cp-lightbox-nav { width: clamp(3.5rem, 10vw, 6rem); opacity: .75; }
.cp-lightbox-nav:hover { opacity: 1; }
.cp-lightbox-nav svg {
    width: 48px;
    height: 48px;
    padding: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    transition: background-color .2s var(--cp-ease);
}
.cp-lightbox-nav:hover svg { background: rgba(255, 255, 255, .16); }
@media (max-width: 575.98px) {
    .cp-lightbox-nav { align-items: flex-end; padding-bottom: 1.5rem; }   /* flechas abajo, al alcance del pulgar */
}

@media (prefers-reduced-motion: reduce) {
    .cp-gallery-item > img, .cp-gallery-item:hover > img { transition: none; transform: none; }
}

/* ==========================================================================
   Ficha: Ubicación, Contacto y Horario — composición editorial
   ========================================================================== */

/* Título de bloque en versalitas: mismo peso en Ubicación, Contacto y Horario */
.cp-aside-title { font-family: var(--cp-font-body); font-size: .75rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--cp-black); margin: 0; }

/* Ubicación: título → dirección grande en serif → mapa → "Cómo llegar" */
.cp-location-address {
    font-family: var(--cp-font-display);
    font-weight: 400;
    font-size: clamp(1.75rem, 3.6vw, 2.75rem);
    line-height: 1.15;
    letter-spacing: -.01em;
    color: var(--cp-black);
    margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
    max-width: 22ch;
}
.cp-location-note { margin: calc(-1 * clamp(.75rem, 1.5vw, 1.25rem)) 0 1.5rem; font-size: .9375rem; color: var(--cp-muted); }

#shop-map {
    width: 100%;
    height: clamp(300px, 42vw, 460px);
    border-radius: 6px;                  /* redondeo muy sutil */
    background: var(--cp-surface);
    border: 1px solid var(--cp-hairline);
    overflow: hidden;
    z-index: 0;
}
/* Blanco y negro solo en las teselas: el marcador y la ventana emergente conservan su color. */
#shop-map .leaflet-tile-pane { filter: grayscale(100%) contrast(1.1); }
#shop-map .leaflet-control-attribution { background: rgba(255, 255, 255, .8); font-size: .6875rem; }
#shop-map .leaflet-bar { border: 1px solid var(--cp-hairline); box-shadow: none; border-radius: 6px; overflow: hidden; }
#shop-map .leaflet-bar a { color: var(--cp-black); }
.cp-map-pin { background: none; border: 0; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .25)); }
.cp-map-pin svg { display: block; }

.cp-location-cta { margin-top: clamp(1.5rem, 3vw, 2rem); padding: .9rem 1.75rem; font-weight: 400; letter-spacing: .02em; }

/* Contacto y Horario: 1 columna en móvil, 2 en escritorio, separación amplia */
.cp-contact-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 4rem;
    max-width: 1040px;
    margin-inline: auto;
}
@media (min-width: 768px) {
    .cp-contact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4rem clamp(4rem, 7vw, 6rem); }
}

/* Cabecera de columna: título + raya negra fina; misma altura en las dos columnas */
.cp-contact-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 1.75rem;
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--cp-black);
}
.cp-contact-head > * { line-height: 1.2; }   /* mismo alto con o sin el estado: las dos rayas quedan a la misma altura */

/* Estado del horario: texto pequeño, sin punto */
.cp-hours-status { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--cp-muted); }
.cp-hours-status.is-open { color: var(--cp-black); font-weight: 700; }

.cp-contact-address { font-size: 1.125rem; line-height: 1.5; margin: 0 0 1.5rem; }

/* Píldoras de contacto: a todo el ancho, icono a la izquierda, etiqueta y dato alineados */
.cp-contact-list { display: grid; gap: .75rem; list-style: none; margin: 0; padding: 0; }
.cp-contact-link {
    display: grid;
    grid-template-columns: 20px 6.5rem minmax(0, 1fr);
    align-items: center;
    gap: 1rem;
    width: 100%;
    min-height: 3.5rem;
    padding: .875rem 1.5rem;
    border: 1px solid transparent;
    border-radius: 999px;
    background: #F9F8F6;
    color: var(--cp-black);
    text-decoration: none;
    transition: background-color .25s var(--cp-ease), border-color .25s var(--cp-ease);
}
.cp-contact-link:hover { background: #FFFFFF; border-color: var(--cp-black); color: var(--cp-black); }
.cp-contact-link:focus-visible { outline: 2px solid var(--cp-black); outline-offset: 3px; }
.cp-contact-icon { display: block; }
.cp-contact-label { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--cp-muted); }
.cp-contact-value { font-size: 1rem; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 359.98px) {   /* móviles muy estrechos: sin etiqueta, solo icono y dato */
    .cp-contact-link { grid-template-columns: 20px minmax(0, 1fr); padding-inline: 1.25rem; }
    .cp-contact-label { display: none; }
    .cp-contact-value { text-align: left; }
    .cp-contact-link--action .cp-contact-label { display: block; }   /* Llamar / WhatsApp no tienen dato: la etiqueta se queda */
}

/* Redes: debajo, separadas por una línea fina */
.cp-contact-social {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 2rem;
    list-style: none;
    margin: 2rem 0 0;
    padding: 1.5rem 0 0;
    border-top: 1px solid var(--cp-hairline);
}
.cp-contact-social a {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--cp-black);
    text-decoration: none;
    background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
    padding-bottom: .2rem;
    transition: background-size .3s var(--cp-ease);
}
.cp-contact-social a:hover, .cp-contact-social a:focus-visible { background-size: 100% 1px; }

/* Horario: tabla editorial, día a la izquierda y hora a la derecha, rayas muy finas */
.cp-hours { width: 100%; border-collapse: collapse; font-size: 1rem; font-variant-numeric: tabular-nums; }
.cp-hours th, .cp-hours td { padding: .95rem 0; border-bottom: 1px solid var(--cp-hairline); vertical-align: baseline; }
.cp-hours th { font-weight: 400; text-align: left; padding-right: 1rem; }
.cp-hours td { text-align: right; letter-spacing: .01em; }
.cp-hours .is-today th, .cp-hours .is-today td { font-weight: 700; }
.cp-hours .is-closed th, .cp-hours .is-closed td { color: #A3A3A3; }

/* Etiquetas de la tienda bajo la descripción: píldoras grises pequeñas, centradas. */
.cp-keyword-pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .375rem;
    list-style: none;
    margin: 2rem 0 0;
    padding: 0;
}
.cp-keyword-pills a {
    display: inline-block;
    padding: .25rem .75rem;
    border-radius: 999px;
    background: #f1f1f1;
    color: #555;
    font-size: .8125rem;
    line-height: 1.4;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}
.cp-keyword-pills a:hover,
.cp-keyword-pills a:focus-visible { background: #e2e2e2; color: #111; }

/* ==========================================================================
   Scroll infinito de los listados (portada, /tiendas · public/js/infinite-scroll.js)
   - Botón "Descubrir más tiendas": texto en DM Serif Display sobre una línea fina, sin caja.
     Solo se ve sin JavaScript, en pausa (portada) o tras un error.
   - Mientras carga: un aro fino negro que gira y "CARGANDO TIENDAS…" en versalitas grises.
   ========================================================================== */
.cp-load-more {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
    margin-top: clamp(3rem, 6vw, 5rem);
}
.cp-load-more-button {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem .25rem .6rem;
    border-bottom: 1px solid var(--cp-black);
    color: var(--cp-black);
    font-family: var(--cp-font-display);
    font-size: clamp(1.25rem, 2.2vw, 1.6rem);
    line-height: 1.2;
    text-decoration: none;
    transition: opacity .2s var(--cp-ease), gap .25s var(--cp-ease);
}
.cp-load-more-button:hover,
.cp-load-more-button:focus-visible { color: var(--cp-black); gap: .85rem; }
.cp-load-more-button:focus-visible { outline: 2px solid var(--cp-night); outline-offset: 6px; border-radius: 2px; }
/* La flecha apunta hacia abajo: al pasar el ratón baja, no se desplaza a la derecha. */
a.cp-load-more-button:hover > .cp-arrow,
a.cp-load-more-button:focus-visible > .cp-arrow { transform: translateY(3px); }
.cp-load-more-button.is-loading { opacity: .55; cursor: progress; }
.cp-load-more-button.is-loading .cp-arrow { animation: cp-load-more-bob 1s var(--cp-ease) infinite; }
.cp-load-more-status { min-height: 1.25rem; margin: 0; font-size: .8125rem; color: var(--cp-muted); text-align: center; }
.cp-load-more-status.is-error { color: #B91C1C; }

/* ---- Scroll infinito ---- */
.cp-infinite { min-height: 3.5rem; }   /* el bloque observado nunca mide 0: el observador lo ve siempre */
.cp-infinite.is-enhanced:not(.is-paused) .cp-load-more-button,
.cp-infinite.is-loading .cp-load-more-button { display: none; }
.cp-infinite.is-done .cp-load-more-status { font-family: var(--cp-font-display); font-size: 1.125rem; color: var(--cp-black); }

.cp-infinite-loader {
    display: none;
    align-items: center;
    gap: .75rem;
    color: var(--cp-muted);
    font-size: .75rem;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.cp-infinite.is-loading .cp-infinite-loader { display: inline-flex; animation: cp-fade-in .3s var(--cp-ease) both; }
.cp-infinite-spinner {
    width: 1.375rem;
    height: 1.375rem;
    border: 1.5px solid rgba(17, 17, 17, .12);
    border-top-color: var(--cp-black);
    border-radius: 50%;
    animation: cp-spin .8s linear infinite;
}

/* Las tarjetas nuevas entran con un fundido corto, una detrás de otra (--cp-enter-delay lo pone el JS). */
.cp-card-enter { animation: cp-card-enter .5s var(--cp-ease) both; animation-delay: var(--cp-enter-delay, 0ms); }

@keyframes cp-load-more-bob { 50% { transform: translateY(4px); } }
@keyframes cp-card-enter { from { opacity: 0; transform: translateY(12px); } }
@keyframes cp-fade-in { from { opacity: 0; } }
@keyframes cp-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .cp-card-enter,
    .cp-infinite.is-loading .cp-infinite-loader,
    .cp-load-more-button.is-loading .cp-arrow { animation: none; }
    .cp-infinite-spinner { animation-duration: 2.4s; }   /* sigue indicando que carga, pero despacio */
    .cp-load-more-button { transition: none; }
}

/* ==========================================================================
   Descarga de la app
   - Pie: botón "Descargar la App" (píldora con borde que se rellena de negro).
   - Página /es/app-download: título en DM Serif Display, botones de tienda,
     aviso "iOS · Próximamente" y QR en una tarjeta blanca.
   ========================================================================== */

/* ---- Pie ---- */
.cp-footer a.cp-footer-app {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    margin-top: 1.75rem;
    padding: .7rem 1.1rem .7rem .95rem;
    border: 1px solid var(--cp-black);
    border-radius: 999px;
    background-image: none;              /* sin la línea animada de los enlaces del pie */
    font-weight: 700;
    font-size: .9375rem;
    line-height: 1;
    transition: background-color .25s var(--cp-ease), color .25s var(--cp-ease);
}
.cp-footer-app-icons { display: inline-flex; align-items: center; gap: .4rem; padding-right: .75rem; border-right: 1px solid currentColor; }
.cp-footer-app-icons svg { display: block; }
.cp-footer-app-arrow { transition: transform .25s var(--cp-ease); }
.cp-footer a.cp-footer-app:hover,
.cp-footer a.cp-footer-app:focus-visible { background-color: var(--cp-black); color: var(--cp-white); }
.cp-footer a.cp-footer-app:hover .cp-footer-app-arrow,
.cp-footer a.cp-footer-app:focus-visible .cp-footer-app-arrow { transform: translateX(3px); }

/* ---- Página ---- */
.cp-download { padding-top: clamp(3.5rem, 9vw, 7.5rem); }
.cp-download-grid { display: grid; gap: clamp(3.5rem, 7vw, 6rem); align-items: center; }
@media (min-width: 992px) {
    .cp-download-grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); }
}

.cp-download-title {
    font-family: var(--cp-font-display);
    font-weight: 400;
    font-size: clamp(3rem, 8vw, 6rem);
    line-height: .98;
    letter-spacing: -.03em;
    max-width: 12ch;
    margin: 1.25rem 0 1.75rem;
}
.cp-download-lead { max-width: 34rem; margin: 0 0 clamp(2.5rem, 5vw, 3.5rem); font-size: clamp(1.125rem, 1.6vw, 1.3125rem); line-height: 1.6; color: var(--cp-muted); }

.cp-download-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 1rem; }

.cp-store-btn {
    display: inline-flex;
    align-items: center;
    gap: .95rem;
    min-height: 4.5rem;
    padding: .85rem 1.75rem .85rem 1.35rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font-family: var(--cp-font-body);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .25s var(--cp-ease), border-color .25s var(--cp-ease), box-shadow .3s var(--cp-ease), transform .3s var(--cp-ease);
}
.cp-store-btn svg { flex: none; }
.cp-store-btn-text { display: flex; flex-direction: column; gap: .2rem; line-height: 1.2; }
.cp-store-btn-label { font-size: 1.0625rem; font-weight: 700; }
.cp-store-btn-meta { font-size: .8125rem; }

.cp-store-btn--primary { background: var(--cp-black); color: var(--cp-white); box-shadow: var(--cp-shadow-sm); }
.cp-store-btn--primary .cp-store-btn-meta { color: rgba(255, 255, 255, .72); }
.cp-store-btn--primary:hover,
.cp-store-btn--primary:focus-visible { background: var(--cp-night-hover); color: var(--cp-white); box-shadow: var(--cp-shadow-md); transform: translateY(-2px); }
.cp-store-btn--primary.is-disabled { opacity: .45; cursor: default; box-shadow: none; transform: none; }

.cp-store-btn--ghost { background: var(--cp-white); border-color: rgba(0, 0, 0, .18); color: var(--cp-black); }
.cp-store-btn--ghost .cp-store-btn-meta { color: var(--cp-muted); }
.cp-store-btn--ghost:hover,
.cp-store-btn--ghost:focus-visible { border-color: var(--cp-black); }

.cp-store-btn:focus-visible { outline: 2px solid var(--cp-night); outline-offset: 3px; }

/* Aviso "La versión para iOS está en desarrollo" (bocadillo bajo el botón) */
.cp-soon { position: relative; }
.cp-soon-tip {
    position: absolute;
    top: calc(100% + .75rem);
    left: 50%;
    z-index: 5;
    width: max-content;
    max-width: min(20rem, 80vw);
    margin: 0;
    padding: .65rem 1rem;
    border-radius: 12px;
    background: var(--cp-black);
    color: var(--cp-white);
    font-size: .875rem;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
    box-shadow: var(--cp-shadow-md);
    opacity: 0;
    transform: translate(-50%, 4px);
    transition: opacity .2s var(--cp-ease), transform .2s var(--cp-ease);
    pointer-events: none;
}
.cp-soon-tip::before {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -6px;
    border: 6px solid transparent;
    border-bottom-color: var(--cp-black);
}
.cp-soon-tip.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* Tres pasos para instalar el APK */
.cp-download-steps { list-style: none; counter-reset: cp-step; max-width: 34rem; margin: clamp(3rem, 6vw, 4.5rem) 0 0; padding: 0; }
.cp-download-steps li {
    counter-increment: cp-step;
    display: flex;
    align-items: baseline;
    gap: 1.25rem;
    padding-block: 1rem;
    border-top: 1px solid var(--cp-hairline);
    color: var(--cp-muted);
}
.cp-download-steps li::before {
    content: counter(cp-step, decimal-leading-zero);
    flex: none;
    min-width: 1.75rem;                  /* "01" y "02" miden distinto: el texto queda alineado */
    font-family: var(--cp-font-display);
    font-size: 1.375rem;
    line-height: 1;
    color: var(--cp-black);
}

/* QR en una tarjeta blanca */
.cp-download-qr { justify-self: center; width: 100%; max-width: 20rem; margin: 0; text-align: center; }
.cp-qr {
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    padding: 1.5rem;
    border: 1px solid var(--cp-hairline);
    border-radius: var(--cp-radius);
    background: var(--cp-white);
    color: var(--cp-black);
    box-shadow: var(--cp-shadow-lg);
    overflow-wrap: anywhere;
    font-size: .8125rem;
}
.cp-qr svg { display: block; width: 100%; height: auto; }
.cp-download-qr figcaption { margin-top: 1.5rem; color: var(--cp-muted); font-size: .9375rem; line-height: 1.5; }

@media (max-width: 575.98px) {
    .cp-download-actions, .cp-soon, .cp-store-btn { width: 100%; }
    .cp-download-qr { max-width: 15rem; }
}

@media (prefers-reduced-motion: reduce) {
    .cp-store-btn, .cp-soon-tip, .cp-footer a.cp-footer-app, .cp-footer-app-arrow { transition: none; }
    .cp-store-btn--primary:hover, .cp-store-btn--primary:focus-visible { transform: none; }
}