@import url('variables.css');

/* ==========================================================================
   Ritmo de la portada: todas las secciones con el mismo aire vertical, y
   alternando fondo gris / blanco (--surface) para separarlas sin líneas.
   ========================================================================== */

.home-section {
    padding-block: clamp(48px, 7vw, 80px);
}

.home-section--surface {
    background: var(--color-surface);
}

/* ==========================================================================
   Banner (imagen a todo el ancho, justo debajo del header)
   ========================================================================== */

.page-banner {
    position: relative;
    overflow: hidden;
    min-height: clamp(480px, 50vw, 620px);
    display: flex;
    align-items: center;
    background: var(--color-header);
}

.page-banner__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Se muestra solo si la imagen de arriba falla (onerror en el <img>), para
   que la sección nunca se vea rota mientras no haya una foto real subida. */
.page-banner__fallback {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-primary-dark), var(--color-header));
    color: rgba(255, 255, 255, .35);
    font-size: clamp(48px, 8vw, 96px);
}

/* Más oscuro a la izquierda (donde va el texto) y se aclara hacia la
   derecha, para que la foto siga visible tras el panel de ventajas. Abajo
   se funde con un degradado hacia el tono del header, para que el panel de
   categorías que monta encima no corte la foto en seco. */
.page-banner__shade {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, transparent 55%, rgba(10, 20, 15, .55) 100%),
        linear-gradient(100deg, rgba(10, 20, 15, .88) 0%, rgba(10, 20, 15, .7) 42%, rgba(10, 20, 15, .35) 75%, rgba(10, 20, 15, .25) 100%);
    pointer-events: none;
}

/* Abajo deja sitio al panel de categorías (.cat-strip), que sube encima. */
.page-banner__content {
    position: relative;
    z-index: 1;
    padding-top: clamp(40px, 6vw, 72px);
    padding-bottom: clamp(96px, 10vw, 128px);
}

/* El hero va sobre foto: el texto pasa a claro. */
.page-banner .hero__content h1,
.page-banner .hero__content h1 em {
    color: #fff;
}

.page-banner .hero__content p {
    color: rgba(255, 255, 255, .82);
}

.page-banner .hero__stats div strong {
    color: #fff;
}

.page-banner .hero__stats div span {
    color: rgba(255, 255, 255, .7);
}

@media (max-width: 991.98px) {
    .page-banner {
        min-height: 0;
    }

    /* En una columna, todo el fondo detrás del texto necesita quedar
       oscuro por igual (el degradado diagonal asume texto a la izquierda,
       foto a la derecha, que ya no aplica apilado). */
    .page-banner__shade {
        background: rgba(10, 20, 15, .74);
    }
}

/* ==========================================================================
   Estado de carga de las secciones que llegan por AJAX (assets/js/inicio.js)
   ========================================================================== */

/* El contenedor solo envuelve la silueta (skeleton) o el aviso de error;
   el espaciado lo ponen ellos mismos. */
.loading-shelf {
    color: var(--color-text-soft);
}

/* ==========================================================================
   Hero
   ========================================================================== */

/* Entrada al cargar: texto y panel suben en cascada. Es CSS puro (no
   depende de home.js) porque el hero es lo primero que se ve. */
@keyframes hero-rise {
    from {
        opacity: 0;
        transform: translateY(22px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.hero__content > * {
    animation: hero-rise .8s var(--ease-out) both;
}

.hero__content > :nth-child(2) { animation-delay: .08s; }
.hero__content > :nth-child(3) { animation-delay: .16s; }
.hero__content > :nth-child(4) { animation-delay: .24s; }
.hero__content > :nth-child(5) { animation-delay: .32s; }

/* Foto del banner: un zoom muy lento al entrar da profundidad sin distraer. */
@keyframes banner-settle {
    from {
        transform: scale(1.08);
    }

    to {
        transform: scale(1);
    }
}

.page-banner__img {
    animation: banner-settle 2.4s var(--ease-out) both;
}

.hero__content h1 {
    font: 800 clamp(34px, 5vw, 56px)/1.08 var(--font-display);
    margin: 20px 0 18px;
    letter-spacing: -.02em;
    word-spacing: .04em;
    max-width: 680px;
}

.hero__content h1 em {
    font-style: normal;
    color: var(--color-accent);
}

.page-banner .eyebrow {
    background: rgba(255, 255, 255, .14);
    color: #fff;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, .18);
}

.hero__content p {
    font-size: 18px;
    line-height: 1.6;
    max-width: 520px;
    margin: 0 0 28px;
}

/* Buscador protagonista: una sola píldora blanca con icono, campo y botón. */
.hero-search {
    display: flex;
    align-items: center;
    max-width: 560px;
    padding: 6px 6px 6px 20px;
    background: #fff;
    border-radius: var(--radius-pill);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .28);
    transition: box-shadow var(--dur) var(--ease-out);
}

.hero-search:focus-within {
    box-shadow: 0 0 0 4px rgba(242, 160, 61, .55), 0 18px 50px rgba(0, 0, 0, .28);
}

.hero-search__icon {
    color: var(--color-text-soft);
    font-size: 16px;
    flex-shrink: 0;
}

.hero-search input {
    flex: 1 1 auto;
    min-width: 0;
    border: none;
    background: transparent;
    padding: 12px 14px;
    font: 500 16px/1.2 var(--font-body);
    color: var(--color-text);
}

.hero-search input:focus,
.hero-search input:focus-visible {
    outline: none;
    box-shadow: none;
}

.hero-search .btn {
    padding: 14px 26px;
    flex-shrink: 0;
}

.hero__stats {
    margin-top: 32px;
    gap: 16px 0;
}

.hero__stats > div {
    padding-right: 24px;
}

.hero__stats div strong {
    display: block;
    font: 800 30px/1 var(--font-display);
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    margin-bottom: 6px;
}

/* Separador fino entre estadísticas, como en las cifras de las landings. */
.hero__stats > div + div {
    padding-left: 24px;
    border-left: 1px solid rgba(255, 255, 255, .18);
}

.hero__stats div span {
    font-size: 13px;
}

@media (max-width: 575.98px) {
    .hero-search {
        padding-left: 16px;
    }

    .hero-search .btn {
        padding: 13px 18px;
    }

    /* Las tres cifras siempre en una fila (antes "2 horas" bajaba sola,
       con el separador colgando). !important: el HTML lleva d-flex. */
    .hero__stats {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .hero__stats div strong {
        font-size: 22px;
    }

    .hero__stats div span {
        font-size: 12px;
        line-height: 1.3;
        display: block;
    }

    .hero__stats > div {
        padding-right: 10px;
    }

    .hero__stats > div + div {
        padding-left: 10px;
    }
}

/* Panel translúcido de ventajas (lado derecho del hero). */
.hero-perks {
    list-style: none;
    margin: 0 0 0 auto;
    padding: 10px;
    max-width: 420px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    /* Fondo oscuro translúcido (no blanco): la foto de detrás es muy
       cargada y con un velo claro el texto blanco no se leía. */
    background: rgba(12, 22, 16, .55);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: var(--radius-lg);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .3);
}

.hero-perks li {
    animation: hero-rise .8s var(--ease-out) both;
}

.hero-perks li:nth-child(1) { animation-delay: .3s; }
.hero-perks li:nth-child(2) { animation-delay: .4s; }
.hero-perks li:nth-child(3) { animation-delay: .5s; }
.hero-perks li:nth-child(4) { animation-delay: .6s; }

.hero-perks__item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    border-radius: var(--radius);
    color: #fff;
}

.hero-perks__item > div {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.hero-perks strong {
    font: 700 15px/1.25 var(--font-display);
}

.hero-perks span:not(.hero-perks__icon) {
    font-size: 13.5px;
    line-height: 1.45;
    color: rgba(255, 255, 255, .8);
}

.hero-perks__icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .95);
    color: var(--color-primary-dark);
    font-size: 16px;
}

.hero-perks__link {
    text-decoration: none;
    background: rgba(242, 160, 61, .16);
    border: 1px solid rgba(242, 160, 61, .35);
    transition: background-color var(--dur) ease;
}

.hero-perks__link .hero-perks__icon {
    background: var(--color-accent);
    color: #1b1f1d;
}

.hero-perks__link:hover {
    background: rgba(242, 160, 61, .28);
    color: #fff;
}

.hero-perks__go {
    margin-left: auto;
    font-size: 13px;
    transition: transform var(--dur) var(--ease-out);
}

.hero-perks__link:hover .hero-perks__go {
    transform: translateX(4px);
}

@media (max-width: 991.98px) {
    .hero-perks {
        margin: 0;
        max-width: none;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    }
}

/* En móvil el panel completo alargaba el hero más de una pantalla: queda
   una rejilla 2x2 de icono + título, sin la frase descriptiva. */
@media (max-width: 575.98px) {
    .hero-perks {
        grid-template-columns: 1fr 1fr;
        padding: 6px;
        gap: 4px;
        border-radius: var(--radius);
    }

    .hero-perks__item {
        gap: 10px;
        padding: 10px;
    }

    .hero-perks__icon {
        width: 34px;
        height: 34px;
        border-radius: 10px;
        font-size: 14px;
    }

    .hero-perks strong {
        font-size: 13px;
    }

    .hero-perks span:not(.hero-perks__icon),
    .hero-perks__go {
        display: none;
    }
}

/* ==========================================================================
   Compra por categoría — panel blanco que sube sobre el borde del hero
   ========================================================================== */

.cat-strip {
    position: relative;
    z-index: 2;
    margin-top: calc(-1 * clamp(64px, 7vw, 88px));
}

.cat-strip__panel {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: 0 24px 60px rgba(16, 24, 20, .12);
    padding: 22px 24px 18px;
}

.cat-strip__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.cat-strip__head h2 {
    font: 800 18px/1.2 var(--font-display);
    margin: 0;
}

.cat-strip__row {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding: 4px 2px 6px;
    margin: -4px -2px -6px;
}

.cat-strip__row::-webkit-scrollbar {
    display: none;
}

.cat-tile {
    flex: 1 0 104px;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 12px 6px;
    border-radius: var(--radius);
    text-align: center;
    text-decoration: none;
    color: var(--color-text);
    transition: background-color var(--dur) ease;
}

.cat-tile__media {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--color-primary-soft);
    color: var(--color-primary-dark);
    font-size: 26px;
    transition: transform var(--dur) var(--ease-spring), background-color var(--dur) ease, color var(--dur) ease, box-shadow var(--dur) ease;
}

.cat-tile__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cat-tile__name {
    font: 600 13px/1.25 var(--font-body);
}

.cat-tile:hover {
    background: var(--color-bg);
    color: var(--color-primary-dark);
}

.cat-tile:hover .cat-tile__media {
    transform: translateY(-3px) scale(1.06);
    background: var(--color-primary);
    color: #fff;
    box-shadow: 0 10px 24px rgba(31, 122, 77, .3);
}

@media (max-width: 575.98px) {
    .cat-strip__panel {
        padding: 18px 16px 14px;
    }

    .cat-tile {
        flex-basis: 88px;
    }

    .cat-tile__media {
        width: 60px;
        height: 60px;
        font-size: 22px;
    }
}

/* ==========================================================================
   Establecimientos — chips de categoría de negocio
   ========================================================================== */

.biz-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 24px;
}

.biz-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 18px 6px 6px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
    font: 600 14px/1 var(--font-body);
    text-decoration: none;
    transition: border-color var(--dur-fast) ease, background-color var(--dur-fast) ease, color var(--dur-fast) ease,
        transform var(--dur) var(--ease-out), box-shadow var(--dur) ease;
}

/* "Todos" no lleva medalla: mismo alto que los demás con su propio relleno. */
.biz-chip.is-active {
    padding: 13px 18px;
    background: var(--color-text);
    border-color: var(--color-text);
    color: #fff;
}

.biz-chip__icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--color-primary-soft);
    color: var(--color-primary-dark);
    font-size: 13px;
}

.biz-chip__icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.biz-chip:hover {
    border-color: var(--color-primary);
    color: var(--color-primary-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-card);
}

.biz-chip.is-active:hover {
    color: #fff;
    border-color: var(--color-text);
}

/* ==========================================================================
   Cómo funciona — línea de tiempo: cuatro pasos unidos por una línea que
   pasa por los números (en escritorio; apilados en móvil).
   ========================================================================== */

.steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    position: relative;
}

.steps::before {
    content: '';
    position: absolute;
    top: 49px;
    left: 12.5%;
    right: 12.5%;
    height: 2px;
    background: repeating-linear-gradient(90deg, var(--color-primary) 0 8px, transparent 8px 16px);
    opacity: .35;
}

.step-card {
    position: relative;
    text-align: center;
    padding: 28px 22px 26px;
    background: var(--color-bg);
    border-radius: var(--radius);
    border: 1px solid transparent;
    transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out),
        border-color var(--dur) ease, background-color var(--dur) ease;
}

.step-card:hover {
    background: var(--color-surface);
    border-color: var(--color-border);
    box-shadow: var(--shadow-hover);
    transform: translateY(-4px);
}

.step-card__number {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    font: 800 16px/1 var(--font-display);
    margin-bottom: 18px;
    /* Anillo del color del fondo: "corta" la línea punteada alrededor del número. */
    box-shadow: 0 0 0 6px var(--color-surface), 0 8px 18px rgba(31, 122, 77, .3);
    transition: transform var(--dur) var(--ease-spring);
}

.step-card:hover .step-card__number {
    transform: scale(1.12);
}

.step-card h3 {
    font: 700 17px/1.3 var(--font-display);
    margin: 0 0 8px;
}

.step-card p {
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--color-text-muted);
    margin: 0;
}

@media (max-width: 991.98px) {
    .steps {
        grid-template-columns: repeat(2, 1fr);
    }

    .steps::before {
        display: none;
    }
}

@media (max-width: 575.98px) {
    .steps {
        grid-template-columns: 1fr;
    }

    .step-card {
        text-align: left;
        display: grid;
        grid-template-columns: auto 1fr;
        column-gap: 16px;
        padding: 20px;
    }

    .step-card__number {
        grid-row: span 2;
        margin-bottom: 0;
    }
}

/* ==========================================================================
   Cestas compartidas (feature destacado)
   ========================================================================== */

/* Degradado con dos halos de luz difusos (acento y verde claro) en vez de
   un bloque de color plano. */
.share-feature {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(600px circle at 100% 0%, rgba(242, 160, 61, .22), transparent 60%),
        radial-gradient(500px circle at 0% 100%, rgba(46, 156, 99, .45), transparent 60%),
        linear-gradient(135deg, #1B6B44 0%, var(--color-primary-dark) 55%, #11452B 100%);
    border-radius: var(--radius-lg);
    color: #fff;
}

.share-feature .eyebrow {
    background: rgba(255, 255, 255, .16);
    color: #fff;
}

.share-feature h2 {
    font: 800 clamp(24px, 3.6vw, 34px)/1.2 var(--font-display);
    letter-spacing: -.025em;
    margin: 16px 0 14px;
}

.share-feature p {
    font-size: 15.5px;
    line-height: 1.7;
    color: rgba(255, 255, 255, .85);
    max-width: 460px;
    margin: 0 0 26px;
}

.share-feature__list {
    list-style: none;
    margin: 0 0 30px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.share-feature__list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14.5px;
    color: rgba(255, 255, 255, .92);
}

.share-feature__list i {
    margin-top: 3px;
    color: var(--color-accent);
}

.share-mock {
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: var(--radius);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.share-mock__row {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, .1);
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 12px;
}

.share-mock__row:last-child {
    margin-bottom: 0;
}

.share-mock__avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--color-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font: 700 13px/1 var(--font-body);
    color: #1B1F1D;
    flex-shrink: 0;
}

.share-mock__row div p {
    margin: 0;
    font-size: 13.5px;
}

.share-mock__row div span {
    font-size: 11.5px;
    color: rgba(255, 255, 255, .65);
}

.share-mock__link {
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, .95);
    color: var(--color-primary-dark);
    border-radius: 10px;
    padding: 10px 12px;
    font: 600 13px/1 var(--font-body);
}

.share-mock__link i {
    color: var(--color-primary);
}

/* ==========================================================================
   CTA final
   ========================================================================== */

.cta-banner {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(520px circle at 15% 0%, rgba(46, 156, 99, .35), transparent 60%),
        radial-gradient(420px circle at 90% 110%, rgba(242, 160, 61, .22), transparent 60%),
        var(--color-text);
    color: #fff;
    border-radius: var(--radius-lg);
}

.cta-banner h2 {
    font: 800 clamp(24px, 3.6vw, 36px)/1.2 var(--font-display);
    letter-spacing: -.025em;
    margin: 0 0 14px;
}

.cta-banner p {
    color: rgba(255, 255, 255, .72);
    max-width: 520px;
    margin: 0 auto 30px;
    font-size: 15.5px;
    line-height: 1.6;
}

/* ==========================================================================
   Completa tu cesta: bloque verde con una caja blanca por categoría
   (estilo "pasillos" de supermercado online). Lo pinta inicio.js con los
   datos de assets/api/inicio-categorias.php.
   ========================================================================== */

.pasillos {
    border-radius: var(--radius-lg);
    padding: clamp(14px, 2.5vw, 22px);
    background:
        radial-gradient(600px circle at 100% 0%, rgba(242, 160, 61, .22), transparent 60%),
        linear-gradient(135deg, #1B6B44 0%, var(--color-primary-dark) 60%, #11452B 100%);
}

.pasillos__cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: clamp(10px, 2vw, 18px) clamp(6px, 1.5vw, 14px) clamp(18px, 3vw, 26px);
    color: #fff;
}

.pasillos__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font: 600 12.5px/1 var(--font-body);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--color-accent);
}

.pasillos__cabecera h2 {
    font: 800 clamp(30px, 5vw, 52px)/1.05 var(--font-display);
    letter-spacing: -.03em;
    margin: 10px 0 8px;
    color: #fff;
}

.pasillos__cabecera p {
    margin: 0;
    color: rgba(255, 255, 255, .8);
    font-size: 15.5px;
}

.pasillos__iconos {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

.pasillos__iconos span {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: var(--color-primary-dark);
    background: #fff;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .18);
}

.pasillos__iconos span:nth-child(even) {
    transform: translateY(10px);
    background: var(--color-accent);
    color: #1b1f1d;
}

.pasillos__lista {
    display: flex;
    flex-direction: column;
    gap: clamp(12px, 2vw, 16px);
}

.pasillo {
    background: var(--color-surface);
    border-radius: var(--radius);
    /* Abajo, aire de sobra: el carril compensa con margen negativo el hueco
       que reserva para la sombra de las tarjetas, y sin esto quedaban
       pegadas (o saliéndose) del borde de la caja blanca. */
    padding: 16px clamp(12px, 2vw, 20px) clamp(18px, 2vw, 24px);
}

.pasillo__cabecera {
    display: flex;
    align-items: baseline;
    gap: 14px;
    padding-bottom: 12px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--color-border);
}

.pasillo__cabecera h3 {
    font: 700 clamp(17px, 2vw, 20px)/1.2 var(--font-display);
    margin: 0;
}

.pasillo__pagina {
    margin-left: auto;
    font-size: 12.5px;
    color: var(--color-text-soft);
    white-space: nowrap;
}

.pasillo__ver {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font: 600 13.5px/1 var(--font-body);
    color: var(--color-primary-dark);
    text-decoration: none;
    white-space: nowrap;
}

.pasillo__pagina:empty + .pasillo__ver {
    margin-left: auto;
}

.pasillo__ver i {
    font-size: 10px;
    transition: transform var(--dur) var(--ease-out);
}

.pasillo__ver:hover {
    color: var(--color-primary);
}

.pasillo__ver:hover i {
    transform: translateX(3px);
}

/* Flechas a los lados del carrusel, a media altura de las tarjetas. */
.pasillo__carrusel {
    position: relative;
}

.pasillo__flecha {
    position: absolute;
    top: 40%;
    z-index: 2;
    transform: translateY(-50%);
    box-shadow: var(--shadow-card);
}

.pasillo__flecha--prev {
    left: -8px;
}

.pasillo__flecha--next {
    right: -8px;
}

.pasillo__flecha:hover:not(:disabled) {
    transform: translateY(-50%) scale(1.06);
}

.pasillo__flecha:disabled {
    opacity: 0;
    pointer-events: none;
}

@media (max-width: 767.98px) {
    .pasillos__iconos {
        display: none;
    }
}

/* ---------- "¿Qué necesitas hoy?": un bloque por tipo de establecimiento ----------
   Los pinta inicio.js con las categorías de negocio de marketplace. Cada tipo
   lleva su propio tono (--tipo-tono, calculado de su id): un tipo nuevo
   también tiene su color sin tocar este archivo. */

.tipos-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

@media (min-width: 768px) {
    .tipos-grid {
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    }
}

.tipo-card {
    --tipo-tono: 150;
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
        "icono texto"
        "acciones acciones";
    align-items: center;
    align-content: space-between;
    gap: 16px 18px;
    padding: 22px;
    border-radius: var(--radius-lg);
    background:
        radial-gradient(420px 220px at 105% -20%, hsl(var(--tipo-tono) 70% 85% / .55), transparent 65%),
        linear-gradient(135deg, hsl(var(--tipo-tono) 45% 97%), var(--color-surface));
    border: 1px solid hsl(var(--tipo-tono) 35% 88%);
    box-shadow: var(--shadow-card);
    transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}

.tipo-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
}

.tipo-card__icono {
    grid-area: icono;
    width: 68px;
    height: 68px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: #fff;
    background: linear-gradient(135deg, hsl(var(--tipo-tono) 55% 42%), hsl(var(--tipo-tono) 60% 30%));
    box-shadow: 0 12px 26px hsl(var(--tipo-tono) 50% 30% / .3);
    overflow: hidden;
    transition: transform var(--dur) var(--ease-spring);
}

.tipo-card:hover .tipo-card__icono {
    transform: rotate(-6deg) scale(1.05);
}

.tipo-card__icono img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tipo-card__texto {
    grid-area: texto;
    min-width: 0;
}

.tipo-card__texto h3 {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 21px;
    margin: 0 0 4px;
}

.tipo-card__texto p {
    margin: 0;
    font-size: 14px;
    color: var(--color-text-muted);
}

.tipo-card__acciones {
    grid-area: acciones;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 18px;
}

.tipo-card__acciones .btn i {
    transition: transform var(--dur-fast);
}

.tipo-card__acciones .btn:hover i {
    transform: translateX(3px);
}

.tipo-card__enlace {
    font-weight: 600;
    font-size: 14px;
    color: var(--color-primary-dark);
    text-decoration: none;
}

.tipo-card__enlace:hover {
    text-decoration: underline;
}

/* Siempre en dos filas (icono + texto; debajo, las acciones): con tres o más
   tipos por fila la tarjeta es estrecha y una sola fila no cabe. */
.tipo-card__acciones {
    padding-top: 14px;
    border-top: 1px solid hsl(var(--tipo-tono) 35% 90%);
    justify-content: space-between;
}

@media (min-width: 992px) {
    .tipo-card {
        padding: 26px 28px;
    }
}

/* Tipo sin establecimientos todavía: tarjeta atenuada con "Muy pronto". */
.tipo-card--pronto {
    background: var(--color-surface);
    border-style: dashed;
}

.tipo-card--pronto .tipo-card__icono {
    filter: saturate(.35);
    opacity: .75;
}

.tipo-card__pronto {
    display: inline-block;
    margin-bottom: 6px;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    background: var(--color-accent-soft);
    color: #8a4f0c;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* Cobertura de la portada: provincias de cada región con sus zonas y establecimientos. */
.cobertura__lista li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px dashed var(--color-border);
    font-size: 14px;
}

.cobertura__lista li:last-child {
    border-bottom: 0;
}

.cobertura__datos {
    color: var(--color-text-muted);
    white-space: nowrap;
}

.cobertura__datos b {
    color: var(--color-primary-dark);
}