/* ==========================================================================
   GiftCardOferta Global - sistema visual
   ========================================================================== */

:root {
    --ink: #0f172a;
    --ink-soft: #334155;
    --muted: #64748b;
    --line: #e2e8f0;
    --line-soft: #eef2f7;
    --surface: #ffffff;
    --canvas: #f5f7fa;
    --accent: #16a34a;
    --accent-dark: #087a3c;
    --accent-soft: #ecfdf3;
    --whatsapp: #25d366;
    --whatsapp-dark: #1da851;
    --danger: #dc2626;
    --danger-soft: #fef2f2;
    --warning: #b45309;
    --warning-soft: #fffbeb;
    --radius-sm: 10px;
    --radius: 14px;
    --radius-lg: 20px;
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .05);
    --shadow-md: 0 14px 34px rgba(15, 23, 42, .1);
    --shadow-lg: 0 24px 60px rgba(15, 23, 42, .14);
    /* Alto de diseno de la barra superior en una sola fila. */
    --header-h: 74px;
    /*
       Alto real de la cabecera ahora mismo. En movil y tablet la cabecera se
       parte en varias filas y mide bastante mas, asi que JavaScript la mide y
       actualiza este valor: es el que usan la barra de busqueda pegajosa y el
       desplazamiento a las anclas.
    */
    --header-now: 74px;
    /*
       --toolbar-now (alto real del buscador pegajoso) lo escribe el mismo
       JavaScript, y a proposito no se declara aqui: sin declarar, quien lo usa
       puede dar su propia reserva con var(--toolbar-now, ...) para el rato
       antes de la primera medida. Declararlo la anularia.
    */
    --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-now) + 16px);
}

body {
    margin: 0;
    min-width: 320px;
    background: var(--canvas);
    color: var(--ink);
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

body::before {
    content: "";
    position: fixed;
    inset: 0 0 auto;
    height: 640px;
    background:
        radial-gradient(circle at 10% 0%, rgba(22, 163, 74, .10), transparent 38%),
        radial-gradient(circle at 92% 6%, rgba(37, 99, 235, .07), transparent 32%);
    pointer-events: none;
    z-index: -1;
}

h1, h2, h3, h4 {
    margin: 0;
    color: var(--ink);
    font-weight: 800;
    letter-spacing: -.025em;
    line-height: 1.18;
}

p {
    margin: 0;
}

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

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

:focus-visible {
    outline: 3px solid rgba(22, 163, 74, .35);
    outline-offset: 2px;
}

[hidden] {
    display: none !important;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    top: -60px;
    left: 12px;
    z-index: 9999;
    padding: 10px 16px;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    background: var(--ink);
    color: #fff;
    font-weight: 700;
    transition: top .2s ease;
}

.skip-link:focus {
    top: 0;
}

.noscript-note {
    margin: 0;
    padding: 14px 20px;
    border-bottom: 1px solid #fde68a;
    background: var(--warning-soft);
    color: var(--warning);
    font-size: 14px;
    text-align: center;
}

/* --------------------------------------------------------------------------
   Primitivas de layout
   -------------------------------------------------------------------------- */

.shell {
    width: min(100% - 40px, 1280px);
    margin-inline: auto;
}

.shell--narrow {
    width: min(100% - 40px, 820px);
}

.kicker {
    display: block;
    margin-bottom: 10px;
    color: var(--accent-dark);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 26px;
    flex-wrap: wrap;
}

.section-head h1 {
    font-size: clamp(30px, 4.2vw, 42px);
}

.section-head h2 {
    font-size: clamp(24px, 3.2vw, 33px);
}

.section-head p {
    margin-top: 10px;
    max-width: 62ch;
    color: var(--ink-soft);
}

.section-head--center {
    justify-content: center;
    text-align: center;
}

.section-head--center p {
    margin-inline: auto;
}

.section-head__meta {
    color: var(--muted);
    font-size: 14px;
}

.section-head__note {
    margin-top: 8px;
    max-width: 62ch;
    color: var(--ink-soft);
    font-size: 14px;
}

.section-head__meta strong {
    color: var(--ink);
}

.page-section {
    padding: 48px 0 72px;
}

/* --------------------------------------------------------------------------
   Botones
   -------------------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 46px;
    padding: 0 20px;
    border: 1px solid transparent;
    border-radius: 12px;
    background: none;
    cursor: pointer;
    font-size: 14px;
    font-weight: 750;
    text-align: center;
    transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease, border-color .16s ease;
}

.btn:disabled {
    cursor: not-allowed;
    opacity: .5;
}

.btn:not(:disabled):hover {
    transform: translateY(-1px);
}

.btn:not(:disabled):active {
    transform: translateY(0);
}

.btn--primary {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .18);
}

.btn--primary:not(:disabled):hover {
    background: #1e293b;
}

.btn--ghost {
    border-color: var(--line);
    background: rgba(255, 255, 255, .8);
    color: var(--ink);
}

.btn--ghost:not(:disabled):hover {
    border-color: #cbd5e1;
    background: #fff;
}

.btn--whatsapp {
    background: var(--whatsapp);
    border-color: var(--whatsapp);
    color: #06301a;
    box-shadow: 0 10px 24px rgba(37, 211, 102, .28);
}

.btn--whatsapp:not(:disabled):hover {
    background: var(--whatsapp-dark);
    border-color: var(--whatsapp-dark);
    color: #fff;
}

.btn--add {
    min-height: 40px;
    padding: 0 16px;
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    font-size: 13px;
}

.btn--add:not(:disabled):hover {
    background: var(--accent-dark);
    border-color: var(--accent-dark);
}

.btn--add.is-done {
    background: var(--accent-dark);
    border-color: var(--accent-dark);
}

.btn--block {
    width: 100%;
}

.btn--sm {
    min-height: 40px;
    padding: 0 14px;
    font-size: 13px;
}

.btn--tiny {
    min-height: 32px;
    padding: 0 12px;
    border-color: var(--line);
    background: #fff;
    font-size: 12px;
}

.btn--lg {
    min-height: 56px;
    font-size: 16px;
}

.btn__icon {
    display: inline-grid;
    place-items: center;
}

.btn__amount {
    margin-left: auto;
    padding-left: 14px;
    font-variant-numeric: tabular-nums;
    opacity: .85;
}

/* --------------------------------------------------------------------------
   Cabecera
   -------------------------------------------------------------------------- */

/*
   La cabecera se aparta al bajar y vuelve al subir (solo donde se parte en
   varias filas). Asi el catalogo gana el alto completo de la cabecera y la
   barra de busqueda deja de quedar escondida detras.
*/
.site-header {
    position: sticky;
    top: 0;
    z-index: 900;
    transition: transform .28s ease;
    background: rgba(11, 18, 32, .96);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 4px 22px rgba(15, 23, 42, .14);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: var(--header-h);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    color: #fff;
    flex-shrink: 0;
}

.brand img {
    width: 44px;
    height: 44px;
    object-fit: contain;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 12px;
}

.brand__copy {
    display: grid;
    gap: 1px;
}

.brand__name {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -.02em;
}

.brand__tag {
    color: #94a3b8;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-inline: auto;
}

.site-nav a {
    padding: 8px 14px;
    border-radius: 999px;
    color: #cbd5e1;
    font-size: 14px;
    font-weight: 650;
    transition: color .16s ease, background-color .16s ease;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
    background: rgba(255, 255, 255, .08);
    color: #fff;
}

.site-header__actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pay-badge {
    padding: 7px 12px;
    border: 1px solid rgba(74, 222, 128, .3);
    border-radius: 999px;
    background: rgba(22, 163, 74, .14);
    color: #86efac;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .04em;
    white-space: nowrap;
}

.lang-switch {
    display: inline-flex;
    padding: 3px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 999px;
    background: rgba(255, 255, 255, .06);
}

.lang-switch__item {
    padding: 5px 11px;
    border-radius: 999px;
    color: #94a3b8;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .04em;
    transition: background-color .16s ease, color .16s ease;
}

.lang-switch__item:hover {
    color: #fff;
}

.lang-switch__item.is-active {
    background: #fff;
    color: var(--ink);
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
    padding: 64px 0 52px;
}

.hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr);
    align-items: center;
    gap: 60px;
}

.hero h1 {
    max-width: 15ch;
    font-size: clamp(40px, 5.6vw, 70px);
    font-weight: 850;
    letter-spacing: -.055em;
    line-height: .98;
}

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

.hero__copy > p {
    max-width: 58ch;
    margin-top: 22px;
    color: var(--ink-soft);
    font-size: clamp(16px, 1.6vw, 18px);
    line-height: 1.65;
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}

.hero__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    margin: 34px 0 0;
    padding-top: 24px;
    border-top: 1px solid var(--line);
}

.hero__stats div {
    display: grid;
    gap: 2px;
}

.hero__stats dt {
    color: var(--ink);
    font-size: 21px;
    font-weight: 850;
    letter-spacing: -.03em;
}

.hero__stats dd {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    font-weight: 650;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.hero__trust {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 14px;
    list-style: none;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, .74);
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(8px);
}

.hero__trust li {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding: 13px;
    border-radius: var(--radius);
    background: #fff;
    border: 1px solid var(--line-soft);
}

.hero__trust-num {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: var(--accent-soft);
    color: var(--accent-dark);
    font-size: 12px;
    font-weight: 850;
}

.hero__trust strong {
    display: block;
    font-size: 14px;
    font-weight: 750;
}

.hero__trust small {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-size: 12.5px;
    line-height: 1.5;
}

/* --------------------------------------------------------------------------
   Catalogo: barra de herramientas
   -------------------------------------------------------------------------- */

.catalog {
    padding: 40px 0 70px;
}

.toolbar {
    display: grid;
    gap: 14px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, .85);
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: var(--header-now);
    z-index: 60;
    transition: top .28s ease;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.search {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 0 14px;
    min-height: 50px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    color: var(--muted);
    transition: border-color .16s ease, box-shadow .16s ease;
}

.search:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(22, 163, 74, .12);
}

.search input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: none;
    color: var(--ink);
    font-size: 15px;
    outline: none;
}

.search input::-webkit-search-cancel-button {
    display: none;
}

.search button {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 50%;
    background: var(--line-soft);
    color: var(--ink-soft);
    cursor: pointer;
    font-size: 17px;
    line-height: 1;
}

.chips {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: thin;
}

/* --------------------------------------------------------------------------
   Pista horizontal de categorias: borde difuminado y tiron de aviso
   -------------------------------------------------------------------------- */

.chips-scroll {
    /* Alto de la fila de pastillas: ancla el degradado y la flecha. */
    --chips-row: 38px;
    position: relative;
    min-width: 0;
}

/*
   El relleno inferior separa las pastillas de la barra de desplazamiento, que
   el navegador dibuja pegada al borde de abajo de la fila.
*/
.chips-scroll .chips {
    padding-bottom: 11px;
    scrollbar-color: #cbd5e1 transparent;
}

.chips-scroll .chips::-webkit-scrollbar {
    height: 6px;
}

.chips-scroll .chips::-webkit-scrollbar-track {
    background: transparent;
}

.chips-scroll .chips::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: #cbd5e1;
}

/* Degradado que deja ver que la fila sigue mas alla del borde. */
.chips-scroll::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    width: 64px;
    height: var(--chips-row);
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .96) 62%);
    opacity: 0;
    transition: opacity .22s ease;
    pointer-events: none;
}

.chips-scroll.is-scrollable:not(.at-end)::after {
    opacity: 1;
}

.chips-scroll__hint {
    position: absolute;
    top: calc((var(--chips-row) - 27px) / 2);
    right: 1px;
    z-index: 2;
    display: none;
    place-items: center;
    width: 27px;
    height: 27px;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: #fff;
    color: var(--ink-soft);
    box-shadow: var(--shadow-sm);
    opacity: 1;
    transition: opacity .22s ease;
    pointer-events: none;
}

.chips-scroll.is-scrollable .chips-scroll__hint {
    display: grid;
}

.chips-scroll.at-end .chips-scroll__hint {
    opacity: 0;
}

/*
   El tiron: la fila se asoma hacia la izquierda y vuelve, como si algo
   estirara desde el otro extremo. Solo se ejecuta al cargar y se corta en
   cuanto el cliente desliza por su cuenta.
*/
.chips-scroll.is-hinting .chips {
    animation: chips-tug 1.5s ease-in-out 2;
}

.chips-scroll.is-hinting .chips-scroll__hint {
    animation: chips-hint-tug 1.5s ease-in-out 2;
}

@keyframes chips-tug {
    0%, 62%, 100% { transform: translateX(0); }
    24% { transform: translateX(-15px); }
    43% { transform: translateX(-6px); }
}

@keyframes chips-hint-tug {
    0%, 62%, 100% { transform: translateX(0); }
    24% { transform: translateX(4px); }
    43% { transform: translateX(1px); }
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
    min-height: 38px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    color: var(--ink-soft);
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    transition: border-color .16s ease, background-color .16s ease, color .16s ease;
}

.chip span {
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--line-soft);
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
}

.chip:hover {
    border-color: #cbd5e1;
}

.chip.is-active {
    border-color: var(--ink);
    background: var(--ink);
    color: #fff;
}

.chip.is-active span {
    background: rgba(255, 255, 255, .2);
    color: #fff;
}

.toolbar--search {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
}

.toolbar--search .search {
    grid-column: 1;
}

.toolbar__submit {
    flex: 0 0 auto;
}

.toolbar--search .chips-scroll,
.toolbar form > .chips-scroll {
    grid-column: 1 / -1;
}

.results {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: 16px 0 18px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 650;
}

/* --------------------------------------------------------------------------
   Catalogo paginado: facetas, resultados, orden y paginacion
   -------------------------------------------------------------------------- */

.facets {
    display: grid;
    gap: 10px;
    margin-top: 14px;
}

.facets__group {
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
}

.facets__label {
    flex: 0 0 auto;
    color: var(--muted);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.facets__values {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
}

.chip--sm {
    min-height: 30px;
    padding: 0 11px;
    font-size: 12px;
}

.results--full {
    align-items: flex-end;
    flex-wrap: wrap;
}

.results__meta {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.results__active {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.results__chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 11px;
    border: 1px solid var(--accent);
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent-dark);
    font-size: 12px;
    font-weight: 750;
}

.results__chip:hover {
    background: #ddfbe8;
}

.results__chip span {
    font-size: 14px;
    line-height: 1;
}

.sorter select {
    min-height: 40px;
    padding: 0 34px 0 12px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background-color: #fff;
    color: var(--ink);
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%2364748b' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 13px center;
    background-size: 12px;
}

.sorter select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(22, 163, 74, .12);
    outline: none;
}

.pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 28px;
}

.pager__numbers {
    display: flex;
    align-items: center;
    gap: 4px;
}

.pager__num,
.pager__step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: #fff;
    color: var(--ink-soft);
    font-size: 13.5px;
    font-weight: 750;
    font-variant-numeric: tabular-nums;
}

.pager__num:hover,
.pager__step:hover {
    border-color: var(--ink);
    color: var(--ink);
}

.pager__num.is-current {
    border-color: var(--ink);
    background: var(--ink);
    color: #fff;
}

.pager__step.is-off {
    opacity: .4;
    cursor: default;
}

.pager__step.is-off:hover {
    border-color: var(--line);
    color: var(--ink-soft);
}

.pager__gap {
    padding: 0 2px;
    color: var(--muted);
}

/* --------------------------------------------------------------------------
   Portada por bloques
   -------------------------------------------------------------------------- */

.row-block + .row-block {
    margin-top: 34px;
}

.row-block__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.row-block__head h2 {
    font-size: clamp(19px, 2.4vw, 24px);
    letter-spacing: -.03em;
}

.row-block__head p {
    margin-top: 3px;
    color: var(--muted);
    font-size: 13.5px;
}

.row-block__more {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    color: var(--ink-soft);
    font-size: 13px;
    font-weight: 750;
    white-space: nowrap;
}

.row-block__more:hover {
    border-color: var(--accent);
    color: var(--accent-dark);
}

/*
   Las filas de la portada llevan cuatro servicios: en pantalla ancha caben en
   una sola linea y en movil quedan en dos filas de dos, sin huecos sueltos.
*/
@media (min-width: 761px) {
    .row-block .grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.catalog__all {
    display: grid;
    place-items: center;
    margin-top: 38px;
}

.catalog__all .btn {
    min-width: min(100%, 380px);
}

.results button {
    border: 0;
    background: none;
    color: var(--accent-dark);
    cursor: pointer;
    font-size: 13px;
    font-weight: 750;
    text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Catalogo: rejilla y tarjetas
   -------------------------------------------------------------------------- */

.catalog__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 336px;
    align-items: start;
    gap: 26px;
}

.grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.card:hover {
    transform: translateY(-2px);
    border-color: #cbd5e1;
    box-shadow: var(--shadow-md);
}

.card.is-active {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(22, 163, 74, .12), var(--shadow-sm);
}

.card.is-sold-out {
    opacity: .72;
}

.card__media {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #eef2f6;
}

.card__media::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 38%;
    background: linear-gradient(transparent, rgba(15, 23, 42, .22));
    pointer-events: none;
}

.card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}

.card:hover .card__media img {
    transform: scale(1.03);
}

.card__tag {
    position: absolute;
    left: 10px;
    bottom: 10px;
    z-index: 3;
    padding: 5px 9px;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 999px;
    background: rgba(15, 23, 42, .74);
    color: #fff;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    backdrop-filter: blur(6px);
}

.card__badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 4;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.card__badge--new {
    background: var(--accent);
    color: #fff;
}

.card__badge--sale {
    background: #dc2626;
    color: #fff;
}

.card__badge--price {
    background: #f59e0b;
    color: #422006;
}

.card__info {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 5;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(255, 255, 255, .38);
    border-radius: 50%;
    background: rgba(15, 23, 42, .74);
    color: #fff;
    cursor: pointer;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 16px;
    font-weight: 700;
    backdrop-filter: blur(6px);
}

.card__info:hover {
    background: var(--ink);
}

.card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 15px;
}

.card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 9px;
    min-height: 40px;
    margin-bottom: 12px;
}

.card__title {
    font-size: 16px;
    font-weight: 800;
    line-height: 1.28;
}

.card__title a:hover {
    color: var(--accent-dark);
    text-decoration: underline;
}

.pill {
    flex: 0 0 auto;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 9.5px;
    font-weight: 850;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.pill--in {
    background: var(--accent-soft);
    color: var(--accent-dark);
}

.pill--out {
    background: #f1f5f9;
    color: var(--muted);
}

.card__control {
    margin-bottom: 13px;
}

.control-label {
    display: block;
    margin-bottom: 6px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.control-hint {
    display: block;
    margin-top: 6px;
    color: var(--muted);
    font-size: 11.5px;
}

/* Que se vende exactamente: va encima del selector, no debajo, porque es lo
   que hay que saber antes de elegir y no despues. */
.control-hint--plan {
    margin: -2px 0 7px;
    color: var(--ink-soft);
    line-height: 1.35;
}

/*
   Una vez elegido el plan, esa nota ya hizo su trabajo: explicaba como leer
   los precios para poder elegir, y ahora el resumen verde dice exactamente
   que se lleva y cuanto se paga. Se retira y le deja el sitio.

   No es solo limpieza. En el catalogo las tarjetas van en una reja y todas
   las de una fila miden lo que la mas alta: si una crece al elegir un plan,
   la de al lado se estira con un hueco en blanco enorme en medio. Cambiando
   contenido en vez de anadirlo, la tarjeta apenas cambia de alto y la vecina
   se queda como estaba. En la ficha del producto (.card--inline) no aplica:
   ahi no hay vecina y la nota se queda a la vista.
*/
.card:not(.card--inline).is-active .control-hint--plan {
    display: none;
}

/* Casillas del selector: dos o tres preguntas cortas en vez de una lista
   larga. En movil van una debajo de otra; desde 380px caben en pareja. */
.plan-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.plan-picker[hidden],
.plan-picker__field[hidden] {
    display: none;
}

/* Una casilla sola ocupa el ancho; dos se reparten la fila; tres se envuelven.
   El reparto lo decide flex, asi que da igual cuantas queden visibles. */
.plan-picker__field {
    flex: 1 1 150px;
    min-width: 0;
}

.plan-picker__includes {
    flex: 1 1 100%;
    margin: 0;
    color: var(--ink-soft);
    font-size: 12px;
}

.plan-picker select {
    width: 100%;
    min-height: 44px;
    padding: 0 34px 0 12px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: #fff;
    color: var(--ink);
    font-size: 14px;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%2364748b' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 13px center;
    background-size: 12px;
}

.plan-picker select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(22, 163, 74, .12);
    outline: none;
}

.plan-fallback[hidden] {
    display: none;
}

/* Nota bajo el total: el pago es en USDT y no hay conversion de por medio. */
/* Nota bajo el total. Lleva el mismo margen lateral que .summary__totals y
   .summary__help, que son sus vecinas: sin el quedaba pegada al borde de la
   tarjeta y desalineada respecto al texto de debajo. */
.summary__usdt {
    margin: 0;
    padding: 9px 17px 0;
    color: var(--muted);
    font-size: 11.5px;
    line-height: 1.45;
}

/* Cuando van seguidas, la de ayuda ya no necesita separarse otra vez. */
.summary__usdt + .summary__help {
    padding-top: 5px;
}

/* Repeticion de lo elegido, justo antes del boton de agregar. */
.plan-picked {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
    padding: 7px 10px;
    border-radius: var(--radius-sm);
    background: var(--accent-soft);
    color: var(--accent-dark);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
}

.plan-picked[hidden] {
    display: none;
}

.plan-picked__what {
    flex: 1 1 auto;
    min-width: 0;
}

/* Lo que hay que transferir, separado de lo que se recibe: en una gift card
   colombiana "COP 50.000" y "12,66 USDT" son dos numeros muy distintos. */
.plan-picked__pay {
    flex: none;
    font-weight: 850;
    white-space: nowrap;
}

.plan-picked__note {
    flex: 1 1 100%;
    color: var(--accent-dark);
    font-weight: 500;
    opacity: .85;
}

/* --------------------------------------------------------------------------
   Casilla como boton + hoja de seleccion

   El <select> del sistema sigue existiendo debajo (es quien guarda el valor),
   pero se esconde y en su lugar se pinta este boton, que ademas de la opcion
   elegida ensena su bandera y su precio. Al pulsarlo sube la hoja.
   -------------------------------------------------------------------------- */

.field-trigger {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    min-height: 46px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: #fff;
    color: var(--ink);
    text-align: left;
    cursor: pointer;
    transition: border-color .16s ease, box-shadow .16s ease;
}

.field-trigger:hover:not(:disabled) {
    border-color: #cbd5e1;
}

.field-trigger:focus-visible {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(22, 163, 74, .12);
    outline: none;
}

.field-trigger:disabled {
    background: var(--canvas);
    color: var(--muted);
    cursor: not-allowed;
}

.field-trigger__flag {
    flex: none;
    font-size: 20px;
    line-height: 1;
}

.field-trigger__flag:empty {
    display: none;
}

/* El nombre manda y la moneda va debajo en pequeno: en una sola linea
   "Turquia (TRY)" se lee peor y se corta antes en pantallas estrechas. */
.field-trigger__body {
    flex: 1 1 auto;
    min-width: 0;
    display: grid;
    gap: 1px;
    padding: 6px 0;
}

.field-trigger__text {
    overflow: hidden;
    font-size: 14px;
    font-weight: 650;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.field-trigger.is-empty .field-trigger__text {
    color: var(--muted);
    font-weight: 500;
}

.field-trigger__hint {
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
}

.field-trigger__hint:empty {
    display: none;
}

.field-trigger__price {
    flex: none;
    color: var(--accent-dark);
    font-size: 13px;
    font-weight: 800;
}

.field-trigger__price:empty {
    display: none;
}

.field-trigger__caret {
    flex: none;
    width: 12px;
    height: 8px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%2364748b' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 12px;
}

.sheet {
    position: fixed;
    inset: 0;
    /* Por encima del carrito deslizante (1000): tambien se abre desde dentro
       de el para cambiar el pais de una linea ya agregada. */
    z-index: 1150;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.sheet__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .55);
    opacity: 0;
    transition: opacity .24s ease;
}

.sheet.is-open .sheet__backdrop {
    opacity: 1;
}

.sheet__panel {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-height: min(86vh, 720px);
    border-radius: 22px 22px 0 0;
    background: #fff;
    box-shadow: var(--shadow-lg);
    transform: translateY(100%);
    transition: transform .26s cubic-bezier(.32, .72, 0, 1);
}

.sheet.is-open .sheet__panel {
    transform: translateY(0);
}

.sheet__grip {
    width: 44px;
    height: 4px;
    margin: 10px auto 2px;
    border-radius: 999px;
    background: #cbd5e1;
}

.sheet__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 18px 12px;
}

.sheet__title {
    font-size: 17px;
    font-weight: 850;
    letter-spacing: -.02em;
}

.sheet__close {
    flex: none;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: var(--canvas);
    color: var(--ink-soft);
    font-size: 21px;
    line-height: 1;
    cursor: pointer;
}

.sheet__close:hover {
    background: var(--line-soft);
}

.sheet__search {
    position: relative;
    padding: 0 18px 12px;
}

.sheet__search-icon {
    position: absolute;
    top: 13px;
    left: 30px;
    width: 15px;
    height: 15px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='7' cy='7' r='5' fill='none' stroke='%2364748b' stroke-width='1.7'/%3E%3Cpath d='M11 11l4 4' stroke='%2364748b' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 15px;
    pointer-events: none;
}

.sheet__search-input {
    width: 100%;
    min-height: 44px;
    padding: 0 14px 0 38px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: var(--canvas);
    /* 16px o mas: por debajo, Safari en iPhone hace zoom al enfocar. */
    font-size: 16px;
}

.sheet__search-input:focus {
    border-color: var(--accent);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(22, 163, 74, .12);
    outline: none;
}

.sheet__body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 0 10px;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.sheet__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.sheet__group {
    padding: 12px 12px 5px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.sheet__item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 11px 12px;
    border: 0;
    border-radius: 12px;
    background: none;
    color: var(--ink);
    text-align: left;
    cursor: pointer;
}

.sheet__item:hover {
    background: var(--canvas);
}

.sheet__item.is-current {
    background: var(--accent-soft);
}

.sheet__flag {
    flex: none;
    font-size: 26px;
    line-height: 1;
}

.sheet__text {
    flex: 1 1 auto;
    min-width: 0;
    display: grid;
    gap: 1px;
}

.sheet__name {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
}

.sheet__hint {
    color: var(--muted);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .04em;
}

.sheet__price {
    flex: none;
    color: var(--accent-dark);
    font-size: 14px;
    font-weight: 800;
}

.sheet__tick {
    flex: none;
    width: 16px;
    height: 16px;
}

.sheet__item.is-current .sheet__tick {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8.5l3.5 3.5 7.5-7.5' fill='none' stroke='%23087a3c' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 16px;
}

.sheet__empty {
    padding: 26px 16px 30px;
    color: var(--muted);
    font-size: 14px;
    text-align: center;
}

.sheet__count {
    padding: 10px 18px calc(12px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line-soft);
    color: var(--muted);
    font-size: 11.5px;
    text-align: center;
}

/* En pantalla grande no tiene sentido pegarla abajo: se centra como dialogo. */
@media (min-width: 720px) {
    .sheet {
        align-items: center;
        padding: 24px;
    }

    .sheet__panel {
        max-width: 460px;
        max-height: min(74vh, 640px);
        border-radius: var(--radius-lg);
        transform: translateY(14px) scale(.97);
        opacity: 0;
        transition: transform .2s ease, opacity .2s ease;
    }

    .sheet.is-open .sheet__panel {
        transform: none;
        opacity: 1;
    }

    .sheet__grip {
        display: none;
    }

    .sheet__head {
        padding-top: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sheet__backdrop,
    .sheet__panel {
        transition: none;
    }
}

.card__control select,
.money-input {
    width: 100%;
    min-height: 44px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: #fff;
    font-size: 14px;
}

.card__control select {
    padding: 0 34px 0 12px;
    color: var(--ink);
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%2364748b' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 13px center;
    background-size: 12px;
}

.card__control select:focus,
.money-input:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(22, 163, 74, .12);
    outline: none;
}

.money-input {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
}

.money-input span {
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
}

.money-input input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: none;
    font-size: 15px;
    font-weight: 700;
    outline: none;
}

.card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 13px;
    border-top: 1px solid var(--line-soft);
}

.card__price {
    display: grid;
    gap: 1px;
}

.card__price span {
    color: var(--muted);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.card__price strong {
    font-size: 19px;
    font-weight: 850;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
}

.card__from {
    margin-top: 9px;
    color: var(--muted);
    font-size: 11.5px;
}

.card__from strong {
    color: var(--ink-soft);
}

/*
   "Desde $2.50" es un gancho para el que todavia no ha elegido. Cuando el
   servicio ya esta en el carrito, el aviso verde ocupa ese renglon y el
   precio de verdad lo dice el TOTAL, un centimetro mas arriba. Repetir el
   "desde" ahi solo suma ruido y alto: la tarjeta crecia y arrastraba a su
   vecina de fila con ella.
*/
.card:not(.card--inline).is-in-cart .card__from {
    display: none;
}

.card--inline {
    margin-top: 24px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.buy-box .card__control {
    padding: 18px 18px 0;
    margin-bottom: 0;
}

.buy-box .card__foot {
    padding: 15px 18px;
    margin-top: 14px;
    border-top: 1px solid var(--line-soft);
    background: #fbfdfc;
}

.buy-box .btn--add {
    min-height: 46px;
    padding: 0 22px;
}

.empty-state {
    display: grid;
    place-items: center;
    gap: 8px;
    padding: 56px 20px;
    border: 1px dashed var(--line);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, .6);
    text-align: center;
}

.empty-state > span {
    font-size: 34px;
    opacity: .35;
}

.empty-state p {
    max-width: 42ch;
    color: var(--muted);
}

/* --------------------------------------------------------------------------
   Resumen del pedido
   -------------------------------------------------------------------------- */

/*
   Se queda a la vista mientras se recorre el catalogo, pero por debajo de las
   dos barras que tambien estan pegadas arriba: la cabecera y el buscador.

   Antes esa distancia era un 120px escrito a mano y el buscador mide unos 145
   con su fila de pastillas, asi que la cabecera del resumen ("Tu seleccion ·
   Resumen del pedido") se metia debajo. Ahora se suman los dos altos medidos
   de verdad, y da igual que el buscador crezca al partirse los filtros.

   El 145 de reserva es solo para el instante anterior a la primera medida (y
   para el caso raro de que el JavaScript no llegue): en cuanto mide, escribe
   el valor real, y en las paginas sin buscador escribe un cero.
*/
.summary {
    position: sticky;
    top: calc(var(--header-now) + var(--toolbar-now, 145px) + 16px);
}

.summary__card {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: #fff;
    box-shadow: var(--shadow-sm);
}

.summary__card.has-items {
    border-color: #bbf7d0;
    box-shadow: 0 0 0 3px rgba(22, 163, 74, .07), var(--shadow-sm);
}

.summary__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 17px;
    border-bottom: 1px solid var(--line);
}

.summary__head .kicker {
    margin-bottom: 3px;
    font-size: 9.5px;
}

.summary__head h2 {
    font-size: 16px;
}

.summary__count {
    display: grid;
    place-items: center;
    width: 33px;
    height: 33px;
    border-radius: 50%;
    background: var(--ink);
    color: #fff;
    font-size: 12px;
    font-weight: 850;
}

.summary__items {
    max-height: 292px;
    padding: 0 17px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.summary__empty {
    display: grid;
    place-items: center;
    gap: 5px;
    padding: 32px 8px;
    color: var(--muted);
    text-align: center;
}

.summary__empty strong {
    color: var(--ink-soft);
    font-size: 13.5px;
}

.summary__empty small {
    max-width: 26ch;
    font-size: 12px;
    line-height: 1.5;
}

.summary__line {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: 13px 0;
}

.summary__line + .summary__line {
    border-top: 1px solid var(--line-soft);
}

.summary__line-copy {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.summary__line-copy strong {
    overflow: hidden;
    font-size: 13px;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.summary__line-copy small {
    color: var(--muted);
    font-size: 11.5px;
    line-height: 1.4;
}

.summary__line-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.summary__line-price {
    font-size: 13px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.summary__remove {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    color: var(--muted);
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
}

.summary__remove:hover {
    border-color: #fecaca;
    background: var(--danger-soft);
    color: var(--danger);
}

.summary__totals {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 15px 17px;
    border-top: 1px solid var(--line);
    background: #fbfdfc;
}

.summary__totals span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 750;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.summary__totals strong {
    font-size: 21px;
    font-weight: 850;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
}

.summary__totals--big strong {
    font-size: 26px;
    color: var(--accent-dark);
}

.summary__actions {
    display: grid;
    gap: 9px;
    padding: 15px 17px 8px;
}

.summary__help {
    padding: 0 17px 16px;
    color: var(--muted);
    font-size: 11.5px;
    line-height: 1.5;
}

/* --------------------------------------------------------------------------
   Barra inferior movil
   -------------------------------------------------------------------------- */

.order-bar {
    position: fixed;
    inset: auto 0 0;
    z-index: 800;
    display: none;
    align-items: center;
    gap: 10px;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 -8px 26px rgba(15, 23, 42, .12);
    backdrop-filter: blur(12px);
}

.order-bar.is-bump {
    animation: order-bar-bump .6s ease;
}

@keyframes order-bar-bump {
    0%, 100% { transform: translateY(0); }
    28% { transform: translateY(-6px); }
    58% { transform: translateY(-2px); }
}

.order-bar__open {
    display: flex;
    align-items: center;
    gap: 11px;
    flex: 1;
    min-width: 0;
    min-height: 50px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    text-align: left;
}

.order-bar__icon {
    position: relative;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 13px;
    background: var(--accent-soft);
    color: var(--accent-dark);
}

.order-bar__badge {
    position: absolute;
    top: -5px;
    right: -5px;
    display: grid;
    place-items: center;
    min-width: 21px;
    height: 21px;
    padding: 0 5px;
    border: 2px solid #fff;
    border-radius: 999px;
    background: var(--ink);
    color: #fff;
    font-size: 11px;
    font-weight: 850;
    font-variant-numeric: tabular-nums;
}

.order-bar__copy {
    display: grid;
    gap: 1px;
    min-width: 0;
}

.order-bar__copy span {
    overflow: hidden;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ink-soft);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.order-bar__copy small {
    color: var(--accent-dark);
    font-size: 16px;
    font-weight: 850;
    font-variant-numeric: tabular-nums;
}

.order-bar__cta {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    min-height: 50px;
    padding: 0 20px;
    border-radius: 12px;
    background: var(--accent);
    color: #fff;
    font-size: 14px;
    font-weight: 800;
}

/* --------------------------------------------------------------------------
   Carrito deslizante
   -------------------------------------------------------------------------- */

.cart-sheet {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.cart-sheet__backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    padding: 0;
    background: rgba(15, 23, 42, .55);
    opacity: 0;
    transition: opacity .24s ease;
    -webkit-tap-highlight-color: transparent;
}

.cart-sheet.is-open .cart-sheet__backdrop {
    opacity: 1;
}

.cart-sheet__panel {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-height: min(88vh, 780px);
    border-radius: 22px 22px 0 0;
    background: #fff;
    box-shadow: var(--shadow-lg);
    transform: translateY(100%);
    transition: transform .26s cubic-bezier(.32, .72, 0, 1);
}

.cart-sheet.is-open .cart-sheet__panel {
    transform: translateY(0);
}

.cart-sheet__grip {
    display: grid;
    place-items: center;
    width: 100%;
    padding: 10px 0 4px;
    border: 0;
    background: none;
    cursor: grab;
    touch-action: none;
}

.cart-sheet__grip span {
    display: block;
    width: 44px;
    height: 4px;
    border-radius: 999px;
    background: #cbd5e1;
}

.cart-sheet__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 18px 13px;
    border-bottom: 1px solid var(--line);
}

.cart-sheet__head h2 {
    font-size: 18px;
    font-weight: 850;
    letter-spacing: -.02em;
}

.cart-sheet__head small {
    display: block;
    margin-top: 1px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 650;
}

.cart-sheet__close {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: #fff;
    color: var(--ink-soft);
    cursor: pointer;
    font-size: 21px;
    line-height: 1;
}

.cart-sheet__close:hover {
    background: var(--line-soft);
}

.cart-sheet__items {
    flex: 1;
    min-height: 0;
    padding: 0 18px;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.cart-sheet__foot {
    display: grid;
    gap: 9px;
    padding: 13px 18px calc(15px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
    background: #fbfdfc;
}

.cart-sheet__total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.cart-sheet__total span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 750;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.cart-sheet__total strong {
    font-size: 25px;
    font-weight: 850;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
}

.cart-sheet__row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

.cart-sheet__clear {
    justify-self: center;
    padding: 6px 12px;
    border: 0;
    border-radius: 9px;
    background: none;
    color: var(--muted);
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
}

.cart-sheet__clear:hover {
    color: var(--danger);
}

.cart-sheet__clear.is-armed {
    background: var(--danger-soft);
    color: var(--danger);
}

.cart-sheet.is-empty .cart-sheet__total,
.cart-sheet.is-empty .cart-sheet__row,
.cart-sheet.is-empty .cart-sheet__clear,
.cart-sheet.is-empty .cart-sheet__foot .btn--primary {
    display: none;
}

/* Lineas del carrito ------------------------------------------------------ */

.cart-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 0;
}

.cart-item + .cart-item {
    border-top: 1px solid var(--line-soft);
}

.cart-item__thumb {
    flex: 0 0 auto;
    width: 58px;
    height: 58px;
    overflow: hidden;
    border: 1px solid var(--line-soft);
    border-radius: 13px;
    background: #eef2f6;
}

.cart-item__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cart-item__main {
    display: grid;
    gap: 7px;
    flex: 1;
    min-width: 0;
}

.cart-item__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.cart-item__name {
    font-size: 14px;
    font-weight: 780;
    line-height: 1.3;
}

.cart-item__remove {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: #fff;
    color: var(--muted);
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
}

.cart-item__remove:hover {
    border-color: #fecaca;
    background: var(--danger-soft);
    color: var(--danger);
}

.cart-item__detail {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.4;
}

.cart-item__field {
    display: grid;
    gap: 4px;
}

/* Las mismas casillas del catalogo, dentro de la linea del carrito. */
.cart-item__axes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.cart-item__axes .cart-item__field {
    flex: 1 1 140px;
    min-width: 0;
}

.cart-item__field > span {
    color: var(--muted);
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.cart-item__field select {
    width: 100%;
    min-height: 42px;
    padding: 0 34px 0 12px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background-color: #fff;
    color: var(--ink);
    cursor: pointer;
    font-size: 13.5px;
    font-weight: 650;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%2364748b' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 13px center;
    background-size: 12px;
}

.cart-item__field select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(22, 163, 74, .12);
    outline: none;
}

.money-input--sm {
    min-height: 42px;
}

.money-input--sm input {
    font-size: 14px;
}

.cart-item__error {
    color: var(--danger);
    font-size: 11.5px;
    font-weight: 650;
}

.cart-item.is-invalid .money-input {
    border-color: var(--danger);
    box-shadow: 0 0 0 3px rgba(220, 38, 38, .1);
}

.cart-item__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 1px;
}

.cart-item__price {
    margin-left: auto;
    font-size: 16px;
    font-weight: 850;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}

/* Control de cantidad ----------------------------------------------------- */

.qty {
    display: inline-flex;
    align-items: center;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: #fff;
}

.qty__btn {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 0;
    background: none;
    color: var(--ink);
    cursor: pointer;
    font-size: 17px;
    font-weight: 800;
    line-height: 1;
    -webkit-tap-highlight-color: transparent;
}

.qty__btn:hover:not(:disabled) {
    background: var(--accent-soft);
    color: var(--accent-dark);
}

.qty__btn:disabled {
    color: #cbd5e1;
    cursor: default;
}

.qty__value {
    min-width: 30px;
    padding: 0 2px;
    border-inline: 1px solid var(--line);
    align-self: stretch;
    display: grid;
    place-items: center;
    font-size: 14px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.qty--sm .qty__btn {
    width: 30px;
    height: 30px;
    font-size: 14px;
}

.qty--sm .qty__value {
    min-width: 26px;
    font-size: 12.5px;
}

/* Resumen lateral: herramientas de linea ---------------------------------- */

.summary__line-tools {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}

.summary__edit {
    padding: 5px 10px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: #fff;
    color: var(--ink-soft);
    cursor: pointer;
    font-size: 11.5px;
    font-weight: 750;
}

.summary__edit:hover {
    border-color: var(--accent);
    color: var(--accent-dark);
}

/* Aviso en la tarjeta del catalogo ---------------------------------------- */

.card.is-in-cart {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(22, 163, 74, .1), var(--shadow-sm);
}

.card__in-cart {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    margin-top: 9px;
    padding: 8px 10px;
    border: 1px solid #bbf7d0;
    border-radius: 10px;
    background: var(--accent-soft);
    color: var(--accent-dark);
    cursor: pointer;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .01em;
}

.card__in-cart:hover {
    border-color: var(--accent);
    background: #ddfbe8;
}

.buy-box .card__in-cart {
    width: auto;
    margin: 0 18px 15px;
}

/*
   Con el carrito abierto el aviso baja sobre los botones de pago, asi que
   pasa a la parte superior de la pantalla.
*/
.cart-sheet.is-open ~ .toast {
    top: calc(12px + env(safe-area-inset-top));
    bottom: auto;
}

/* --------------------------------------------------------------------------
   Paginas de categoria
   -------------------------------------------------------------------------- */

.category-hero {
    padding: 30px 0 8px;
}

.category-hero h1 {
    max-width: 20ch;
    font-size: clamp(32px, 4.6vw, 50px);
    letter-spacing: -.045em;
}

.category-hero__intro {
    max-width: 68ch;
    margin-top: 16px;
    color: var(--ink-soft);
    font-size: clamp(15px, 1.5vw, 17px);
    line-height: 1.7;
}

.category-hero__facts {
    display: flex;
    flex-wrap: wrap;
    gap: 26px;
    margin: 26px 0 0;
    padding-top: 20px;
    border-top: 1px solid var(--line);
}

.category-hero__facts div {
    display: grid;
    gap: 2px;
}

.category-hero__facts dt {
    color: var(--ink);
    font-size: 20px;
    font-weight: 850;
    letter-spacing: -.03em;
}

.category-hero__facts dd {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    font-weight: 650;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.category-links {
    padding: 10px 0 56px;
}

.category-links h2 {
    margin-bottom: 14px;
    font-size: 17px;
}

.chips--links {
    flex-wrap: wrap;
    overflow: visible;
}

.chips--links .chip {
    text-decoration: none;
}

/* --------------------------------------------------------------------------
   Como funciona
   -------------------------------------------------------------------------- */

.how {
    padding: 60px 0;
    border-top: 1px solid var(--line);
    background: #fff;
}

.steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: steps;
}

.steps li {
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--canvas);
}

.steps__num {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    margin-bottom: 14px;
    border-radius: 12px;
    background: var(--ink);
    color: #fff;
    font-size: 15px;
    font-weight: 850;
}

.steps h3 {
    margin-bottom: 7px;
    font-size: 17px;
}

.steps p {
    color: var(--ink-soft);
    font-size: 14.5px;
}

/* --------------------------------------------------------------------------
   Acordeon / FAQ
   -------------------------------------------------------------------------- */

.faq-block {
    padding: 60px 0 72px;
}

.accordion {
    display: grid;
    gap: 10px;
}

.accordion details {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    box-shadow: var(--shadow-sm);
}

.accordion summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 18px;
    cursor: pointer;
    font-size: 15.5px;
    font-weight: 750;
    list-style: none;
}

.accordion summary::-webkit-details-marker {
    display: none;
}

.accordion summary::after {
    content: "+";
    flex: 0 0 auto;
    color: var(--muted);
    font-size: 21px;
    font-weight: 400;
    line-height: 1;
}

.accordion details[open] summary::after {
    content: "\2212";
}

.accordion details > div {
    padding: 0 18px 18px;
    color: var(--ink-soft);
    font-size: 14.5px;
}

.accordion details > div p + p {
    margin-top: 10px;
}

.cta-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 30px;
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: #fff;
    box-shadow: var(--shadow-sm);
}

.cta-box strong {
    display: block;
    font-size: 16px;
}

.cta-box small {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: 13.5px;
}

/* --------------------------------------------------------------------------
   Migas, ficha de servicio y prosa
   -------------------------------------------------------------------------- */

.breadcrumb {
    padding: 18px 0 0;
}

.breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--muted);
    font-size: 12.5px;
}

.breadcrumb li + li::before {
    content: "/";
    margin-right: 8px;
    color: #cbd5e1;
}

.breadcrumb a:hover {
    color: var(--accent-dark);
    text-decoration: underline;
}

.detail {
    padding: 26px 0 46px;
}

.detail__grid {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    align-items: start;
    gap: 44px;
}

.detail__media {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: #fff;
    box-shadow: var(--shadow-sm);
}

.detail__media img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

.detail__copy h1 {
    font-size: clamp(30px, 4.4vw, 46px);
    letter-spacing: -.04em;
}

.detail__price {
    display: flex;
    align-items: baseline;
    gap: 9px;
    margin-top: 16px;
}

.detail__price span {
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

.detail__price strong {
    color: var(--accent-dark);
    font-size: 34px;
    font-weight: 850;
    letter-spacing: -.04em;
}

.detail__price small {
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

.detail__text {
    margin-top: 18px;
    color: var(--ink-soft);
    font-size: 15.5px;
}

.detail__text p + p {
    margin-top: 12px;
}

.detail__facts {
    display: grid;
    gap: 10px;
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
}

.detail__facts li {
    display: grid;
    grid-template-columns: 130px minmax(0, 1fr);
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    font-size: 13.5px;
}

.detail__facts strong {
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.detail__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 11px;
    margin-top: 26px;
}

.plans {
    padding: 20px 0 46px;
}

.table-wrap {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: #fff;
    box-shadow: var(--shadow-sm);
}

.price-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14.5px;
}

.price-table th,
.price-table td {
    padding: 13px 18px;
    text-align: left;
}

.price-table thead th {
    border-bottom: 1px solid var(--line);
    background: #fbfdfc;
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.price-table tbody tr + tr td {
    border-top: 1px solid var(--line-soft);
}

.price-table__group th {
    padding-top: 16px;
    border-top: 1px solid var(--line-soft);
    background: #fbfdfc;
    color: var(--ink-soft);
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.price-table td:last-child {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.related {
    padding: 20px 0 70px;
}

.related__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.related__card {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    box-shadow: var(--shadow-sm);
    transition: transform .16s ease, box-shadow .16s ease;
}

.related__card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.related__card img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

.related__card div {
    display: grid;
    gap: 2px;
    padding: 12px 13px 14px;
}

.related__card strong {
    font-size: 14px;
    font-weight: 750;
}

.related__card small {
    color: var(--muted);
    font-size: 12px;
}

.prose h2 {
    margin: 28px 0 10px;
    font-size: 19px;
}

.prose p {
    color: var(--ink-soft);
    font-size: 15.5px;
}

.prose p + p {
    margin-top: 10px;
}

.not-found {
    display: grid;
    place-items: center;
    gap: 10px;
    padding: 70px 0;
    text-align: center;
}

.not-found > span {
    color: var(--accent);
    font-size: 66px;
    font-weight: 900;
    letter-spacing: -.05em;
}

.not-found p {
    color: var(--muted);
}

/* --------------------------------------------------------------------------
   Checkout
   -------------------------------------------------------------------------- */

.checkout {
    padding: 34px 0 80px;
}

.checkout__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 348px;
    align-items: start;
    gap: 26px;
}

.checkout__form {
    display: grid;
    gap: 18px;
}

.checkout__aside {
    position: sticky;
    top: calc(var(--header-h) + 20px);
}

.panel {
    margin: 0;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: #fff;
    box-shadow: var(--shadow-sm);
}

.panel__title {
    padding: 0 0 6px;
    color: var(--ink);
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -.02em;
}

.field {
    display: grid;
    gap: 6px;
    margin-top: 15px;
}

.field > label {
    color: var(--ink-soft);
    font-size: 13px;
    font-weight: 700;
}

.field .req {
    color: var(--danger);
}

.field input[type="text"],
.field input[type="tel"],
.field input[type="email"],
.field input[type="number"],
.field select,
.field textarea {
    width: 100%;
    min-height: 46px;
    padding: 11px 13px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: #fff;
    font-size: 15px;
    outline: none;
    transition: border-color .16s ease, box-shadow .16s ease;
}

.field textarea {
    min-height: 92px;
    resize: vertical;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(22, 163, 74, .12);
}

.field input[aria-invalid="true"],
.field select[aria-invalid="true"] {
    border-color: var(--danger);
    box-shadow: 0 0 0 3px rgba(220, 38, 38, .1);
}

.field input[type="file"] {
    padding: 10px;
    border: 1px dashed var(--line);
    background: #fbfdfc;
    font-size: 13.5px;
    cursor: pointer;
}

.field small {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.5;
}

.field--check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    padding: 0 4px;
}

.field--check input {
    width: 19px;
    height: 19px;
    margin-top: 2px;
    accent-color: var(--accent);
    flex: 0 0 auto;
}

.field--check label {
    color: var(--ink-soft);
    font-size: 13.5px;
}

.field--check a {
    color: var(--accent-dark);
    font-weight: 700;
    text-decoration: underline;
}

.hp-field {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.methods {
    display: grid;
    gap: 10px;
    margin-top: 15px;
}

.method {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    cursor: pointer;
    transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
}

.method:hover {
    border-color: #cbd5e1;
}

.method input {
    width: 19px;
    height: 19px;
    margin-top: 2px;
    accent-color: var(--accent);
    flex: 0 0 auto;
}

.method.is-selected,
.method:has(input:checked) {
    border-color: var(--accent);
    background: var(--accent-soft);
    box-shadow: 0 0 0 3px rgba(22, 163, 74, .1);
}

.method__body {
    display: grid;
    gap: 2px;
}

.method__body strong {
    font-size: 14.5px;
    font-weight: 750;
}

.method__body small {
    color: var(--muted);
    font-size: 12.5px;
    line-height: 1.5;
}

.method-detail {
    margin-top: 16px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fbfdfc;
}

.qr-block {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

.qr-block img {
    width: 190px;
    height: 190px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    object-fit: contain;
}

.qr-block__missing {
    display: grid;
    place-items: center;
    width: 190px;
    height: 190px;
    padding: 16px;
    border: 1px dashed var(--line);
    border-radius: var(--radius);
    background: #fff;
    color: var(--muted);
    font-size: 12.5px;
    text-align: center;
}

.qr-block p {
    margin-bottom: 10px;
    color: var(--ink-soft);
    font-size: 13.5px;
}

.account-block {
    display: grid;
    gap: 7px;
    margin-top: 14px;
}

.account-block__label {
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.account-block small {
    color: var(--muted);
    font-size: 12.5px;
}

.copy-row {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: #fff;
}

.copy-row code {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 13px;
    font-weight: 600;
}

.warning {
    display: flex;
    gap: 8px;
    margin-top: 14px;
    padding: 12px 14px;
    border: 1px solid #fde68a;
    border-radius: 11px;
    background: var(--warning-soft);
    color: var(--warning);
    font-size: 13px;
    line-height: 1.5;
}

.instructions {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}

.instructions h3 {
    margin-bottom: 8px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.instructions p {
    color: var(--ink-soft);
    font-size: 13.5px;
    line-height: 1.7;
}

.form-errors {
    display: grid;
    gap: 5px;
    padding: 14px 16px;
    border: 1px solid #fecaca;
    border-radius: var(--radius);
    background: var(--danger-soft);
    color: #991b1b;
    font-size: 13.5px;
}

.whatsapp-alt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    padding: 18px 20px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: #fff;
    box-shadow: var(--shadow-sm);
}

.whatsapp-alt strong {
    display: block;
    font-size: 15px;
}

.whatsapp-alt small {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-size: 13px;
}

.checkout__empty,
.checkout__success {
    display: grid;
    place-items: center;
    gap: 12px;
    padding: 56px 24px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: #fff;
    box-shadow: var(--shadow-sm);
    text-align: center;
}

.checkout__empty p,
.checkout__success p {
    max-width: 46ch;
    color: var(--muted);
}

.checkout__success-mark {
    display: grid;
    place-items: center;
    width: 66px;
    height: 66px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 32px;
    font-weight: 900;
}

.checkout__reference {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    border: 1px dashed var(--accent);
    border-radius: 999px;
    background: var(--accent-soft);
}

.checkout__reference span {
    color: var(--accent-dark);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.checkout__reference strong {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 17px;
    letter-spacing: .04em;
}

.checkout__success-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 11px;
    margin-top: 6px;
}

/* --------------------------------------------------------------------------
   Pie de pagina
   -------------------------------------------------------------------------- */

.site-footer {
    margin-top: 20px;
    padding: 54px 0 26px;
    background: #0b1220;
    color: #cbd5e1;
}

.site-footer__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr));
    gap: 30px;
    padding-bottom: 34px;
    border-bottom: 1px solid rgba(255, 255, 255, .09);
}

.site-footer__brand img {
    width: 40px;
    height: 40px;
    margin-bottom: 12px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 11px;
}

.site-footer__brand strong {
    display: block;
    color: #fff;
    font-size: 16px;
    font-weight: 800;
}

.site-footer__brand p {
    margin-top: 7px;
    max-width: 34ch;
    font-size: 13.5px;
    line-height: 1.65;
}

.site-footer__col {
    display: grid;
    align-content: start;
    gap: 9px;
}

.site-footer__col h2 {
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.site-footer__col a {
    font-size: 13.5px;
    transition: color .16s ease;
}

.site-footer__col a:hover {
    color: #fff;
    text-decoration: underline;
}

.pay-list {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 13px;
}

.site-footer__legal {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding-top: 22px;
    color: #94a3b8;
    font-size: 12.5px;
}

/* --------------------------------------------------------------------------
   Toast y modal
   -------------------------------------------------------------------------- */

.toast {
    position: fixed;
    left: 50%;
    bottom: 26px;
    z-index: 1200;
    padding: 13px 22px;
    border-radius: 999px;
    background: var(--ink);
    color: #fff;
    font-size: 13.5px;
    font-weight: 700;
    box-shadow: var(--shadow-lg);
    transform: translate(-50%, 12px);
    opacity: 0;
    transition: opacity .2s ease, transform .2s ease;
}

.toast.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

.modal {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(15, 23, 42, .55);
    backdrop-filter: blur(3px);
}

.modal__box {
    width: min(100%, 520px);
    max-height: min(80vh, 620px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: #fff;
    box-shadow: var(--shadow-lg);
}

.modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 17px 20px;
    border-bottom: 1px solid var(--line);
}

.modal__head h2 {
    font-size: 17px;
}

.modal__close {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: #fff;
    color: var(--muted);
    cursor: pointer;
    font-size: 19px;
    line-height: 1;
}

.modal__body {
    padding: 18px 20px 22px;
    overflow-y: auto;
    color: var(--ink-soft);
    font-size: 14.5px;
    line-height: 1.7;
}

.modal__body p + p {
    margin-top: 11px;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1160px) {
    /*
       Aqui la cabecera pasa a tres filas (marca, idioma y menu), asi que se
       retira al desplazarse hacia abajo. Con ella fuera, la barra de busqueda
       sube al borde y el catalogo gana esa altura.
    */
    body.header-hidden .site-header {
        transform: translateY(-100%);
    }

    body.header-hidden .toolbar {
        top: 6px;
    }

    .catalog__layout,
    .checkout__layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .summary,
    .checkout__aside {
        position: static;
    }

    .summary__card {
        max-width: 560px;
        margin-inline: auto;
    }

    .checkout__aside {
        order: -1;
    }

    .grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    /*
       Al partirse en varias filas, la cabecera pierde el aire que en escritorio
       le daba centrar el contenido dentro de sus 74px: el logo quedaba pegado
       al borde de arriba del navegador. Se le devuelve ese margen, y en los
       moviles con muesca se suma la zona segura para no meterse debajo.
    */
    .site-header__inner {
        flex-wrap: wrap;
        padding-top: calc(12px + env(safe-area-inset-top, 0px));
        padding-bottom: 10px;
    }

    .site-nav {
        order: 3;
        width: 100%;
        margin-inline: 0;
        overflow-x: auto;
        padding-bottom: 2px;
        scrollbar-width: none;
    }

    .site-nav::-webkit-scrollbar {
        display: none;
    }

    .site-nav a {
        flex: 0 0 auto;
    }
}

@media (max-width: 980px) {
    .hero__inner {
        grid-template-columns: minmax(0, 1fr);
        gap: 34px;
    }

    .detail__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 26px;
    }

    .steps {
        grid-template-columns: minmax(0, 1fr);
    }

    .related__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .site-footer__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 28px;
    }
}

@media (max-width: 760px) {
    .shell,
    .shell--narrow {
        width: min(100% - 28px, 1280px);
    }

    .hero {
        padding: 40px 0 34px;
    }

    .grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .pay-badge {
        display: none;
    }

    .toolbar {
        padding: 12px;
        border-radius: var(--radius);
    }

    .card__body {
        padding: 12px;
    }

    .card__title {
        font-size: 14.5px;
    }

    .card__foot {
        flex-direction: column;
        align-items: stretch;
        gap: 9px;
    }

    .card__price {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
    }

    .btn--add {
        width: 100%;
        min-height: 44px;
    }

    .detail__facts li {
        grid-template-columns: minmax(0, 1fr);
        gap: 3px;
    }

    .panel {
        padding: 16px;
    }

    .order-bar {
        display: flex;
    }

    body.has-order {
        padding-bottom: 88px;
    }

    /*
       En movil el carrito deslizante sustituye al resumen lateral: dejar los
       dos duplicaba la informacion y el cliente no sabia cual editar.
    */
    .catalog__layout .summary {
        display: none;
    }

    /* En la pagina de pago el resumen ya esta arriba del formulario. */
    body.page--checkout .order-bar {
        display: none;
    }

    body.page--checkout.has-order {
        padding-bottom: 0;
    }

    body.has-order .toast {
        bottom: 96px;
    }

    .checkout,
    .page-section {
        padding-bottom: 40px;
    }
}

/* En pantallas grandes el carrito entra como panel lateral. */
@media (min-width: 761px) {
    .cart-sheet {
        align-items: stretch;
        justify-content: flex-end;
    }

    .cart-sheet__panel {
        width: min(100%, 430px);
        max-height: none;
        border-radius: 22px 0 0 22px;
        transform: translateX(100%);
    }

    .cart-sheet.is-open .cart-sheet__panel {
        transform: translateX(0);
    }

    .cart-sheet__grip {
        display: none;
    }

    .cart-sheet__head {
        padding-top: 18px;
    }
}

/*
   Moviles: el catalogo se queda en dos columnas. Una sola columna obligaba a
   desplazarse mucho para comparar servicios, asi que en lugar de apilar las
   tarjetas se compacta su interior para que quepan de a dos.
*/
@media (max-width: 460px) {
    .grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .related__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .card__body {
        padding: 10px;
    }

    .card__head {
        min-height: 36px;
        margin-bottom: 9px;
    }

    .card__title {
        font-size: 13.5px;
    }

    .card__control {
        margin-bottom: 10px;
    }

    .control-label {
        margin-bottom: 5px;
        font-size: 9px;
        letter-spacing: .04em;
    }

    .card__control select,
    .money-input {
        min-height: 42px;
        font-size: 13px;
    }

    .card__control select {
        padding: 0 26px 0 9px;
        background-position: right 8px center;
        background-size: 11px;
    }

    .money-input {
        gap: 6px;
        padding: 0 9px;
    }

    .money-input input {
        font-size: 14px;
    }

    .control-hint {
        font-size: 10.5px;
    }

    .card__foot {
        gap: 8px;
        padding-top: 10px;
    }

    .card__price span {
        font-size: 9px;
    }

    .card__price strong {
        font-size: 16px;
    }

    .btn--add {
        min-height: 42px;
        padding: 0 10px;
        font-size: 13px;
    }

    .card__from {
        margin-top: 7px;
        font-size: 10.5px;
    }

    .card__in-cart {
        margin-top: 8px;
        padding: 7px 6px;
        gap: 4px;
        font-size: 10px;
    }

    .card__tag {
        left: 8px;
        bottom: 8px;
        padding: 4px 7px;
        font-size: 8.5px;
    }

    .card__badge {
        top: 8px;
        left: 8px;
        padding: 4px 8px;
        font-size: 9px;
    }

    .card__info {
        top: 8px;
        right: 8px;
        width: 30px;
        height: 30px;
        font-size: 14px;
    }

    .pill {
        padding: 3px 6px;
        font-size: 8.5px;
    }

    .related__card div {
        padding: 10px 10px 11px;
    }

    .related__card strong {
        font-size: 13px;
    }

    .related__card small {
        font-size: 11px;
    }

    .site-footer__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .qr-block img,
    .qr-block__missing {
        width: 100%;
        height: auto;
        aspect-ratio: 1;
    }

    .brand__tag {
        display: none;
    }

    /*
       La marca y los botones tienen que caber en la MISMA fila. Con los
       tamanos de escritorio suman unos 400px y en un telefono de 390 no
       entran: el boton de Soporte se iba a una fila propia y la cabecera
       pasaba a tres pisos, comiendose media pantalla.

       Se compacta lo justo, pero la garantia real es el min-width: 0 de la
       marca: hace que su ancho minimo sea el del logo, asi que los botones
       nunca se quedan sin sitio y la fila no se puede partir. Sin eso, un
       nombre de tienda mas largo volveria a romper la cabecera.
    */
    .site-header__inner {
        gap: 10px;
    }

    .brand {
        gap: 9px;
        min-width: 0;
        flex-shrink: 1;   /* en escritorio es 0; ahi es lo que la haria partirse */
    }

    .brand img {
        width: 38px;
        height: 38px;
        border-radius: 11px;
        flex-shrink: 0;   /* el que se recorta es el nombre, nunca el logo */
    }

    .brand__copy {
        min-width: 0;
    }

    .brand__name {
        font-size: 15px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .site-header__actions {
        flex-shrink: 0;
        gap: 8px;
    }

    .lang-switch__item {
        padding: 5px 9px;
    }

    .site-header__actions .btn--sm {
        min-height: 38px;
        padding: 0 12px;
        font-size: 12.5px;
    }
}

/*
   Telefonos: a partir de aqui la palabra "Soporte" y el nombre de la tienda
   se pelean por el mismo hueco, y el que perdia era el nombre, que quedaba
   recortado con puntos suspensivos. Se prefiere dejar la marca entera y que
   el boton se quede en el icono de WhatsApp, redondo, que se reconoce solo.
   El nombre accesible lo sigue dando el aria-label del enlace.
*/
@media (max-width: 420px) {
    .site-header__actions .btn--whatsapp {
        width: 38px;
        padding: 0;
        border-radius: 999px;
    }

    .site-header__actions .btn--whatsapp .btn__label {
        display: none;
    }
}

/* Telefonos muy estrechos: se recorta el aire para no perder la segunda columna. */
@media (max-width: 360px) {
    /*
       Y en la cabecera se encoge la marca lo justo para que el nombre de la
       tienda entre entero: en un telefono de 320px se quedaba a tres pixeles
       de tener que cortarse con puntos suspensivos.
    */
    .brand img {
        width: 34px;
        height: 34px;
        border-radius: 10px;
    }

    .brand__name {
        font-size: 14px;
    }

    .grid,
    .related__grid {
        gap: 8px;
    }

    .card__body {
        padding: 9px;
    }

    .card__title {
        font-size: 13px;
    }

    .card__price strong {
        font-size: 15px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

@media print {
    .site-header,
    .site-footer,
    .order-bar,
    .cart-sheet,
    .summary__actions,
    .toolbar {
        display: none !important;
    }
}