/*
 * Tema futrono (hijo de Velocity) · portada y ficha de producto.
 * Todo va bajo .ft-home para no tocar los estilos de Velocity del resto de la tienda.
 */

.ft-home, .ft-footer {
    --ft-ink: #1E1B18;
    --ft-ink-2: #2A2622;
    --ft-ink-line: #4A443D;
    --ft-cream: #F5F0E8;
    --ft-paper: #FFFFFF;
    --ft-clay: #A8410E;
    --ft-clay-dark: #8A350B;
    --ft-sky: #8AC3DB;
    --ft-sun: #F6D46B;
    --ft-leaf: #2F6B3A;
    --ft-muted: #5E574F;
    --ft-muted-dark: #CFC7BB;
    --ft-display: 'Bricolage Grotesque', 'Figtree', system-ui, sans-serif;
    --ft-body: 'Figtree', system-ui, sans-serif;
    --ft-hand: 'Caveat', cursive;
    --ft-ease: cubic-bezier(.2, .8, .2, 1);

    background: var(--ft-cream);
    color: var(--ft-ink);
    font-family: var(--ft-body);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

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

/* velocity.css pone `* { font-family: madurai, "Source Sans Pro" }` en TODOS los elementos, así
   que no basta con definir la fuente en .ft-home: hay que hacer que cada hijo herede. Va arriba
   para que las reglas de componente (Bricolage, Caveat…) ganen por orden; se excluyen las fuentes
   de íconos de Velocity/Material. */
.ft-home :where(*:not([class*="rango-"]):not(.material-icons):not(.icon):not(.fa)),
.ft-footer :where(*:not([class*="rango-"]):not(.material-icons):not(.icon):not(.fa)),
.ft-dialog :where(*) { font-family: inherit; }
.ft-home :where(input, button, select, textarea, optgroup)::placeholder { font-family: inherit; }

/* :where() deja la especificidad en una sola clase: las reglas de componente (.ft-btn--light,
   .ft-wrap…) ganan por orden, y las de Velocity sobre elementos sueltos pierden. */
.ft-home :where(h1, h2, p, dl, dd, ol) { margin: 0; padding: 0; }
.ft-home :where(a) { color: inherit; text-decoration: none; }
.ft-home a:focus-visible, .ft-home button:focus-visible, .ft-home input:focus-visible {
    outline: 3px solid var(--ft-sun);
    outline-offset: 3px;
}
.ft-home :where(img) { display: block; max-width: 100%; }

.ft-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ft-wrap { max-width: 1280px; margin: 0 auto; padding-left: 32px; padding-right: 32px; }
.ft-row { display: flex; flex-wrap: wrap; gap: 12px; }
.ft-grow { flex: 1; }
.ft-num { font-family: var(--ft-display); font-variant-numeric: tabular-nums; }
.ft-muted { color: var(--ft-muted); font-size: 15px; }
.ft-muted a { color: var(--ft-clay); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

.ft-hand { font-family: var(--ft-hand); font-weight: 700; line-height: 1; font-size: 30px; }
.ft-hand--sun { color: var(--ft-sun); }
.ft-hand--clay { color: var(--ft-clay); }
.ft-heading { font-size: 38px; margin-bottom: 18px; }

/* ---------- Botones ---------- */
.ft-btn {
    display: inline-flex; align-items: center; justify-content: center;
    height: 56px; padding: 0 30px; border-radius: 999px; border: 0;
    font: inherit; font-weight: 700; font-size: 17px; cursor: pointer;
    transition: transform .25s var(--ft-ease), background-color .2s, color .2s, box-shadow .25s var(--ft-ease);
}
.ft-btn:hover { transform: translateY(-2px); }
.ft-btn:active { transform: translateY(0) scale(.97); }
.ft-btn--light { background: #FCFAF5; color: var(--ft-ink); }
.ft-btn--light:hover { box-shadow: 0 10px 28px rgba(0, 0, 0, .35); }
.ft-btn--clay { background: var(--ft-clay); color: #FFFFFF; }
.ft-btn--clay:hover { background: var(--ft-clay-dark); box-shadow: 0 10px 28px rgba(168, 65, 14, .45); }
.ft-btn--ink { background: var(--ft-ink); color: #FCFAF5; }
.ft-btn--ink:hover { box-shadow: 0 10px 24px rgba(30, 27, 24, .3); }
.ft-btn--outline { background: transparent; color: var(--ft-ink); box-shadow: inset 0 0 0 1.5px var(--ft-ink); }
.ft-btn--outline:hover { background: var(--ft-ink); color: #FCFAF5; }

/* ---------- Escenario ---------- */
.ft-stage {
    --mx: 70%; --my: 60%;
    position: relative; overflow: hidden;
    background: var(--ft-ink); color: #FCFAF5;
    border-radius: 0 0 48px 48px;
}
.ft-stage__light {
    position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(ellipse 45% 60% at var(--mx) var(--my), #4A3F33 0%, rgba(30, 27, 24, 0) 70%);
    transition: background-position .4s;
}

.ft-nav { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; padding-top: 22px; padding-bottom: 22px; }
.ft-nav__logo img { height: 44px; width: auto; filter: invert(1); }
.ft-nav__links { flex: 1 1 420px; display: flex; flex-wrap: wrap; gap: 4px 24px; font-weight: 500; font-size: 15px; }
.ft-nav__links a { position: relative; padding: 8px 0; }
.ft-nav__links a::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; border-radius: 2px;
    background: var(--ft-sun); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ft-ease);
}
.ft-nav__links a:hover::after { transform: scaleX(1); }
.ft-nav__actions { display: flex; align-items: center; gap: 10px; }
.ft-nav__search { display: flex; align-items: center; height: 44px; border-radius: 999px; background: var(--ft-ink-2); padding: 0 6px 0 16px; transition: box-shadow .2s; }
.ft-nav__search:focus-within { box-shadow: 0 0 0 2px var(--ft-sun); }
.ft-nav__search input { width: 120px; border: 0; outline: 0; background: transparent; color: #FCFAF5; font: inherit; font-size: 15px; transition: width .3s var(--ft-ease); }
.ft-nav__search input:focus { width: 200px; }
.ft-nav__search input::placeholder { color: var(--ft-muted-dark); }
.ft-nav__search button { width: 36px; height: 36px; border: 0; border-radius: 999px; background: transparent; color: #FCFAF5; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.ft-nav__account { padding: 10px 6px; font-weight: 600; font-size: 15px; }
.ft-nav__account:hover { color: var(--ft-sun); }

.ft-cart {
    display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 8px 0 16px;
    border-radius: 999px; background: #FCFAF5; color: var(--ft-ink); font-weight: 700;
    transition: transform .25s var(--ft-ease);
}
.ft-cart:hover { transform: translateY(-2px); }
.ft-cart__count {
    min-width: 30px; height: 30px; padding: 0 8px; border-radius: 999px;
    background: var(--ft-clay); color: #FFFFFF; display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--ft-display); font-size: 15px;
}
.ft-cart.is-bump .ft-cart__count { animation: ft-bump .5s var(--ft-ease); }
@keyframes ft-bump { 0% { transform: scale(1); } 40% { transform: scale(1.45); } 100% { transform: scale(1); } }

.ft-stage__body { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 32px; padding-top: 24px; }
.ft-stage__copy { flex: 1 1 460px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.ft-stage__copy .ft-hand { font-size: 36px; }
.ft-stage__title { font-family: var(--ft-display); font-weight: 700; font-size: clamp(42px, 6vw, 72px); line-height: .98; letter-spacing: -.04em; }
.ft-stage__lead { font-size: 19px; color: var(--ft-muted-dark); max-width: 460px; }

.ft-stage__product {
    flex: 1 1 380px; position: relative; min-height: 460px;
    display: flex; align-items: center; justify-content: center;
    transform: translate3d(var(--px, 0), var(--py, 0), 0);
    transition: transform .6s var(--ft-ease);
}
.ft-stage__product .ft-plate {
    position: relative; z-index: 1;
    width: min(360px, 78vw); aspect-ratio: 1; border-radius: 40px; padding: 28px;
    box-shadow: 0 40px 70px rgba(0, 0, 0, .5);
    transform: rotate(-3deg); transition: transform .5s var(--ft-ease), box-shadow .5s var(--ft-ease);
}
.ft-stage__product:hover .ft-plate { transform: rotate(0deg) scale(1.03); box-shadow: 0 50px 90px rgba(0, 0, 0, .55); }
.ft-stage__note { position: absolute; z-index: 2; left: 0; top: 2%; font-size: 34px; line-height: 1; color: var(--ft-sun); text-shadow: 0 2px 12px rgba(0, 0, 0, .6); transform: rotate(-7deg); transition: transform .5s var(--ft-ease); }
.ft-stage__product:hover .ft-stage__note { transform: rotate(-3deg) translateY(-4px); }
.ft-stage__shadow { position: absolute; bottom: 10px; left: 50%; width: 300px; height: 34px; margin-left: -150px; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(0, 0, 0, .7) 0%, rgba(0, 0, 0, 0) 70%); }

/* Fotos con fondo blanco: el plato crema + multiply hace "desaparecer" el blanco. */
.ft-plate { display: flex; align-items: center; justify-content: center; background: var(--ft-cream); overflow: hidden; }
.ft-plate img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }

.ft-specs { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin-top: 8px; padding-bottom: 44px; }
.ft-specs > div { padding-top: 18px; border-top: 1px solid var(--ft-ink-line); display: flex; flex-direction: column; gap: 2px; }
.ft-specs dt { font-size: 14px; color: var(--ft-muted-dark); }
.ft-specs dd { font-family: var(--ft-display); font-weight: 600; font-size: 22px; }

/* ---------- Secciones crema ---------- */
.ft-section { padding-top: 56px; }

.ft-search {
    display: flex; align-items: center; gap: 14px; height: 68px; margin-bottom: 40px;
    padding: 0 10px 0 26px; border-radius: 999px; background: var(--ft-paper); color: var(--ft-muted);
    box-shadow: 0 14px 40px rgba(30, 27, 24, .08); transition: box-shadow .25s var(--ft-ease);
}
.ft-search:focus-within { box-shadow: 0 0 0 3px var(--ft-sun), 0 18px 44px rgba(30, 27, 24, .12); }
.ft-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 19px; color: var(--ft-ink); }
.ft-search .ft-btn { height: 50px; padding: 0 26px; }

.ft-tone--terracota { background: var(--ft-clay); color: #FFFFFF; }
.ft-tone--celeste { background: var(--ft-sky); color: var(--ft-ink); }
.ft-tone--amarillo { background: var(--ft-sun); color: var(--ft-ink); }
.ft-tone--tinta { background: var(--ft-ink); color: #FCFAF5; }

.ft-needs { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-bottom: 14px; }
.ft-need {
    height: 140px; padding: 22px; border-radius: 28px;
    display: flex; align-items: flex-end; justify-content: space-between; gap: 12px;
    font-family: var(--ft-display); font-weight: 700; font-size: 28px; line-height: 1; letter-spacing: -.02em;
    transition: transform .35s var(--ft-ease), box-shadow .35s var(--ft-ease), border-radius .35s var(--ft-ease);
}
.ft-need svg { flex: 0 0 auto; opacity: 0; transform: translateX(-10px); transition: opacity .3s, transform .35s var(--ft-ease); }
.ft-need:hover { transform: translateY(-6px) rotate(-1deg); border-radius: 36px; box-shadow: 0 22px 40px rgba(30, 27, 24, .18); }
.ft-need:hover svg { opacity: 1; transform: translateX(0); }

.ft-collections { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; padding-top: 44px; padding-bottom: 80px; }
.ft-collection {
    position: relative; height: 380px; padding: 28px; border-radius: 36px;
    display: flex; flex-direction: column; gap: 6px;
    transition: transform .4s var(--ft-ease), box-shadow .4s var(--ft-ease);
}
.ft-collection .ft-hand { display: block; max-width: 58%; font-size: 28px; line-height: 1.1; }
.ft-collection__img {
    position: absolute; right: 22px; top: -40px; width: 170px; height: 170px; border-radius: 32px; padding: 14px;
    box-shadow: 0 20px 36px rgba(30, 27, 24, .25);
    transform: rotate(6deg); transition: transform .45s var(--ft-ease), box-shadow .45s var(--ft-ease);
}
.ft-collection:hover { transform: translateY(-8px); box-shadow: 0 30px 50px rgba(30, 27, 24, .22); }
.ft-collection:hover .ft-collection__img { transform: rotate(-4deg) translateY(-10px) scale(1.06); box-shadow: 0 30px 46px rgba(30, 27, 24, .3); }
.ft-collection__name { font-family: var(--ft-display); font-weight: 700; font-size: 38px; line-height: 1; letter-spacing: -.02em; max-width: 60%; }
.ft-collection__label { font-size: 15px; font-weight: 600; opacity: .85; }
.ft-collection__price { font-weight: 800; font-size: 68px; line-height: .9; letter-spacing: -.04em; }

/* ---------- Recomendados ---------- */
.ft-picks { background: var(--ft-ink); color: #FCFAF5; border-radius: 48px 48px 0 0; padding: 56px 0 48px; }
.ft-picks .ft-hand { font-size: 36px; }
.ft-picks__title { font-family: var(--ft-display); font-weight: 700; font-size: clamp(34px, 4vw, 48px); line-height: 1; letter-spacing: -.03em; margin-top: 4px; }
.ft-picks__grid { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 28px; }

.ft-pick-top {
    flex: 1 1 420px; min-width: 0; min-height: 320px; position: relative; overflow: hidden;
    border-radius: 36px; background: var(--ft-clay); color: #FFFFFF; padding: 26px 28px;
    display: flex; flex-direction: column; justify-content: flex-end; gap: 8px;
    transition: transform .4s var(--ft-ease);
}
.ft-pick-top:hover { transform: translateY(-6px); }
.ft-pick-top__badge { position: absolute; left: 28px; top: 26px; height: 32px; padding: 0 14px; border-radius: 999px; background: #FCFAF5; color: var(--ft-ink); font-weight: 700; font-size: 14px; display: flex; align-items: center; }
.ft-pick-top__num { position: absolute; right: 8px; top: -70px; font-family: var(--ft-display); font-weight: 800; font-size: 400px; line-height: 1; color: rgba(255, 255, 255, .13); transition: transform .6s var(--ft-ease); }
.ft-pick-top:hover .ft-pick-top__num { transform: translateX(-16px); }
.ft-pick-top__img { position: absolute; right: 40px; top: 36px; width: 220px; height: 220px; border-radius: 36px; padding: 16px; box-shadow: 0 24px 40px rgba(0, 0, 0, .35); transform: rotate(4deg); transition: transform .5s var(--ft-ease); }
.ft-pick-top:hover .ft-pick-top__img { transform: rotate(-2deg) scale(1.05); }
.ft-pick-top__name { position: relative; font-family: var(--ft-display); font-weight: 700; font-size: 38px; line-height: 1; letter-spacing: -.02em; max-width: 55%; }
.ft-pick-top__price { position: relative; font-weight: 700; font-size: 24px; }
.ft-pick-top__price s { font-family: var(--ft-body); font-weight: 500; font-size: 16px; opacity: .75; margin-left: 8px; }

.ft-tower { flex: 1 1 420px; min-width: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.ft-tower__row {
    height: 72px; display: flex; align-items: center; gap: 16px; padding: 0 12px 0 14px;
    border-radius: 22px; background: var(--ft-ink-2);
    transition: background-color .25s, transform .3s var(--ft-ease);
}
.ft-tower__row:hover { background: #352F2A; transform: translateX(6px); }
.ft-tower__pos { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 999px; background: #FCFAF5; color: var(--ft-ink); display: flex; align-items: center; justify-content: center; font-family: var(--ft-display); font-weight: 800; font-size: 18px; }
.ft-tower__line { flex: 0 0 auto; width: 6px; height: 32px; border-radius: 3px; transition: height .3s var(--ft-ease); }
.ft-tower__row:hover .ft-tower__line { height: 44px; }
.ft-line--terracota { background: var(--ft-clay); }
.ft-line--celeste { background: var(--ft-sky); }
.ft-line--amarillo { background: var(--ft-sun); }
.ft-tower__name { flex: 1; min-width: 0; font-weight: 600; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ft-tower__name:hover { text-decoration: underline; text-underline-offset: 3px; }
.ft-tower__price { font-weight: 700; font-size: 19px; }
.ft-tower form { margin: 0; }

.ft-add {
    position: relative; width: 48px; height: 48px; border-radius: 999px; border: 0; cursor: pointer;
    background: var(--ft-clay); color: #FFFFFF; font: inherit; font-weight: 700; font-size: 20px;
    display: flex; align-items: center; justify-content: center;
    transition: transform .25s var(--ft-ease), background-color .25s;
}
.ft-add:hover { transform: scale(1.1) rotate(90deg); }
.ft-add:active { transform: scale(.92); }
.ft-add__qty { display: none; font-family: var(--ft-display); font-size: 18px; }
.ft-add.is-in { background: var(--ft-leaf); }
.ft-add.is-in:hover { transform: scale(1.1); }
.ft-add.is-in .ft-add__plus { display: none; }
.ft-add.is-in .ft-add__qty { display: inline; }
.ft-add.is-loading { pointer-events: none; }
.ft-add.is-loading .ft-add__plus { animation: ft-spin .7s linear infinite; }
@keyframes ft-spin { to { transform: rotate(360deg); } }

/* ---------- Visítanos ---------- */
.ft-visit { background: var(--ft-ink); padding-bottom: 56px; }
.ft-visit__card { border-radius: 36px; background: var(--ft-cream); padding: 44px; display: flex; flex-wrap: wrap; gap: 32px 64px; }
.ft-visit__copy { flex: 1 1 420px; display: flex; flex-direction: column; gap: 12px; }
.ft-visit__copy .ft-hand { font-size: 34px; margin-top: 6px; }
.ft-visit__copy p { font-size: 18px; color: #4A443D; max-width: 480px; }
.ft-visit__title { font-family: var(--ft-display); font-weight: 700; font-size: clamp(32px, 4vw, 44px); line-height: 1; letter-spacing: -.03em; }
.ft-visit__data { flex: 1 1 420px; display: flex; flex-direction: column; justify-content: center; gap: 20px; }
.ft-visit__data dl { display: grid; grid-template-columns: 110px minmax(0, 1fr); row-gap: 14px; border-top: 1px solid #D9D0C3; padding-top: 18px; font-size: 17px; }
.ft-visit__data dt { font-weight: 700; }
.ft-status { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 14px; border-radius: 999px; font-weight: 700; font-size: 14px; color: #FFFFFF; }
.ft-status i { width: 8px; height: 8px; border-radius: 999px; }
.ft-status.is-open { background: var(--ft-leaf); }
.ft-status.is-open i { background: #9FD48A; animation: ft-pulse 2s infinite; }
.ft-status.is-closed { background: var(--ft-muted); }
.ft-status.is-closed i { background: #D9D0C3; }
@keyframes ft-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(159, 212, 138, .7); } 50% { box-shadow: 0 0 0 6px rgba(159, 212, 138, 0); } }

/* ---------- Aviso al agregar ---------- */
.ft-toast {
    position: fixed; left: 50%; bottom: 24px; z-index: 1000; transform: translate(-50%, 140%); opacity: 0; visibility: hidden;
    max-width: calc(100vw - 32px); padding: 14px 22px; border-radius: 999px;
    background: var(--ft-ink); color: #FCFAF5; font-weight: 600; box-shadow: 0 16px 40px rgba(0, 0, 0, .3);
    transition: transform .4s var(--ft-ease), opacity .3s, visibility .4s;
}
.ft-toast.is-on { transform: translate(-50%, 0); opacity: 1; visibility: visible; }

/* ---------- Aparición al hacer scroll ---------- */
.ft-js .ft-reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ft-ease), transform .7s var(--ft-ease); transition-delay: calc(var(--i, 0) * 70ms); }
.ft-js .ft-reveal.is-in { opacity: 1; transform: none; }

/* ---------- Móvil ---------- */
@media (max-width: 760px) {
    .ft-wrap { padding-left: 16px; padding-right: 16px; }
    .ft-nav { padding-top: 16px; padding-bottom: 8px; gap: 12px; }
    .ft-nav__logo img { height: 32px; }
    .ft-nav__links { order: 3; flex-basis: 100%; flex-wrap: nowrap; overflow-x: auto; gap: 18px; scrollbar-width: none; }
    .ft-nav__links a { white-space: nowrap; }
    .ft-nav__search, .ft-nav__account, .ft-cart span:not(.ft-cart__count) { display: none; }
    .ft-nav__actions { margin-left: auto; }
    .ft-cart { padding: 0 6px 0 12px; }
    .ft-stage { border-radius: 0 0 36px 36px; }
    .ft-stage__copy .ft-hand { font-size: 28px; }
    .ft-stage__lead { font-size: 17px; }
    .ft-stage__product { min-height: 360px; }
    .ft-stage__note { font-size: 26px; }
    .ft-specs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ft-specs dd { font-size: 16px; }
    .ft-search { height: 60px; padding-left: 20px; }
    .ft-search .ft-btn { display: none; }
    .ft-heading { font-size: 30px; }
    .ft-needs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .ft-need { height: 112px; padding: 16px; font-size: 21px; border-radius: 24px; }
    .ft-need svg { display: none; }
    /* Colecciones: fila que se desliza con el dedo. */
    .ft-collections { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px; margin: 0 -16px; padding: 44px 16px 56px; scrollbar-width: none; }
    .ft-collection { flex: 0 0 82%; height: 340px; scroll-snap-align: center; border-radius: 32px; padding: 22px; }
    .ft-collection__img { width: 140px; height: 140px; }
    .ft-collection__name { font-size: 30px; }
    .ft-collection__price { font-size: 56px; }
    .ft-picks { border-radius: 36px 36px 0 0; padding-top: 36px; }
    .ft-pick-top { min-height: 220px; flex-basis: 100%; }
    .ft-pick-top__img { width: 140px; height: 140px; right: 20px; top: 20px; }
    .ft-pick-top__num { font-size: 260px; top: -50px; }
    .ft-pick-top__name { font-size: 28px; }
    .ft-tower__row { height: 64px; gap: 12px; }
    .ft-tower__pos { width: 36px; height: 36px; font-size: 16px; }
    .ft-tower__name { font-size: 15px; }
    .ft-tower__price { font-size: 16px; }
    .ft-add { width: 44px; height: 44px; }
    .ft-visit__card { padding: 24px; border-radius: 28px; }
    .ft-visit__data dl { grid-template-columns: 84px minmax(0, 1fr); font-size: 15px; }
}

@media (hover: none) {
    .ft-need svg { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .ft-home *, .ft-home *::before, .ft-home *::after { animation: none !important; transition: none !important; }
    .ft-js .ft-reveal { opacity: 1; transform: none; }
    .ft-stage__product { transform: none; }
}

/* =====================================================================
 * Ficha de producto (.ft-pdp) · reutiliza escenario, botones y platos.
 * ===================================================================== */
.ft-pdp__stage .ft-stage__light { background: radial-gradient(ellipse 40% 60% at var(--mx, 28%) var(--my, 58%), #4A3F33 0%, rgba(30, 27, 24, 0) 70%); }

.ft-pdp__hero { position: relative; display: flex; flex-wrap: wrap; gap: 48px; align-items: center; padding-top: 8px; padding-bottom: 56px; }

/* Foto: polaroid crema inclinada sobre sombra, con miniaturas. */
.ft-pdp__media { flex: 1 1 440px; min-width: 0; min-height: 560px; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; }
.ft-pdp__media .ft-stage__shadow { bottom: 86px; }
.ft-polaroid {
    position: relative; margin: 0; padding: 16px 16px 56px; border-radius: 22px; background: #FCFAF5;
    box-shadow: 0 30px 60px rgba(0, 0, 0, .45);
    transform: translate3d(var(--px, 0), var(--py, 0), 0) rotate(-3deg);
    transition: transform .6s var(--ft-ease), box-shadow .5s var(--ft-ease);
}
.ft-polaroid:hover { transform: translate3d(var(--px, 0), var(--py, 0), 0) rotate(0deg) scale(1.02); box-shadow: 0 44px 80px rgba(0, 0, 0, .5); }
.ft-polaroid__plate { width: min(380px, 72vw); aspect-ratio: 1; border-radius: 14px; }
.ft-polaroid__plate img { transition: opacity .16s, transform .4s var(--ft-ease); }
.ft-polaroid__plate img.is-swapping { opacity: 0; transform: scale(.96); }
.ft-polaroid__note { position: absolute; left: 0; right: 0; bottom: 14px; text-align: center; font-size: 28px; color: var(--ft-ink); }
.ft-pdp__thumbs { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.ft-pdp__thumb {
    width: 64px; height: 64px; padding: 6px; border: 0; border-radius: 16px; cursor: pointer;
    box-shadow: inset 0 0 0 2px transparent; opacity: .7;
    transition: transform .2s var(--ft-ease), opacity .2s, box-shadow .2s;
}
.ft-pdp__thumb:hover { transform: translateY(-3px); opacity: 1; }
.ft-pdp__thumb[aria-pressed="true"] { opacity: 1; box-shadow: inset 0 0 0 2px var(--ft-sun); }

/* Compra */
.ft-pdp__buy { flex: 1 1 480px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.ft-crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 14px; color: var(--ft-muted-dark); }
.ft-crumbs a:hover { color: var(--ft-sun); }
.ft-pdp__title-block { display: flex; flex-direction: column; gap: 8px; }
.ft-pdp__title-block .ft-hand { font-size: 34px; }
.ft-pdp__title { font-family: var(--ft-display); font-weight: 700; font-size: clamp(36px, 4.4vw, 58px); line-height: 1; letter-spacing: -.035em; text-wrap: balance; }
.ft-pdp__lead { font-size: 17px; color: var(--ft-muted-dark); max-width: 520px; }
.ft-pdp__price-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; }
.ft-pdp__price { font-weight: 800; font-size: clamp(54px, 6vw, 76px); line-height: .9; letter-spacing: -.04em; }
.ft-pdp__before { font-size: 24px; color: var(--ft-muted-dark); }
.ft-pdp__points { flex-basis: 100%; font-size: 15px; color: var(--ft-sun); font-weight: 600; }
.ft-pdp__specs { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); border-top: 1px solid var(--ft-ink-line); border-bottom: 1px solid var(--ft-ink-line); }
.ft-pdp__specs > div { padding: 14px 12px 14px 0; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ft-pdp__specs dt { font-size: 13px; color: var(--ft-muted-dark); }
.ft-pdp__specs dd { font-family: var(--ft-display); font-weight: 700; font-size: 20px; line-height: 1.15; overflow-wrap: anywhere; }
.ft-pdp__specs dd.is-ok::before { content: ''; display: inline-block; width: 9px; height: 9px; margin-right: 8px; border-radius: 50%; background: #6FCF7F; vertical-align: middle; }
.ft-pdp__specs dd.is-out { color: var(--ft-sun); }
.ft-pdp__offers { list-style: none; margin: 0; padding: 0; color: var(--ft-sun); font-weight: 600; }

.ft-pdp__form { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 0; }
.ft-qty { display: flex; align-items: center; gap: 4px; padding: 4px; border-radius: 999px; background: var(--ft-ink-2); }
.ft-qty__btn {
    width: 48px; height: 48px; border: 0; border-radius: 999px; background: transparent; color: #FCFAF5;
    font: inherit; font-size: 22px; cursor: pointer; transition: transform .2s var(--ft-ease), background-color .2s;
}
.ft-qty__btn:hover { background: #3A342E; }
.ft-qty__btn:active { transform: scale(.9); }
.ft-qty__btn--plus { background: #FCFAF5; color: var(--ft-ink); }
.ft-qty__btn--plus:hover { background: #FFFFFF; }
.ft-qty__input {
    width: 44px; border: 0; outline: 0; background: transparent; color: #FCFAF5; text-align: center;
    font-weight: 700; font-size: 20px; -moz-appearance: textfield; appearance: textfield;
}
.ft-qty__input::-webkit-outer-spin-button, .ft-qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ft-pdp__add { flex: 1 1 260px; white-space: nowrap; }
.ft-pdp__add.is-in { background: var(--ft-leaf); }
.ft-pdp__add.is-loading { pointer-events: none; opacity: .75; }
.ft-pdp__out { align-self: flex-start; }
.ft-pdp__help { color: var(--ft-sun); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.ft-pdp__help:hover { text-decoration-thickness: 2px; }

/* Formulario de Velocity (bundle y otros): solo se acomoda al fondo oscuro. */
.ft-pdp__velocity { padding: 18px; border-radius: 24px; background: #FCFAF5; color: var(--ft-ink); }
.ft-pdp__velocity-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 12px; }
.ft-pdp__velocity .btn.ft-btn { height: 52px; border-radius: 999px; }

/* Detalle */
.ft-pdp__main { display: flex; flex-direction: column; gap: 64px; padding-top: 48px; }
.ft-pdp__info { display: flex; flex-wrap: wrap; gap: 32px 56px; }
.ft-pdp__detail { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.ft-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ft-tags li { height: 38px; padding: 0 16px; border-radius: 999px; background: var(--ft-sun); font-weight: 700; display: flex; align-items: center; }
.ft-tabs { align-self: flex-start; display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 999px; background: var(--ft-paper); }
.ft-tabs [role="tab"] { height: 44px; padding: 0 20px; border: 0; border-radius: 999px; background: transparent; color: var(--ft-ink); font: inherit; font-weight: 700; cursor: pointer; transition: background-color .2s, color .2s; }
.ft-tabs [role="tab"]:hover { background: var(--ft-cream); }
.ft-tabs [role="tab"][aria-selected="true"] { background: var(--ft-ink); color: #FCFAF5; }
.ft-tabpanel[hidden] { display: none; }
.ft-prose { font-size: 18px; color: #3F3A34; max-width: 720px; overflow-wrap: anywhere; }
.ft-prose :where(p, ul, ol) { margin: 0 0 14px; }
.ft-prose :where(ul, ol) { padding-left: 22px; }
.ft-prose :where(h1, h2, h3, h4) { font-family: var(--ft-display); font-size: 22px; margin: 20px 0 8px; }
.ft-prose img { height: auto; border-radius: 14px; }
.ft-prose table { max-width: 100%; display: block; overflow-x: auto; }
.ft-pdp__note { margin-top: 6px; }
.ft-pdp__reviews { max-width: 720px; }

.ft-pdp__aside { flex: 1 1 320px; display: flex; flex-direction: column; gap: 12px; }
.ft-card { border-radius: 28px; padding: 22px 24px; display: flex; flex-direction: column; gap: 4px; }
.ft-card .ft-hand { font-size: 26px; }
.ft-card strong { font-family: var(--ft-display); font-weight: 700; font-size: 20px; line-height: 1.15; }
.ft-card span:not(.ft-hand) { font-size: 14px; }
.ft-card--paper { background: var(--ft-paper); }
.ft-card--link { transition: transform .25s var(--ft-ease), box-shadow .25s var(--ft-ease); }
.ft-card--link:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(30, 27, 24, .1); }

/* Para acompañar */
.ft-pdp__section { display: flex; flex-direction: column; }
.ft-pdp__section--last { padding-bottom: 72px; }
.ft-pdp__section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px; }
.ft-link { color: var(--ft-clay); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.ft-cross { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 16px; padding-top: 20px; }
.ft-cross__card {
    position: relative; min-height: 300px; border-radius: 36px; padding: 26px; display: flex; flex-direction: column; gap: 6px;
    transition: transform .3s var(--ft-ease), box-shadow .3s var(--ft-ease);
}
.ft-cross__card:hover { transform: translateY(-6px); box-shadow: 0 26px 44px rgba(30, 27, 24, .18); }
.ft-cross__img { position: absolute; right: 22px; top: -20px; width: 170px; height: 170px; border-radius: 26px; transform: rotate(5deg); box-shadow: 0 20px 34px rgba(30, 27, 24, .22); transition: transform .4s var(--ft-ease); }
.ft-cross__card:hover .ft-cross__img { transform: rotate(-3deg) translateY(-8px) scale(1.05); }
.ft-cross__name { max-width: calc(100% - 190px); font-family: var(--ft-display); font-weight: 700; font-size: 28px; line-height: 1.05; letter-spacing: -.02em; }
.ft-cross__price { font-weight: 800; font-size: 44px; line-height: 1; letter-spacing: -.03em; }
.ft-cross__card form { margin: 0; }
.ft-cross__add { height: 44px; padding: 0 20px; margin-top: 10px; font-size: 15px; }
.ft-cross__add.is-in { background: var(--ft-leaf); color: #FFFFFF; }
.ft-cross__add.is-loading { opacity: .7; pointer-events: none; }

/* También te puede gustar */
.ft-related { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; padding-top: 18px; }
.ft-related__item { display: flex; flex-direction: column; gap: 10px; }
.ft-related__tile { height: 240px; border-radius: 28px; padding: 28px; background: var(--tile, var(--ft-paper)); transition: transform .3s var(--ft-ease), box-shadow .3s var(--ft-ease); }
.ft-related__tile img { transition: transform .4s var(--ft-ease); }
.ft-related__item:hover .ft-related__tile { transform: translateY(-4px); box-shadow: 0 18px 34px rgba(30, 27, 24, .12); }
.ft-related__item:hover .ft-related__tile img { transform: scale(1.06) rotate(-2deg); }
.ft-related__name { padding: 0 6px; font-weight: 600; }
.ft-related__price { padding: 0 6px; font-weight: 700; font-size: 20px; }
.ft-related__price s { margin-left: 8px; font-size: 15px; color: var(--ft-muted); font-weight: 500; }

@media (max-width: 760px) {
    .ft-pdp__hero { gap: 20px; padding-bottom: 36px; }
    .ft-pdp__media { min-height: 0; flex-basis: 100%; padding-top: 12px; }
    .ft-pdp__media .ft-stage__shadow { bottom: 70px; width: 220px; margin-left: -110px; }
    .ft-polaroid { padding: 12px 12px 46px; }
    .ft-polaroid__plate { width: min(280px, 70vw); }
    .ft-polaroid__note { font-size: 24px; bottom: 10px; }
    .ft-pdp__thumb { width: 56px; height: 56px; }
    .ft-pdp__buy { flex-basis: 100%; gap: 16px; }
    .ft-pdp__title-block .ft-hand { font-size: 28px; }
    .ft-pdp__specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ft-pdp__specs dd { font-size: 17px; }
    .ft-pdp__form { gap: 10px; }
    .ft-pdp__add { flex-basis: 100%; height: 56px; font-size: 16px; }
    .ft-qty { width: 100%; justify-content: space-between; }
    .ft-pdp__main { gap: 44px; padding-top: 32px; }
    .ft-prose { font-size: 16px; }
    .ft-tabs { align-self: stretch; }
    .ft-tabs [role="tab"] { flex: 1; padding: 0 12px; }
    .ft-cross { grid-template-columns: minmax(0, 1fr); padding-top: 28px; }
    .ft-cross__card { min-height: 250px; padding: 22px; border-radius: 30px; }
    .ft-cross__img { width: 120px; height: 120px; right: 16px; }
    .ft-cross__name { max-width: calc(100% - 130px); font-size: 22px; }
    .ft-cross__price { font-size: 36px; }
    .ft-related { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .ft-related__tile { height: 160px; padding: 16px; border-radius: 22px; }
    .ft-related__name { font-size: 14px; }
    .ft-related__price { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
    .ft-polaroid { transform: rotate(-3deg); }
}
.ft-pdp__detail-title { margin-bottom: 0; }

/* =====================================================================
 * Listado de categoría (.ft-plp)
 * ===================================================================== */
.ft-plp__head { position: relative; display: flex; flex-direction: column; gap: 22px; padding-top: 24px; padding-bottom: 44px; }
.ft-plp__title-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; }
.ft-plp__title-block { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ft-plp__title-block .ft-hand { font-size: 36px; }
.ft-plp__title { font-family: var(--ft-display); font-weight: 700; font-size: clamp(40px, 5.5vw, 64px); line-height: .95; letter-spacing: -.04em; overflow-wrap: anywhere; }
.ft-plp__desc { max-width: 720px; color: var(--ft-muted-dark); font-size: 16px; }
.ft-plp__desc :where(p) { margin: 0 0 8px; }
.ft-plp__desc :where(h1, h2, h3) { display: none; } /* el nombre ya va en el título */

.ft-sort { display: flex; align-items: center; gap: 10px; }
.ft-sort label { font-size: 15px; color: var(--ft-muted-dark); }
.ft-sort select {
    height: 44px; padding: 0 40px 0 18px; border: 0; border-radius: 999px; cursor: pointer;
    background: var(--ft-ink-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23FCFAF5' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 16px center;
    color: #FCFAF5; font: inherit; font-weight: 600; -webkit-appearance: none; appearance: none;
}
.ft-sort select:focus-visible { outline: 3px solid var(--ft-sun); outline-offset: 3px; }

.ft-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ft-chip {
    display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 999px;
    box-shadow: inset 0 0 0 1px var(--ft-ink-line); color: #FCFAF5; font-weight: 600;
    transition: background-color .2s, color .2s, box-shadow .2s, transform .2s var(--ft-ease);
}
.ft-chip:hover { box-shadow: inset 0 0 0 1px #FCFAF5; transform: translateY(-2px); }
.ft-chip.is-on { background: var(--ft-sun); color: var(--ft-ink); box-shadow: none; font-weight: 700; }
.ft-chips__clear { height: 44px; padding: 0 12px; display: inline-flex; align-items: center; color: var(--ft-sun); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }

.ft-plp__main { display: flex; flex-direction: column; gap: 20px; padding-top: 36px; padding-bottom: 72px; }
.ft-plp__count { font-weight: 600; color: var(--ft-muted); }
.ft-plp__help { text-align: center; }

.ft-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.ft-pcard {
    display: flex; flex-direction: column; gap: 12px; padding: 14px 14px 18px; border-radius: 32px; background: var(--ft-paper);
    transition: transform .3s var(--ft-ease), box-shadow .3s var(--ft-ease);
}
.ft-pcard:hover { transform: translateY(-4px); box-shadow: 0 22px 40px rgba(30, 27, 24, .1); }
.ft-pcard__tile { position: relative; height: 260px; padding: 28px; border-radius: 24px; background: var(--tile, var(--ft-cream)); }
.ft-pcard__tile img { transition: transform .45s var(--ft-ease); }
.ft-pcard:hover .ft-pcard__tile img { transform: scale(1.06) rotate(-2deg); }
.ft-pcard__note { position: absolute; left: 18px; top: 14px; font-size: 24px; transform: rotate(-4deg); }
.ft-pcard__badge { position: absolute; right: 14px; top: 14px; height: 30px; padding: 0 12px; border-radius: 999px; background: var(--ft-clay); color: #FFFFFF; font-weight: 700; font-size: 13px; display: flex; align-items: center; }
.ft-pcard__text { padding: 0 8px; display: flex; flex-direction: column; gap: 2px; flex: 1; }
.ft-pcard__brand { font-size: 14px; color: var(--ft-muted); }
.ft-pcard__name { font-family: var(--ft-display); font-weight: 700; font-size: 20px; line-height: 1.15; letter-spacing: -.01em; }
.ft-pcard__name:hover { text-decoration: underline; text-underline-offset: 3px; }
.ft-pcard__buy { padding: 0 4px 0 8px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ft-pcard__buy form { margin: 0; }
.ft-pcard__price { font-weight: 800; font-size: 28px; letter-spacing: -.03em; line-height: 1.1; }
.ft-pcard__price s { display: block; font-size: 14px; font-weight: 500; letter-spacing: 0; color: var(--ft-muted); }
.ft-pcard__add { height: 48px; padding: 0 22px; font-size: 16px; white-space: nowrap; }
.ft-pcard__add.is-in { background: var(--ft-leaf); }
.ft-pcard__add.is-loading { opacity: .7; pointer-events: none; }
.ft-pcard__out { height: 48px; padding: 0 18px; border-radius: 999px; background: var(--ft-cream); color: var(--ft-muted); font-weight: 700; display: inline-flex; align-items: center; }

.ft-pager { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding-top: 16px; }
.ft-pager__page, .ft-pager__step, .ft-pager__gap { min-width: 48px; height: 48px; padding: 0 12px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-family: var(--ft-display); font-weight: 700; }
.ft-pager__page, .ft-pager__step { background: var(--ft-paper); transition: transform .2s var(--ft-ease), background-color .2s; }
.ft-pager a:hover { transform: translateY(-2px); }
.ft-pager__page.is-on { background: var(--ft-ink); color: #FCFAF5; }
.ft-pager__step.is-off { opacity: .4; }

.ft-empty { padding: 48px 24px; border-radius: 32px; background: var(--ft-paper); display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.ft-empty .ft-hand { font-size: 32px; }

@media (max-width: 760px) {
    .ft-plp__head { gap: 16px; padding-top: 16px; padding-bottom: 28px; }
    .ft-plp__title-block .ft-hand { font-size: 28px; }
    .ft-sort { width: 100%; }
    .ft-sort select { flex: 1; }
    /* Filtros: una fila que se desliza con el dedo. */
    .ft-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    .ft-chip, .ft-chips__clear { flex: 0 0 auto; white-space: nowrap; }
    .ft-plp__main { padding-top: 24px; gap: 14px; }
    .ft-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .ft-pcard { padding: 8px 8px 12px; gap: 8px; border-radius: 22px; }
    .ft-pcard__tile { height: 150px; padding: 14px; border-radius: 16px; }
    .ft-pcard__note { font-size: 18px; left: 10px; top: 8px; }
    .ft-pcard__badge { right: 8px; top: 8px; height: 24px; padding: 0 8px; font-size: 11px; }
    .ft-pcard__text { padding: 0 4px; }
    .ft-pcard__brand { font-size: 12px; }
    .ft-pcard__name { font-size: 15px; }
    .ft-pcard__buy { flex-direction: column; align-items: stretch; gap: 8px; padding: 0 4px; }
    .ft-pcard__price { font-size: 22px; }
    .ft-pcard__add, .ft-pcard__out { width: 100%; height: 44px; justify-content: center; font-size: 15px; }
}
/* Marcas extra: ocultas solo si hay JS (sin JS se ven todas). */
.ft-js .ft-chips:not(.is-open) .ft-chip.is-extra { display: none; }
.ft-chip--more { border: 0; background: transparent; font: inherit; font-weight: 700; color: var(--ft-sun); cursor: pointer; box-shadow: inset 0 0 0 1px var(--ft-ink-line); }

/* =====================================================================
 * Resultados de búsqueda (.ft-srp) · usa el listado (.ft-plp)
 * ===================================================================== */
.ft-srp .ft-nav__search { display: none; } /* ya está el buscador grande */
.ft-srp__search { margin-bottom: 0; max-width: 820px; }
.ft-srp .ft-plp__title { overflow-wrap: anywhere; }
.ft-srp__empty { gap: 14px; }
.ft-srp__empty .ft-muted { max-width: 560px; }
.ft-srp__shortcuts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 8px 0 6px; }
.ft-srp__shortcut {
    min-height: 48px; padding: 10px 20px; border-radius: 999px; display: inline-flex; align-items: center; font-weight: 700; line-height: 1.2; text-align: center;
    transition: transform .2s var(--ft-ease), box-shadow .2s var(--ft-ease);
}
.ft-srp__shortcut:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(30, 27, 24, .14); }
.ft-srp__shortcut--plain { background: var(--ft-cream); color: var(--ft-ink); }

@media (max-width: 760px) {
    .ft-srp__search { height: 56px; }
    .ft-srp__shortcuts { justify-content: flex-start; }
}

/* =====================================================================
 * Carrito (.ft-cartp)
 * ===================================================================== */
.ft-cartp__units { margin-top: 6px; color: var(--ft-muted-dark); font-weight: 600; }
.ft-cartp__main { display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-start; padding-top: 36px; padding-bottom: 48px; }
.ft-cartp__body { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 28px; }
.ft-cartp__form { margin: 0; display: flex; flex-direction: column; gap: 14px; }
.ft-cartp__form.is-sending { opacity: .6; pointer-events: none; transition: opacity .2s; }

.ft-lines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ft-line { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; padding: 12px 18px 12px 12px; border-radius: 28px; background: var(--ft-paper); }
.ft-line__img { flex: 0 0 auto; width: 88px; height: 88px; padding: 8px; border-radius: 20px; }
.ft-line__text { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; gap: 2px; }
.ft-line__brand { font-size: 14px; color: var(--ft-muted); }
.ft-line__name { font-family: var(--ft-display); font-weight: 700; font-size: 19px; }
a.ft-line__name:hover { text-decoration: underline; text-underline-offset: 3px; }
.ft-line__option, .ft-line__unit { font-size: 14px; color: var(--ft-muted); }
.ft-line__error { font-size: 14px; font-weight: 600; color: var(--ft-clay); }
.ft-line__actions { display: flex; gap: 16px; margin-top: 4px; }
.ft-line__remove { font-size: 14px; font-weight: 600; color: var(--ft-clay); text-decoration: underline; text-underline-offset: 3px; }
.ft-line__save { color: var(--ft-muted); }
.ft-line__total { min-width: 100px; text-align: right; font-weight: 800; font-size: 22px; letter-spacing: -.02em; }

.ft-qty--light { background: var(--ft-cream); }
.ft-qty--light .ft-qty__btn { color: var(--ft-ink); }
.ft-qty--light .ft-qty__btn:hover { background: #E9E1D4; }
.ft-qty--light .ft-qty__btn--plus { background: var(--ft-ink); color: #FCFAF5; }
.ft-qty--light .ft-qty__btn--plus:hover { background: #3A342E; }
.ft-qty--light .ft-qty__input { color: var(--ft-ink); width: 40px; font-size: 18px; }
.ft-qty--light .ft-qty__btn { width: 44px; height: 44px; font-size: 20px; }

.ft-cartp__controls { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding: 0 6px; }
.ft-cartp__update { height: 46px; padding: 0 22px; font-size: 15px; }

.ft-cartp__section { display: flex; flex-direction: column; gap: 14px; }
.ft-cartp__section .ft-heading { margin-bottom: 0; }
.ft-cartp__modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }

.ft-more { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; padding: 16px 20px 16px 16px; border-radius: 28px; background: var(--ft-sun); }
.ft-more__img { flex: 0 0 auto; width: 72px; height: 72px; padding: 6px; border-radius: 18px; }
.ft-more__text { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.ft-more__text .ft-hand { font-size: 24px; }
.ft-more__text a { font-weight: 600; }
.ft-more__text a:hover { text-decoration: underline; }
.ft-more form { margin: 0; }
.ft-more__add { height: 46px; padding: 0 20px; font-size: 15px; }
.ft-more__add.is-in { background: var(--ft-leaf); }
.ft-more__add.is-loading { opacity: .7; pointer-events: none; }

.ft-summary {
    flex: 1 1 340px; position: sticky; top: 24px; display: flex; flex-direction: column; gap: 16px;
    padding: 30px; border-radius: 36px; background: var(--ft-ink); color: #FCFAF5;
}
.ft-summary .ft-hand { font-size: 30px; }
.ft-summary__rows { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 16px; font-size: 16px; }
.ft-summary__rows dt { color: var(--ft-muted-dark); white-space: nowrap; }
.ft-summary__rows dd { font-weight: 600; text-align: right; }
.ft-summary__discount { color: #8FD69B; }
.ft-summary__total { display: flex; flex-direction: column; padding-top: 16px; border-top: 1px solid var(--ft-ink-line); }
.ft-summary__total span { font-size: 14px; color: var(--ft-muted-dark); }
.ft-summary__total strong { font-weight: 800; font-size: clamp(44px, 5vw, 60px); line-height: .95; letter-spacing: -.04em; }
.ft-summary__go { height: 60px; font-size: 18px; }
.ft-summary__go.is-off { opacity: .45; cursor: not-allowed; transform: none; }
.ft-summary__min { font-size: 14px; color: var(--ft-sun); text-align: center; }
.ft-summary__note { text-align: center; font-size: 14px; color: var(--ft-muted-dark); }
.ft-summary__help { text-align: center; color: var(--ft-sun); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }

.ft-coupon { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.ft-coupon input {
    flex: 1 1 140px; min-width: 0; height: 46px; padding: 0 16px; border: 0; border-radius: 999px;
    background: var(--ft-ink-2); color: #FCFAF5; font: inherit; outline: 0;
}
.ft-coupon input::placeholder { color: var(--ft-muted-dark); }
.ft-coupon input:focus-visible { box-shadow: 0 0 0 2px var(--ft-sun); }
.ft-coupon__apply, .ft-coupon__remove { height: 46px; padding: 0 18px; border: 0; border-radius: 999px; background: #FCFAF5; color: var(--ft-ink); font: inherit; font-weight: 700; cursor: pointer; }
.ft-coupon__applied { flex: 1; font-size: 15px; color: #8FD69B; }
.ft-coupon__remove { background: transparent; color: var(--ft-sun); text-decoration: underline; padding: 0 6px; }
.ft-coupon__error { flex-basis: 100%; font-size: 14px; color: var(--ft-sun); }
.ft-coupon__error:empty { display: none; }

.ft-law { padding-bottom: 64px; }
.ft-law__box { padding: 28px 32px; border-radius: 28px; background: var(--ft-paper); color: #3F3A34; font-size: 15px; }
.ft-law__title { font-family: var(--ft-display); font-weight: 700; font-size: 20px; color: var(--ft-ink); margin-bottom: 10px; }
.ft-law__box :where(p, ol) { margin: 0 0 10px; }
.ft-law__box ol { padding-left: 22px; }
.ft-law__box li { margin-bottom: 6px; }
.ft-law__box a { color: var(--ft-clay); font-weight: 600; text-decoration: underline; }

@media (max-width: 760px) {
    .ft-cartp__main { padding-top: 24px; gap: 24px; }
    .ft-line { gap: 10px 12px; padding: 10px 14px 12px 10px; border-radius: 22px; }
    .ft-line__img { width: 68px; height: 68px; border-radius: 14px; }
    .ft-line__text { flex-basis: calc(100% - 90px); }
    .ft-line .ft-qty { margin-left: 78px; }
    .ft-line__total { flex: 1; min-width: 0; font-size: 20px; }
    .ft-summary { position: static; padding: 24px; border-radius: 28px; }
    .ft-law__box { padding: 20px; }
}

/* =====================================================================
 * Ingreso y registro (.ft-auth)
 * ===================================================================== */
.ft-auth__stage { border-radius: 0 0 48px 48px; }
.ft-auth__body { position: relative; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 40px 64px; padding-top: 32px; padding-bottom: 64px; }
.ft-auth__copy { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 16px; padding-top: 20px; }
.ft-auth__copy .ft-hand { font-size: 36px; }
.ft-auth__title { font-family: var(--ft-display); font-weight: 700; font-size: clamp(42px, 5.5vw, 68px); line-height: .95; letter-spacing: -.04em; }
.ft-auth__lead { font-size: 18px; color: var(--ft-muted-dark); max-width: 440px; }
.ft-auth__perks { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.ft-auth__perks li { display: flex; align-items: center; gap: 14px; }
.ft-auth__perks strong { display: block; font-family: var(--ft-display); font-size: 18px; }
.ft-auth__perks li > span:last-child { color: var(--ft-muted-dark); font-size: 15px; line-height: 1.3; }
.ft-auth__perks strong { color: #FCFAF5; }
.ft-auth__icon { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 14px; display: flex; align-items: center; justify-content: center; }
.ft-auth__help { margin-top: 8px; color: var(--ft-sun); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }

.ft-auth__card { flex: 1 1 440px; min-width: 0; max-width: 560px; margin-left: auto; padding: 32px; border-radius: 36px; background: var(--ft-cream); color: var(--ft-ink); box-shadow: 0 30px 70px rgba(0, 0, 0, .35); }

.ft-form { display: flex; flex-direction: column; gap: 16px; margin: 0; }
.ft-form__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ft-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ft-field label { font-weight: 700; font-size: 15px; }
.ft-field input {
    width: 100%; height: 54px; padding: 0 18px; border: 0; border-radius: 16px; background: var(--ft-paper); color: var(--ft-ink);
    font: inherit; font-size: 17px; box-shadow: inset 0 0 0 1.5px #E3DACC; outline: 0; transition: box-shadow .2s;
}
.ft-field input::placeholder { color: #A39A8E; }
.ft-field input:focus { box-shadow: inset 0 0 0 2px var(--ft-ink), 0 0 0 4px rgba(246, 212, 107, .6); }
.ft-field.has-error input { box-shadow: inset 0 0 0 2px var(--ft-clay); }
.ft-field__error { font-size: 14px; font-weight: 600; color: var(--ft-clay); }
.ft-field__hint { font-size: 13px; color: var(--ft-muted); }
.ft-form__pass-hint { margin-top: -8px; }
.ft-field__pass { position: relative; display: block; }
.ft-field__pass input { padding-right: 54px; }
.ft-field__toggle {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border: 0; border-radius: 12px;
    background: transparent; color: var(--ft-muted); cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.ft-field__toggle:hover { background: var(--ft-cream); color: var(--ft-ink); }
.ft-field__toggle[aria-pressed="true"] { color: var(--ft-clay); }

.ft-form__row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-top: -4px; }
.ft-form__link { font-size: 14px; font-weight: 600; color: var(--ft-muted); text-decoration: underline; text-underline-offset: 3px; }
.ft-form__link:hover { color: var(--ft-clay); }
.ft-form__captcha { display: flex; justify-content: center; min-height: 0; }
.ft-form__captcha:empty { display: none; }
.ft-form__captcha > div { max-width: 100%; }
.ft-form__submit { width: 100%; height: 58px; font-size: 18px; }
.ft-form__submit.is-loading { opacity: .7; pointer-events: none; }
.ft-form__divider { display: flex; align-items: center; gap: 12px; margin: 18px 0 12px; color: var(--ft-muted); font-size: 14px; }
.ft-form__divider::before, .ft-form__divider::after { content: ''; flex: 1; height: 1px; background: #E3DACC; }
.ft-form__social { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.ft-form__social .ft-btn { height: 50px; font-size: 15px; }
.ft-form__switch { margin-top: 18px; text-align: center; color: var(--ft-muted); }
.ft-form__switch a { color: var(--ft-clay); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

.ft-check { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--ft-muted); line-height: 1.4; cursor: pointer; }
.ft-check input { flex: 0 0 auto; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--ft-clay); }
.ft-check a { color: var(--ft-clay); font-weight: 600; text-decoration: underline; }

@media (max-width: 760px) {
    .ft-auth__body { gap: 20px; padding-top: 12px; padding-bottom: 28px; }
    .ft-auth__copy { padding-top: 0; gap: 10px; }
    .ft-auth__copy .ft-hand { font-size: 28px; }
    .ft-auth__lead { font-size: 16px; }
    /* En el teléfono el formulario va primero: los beneficios se acortan. */
    .ft-auth__perks, .ft-auth__help { display: none; }
    .ft-auth__card { padding: 22px 18px; border-radius: 28px; margin-left: 0; max-width: none; }
    .ft-form__pair { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}

/* =====================================================================
 * Checkout (.ft-checkout) · viste el checkout de Rewards (onepage2) sin
 * tocar su lógica. Sus estilos van en un <style> al final de la página:
 * aquí se gana por especificidad (.ft-checkout …) y, solo donde ellos usan
 * !important (tarjetas activas), también con !important.
 * ===================================================================== */
.ft-checkout__lead { max-width: 560px; margin-top: 6px; color: var(--ft-muted-dark); font-size: 17px; }
.ft-checkout__lead a { color: var(--ft-sun); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.ft-checkout__body { padding: 36px 0 64px; }
.ft-checkout .container { max-width: 1280px; padding-left: 32px; padding-right: 32px; }
.ft-checkout .checkout-main-title { display: none !important; }

/* Tarjetas de sección numeradas (reemplazan los emojis). */
.ft-checkout .col-lg-8 { counter-reset: ft-step; }
.ft-checkout .modern-checkout-card {
    margin-bottom: 16px; border: 0; border-radius: 32px; background: var(--ft-paper); box-shadow: none; overflow: visible;
}
.ft-checkout .modern-checkout-card:hover { box-shadow: none; transform: none; }
.ft-checkout .modern-section-header {
    display: flex; align-items: center; gap: 14px; padding: 26px 28px 6px; border: 0; background: transparent;
}
.ft-checkout .modern-checkout-card .section-icon {
    counter-increment: ft-step; flex: 0 0 auto; width: 40px; height: 40px; border-radius: 999px; font-size: 0;
    display: inline-flex; align-items: center; justify-content: center; background: var(--ft-ink); color: #FCFAF5;
}
.ft-checkout .modern-checkout-card .section-icon::before { content: counter(ft-step); font-family: var(--ft-display); font-weight: 800; font-size: 17px; }
.ft-checkout .modern-checkout-card.final-step .section-icon { background: var(--ft-clay); }
.ft-checkout .section-title { margin: 0; font-family: var(--ft-display); font-weight: 700; font-size: 24px; letter-spacing: -.01em; color: var(--ft-ink); }
.ft-checkout .section-badge, .ft-checkout .section-badge.optional { margin-left: auto; height: 28px; padding: 0 12px; border-radius: 999px; background: var(--ft-cream); color: var(--ft-muted); font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; text-transform: none; }
.ft-checkout .modern-section-content { padding: 16px 28px 28px; }

/* Envío y pago: tarjetas grandes; la elegida, amarilla. */
.ft-checkout .shipping-cards-container, .ft-checkout .payment-cards-container { gap: 12px; }
.ft-checkout .shipping-method-card, .ft-checkout .payment-method-card {
    border: 0 !important; border-radius: 22px !important; background: var(--ft-cream) !important;
    box-shadow: inset 0 0 0 2px transparent !important; transition: transform .2s var(--ft-ease), box-shadow .2s, background-color .2s;
}
.ft-checkout .shipping-method-card:hover, .ft-checkout .payment-method-card:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 2px #D9CFBF !important; }
.ft-checkout .shipping-method-card-active, .ft-checkout .payment-method-card-active {
    background: var(--ft-sun) !important; box-shadow: inset 0 0 0 2px var(--ft-ink) !important;
}
.ft-checkout .shipping-method-label, .ft-checkout .payment-method-label { margin: 0; padding: 18px 20px; cursor: pointer; width: 100%; }
.ft-checkout .shipping-method-icon, .ft-checkout .payment-method-icon { display: none; }
.ft-checkout .shipping-method-title, .ft-checkout .payment-method-title { font-family: var(--ft-display); font-weight: 700; font-size: 19px; color: var(--ft-ink); text-transform: none; letter-spacing: 0; }
.ft-checkout .payment-method-description { margin-top: 4px; font-size: 14px; line-height: 1.4; color: #4A443D; text-align: left; }
.ft-checkout .payment-method-header { justify-content: flex-start; text-align: left; }
.ft-checkout .shipping-notice { margin-top: 14px; padding: 14px 18px; border: 0; border-radius: 18px; background: var(--ft-cream); }
.ft-checkout .shipping-notice .text-info { color: #3F3A34 !important; font-size: 14px; line-height: 1.5; }

/* Datos bancarios de la transferencia. */
.ft-checkout .additional-details-card { margin-top: 14px; border: 0; border-radius: 24px; overflow: hidden; background: var(--ft-cream); box-shadow: none; }
.ft-checkout .additional-details-header { padding: 14px 20px; background: var(--ft-ink); color: #FCFAF5; }
.ft-checkout .details-title { color: #FCFAF5; font-family: var(--ft-display); font-size: 18px; margin: 0; }
.ft-checkout .details-icon { display: none; }
.ft-checkout .copy-btn { height: 38px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--ft-sun); color: var(--ft-ink); font-weight: 700; }
.ft-checkout .additional-details-content { padding: 16px 20px 20px; }
.ft-checkout .additional-details-content pre { margin: 0 0 12px; padding: 14px 16px; border: 0; border-radius: 16px; background: var(--ft-paper); font-size: 14px; white-space: pre-wrap; }
.ft-checkout .additional-details-notice { border: 0; border-radius: 16px; background: #FBEFC4; color: #4A443D; }

/* Direcciones guardadas: grilla de tarjetas (el markup trae columnas de Bootstrap). */
.ft-checkout .address-container { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.ft-checkout .address-container > .address-holder { width: auto; max-width: none; flex: none; padding: 0; }
.ft-checkout .address-holder .card-body { padding: 18px; }
.ft-checkout .address-holder ul { margin: 0; padding: 0; font-size: 14px; line-height: 1.45; color: #3F3A34; }
.ft-checkout .form-header h3 { font-family: var(--ft-display); font-size: 18px; font-weight: 700; }
.ft-checkout .address-holder .card, .ft-checkout .address-container .card {
    height: 100%; border: 0; border-radius: 22px; background: var(--ft-cream); box-shadow: inset 0 0 0 2px transparent; transition: box-shadow .2s;
}
.ft-checkout .address-holder .card:hover { box-shadow: inset 0 0 0 2px #D9CFBF; }
.ft-checkout .address-holder .card:has(input:checked) { background: var(--ft-sun); box-shadow: inset 0 0 0 2px var(--ft-ink); }
.ft-checkout .card-title { font-family: var(--ft-display); font-weight: 700; }
.ft-checkout .add-address-button { color: var(--ft-clay); font-weight: 700; }

/* Formularios (dirección nueva, cupón, puntos). */
.ft-checkout .control-group label, .ft-checkout .form-field label { font-weight: 700; font-size: 14px; color: var(--ft-ink); }
.ft-checkout .control, .ft-checkout .form-field input, .ft-checkout .form-field select, .ft-checkout .styled-select select,
.ft-checkout .discount-control input, .ft-checkout input.control {
    height: 50px; padding: 0 16px; border: 0; border-radius: 14px; background: var(--ft-paper); color: var(--ft-ink);
    font: inherit; box-shadow: inset 0 0 0 1.5px #E3DACC; outline: 0;
}
.ft-checkout .control:focus, .ft-checkout .form-field input:focus, .ft-checkout .discount-control input:focus { box-shadow: inset 0 0 0 2px var(--ft-ink), 0 0 0 4px rgba(246, 212, 107, .6); }
.ft-checkout .has-error .control, .ft-checkout .has-error input { box-shadow: inset 0 0 0 2px var(--ft-clay); }
.ft-checkout .control-error { color: var(--ft-clay); font-weight: 600; font-size: 13px; }
.ft-checkout .discounts-grid { gap: 18px; }
.ft-checkout .discount-item { border: 0; border-radius: 22px; background: var(--ft-cream); padding: 18px; }
.ft-checkout .discount-item h4 { font-family: var(--ft-display); font-size: 17px; font-weight: 700; margin: 0 0 10px; }
.ft-checkout .theme-btn, .ft-checkout .theme-btn.light {
    height: 46px; padding: 0 20px; border: 0 !important; border-radius: 999px !important; background: var(--ft-ink) !important; color: #FCFAF5 !important;
    font-weight: 700; text-transform: none; box-shadow: none !important;
}
.ft-checkout .theme-btn:disabled { opacity: .45; }

/* Confirmar. */
.ft-checkout .modern-checkout-card.final-step { background: var(--ft-ink); border: 0; }
.ft-checkout .final-step .modern-section-header { background: transparent; }
.ft-checkout .modern-checkout-card.final-step .section-title { color: #FCFAF5; }
.ft-checkout .modern-checkout-btn {
    width: 100%; height: 62px; border: 0; border-radius: 999px; background: var(--ft-clay); color: #FFFFFF;
    font: inherit; font-weight: 700; font-size: 19px; box-shadow: none; transition: transform .25s var(--ft-ease), background-color .2s, box-shadow .25s;
}
.ft-checkout .modern-checkout-btn:hover:not(:disabled) { transform: translateY(-2px); background: var(--ft-clay-dark); box-shadow: 0 12px 30px rgba(168, 65, 14, .45); }
.ft-checkout .modern-checkout-btn:disabled { opacity: .5; cursor: not-allowed; }
.ft-checkout .modern-checkout-btn .btn-icon { display: none; }

/* Resumen: oscuro y fijo al hacer scroll, como en el carrito. */
.ft-checkout .col-lg-4 > .modern-summary-card { position: sticky; top: 24px; }
.ft-checkout .modern-summary-card { border: 0; border-radius: 36px; background: var(--ft-ink); color: #FCFAF5; box-shadow: none; overflow: hidden; }
.ft-checkout .modern-summary-card:hover { transform: none; box-shadow: none; }
.ft-checkout .modern-summary-card .modern-section-header { padding: 26px 26px 0; background: transparent; border: 0; }
.ft-checkout .modern-summary-card .section-icon { display: none; }
.ft-checkout .modern-summary-card .section-title { font-family: var(--ft-hand); font-weight: 700; font-size: 30px; color: var(--ft-sun); }
.ft-checkout .modern-summary-card .modern-section-content { padding: 12px 26px 26px; background: transparent; }
.ft-checkout .modern-summary-card .modern-section-content > div,
.ft-checkout .modern-summary-card .order-summary { border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; color: #FCFAF5; }
.ft-checkout .modern-summary-card .order-summary h3 { display: none; } /* "Resumen Compra" repetido dentro del resumen */
.ft-checkout .modern-summary-card .row { margin: 0; padding: 6px 0; font-size: 15px; }
.ft-checkout .modern-summary-card .row > span:first-child { color: var(--ft-muted-dark); padding-left: 0; }
.ft-checkout .modern-summary-card .row > span:last-child { padding-right: 0; font-weight: 600; }
.ft-checkout .modern-summary-card .payable-amount { margin-top: 10px; padding-top: 16px; border-top: 1px solid var(--ft-ink-line); align-items: baseline; }
.ft-checkout .modern-summary-card .payable-amount > span:first-child { color: #FCFAF5; font-weight: 700; }
.ft-checkout .modern-summary-card .payable-amount { flex-wrap: nowrap; }
.ft-checkout .modern-summary-card .payable-amount > span:first-child { flex: 0 0 auto; width: auto; max-width: none; }
.ft-checkout .modern-summary-card .payable-amount > span:last-child { flex: 1 1 auto; width: auto; max-width: none; white-space: nowrap; font-family: var(--ft-display); font-weight: 800; font-size: 30px; letter-spacing: -.03em; }

@media (max-width: 760px) {
    .ft-checkout__body { padding: 20px 0 40px; }
    .ft-checkout .container { padding-left: 16px; padding-right: 16px; }
    .ft-checkout .modern-checkout-card { border-radius: 26px; }
    .ft-checkout .modern-section-header { padding: 20px 18px 4px; }
    .ft-checkout .modern-section-content { padding: 12px 18px 20px; }
    .ft-checkout .section-title { font-size: 21px; }
    .ft-checkout .modern-summary-card { border-radius: 28px; margin-bottom: 16px; }
}

/* =====================================================================
 * Convivencia con el "CSS personalizado" del admin (Configuración ›
 * Contenido › custom_css), que aplica a todo el sitio:
 *   html { max-width: 1450px; margin: auto; background: beige }  → encajona la página
 *   a:hover { color: #1E1B18 !important }                        → oscurece botones y links
 * En las páginas del tema se anulan aquí; Velocity sigue igual.
 * ===================================================================== */
html:has(.ft-home) { max-width: none !important; margin: 0 !important; box-shadow: none !important; background-color: #F5F0E8 !important; }
html:has(.ft-home) body { background-color: #F5F0E8; }

/* Hover: en zonas oscuras el texto sigue claro; cada link de color conserva el suyo. */
.ft-home .ft-stage a:hover, .ft-home .ft-picks a:hover, .ft-home .ft-summary a:hover,
.ft-home .ft-tone--tinta:hover, .ft-home .ft-tone--tinta a:hover { color: #FCFAF5 !important; }
.ft-home a.ft-btn--light:hover, .ft-home a.ft-cart:hover, .ft-home a.ft-chip.is-on:hover,
.ft-home a.ft-tone--celeste:hover, .ft-home a.ft-tone--amarillo:hover, .ft-home .ft-srp__shortcut--plain:hover { color: var(--ft-ink) !important; }
.ft-home a.ft-btn--clay:hover, .ft-home a.ft-tone--terracota:hover, .ft-home a.ft-pick-top:hover { color: #FFFFFF !important; }
.ft-home a.ft-btn--ink:hover, .ft-home a.ft-btn--outline:hover { color: #FCFAF5 !important; }
.ft-home a.ft-nav__account:hover, .ft-home .ft-crumbs a:hover, .ft-home a.ft-chips__clear:hover, .ft-home a.ft-pdp__help:hover,
.ft-home a.ft-auth__help:hover, .ft-home a.ft-summary__help:hover, .ft-home .ft-checkout__lead a:hover { color: var(--ft-sun) !important; }
.ft-home a.ft-link:hover, .ft-home .ft-muted a:hover, .ft-home .ft-form__switch a:hover, .ft-home .ft-check a:hover,
.ft-home .ft-law__box a:hover, .ft-home a.ft-line__remove:hover, .ft-home a.ft-form__link:hover, .ft-home a.add-address-button:hover { color: var(--ft-clay) !important; }

/* ---------- Checkout: aprovechar el ancho y legibilidad ---------- */
.ft-checkout { font-size: 16px; }
/* <accordian> no está registrado en esta página (pasa igual con Velocity): queda como
   elemento en línea y encoge todo el bloque de datos a media columna. */
.ft-checkout accordian { display: block; width: 100%; }
.ft-checkout .form-container { width: 100%; }
.ft-checkout accordian > [slot="body"] {
    display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; width: 100%; padding: 0 !important; float: none;
}
.ft-checkout accordian > [slot="body"] > * { grid-column: auto; width: auto; max-width: none; flex: none; padding: 0; margin: 0 !important; }
.ft-checkout accordian > [slot="body"] > .address-container,
.ft-checkout accordian > [slot="body"] > .form-field:has([name*="[address1]"]),
.ft-checkout accordian > [slot="body"] > .form-field:has([name*="[company_name]"]),
.ft-checkout accordian > [slot="body"] > div:not(.form-field):not(.address-container),
.ft-checkout accordian > [slot="body"] > span { grid-column: 1 / -1; }
.ft-checkout .form-field { display: flex; flex-direction: column; gap: 6px; }
.ft-checkout .form-field .control, .ft-checkout .form-field select { width: 100%; }
.ft-checkout label.mandatory::after { color: var(--ft-clay); }
/* "Volver" a las direcciones guardadas: enlace, no botón. */
.ft-checkout accordian > [slot="body"] > a.theme-btn {
    grid-column: 1 / -1; justify-self: start; float: none; height: auto; padding: 0 !important;
    background: transparent !important; color: var(--ft-clay) !important; font-size: 15px; text-decoration: underline; text-underline-offset: 3px;
}
.ft-checkout accordian > [slot="body"] > a.theme-btn::before { content: '← '; }
.ft-checkout .control-error, .ft-checkout .form-field .control-error { display: block; margin-top: 2px; font-size: 14px !important; font-weight: 600; color: var(--ft-clay) !important; }

.ft-checkout .shipping-notice .text-info { font-size: 15px; }
.ft-checkout .payment-method-header { display: block; }
.ft-checkout .payment-method-title { display: block; text-align: left; }
.ft-checkout .payment-method-description { font-size: 15px; }
.ft-checkout .payment-method-label { height: 100%; }
.ft-checkout .address-holder ul { font-size: 15px; }
.ft-checkout .card-title { font-size: 17px; }

/* Puntos y cupón. */
.ft-checkout .discount-control form { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; }
.ft-checkout .discount-control .control-group { flex: 1 1 180px; margin: 0; }
.ft-checkout .discount-control .control { width: 100%; }
.ft-checkout .points-section .text-info { flex-basis: 100%; margin: 4px 0 0; color: var(--ft-leaf) !important; font-size: 15px; }
.ft-checkout .applied-coupon-details { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; padding-top: 12px; border-top: 1px solid #E3DACC; font-size: 15px; }
.ft-checkout .applied-coupon-details label { margin: 0; font-weight: 600; color: #4A443D; }
.ft-checkout .applied-coupon-details .rango-close { cursor: pointer; color: var(--ft-clay); }

/* Resumen: textos un poco más grandes. */
.ft-checkout .modern-summary-card .row { font-size: 16px; }

@media (max-width: 760px) {
    .ft-checkout accordian > [slot="body"] { grid-template-columns: minmax(0, 1fr); }
}

/* Portada: la nota "Destacado de la semana" ya no pisa la foto. */
.ft-stage__note { left: -6%; top: -2%; }
/* .form-container del checkout es una grilla de 2 columnas: el bloque de datos debe ocupar ambas. */
.ft-checkout .form-container > accordian, .ft-checkout .form-container > * { grid-column: 1 / -1; }
/* Cupón y puntos: el campo a lo ancho y el botón debajo (si no, el texto de ayuda se corta). */
.ft-checkout .discount-control .control-group { flex-basis: 100%; }
.ft-checkout .form-field label { margin: 0; }
/* Pantallas anchas: el contenido crece un poco para no dejar tanto margen vacío. */
@media (min-width: 1800px) {
    .ft-wrap, .ft-checkout .container { max-width: 1560px; }
}

/* =====================================================================
 * Instagram en la portada: es el componente <instagram-feed> de Velocity
 * (blade shop::home.instagram-feed). Sus estilos son "scoped" y se inyectan
 * después, por eso aquí van con .ft-home .ft-ig delante.
 * ===================================================================== */
.ft-home .ft-ig { padding-top: 24px; padding-bottom: 64px; }
.ft-home .ft-ig .ig-feed { max-width: none; margin: 0; padding: 0; }
.ft-home .ft-ig .ig-header { margin-bottom: 22px; align-items: flex-end; }
.ft-home .ft-ig .ig-header__title { font-family: var(--ft-hand); font-weight: 700; font-size: 38px; line-height: 1; color: var(--ft-clay); }
.ft-home .ft-ig .ig-glyph { display: none; }
.ft-home .ft-ig .ig-follow__count { font-size: 15px; color: var(--ft-muted); }
.ft-home .ft-ig .ig-follow__count b { font-family: var(--ft-display); font-size: 18px; color: var(--ft-ink); }
.ft-home .ft-ig .ig-follow__btn {
    height: 48px; padding: 0 22px; border-radius: 999px; background: var(--ft-ink); color: #FCFAF5;
    font-weight: 700; font-size: 15px; box-shadow: none;
}
.ft-home .ft-ig .ig-follow__btn:hover { background: var(--ft-ink); color: #FCFAF5 !important; box-shadow: 0 10px 24px rgba(30, 27, 24, .3); }
.ft-home .ft-ig .ig-grid { gap: 16px; }
.ft-home .ft-ig .ig-post { border-radius: 24px; box-shadow: none; background: var(--ft-paper); }
.ft-home .ft-ig .ig-overlay {
    gap: 10px; padding: 18px; justify-content: flex-end; align-items: flex-start; text-align: left;
    background: linear-gradient(to top, rgba(30, 27, 24, .88) 0%, rgba(30, 27, 24, .35) 55%, rgba(30, 27, 24, 0) 100%);
}
.ft-home .ft-ig .ig-stats { font-size: 15px; }
.ft-home .ft-ig .ig-cta { order: 3; font-size: 13px; padding: 7px 14px; border: 0; background: var(--ft-sun); color: var(--ft-ink); }
.ft-home .ft-ig .ig-caption { font-size: 14px; line-height: 1.4; max-height: 60px; opacity: 1; }
.ft-home .ft-ig .ig-badge { top: 12px; right: 12px; }

@media (max-width: 760px) {
    .ft-home .ft-ig { padding-top: 8px; padding-bottom: 44px; }
    .ft-home .ft-ig .ig-header__title { font-size: 30px; }
    .ft-home .ft-ig .ig-follow__count { display: none; }
    .ft-home .ft-ig .ig-follow__btn { height: 44px; padding: 0 18px; }
    .ft-home .ft-ig .ig-post { border-radius: 18px; }
    /* En el teléfono el overlay queda siempre visible: solo un degradé abajo para leer los números. */
    .ft-home .ft-ig .ig-overlay { background: linear-gradient(to top, rgba(30, 27, 24, .65) 0%, rgba(30, 27, 24, 0) 45%); }
}

/* =====================================================================
 * Portal de cliente (.ft-account). El marco de Velocity traía sus estilos
 * (verde, bf-*) en un <style> propio; aquí van los mismos nombres de clase
 * con la paleta del tema, para que perfil, compras, direcciones, puntos,
 * reseñas y deseos queden en línea sin tocar sus vistas.
 * ===================================================================== */
.ft-account__head { position: relative; display: flex; flex-direction: column; gap: 22px; padding-top: 20px; padding-bottom: 40px; }
.ft-account__hello { display: flex; align-items: center; gap: 18px; }
.ft-account__avatar {
    flex: 0 0 auto; width: 68px; height: 68px; border-radius: 999px; background: var(--ft-sun); color: var(--ft-ink);
    display: flex; align-items: center; justify-content: center; font-family: var(--ft-display); font-weight: 800; font-size: 30px;
}
.ft-account__hello .ft-hand { font-size: 32px; }
.ft-account__title { font-family: var(--ft-display); font-weight: 700; font-size: clamp(38px, 5vw, 60px); line-height: .95; letter-spacing: -.04em; }
.ft-account__tabs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ft-account__logout { margin-left: auto; }
.ft-account__main { padding-top: 32px; padding-bottom: 64px; }

.ft-account .account-layout { color: #3F3A34; font-size: 16px; }
.ft-account .account-layout .account-content { width: 100%; }

/* Encabezados de sección de las páginas internas */
.ft-account .account-head, .ft-account .reviews-head {
    display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding-bottom: 14px; margin-bottom: 18px; border-bottom: 1px solid #E3DACC;
}
.ft-account .account-head .account-heading, .ft-account .reviews-head .account-heading { font-family: var(--ft-display); font-size: 26px; font-weight: 700; color: var(--ft-ink); letter-spacing: -.01em; }
.ft-account .account-head .account-action { margin-left: auto; }
.ft-account .account-head .back-icon, .ft-account .account-head .rango-arrow-left { display: none; }

/* Botones de Velocity con la forma del tema */
.ft-account .account-layout a.theme-btn, .ft-account .account-layout button.theme-btn, .ft-account .account-layout .theme-btn {
    display: inline-flex; align-items: center; justify-content: center; height: 46px; padding: 0 22px !important;
    border: 0 !important; border-radius: 999px !important; background: var(--ft-ink) !important; color: #FCFAF5 !important;
    font-weight: 700; font-size: 15px; text-decoration: none; cursor: pointer; transition: transform .2s var(--ft-ease), box-shadow .2s;
}
.ft-account .account-layout .theme-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(30, 27, 24, .25); color: #FCFAF5 !important; }
.ft-account .account-layout .theme-btn.light { background: transparent !important; color: var(--ft-ink) !important; box-shadow: inset 0 0 0 1.5px var(--ft-ink) !important; }

/* Tarjetas y contenedores */
.ft-account .account-table-content, .ft-account .bf-card, .ft-account .reviews-container, .ft-account .wishlist-container, .ft-account .bf-empty {
    background: var(--ft-paper); border: 0; border-radius: 28px; padding: 24px; box-shadow: none; margin-bottom: 16px;
}
.ft-account .reviews-container, .ft-account .wishlist-container { padding: 8px 24px; }
.ft-account .reviews-container > .row, .ft-account .wishlist-container > .row { padding: 18px 0; border-bottom: 1px solid #EFE8DC; }
.ft-account .reviews-container > .row:last-child, .ft-account .wishlist-container > .row:last-child { border-bottom: 0; }
.ft-account .bf-section-title { font-family: var(--ft-display); font-size: 19px; font-weight: 700; color: var(--ft-ink); margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid #EFE8DC; }
.ft-account .bf-muted, .ft-account .empty, .ft-account .no-result { color: var(--ft-muted); }
.ft-account .empty, .ft-account .no-result, .ft-account .bf-empty { text-align: center; padding: 40px 20px; }
.ft-account .bf-grid-cards, .ft-account .account-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.ft-account .bf-badge { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 999px; font-size: 13px; font-weight: 700; }
.ft-account .bf-link { color: var(--ft-clay); font-weight: 700; font-size: 15px; text-decoration: underline; text-underline-offset: 3px; }
.ft-account .bf-link.danger { color: #B3261E; }
.ft-account .bf-hero { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; border: 0; border-radius: 28px; background: var(--ft-sun); padding: 24px 28px; margin-bottom: 16px; }
.ft-account .bf-hero .n { font-family: var(--ft-display); font-size: 48px; font-weight: 800; color: var(--ft-ink); line-height: 1; letter-spacing: -.03em; }
.ft-account .bf-hero .l { color: #4A443D; font-size: 16px; }

/* Tablas (compras, puntos, descargables) */
.ft-account table.bf-table, .ft-account .account-table-content table { width: 100%; border-collapse: collapse; }
.ft-account table.bf-table th, .ft-account .account-table-content table th {
    text-align: left; font-size: 13px; font-weight: 700; color: var(--ft-muted); padding: 10px 10px; border-bottom: 1px solid #EFE8DC; text-transform: none; letter-spacing: 0;
}
.ft-account table.bf-table td, .ft-account .account-table-content table td { padding: 14px 10px; border-bottom: 1px solid #EFE8DC; font-size: 15px; vertical-align: middle; }
.ft-account table.bf-table tr:last-child td, .ft-account .account-table-content table tr:last-child td { border-bottom: 0; }
.ft-account table.bf-table tbody tr:hover td { background: #FBF8F2; }

/* Direcciones */
.ft-account .bf-addr-card, .ft-account .address, .ft-account .address-holder { position: relative; background: var(--ft-paper); border: 0; border-radius: 24px; padding: 20px; }
.ft-account .bf-addr-card h5 { font-family: var(--ft-display); font-size: 18px; font-weight: 700; color: var(--ft-ink); margin: 0 0 8px; }
.ft-account .bf-addr-card ul { list-style: none; padding: 0; margin: 0 0 14px; color: #3F3A34; font-size: 15px; line-height: 1.6; }
.ft-account .bf-addr-card .bf-actions { display: flex; gap: 18px; padding-top: 12px; border-top: 1px solid #EFE8DC; }

/* Formularios (editar perfil, direcciones) */
.ft-account form .account-table-content { max-width: 820px; }
@media (min-width: 640px) {
    .ft-account form .account-table-content { display: grid; grid-template-columns: 1fr 1fr; column-gap: 22px; align-items: start; }
    .ft-account form .account-table-content > button, .ft-account form .account-table-content > .theme-btn,
    .ft-account form .account-table-content > .page-action, .ft-account form .account-table-content > .button-group,
    .ft-account form .account-table-content > .control-group.d-flex { grid-column: 1 / -1; }
}
.ft-account .account-table-content > .row, .ft-account .account-table-content > .control-group { margin: 0 0 16px; }
.ft-account .account-table-content label { display: block; font-size: 14px; font-weight: 700; color: var(--ft-ink); margin: 0 0 6px; padding: 0; }
.ft-account .account-table-content label.mandatory::after { content: ' *'; color: var(--ft-clay); }
.ft-account .account-table-content input[type="text"], .ft-account .account-table-content input[type="email"],
.ft-account .account-table-content input[type="password"], .ft-account .account-table-content input[type="date"],
.ft-account .account-table-content input[type="number"], .ft-account .account-table-content input[type="tel"],
.ft-account .account-table-content select, .ft-account .account-table-content textarea {
    width: 100%; height: 50px; padding: 0 16px; border: 0; border-radius: 14px; background: var(--ft-cream); color: var(--ft-ink);
    font: inherit; font-size: 16px; box-shadow: inset 0 0 0 1.5px #E3DACC; box-sizing: border-box;
}
.ft-account .account-table-content textarea { height: auto; min-height: 110px; padding: 12px 16px; }
.ft-account .account-table-content input:focus, .ft-account .account-table-content select:focus, .ft-account .account-table-content textarea:focus {
    outline: none; background: var(--ft-paper); box-shadow: inset 0 0 0 2px var(--ft-ink), 0 0 0 4px rgba(246, 212, 107, .6);
}
.ft-account .account-table-content .select-icon-container { display: none; }
.ft-account .account-table-content .has-error input, .ft-account .account-table-content .has-error select { box-shadow: inset 0 0 0 2px var(--ft-clay); }
.ft-account .account-table-content .control-error { display: block; color: var(--ft-clay); font-size: 14px; font-weight: 600; margin-top: 4px; }
/* La barra de chips móvil de Velocity ya no hace falta: las pestañas están arriba. */
.ft-account .bf-mnav { display: none !important; }

/* ---------- Perfil ---------- */
.ft-profile { display: flex; flex-direction: column; gap: 16px; }
.ft-profile__tiles { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 14px; }
.ft-profile__tile {
    min-height: 190px; padding: 24px; border-radius: 28px; display: flex; flex-direction: column; gap: 4px;
    transition: transform .25s var(--ft-ease), box-shadow .25s var(--ft-ease);
}
.ft-profile__tile:hover { transform: translateY(-4px); box-shadow: 0 20px 36px rgba(30, 27, 24, .12); }
.ft-profile__tile .ft-hand { font-size: 28px; }
.ft-profile__tile strong { font-family: var(--ft-display); font-weight: 700; font-size: 24px; line-height: 1.1; color: var(--ft-ink); }
.ft-profile__tile > span:not(.ft-hand) { font-size: 15px; }
.ft-profile__tile-more { margin-top: auto; padding-top: 10px; font-weight: 700; color: var(--ft-ink); }
.ft-profile__tile--points { background: var(--ft-ink); color: var(--ft-muted-dark); }
.ft-profile__tile--points .ft-hand { color: var(--ft-sun); }
.ft-profile__tile--points strong { font-weight: 800; font-size: 64px; letter-spacing: -.04em; color: #FCFAF5; }
.ft-profile__card { background: var(--ft-paper); border-radius: 28px; padding: 26px 28px; }
.ft-profile__card-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 18px; }
.ft-profile__card-title { font-family: var(--ft-display); font-weight: 700; font-size: 24px; color: var(--ft-ink); margin: 0; }
.ft-profile__edit { height: 46px; padding: 0 22px; font-size: 15px; }
.ft-profile__fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 24px; margin: 0; }
.ft-profile__fields > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-bottom: 14px; border-bottom: 1px solid #EFE8DC; }
.ft-profile__fields dt { font-size: 14px; color: var(--ft-muted); font-weight: 500; }
.ft-profile__fields dd { margin: 0; font-family: var(--ft-display); font-weight: 600; font-size: 19px; color: var(--ft-ink); overflow-wrap: anywhere; }
.ft-profile__hint { margin-top: 16px; }
.ft-profile__danger { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; background: transparent; box-shadow: inset 0 0 0 1.5px #E3C9BE; }
.ft-profile__danger .ft-profile__card-title { font-size: 19px; }
.ft-profile__danger p { margin: 4px 0 0; }
.ft-profile__delete { height: 46px; padding: 0 20px; font-size: 15px; color: #B3261E; box-shadow: inset 0 0 0 1.5px #B3261E; }
.ft-profile__delete:hover { background: #B3261E; color: #FFFFFF; }

@media (max-width: 900px) {
    .ft-profile__tiles { grid-template-columns: 1fr 1fr; }
    .ft-profile__tile--points { grid-column: 1 / -1; min-height: 0; }
    .ft-profile__fields { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
    .ft-account__head { gap: 16px; padding-top: 12px; padding-bottom: 26px; }
    .ft-account__avatar { width: 54px; height: 54px; font-size: 24px; }
    .ft-account__hello .ft-hand { font-size: 26px; }
    .ft-account__tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    .ft-account__tabs > * { flex: 0 0 auto; white-space: nowrap; }
    .ft-account__main { padding-top: 22px; }
    .ft-profile__tiles { grid-template-columns: 1fr; }
    .ft-profile__tile { min-height: 0; padding: 20px; }
    .ft-profile__tile--points strong { font-size: 52px; }
    .ft-profile__card { padding: 20px; border-radius: 24px; }
    .ft-profile__fields { grid-template-columns: 1fr; gap: 12px; }
    .ft-account .account-table-content, .ft-account .bf-card { padding: 18px; border-radius: 22px; }
    .ft-account table.bf-table, .ft-account .account-table-content table { display: block; overflow-x: auto; }
}
/* Compras (lista del portal): tarjetas y textos del tema; los colores de estado se mantienen. */
.ft-account .bf-order-card { border: 0 !important; border-radius: 22px !important; padding: 18px 22px !important; background: var(--ft-paper) !important; box-shadow: none !important; transition: transform .2s var(--ft-ease), box-shadow .2s; }
.ft-account .bf-order-card:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(30, 27, 24, .08) !important; }
.ft-account .bf-o-id { font-family: var(--ft-display); font-weight: 700; font-size: 18px; color: var(--ft-ink); }
.ft-account .bf-o-meta { font-size: 14px; color: var(--ft-muted); }
.ft-account .bf-o-total { font-family: var(--ft-display); font-weight: 800; font-size: 20px; color: var(--ft-ink) !important; }
.ft-account .bf-pager a, .ft-account .bf-pager span { font-family: var(--ft-display); font-weight: 700; }
/* Formularios de cuenta: las columnas de Bootstrap traen 15 px de relleno que corren el campo respecto de su etiqueta. */
.ft-account .account-table-content .row > [class*="col-"] { padding-left: 0; padding-right: 0; }
.ft-account .account-table-content .row { margin-left: 0; margin-right: 0; }

/* =====================================================================
 * Filas que se deslizan con el dedo (categorías, filtros, pestañas de cuenta):
 * quedan dentro del margen y un desvanecido en el borde avisa que hay más.
 * futrono.js marca .is-start / .is-end según el scroll y centra la activa.
 * ===================================================================== */
@media (max-width: 760px) {
    .ft-nav__links, .ft-chips, .ft-account__tabs {
        -webkit-mask-image: linear-gradient(to right, transparent 0, #000 0, #000 calc(100% - 36px), transparent 100%);
                mask-image: linear-gradient(to right, transparent 0, #000 0, #000 calc(100% - 36px), transparent 100%);
    }
    .ft-nav__links.is-scrolled, .ft-chips.is-scrolled, .ft-account__tabs.is-scrolled {
        -webkit-mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 calc(100% - 36px), transparent 100%);
                mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 calc(100% - 36px), transparent 100%);
    }
    .ft-nav__links.is-scrolled.is-end, .ft-chips.is-scrolled.is-end, .ft-account__tabs.is-scrolled.is-end {
        -webkit-mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 100%);
                mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 100%);
    }
    .ft-nav__links.is-end:not(.is-scrolled), .ft-chips.is-end:not(.is-scrolled), .ft-account__tabs.is-end:not(.is-scrolled) { -webkit-mask-image: none; mask-image: none; }
    .ft-nav__links::-webkit-scrollbar, .ft-chips::-webkit-scrollbar, .ft-account__tabs::-webkit-scrollbar { display: none; }
    .ft-chips .ft-chip, .ft-account__tabs .ft-chip { height: 40px; padding: 0 15px; font-size: 14px; }
    .ft-account__tabs .ft-chips__clear { height: 40px; font-size: 14px; }
}
.ft-sort label { margin: 0; }
/* Portada en el teléfono: escenario más compacto. */
@media (max-width: 760px) {
    .ft-stage__body { gap: 20px; }
    .ft-stage__copy { gap: 14px; }
    .ft-stage__title { font-size: clamp(36px, 10vw, 46px); }
    .ft-stage__copy .ft-row { gap: 10px; }
    .ft-stage__copy .ft-row .ft-btn { flex: 1 1 100%; height: 52px; font-size: 16px; }
    .ft-stage__product { min-height: 0; padding: 34px 0 30px; }
    .ft-stage__product .ft-plate { width: min(240px, 62vw); border-radius: 30px; padding: 20px; }
    .ft-stage__shadow { bottom: 6px; width: 200px; margin-left: -100px; }
    /* La nota queda arriba de la foto, dentro de la pantalla. */
    .ft-stage__note { left: 0; top: 0; font-size: 24px; }
    .ft-specs { padding-bottom: 28px; }
}
@media (max-width: 760px) {
    /* Datos del destacado: el nombre a lo ancho; precio y retiro debajo. */
    .ft-specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ft-specs > div:first-child { grid-column: 1 / -1; }
    .ft-specs > div:not(:first-child) { border-top-color: transparent; padding-top: 10px; }
    .ft-specs dd { font-size: 18px; }
}
@media (max-width: 760px) { .ft-need { height: 92px; font-size: 20px; } }

/* =====================================================================
 * Diálogo de confirmación del tema (reemplaza window.confirm)
 * ===================================================================== */
.ft-dialog {
    width: min(440px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: 32px;
    background: var(--ft-cream); color: var(--ft-ink); box-shadow: 0 40px 90px rgba(0, 0, 0, .45);
    font-family: var(--ft-body);
}
.ft-dialog::backdrop { background: rgba(30, 27, 24, .6); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.ft-dialog[open] { animation: ft-dialog-in .28s var(--ft-ease); }
@keyframes ft-dialog-in { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: none; } }
.ft-dialog__box { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 0; padding: 30px 28px 26px; text-align: center; }
.ft-dialog__img { width: 88px; height: 88px; padding: 8px; border-radius: 22px; background: var(--ft-paper); transform: rotate(-4deg); margin-bottom: 4px; }
.ft-dialog__img[hidden] { display: none; }
.ft-dialog__title { margin: 0; font-family: var(--ft-display); font-weight: 700; font-size: 26px; line-height: 1.1; letter-spacing: -.02em; }
.ft-dialog__text { margin: 0; font-size: 16px; color: #4A443D; }
.ft-dialog__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; margin-top: 12px; }
.ft-dialog__actions .ft-btn { width: 100%; height: 52px; padding: 0 16px; font-size: 16px; }
.ft-dialog .ft-btn--outline:hover { color: #FCFAF5; }
.ft-line__remove.is-loading { opacity: .5; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .ft-dialog[open] { animation: none; } }
/* Centrado explícito (algún estilo global le quitaba el margin:auto del navegador). */
.ft-dialog { position: fixed; inset: 0; margin: auto; height: fit-content; max-height: calc(100vh - 32px); overflow: auto; }
/* En el teléfono, como hoja que sube desde abajo (cerca del pulgar). */
@media (max-width: 760px) {
    .ft-dialog { width: 100%; max-width: none; margin: auto 0 0; border-radius: 28px 28px 0 0; padding-bottom: env(safe-area-inset-bottom); }
    .ft-dialog[open] { animation: ft-sheet-in .3s var(--ft-ease); }
    @keyframes ft-sheet-in { from { transform: translateY(100%); } to { transform: none; } }
}

/* Avisos: el de Velocity (arriba a la derecha) no se usa en las páginas del tema;
   futrono.js pasa sus mensajes al aviso de abajo. */
html:has(.ft-home) #alert-container { display: none !important; }
.ft-toast { display: flex; align-items: center; gap: 10px; }
.ft-toast::before { content: ''; flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; background: #6FCF7F; }
.ft-toast.is-error { background: var(--ft-clay); }
.ft-toast.is-error::before { background: #FFFFFF; }
.ft-toast.is-info::before { background: var(--ft-sun); }

/* Mis opiniones */
.ft-reviews { display: flex; flex-direction: column; gap: 12px; }
.ft-review { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 14px 18px; padding: 18px 22px 18px 18px; border-radius: 26px; background: var(--ft-paper); }
.ft-review form { display: none; }
.ft-review__img { flex: 0 0 auto; width: 88px; height: 88px; padding: 8px; border-radius: 20px; }
.ft-review__body { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.ft-review__top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.ft-review__product { font-family: var(--ft-display); font-weight: 700; font-size: 19px; color: var(--ft-ink); }
.ft-review__product:hover { text-decoration: underline; text-underline-offset: 3px; }
.ft-review__status { height: 26px; padding: 0 10px; border-radius: 999px; display: inline-flex; align-items: center; font-size: 13px; font-weight: 700; }
.ft-review__status.is-pending { background: #FBEFC4; color: #6B5A1E; }
.ft-review__status.is-approved { background: #DCEFE0; color: var(--ft-leaf); }
.ft-review__status.is-rejected { background: #F3DED2; color: var(--ft-clay); }
.ft-review__stars { font-size: 18px; letter-spacing: 2px; color: #E3DACC; }
.ft-review__stars .is-on { color: #E8A93B; }
.ft-review__title { margin: 2px 0 0; font-family: var(--ft-display); font-size: 17px; font-weight: 700; color: var(--ft-ink); }
.ft-review__comment { margin: 0; font-size: 16px; color: #3F3A34; }
.ft-review__date { font-size: 14px; color: var(--ft-muted); }
.ft-review__remove { align-self: center; }
@media (max-width: 760px) {
    .ft-review { padding: 14px; gap: 10px 14px; }
    .ft-review__img { width: 64px; height: 64px; border-radius: 16px; }
    .ft-review__body { flex-basis: calc(100% - 80px); }
    .ft-review__remove { margin-left: 78px; }
}
.ft-account .reviews-head .account-action { margin-left: auto; }
/* Grillas de 4 en la ficha (relacionados / te puede gustar): sin huecos al final de la fila. */
.ft-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ft-pdp__section .ft-grid { padding-top: 16px; }
@media (max-width: 1100px) { .ft-grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .ft-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ft-pdp__section--last { padding-bottom: 72px; }
.ft-cartp__upsells { padding-bottom: 32px; }
.ft-cartp__upsells .ft-heading { margin-bottom: 4px; }

/* =====================================================================
 * Páginas CMS (.ft-cms): el HTML del admin trae clases de Bootstrap; se
 * visten aquí sin tocar el contenido.
 * ===================================================================== */
.ft-cms__main { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 28px; padding-top: 36px; padding-bottom: 72px; }
.ft-cms__nav { flex: 0 0 250px; position: sticky; top: 24px; display: flex; flex-direction: column; gap: 4px; padding: 20px; border-radius: 28px; background: var(--ft-paper); }
.ft-cms__nav-title { font-family: var(--ft-hand); font-weight: 700; font-size: 26px; color: var(--ft-clay); margin: 0 0 6px 10px; }
.ft-cms__nav a { padding: 10px 12px; border-radius: 14px; font-weight: 600; color: #3F3A34; transition: background-color .15s; }
.ft-cms__nav a:hover { background: var(--ft-cream); }
.ft-cms__nav a.is-on { background: var(--ft-ink); color: #FCFAF5 !important; }
.ft-cms__nav .ft-cms__nav-wa { margin-top: 8px; padding-top: 14px; border-top: 1px solid #EFE8DC; border-radius: 0; color: var(--ft-clay); font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }
.ft-cms__body { flex: 1 1 560px; min-width: 0; font-size: 17px; line-height: 1.65; color: #3F3A34; }

/* Contenedores de Bootstrap: el ancho lo pone el tema. */
.ft-cms__body .container, .ft-cms__body .container-fluid, .ft-cms__body .static-container { max-width: none; width: 100%; padding: 0 !important; margin: 0; }
.ft-cms__body .row { margin-left: -8px; margin-right: -8px; }
.ft-cms__body .row > [class*="col"] { padding-left: 8px; padding-right: 8px; }

/* Tipografía */
.ft-cms__body h1, .ft-cms__body h2, .ft-cms__body h3 { font-family: var(--ft-display) !important; font-weight: 700 !important; color: var(--ft-ink) !important; letter-spacing: -.01em; border: 0 !important; padding: 0 !important; }
.ft-cms__body h1 { font-size: 32px !important; margin: 28px 0 12px !important; }
.ft-cms__body h2 { font-size: 26px !important; margin: 28px 0 12px !important; }
.ft-cms__body h3 { font-size: 21px !important; margin: 22px 0 10px !important; }
.ft-cms__body h4, .ft-cms__body h5, .ft-cms__body h6 { font-family: var(--ft-display); font-weight: 700 !important; color: var(--ft-ink) !important; font-size: 18px; margin: 0 0 6px; }
.ft-cms__body p { margin: 0 0 12px; line-height: 1.65 !important; }
.ft-cms__body p.font-weight-bold:not(.small), .ft-cms__body p.fw-bold:not(.small) { font-family: var(--ft-display); font-size: 22px; color: var(--ft-ink) !important; margin-top: 8px; }
.ft-cms__body .text-secondary, .ft-cms__body .text-muted { color: #5E574F !important; }
.ft-cms__body .text-dark { color: var(--ft-ink) !important; }
.ft-cms__body .small, .ft-cms__body small { font-size: 15px; }
.ft-cms__body p.small.font-weight-bold { font-size: 13px; letter-spacing: .02em; color: var(--ft-clay) !important; text-transform: none; }
.ft-cms__body a:not(.ft-btn):not(.btn) { color: var(--ft-clay) !important; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.ft-cms__body ul, .ft-cms__body ol { padding-left: 22px; margin: 0 0 14px; }
.ft-cms__body li { margin-bottom: 6px; }
.ft-cms__body img { max-width: 100%; height: auto; }
.ft-cms__body img.img-fluid, .ft-cms__body img.rounded, .ft-cms__body img.w-100 { border-radius: 24px !important; }
.ft-cms__body table { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; margin-bottom: 16px; }
.ft-cms__body th, .ft-cms__body td { padding: 10px 12px; border-bottom: 1px solid #EFE8DC; text-align: left; }

/* Bloques: tarjetas blancas, fondos claros en crema */
.ft-cms__body .card { border: 0 !important; border-radius: 24px !important; background: var(--ft-paper); box-shadow: none; }
.ft-cms__body .card-body { padding: 22px !important; }
.ft-cms__body .bg-light { background: var(--ft-paper) !important; border-radius: 28px !important; padding: 26px !important; }
.ft-cms__body .bg-light .card { background: var(--ft-cream); }
.ft-cms__body .alert { border: 0; border-radius: 20px; background: #FBEFC4; color: #4A443D; }
.ft-cms__body hr { border: 0; border-top: 1px solid #E3DACC; margin: 24px 0; }
.ft-cms__body .btn, .ft-cms__body button[type="submit"], .ft-cms__body input[type="submit"] {
    height: 50px; padding: 0 24px; border: 0 !important; border-radius: 999px !important; background: var(--ft-ink) !important; color: #FCFAF5 !important; font-weight: 700;
}
/* Formularios (contacto) */
.ft-cms__body input[type="text"], .ft-cms__body input[type="email"], .ft-cms__body input[type="tel"], .ft-cms__body textarea, .ft-cms__body select, .ft-cms__body .form-control, .ft-cms__body .control {
    width: 100%; min-height: 50px; padding: 12px 16px; border: 0 !important; border-radius: 14px !important; background: var(--ft-paper); color: var(--ft-ink);
    font: inherit; font-size: 16px; box-shadow: inset 0 0 0 1.5px #E3DACC !important;
}
.ft-cms__body input:focus, .ft-cms__body textarea:focus, .ft-cms__body select:focus { outline: none; box-shadow: inset 0 0 0 2px var(--ft-ink), 0 0 0 4px rgba(246, 212, 107, .6) !important; }
.ft-cms__body label { font-weight: 700; font-size: 14px; color: var(--ft-ink); }

@media (max-width: 900px) {
    .ft-cms__nav { position: static; flex: 1 1 100%; flex-direction: row; flex-wrap: nowrap; overflow-x: auto; gap: 6px; padding: 0; background: transparent; border-radius: 0; scrollbar-width: none; }
    .ft-cms__nav-title, .ft-cms__nav .ft-cms__nav-wa { display: none; }
    .ft-cms__nav a { flex: 0 0 auto; white-space: nowrap; height: 40px; display: inline-flex; align-items: center; padding: 0 15px; border-radius: 999px; background: var(--ft-paper); font-size: 14px; }
    .ft-cms__main { gap: 18px; padding-top: 22px; }
    .ft-cms__body { font-size: 16px; }
    .ft-cms__body .bg-light { padding: 18px !important; border-radius: 22px !important; }
}
.ft-cms__body iframe { max-width: 100%; border: 0; border-radius: 24px; }
.ft-cms__body input[type="file"] { padding: 8px 12px; }

/* =====================================================================
 * Pie de página (.ft-footer)
 * ===================================================================== */
.ft-footer { background: var(--ft-ink); color: var(--ft-muted-dark); border-radius: 48px 48px 0 0; margin-top: 0; font-size: 15px; line-height: 1.55; }
.ft-footer *, .ft-footer *::before, .ft-footer *::after { box-sizing: border-box; }
.ft-footer :where(h2, p, dl, dd, ul, ol) { margin: 0; padding: 0; }
.ft-footer a:not(.ft-btn) { color: inherit; text-decoration: none; }
.ft-footer a:hover { color: #FCFAF5 !important; }
.ft-footer a.ft-btn--light:hover { color: var(--ft-ink) !important; }
.ft-footer a.ft-btn--clay:hover { color: #FFFFFF !important; }
.ft-footer a:focus-visible, .ft-footer button:focus-visible, .ft-footer input:focus-visible { outline: 3px solid var(--ft-sun); outline-offset: 3px; }
.ft-footer__inner { padding-top: 48px; padding-bottom: 28px; display: flex; flex-direction: column; gap: 40px; }

.ft-footer__cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; padding-bottom: 36px; border-bottom: 1px solid var(--ft-ink-line); }
.ft-footer__cta .ft-hand { font-size: 34px; }
.ft-footer__cta-title { font-family: var(--ft-display); font-weight: 700; font-size: clamp(26px, 3vw, 36px); line-height: 1.05; letter-spacing: -.03em; color: #FCFAF5; margin-top: 4px; }

.ft-footer__cols { display: grid; grid-template-columns: 1.3fr 1fr 1.1fr 1.3fr; gap: 32px 40px; }
.ft-footer__title { font-family: var(--ft-display); font-weight: 700; font-size: 18px; color: #FCFAF5; margin-bottom: 14px; }

.ft-footer__logo { display: inline-block; margin-bottom: 14px; }
.ft-footer__logo img { height: 46px; width: auto; filter: invert(1); }
.ft-footer__logo span { font-family: var(--ft-display); font-weight: 700; font-size: 22px; color: #FCFAF5; }
.ft-footer__about p { margin-bottom: 10px; }
.ft-footer__social { display: flex; gap: 10px; margin-top: 16px; }
.ft-footer__social a { width: 44px; height: 44px; border-radius: 999px; background: var(--ft-ink-2); color: #FCFAF5; display: inline-flex; align-items: center; justify-content: center; transition: transform .2s var(--ft-ease), background-color .2s; }
.ft-footer__social a:hover { transform: translateY(-2px); background: var(--ft-clay); }

/* Enlaces del admin: listas <ul><li><a> (algunas vacías) en dos columnas. */
.ft-footer__links ul { list-style: none; }
.ft-footer__links li:empty, .ft-footer__links li:has(> a:empty) { display: none; }
.ft-footer__links a { display: inline-block; padding: 5px 0; }
.ft-footer__links .row, .ft-footer__links [class*="col-"] { margin: 0; padding: 0; width: auto; max-width: none; flex: none; }

.ft-footer__contact .ft-status { margin-bottom: 14px; font-size: 13px; height: auto; min-height: 28px; padding: 5px 12px; line-height: 1.3; }
.ft-footer__contact dl { display: flex; flex-direction: column; gap: 10px; }
.ft-footer__contact dt { font-size: 13px; color: #9C9387; }
.ft-footer__contact dd { color: #E9E3DA; }

.ft-footer__news p { margin-bottom: 14px; }
.ft-footer__form { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.ft-footer__field { display: flex; align-items: center; height: 54px; padding: 0 6px 0 18px; border-radius: 999px; background: var(--ft-ink-2); box-shadow: inset 0 0 0 1px var(--ft-ink-line); }
.ft-footer__field:focus-within { box-shadow: inset 0 0 0 2px var(--ft-sun); }
.ft-footer__field input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: #FCFAF5; font: inherit; font-size: 16px; }
.ft-footer__field input::placeholder { color: #9C9387; }
.ft-footer__send { width: 42px; height: 42px; border: 0; border-radius: 999px; background: var(--ft-sun); color: var(--ft-ink); font-size: 20px; font-weight: 700; cursor: pointer; transition: transform .2s var(--ft-ease); }
.ft-footer__send:hover { transform: translateX(2px); }
.ft-footer__consent { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 1.45; color: #B8AFA3; cursor: pointer; }
.ft-footer__consent input { flex: 0 0 auto; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--ft-sun); }
.ft-footer__consent a { color: var(--ft-sun); text-decoration: underline; text-underline-offset: 3px; }

.ft-footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; padding-top: 22px; border-top: 1px solid var(--ft-ink-line); }
.ft-footer__methods { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ft-footer__methods-title { font-size: 13px; color: #9C9387; margin-right: 2px; }
.ft-footer__methods-title:not(:first-child) { margin-left: 10px; }
.ft-footer__chip { height: 30px; padding: 0 12px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--ft-ink-line); color: #E9E3DA; font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; }
.ft-footer__legal { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; font-size: 13px; }
.ft-footer__legal a { text-decoration: underline; text-underline-offset: 3px; }
.ft-footer__copy p { margin: 0; padding: 0; }
.ft-footer__copy a { color: var(--ft-sun); }

@media (max-width: 1100px) { .ft-footer__cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) {
    .ft-footer { border-radius: 32px 32px 0 0; }
    .ft-footer__inner { padding-top: 34px; gap: 28px; }
    .ft-footer__cta { padding-bottom: 26px; }
    .ft-footer__cta .ft-hand { font-size: 28px; }
    .ft-footer__cta .ft-row { width: 100%; }
    .ft-footer__cta .ft-btn { flex: 1 1 100%; height: 52px; font-size: 16px; }
    .ft-footer__cols { grid-template-columns: 1fr; gap: 26px; }
    .ft-footer__links ul { display: contents; }
    .ft-footer__links > div, .ft-footer__links .row > div { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; }
    .ft-footer__bottom { flex-direction: column; align-items: flex-start; }
}

/* Enlaces de texto del pie (consentimiento, legales, copyright): subrayados y con color. */
.ft-footer .ft-footer__consent a, .ft-footer .ft-footer__copy a { color: var(--ft-sun); text-decoration: underline; text-underline-offset: 3px; }
.ft-footer .ft-footer__legal a { text-decoration: underline; text-underline-offset: 3px; }

/* Botón "subir" de Velocity (vue-go-top, estilos en línea): con la paleta del tema. */
html:has(.ft-home) .vue-go-top {
    width: 52px !important; height: 52px !important; right: 20px !important; bottom: 96px !important;
    background-color: var(--ft-ink, #1E1B18) !important; box-shadow: 0 10px 24px rgba(30, 27, 24, .35) !important;
    background-size: 22px !important; background-position: center !important; background-repeat: no-repeat !important;
}
html:has(.ft-home) .vue-go-top:hover { background-color: #A8410E !important; }
@media (max-width: 760px) { html:has(.ft-home) .vue-go-top { width: 44px !important; height: 44px !important; right: 14px !important; } }
/* En la portada "Visítanos" ya trae WhatsApp y Cómo llegar: el cierre del pie no se repite. */
html:has(.ft-visit) .ft-footer__cta { display: none; }
html:has(.ft-home) .vue-go-top { background-color: #A8410E !important; }
html:has(.ft-home) .vue-go-top:hover { background-color: #8A350B !important; }

/* =====================================================================
 * Confirmación de compra (.ft-success)
 * ===================================================================== */
.ft-success__head { flex-direction: row; align-items: center; gap: 22px; }
.ft-success__check { flex: 0 0 auto; width: 76px; height: 76px; border-radius: 999px; background: var(--ft-leaf); color: #FFFFFF; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 10px rgba(47, 107, 58, .25); animation: ft-pop .5s var(--ft-ease); }
@keyframes ft-pop { 0% { transform: scale(.4); opacity: 0; } 70% { transform: scale(1.08); } 100% { transform: none; opacity: 1; } }
.ft-success__lead { margin-top: 10px; font-size: 17px; color: var(--ft-muted-dark); max-width: 640px; }
.ft-success__lead strong { color: #FCFAF5; }
.ft-success__main { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 32px; padding-top: 36px; padding-bottom: 64px; }
.ft-success__body { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.ft-success__card { padding: 26px 28px; border-radius: 28px; background: var(--ft-paper); }
.ft-success__title { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-family: var(--ft-display); font-weight: 700; font-size: 22px; color: var(--ft-ink); }
.ft-success__dot { width: 12px; height: 12px; border-radius: 50%; }
.ft-success__dot.is-ok { background: #3FAF55; }
.ft-success__dot.is-wait { background: #E8A93B; }
.ft-success__rows { display: grid; grid-template-columns: minmax(150px, auto) 1fr; gap: 10px 20px; margin: 0; font-size: 16px; }
.ft-success__rows dt { color: var(--ft-muted); }
.ft-success__rows dd { margin: 0; font-weight: 600; color: var(--ft-ink); overflow-wrap: anywhere; }
.ft-success__bank { box-shadow: inset 0 0 0 2px var(--ft-sun); }
.ft-success__bank-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 4px; }
.ft-success__bank-head .ft-success__title { margin: 0; }
.ft-success__copy { height: 44px; padding: 0 20px; font-size: 15px; }
.ft-success__pre { margin: 12px 0; padding: 16px 18px; border-radius: 16px; background: var(--ft-cream); font-size: 15px; line-height: 1.6; white-space: pre-wrap; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ft-ink); }
.ft-success__steps { margin: 0; padding: 0; list-style: none; counter-reset: ft-next; display: flex; flex-direction: column; gap: 14px; }
.ft-success__steps li { counter-increment: ft-next; position: relative; padding-left: 48px; font-size: 16px; color: #3F3A34; }
.ft-success__steps li::before { content: counter(ft-next); position: absolute; left: 0; top: -2px; width: 32px; height: 32px; border-radius: 999px; background: var(--ft-ink); color: #FCFAF5; display: flex; align-items: center; justify-content: center; font-family: var(--ft-display); font-weight: 800; font-size: 15px; }
.ft-success__steps strong { display: block; color: var(--ft-ink); font-family: var(--ft-display); font-size: 17px; }
.ft-success__actions { margin-top: 4px; }
.ft-success__actions .ft-btn { height: 52px; padding: 0 24px; font-size: 16px; }
.ft-success__summary { flex: 1 1 340px; }
.ft-success__items { list-style: none; margin: 0; padding: 0 0 6px; display: flex; flex-direction: column; gap: 10px; border-bottom: 1px solid var(--ft-ink-line); }
.ft-success__items li { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: baseline; font-size: 15px; padding-bottom: 10px; }
.ft-success__qty { color: var(--ft-sun); font-weight: 700; }
.ft-success__name { color: #FCFAF5; }

@media (max-width: 760px) {
    .ft-success__head { align-items: flex-start; gap: 14px; }
    .ft-success__check { width: 56px; height: 56px; box-shadow: 0 0 0 7px rgba(47, 107, 58, .25); }
    .ft-success__check svg { width: 26px; height: 26px; }
    .ft-success__card { padding: 20px; border-radius: 24px; }
    .ft-success__rows { grid-template-columns: 1fr; gap: 2px; }
    .ft-success__rows dd { margin-bottom: 8px; }
    .ft-success__actions .ft-btn { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) { .ft-success__check { animation: none; } }
/* Portada · destacados elegidos a mano (antes de "Encuentra lo que buscas"). */
.ft-showcase .ft-grid { padding-top: 4px; }
.ft-pcard__badge--new { background: var(--ft-leaf); }

/* =====================================================================
 * Portada · banners de promoción (Sliders de Velocity)
 * La imagen no se recorta (traen texto): alto según la imagen.
 * ===================================================================== */
.ft-banners { position: relative; padding-top: 32px; }
.ft-banners__track {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    border-radius: 32px; box-shadow: 0 18px 40px rgba(30, 27, 24, .12); background: var(--ft-paper);
}
.ft-banners__track::-webkit-scrollbar { display: none; }
.ft-banners__slide { flex: 0 0 100%; scroll-snap-align: start; display: block; }
.ft-banners__slide img { display: block; width: 100%; height: auto; }
a.ft-banners__slide { cursor: pointer; }
.ft-banners__arrow {
    position: absolute; top: calc(50% + 16px); transform: translateY(-50%); width: 48px; height: 48px; border: 0; border-radius: 999px;
    background: rgba(252, 250, 245, .92); color: var(--ft-ink); font-size: 28px; line-height: 1; cursor: pointer;
    box-shadow: 0 8px 20px rgba(30, 27, 24, .2); opacity: 0; transition: opacity .2s, transform .2s var(--ft-ease);
}
.ft-banners:hover .ft-banners__arrow, .ft-banners__arrow:focus-visible { opacity: 1; }
.ft-banners__arrow.is-prev { left: 48px; }
.ft-banners__arrow.is-next { right: 48px; }
.ft-banners__dots { display: flex; justify-content: center; gap: 8px; margin-top: 12px; }
.ft-banners__dots button { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 999px; background: #D9CFBF; cursor: pointer; transition: width .25s var(--ft-ease), background-color .2s; }
.ft-banners__dots button[aria-selected="true"] { width: 28px; background: var(--ft-ink); }
.ft-banners + .ft-wrap .ft-section:first-child { padding-top: 36px; }

@media (max-width: 760px) {
    .ft-banners { padding-top: 20px; }
    .ft-banners__track { border-radius: 20px; }
    .ft-banners__arrow { display: none; }
}
.ft-banners[hidden], .ft-banners__arrow[hidden], .ft-banners__dots[hidden] { display: none !important; }

/* =====================================================================
 * Portada · ritmo de fondos (oscuro / claro / oscuro / claro / pie oscuro)
 * ===================================================================== */
.ft-section--search { padding-top: 40px; }
.ft-section--search .ft-search { margin-bottom: 0; }
.ft-banners + .ft-wrap .ft-section--search { padding-top: 28px; }
/* Recomendados: banda oscura con esquinas arriba y abajo, separada del resto. */
.ft-picks { border-radius: 48px; margin-top: 72px; padding: 60px 0 64px; }
/* Visítanos: tarjeta blanca sobre crema (ya no va dentro de la banda oscura). */
.ft-visit { background: transparent; padding-top: 8px; padding-bottom: 72px; }
.ft-visit__card { background: var(--ft-paper); box-shadow: 0 18px 44px rgba(30, 27, 24, .07); }
.ft-ig { padding-top: 56px !important; }
@media (max-width: 760px) {
    .ft-picks { border-radius: 32px; margin-top: 48px; padding: 36px 0 40px; }
    .ft-visit { padding-bottom: 48px; }
    .ft-section--search { padding-top: 24px; }
}
/* Enlaces de marca (ficha y tarjetas) → página de la marca. */
.ft-pdp__brand { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.ft-pdp__brand:hover { color: var(--ft-sun) !important; }
a.ft-pcard__brand:hover { color: var(--ft-clay) !important; text-decoration: underline; text-underline-offset: 3px; }
/* Listados: columnas fijas que dividen las páginas de 12/24/48 (antes auto-fill daba 5 en
   pantallas anchas y la última fila quedaba con 2). */
.ft-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .ft-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .ft-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Grillas de 4/8 productos (portada, relacionados, carrito): en tablet 2 columnas, nunca 3. */
@media (min-width: 761px) and (max-width: 1100px) { .ft-grid.ft-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ft-nav__ext { margin-left: 3px; font-size: 12px; opacity: .6; }
.ft-nav__links a[aria-current="page"] { color: var(--ft-sun); }

/* 404 */
.ft-404__head { flex-direction: row; align-items: center; gap: 28px; }
.ft-404__code { flex: 0 0 auto; font-weight: 800; font-size: clamp(80px, 12vw, 160px); line-height: .85; letter-spacing: -.05em; color: var(--ft-sun); }
.ft-404__lead { margin-top: 10px; max-width: 560px; font-size: 17px; color: var(--ft-muted-dark); }
.ft-404__main { display: flex; flex-direction: column; gap: 22px; padding-top: 40px; padding-bottom: 72px; }
.ft-404__main .ft-search { margin-bottom: 0; }
.ft-404__shortcuts { justify-content: flex-start; margin: 0; }
@media (max-width: 760px) { .ft-404__head { flex-direction: column; align-items: flex-start; gap: 8px; } }
/* Menú del admin: en una sola línea en escritorio (con más ítems se acerca el espaciado). */
@media (min-width: 761px) {
    .ft-nav { flex-wrap: nowrap; }
    .ft-nav__links { flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; gap: 4px 20px; overflow: hidden; }
    .ft-nav__links a { white-space: nowrap; }
}
@media (min-width: 761px) and (max-width: 1280px) { .ft-nav__links { gap: 4px 14px; font-size: 14px; } .ft-nav__search input { width: 90px; } }
/* Tablet/laptop chico: sin el buscador chico del menú (cada página trae el grande) y, si aún no
   caben los ítems, la fila se desliza con desvanecido como en móvil. */
@media (min-width: 761px) and (max-width: 1180px) {
    .ft-nav__search { display: none; }
    .ft-nav__links { overflow-x: auto; scrollbar-width: none;
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent 100%);
                mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent 100%); }
    .ft-nav__links.is-end { -webkit-mask-image: none; mask-image: none; }
    .ft-nav__links::-webkit-scrollbar { display: none; }
}

/* Recomendados: nombres largos (p. ej. "WILD FOODS barra proteina 45 grs VEGAN CHOCOLATE BITTER")
   se cortan en 3 líneas y, en el teléfono, la etiqueta y la foto ya no se montan sobre el texto. */
.ft-pick-top__name { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 760px) {
    .ft-pick-top { min-height: 0; padding: 20px 20px 22px; gap: 6px; justify-content: flex-start; }
    .ft-pick-top__badge { position: relative; left: auto; top: auto; align-self: flex-start; height: 28px; font-size: 13px; padding: 0 12px; }
    .ft-pick-top__img { position: relative; right: auto; top: auto; align-self: flex-end; width: 120px; height: 120px; margin: -34px 4px 6px 0; border-radius: 26px; padding: 10px; }
    .ft-pick-top__num { font-size: 200px; top: -30px; right: 0; }
    .ft-pick-top__name { max-width: 100%; font-size: 24px; line-height: 1.08; }
    .ft-pick-top__price { font-size: 22px; }
    /* Filas 2–5: nombre en hasta 2 líneas en vez de cortarlo con "…" */
    .ft-tower__row { height: auto; min-height: 64px; padding-top: 10px; padding-bottom: 10px; }
    .ft-tower__name { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.25; font-size: 14px; }
    .ft-tower__price { font-size: 15px; white-space: nowrap; }
}
@media (max-width: 760px) {
    .ft-pick-top__badge { z-index: 2; font-size: 12px; padding: 0 10px; max-width: calc(100% - 118px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; line-height: 28px; }
    .ft-pick-top__img { width: 100px; height: 100px; margin-top: -28px; }
}