:root {
  --rubor: #faf2f9;     /* fondo */
  --ciruela: #35002b;   /* texto */
  --magenta: #8c0075;   /* acciones */
  --vino: #560047;      /* pie de página */
  --lila: #dac7d3;      /* superficies suaves */
  --blanco: #ffffff;
  --radio: 6px;
  --ancho: 1320px;
  /* la tipografía del logo (EB Garamond) en todo el sitio */
  --titulos: "EB Garamond", Garamond, Georgia, serif;
  --texto: "EB Garamond", Garamond, Georgia, serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--rubor);
  color: var(--ciruela);
  font: 400 1.125rem/1.6 var(--texto); /* Garamond se ve más chica que una sans: un punto más */
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--magenta); text-underline-offset: 3px; }
h1, h2, h3 { font-family: var(--titulos); font-weight: 500; line-height: 1.15; margin: 0 0 .5em; }
h1 { font-size: clamp(2rem, 4vw, 2.75rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
:focus-visible { outline: 3px solid var(--magenta); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.saltar { position: absolute; left: -999px; top: 0; background: var(--blanco); padding: .5rem 1rem; z-index: 10; }
.saltar:focus { left: 1rem; }

/* ---------- barra de anuncios (arriba del menú; se va al bajar por la página) */
.anuncios {
  display: grid; background: var(--vino); color: var(--blanco); text-align: center;
  padding: .4rem clamp(1rem, 4vw, 3rem); font-size: .92rem; letter-spacing: .02em;
}
/* todos en la misma celda: la franja toma la altura del más largo y no brinca al rotar */
.anuncio { grid-area: 1 / 1; margin: 0; line-height: 1.35; transition: opacity .5s ease; }
.anuncio:not(.activo) { visibility: hidden; opacity: 0; }
.anuncio a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.anuncio a:hover { color: var(--rubor); }
@media (prefers-reduced-motion: reduce) { .anuncio { transition: none; } }

/* ---------- cabecera */
.cabecera {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: 2rem;
  padding: .5rem clamp(1rem, 4vw, 3rem);
  background: var(--blanco);
  border-bottom: 1px solid var(--lila);
}
.logo { flex: none; }
/* logo recortado a su dibujo (logo-cabecera.svg): 30% más grande que el original, sin espacio vacío */
.logo img { height: 48px; width: auto; }
.cabecera > * { flex-shrink: 0; }
.menu { display: flex; gap: 1.5rem; margin-left: auto; white-space: nowrap; }
.menu a, .carrito-link { color: var(--ciruela); text-decoration: none; font-weight: 500; }
/* menú principal en MAYÚSCULAS espaciadas, como el logo; el submenú en mayúsculas y minúsculas */
.menu > a, .submenu summary { text-transform: uppercase; letter-spacing: .12em; font-size: .88rem; }
.menu .submenu-lista a { text-transform: none; letter-spacing: normal; font-size: 1.05rem; }
.menu a:hover, .carrito-link:hover { color: var(--magenta); }
.menu .menu-temporada { color: var(--magenta); font-weight: 700; }
/* Gift Concierge: botón magenta (las temporadas ya van en letra magenta) */
/* 30% más chico que el resto del menú (.88rem) y más separado de él */
.menu .menu-destacado {
  background: var(--magenta); color: var(--blanco); border-radius: 999px;
  font-size: .62rem; padding: .3rem .65rem; margin: -.3rem 0 -.3rem 1rem; align-self: center;
}
.menu .menu-destacado:hover { background: var(--vino); color: var(--blanco); }
/* carrito: ícono de bolsa con el número encima */
.carrito-link { position: relative; display: grid; place-items: center; width: 40px; height: 40px; }
.carrito-link .carrito-cuenta { position: absolute; top: -2px; right: -4px; border: 2px solid var(--blanco); }

/* buscador: píldora en la misma línea del menú (en pantallas más angostas se abre con la lupa) */
.buscador { position: relative; display: flex; align-items: center; width: 17rem; flex: none; }
.buscador input {
  width: 100%; min-width: 0; padding: .6rem 2.8rem .6rem 1.1rem; font: inherit; font-size: .95rem; color: var(--ciruela);
  background: var(--blanco); border: 1px solid var(--lila); border-radius: 999px; -webkit-appearance: none; appearance: none;
}
.buscador input::placeholder { color: rgba(53, 0, 43, .6); }
.buscador input::-webkit-search-cancel-button { display: none; }
.buscador input:focus { outline: none; border-color: var(--magenta); box-shadow: 0 0 0 3px rgba(140, 0, 117, .15); }
.buscador button[type="submit"] {
  position: absolute; right: .35rem; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%;
  background: none; color: var(--ciruela); cursor: pointer;
}
.buscador button[type="submit"]:hover { color: var(--magenta); }
.buscar-btn { display: none; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; background: none; color: var(--ciruela); cursor: pointer; }
.buscador-sugerencias {
  position: absolute; top: calc(100% + .5rem); right: 0; z-index: 7; width: max(100%, 22rem);
  display: grid; padding: .4rem; background: var(--blanco); border: 1px solid var(--lila); border-radius: 12px;
  box-shadow: 0 12px 28px rgba(53, 0, 43, .14);
}
.buscador-sugerencias[hidden] { display: none; }
.sugerencia-producto {
  display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: .75rem; align-items: center;
  padding: .4rem .5rem; border-radius: 8px; color: var(--ciruela); text-decoration: none;
}
.sugerencia-producto:hover, .sugerencia-producto:focus-visible { background: var(--rubor); }
.sugerencia-producto img { width: 48px; height: 48px; object-fit: cover; border-radius: 6px; }
.sug-nombre { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sug-precio { font-weight: 700; font-size: .9rem; white-space: nowrap; }
.sugerencia-todos { padding: .6rem .5rem .3rem; font-weight: 700; text-align: center; border-top: 1px solid var(--rubor); margin-top: .2rem; }
.sugerencia-nada { margin: 0; padding: .6rem .5rem; opacity: .8; }

@media (max-width: 1280px) {
  .buscar-btn { display: grid; margin-left: .25rem; }
  .buscador { display: none; }
  .buscando .buscador {
    display: flex; position: absolute; left: 0; right: 0; top: 100%; width: auto; z-index: 6;
    padding: .75rem clamp(1rem, 4vw, 3rem); background: var(--blanco); border-bottom: 1px solid var(--lila);
    box-shadow: 0 10px 20px rgba(53, 0, 43, .08);
  }
  .buscando .buscador button[type="submit"] { right: calc(clamp(1rem, 4vw, 3rem) + .35rem); }
  .buscando .buscador-sugerencias { left: clamp(1rem, 4vw, 3rem); right: clamp(1rem, 4vw, 3rem); width: auto; }
}
/* si aun así el menú no cabe (p. ej. con dos temporadas activas), cart.js pone .menu-compacto: igual que arriba */
.menu-compacto .buscar-btn { display: grid; margin-left: .25rem; }
.menu-compacto .buscador { display: none; }
.menu-compacto.buscando .buscador {
  display: flex; position: absolute; left: 0; right: 0; top: 100%; width: auto; z-index: 6;
  padding: .75rem clamp(1rem, 4vw, 3rem); background: var(--blanco); border-bottom: 1px solid var(--lila);
  box-shadow: 0 10px 20px rgba(53, 0, 43, .08);
}
.menu-compacto.buscando .buscador button[type="submit"] { right: calc(clamp(1rem, 4vw, 3rem) + .35rem); }
.menu-compacto.buscando .buscador-sugerencias { left: clamp(1rem, 4vw, 3rem); right: clamp(1rem, 4vw, 3rem); width: auto; }
.submenu { position: relative; }
.submenu summary { list-style: none; cursor: pointer; font-weight: 500; }
.submenu summary::-webkit-details-marker { display: none; }
.submenu summary::after { content: " ▾"; font-size: .8em; }
.submenu summary:hover { color: var(--magenta); }
.submenu-lista {
  position: absolute; top: calc(100% + 1.35rem); left: -1rem; z-index: 6;
  display: grid; min-width: 14rem; padding: .35rem 0;
  background: var(--blanco); border: 1px solid var(--lila); border-radius: var(--radio);
  box-shadow: 0 12px 28px rgba(53, 0, 43, .12);
}
.menu .submenu-lista a { padding: .3rem 1.1rem; line-height: 1.35; }
.submenu-separador { display: block; height: 1px; margin: .35rem 1.1rem; background: var(--lila); }
.submenu-lista small {
  margin-left: .4rem; padding: .05rem .45rem; border-radius: 999px;
  background: var(--rubor); color: var(--magenta); font-size: .75rem; font-weight: 700;
}
.carrito-cuenta {
  background: var(--magenta); color: var(--blanco);
  font-size: .8rem; font-weight: 700; min-width: 1.4rem; height: 1.4rem;
  border-radius: 999px; display: inline-grid; place-items: center; padding: 0 .35rem;
}
.carrito-cuenta[hidden] { display: none; }
.menu-btn { display: none; }

@media (max-width: 1080px) {
  .cabecera { gap: .5rem; }
  .menu-btn {
    display: grid; gap: 6px; background: none; border: 0; padding: .5rem; cursor: pointer;
  }
  .menu-btn span { display: block; width: 22px; height: 2px; background: var(--ciruela); }
  .logo { margin-right: auto; }
  .logo img { height: 38px; } /* también 30% más grande que el original, ya sin espacio vacío */
  .menu {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; gap: 0; background: var(--blanco);
    border-bottom: 1px solid var(--lila);
  }
  .menu a { padding: .7rem clamp(1rem, 4vw, 3rem); border-top: 1px solid var(--rubor); }
  .menu .menu-destacado { margin: .6rem clamp(1rem, 4vw, 3rem); border-radius: var(--radio); padding: .7rem 1rem; text-align: center; font-size: .88rem; }
  .menu-abierto .menu { display: flex; }
  .submenu summary { padding: .7rem clamp(1rem, 4vw, 3rem); border-top: 1px solid var(--rubor); }
  .submenu-lista { position: static; min-width: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; }
  .menu .submenu-lista a { padding: .45rem clamp(2rem, 8vw, 5rem); border-top: 0; }
  .submenu-separador { margin: .35rem clamp(2rem, 8vw, 5rem); }
  .menu { max-height: calc(100vh - 80px); overflow-y: auto; }
}

/* ---------- botones */
.boton {
  display: inline-block; cursor: pointer;
  background: var(--magenta); color: var(--blanco);
  border: 2px solid var(--magenta); border-radius: 12px;
  padding: .85rem 1.6rem; font: 600 1.05rem var(--texto); letter-spacing: .02em;
  text-decoration: none; text-align: center;
}
.boton:hover { background: var(--vino); border-color: var(--vino); }
.boton:disabled { opacity: .45; cursor: not-allowed; }
.boton-secundario { background: transparent; color: var(--magenta); }
.boton-secundario:hover { background: var(--magenta); color: var(--blanco); }
.boton-claro { background: var(--blanco); color: var(--vino); border-color: var(--blanco); }
.boton-claro:hover { background: var(--rubor); color: var(--vino); border-color: var(--rubor); }

/* ---------- secciones */
.seccion { max-width: var(--ancho); margin: 0 auto; padding: clamp(1.75rem, 4vw, 3rem) clamp(1rem, 4vw, 3rem); }
.seccion-cabeza { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.seccion-cabeza a { font-weight: 700; }
.intro { max-width: 65ch; margin-bottom: 1.5rem; }
.aviso-temporada {
  max-width: 65ch; margin: 0 0 1.5rem; padding: .75rem 1rem;
  background: var(--blanco); border-left: 4px solid var(--magenta); border-radius: var(--radio);
  font-weight: 500;
}

/* ---------- gracias: recordatorio de la fecha */
.recordatorio { margin: 1.75rem 0; padding: 1.25rem 1.5rem; background: var(--blanco); border: 1px solid var(--lila); border-radius: var(--radio); }
.texto .recordatorio h2 { margin: 0 0 .25rem; font-size: 1.35rem; }
.recordatorio-form p { margin: 0 0 1rem; }
.recordatorio-campos { display: flex; flex-wrap: wrap; gap: .75rem 1rem; margin-bottom: 1rem; }
.recordatorio-campos label { display: grid; gap: .3rem; flex: 1 1 12rem; font-weight: 600; font-size: .9rem; }
.recordatorio-campos select, .recordatorio-campos input {
  min-height: 44px; padding: .5rem .75rem; border: 1px solid var(--lila); border-radius: var(--radio);
  font: 400 1rem var(--texto); color: var(--ciruela); background: var(--blanco);
}
.recordatorio-form .recordatorio-aviso { margin: .75rem 0 0; color: var(--magenta); font-weight: 600; }
.recordatorio-aviso:empty { display: none; }
.recordatorio-listo { margin: .5rem 0 0; font-weight: 600; }

/* ---------- productos */
.grid-productos {
  display: grid; gap: 1.5rem 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 700px) { .grid-productos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .grid-productos { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem 1.5rem; } }
@media (min-width: 1200px) { .grid-productos:not(.grid-inicio) { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2rem 1.25rem; } }
/* en celular el inicio muestra 6 por bloque (3 filas); el resto está en "Ver todo" */
@media (max-width: 699px) { .grid-inicio > :nth-child(n+7) { display: none; } }
/* Los favoritos de la semana: filas de 5; en celular, una sola fila que se desliza con el dedo */
@media (min-width: 700px) { .grid-favoritos { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.5rem 1rem; } }
@media (max-width: 699px) {
  .grid-favoritos {
    display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(-1 * clamp(1rem, 4vw, 3rem)); padding-inline: clamp(1rem, 4vw, 3rem);
    scroll-padding-inline: clamp(1rem, 4vw, 3rem);
  }
  .grid-favoritos::-webkit-scrollbar { display: none; }
  .grid-favoritos > * { flex: 0 0 42%; scroll-snap-align: start; }
  .grid-favoritos > :nth-child(n+7) { display: revert; }
}
.producto { color: inherit; text-decoration: none; }
.producto-img { position: relative; aspect-ratio: 4 / 5; background: var(--lila); border-radius: var(--radio); overflow: hidden; margin-bottom: .75rem; }
.producto-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.producto:hover .producto-img img { transform: scale(1.03); }
.producto h3 { font-family: var(--texto); font-size: 1.1rem; font-weight: 500; margin: 0 0 .15rem; }
.producto:hover h3 { text-decoration: underline; }
.precio { margin: 0; font-weight: 700; }
.insignia {
  position: absolute; left: .6rem; bottom: .6rem;
  background: var(--vino); color: var(--blanco);
  font-size: .85rem; padding: .2rem .6rem; border-radius: var(--radio);
}
@media (prefers-reduced-motion: reduce) { .producto-img img { transition: none; } }

/* ---------- colecciones (ocasiones) */
.ocasiones { text-align: center; }
.grid-colecciones {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 2rem 1.25rem;
}
.grid-colecciones > * { flex: 0 1 clamp(130px, 17%, 190px); }
@media (max-width: 560px) {
  .grid-colecciones { gap: 1.25rem .75rem; }
  .grid-colecciones > * { flex-basis: calc((100% - 1.5rem) / 3); }
  .coleccion { font-size: 1rem; line-height: 1.25; }
  .coleccion-img { margin-bottom: .45rem; }
}
.coleccion { color: var(--ciruela); text-decoration: none; font-family: var(--titulos); font-size: 1.15rem; text-align: center; }
.coleccion-img { aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--lila); margin-bottom: .75rem; border: 3px solid var(--blanco); }
.coleccion-img img { width: 100%; height: 100%; object-fit: cover; }
.coleccion:hover span { color: var(--magenta); text-decoration: underline; }

/* ---------- banners de la página de inicio (panel: Contenido > Banners de inicio / de promoción)
   A lo ancho de la pantalla, sin márgenes; si hay varios se pasan con las flechas (cart.js).
   .banners-inicio: las fotos grandes de hasta arriba; .banners-promocion: después de las ocasiones. */
.banners { --pad: clamp(1.75rem, 4vw, 3rem); position: relative; padding: var(--pad) 0; }
.banners-inicio { --pad: 0px; background: var(--vino); }
.banners-pista {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none;
}
.banners-pista::-webkit-scrollbar { display: none; }
.banner {
  --fondo: var(--vino); --letra: var(--blanco);
  /* el texto se alinea con el resto de la página (y no queda debajo de las flechas) */
  --orilla: max(5rem, calc((100vw - var(--ancho)) / 2 + 3rem));
  position: relative; flex: 0 0 100%; scroll-snap-align: start; overflow: hidden;
  display: grid; min-height: clamp(340px, 34vw, 560px);
  background: var(--fondo); color: var(--letra);
}
.banners-inicio .banner { min-height: max(420px, min(78vh, 720px)); }
.banner-vino { --fondo: #560047; }
.banner-magenta { --fondo: #8c0075; }
.banner-ciruela { --fondo: #35002b; }
.banner-verde { --fondo: #1f4a3d; }
.banner-coral { --fondo: #c13c3d; }
.banner-rosa { --fondo: #f3dbe8; --letra: var(--ciruela); }
.banner-img { position: relative; }
.banner-img img { width: 100%; height: 100%; object-fit: cover; }
/* video encima de la foto: aparece suave cuando ya se está reproduciendo (cart.js); mientras, se ve la foto */
.banner-video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .6s; pointer-events: none;
}
.banner-video.reproduciendo { opacity: 1; }
.banners-pausa {
  position: absolute; top: calc(var(--pad) + .75rem); right: clamp(.5rem, 2vw, 1.75rem); z-index: 1;
  width: 36px; height: 36px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255, 255, 255, .85); color: var(--ciruela); box-shadow: 0 2px 8px rgba(53, 0, 43, .2);
}
.banners-pausa:hover { background: var(--blanco); color: var(--magenta); }
.banners-pausa span { display: block; margin: auto; width: 12px; height: 14px; border: solid currentColor; border-width: 0 4px; }
.banners-pausa.pausado span { width: 0; height: 0; margin-left: 13px; border-width: 7px 0 7px 12px; border-color: transparent transparent transparent currentColor; }
.banner-texto { position: relative; align-self: center; padding: clamp(1.5rem, 4.5vw, 3.75rem); }
.banner-etiqueta { margin: 0 0 1rem; font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.banner-titulo { font-size: clamp(1.8rem, 3.8vw, 3.2rem); line-height: 1.08; letter-spacing: -.01em; margin: 0; text-wrap: balance; }
.banner-parrafo { margin: 1rem 0 0; max-width: 42ch; font-size: 1.05rem; line-height: 1.5; }
.banner-texto .boton { margin-top: 1.5rem; border-radius: 28px; }
/* imagen ya diseñada (con sus textos): se ve completa, sin recortes */
.banner-imagen { display: block; min-height: 0; align-self: center; background: transparent; }
.banners-inicio .banner-imagen { min-height: 0; }
.banner-imagen img { display: block; width: 100%; height: auto; }
/* mitad foto y mitad color */
.banner-dividido { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.banner-dividido .banner-texto { padding-right: var(--orilla); }
/* foto a lo ancho con el texto encima, sobre una sombra del color elegido */
.banner-foto > .banner-img { position: absolute; inset: 0; }
.banner-foto > .banner-texto {
  max-width: 62%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; align-self: stretch;
  padding-left: var(--orilla);
  background: linear-gradient(to right, color-mix(in srgb, var(--fondo) 92%, transparent) 55%, transparent);
}
/* hasta arriba: el texto abajo a la izquierda, más grande, sobre una sombra suave (como siempre ha sido) */
.banners-inicio .banner-foto > .banner-texto {
  max-width: none; justify-content: flex-end; padding-bottom: clamp(1.5rem, 5vw, 4rem);
  background: linear-gradient(to top, color-mix(in srgb, var(--fondo) 72%, transparent), transparent 60%);
}
/* sin sombra: la foto se ve limpia; las letras llevan solo un contorno suave para no perderse */
.banner-foto.banner-sin-sombra > .banner-texto { background: none; }
.banner-sin-sombra .banner-texto { text-shadow: 0 1px 3px rgba(0, 0, 0, .45), 0 2px 18px rgba(0, 0, 0, .35); }
.banner-sin-sombra .boton { text-shadow: none; }
.banners-inicio .banner-titulo { font-size: clamp(1.9rem, 4.5vw, 3.6rem); font-weight: 600; line-height: 1.05; max-width: 14ch; }
.banners-inicio .banner-texto .boton { font-size: 1.21rem; }
.banners-flecha {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 1;
  width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--blanco); color: var(--ciruela); font-size: 1.6rem; line-height: 1;
  box-shadow: 0 2px 10px rgba(53, 0, 43, .25);
}
.banners-flecha:hover { background: var(--rubor); color: var(--magenta); }
.banners-prev { left: clamp(.5rem, 2vw, 1.75rem); }
.banners-next { right: clamp(.5rem, 2vw, 1.75rem); }
@media (max-width: 759px) {
  .banner { --orilla: clamp(1.5rem, 4.5vw, 3.75rem); }
  .banner-dividido { grid-template-columns: minmax(0, 1fr); }
  .banner-dividido .banner-img { aspect-ratio: 4 / 3; }
  .banner-foto > .banner-texto {
    max-width: none; justify-content: flex-end;
    background: linear-gradient(to top, color-mix(in srgb, var(--fondo) 92%, transparent) 45%, transparent);
  }
  .banner-foto.banner-sin-sombra > .banner-texto { background: none; }
  .banners-flecha { top: auto; bottom: calc(var(--pad) + .75rem); transform: none; width: 40px; height: 40px; }
  /* abajo a la izquierda: a la derecha están los botones flotantes (WhatsApp y subir) */
  .banners-prev { left: .75rem; }
  .banners-next { left: 3.75rem; right: auto; }
  .banner-texto { padding-bottom: 4.25rem; } /* que las flechas no tapen el botón */
  .banners-inicio .banner-foto > .banner-texto { padding-bottom: 4.25rem; }
}
@media (prefers-reduced-motion: reduce) { .banners-pista { scroll-behavior: auto; } }

/* ---------- comprar por ocasión: 4 por fila en computadora, 2 en celular */
.grid-ocasiones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1rem; }
@media (min-width: 900px) { .grid-ocasiones { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.5rem 1.5rem; } }
.ocasion { color: var(--ciruela); text-decoration: none; }
.ocasion-img { aspect-ratio: 4 / 5; overflow: hidden; border-radius: 12px; background: var(--lila); margin-bottom: .75rem; }
.ocasion-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.ocasion:hover .ocasion-img img { transform: scale(1.04); }
.ocasion h2 { font-size: clamp(1.15rem, 2vw, 1.4rem); margin: 0 0 .15rem; }
.ocasion span { font-size: .9rem; opacity: .8; }
.ocasion:hover h2 { color: var(--magenta); text-decoration: underline; }
@media (prefers-reduced-motion: reduce) { .ocasion-img img { transition: none; } }
.menu .submenu-lista .submenu-todas { border-top: 1px solid var(--lila); margin-top: .35rem; padding-top: .7rem; color: var(--magenta); font-weight: 700; }

/* ---------- ficha de producto */
.ficha {
  max-width: var(--ancho); margin: 0 auto;
  padding: clamp(1.25rem, 3vw, 2.5rem) clamp(1rem, 4vw, 3rem) 2rem;
  display: grid; gap: clamp(1rem, 2vw, 1.75rem) clamp(1.5rem, 4vw, 4rem); /* filas juntas: foto → pestañas */
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
}
/* galería: la foto principal siempre cabe completa en la pantalla; miniaturas a la izquierda */
.galeria { display: grid; gap: .75rem; align-self: start; }
.galeria.con-miniaturas { grid-template-columns: 76px minmax(0, 1fr); }
.foto-principal { display: flex; justify-content: center; }
.foto-principal img {
  width: auto; max-width: 100%; max-height: calc(100vh - 110px); max-height: calc(100dvh - 110px);
  object-fit: contain; border-radius: var(--radio); background: var(--lila);
}
.miniaturas {
  display: flex; flex-direction: column; gap: .5rem;
  max-height: calc(100vh - 110px); max-height: calc(100dvh - 110px); overflow-y: auto; scrollbar-width: thin;
}
.miniatura {
  flex: none; width: 76px; height: 76px; padding: 0; cursor: pointer; overflow: hidden;
  border: 2px solid transparent; border-radius: var(--radio); background: var(--lila); opacity: .7;
  transition: opacity .2s, border-color .2s;
}
.miniatura img { width: 100%; height: 100%; object-fit: cover; }
.miniatura:hover { opacity: 1; }
.miniatura[aria-current="true"] { border-color: var(--magenta); opacity: 1; }
.ficha-info { align-self: start; }
/* Descripción y Cuidados: debajo de la foto y de la compra, a todo lo ancho */
.ficha-detalle { grid-column: 1 / -1; }
.migas { display: inline-block; margin-bottom: .75rem; font-weight: 500; }
.precio-grande { font-size: 1.5rem; margin-bottom: 1.5rem; }
.precio-grande s { font-weight: 400; opacity: .6; font-size: 1.1rem; }
.precio-grande:has(+ .impuesto) { margin-bottom: .15rem; }
.impuesto { margin: 0 0 1.5rem; font-size: .95rem; opacity: .75; }

/* mensaje de la tarjeta */
.mensaje-tarjeta { margin: 0 0 1.5rem; }
.mensaje-tarjeta label { display: block; font-family: var(--titulos); font-weight: 600; font-size: 1.15rem; margin-bottom: .5rem; }
.mensaje-tarjeta textarea {
  display: block; width: 100%; min-height: 6.5rem; padding: .75rem .9rem; resize: vertical;
  font: inherit; line-height: 1.5; color: var(--ciruela); background: var(--blanco);
  border: 1px solid rgba(53, 0, 43, .45); border-radius: var(--radio);
}
.mensaje-tarjeta textarea::placeholder { color: rgba(53, 0, 43, .45); }
.mensaje-tarjeta textarea.falta { border-color: #a4161a; box-shadow: 0 0 0 2px rgba(164, 22, 26, .15); }
.mensaje-pie { display: flex; justify-content: space-between; gap: 1rem; margin-top: .35rem; font-size: .85rem; opacity: .8; }
.mensaje-cuenta { white-space: nowrap; }
.mensaje-aviso {
  margin-top: .75rem; padding: .75rem 1rem; border-radius: var(--radio);
  background: #fbe3e4; color: #7a1014;
}
.mensaje-aviso[hidden] { display: none; }
.mensaje-aviso p { margin: 0 0 .6rem; font-weight: 700; }
.mensaje-aviso .boton { padding: .5rem 1rem; font-size: .9rem; border-color: #7a1014; color: #7a1014; }
.mensaje-aviso .boton:hover { background: #7a1014; color: var(--blanco); }
.variantes { border: 0; padding: 0; margin: 0 0 1.5rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.variantes legend { font-weight: 700; margin-bottom: .5rem; }
.variantes input { position: absolute; opacity: 0; }
.variantes span {
  display: inline-block; padding: .5rem 1rem; cursor: pointer;
  border: 1px solid rgba(53, 0, 43, .45); border-radius: 40px; background: var(--blanco);
}
.variantes input:checked + span { background: var(--ciruela); color: var(--blanco); border-color: var(--ciruela); }
.variantes input:focus-visible + span { outline: 3px solid var(--magenta); outline-offset: 2px; }
.variantes input:disabled + span { opacity: .4; text-decoration: line-through; cursor: not-allowed; }
.cantidad { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.cantidad input, .carrito-cant input {
  width: 5rem; padding: .6rem; font: inherit; color: inherit;
  border: 1px solid rgba(53, 0, 43, .45); border-radius: var(--radio); background: var(--blanco);
}
.agregar { width: 100%; }
.aviso { min-height: 1.6em; margin: .75rem 0; }
.link-secundario { display: inline-block; margin-bottom: 1rem; font-weight: 500; }
.descripcion { border-top: 1px solid var(--lila); padding-top: 1.5rem; }

/* también te puede interesar: 5 en fila en computadora; en celular se desliza de lado */
.relacionados { border-top: 1px solid var(--lila); padding-top: clamp(1.5rem, 4vw, 2.5rem); }
.relacionados h2 { font-size: clamp(1.4rem, 2.6vw, 1.8rem); margin-bottom: 1.25rem; }
.grid-relacionados { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.5rem 1.25rem; }
@media (max-width: 900px) {
  .grid-relacionados {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(150px, 42%);
    overflow-x: auto; scroll-snap-type: x mandatory; gap: 1rem; padding-bottom: .5rem;
    margin-right: calc(-1 * clamp(1rem, 4vw, 3rem)); padding-right: clamp(1rem, 4vw, 3rem);
  }
  .grid-relacionados > * { scroll-snap-align: start; }
}

/* pestañas Descripción / Cuidados */
.pestanas-lista { display: flex; gap: 1.5rem; border-bottom: 1px solid var(--lila); }
.pestanas-lista [role="tab"] {
  background: none; border: 0; padding: .75rem 0 .6rem; margin-bottom: -1px; cursor: pointer;
  font: 700 1rem var(--texto); color: var(--ciruela); opacity: .6;
  border-bottom: 3px solid transparent;
}
.pestanas-lista [role="tab"]:hover { opacity: 1; }
.pestanas-lista [role="tab"][aria-selected="true"] { opacity: 1; color: var(--magenta); border-bottom-color: var(--magenta); }
.pestanas .descripcion { border-top: 0; }
.pestana { padding-top: 1.25rem; }
.pestana ul { padding-left: 1.2rem; }
.pestana li { margin-bottom: .4rem; }
.link-preguntas { margin: 1.5rem 0 0; padding-top: 1rem; border-top: 1px solid var(--lila); font-weight: 500; }

/* preguntas frecuentes (página de inicio) */
.preguntas { scroll-margin-top: 70px; text-align: center; padding-top: 1rem; }
.preguntas-invitacion { margin: 0 0 .75rem; font-family: var(--titulos); font-size: 1.3rem; }
.preguntas-contenido { margin-top: 2rem; text-align: left; }
.preguntas-contenido[hidden] { display: none; }
.preguntas h2 { text-align: center; }
.lista-preguntas { max-width: 50rem; margin: 1.5rem auto; display: grid; gap: .6rem; }
.lista-preguntas details { background: var(--blanco); border: 1px solid var(--lila); border-radius: var(--radio); }
.lista-preguntas summary {
  list-style: none; cursor: pointer; padding: 1rem 3rem 1rem 1.25rem; position: relative;
  font-weight: 700;
}
.lista-preguntas summary::-webkit-details-marker { display: none; }
.lista-preguntas summary::after {
  content: "+"; position: absolute; right: 1.25rem; top: 50%; transform: translateY(-50%);
  font-size: 1.4rem; font-weight: 400; color: var(--magenta);
}
.lista-preguntas details[open] summary::after { content: "−"; }
.lista-preguntas details p { margin: 0; padding: 0 1.25rem 1.1rem; }
.preguntas-contenido > p { text-align: center; }
@media (max-width: 800px) {
  .ficha { grid-template-columns: 1fr; }
  /* en celular las miniaturas van en una fila debajo de la foto */
  .galeria.con-miniaturas { grid-template-columns: minmax(0, 1fr); }
  .miniaturas { order: 2; flex-direction: row; max-height: none; overflow-x: auto; overflow-y: hidden; padding-bottom: .25rem; }
  .miniatura { width: 64px; height: 64px; }
  .foto-principal img { max-height: 60vh; max-height: 60dvh; }
}

/* ---------- páginas de texto */
.texto { max-width: 68ch; margin: 0 auto; padding: clamp(1.75rem, 4vw, 3rem) clamp(1rem, 4vw, 2rem); line-height: 1.7; }
.texto img { border-radius: var(--radio); margin: 1.5rem 0; max-width: 100%; height: auto; }
/* fotos sueltas (un párrafo que solo trae la foto): más bajas, y dos seguidas van lado a lado */
.texto p:has(> img:only-child) img { max-height: 380px; width: auto; margin: .75rem 0; }
.texto p:has(> img:only-child):has(+ p > img:only-child), .texto p:has(> img:only-child) + p:has(> img:only-child) {
  display: inline-block; width: calc(50% - .6rem); vertical-align: top; margin: 0;
}
.texto p:has(> img:only-child):has(+ p > img:only-child) { margin-right: .75rem; }
@media (max-width: 560px) {
  .texto p:has(> img:only-child):has(+ p > img:only-child) img, .texto p:has(> img:only-child) + p:has(> img:only-child) img { max-height: 260px; }
}
.texto p:has(> img:only-child):has(+ p > img:only-child) img, .texto p:has(> img:only-child) + p:has(> img:only-child) img {
  width: 100%; height: 100%; max-height: 380px; object-fit: cover;
}
.texto h2 { margin-top: 2.2rem; }
.texto h3 { margin: 1.8rem 0 .4rem; font-size: 1.2rem; }
.texto blockquote {
  margin: 1.8rem 0; padding: .4rem 0 .4rem 1.3rem; border-left: 3px solid var(--magenta);
  color: var(--ciruela); font-size: 1.15em;
}
.texto blockquote p { margin: .3rem 0; }
.contacto-opciones { display: flex; flex-wrap: wrap; gap: 1rem; margin: 2rem 0 3rem; }

/* ---------- Instagram (página de inicio) */
.instagram h2 { text-align: center; }
.instagram-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .4rem; margin-top: 1.5rem; }
.ig-post { position: relative; display: block; aspect-ratio: 1; overflow: hidden; border-radius: var(--radio); background: var(--rubor); }
.ig-post img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.ig-icono {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(53, 0, 43, .28); color: var(--blanco); opacity: 0; transition: opacity .25s;
}
.ig-icono svg { width: 34px; height: 34px; }
.ig-post:hover img, .ig-post:focus-visible img { transform: scale(1.04); }
.ig-post:hover .ig-icono, .ig-post:focus-visible .ig-icono { opacity: 1; }
.ig-play { position: absolute; top: .45rem; right: .45rem; color: var(--blanco); filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .5)); }
.instagram-cuenta {
  display: table; margin: 1.5rem auto 0; padding-bottom: .35rem; border-bottom: 1px solid var(--ciruela);
  color: var(--ciruela); font-size: 1.15rem; text-decoration: none;
}
.instagram-cuenta:hover { color: var(--magenta); border-color: var(--magenta); }
@media (max-width: 800px) {
  .instagram-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .3rem; }
}

/* ---------- blog */
.articulo-fecha { margin: 0 0 .4rem; color: #6b5566; font-size: .95rem; }
.articulo-fecha a { color: var(--magenta); }
.articulo-portada { display: block; width: 100%; max-height: 480px; object-fit: cover; }
.articulo-volver { margin-top: 3rem; }
.grid-blog { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 2rem; margin-top: 1.5rem; }
.tarjeta-articulo { display: grid; align-content: start; gap: .35rem; color: inherit; text-decoration: none; }
.articulo-img { aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radio); background: var(--rubor); }
.articulo-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.tarjeta-articulo:hover .articulo-img img { transform: scale(1.03); }
/* sin foto: el logo sobre el fondo de la marca */
.articulo-img.sin-foto { display: grid; place-items: center; background: var(--rubor); border: 1px solid var(--lila); }
.articulo-img.sin-foto img { width: 60%; height: auto; object-fit: contain; opacity: .55; }
.tarjeta-articulo time { margin-top: .5rem; color: #6b5566; font-size: .9rem; }
.tarjeta-articulo h2 { margin: 0; font-size: 1.4rem; color: var(--ciruela); }
.tarjeta-articulo:hover h2 { color: var(--magenta); }
.tarjeta-articulo p { margin: 0; }

/* ---------- carrito */
.carrito { max-width: 860px; }
.carrito-fila {
  display: grid; align-items: center; gap: 1rem;
  grid-template-columns: 88px 1fr auto auto;
  padding: 1rem 0; border-bottom: 1px solid var(--lila);
}
.carrito-img img { width: 88px; height: 110px; object-fit: cover; border-radius: var(--radio); }
.carrito-datos { display: grid; }
.carrito-nombre { color: var(--ciruela); font-weight: 700; text-decoration: none; }
.carrito-nombre:hover { text-decoration: underline; }
.quitar { background: none; border: 0; padding: 0; color: var(--magenta); cursor: pointer; font: inherit; text-decoration: underline; }
.carrito-mensaje { margin-top: .35rem; font-size: .9rem; }
.carrito-mensaje-texto { margin: 0; font-style: italic; overflow-wrap: anywhere; }
.carrito-mensaje-texto.vacio { font-style: normal; opacity: .7; }
.editar-mensaje { background: none; border: 0; padding: 0; color: var(--magenta); cursor: pointer; font: inherit; font-size: .85rem; text-decoration: underline; }
.carrito-mensaje-editar { display: grid; gap: .5rem; margin-top: .5rem; }
.carrito-mensaje-editar textarea {
  width: 100%; padding: .5rem .7rem; font: inherit; font-size: .95rem; color: var(--ciruela);
  border: 1px solid rgba(53, 0, 43, .45); border-radius: var(--radio); resize: vertical;
}
.carrito-mensaje-editar .boton { justify-self: start; padding: .45rem .9rem; font-size: .9rem; }
.carrito-resumen { text-align: right; padding-top: 1.5rem; }
.nota { opacity: .8; margin: 0 0 1.5rem; }

/* entrega */
.entrega {
  text-align: left; margin-bottom: 1.5rem; padding: clamp(1rem, 3vw, 1.5rem);
  background: var(--blanco); border: 1px solid var(--lila); border-radius: 12px;
}
.entrega h2 { font-size: 1.5rem; }
.entrega h3 { font-family: var(--texto); font-size: 1rem; font-weight: 700; margin: 1.25rem 0 .6rem; }
.entrega-metodo { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; border: 0; padding: 0; margin: 0 0 1.25rem; }
.entrega-metodo label, .bloque {
  position: relative; display: block; cursor: pointer;
  border: 2px solid var(--lila); border-radius: var(--radio); padding: .8rem 1rem; font-weight: 700; text-align: center;
}
.entrega-metodo input, .bloque input, .dia input { position: absolute; opacity: 0; pointer-events: none; }
.entrega-metodo label:has(input:checked), .bloque:has(input:checked), .dia:has(input:checked) {
  border-color: var(--magenta); background: var(--rubor); color: var(--magenta);
}
.entrega-metodo label:has(input:focus-visible), .bloque:has(input:focus-visible), .dia:has(input:focus-visible) {
  outline: 3px solid var(--magenta); outline-offset: 2px;
}
.entrega-cp > label { display: block; font-weight: 700; margin-bottom: .4rem; }
.cp-fila { display: flex; gap: .5rem; max-width: 26rem; }
.cp-fila input {
  flex: 1; min-width: 0; font: inherit; padding: .7rem .9rem;
  border: 1px solid var(--lila); border-radius: var(--radio); background: var(--blanco); color: var(--ciruela);
}
.cp-fila .boton { padding: .7rem 1.1rem; }
.cp-resultado { margin: .6rem 0 0; font-weight: 500; }
.cp-resultado:empty { display: none; }
.cp-resultado.ok { color: #1f6f43; }
.cp-resultado.error { color: #a4161a; }
.entrega-tienda { margin: 0; padding: .8rem 1rem; background: var(--rubor); border-radius: var(--radio); }
.entrega-temporada { margin-bottom: .75rem; }
.dias-nav { display: flex; align-items: center; gap: .5rem; }
.dias-nav > button {
  flex: none; width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--lila); background: var(--blanco); color: var(--ciruela); font-size: 1.4rem; line-height: 1;
}
.dias-nav > button:hover { border-color: var(--magenta); color: var(--magenta); }
.dias {
  position: relative; flex: 1; display: flex; gap: .5rem; overflow-x: auto; scroll-snap-type: x proximity;
  padding: .25rem; scrollbar-width: none;
}
.dias::-webkit-scrollbar { display: none; }
.dia {
  position: relative; flex: 0 0 5.25rem; scroll-snap-align: start; cursor: pointer;
  display: grid; justify-items: center; gap: .05rem; padding: .55rem .25rem;
  border: 2px solid var(--lila); border-radius: var(--radio); background: var(--blanco); text-align: center;
}
.dia-semana { font-size: .85rem; font-weight: 700; text-transform: capitalize; }
.dia-num { font-family: var(--titulos); font-size: 1.5rem; line-height: 1.1; }
.dia-mes { font-size: .8rem; }
.dia-motivo { font-size: .7rem; font-weight: 700; line-height: 1.2; }
.dia.no-disponible, .bloque.no-disponible { cursor: not-allowed; background: #f1eaef; color: #9a8c96; border-color: #eadfe6; }
.bloques { display: flex; flex-wrap: wrap; gap: .6rem; }
.bloque { flex: 0 1 12rem; }
.carrito-totales { margin: 0 0 1rem auto; max-width: 22rem; }
.carrito-totales div { display: flex; justify-content: space-between; gap: 1rem; padding: .3rem 0; }
.carrito-totales dt { opacity: .85; }
.carrito-totales dd { margin: 0; font-weight: 700; }
.t-total-fila { border-top: 1px solid var(--lila); margin-top: .3rem; padding-top: .6rem !important; }
.t-total-fila dt, .t-total-fila dd { font-family: var(--titulos); font-size: 1.5rem; opacity: 1; }
@media (max-width: 560px) {
  .carrito-fila { grid-template-columns: 72px 1fr; }
  .carrito-img img { width: 72px; height: 90px; }
  .carrito-cant, .quitar { grid-column: 2; justify-self: start; }
  .carrito-resumen { text-align: left; }
  .carrito-totales { margin-left: 0; max-width: none; }
  .pagar { width: 100%; }
  .dias-nav > button { display: none; }
  .bloque { flex: 1 1 100%; }
}

/* ---------- pie */
.pie { background: var(--blanco); border-top: 1px solid var(--lila); padding: 2.5rem clamp(1rem, 4vw, 3rem) 1.25rem; }
.pie-columnas {
  max-width: var(--ancho); margin: 0 auto;
  display: grid; gap: 2.5rem; grid-template-columns: 1.3fr repeat(3, 1fr);
}
.pie h2 { font-size: 1.2rem; margin-bottom: .75rem; }
.pie p { margin: 0 0 1rem; opacity: .85; }
.pie a { display: block; color: var(--ciruela); text-decoration: none; margin-bottom: .6rem; opacity: .85; }
.pie a:hover { opacity: 1; color: var(--magenta); }
.pie-lugar { font-size: .95rem; }

/* suscribirse */
.suscribir { position: relative; max-width: 22rem; }
.suscribir input[type="email"] {
  width: 100%; padding: .75rem 3rem .75rem 1rem; font: inherit; font-size: 1rem; color: var(--ciruela);
  background: var(--blanco); border: 1px solid var(--lila); border-radius: var(--radio);
}
.suscribir input[type="email"]:focus { outline: none; border-color: var(--magenta); box-shadow: 0 0 0 3px rgba(140, 0, 117, .15); }
.suscribir button {
  position: absolute; right: .3rem; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px; border: 0; border-radius: var(--radio); cursor: pointer;
  background: none; color: var(--ciruela); font-size: 1.2rem;
}
.suscribir button:hover { color: var(--magenta); }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.suscribir-aviso { margin-top: .5rem !important; font-weight: 500; }
.suscribir-aviso:empty { display: none; }

/* redes, derechos y formas de pago */
.pie-inferior {
  max-width: var(--ancho); margin: 2rem auto 0; padding-top: 1.25rem; border-top: 1px solid var(--rubor);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap;
  padding-right: 3.5rem; /* que el botón "volver arriba" no tape las formas de pago */
}
.redes { display: flex; gap: .25rem; }
.redes a { display: grid; place-items: center; width: 38px; height: 38px; margin: 0; border-radius: 50%; opacity: .8; }
.redes a:hover { background: var(--rubor); opacity: 1; }
.pie-derechos { margin: 0 !important; font-size: .9rem; }
.pagos { display: flex; gap: .4rem; }
.pagos svg { display: block; }

/* volver arriba */
/* WhatsApp flotante abajo a la derecha en todo el sitio; "volver arriba" va encima de él */
.whatsapp-flotante {
  position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 4;
  display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 50%;
  background: #25d366; color: var(--blanco); box-shadow: 0 6px 16px rgba(0, 0, 0, .22);
}
.whatsapp-flotante svg { width: 32px; height: 32px; stroke-width: 1.6; }
.whatsapp-flotante:hover, .whatsapp-flotante:focus-visible { background: #1ebe5b; }
.whatsapp-flotante:focus-visible { outline: 3px solid var(--magenta); outline-offset: 3px; }
@media (max-width: 560px) {
  .whatsapp-flotante { right: 1rem; bottom: 1rem; width: 52px; height: 52px; }
  .whatsapp-flotante svg { width: 30px; height: 30px; }
}
@media print { .whatsapp-flotante, .volver-arriba { display: none !important; } }
/* mientras tapan un botón de la página (cart.js, iniciarFlotantes) */
.whatsapp-flotante, .volver-arriba { transition: opacity .2s ease, visibility .2s; }
.flotante-oculto { opacity: 0; visibility: hidden; pointer-events: none; }
.volver-arriba {
  position: fixed; right: calc(1.25rem + 5px); bottom: calc(1.25rem + 56px + .75rem); z-index: 4;
  width: 46px; height: 46px; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--vino); color: var(--blanco); font-size: 1.3rem; box-shadow: 0 6px 16px rgba(53, 0, 43, .25);
}
.volver-arriba:hover { background: var(--magenta); }
.volver-arriba[hidden] { display: none; }

@media (max-width: 860px) {
  .pie { padding-top: 2rem; }
  .pie-columnas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1.25rem; }
  .pie-suscribir, .pie-contacto { grid-column: 1 / -1; }
  .pie h2 { font-size: 1.1rem; margin-bottom: .5rem; }
  .pie p { margin-bottom: .75rem; }
  .pie a { margin-bottom: .4rem; }
  .pie-inferior { margin-top: 1.5rem; padding-top: 1rem; }
}
@media (max-width: 560px) {
  .volver-arriba { right: calc(1rem + 3px); bottom: calc(1rem + 52px + .6rem); }
  .pie-inferior { flex-direction: column; align-items: flex-start; gap: .6rem; }
}

/* ---------- página de pago (/pago/): el formulario se recorre y el resumen se queda fijo, como en Shopify */
.en-pago { background: var(--blanco); }
.pago [hidden] { display: none !important; }
.cabecera-pago {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .6rem max(clamp(1rem, 4vw, 2rem), calc((100% - 1100px) / 2));
  border-bottom: 1px solid var(--lila); background: var(--blanco);
}
.cabecera-pago .carrito-link { color: var(--magenta); }
.pago { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: calc(100vh - 66px); }
.pago-principal { grid-column: 1; grid-row: 1; padding: 1.5rem clamp(1rem, 4vw, 3rem) 2rem; }
.pago-principal > * { max-width: 560px; margin-left: auto; }
.pago-resumen { grid-column: 2; grid-row: 1; background: var(--rubor); border-left: 1px solid var(--lila); }
.resumen-cuerpo {
  position: sticky; top: 0; max-width: 460px; max-height: 100vh; overflow-y: auto;
  padding: 1.5rem clamp(1rem, 4vw, 3rem);
}
.resumen-toggle { display: none; }
/* la entrega elegida, arriba del resumen; en celular también fuera del resumen plegado */
.r-entrega { margin: 0 0 1.25rem; padding: .7rem .9rem; background: var(--blanco); border: 1px solid var(--lila); border-radius: var(--radio); line-height: 1.4; }
.r-entrega-titulo { font-weight: 700; }
.r-entrega a { white-space: nowrap; margin-left: .25rem; }
.r-entrega-movil { display: none; }

.pago-form section { margin-bottom: 1.5rem; }
.pago-form h2 { font-size: 1.5rem; margin-bottom: .5rem; }
.pago-nota { font-size: .95rem; opacity: .8; margin: -.25rem 0 .6rem; }
.pago-cargando { padding: 2rem 0; }
.pago-cargando.error { color: #a4161a; }
.cp-aviso { margin: -.35rem 0 .75rem; font-size: .95rem; }
.cp-aviso:empty { display: none; }
.cp-aviso.error { color: #a4161a; }
.fila-2, .fila-3, .fila-calle { display: grid; gap: 0 .6rem; }
.fila-calle { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.fila-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fila-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* campos con la etiqueta dentro de la caja: sube cuando hay texto */
.campo-f { position: relative; margin-bottom: .6rem; }
.campo-f input, .campo-f select, .campo-f textarea {
  display: block; width: 100%; min-height: 3.1rem; padding: 1.25rem .85rem .35rem;
  font: inherit; font-size: 1.05rem; color: var(--ciruela);
  background: var(--blanco); border: 1px solid var(--lila); border-radius: var(--radio);
}
.campo-f textarea { resize: vertical; min-height: 4.5rem; }
.campo-f select { appearance: none; padding-right: 2.2rem; cursor: pointer;
  background: var(--blanco) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2335002b' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right .9rem center; }
.campo-f label {
  position: absolute; left: .9rem; top: .8rem; pointer-events: none; color: #7d6676; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(100% - 1.8rem);
  transition: top .12s, font-size .12s;
}
.campo-f :is(input, textarea):is(:focus, :not(:placeholder-shown)) + label, .campo-select label { top: .25rem; font-size: .78rem; }
.campo-f :is(input, select, textarea):focus-visible { outline: 2px solid var(--magenta); outline-offset: -1px; border-color: var(--magenta); }
.campo-f input[readonly] { background: #f7f1f5; color: #6b5565; }
.campo-f.invalido :is(input, select, textarea) { border-color: #a4161a; box-shadow: 0 0 0 1px #a4161a; }

.check { display: flex; align-items: center; gap: .55rem; margin: .25rem 0 .5rem; font-size: 1rem; cursor: pointer; }
.check input { flex: none; width: 1.15rem; height: 1.15rem; accent-color: var(--magenta); margin: 0; }
.check-caja { align-items: flex-start; padding: .75rem 1rem; border: 1px solid var(--lila); border-radius: var(--radio); }
.check-caja input { margin-top: .25rem; }
.check-caja span { display: grid; }
.check-caja small { font-size: .9rem; opacity: .75; }
.check-caja:has(input:checked) { border-color: var(--magenta); background: var(--rubor); }
.factura-campos { padding: .75rem 0 0; }
.pago-stripe { min-height: 3rem; }
.pago-boton { width: 100%; padding: .9rem; font-size: 1.2rem; }
.campo-error { margin: .3rem 0 0; color: #a4161a; font-size: .9rem; line-height: 1.3; }
.pago-aviso { color: #a4161a; }
.pago-aviso:empty { display: none; }
.pago-politicas {
  display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; margin-top: 1.5rem; padding-top: .75rem;
  border-top: 1px solid var(--lila); font-size: .9rem;
}

/* resumen */
.resumen-items { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: 1rem; }
.resumen-items li { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: .9rem; align-items: center; }
.r-foto { position: relative; width: 64px; height: 64px; border: 1px solid var(--lila); border-radius: 8px; background: var(--blanco); }
.r-foto img { width: 100%; height: 100%; object-fit: cover; border-radius: 7px; }
.r-cant {
  position: absolute; top: -.55rem; right: -.55rem; display: grid; place-items: center;
  min-width: 1.4rem; height: 1.4rem; padding: 0 .3rem; border-radius: 1rem;
  background: var(--ciruela); color: var(--blanco); font-size: .78rem; font-weight: 700; line-height: 1;
}
.r-nombre { display: grid; font-size: 1rem; line-height: 1.3; }
.r-nombre small { font-size: .85rem; font-style: italic; opacity: .75; overflow-wrap: anywhere; }
.r-precio { font-size: 1rem; }
.cupon { display: flex; gap: .6rem; }
.cupon .campo-f { flex: 1; margin: 0; }
.cupon .boton { flex: none; padding: .6rem 1.1rem; font-size: 1rem; border-radius: var(--radio); }
.cupon-aviso { margin: .4rem 0 0; color: #a4161a; font-size: .9rem; }
.cupon-aviso:empty { display: none; }
.cupones { list-style: none; margin: .6rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.cupones:empty { display: none; }
.cupones li {
  display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .25rem .15rem .6rem;
  background: var(--lila); border-radius: 4px; font-size: .9rem; font-weight: 600;
}
.cupones button { border: 0; background: none; cursor: pointer; font-size: 1.15rem; line-height: 1; color: var(--ciruela); padding: 0 .25rem; }
.resumen-totales { margin: 1.5rem 0 .25rem; }
.resumen-totales div { display: flex; justify-content: space-between; gap: 1rem; padding: .2rem 0; font-size: 1rem; }
.resumen-totales dd { margin: 0; }
.r-descuento { color: #1f6f43; }
.r-total-fila { margin-top: .5rem; align-items: baseline; }
.r-total-fila dt, .r-total { font-family: var(--titulos); font-size: 1.5rem; font-weight: 600; }
.r-total-fila small { font-size: .8rem; opacity: .7; }
.r-iva { margin: 0; font-size: .9rem; opacity: .75; }

@media (max-width: 900px) {
  .pago { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .pago-resumen, .pago-principal { grid-column: 1; grid-row: auto; }
  .pago-resumen { border-left: 0; border-bottom: 1px solid var(--lila); }
  .pago-principal { padding-top: 1.5rem; }
  .pago-principal > * { margin-inline: auto; }
  .resumen-toggle {
    display: flex; justify-content: space-between; align-items: center; gap: 1rem; width: 100%;
    padding: 1rem clamp(1rem, 4vw, 3rem); border: 0; background: none; cursor: pointer;
    font: inherit; color: var(--magenta);
  }
  .resumen-toggle-texto::after { content: " ▾"; }
  .abierto .resumen-toggle-texto::after { content: " ▴"; }
  .resumen-toggle-total { font-family: var(--titulos); font-size: 1.25rem; font-weight: 600; color: var(--ciruela); }
  .resumen-cuerpo { display: none; position: static; max-width: 560px; max-height: none; margin: 0 auto; padding-top: .5rem; }
  .pago-resumen.abierto .resumen-cuerpo { display: block; }
  .r-entrega-movil { display: block; max-width: 560px; margin: 0 auto 1rem; }
  .resumen-cuerpo .r-entrega { display: none; }
}
@media (max-width: 520px) {
  .fila-2 { grid-template-columns: minmax(0, 1fr); }
  /* en celular siguen en pareja: calle + depto. y CP + municipio (el estado abajo) */
  .fila-calle { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
  .fila-3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); }
  .fila-3 > :last-child { grid-column: 1 / -1; }
  .sin-celular { display: none; }
}

/* ---------- Gift Concierge (/pages/gift-concierge/) */
.concierge { max-width: 60rem; }
.concierge-bienvenida { text-align: center; padding: clamp(.5rem, 3vw, 2rem) 0; }
.concierge-bienvenida .intro { margin: 0 auto 1.5rem; }
.concierge-marca { margin: 0 0 .4rem; color: var(--magenta); text-transform: uppercase; letter-spacing: .14em; font-size: .88rem; font-weight: 700; }
.concierge-nota { margin: .6rem 0 0; font-size: .95rem; opacity: .8; }
.concierge-que-es { margin: 1.25rem 0 0; }
.concierge-ejemplos { margin-top: clamp(2rem, 5vw, 3.5rem); text-align: center; }
.concierge-ejemplos .intro { margin: 0 auto 1.25rem; }
.ejemplos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr)); gap: 1.25rem; text-align: left; }
.ejemplo { margin: 0; background: var(--blanco); border: 1px solid var(--lila); border-radius: 12px; overflow: hidden; }
.ejemplo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.ejemplo figcaption { display: grid; gap: .15rem; padding: .75rem 1rem 1rem; line-height: 1.35; }
.ejemplo strong { font-family: var(--titulos); font-size: 1.2rem; font-weight: 500; }
.ejemplo-datos { font-size: .92rem; color: var(--magenta); font-weight: 600; }
.ejemplo-frase { font-size: .98rem; }

.concierge-pasos { max-width: 44rem; margin: 0 auto; }
.concierge-progreso { display: grid; gap: .4rem; margin-bottom: 1.5rem; font-size: .92rem; opacity: .9; }
.concierge-barra { height: 5px; background: var(--lila); border-radius: 3px; overflow: hidden; }
.concierge-barra i { display: block; height: 100%; background: var(--magenta); border-radius: 3px; transition: width .3s ease; }
.concierge-paso h2 { margin-bottom: .2rem; outline: none; }
.concierge-paso h3 { font-family: var(--titulos); font-size: 1.4rem; font-weight: 500; margin: 1.75rem 0 .2rem; }
.concierge-ayuda { margin: 0 0 1rem; opacity: .85; }
.concierge-opcional { opacity: .7; font-weight: 400; }
.concierge-tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: .6rem; }
.concierge-tarjeta {
  position: relative; display: grid; justify-items: center; align-content: center; gap: .3rem; cursor: pointer;
  min-height: 6.5rem; padding: .8rem .5rem; text-align: center; line-height: 1.25;
  background: var(--blanco); border: 2px solid var(--lila); border-radius: var(--radio);
}
.concierge-tarjeta svg { color: var(--magenta); }
.concierge-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.concierge-chip { position: relative; cursor: pointer; }
.concierge-chip span { display: block; padding: .4rem 1rem; background: var(--blanco); border: 2px solid var(--lila); border-radius: 999px; }
.concierge-tarjeta input, .concierge-chip input { position: absolute; opacity: 0; pointer-events: none; }
.concierge-tarjeta:hover, .concierge-chip:hover span { border-color: var(--magenta); }
.concierge-tarjeta:has(input:checked), .concierge-chip input:checked + span { border-color: var(--magenta); background: var(--rubor); color: var(--magenta); font-weight: 600; }
.concierge-tarjeta:has(input:focus-visible), .concierge-chip input:focus-visible + span { outline: 3px solid var(--magenta); outline-offset: 2px; }
.concierge-campo { display: grid; gap: .35rem; margin-top: 1.25rem; font-weight: 500; }
.concierge-campo input, .concierge-campo textarea {
  font: inherit; font-weight: 400; padding: .7rem .9rem; width: 100%;
  border: 1px solid var(--lila); border-radius: var(--radio); background: var(--blanco); color: var(--ciruela);
}
.concierge-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.concierge-fila .concierge-campo { margin-top: .5rem; }
.concierge-paso .entrega-metodo { margin-top: .5rem; }
.concierge-paso .entrega-cp { margin-bottom: .5rem; }
.concierge-error { margin: 1rem 0 0; color: #a4161a; font-weight: 600; }
.concierge-error:empty { display: none; }
.concierge-botones { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 1.75rem; }
.concierge-atras { background: none; border: 0; padding: .5rem 0; font: inherit; color: var(--magenta); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

.presupuesto-texto { font-family: var(--titulos); font-size: clamp(1.6rem, 4vw, 2rem); text-align: center; margin: .75rem 0 1rem; }
.presupuesto-linea { position: relative; height: 2.25rem; margin: 0 .75rem; }
.presupuesto-riel { position: absolute; left: 0; right: 0; top: 50%; height: 6px; margin-top: -3px; background: var(--lila); border-radius: 3px; }
.presupuesto-relleno { position: absolute; top: 0; bottom: 0; background: var(--magenta); border-radius: 3px; }
.presupuesto-linea input {
  position: absolute; left: -.75rem; top: 0; width: calc(100% + 1.5rem); height: 100%; margin: 0;
  background: none; pointer-events: none; -webkit-appearance: none; appearance: none;
}
.presupuesto-linea input::-webkit-slider-runnable-track { background: none; border: 0; }
.presupuesto-linea input::-moz-range-track { background: none; border: 0; }
.presupuesto-linea input::-webkit-slider-thumb {
  -webkit-appearance: none; pointer-events: auto; cursor: grab; width: 1.75rem; height: 1.75rem;
  border-radius: 50%; background: var(--blanco); border: 3px solid var(--magenta); box-shadow: 0 1px 4px rgba(53, 0, 43, .25);
}
.presupuesto-linea input::-moz-range-thumb {
  pointer-events: auto; cursor: grab; width: 1.4rem; height: 1.4rem;
  border-radius: 50%; background: var(--blanco); border: 3px solid var(--magenta); box-shadow: 0 1px 4px rgba(53, 0, 43, .25);
}
.presupuesto-linea input:focus-visible { outline: none; }
.presupuesto-linea input:focus-visible::-webkit-slider-thumb { outline: 3px solid var(--magenta); outline-offset: 2px; }
.presupuesto-linea input:focus-visible::-moz-range-thumb { outline: 3px solid var(--magenta); outline-offset: 2px; }
.presupuesto-extremos { display: flex; justify-content: space-between; margin-top: .4rem; font-size: .95rem; opacity: .8; }

.concierge-final { text-align: center; }
.concierge-final h2 { outline: none; }
.concierge-resumen { margin: 1.25rem 0 1.5rem; padding: .5rem 1.25rem; text-align: left; background: var(--blanco); border: 1px solid var(--lila); border-radius: 12px; }
.concierge-resumen div { display: grid; grid-template-columns: 9rem 1fr; gap: 1rem; padding: .55rem 0; border-top: 1px solid var(--rubor); }
.concierge-resumen div:first-child { border-top: 0; }
.concierge-resumen dt { font-weight: 700; }
.concierge-resumen dd { margin: 0; }
.concierge-chat { font-size: 1.15rem; padding: 1rem 2.25rem; }
.concierge-final .concierge-atras { margin-top: 1rem; }
.concierge-parecidos { margin-top: 2.5rem; text-align: center; }
.concierge-parecidos .ejemplos { margin-top: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(11rem, 100%), 1fr)); }
@media (max-width: 560px) {
  .concierge-tarjetas { grid-template-columns: 1fr 1fr; }
  .concierge-fila { grid-template-columns: 1fr; }
  .concierge-resumen div { grid-template-columns: 1fr; gap: 0; }
  .concierge-botones .boton { flex: 1; }
}

/* ---------- reseñas de Google (inicio, antes del pie) */
.resenas { text-align: center; }
.resenas h2 { margin-bottom: .2rem; }
.resenas-origen { margin: 0 0 1.5rem; opacity: .8; }
.resenas-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr)); gap: 1.25rem; text-align: left; }
.resena {
  display: flex; flex-direction: column; margin: 0; padding: 1.25rem 1.4rem;
  background: var(--blanco); border: 1px solid var(--lila); border-radius: 12px;
}
.resena-estrellas { margin: 0 0 .5rem; color: #c9900c; font-size: 1.15rem; letter-spacing: .12em; }
.resena-estrellas span { color: var(--lila); }
.resena blockquote { margin: 0 0 1rem; flex: 1; line-height: 1.5; }
.resena figcaption { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.resena figcaption span { opacity: .7; font-size: .95rem; }
.resenas-botones { display: flex; justify-content: center; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }

/* ---------- carrito: "Recíbelo hoy mismo, finaliza tu pedido en…" (solo si eligió hoy)
   A la derecha de los horarios, con un reloj; en celular, si no cabe, baja debajo de ellos. */
.bloques-fila { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; }
.bloques-fila .bloques { flex: 1 1 22rem; }
.entrega-cuenta {
  flex: 0 1 17rem; margin: 0 0 0 auto;
  display: flex; align-items: center; gap: .6rem;
  padding: .55rem .85rem; border: 1.5px solid var(--magenta); border-radius: 12px;
  background: #fbe6f5; color: var(--magenta); font-size: 1rem; line-height: 1.3;
}
.entrega-cuenta[hidden] { display: none; }
.entrega-cuenta strong { font-size: 1.05em; }
.entrega-cuenta .reloj { flex: none; width: 30px; height: 30px; }
.reloj-larga, .reloj-corta { transform-origin: 12px 13px; }
.reloj-larga { animation: reloj-gira 6s linear infinite; }
@keyframes reloj-gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .reloj-larga { animation: none; } }
@media (max-width: 599px) { .entrega-cuenta { flex-basis: 100%; margin: 0; } }

/* ---------- gracias: según el pago (revisando, pendiente, no encontrado, error, confirmado) */
.gracias-botones { display: flex; flex-wrap: wrap; gap: .75rem; }
.gracias-resumen { margin: 1.5rem 0; padding: 1.25rem 1.4rem; background: var(--blanco); border: 1px solid var(--lila); border-radius: 12px; }
.gracias-resumen h2 { font-size: 1.4rem; margin: 0 0 .75rem; }
.gracias-resumen p { margin: 0 0 .4rem; }
.gr-items { list-style: none; margin: 1rem 0 .5rem; padding: .75rem 0 0; border-top: 1px solid var(--rubor); display: grid; gap: .35rem; }
.gr-items li, .gr-totales div { display: flex; justify-content: space-between; gap: 1rem; }
.gr-totales { margin: 0; padding-top: .5rem; border-top: 1px solid var(--rubor); }
.gr-totales dd { margin: 0; }
.gr-totales div:last-child { font-family: var(--titulos); font-size: 1.3rem; font-weight: 600; padding-top: .3rem; }

/* ---------- verificación "no soy robot" (Cloudflare Turnstile): solo se ve si pide marcar la casilla */
.turnstile { margin: 1rem 0 0; }
.turnstile[hidden] { display: none; }
.pago-turnstile { display: flex; justify-content: center; }

/* ---------- ficha en celular: barra fija al pie con precio y "Agregar al carrito" (cart.js, iniciarFicha) */
.barra-compra { display: none; }
@media (max-width: 800px) {
  .con-barra-compra { padding-bottom: 76px; } /* que la barra no tape el final de la página */
  .barra-compra {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 5;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: .65rem 1rem calc(.65rem + env(safe-area-inset-bottom));
    background: var(--blanco); border-top: 1px solid var(--lila); box-shadow: 0 -4px 14px rgba(53, 0, 43, .08);
    transform: translateY(110%); visibility: hidden; transition: transform .25s ease, visibility .25s;
  }
  .barra-compra.visible { transform: none; visibility: visible; }
  .barra-precio { font-family: var(--titulos); font-size: 1.35rem; font-weight: 600; white-space: nowrap; }
  .barra-compra.agregado .barra-precio { font-family: var(--texto); font-size: 1rem; font-weight: 600; color: #1f6f43; }
  .barra-agregar { flex: 1; max-width: 15rem; padding: .75rem 1rem; }
  .barra-compra-visible .whatsapp-flotante { bottom: calc(1rem + 70px); }
  .barra-compra-visible .volver-arriba { bottom: calc(1rem + 70px + 52px + .75rem); }
  .whatsapp-flotante, .volver-arriba { transition: opacity .2s ease, visibility .2s, bottom .25s ease; }
}
@media (prefers-reduced-motion: reduce) { .barra-compra { transition: none; } }
@media print { .barra-compra { display: none !important; } }

/* ---------- carrito: complementos de Shop Market (pagina-carrito.js) */
.complementos { margin: 1.5rem 0 2rem; }
.complementos h2 { font-size: 1.4rem; margin-bottom: .75rem; }
.complementos-lista { display: flex; gap: 1rem; overflow-x: auto; padding-bottom: .5rem; scroll-snap-type: x proximity; }
.complemento { flex: 0 0 9.5rem; display: flex; flex-direction: column; gap: .3rem; scroll-snap-align: start; }
.complemento-img { display: block; aspect-ratio: 1; border-radius: var(--radio); overflow: hidden; background: var(--lila); }
.complemento-img img { width: 100%; height: 100%; object-fit: cover; }
.complemento-nombre { color: var(--ciruela); text-decoration: none; line-height: 1.25; font-size: .98rem; }
.complemento-precio { font-weight: 600; }
.complemento .boton { margin-top: auto; padding: .45rem .8rem; font-size: .95rem; } /* alineados aunque el nombre sea largo */
/* computadora y tableta: 6 complementos por renglón (si hay más, se deslizan de lado) */
@media (min-width: 700px) { .complemento { flex-basis: calc((100% - 5rem) / 6); } }

/* ---------- ficha como complemento: "¿Agregamos tarjeta adicional?" (sin fondo, arriba de Cantidad) */
.tarjeta-adicional { margin-bottom: 1rem; }
/* Sí / No: 25 % más chicos que las opciones del producto y con el magenta de la marca al elegir */
.tarjeta-adicional span { padding: .375rem .75rem; font-size: .75em; border-color: var(--lila); }
.tarjeta-adicional input:checked + span { background: var(--magenta); border-color: var(--magenta); color: var(--blanco); }
.tarjeta-adicional label:hover span { border-color: var(--magenta); }
.mensaje-tarjeta[hidden] { display: none; }

/* ---------- ficha en computadora: "Agregar al carrito" y su aviso en la primera pantalla, sin bajar */
.precio-linea { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .75rem; margin-bottom: 1.5rem; }
.precio-linea .precio-grande, .precio-linea .impuesto { margin: 0; }
@media (min-width: 801px) {
  .ficha { padding-top: 1rem; }
  .ficha-info .migas { margin-bottom: .25rem; font-size: .95rem; }
  .ficha-info h1 { font-size: clamp(1.8rem, 2.4vw, 2.3rem); margin-bottom: .35rem; }
  .precio-linea { margin-bottom: 1rem; }
  .mensaje-tarjeta { margin-bottom: 1rem; }
  .mensaje-tarjeta label { font-size: 1.05rem; margin-bottom: .35rem; }
  .mensaje-tarjeta textarea { min-height: 3.6rem; resize: none; }
  .variantes { margin-bottom: 1rem; gap: .4rem; }
  .variantes legend { margin-bottom: .35rem; }
  .variantes span { padding: .35rem .8rem; font-size: .95rem; }
  /* cantidad y botón en un renglón */
  .comprar { display: flex; align-items: flex-end; gap: 1rem; }
  .comprar .cantidad { margin: 0; flex: none; }
  .comprar .agregar { flex: 1; }
  .ficha .aviso { margin: .5rem 0 .25rem; min-height: 1.5em; }
}