:root {
  /* ============================================================
     DOS COLORES, y MANDA EL ROSADO.

       rosado  #f5a7d6  el fondo de la pagina y las franjas
       blanco  #ffffff  solo lo que se levanta: barra, tarjetas,
                        fichas de producto

     El rosado es la superficie por defecto; el blanco aparece
     unicamente donde algo tiene que despegarse del fondo. Asi
     predomina el rosa sin que el contenido se pierda.

     El TEXTO va en el mismo rosado. Decision de Diego, tomada
     viendo la pagina: no entra NINGUN otro tono, aunque el rosado
     sobre crema de 1,71:1 y sobre blanco 1,85:1 (el minimo comodo
     es 4,5:1). Los tres colores salen de su logotipo y son los
     unicos que se usan.
     ============================================================ */
  --rosa: #f5a7d6;
  --crema: var(--blanco);  /* las tarjetas van en blanco: el rosado es el FONDO */
  --blanco: #ffffff;
  --tinta-rosa: var(--rosa);  /* el texto va en el mismo rosado */

  --rosa-suave: rgba(245, 167, 214, .30);
  --borde: rgba(245, 167, 214, .55);

  --shadow-soft: 0 14px 38px rgba(245, 167, 214, .35);
  --radius-lg: 24px;
  --radius-md: 16px;
  --radius-sm: 10px;

  --rosa-fuerte: var(--tinta-rosa);
  --crema-claro: var(--blanco);
  --rosa-tinta: var(--tinta-rosa);
  --fondo: var(--rosa);
  --superficie: var(--blanco);
  --lino: var(--borde);
  --tinta: var(--tinta-rosa);
  --tinta-2: var(--tinta-rosa);
  --tinta-900: var(--tinta-rosa);
  --marca: var(--rosa);
  --marca-suave: var(--rosa-suave);
  --marca-legible: var(--tinta-rosa);
  --vino: var(--tinta-rosa);
  --vino-900: var(--tinta-rosa);
  --rosado: var(--rosa);
  --rosado-soft: var(--rosa-suave);
  --rosado-deep: var(--tinta-rosa);
  --cream: var(--crema);
  --rose-100: var(--rosa-suave);
  --rose-300: var(--rosa);
  --rose-500: var(--tinta-rosa);
  --rose-700: var(--tinta-rosa);
  --ink-900: var(--tinta-rosa);
  --ink-700: var(--tinta-rosa);
  --ink-500: var(--tinta-rosa);
  --dr-vino: var(--tinta-rosa);
  --dr-vino-900: var(--tinta-rosa);
  --dr-crema: var(--crema);
  --dr-pink-bg: var(--rosa);
  --dr-pink-soft: var(--rosa-suave);
  --dr-pink: var(--rosa);
  --dr-rosado-deep: var(--tinta-rosa);
  --dr-pink-deep: var(--tinta-rosa);
  --dr-wine: var(--tinta-rosa);
  --dr-ink: var(--tinta-rosa);
}






* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Manrope', sans-serif;
  color: var(--ink-700);
  background: var(--fondo);
  min-height: 100vh;
}

h1,
h2,
h3,
h4 {
  font-family: 'Manrope', system-ui, sans-serif;
  letter-spacing: -.025em;
  color: var(--ink-900);
  line-height: 1.2;
}

p {
  line-height: 1.7;
}

a {
  text-decoration: none;
  /* Sin esto los enlaces sueltos (el correo de la pagina corporativa, por
     ejemplo) salen con el AZUL del navegador. Pasa contraste, asi que el
     auditor no lo marca, pero es el unico azul en toda la marca. */
  color: var(--marca-legible);
}
a:hover { color: var(--tinta); }


.site-main {
  padding-bottom: 5rem;
}

.container {
  max-width: min(92vw, 1150px);
}

.eyebrow {
  display: inline-block;
  margin-bottom: 0.7rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rose-700);
}

.site-navbar {
  padding: 0.9rem 0;
  background: rgba(255, 253, 249, 0.88);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(245, 167, 214, 0.1);
}

.brand-lockup {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.brand-logo {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
}


.nav-link {
  color: var(--ink-700);
  font-weight: 600;
  padding: 0.5rem 0.8rem !important;
  border-radius: 999px;
}

.nav-link:hover,
.nav-link:focus {
  color: var(--rose-700);
  background: rgba(245, 167, 214, 0.12);
}

.cart-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  border-radius: 999px;
  padding: 0.55rem 0.95rem;
  border: 1px solid rgba(245, 167, 214, 0.2);
  color: var(--ink-900);
  font-weight: 700;
  background: var(--crema);
}

.cart-pill-count {
  background: var(--ink-900);
  color: var(--crema);
  border-radius: 999px;
  min-width: 26px;
  text-align: center;
  padding: 0.1rem 0.45rem;
  font-size: 0.85rem;
}

.btn-main,
.btn-ghost,
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  font-weight: 700;
  transition: all 0.2s ease;
}

.btn-main {
  background: var(--rosa-tinta);
  color: var(--crema);
  padding: 0.8rem 1.5rem;
  box-shadow: 0 10px 24px rgba(245, 167, 214, 0.28);
}

.btn-main:hover {
  color: var(--crema);
  transform: translateY(-1px);
}

.btn-ghost {
  background: transparent;
  border: 1px solid rgba(245, 167, 214, 0.35);
  color: var(--vino);
  padding: 0.78rem 1.35rem;
}

.btn-ghost:hover {
  color: var(--vino);
  background: rgba(245, 167, 214, 0.08);
}

.btn-secondary {
  background: var(--crema);
  border: 1px solid rgba(245, 167, 214, 0.26);
  color: var(--ink-900);
  padding: 0.56rem 1.05rem;
  font-size: 0.9rem;
}

.btn-secondary:hover {
  background: rgba(245, 167, 214, 0.08);
}

.btn-linkline {
  color: var(--rose-700);
  font-weight: 700;
  font-size: 0.92rem;
}

.btn-linkline:hover {
  color: var(--ink-900);
}

.hero-premium {
  padding: 5rem 0 4.2rem;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 2.4rem;
  align-items: center;
}

.hero-copy h1 {
  font-size: clamp(2rem, 4.6vw, 3.6rem);
  margin-bottom: 1rem;
}

.hero-text {
  max-width: 56ch;
  margin-bottom: 1.4rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.hero-metrics {
  margin: 1.6rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
}

.hero-metrics li {
  background: var(--crema);
  border: 1px solid rgba(245, 167, 214, 0.14);
  border-radius: var(--radius-md);
  padding: 0.7rem;
}

.hero-metrics strong {
  display: block;
  color: var(--ink-900);
  font-size: 1.25rem;
}

.hero-metrics span {
  font-size: 0.82rem;
}

.hero-media {
  position: relative;
}

.hero-media img {
  width: 100%;
  min-height: 460px;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}

.hero-badge {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  background: rgba(245, 167, 214, 0.86);
  color: var(--crema);
  border-radius: 999px;
  padding: 0.5rem 0.9rem;
  font-size: 0.83rem;
}

.section-soft {
  padding: 4.5rem 0;
}

.section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.8rem;
}

.section-head h2,
.section-head h1 {
  margin: 0;
}

.section-head-center {
  align-items: center;
  text-align: center;
  justify-content: center;
  flex-direction: column;
}

.section-link {
  font-weight: 700;
  color: var(--rose-700);
}

.featured-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.1rem;
}

.featured-card {
  background: var(--crema);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid rgba(245, 167, 214, 0.12);
  box-shadow: 0 10px 24px rgba(245, 167, 214, 0.08);
}

.featured-image-wrap {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.featured-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}

.featured-card:hover .featured-image {
  transform: scale(1.06);
}

.featured-body {
  padding: 1rem;
}

.featured-body h3 {
  font-size: 1.15rem;
  margin-bottom: 0.5rem;
}

.featured-body p {
  font-size: 0.9rem;
  margin-bottom: 0.9rem;
}

.featured-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.featured-price {
  font-size: 1.08rem;
  color: var(--ink-900);
  font-weight: 800;
}

.btn-inline {
  border-radius: 999px;
  background: var(--rose-100);
  color: var(--rose-700);
  padding: 0.35rem 0.8rem;
  font-weight: 700;
}

.section-artisanal {
  padding: 4.5rem 0;
}

.split-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: center;
}

.check-list {
  list-style: none;
  margin: 1.1rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}

.check-list li {
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(245, 167, 214, 0.11);
  border-radius: 999px;
  padding: 0.45rem 0.85rem;
}

.collage-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.8rem;
}

.collage-grid img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
}

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

.surface-card {
  background: var(--crema);
  border: 1px solid rgba(245, 167, 214, 0.12);
  border-radius: var(--radius-md);
  padding: 1.3rem;
  box-shadow: 0 12px 26px rgba(245, 167, 214, 0.08);
}

.surface-card h3 {
  margin-bottom: 0.55rem;
}

.cta-band {
  padding: 0.5rem 0 4.5rem;
}

.cta-band-inner {
  background: linear-gradient(125deg, var(--rosa-tinta), var(--rosa-tinta));
  color: var(--crema);
  border-radius: var(--radius-lg);
  padding: 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
}

.cta-band h2 {
  color: var(--crema);
  max-width: 26ch;
}

.page-hero {
  padding: 3.1rem 0 1.6rem;
}

.page-hero h1 {
  margin: 0 0 0.7rem;
  font-size: clamp(1.8rem, 4.3vw, 3rem);
}

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

/* Catálogo chico (ej: 3 productos): la última tarjeta sola en su fila
   ocupa el ancho completo en vez de dejar un hueco al lado. */


.catalog-card {
  display: flex;
  flex-direction: column;
  background: var(--crema);
  border: 1px solid rgba(245, 167, 214, 0.12);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 12px 24px rgba(245, 167, 214, 0.08);
}

.catalog-media {
  aspect-ratio: 1 / 1;
}

.catalog-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.catalog-body {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.catalog-body h3 {
  margin: 0;
}

.catalog-desc {
  margin: 0;
  font-size: 0.92rem;
}

.catalog-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.catalog-price {
  color: var(--ink-900);
  font-size: 1.15rem;
  font-weight: 800;
}

.catalog-actions {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  flex-wrap: wrap;
}

.product-detail-wrap {
  background: var(--crema);
  border: 1px solid rgba(245, 167, 214, 0.12);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.product-detail-media img,
.single-detail-image {
  width: 100%;
  height: 100%;
  min-height: 540px;
  object-fit: cover;
}

.product-detail-content {
  padding: 2rem;
  display: flex;
  flex-direction: column;
}

.detail-price {
  font-size: 1.6rem;
  color: var(--ink-900);
  font-weight: 800;
  margin-bottom: 1rem;
}

.detail-description {
  margin-bottom: 1.2rem;
}

.detail-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.detail-badges span {
  border: 1px solid rgba(245, 167, 214, 0.22);
  border-radius: 999px;
  padding: 0.35rem 0.7rem;
  font-size: 0.83rem;
}

.detail-actions {
  margin-top: auto;
  display: flex;
  gap: 0.7rem;
  flex-wrap: wrap;
}

.product-modal-surface {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: none;
}

.cart-layout {
  display: grid;
  grid-template-columns: 1.5fr 0.8fr;
  gap: 1.2rem;
}

.cart-list {
  display: grid;
  gap: 0.8rem;
}

.cart-item {
  background: var(--crema);
  border-radius: var(--radius-md);
  border: 1px solid rgba(245, 167, 214, 0.12);
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.cart-item-main {
  display: flex;
  align-items: center;
  gap: 0.95rem;
  min-width: 0;
  flex: 1 1 auto;
}

.cart-item-media {
  width: 96px;
  min-width: 96px;
  aspect-ratio: 1 / 1;
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(145deg, var(--crema), var(--crema-claro));
  border: 1px solid rgba(245, 167, 214, 0.12);
  box-shadow: 0 12px 24px rgba(245, 167, 214, 0.08);
}

.cart-item-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cart-item-copy {
  min-width: 0;
}

.cart-item h3 {
  margin: 0;
  font-size: 1.2rem;
}

.cart-item-note {
  margin: 0.35rem 0 0;
  font-size: 0.9rem;
}

.cart-item-controls {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.line-subtotal {
  min-width: 92px;
  text-align: right;
  color: var(--ink-900);
  font-weight: 800;
}

.cart-summary {
  background: var(--crema);
  border-radius: var(--radius-md);
  border: 1px solid rgba(245, 167, 214, 0.16);
  padding: 1.2rem;
  position: sticky;
  top: 95px;
  height: fit-content;
}

.cart-summary-label {
  margin: 0;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.cart-summary-total {
  margin: 0.3rem 0 1.1rem;
  font-size: 1.95rem;
  color: var(--ink-900);
  font-weight: 800;
}

.cart-summary-note {
  margin-top: 1rem;
  font-size: 0.88rem;
}

.checkout-layout {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 1rem;
}

.checkout-summary,
.checkout-form-card,
.form-shell {
  background: var(--crema);
  border: 1px solid rgba(245, 167, 214, 0.12);
  border-radius: var(--radius-md);
  padding: 1.35rem;
  box-shadow: 0 12px 24px rgba(245, 167, 214, 0.07);
}

.checkout-list {
  list-style: none;
  margin: 1rem 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}

.checkout-list li {
  display: flex;
  justify-content: space-between;
  gap: 0.8rem;
  border-bottom: 1px dashed rgba(245, 167, 214, 0.2);
  padding-bottom: 0.45rem;
}

.checkout-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 1.1rem;
  margin: 1rem 0;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 0.85rem;
}

.form-col-6 {
  grid-column: span 6;
}

.form-col-12 {
  grid-column: span 12;
}

.form-grid label {
  display: block;
  font-weight: 700;
  margin-bottom: 0.35rem;
  color: var(--ink-900);
}

.field-input {
  width: 100%;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(245, 167, 214, 0.2);
  background: var(--crema);
  color: var(--ink-900);
  padding: 0.72rem 0.8rem;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.field-input:focus {
  border-color: var(--rose-500);
  box-shadow: 0 0 0 3px rgba(245, 167, 214, 0.16);
}

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

.field-error {
  margin: 0.33rem 0 0;
  color: var(--rosa-tinta);
  font-size: 0.84rem;
}

.form-error-box {
  border-radius: var(--radius-sm);
  background: var(--rosa-suave);
  border: 1px solid var(--rosa-suave);
  color: var(--rosa-tinta);
  padding: 0.6rem 0.7rem;
}

.split-form-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
  align-items: start;
}

.split-form-copy h1 {
  font-size: clamp(1.8rem, 4.2vw, 2.9rem);
}

.success-card {
  max-width: 760px;
  margin: 0 auto;
  padding: 2.6rem;
  border-radius: var(--radius-lg);
  background: var(--crema);
  border: 1px solid rgba(245, 167, 214, 0.14);
  box-shadow: var(--shadow-soft);
  text-align: center;
}

.success-text {
  max-width: 46ch;
  margin: 0 auto 1.3rem;
}

.empty-state {
  max-width: 740px;
  margin: 0 auto;
  text-align: center;
  background: var(--crema);
  border: 1px solid rgba(245, 167, 214, 0.13);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: 2.3rem;
}

.site-footer {
  background: var(--rosa-tinta);
  color: var(--crema);
  padding-top: 3rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 1.4rem;
}

.footer-brand {
  font-family: 'Manrope', system-ui, sans-serif;
  letter-spacing: -.025em;
  font-size: 1.6rem;
  margin-bottom: 0.4rem;
}

.footer-title {
  font-weight: 700;
  margin-bottom: 0.45rem;
}

.footer-link {
  display: block;
  color: var(--rosa-suave);
  margin-bottom: 0.45rem;
}

.footer-link:hover {
  color: var(--crema);
}

.footer-copy {
  color: var(--rosa-suave);
}

.footer-copy-tight {
  margin-bottom: 0.4rem;
}

.footer-legal {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  margin-top: 1.6rem;
  padding: 1rem 0;
  font-size: 0.85rem;
}

.whatsapp-float {
  position: fixed;
  right: 1.1rem;
  bottom: 1.2rem;
  z-index: 1060;
  background: var(--rosa-tinta);
  color: var(--crema);
  padding: 0.72rem 1.05rem;
  border-radius: 999px;
  font-weight: 700;
  box-shadow: 0 10px 24px rgba(245, 167, 214, 0.33);
}

.whatsapp-float:hover {
  color: var(--crema);
  transform: translateY(-1px);
}

.toast-cart {
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(245, 167, 214, 0.94);
  color: var(--crema);
}

.qty-control {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  border: 1px solid rgba(245, 167, 214, 0.24);
  border-radius: 999px;
  padding: 0.35rem 0.55rem;
  background: var(--crema);
}

.qty-control .btn-qty {
  border: none;
  background: var(--crema-claro);
  color: var(--ink-900);
  border-radius: 999px;
  min-width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.86rem;
  font-weight: 700;
}

.qty-control .btn-qty:hover {
  background: var(--rosa-suave);
}

.qty-control .qty {
  min-width: 22px;
  text-align: center;
  font-weight: 800;
  color: var(--ink-900);
}

.btn-add-only {
  border: none;
  border-radius: 999px;
  background: var(--rosa-tinta);
  color: var(--crema);
  font-weight: 700;
  padding: 0.55rem 1rem;
  box-shadow: 0 8px 18px rgba(245, 167, 214, 0.28);
}

.btn-add-only:hover {
  transform: translateY(-1px);
}

.alert {
  border: none;
  border-radius: 12px;
}

@media (max-width: 991px) {
  .hero-grid,
  .split-grid,
  .cart-layout,
  .checkout-layout,
  .split-form-layout {
    grid-template-columns: 1fr;
  }

  .hero-media img {
    min-height: 350px;
  }

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

  .occasion-grid {
    grid-template-columns: 1fr;
  }

  .catalog-grid {
    grid-template-columns: 1fr;
  }

  .catalog-card {
    grid-template-columns: 1fr;
  }

  .catalog-media {
    max-height: 260px;
  }

  .product-detail-wrap {
    grid-template-columns: 1fr;
  }

  .product-detail-media img,
  .single-detail-image {
    min-height: 320px;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .hero-premium {
    padding-top: 3.2rem;
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-metrics {
    grid-template-columns: 1fr;
  }

  .section-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .featured-grid {
    grid-template-columns: 1fr;
  }

  .cta-band-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .cart-item {
    flex-direction: column;
    align-items: flex-start;
  }

  .cart-item-main {
    width: 100%;
    align-items: flex-start;
  }

  .cart-item-media {
    width: 84px;
    min-width: 84px;
  }

  .cart-item-controls {
    width: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .form-col-6 {
    grid-column: span 12;
  }
}

.alert-success {
  background: var(--rosa-suave);
  color: var(--rosa-tinta);
}

.alert-error,
.alert-danger {
  background: var(--rosa-suave);
  color: var(--rosa-tinta);
}

.alert-warning {
  background: var(--rosa-suave);
  color: var(--rosa-tinta);
}

.alert-info {
  background: var(--rosa-suave);
  color: var(--rosa-tinta);
}

/* Polish responsive final */
.navbar-toggler {
  border: 1px solid rgba(245, 167, 214, 0.26);
}

.navbar-toggler:focus {
  box-shadow: 0 0 0 3px rgba(245, 167, 214, 0.18);
}

.hero-metrics li span {
  display: block;
  margin-top: 0.12rem;
}

.catalog-actions .btn-linkline {
  white-space: nowrap;
}

.checkout-subtext {
  margin-bottom: 1rem;
}

@media (max-width: 991px) {
  .navbar-collapse {
    margin-top: 0.8rem;
    padding-top: 0.6rem;
    border-top: 1px solid rgba(245, 167, 214, 0.15);
  }

  .nav-link {
    padding-left: 0.3rem !important;
  }

  .cart-pill {
    margin-top: 0.4rem;
  }
}

@media (max-width: 480px) {
  .site-main {
    padding-bottom: 4.5rem;
  }

  .hero-copy h1 {
    font-size: 1.9rem;
  }

  .hero-text {
    font-size: 0.97rem;
  }

  .success-card,
  .empty-state,
  .checkout-summary,
  .checkout-form-card,
  .form-shell,
  .cart-summary {
    padding: 1rem;
  }

  .whatsapp-float {
    right: 0.75rem;
    bottom: 0.85rem;
    padding: 0.65rem 0.9rem;
    font-size: 0.92rem;
  }
}

/* Interactividad premium */
.site-navbar {
  transition: background-color .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.site-navbar.is-scrolled {
  background: rgba(255, 252, 249, 0.95);
  box-shadow: 0 10px 24px rgba(245, 167, 214, 0.08);
  border-bottom-color: rgba(245, 167, 214, 0.18);
}

.reveal-item {
  opacity: 0;
  transform: translateY(18px) scale(0.995);
  transition: opacity .46s ease, transform .46s cubic-bezier(.2, .75, .25, 1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

.reveal-item.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.cart-pill-count.is-bump {
  animation: cartBump .36s ease;
}

@keyframes cartBump {
  0% { transform: scale(1); }
  45% { transform: scale(1.22); }
  100% { transform: scale(1); }
}

.btn-add-only.is-success,
.qty-control .btn-qty.is-success,
.btn-view.is-success {
  box-shadow: 0 0 0 3px rgba(245, 167, 214, 0.25);
}

.btn-add-only.is-busy,
.qty-control .btn-qty.is-busy,
.btn-view.is-busy {
  opacity: .72;
  pointer-events: none;
}

button.is-loading,
input[type="submit"].is-loading {
  position: relative;
  opacity: .86;
  pointer-events: none;
}

button.is-loading::after,
input[type="submit"].is-loading::after {
  content: "";
  width: 14px;
  height: 14px;
  margin-left: 8px;
  border: 2px solid rgba(255,255,255,.65);
  border-top-color: var(--crema);
  border-radius: 50%;
  display: inline-block;
  vertical-align: middle;
  animation: spin .7s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.modal.show .product-modal-surface {
  animation: modalLift .26s ease;
}

@keyframes modalLift {
  from { opacity: .72; transform: translateY(8px) scale(.995); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  html:focus-within { scroll-behavior: auto; }
  .reveal-item,
  .site-navbar,
  .cart-pill-count,
  .modal.show .product-modal-surface,
  .btn-add-only,
  .qty-control .btn-qty,
  .btn-view {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }
}

/* Catalogo: capa premium focalizada */
.catalog-experience {
  position: relative;
}

.catalog-grid {
  align-items: stretch;
}

.catalog-card-premium {
  position: relative;
  isolation: isolate;
  transition: transform .26s ease, box-shadow .26s ease, border-color .26s ease;
}

.catalog-card-premium::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  border: 1px solid transparent;
  background: linear-gradient(125deg, rgba(245, 167, 214, 0.16), rgba(255, 255, 255, 0)) border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .26s ease;
}

.catalog-card-premium:hover,
.catalog-card-premium.is-hovered {
  transform: translateY(-4px);
  box-shadow: 0 18px 30px rgba(245, 167, 214, 0.12);
  border-color: rgba(245, 167, 214, 0.26);
}

.catalog-card-premium:hover::after,
.catalog-card-premium.is-hovered::after {
  opacity: 1;
}

.catalog-card-premium .catalog-media {
  overflow: hidden;
}

.catalog-card-premium .catalog-image {
  transform-origin: center;
  transition: transform .42s cubic-bezier(.2, .8, .3, 1), filter .32s ease;
}

.catalog-card-premium:hover .catalog-image,
.catalog-card-premium.is-hovered .catalog-image {
  transform: scale(1.045);
  filter: saturate(1.03);
}

.catalog-card-premium .catalog-cta {
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background-color .2s ease;
}

.catalog-card-premium .catalog-cta:hover,
.catalog-card-premium .catalog-cta:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 7px 14px rgba(245, 167, 214, 0.12);
}

.catalog-card-premium .qty-control {
  transition: border-color .22s ease, box-shadow .22s ease;
}

.catalog-card-premium .qty-control:hover,
.catalog-card-premium .qty-control:focus-within {
  border-color: rgba(245, 167, 214, 0.38);
  box-shadow: 0 0 0 2px rgba(245, 167, 214, 0.12);
}

@media (max-width: 640px) {
  .catalog-card-premium:hover,
  .catalog-card-premium.is-hovered {
    transform: translateY(-2px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .catalog-card-premium,
  .catalog-card-premium::after,
  .catalog-card-premium .catalog-image,
  .catalog-card-premium .catalog-cta,
  .catalog-card-premium .qty-control {
    transition: none !important;
    transform: none !important;
  }
}

/* Catalogo y home comercial editable */
.catalog-filter-bar {
  display: grid;
  grid-template-columns: 2fr 1fr auto auto;
  gap: 0.8rem;
  align-items: end;
}

.catalog-filter-main .form-label,
.catalog-filter-bar .form-label {
  font-weight: 700;
  color: var(--ink-900);
  margin-bottom: 0.25rem;
}

.catalog-filter-actions {
  display: flex;
  gap: 0.55rem;
  flex-wrap: wrap;
}

.catalog-filter-check {
  padding-bottom: 0.45rem;
}

.catalog-tags {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.catalog-tag {
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  border: 1px solid rgba(245, 167, 214, 0.2);
  background: rgba(245, 167, 214, 0.1);
  color: var(--ink-900);
  padding: 0.18rem 0.6rem;
}

.catalog-tag-muted {
  background: var(--crema-claro);
  color: var(--rosa-tinta);
}

.faq-list {
  display: grid;
  gap: 0.9rem;
}

.faq-item h3 {
  margin-bottom: 0.45rem;
}

@media (max-width: 991px) {
  .catalog-filter-bar {
    grid-template-columns: 1fr;
  }
}



html {
  scroll-behavior: smooth;
  /* La cabecera va pegada arriba: sin esto, saltar a un ancla deja el
     destino DEBAJO de la barra. La altura la mide el JS, porque cambia
     cuando el aviso se parte en dos lineas o cuando la barra se compacta. */
  scroll-padding-top: var(--alto-cabecera, 110px);
}

/* La cabecera se compacta al bajar: devuelve pantalla al contenido y da
   la señal de que la pagina se movio. */
.dr-cabecera { transition: box-shadow .25s ease; }
.dr-cabecera.encogida { box-shadow: 0 6px 22px rgba(245, 167, 214, .10); }
.dr-cabecera.encogida .dr-topbar {
  padding-top: 3px; padding-bottom: 3px; font-size: .66rem;
}
.dr-cabecera .dr-topbar,
.dr-cabecera .dr-logo-img { transition: all .25s ease; }
.dr-cabecera.encogida .dr-logo-img { height: 46px; }

/* ============================================================
   Seccion "Dulce Rosa" — cabecera, hero, grilla de productos,
   footer y componentes propios del rediseño 2026-08.
   ============================================================ */

.dr-cabecera {
  position: sticky;
  top: 0;
  /* Por encima de los botones flotantes (1045-1046) y del carrito (1060),
     que si no se montan sobre la cabecera al hacer scroll. */
  z-index: 1070;
}

/* ---------- Barra superior (announcement) ---------- */
/* La franja lleva un rosa apenas mas oscuro que --rosa-medio: con el tono de
   la referencia el crema encima daba 3,68:1 y no llegaba a AA. Es el tono MAS
   CLARO del mismo matiz que todavia se lee (4,5:1). La referencia tiene el
   mismo problema (3,96:1) -- se prefirio que se lea. */
.dr-topbar {
  background: var(--rosa);
  color: var(--blanco);
  text-align: center;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 7px 12px;
}

/* ---------- Navbar Propuesta 1 ---------- */
.site-navbar.dr-nav {
  background: var(--blanco) !important;
  border-bottom: 1px solid var(--rosa-suave);
  box-shadow: 0 6px 24px rgba(245, 167, 214, .07);
  padding-top: .55rem;
  padding-bottom: .55rem;
}
/* Logo en imagen (reemplaza el texto) */
/* El logo nuevo es un wordmark apaisado y SIN aire alrededor. El archivo
   viejo era un JPEG cuadrado con mucho margen pintado, por eso necesitaba
   190px de alto para leerse: el mismo valor aca seria enorme. */
.dr-logo-img { height: 62px; width: auto; display: block; }
.dr-logo-foot { height: 76px; width: auto; display: block; }
@media (max-width: 992px) { .dr-logo-img { height: 48px; } }

.dr-nav .nav-link {
  color: var(--rosa-tinta) !important;
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;   /* cada opción en una sola línea */
}
.dr-nav .nav-link:hover { color: var(--tinta-900) !important; }

/* Menú en una sola fila; en pantallas medianas se achica un poco para no desbordar */
.dr-nav .navbar-nav { column-gap: 1.5rem; }
@media (min-width: 992px) and (max-width: 1299.98px) {
  .dr-nav .nav-link { font-size: .85rem; letter-spacing: .05em; }
  .dr-nav .navbar-nav { column-gap: .9rem; }
  .dr-pedido { padding: .78rem 1.4rem !important; font-size: .82rem; }
  .dr-logo-img { height: 52px; }
}

/* Botón CTA: fondo blanco, letra rosada */
/* Mayor especificidad que ".dr-nav .nav-link {color:#fff}" para que NO quede
   texto blanco sobre fondo blanco (el botón se veía vacío). */
.dr-nav .nav-link.dr-pedido,
.dr-nav .nav-link.dr-pedido:hover,
.dr-nav .nav-link.dr-pedido:focus { color: var(--blanco) !important; }
.dr-pedido {
  background: var(--rosa-fuerte);
  color: var(--blanco) !important;
  border-radius: 999px;
  padding: .9rem 2rem !important;
  font-weight: 800 !important;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: .95rem;
  box-shadow: 0 8px 18px rgba(245, 167, 214, .18);
  transition: transform .15s ease, background .2s ease, color .2s ease;
}
/* En hover se mantiene blanco con letra rosada (solo un leve realce). */
.dr-pedido:hover,
.dr-pedido:focus {
  background: var(--rosa);
  color: var(--dr-pink-deep) !important;
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(245, 167, 214, .26);
}


/* ---------- Botón hamburguesa ---------- */
.dr-nav .navbar-toggler {
  border: 1px solid rgba(255, 255, 255, .85);
  border-radius: 12px;
  padding: .3rem .55rem;
  background: var(--fondo);   /* mismo tono que la barra */
}
.dr-nav .navbar-toggler:focus { box-shadow: 0 0 0 .2rem rgba(255, 255, 255, .45); }
.dr-nav .navbar-toggler-icon {
  /* líneas blancas */
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23ffffff' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.6' d='M5 8h20M5 15h20M5 22h20'/%3e%3c/svg%3e");
}

/* ---------- Animación del menú: rápida y limpia ---------- */
.dr-nav .navbar-collapse.collapsing { transition: height .2s ease; }

/* ---------- Carrito flotante (abajo-centro) ---------- */
.dr-cart-fab {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--rosa-tinta); color: var(--crema) !important;
  padding: .62rem 1.2rem; border-radius: 999px;
  box-shadow: 0 12px 28px rgba(245, 167, 214, .5);
  z-index: 1045; font-weight: 700; font-size: .9rem; text-decoration: none;
  transition: transform .28s cubic-bezier(.34,1.56,.64,1), opacity .25s ease;
}
.dr-cart-fab:hover { transform: translateX(-50%) translateY(-3px); }
.dr-cart-fab i { font-size: 1.2rem; }
.dr-cart-fab-count {
  background: var(--crema); color: var(--dr-pink-deep); border-radius: 999px;
  min-width: 20px; height: 20px; padding: 0 6px; font-size: .78rem; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
}
.dr-cart-fab.is-empty { opacity: 0; transform: translateX(-50%) translateY(140%); pointer-events: none; }
#cart-count.is-bump { animation: dr-fabpop .42s ease; }
@keyframes dr-fabpop { 0%{transform:scale(1)} 45%{transform:scale(1.3)} 100%{transform:scale(1)} }

/* ---------- Hero carrusel ---------- */
/* Las fotos reales son retrato (3:4), no panorámicas. Antes se metían en una
   franja ancha y baja (cover recortaba el producto; contain dejaba bordes
   borrosos enormes a los lados — a la dueña no le gustó). Ahora el hero ES
   una tarjeta vertical del mismo alto/ancho que la foto: la foto llena todo
   el marco, sin recorte de producto y sin bordes borrosos. */
.dr-hero { position: relative; background: var(--fondo); padding: 2.6rem 0 2.2rem; }
.dr-hero-frame { position: relative; width: min(88vw, 440px); margin: 0 auto; }

.dr-hero .carousel-item {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
  background: var(--dr-vino);
}
.dr-hero-bg { display: none; }
.dr-hero-photo {
  position: absolute; inset: 0; z-index: 2;
  width: 100%; height: 100%;
  object-fit: cover;
}
.dr-hero .carousel-item::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(0deg, rgba(245, 167, 214, .62) 0%, transparent 34%);
}

.dr-hero-card {
  position: absolute; left: 5%; right: 5%; bottom: 6%; z-index: 5;
  background: rgba(245, 167, 214, .5);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 14px;
  padding: .85rem 1rem;
  color: var(--crema);
}
.dr-hero-eyebrow {
  font-size: .62rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--dr-pink); font-weight: 700; margin-bottom: .25rem;
}
.dr-hero-title {
  font-family: 'Manrope', system-ui, sans-serif;
  letter-spacing: -.025em;
  font-size: 1.2rem; line-height: 1.15; color: var(--crema); margin: 0 0 .3rem;
}
.dr-hero-price { font-size: 1.05rem; font-weight: 700; margin-bottom: .6rem; }
.dr-hero-btn {
  display: inline-block; background: var(--rosa-tinta); color: var(--crema);
  border-radius: 999px; padding: .55rem 1.4rem; font-weight: 700;
  letter-spacing: .04em; box-shadow: 0 10px 22px rgba(245, 167, 214, .5);
}
.dr-hero-btn:hover { background: var(--crema); color: var(--dr-vino); }
.dr-hero .carousel-indicators [data-bs-target] { background-color: var(--dr-pink); }

/* ---------- Sello de marca sobre el hero (nuevo logo) ---------- */
.dr-hero-sello {
  position: absolute;
  z-index: 6;
  top: -22px;
  right: -14px;
  width: 108px;
  height: 108px;
  object-fit: cover;
  border-radius: 50%;
  border: 4px solid var(--dr-crema);
  box-shadow: 0 14px 30px rgba(245, 167, 214, .35);
  transform: rotate(8deg);
  background: var(--superficie);
}
@media (max-width: 480px) {
  .dr-hero-sello { width: 82px; height: 82px; top: -14px; right: -8px; border-width: 3px; }
}

/* Desktop: las 3 fotos van lado a lado (una franja vertical sola se veía
   muy vacía en pantalla ancha, feedback directo de la dueña) — se
   desactiva el carrusel (flechas/puntos) y se muestran todas juntas.
   Va DESPUÉS de las reglas base de .carousel-item (misma especificidad,
   gana la que está más abajo en el archivo) para que sí las pise. */
@media (min-width: 992px) {
  .dr-hero-frame { width: 100%; max-width: 1150px; padding: 0 1.5rem; }
  .dr-hero .carousel-indicators,
  .dr-hero .carousel-control-prev,
  .dr-hero .carousel-control-next { display: none; }
  .dr-hero .carousel-inner {
    display: flex;
    gap: 1.2rem;
  }
  .dr-hero .carousel-item {
    display: block !important;
    position: relative !important;
    opacity: 1 !important;
    transform: none !important;
    aspect-ratio: auto !important;
    flex: none !important;
    width: calc((100% - 2.4rem) / 3) !important;
    height: 480px !important;
    margin-right: 0 !important;
  }
}

/* ---------- Video: así trabajamos ---------- */
/* El video es retrato (celular), no panorámico — se muestra completo y centrado
   sobre fondo vino en vez de forzarlo a cover (quedaba gigante, recortado y
   borroso por el zoom). Mismo tratamiento de "marco" que el hero. */
.dr-work-video {
  position: relative;
  background: var(--rosa);
  padding: 2.2rem 0;
  display: flex;
  justify-content: center;
}
.dr-work-video-el {
  max-width: min(92%, 300px);
  max-height: 52vh;
  width: auto; height: auto;
  object-fit: contain;
  display: block;
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .4);
}
.dr-work-video-caption {
  position: absolute; left: 50%; bottom: 1.6rem; z-index: 2;
  transform: translateX(-50%);
  background: rgba(254, 246, 225, .95);
  color: var(--dr-vino);
  font-family: 'Manrope', system-ui, sans-serif;
  letter-spacing: -.025em;
  font-size: 1.05rem;
  padding: .6rem 1.2rem;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
}
@media (max-width: 992px) {
  .dr-work-video { padding: 2rem 0 3.2rem; }
  .dr-work-video-el { max-height: 55vh; }
  .dr-work-video-caption { font-size: .8rem; padding: .5rem 1rem; bottom: 1.1rem; white-space: normal; text-align: center; max-width: 88%; }
}

/* ---------- Sección productos (grilla edge-to-edge) ---------- */
.dr-products { padding: 3.2rem 0 1rem; }
.dr-products-title {
  text-align: center;
  font-family: 'Manrope', system-ui, sans-serif;
  letter-spacing: -.025em;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--dr-vino);
  font-size: 1.45rem;
  margin-bottom: .4rem;
}
.dr-products-sub {
  text-align: center; color: var(--dr-ink); opacity: .7;
  margin-bottom: 2rem; font-size: .95rem;
}
.dr-products-title::after {
  content: ""; display: block; width: 64px; height: 3px; margin: .7rem auto 0;
  background: var(--dr-pink-bg); border-radius: 3px;
}

.dr-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 6px;
}
.dr-tile {
  position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden;
  background: var(--dr-pink-soft);
}
.dr-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.dr-tile:hover img { transform: scale(1.06); }
.dr-tile-overlay {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  justify-content: flex-end; padding: 1rem;
  background: linear-gradient(to top, rgba(245, 167, 214, .72), rgba(245, 167, 214, 0) 55%);
  opacity: 0; transition: opacity .3s ease;
}
.dr-tile:hover .dr-tile-overlay { opacity: 1; }
.dr-tile-name { color: var(--crema); font-weight: 700; font-size: .98rem; line-height: 1.2; }
.dr-tile-price { color: var(--dr-pink); font-weight: 700; font-size: .9rem; }

.dr-products-cta { text-align: center; margin: 2.4rem 0 .5rem; }
.dr-btn-wine {
  display: inline-block; background: var(--rosa-tinta); color: var(--crema);
  border-radius: 999px; padding: .7rem 2rem; font-weight: 700; letter-spacing: .05em;
}
.dr-btn-wine:hover { background: var(--rosa-tinta); color: var(--crema); }

/* ---------- Franja corporativa ---------- */
.dr-corp {
  margin: 2rem 0 0; padding: 3.4rem 0;
  background: var(--superficie);
  border-top: 1px solid rgba(245, 167, 214, .14);
  text-align: center;
}
.dr-corp h2 { font-family: 'Manrope', system-ui, sans-serif;
  letter-spacing: -.025em; color: var(--dr-pink-deep); }
.dr-corp p { color: var(--dr-ink); max-width: 620px; margin: .6rem auto 1.4rem; }

/* ---------- Footer rosado (mismo de la franja del navbar) ---------- */
.site-footer.dr-foot { background: var(--rosa); }
/* El pie paso de vino a rosado: el texto blanco daba 1.85:1 y no se leia.
   Sobre rosado el unico color con contraste real es la tinta (8.81:1). */
.dr-foot,
.dr-foot .footer-copy,
.dr-foot .footer-link,
.dr-foot .footer-title,
.dr-foot .footer-legal { color: var(--blanco); }
.dr-foot .footer-link:hover { color: var(--rosa); }
.dr-foot .footer-legal { border-top-color: rgba(255, 255, 255, .3); }
/* "Navegación" y "Atención" con la misma fuente del navbar (Manrope) */
.dr-foot .footer-title {
  font-family: 'Manrope', system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .8rem;
  font-weight: 700;
}

/* ---------- Fotos decorativas para páginas internas ---------- */
.dr-page-photo {
  width: 100%; max-height: 300px; object-fit: cover; display: block;
  border-radius: 16px; margin-top: 1.5rem;
  border: 2px solid var(--dr-pink-bg);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .07);
}
.dr-card-photo {
  width: 100%; height: 150px; object-fit: cover; display: block;
  border-radius: 12px; margin-bottom: .9rem;
}

/* ---------- Botones flotantes de redes (abajo-derecha) ---------- */
.dr-social-float {
  position: fixed; right: 16px; bottom: 18px; z-index: 1046;
  display: flex; flex-direction: column; gap: .6rem;
}
.dr-social-btn {
  width: 48px; height: 48px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--dr-pink-bg); color: var(--crema) !important;
  font-size: 1.45rem; text-decoration: none;
  box-shadow: 0 8px 20px rgba(245, 167, 214, .28);
  transition: transform .2s ease;
}
.dr-social-btn:hover { transform: translateY(-2px); color: var(--crema) !important; }

@media (max-width: 992px) {
  .dr-hero-frame { width: min(90vw, 380px); }
  .dr-products { padding-top: 2.2rem; }
  .dr-products-title { font-size: 1.15rem; letter-spacing: .16em; }
  .dr-products-sub { font-size: .88rem; margin-bottom: 1.4rem; }
  /* barra superior más compacta */
  .dr-topbar { font-size: .6rem; letter-spacing: .08em; padding: 6px 10px; line-height: 1.3; }
  /* grilla a 2 columnas en móvil */
  .dr-grid { grid-template-columns: repeat(2, 1fr); gap: 5px; }
  .dr-tile-overlay { opacity: 1; padding: .55rem; background: linear-gradient(to top, rgba(245, 167, 214, .78), rgba(245, 167, 214, 0) 60%); }
  .dr-tile-name { font-size: .82rem; }
  .dr-tile-price { font-size: .8rem; }
  /* Card de producto en móvil: imagen full-width cuadrada, sin huecos */
  .catalog-card { grid-template-columns: 1fr !important; }
  .catalog-card .catalog-media { aspect-ratio: 1 / 1; max-height: none; width: 100%; }
  .catalog-card .catalog-image { width: 100%; height: 100%; object-fit: cover; display: block; }
  /* ---- Menú móvil prolijo ---- */
  .dr-nav .navbar-collapse {
    margin-top: .5rem;
    border-top: 1px solid rgba(255, 255, 255, .25);
    padding-top: .25rem;
  }
  .dr-nav .navbar-nav { width: 100%; }
  .dr-nav .navbar-nav .nav-item { width: 100%; }
  .dr-nav .navbar-nav .nav-link {
    display: block;
    width: 100%;
    padding: .85rem .25rem;
    border-bottom: 1px solid rgba(255, 255, 255, .22);
  }
  /* fila de acción: botón ancho + carrito a la derecha */
  .dr-nav-actions {
    width: 100%;
    gap: 1rem;
    align-items: center;
    padding: .9rem 0 .3rem;
  }
  .dr-nav-actions .dr-pedido { flex: 1 1 auto; text-align: center; }
  .dr-corp { padding: 2.2rem 0; }

  /* ---- Logo centrado en móvil (hamburguesa a la derecha) ---- */
  .dr-nav .container { position: relative; justify-content: center; }
  .dr-brand {
    margin: 0 auto;
    max-width: calc(100% - 7rem); /* deja espacio para el toggler */
    justify-content: center;
  }
  .dr-nav .navbar-toggler {
    position: absolute;
    right: .25rem;
    top: .55rem;        /* fijo: no se desvía al abrir el menú */
    margin: 0;
    z-index: 2;
  }
}

/* ============================================================
   Identidad Instagram — hero, cinta viva, mosaico y minimo de
   compra. Todo el movimiento de aca respeta prefers-reduced-
   motion: quien pide menos animacion recibe la pagina QUIETA,
   no una version rota.
   ============================================================ */

/* ---------- Hero de marca ---------- */
.ig-hero {
  position: relative;
  background: var(--fondo);
  padding: 3.2rem 0 2.4rem;
  overflow: hidden;
}
/* Dos manchas rosadas muy suaves: dan color al blanco sin ensuciar
   las fotos, que son lo unico que tiene que gritar. */
.ig-hero::before,
.ig-hero::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .55;
  pointer-events: none;
}
.ig-hero::before { width: 460px; height: 460px; background: var(--marca); top: -190px; left: -130px; }
.ig-hero::after  { width: 380px; height: 380px; background: var(--crema); bottom: -170px; right: -110px; }

.ig-hero__caja {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 2.6rem;
  align-items: center;
}
.ig-hero__logo { width: min(330px, 72%); height: auto; display: block; margin-bottom: 1.1rem; }
.ig-hero__claim {
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: clamp(2rem, 4.4vw, 3.1rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.03em;
  color: var(--tinta);
  margin: 0 0 .7rem;
  text-wrap: balance;
}
.ig-hero__claim em { font-style: normal; color: var(--marca-legible); }
.ig-hero__bajada {
  font-size: 1.02rem;
  color: var(--tinta-2);
  max-width: 42ch;
  margin: 0 0 1.5rem;
}
.ig-hero__acciones { display: flex; flex-wrap: wrap; gap: .7rem; }

/* Collage: tres fotos que respiran, cada una con su propio ritmo.
   Sin esto el hero es una foto sola y se ve vacio. */
.ig-hero__collage {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(2, 158px);
  gap: .85rem;
}
.ig-hero__collage img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  animation: flotar 7s ease-in-out infinite;
}
.ig-hero__collage img:nth-child(1) { grid-row: span 2; height: 100%; animation-delay: -1.4s; }
.ig-hero__collage img:nth-child(3) { animation-delay: -3.1s; }
@keyframes flotar {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-11px) rotate(-.7deg); }
}

/* ---------- Cinta de fotos en movimiento ---------- */
.ig-cinta { background: var(--marca); padding: 1.1rem 0; overflow: hidden; }
.ig-cinta__pista {
  display: flex;
  gap: 1rem;
  width: max-content;
  animation: desfilar 38s linear infinite;
}
.ig-cinta:hover .ig-cinta__pista { animation-play-state: paused; }
.ig-cinta__pista img {
  height: 168px; width: auto;
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 20px rgba(245, 167, 214, .16);
}
/* La pista lleva la lista DOS veces y se corre exactamente la mitad:
   asi el salto del bucle cae en un punto identico y no se ve el corte. */
@keyframes desfilar {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---------- Banda del minimo de compra ---------- */
.ig-minimo {
  background: var(--rosa);
  color: var(--blanco);
  text-align: center;
  padding: 1.5rem 1rem;
}
.ig-minimo b {
  display: block;
  font-size: clamp(1.15rem, 2.6vw, 1.6rem);
  font-weight: 800;
  letter-spacing: -.01em;
}
.ig-minimo span { font-size: 1.18rem; font-weight: 700; }  /* a este tamano y peso, 3,18:1 ya se lee (regla de texto grande) */
.ig-minimo__linea { display: inline-flex; align-items: center; gap: .45rem; flex-wrap: wrap; justify-content: center; }
.ig-minimo__chip {
  display: inline-flex; align-items: center;
  background: var(--crema); border-radius: 999px; padding: .28rem .6rem;
  line-height: 0;
}
.ig-minimo__chip img { height: 19px; width: auto; }

/* ---------- Mosaico ---------- */
.ig-mosaico {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
  gap: 1rem;
}
.ig-mosaico figure {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-md);
  aspect-ratio: 4 / 5;
  box-shadow: var(--shadow-soft);
}
.ig-mosaico img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .55s cubic-bezier(.2, .7, .3, 1);
}
.ig-mosaico figure:hover img { transform: scale(1.07); }
.ig-mosaico figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 1.5rem .9rem .8rem;
  color: var(--crema);
  font-weight: 700;
  font-size: .92rem;
  /* El degradado no es adorno: sin el, el texto blanco cae sobre
     zonas claras de la foto y deja de leerse. */
  background: linear-gradient(to top, rgba(245, 167, 214, .82), rgba(245, 167, 214, 0));
  transform: translateY(6px);
  opacity: 0;
  transition: opacity .3s ease, transform .3s ease;
}
.ig-mosaico figure:hover figcaption,
.ig-mosaico figure:focus-within figcaption { opacity: 1; transform: translateY(0); }

@media (max-width: 860px) {
  .ig-hero__caja { grid-template-columns: 1fr; gap: 1.8rem; }
  .ig-hero__collage { grid-template-rows: repeat(2, 124px); }
  .ig-cinta__pista img { height: 118px; }
  /* En un telefono, minmax(232px) deja UNA columna: ocho fotos a pantalla
     completa, una tras otra. Dos columnas dejan la galeria recorrible. */
  .ig-mosaico { grid-template-columns: repeat(2, 1fr); gap: .6rem; }
}

/* El que pide menos movimiento recibe la pagina COMPLETA y quieta.
   Nada de esconder contenido: se anula el desplazamiento inicial. */
@media (prefers-reduced-motion: reduce) {
  .ig-hero__collage img,
  .ig-cinta__pista { animation: none !important; }
  .ig-mosaico figure:hover img { transform: none; }
}

.sutil-minimo {
  display: inline-block;
  background: var(--marca-suave);
  color: var(--tinta);
  border-radius: 999px;
  padding: .35rem .9rem;
  font-size: .87rem;
  font-weight: 600;
  margin: .3rem 0 0;
}

/* ---------- Encargos: la caja armada a pedido ---------- */
.ig-encargos { background: var(--rosa); padding: 3.4rem 0; }
.ig-encargos__caja {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.6rem;
  align-items: center;
}
/* Dos fotos superpuestas: la segunda asomando da la idea de que hay MAS de un
   encargo, que es justo lo que se quiere contar. */
.ig-encargos__foto { position: relative; }
.ig-encargos__foto img {
  width: 100%; height: auto; display: block;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}
.ig-encargos__foto2 {
  position: absolute; right: 0; bottom: 0;
  width: 42% !important;
  border: 5px solid var(--superficie);
  border-radius: var(--radius-md) !important;
}
.ig-encargos__titulo {
  font-size: clamp(1.6rem, 3.2vw, 2.3rem);
  font-weight: 800; letter-spacing: -.025em;
  color: var(--tinta); margin: .1rem 0 .6rem;
  text-wrap: balance;
}
.ig-encargos__texto { color: var(--tinta-2); max-width: 46ch; margin-bottom: 1.2rem; }
.ig-encargos__caso {
  background: var(--fondo);
  border: 1px solid var(--lino);
  border-radius: var(--radius-md);
  padding: 1rem 1.2rem;
  margin-bottom: 1.3rem;
}
.ig-encargos__caso-tit {
  font-size: .74rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .1em; color: var(--marca-legible); margin: 0 0 .5rem;
}
.ig-encargos__lista { margin: 0; padding: 0; list-style: none; display: grid; gap: .3rem; }
.ig-encargos__lista li {
  position: relative; padding-left: 1.1rem;
  font-size: .93rem; color: var(--tinta);
}
.ig-encargos__lista li::before {
  content: ''; position: absolute; left: 0; top: .55em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--marca);
}

@media (max-width: 860px) {
  .ig-encargos__caja { grid-template-columns: 1fr; gap: 1.6rem; }
}

/* ---------- Varios videos del obrador ---------- */
.ig-videos {
  display: flex;
  gap: 1.1rem;
  justify-content: center;
  flex-wrap: wrap;
}
.ig-video { margin: 0; width: min(280px, 78vw); }
.ig-video video {
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  background: var(--lino);
  display: block;
}
.ig-video figcaption {
  text-align: center;
  font-size: .88rem;
  font-weight: 600;
  color: var(--tinta-2);
  margin-top: .6rem;
}
@media (max-width: 720px) {
  /* En telefono se recorren de lado en vez de apilarse: dos videos
     verticales uno debajo del otro son dos pantallas de scroll. */
  .ig-videos {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    scroll-snap-type: x mandatory;
    padding-bottom: .5rem;
    -webkit-overflow-scrolling: touch;
  }
  .ig-video { flex: 0 0 auto; width: 68vw; scroll-snap-align: center; }
}


/* ============================================================
   Tarjeta del catalogo: compacta, sin descripcion, y la pieza
   entera abre el detalle.
   ============================================================ */
.catalog-card {
  overflow: hidden;
  border-radius: var(--radius-md);
  border: 1px solid var(--lino);
  background: var(--fondo);
  transition: transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease;
}
.catalog-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-2, 0 16px 36px rgba(245, 167, 214, .13)); }
.catalog-card:focus-within { outline: 2px solid var(--marca-legible); outline-offset: 2px; }

/* Es un <button> para que se pueda llegar con el teclado; hay que apagarle
   los estilos propios del boton para que se vea como parte de la tarjeta. */
.catalog-card__abrir {
  display: block; width: 100%; text-align: left;
  background: none; border: 0; padding: 0; cursor: pointer; color: inherit;
  font: inherit;
}
.catalog-media { position: relative; display: block; overflow: hidden; aspect-ratio: 1 / 1; }
.catalog-image {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .6s cubic-bezier(.2,.7,.3,1);
}
.catalog-card:hover .catalog-image { transform: scale(1.08); }
.catalog-tag--flota {
  position: absolute; top: .55rem; left: .55rem;
  background: var(--marca); color: var(--tinta);
  font-size: .68rem; font-weight: 800; letter-spacing: .04em;
  padding: .18rem .5rem; border-radius: 999px;
}
.catalog-card__pie {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: .5rem; padding: .7rem .8rem .2rem;
}
.catalog-card__nombre {
  font-weight: 700; font-size: .95rem; line-height: 1.25; color: var(--tinta);
}
.catalog-price { font-weight: 800; color: var(--marca-legible); white-space: nowrap; }
.catalog-price small { font-weight: 600; font-size: .72rem; opacity: .75; }
.catalog-actions { padding: .55rem .8rem .8rem; }
.catalog-actions .btn-add-only,
.catalog-actions .qty-control { width: 100%; }
.catalog-actions .qty-control { display: flex; justify-content: space-between; align-items: center; }

@media (max-width: 900px) { .catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; } }

/* ============================================================
   Movimiento. Todo lo de aca se apaga entero mas abajo para
   quien pide menos animacion: el bloque de reduced-motion es
   parte de la funcionalidad, no un extra.
   ============================================================ */

/* El hero entra en cascada, no todo de golpe. */
@keyframes entraArriba {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}
.ig-hero__logo   { animation: entraArriba .75s cubic-bezier(.2,.7,.3,1) both; }
.ig-hero__claim  { animation: entraArriba .75s cubic-bezier(.2,.7,.3,1) .10s both; }
.ig-hero__bajada { animation: entraArriba .75s cubic-bezier(.2,.7,.3,1) .18s both; }
.ig-hero__acciones { animation: entraArriba .75s cubic-bezier(.2,.7,.3,1) .26s both; }

/* Las tarjetas del catalogo aparecen una despues de otra. El retardo se
   corta a la sexta: mas alla, el visitante ya espera en vez de disfrutar. */
.catalog-card { animation: entraArriba .6s cubic-bezier(.2,.7,.3,1) both; }
.catalog-card:nth-child(1) { animation-delay: .04s; }
.catalog-card:nth-child(2) { animation-delay: .10s; }
.catalog-card:nth-child(3) { animation-delay: .16s; }
.catalog-card:nth-child(4) { animation-delay: .22s; }
.catalog-card:nth-child(5) { animation-delay: .28s; }
.catalog-card:nth-child(n+6) { animation-delay: .34s; }

/* Botones con peso fisico: se hunden al apretar. */
.btn-main, .dr-btn-wine, .btn-add-only, .dr-pedido, .btn-ghost, .dr-hero-btn {
  transition: transform .14s cubic-bezier(.2,.7,.3,1), background .2s ease,
              box-shadow .2s ease, color .2s ease;
}
.btn-main:hover, .dr-btn-wine:hover, .btn-add-only:hover, .dr-pedido:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(245, 167, 214, .26);
}
.btn-main:active, .dr-btn-wine:active, .btn-add-only:active, .dr-pedido:active {
  transform: translateY(1px) scale(.985);
  box-shadow: none;
}

/* Las fotos del mosaico se levantan, no solo hacen zoom. */
.ig-mosaico figure { transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s ease; }
.ig-mosaico figure:hover { transform: translateY(-5px); box-shadow: 0 18px 38px rgba(245, 167, 214, .16); }

/* Los enlaces del menu se subrayan creciendo desde la izquierda. */
.dr-nav .nav-link:not(.dr-pedido) { position: relative; }
.dr-nav .nav-link:not(.dr-pedido)::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: var(--marca);
  transform: scaleX(0); transform-origin: left;
  transition: transform .28s cubic-bezier(.2,.7,.3,1);
}
.dr-nav .nav-link:not(.dr-pedido):hover::after { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  .ig-hero__logo, .ig-hero__claim, .ig-hero__bajada, .ig-hero__acciones,
  .catalog-card {
    animation: none !important;
  }
  .catalog-card:hover, .ig-mosaico figure:hover,
  .btn-main:hover, .dr-btn-wine:hover, .btn-add-only:hover, .dr-pedido:hover,
  .btn-main:active, .dr-btn-wine:active, .btn-add-only:active, .dr-pedido:active {
    transform: none !important;
  }
  .dr-nav .nav-link:not(.dr-pedido)::after { transition: none; }
}


/* ============================================================
   Pantallas grandes (>=1400px). Sin esto la pagina se diseña
   para 1150px y en un monitor de 1920 queda una franja chica
   flotando en el centro.
   ============================================================ */
@media (min-width: 1400px) {
  .container { max-width: 1340px; }

  .ig-hero { padding: 4.6rem 0 3.6rem; }
  .ig-hero__caja { gap: 3.4rem; }
  .ig-hero__logo { width: min(420px, 78%); }
  .ig-hero__claim { font-size: clamp(2.6rem, 3.6vw, 3.9rem); }
  .ig-hero__bajada { font-size: 1.12rem; }
  /* El collage crece con el hero: si no, las fotos quedan de sello
     al lado de un titulo enorme. */
  .ig-hero__collage { grid-template-rows: repeat(2, 218px); gap: 1.1rem; }

  .ig-cinta__pista img { height: 210px; }
  .ig-videos { gap: 1.6rem; }
  .ig-video { width: min(330px, 78vw); }
  .ig-mosaico { gap: 1.2rem; }
  .ig-encargos { padding: 4.4rem 0; }
  .ig-minimo { padding: 2rem 1rem; }
}

@media (min-width: 1700px) {
  .container { max-width: 1480px; }
  .ig-hero__collage { grid-template-rows: repeat(2, 248px); }
  .ig-cinta__pista img { height: 240px; }
}

/* ---------- Delivery y retiro ---------- */
.entrega { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.entrega__via {
  background: var(--blanco);
  border: 1px solid var(--lino);
  border-radius: var(--radius-lg);
  padding: 1.6rem 1.5rem;
  box-shadow: var(--shadow-soft);
}
.entrega__eyebrow {
  font-size: .72rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .12em; color: var(--rosa); margin: 0 0 .3rem;
}
.entrega__via h2 { font-size: 1.45rem; margin: 0 0 .5rem; }
.entrega__via p { margin-bottom: 1rem; }
/* El logotipo de Paket es de un tercero: va con sus colores, sobre un chip
   claro, sin recolorear. */
.entrega__chip {
  display: inline-flex; align-items: center;
  background: var(--blanco); border: 1px solid var(--lino);
  border-radius: 999px; padding: .4rem .8rem; line-height: 0;
}
.entrega__chip img { height: 20px; width: auto; }
.entrega__nota {
  margin-top: 1.2rem; padding: 1.4rem 1.5rem;
  background: var(--rosa-suave); border-radius: var(--radius-lg);
}
.entrega__nota h3 { font-size: 1.1rem; margin: 0 0 .6rem; }
.entrega__nota ul { margin: 0; padding-left: 1.1rem; display: grid; gap: .4rem; }
@media (max-width: 860px) { .entrega { grid-template-columns: 1fr; } }

/* ---------- Variantes y packs en la tarjeta ---------- */
.catalog-variante { display: block; margin: 0 0 .5rem; }
.catalog-variante span {
  display: block; font-size: .7rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--tinta-rosa); margin-bottom: .2rem;
}
.catalog-variante select {
  width: 100%; margin: 0; padding: .42rem .6rem;
  border: 1px solid var(--lino); border-radius: var(--radius-sm);
  background: var(--blanco); color: var(--tinta-rosa); font: inherit; font-size: .86rem;
}
.catalog-pack {
  margin: 0 0 .5rem; font-size: .8rem; font-weight: 600;
  color: var(--tinta-rosa); opacity: .85;
}


/* ============================================================
   Con el rosado de fondo, cualquier texto rosado DESAPARECE.
   Todo lo que cae sobre el fondo va en blanco.
   ============================================================ */
body { color: var(--blanco); }
.ig-hero__claim,
.ig-hero__claim em,
.ig-hero__bajada,
.ig-encargos__titulo,
.ig-encargos__texto,
.section-head h2,
.section-head p,
.dr-products-title,
.dr-products-sub,
.ig-video figcaption,
.eyebrow,
h1, h2, h3 { color: var(--blanco); }

/* Lo que se levanta sobre blanco conserva la letra rosada. */
.catalog-card, .catalog-card *,
.surface-card, .surface-card *,
.tarjeta, .tarjeta *,
.entrega__via, .entrega__via *,
.ig-encargos__caso, .ig-encargos__caso * { color: var(--rosa); }
.ig-encargos__caso-tit { color: var(--rosa); }

/* El logotipo del hero, sobre rosado, va en su version blanca. */
.ig-hero__logo { filter: brightness(0) invert(1); }

/* Los botones sobre el fondo rosado: el primario invierte (blanco con letra
   rosada) y el secundario va con borde blanco. Un boton rosado sobre fondo
   rosado no existe. */
.dr-btn-wine, .btn-main, .btn-add-only, .dr-hero-btn {
  background: var(--blanco) !important;
  color: var(--rosa) !important;
  border-color: var(--blanco) !important;
}
.dr-btn-wine:hover, .btn-main:hover, .btn-add-only:hover, .dr-hero-btn:hover {
  background: var(--blanco) !important;
  color: var(--rosa) !important;
}
.btn-ghost {
  background: transparent !important;
  color: var(--blanco) !important;
  border: 1px solid var(--blanco) !important;
}
.btn-ghost:hover { background: rgba(255, 255, 255, .16) !important; }

/* Dentro de una tarjeta blanca el boton vuelve a ser rosado con letra blanca:
   ahi el fondo ya no es rosado. */
.catalog-card .btn-add-only,
.surface-card .btn-main,
.tarjeta .btn-main {
  background: var(--rosa) !important;
  color: var(--blanco) !important;
  border-color: var(--rosa) !important;
}

/* ============================================================
   REGLA DE ORO con dos colores: sobre rosado se escribe blanco,
   sobre blanco se escribe rosado. Aca se fijan las superficies
   que se habian quedado rosadas por dentro y dejaban su propio
   texto invisible.
   ============================================================ */
.catalog-card,
.surface-card,
.tarjeta,
.entrega__via,
.ig-encargos__caso,
.catalog-filter-bar,
.cart-item,
.field-input,
input, select, textarea {
  background: var(--blanco) !important;
}
.catalog-card *, .surface-card *, .tarjeta *,
.entrega__via *, .ig-encargos__caso *,
.catalog-filter-bar *, .cart-item * {
  color: var(--rosa);
}
/* Las pildoras y chips llevan fondo rosado: ahi la letra va blanca. */
.catalog-tag, .sutil-minimo, .catalog-tag--flota, .pildora, .marca-estado {
  background: var(--rosa) !important;
  color: var(--blanco) !important;
}
/* Los enlaces sueltos sobre el fondo rosado. */
a { color: var(--blanco); }
.catalog-card a, .surface-card a, .tarjeta a, .entrega__via a { color: var(--rosa); }

/* Los ultimos que quedaban del mismo color que su fondo. */
.dr-tile-price { color: var(--blanco); }
.check-list li { color: var(--blanco); }
.surface-card .check-list li, .tarjeta .check-list li { color: var(--rosa); }
/* "Limpiar" y "Hablar por WhatsApp" son botones fantasma sobre fondo rosado. */
.btn-ghost, a.btn-ghost { color: var(--blanco) !important; border-color: var(--blanco) !important; }
.catalog-filter-bar .btn-ghost,
.surface-card .btn-ghost,
.tarjeta .btn-ghost { color: var(--rosa) !important; border-color: var(--rosa) !important; }

/* La lista de la pagina de contacto tiene su propio fondo BLANCO
   translucido, asi que su texto va rosado aunque este sobre el fondo rosa. */
.check-list li { color: var(--rosa) !important; background: var(--blanco) !important; }
/* El segundo boton de la franja corporativa esta sobre fondo rosado. */
/* El hero SI esta sobre rosado: ahi el boton fantasma va blanco. */
.ig-hero__acciones .btn-ghost {
  color: var(--blanco) !important;
  border-color: var(--blanco) !important;
  background: transparent !important;
}
/* La franja corporativa quedo con fondo BLANCO, asi que todo lo suyo va en
   rosado -- incluido su boton fantasma, que estaba blanco sobre blanco. */
.dr-corp { background: var(--blanco) !important; }
.dr-corp h2, .dr-corp p, .dr-corp .eyebrow { color: var(--rosa) !important; }
.dr-corp .btn-ghost {
  color: var(--rosa) !important;
  border-color: var(--rosa) !important;
  background: transparent !important;
}
.dr-corp .dr-btn-wine {
  background: var(--rosa) !important;
  color: var(--blanco) !important;
  border-color: var(--rosa) !important;
}


/* ============================================================
   Venta corporativa: pagina en BLANCO para distinguirla del resto.
   Todo lo escrito va en rosado (la regla de oro: sobre blanco,
   rosado). Formato de dulcebarquillo.cl: texto + una sola foto.
   ============================================================ */
.corp-blanco { background: #fff; }
.corp-seccion { padding-top: 3.5rem; padding-bottom: 3.5rem; }
.corp-blanco h1, .corp-blanco h2, .corp-blanco h3, .corp-blanco p,
.corp-blanco li, .corp-blanco label, .corp-blanco .eyebrow, .corp-blanco a { color: var(--rosa) !important; }
.corp-intro { display: grid; grid-template-columns: 1.05fr 1fr; gap: 3rem; align-items: start; margin-bottom: 4rem; }
.corp-texto h1 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; line-height: 1.05; letter-spacing: -.02em; margin: .2rem 0 1rem; text-transform: uppercase; }
.corp-texto h2 { font-size: 1.3rem; font-weight: 700; margin: 1.6rem 0 .4rem; }
.corp-texto p { font-size: 1rem; line-height: 1.65; margin: 0 0 .7rem; max-width: 60ch; }
.corp-foto { margin: 0; position: sticky; top: 7rem; }
.corp-foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-md); display: block; }
.corp-blanco .form-shell, .corp-blanco .split-form-copy { background: #fff; }
@media (max-width: 860px) {
  .corp-intro { grid-template-columns: 1fr; gap: 1.6rem; }
  .corp-foto { position: static; order: -1; }
  .corp-foto img { aspect-ratio: 4 / 3; }
}

/* El pie pasa a BLANCO, igual que venta corporativa: cierra la pagina
   separandola del rosado. Sobre blanco, todo lo escrito va en rosado, con una
   linea rosada arriba para que no se funda con una seccion blanca previa. */
.site-footer.dr-foot { background: #fff !important; border-top: 3px solid var(--rosa); }
.dr-foot, .dr-foot *, .dr-foot .footer-copy, .dr-foot .footer-link,
.dr-foot .footer-title, .dr-foot .footer-legal, .dr-foot p, .dr-foot a { color: var(--rosa) !important; }
.dr-foot .footer-legal { border-top-color: rgba(245, 167, 214, .5) !important; }
.dr-foot .footer-link:hover { text-decoration: underline; }

/* ============================================================
   AZUL + ROSADO + BLANCO (14-09-2026)
   Pedido de Diego: "todo muy rosado es poco profesional, se puede
   catalogar infantil". Se suma el azul de dulcebarquillo.cl
   (#2a4057, medido de su barra) como color SERIO, y el rosado de
   la marca queda como ACENTO.

     blanco  #ffffff  fondo
     azul    #2a4057  texto, franja, pie, botones principales
     rosado  #f5a7d6  logo, cinta de fotos, chips, detalles

   Contraste medido: azul/blanco 10,66:1 · azul/rosado 5,78:1.
   Todas las combinaciones pasan AA, a diferencia del rosado solo.
   Este bloque va al final y con !important porque las capas de
   paleta anteriores tambien lo usaban.
   ============================================================ */
:root {
  --azul: #2a4057;
  --azul-900: #1d2e40;
  --tinta-rosa: var(--azul);
  --fondo: #ffffff;
  --crema: #ffffff;
  --superficie: #ffffff;
  --rosa-lavado: rgba(245, 167, 214, .16);
}
body { background: #fff !important; color: var(--azul) !important; }
h1, h2, h3, h4, .eyebrow, p, li, label, .ig-hero__claim, .ig-hero__claim em,
.ig-hero__bajada, .ig-encargos__titulo, .ig-encargos__texto, .section-head h2,
.section-head p, .dr-products-title, .dr-products-sub, .ig-video figcaption { color: var(--azul) !important; }
a { color: var(--azul); }
.ig-hero__logo { filter: none !important; }

/* Franja superior: azul con letra blanca */
.dr-topbar { background: var(--azul) !important; color: #fff !important; border-bottom: 0 !important; }

/* Barra de navegacion: blanca, links azules, boton rosado */
.site-navbar.dr-nav { background: #fff !important; }
.dr-nav .nav-link { color: var(--azul) !important; }
.dr-nav .nav-link:hover { color: var(--azul-900) !important; }
.dr-nav .nav-link:not(.dr-pedido)::after { background: var(--rosa) !important; }
.dr-pedido, .dr-nav .nav-link.dr-pedido { background: var(--rosa) !important; color: var(--azul) !important; }
.dr-pedido:hover { background: #f3b6db !important; }

/* Hero y secciones: blanco; las que alternan, un lavado rosado muy suave */
.ig-hero { background: #fff !important; }
.ig-encargos, .dr-work-video, .section-soft { background: var(--rosa-lavado) !important; }
.corp-blanco { background: #fff !important; }
.corp-blanco h1, .corp-blanco h2, .corp-blanco h3, .corp-blanco p,
.corp-blanco li, .corp-blanco label, .corp-blanco .eyebrow, .corp-blanco a { color: var(--azul) !important; }

/* La cinta de fotos queda rosada: es el toque de marca */
.ig-cinta { background: var(--rosa) !important; }

/* Banda del minimo: azul */
.ig-minimo { background: var(--azul) !important; }
.ig-minimo, .ig-minimo b, .ig-minimo span { color: #fff !important; }

/* Botones: principal azul, secundario con borde azul */
.dr-btn-wine, .btn-main, .dr-hero-btn, .btn-add-only,
.catalog-card .btn-add-only, .surface-card .btn-main, .tarjeta .btn-main,
.dr-corp .dr-btn-wine {
  background: var(--azul) !important; color: #fff !important; border-color: var(--azul) !important;
}
.dr-btn-wine:hover, .btn-main:hover, .btn-add-only:hover { background: var(--azul-900) !important; color: #fff !important; }
.btn-ghost, a.btn-ghost, .hero-actions .btn-ghost, .ig-hero__acciones .btn-ghost, .dr-corp .btn-ghost,
.catalog-filter-bar .btn-ghost, .surface-card .btn-ghost, .tarjeta .btn-ghost {
  background: transparent !important; color: var(--azul) !important; border: 1px solid var(--azul) !important;
}
.btn-ghost:hover { background: var(--rosa-lavado) !important; }

/* Tarjetas y catalogo: blancas, texto azul */
.catalog-card *, .surface-card *, .tarjeta *, .entrega__via *, .ig-encargos__caso *,
.catalog-filter-bar *, .cart-item *, .check-list li, .dr-corp h2, .dr-corp p, .dr-corp .eyebrow { color: var(--azul) !important; }
.catalog-card .btn-add-only { color: #fff !important; }
.catalog-price { color: var(--azul) !important; }
.catalog-card, .surface-card, .tarjeta, .entrega__via, .ig-encargos__caso { border-color: rgba(42, 64, 87, .12) !important; }

/* Chips y etiquetas: rosado con letra azul (5,78:1) */
.catalog-tag, .sutil-minimo, .catalog-tag--flota, .pildora, .marca-estado { background: var(--rosa) !important; color: var(--azul) !important; }
.ig-encargos__lista li::before { background: var(--rosa) !important; }

/* Pie: azul con letra blanca y logotipo blanco */
.site-footer.dr-foot { background: var(--azul) !important; border-top: 0 !important; }
.dr-foot, .dr-foot *, .dr-foot .footer-copy, .dr-foot .footer-link,
.dr-foot .footer-title, .dr-foot .footer-legal, .dr-foot p, .dr-foot a { color: #fff !important; }
.dr-foot .footer-link:hover { color: var(--rosa) !important; }
.dr-foot .footer-legal { border-top-color: rgba(255, 255, 255, .25) !important; }
/* El boton dentro de una tarjeta hereda "texto azul" de la tarjeta y quedaba
   azul sobre azul (Coordinar por WhatsApp, en delivery). */
.entrega__via .btn-main, .surface-card .btn-main, .tarjeta .btn-main, .ig-encargos__caso .btn-main { color: #fff !important; }
/* Fuera las manchas difuminadas del hero: con el azul se veian como un
   degradado sucio detras del logotipo. Hero en blanco limpio. */
.ig-hero::before, .ig-hero::after { display: none !important; }

/* ============================================================
   Tipografia de venta corporativa en TODA la web (pedido de Diego).
   Misma fuente (Manrope) que ya tenia el sitio; lo que se unifica
   es el tratamiento: titulos en mayuscula y peso 800, subtitulos en
   700 y el rotulo superior grande y espaciado. Antes cada pagina
   usaba pesos distintos (500 en catalogo, delivery y contacto).
   ============================================================ */
h1, .page-hero h1, .ig-hero__claim {
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: -.02em !important;
  line-height: 1.05 !important;
  text-wrap: balance;
}
h1, .page-hero h1 { font-size: clamp(2rem, 4vw, 3rem) !important; }
.ig-hero__claim { font-size: clamp(2.1rem, 4.4vw, 3.4rem) !important; }
h2, .section-head h2, .dr-products-title, .ig-encargos__titulo, .dr-corp h2 {
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -.025em !important;
  text-transform: none !important;
}
h3 { font-family: 'Manrope', system-ui, sans-serif !important; font-weight: 700 !important; letter-spacing: -.01em; }
.eyebrow, .ig-encargos__caso-tit {
  font-size: 1rem !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: .16em !important;
}
main p, .page-hero p, .section-head p, .ig-hero__bajada { line-height: 1.65; }

/* ============================================================
   Hero en AZUL (pedido de Diego): el logotipo rosado queda igual
   (rosado sobre azul 5,78:1) y el resto del texto en blanco
   (10,66:1). El boton principal pasa a rosado con letra azul: un
   boton azul sobre fondo azul desapareceria. El secundario va con
   borde blanco.
   ============================================================ */
.ig-hero { background: var(--azul) !important; }
.ig-hero .ig-hero__claim, .ig-hero .ig-hero__claim em,
.ig-hero .ig-hero__bajada, .ig-hero p { color: #fff !important; }
.ig-hero .dr-btn-wine { background: var(--rosa) !important; color: var(--azul) !important; border-color: var(--rosa) !important; }
.ig-hero .dr-btn-wine:hover { background: #f3b6db !important; color: var(--azul) !important; }
.ig-hero .btn-ghost, .ig-hero__acciones .btn-ghost { color: #fff !important; border-color: #fff !important; background: transparent !important; }
.ig-hero .btn-ghost:hover { background: rgba(255,255,255,.1) !important; }
.ig-hero__collage img { box-shadow: 0 18px 40px rgba(0,0,0,.35) !important; }


/* ============================================================
   14-09 · revisión en el teléfono
   ============================================================ */

/* Hamburguesa: seguía con líneas y borde BLANCOS de cuando la barra era
   rosada. Con la barra blanca el botón existía pero no se veía. */
.dr-nav .navbar-toggler {
  background: #fff !important;
  border: 1.5px solid var(--azul) !important;
}
.dr-nav .navbar-toggler:focus { box-shadow: 0 0 0 .2rem rgba(42, 64, 87, .25) !important; }
.dr-nav .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%232a4057' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.6' d='M5 8h20M5 15h20M5 22h20'/%3e%3c/svg%3e") !important;
}

/* Tarjeta del catálogo: nombre arriba y precio abajo. Lado a lado, en una
   tarjeta de media pantalla el "c/u" se cortaba y el nombre quedaba en
   columna de una palabra. */
.catalog-card__pie { flex-direction: column; align-items: flex-start; gap: .15rem; }

/* Muestras de cobertura: el color ES la opción (café = chocolate,
   blanco = chocolate blanco). El nombre de la elegida va escrito arriba,
   así el color nunca es la única pista. */
.opciones { border: 0; margin: 0 0 .7rem; padding: 0; min-width: 0; }
.opciones__titulo {
  float: none; width: auto; margin: 0 0 .4rem; padding: 0;
  font-size: .78rem; font-weight: 600; color: var(--azul); line-height: 1.3;
}
.opciones__titulo b { font-weight: 800; }
.opciones__muestras { display: flex; flex-wrap: wrap; gap: .55rem; }
.muestra { position: relative; display: inline-flex; cursor: pointer; margin: 0; }
.muestra__color {
  display: block; width: 30px; height: 30px; border-radius: 50%;
  background: var(--muestra);
  box-shadow: inset 0 0 0 1px rgba(42, 64, 87, .22);
  outline: 2px solid transparent; outline-offset: 3px;
  transition: outline-color .18s ease, transform .18s ease;
}
.muestra:hover .muestra__color { transform: scale(1.08); }
.muestra input:checked + .muestra__color { outline-color: var(--azul); }
.muestra input:focus-visible + .muestra__color { outline-color: var(--rosa); outline-width: 3px; }
.product-detail-content .opciones { margin: 1rem 0 1.1rem; }
.product-detail-content .opciones__titulo { font-size: .9rem; }
.product-detail-content .muestra__color { width: 38px; height: 38px; }

/* En el carrito y el checkout, la cobertura elegida de cada línea */
.cart-item-opciones { display: flex; flex-wrap: wrap; gap: .3rem .8rem; margin: .15rem 0 .25rem; font-size: .85rem; font-weight: 600; color: var(--azul); }
.cart-item-opciones span { display: inline-flex; align-items: center; gap: .35rem; }
.muestra__color--chica { display: inline-block; width: 14px; height: 14px; }
.checkout-detalle { font-weight: 500; opacity: .8; }

/* Franja del mínimo: dos datos, sin el "·" que quedaba suelto al partir
   la línea. Lado a lado con una raya fina; en el teléfono, uno bajo otro. */
.ig-minimo__datos {
  list-style: none; margin: .75rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: .6rem 0;
}
.ig-minimo__datos li {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: 1.08rem; font-weight: 600; color: #fff; padding: 0 1.6rem;
}
.ig-minimo__datos li + li { border-left: 1px solid rgba(255, 255, 255, .35); }
@media (max-width: 640px) {
  .ig-minimo__datos { flex-direction: column; gap: .55rem; }
  .ig-minimo__datos li { padding: 0; }
  .ig-minimo__datos li + li { border-left: 0; }
}

/* Videos: botón de play sólo cuando el teléfono niega el autoplay */
.ig-video__marco { position: relative; }
.ig-video__play {
  position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%);
  width: 64px; height: 64px; border-radius: 50%; border: 0;
  background: rgba(42, 64, 87, .82); cursor: pointer;
  box-shadow: 0 6px 20px rgba(42, 64, 87, .35);
}
.ig-video__play::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  transform: translate(-35%, -50%);
  border-style: solid; border-width: 11px 0 11px 18px;
  border-color: transparent transparent transparent #fff;
}
.ig-video__play:focus-visible { outline: 3px solid var(--rosa); outline-offset: 3px; }
.ig-minimo .ig-minimo__datos li { color: #fff !important; }

/* Tarjeta de media pantalla: "Eliminar · 10 · +" no cabía y el + quedaba
   fuera. Se achica el botón de quitar, no la cantidad. */
.catalog-actions .qty-control { padding: .25rem; gap: .2rem; min-width: 0; box-sizing: border-box; }
.catalog-actions .btn-qty { padding: .35rem .55rem; min-width: 0; }
.catalog-actions .btn-trash { font-size: .78rem; }

/* ---------- Ficha de producto (modal): cabe en la pantalla ----------
   La foto tomaba su alto natural (~760px) y empujaba cobertura y botones
   bajo el borde en un monitor comun con zoom 100%. Ademas la cabecera
   pegada (z 1070) quedaba ENCIMA del modal de Bootstrap (1055) y tapaba
   su parte de arriba. */
.modal-backdrop { z-index: 1076; }
.modal { z-index: 1078; }
.product-modal-surface { position: relative; }
.modal-cerrar {
  position: absolute; top: .8rem; right: .8rem; z-index: 5;
  width: 2.1rem; height: 2.1rem; padding: 0; border-radius: 50%;
  background-color: #fff; background-size: .8rem; opacity: 1;
  box-shadow: 0 2px 10px rgba(42, 64, 87, .18);
}
.modal-cerrar:focus-visible { box-shadow: 0 0 0 3px var(--rosa); }

@media (min-width: 992px) {
  #modalProducto .modal-dialog { margin-block: 1.25rem; }
  #modalProducto .product-detail-wrap {
    height: min(640px, calc(100dvh - 2.5rem));
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    border-radius: 0; border: 0; box-shadow: none;
  }
  #modalProducto .product-detail-media { min-height: 0; height: 100%; overflow: hidden; }
  #modalProducto .product-detail-media img,
  #modalProducto .single-detail-image { height: 100%; min-height: 0; }
  /* Si el texto no cabe, se desplaza SOLO la columna del texto, y los
     botones quedan pegados abajo, siempre a la vista. */
  #modalProducto .product-detail-content { overflow-y: auto; padding: 2rem 2.2rem 0; }
  #modalProducto .detail-actions {
    position: sticky; bottom: 0; background: #fff;
    padding: 1rem 0 1.6rem; margin-top: auto;
  }
}
@media (max-width: 991.98px) {
  #modalProducto .product-detail-media img,
  #modalProducto .single-detail-image { min-height: 0; height: 38vh; }
}

/* ---------- Escritorio con el mismo orden que el teléfono ----------
   En el teléfono la tarjeta se lee de arriba abajo: nombre, precio,
   cobertura, botón. En escritorio las acciones quedaban en fila (muestras
   a la izquierda, "Bolsita de 4" flotando al medio, botón a la derecha) y
   la foto cuadrada de 470px dejaba la tarjeta más alta que la pantalla. */
.catalog-actions {
  flex-direction: column; align-items: stretch; justify-content: flex-start;
  flex-wrap: nowrap; gap: 0;
}
.catalog-actions .product-ctl { width: 100%; }
.catalog-actions .catalog-pack { margin: 0 0 .7rem; }

@media (min-width: 901px) {
  .catalog-card .catalog-media { aspect-ratio: 4 / 3; }
  .catalog-card__pie { padding: 1rem 1.2rem .3rem; gap: .25rem; }
  .catalog-card__nombre { font-size: 1.15rem; }
  .catalog-price { font-size: 1.45rem; }
  .catalog-price small { font-size: .82rem; }
  .catalog-actions { padding: .7rem 1.2rem 1.2rem; }
  .catalog-actions .opciones__titulo { font-size: .9rem; }
  .catalog-actions .muestra__color { width: 34px; height: 34px; }
  .catalog-actions .catalog-pack { font-size: .88rem; }
  .catalog-actions .btn-add-only { min-height: 46px; font-size: 1rem; }
  .catalog-actions .btn-trash { font-size: .88rem; }
}

/* Encabezado de página (carrito, catálogo): eyebrow, título y aviso uno
   bajo otro, como en el teléfono. En fila quedaban repartidos a lo ancho. */
.section-head:has(> h1) { flex-direction: column; align-items: flex-start; gap: .45rem; }

/* El renglón del carrito no se estira hasta el alto del resumen */
.cart-layout { align-items: start; }

/* Ficha: los dos botones del mismo alto */
.detail-actions { align-items: center; }
.detail-actions .btn-add-only,
.detail-actions > .btn-ghost { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; margin: 0; }

/* Franja azul: las lineas de Dulcecita, letra delgada */
.ig-lineas {
  list-style: none; margin: 0 auto; padding: 0; max-width: 60rem;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: .35rem 2.2rem;
}
.ig-minimo .ig-lineas li {
  color: #fff !important;
  font-size: clamp(1.1rem, 2.4vw, 1.45rem);
  font-weight: 400; letter-spacing: .02em; line-height: 1.5;
}
@media (max-width: 640px) { .ig-lineas { gap: .25rem 1.5rem; } }
@media (min-width: 901px) {
  .ig-minimo:has(.ig-lineas) { padding-block: 2rem; }
  .ig-minimo .ig-lineas li { font-size: 1.6rem; }
  .ig-lineas { gap: .35rem 3rem; }
}


/* ============================================================
   Arma tu box
   ============================================================ */
.box-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 1.5rem; align-items: start; }
.box-lista { display: grid; gap: 1rem; }
.box-producto {
  display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 1.1rem;
  background: #fff; border: 1px solid rgba(42, 64, 87, .1); border-radius: var(--radius-md);
  padding: 1rem;
}
.box-producto__foto { width: 120px; height: 120px; object-fit: cover; border-radius: var(--radius-sm); }
.box-producto__nombre { font-size: 1.15rem; margin: 0 0 .15rem; }
.box-producto__pack { margin: 0 0 .4rem; font-size: .85rem; font-weight: 600; color: var(--azul); opacity: .8; }
.box-filas { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; gap: .5rem; }
.box-fila {
  display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  padding: .45rem .6rem; border-radius: var(--radius-sm); transition: background .18s ease;
}
.box-fila.is-activa { background: var(--rosa-lavado, rgba(245, 167, 214, .16)); }
.box-fila__nombre { display: inline-flex; align-items: center; flex-wrap: wrap; gap: .4rem; font-weight: 600; color: var(--azul); }
.box-fila__nombre small { font-weight: 500; opacity: .75; }
.box-stepper { display: inline-flex; align-items: center; gap: .2rem; flex-shrink: 0; }
.box-stepper__num {
  width: 3rem; text-align: center; border: 0; background: transparent;
  font-weight: 800; color: var(--azul); font-size: 1rem; -moz-appearance: textfield;
}
.box-stepper__num::-webkit-outer-spin-button,
.box-stepper__num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.box-resumen { position: sticky; top: calc(var(--alto-cabecera, 110px) + 1rem); }
.box-resumen__lineas { list-style: none; margin: .4rem 0 .6rem; padding: 0; display: grid; gap: .35rem; }
.box-resumen__lineas li { display: flex; justify-content: space-between; color: var(--azul); }
.box-resumen [data-box-enviar]:disabled { opacity: .45; cursor: not-allowed; }
@media (max-width: 860px) {
  .box-layout { grid-template-columns: 1fr; }
  .box-resumen { position: sticky; bottom: .5rem; top: auto; z-index: 5; box-shadow: 0 -6px 24px rgba(42, 64, 87, .12); }
  .box-producto { grid-template-columns: 72px minmax(0, 1fr); padding: .8rem; gap: .8rem; }
  .box-producto__foto { width: 72px; height: 72px; }
  .box-fila { padding: .4rem .2rem; }
}

/* En el carrito */
.cart-box {
  border: 1.5px solid var(--rosa); border-radius: var(--radius-md);
  padding: .8rem; display: grid; gap: .6rem; background: #fff;
}
.cart-box__cabeza { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.cart-box__cabeza h3 { margin: 0; font-size: 1.1rem; color: var(--azul); }
.cart-box__cabeza form { margin: 0; }
.cart-box__pie {
  display: grid; grid-template-columns: 1fr auto; gap: .2rem 1rem;
  padding: .4rem .4rem 0; border-top: 1px solid rgba(42, 64, 87, .1); color: var(--azul);
}
.cart-box__total { font-size: 1.1rem; }
.cart-box__otro { justify-self: start; }
.cart-list { display: grid; gap: .8rem; }

/* Invitación a "Arma tu box" en el catálogo */
.box-invita { margin-bottom: 1.2rem; }
.box-invita__caja {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap;
  background: var(--azul); color: #fff; border-radius: var(--radius-md); padding: 1.2rem 1.5rem;
}
.box-invita__titulo { margin: 0 0 .2rem; font-size: 1.25rem; font-weight: 800; color: #fff !important; }
.box-invita__texto { margin: 0; color: #fff !important; opacity: .9; max-width: 44rem; }
.box-invita .btn-main { background: var(--rosa) !important; color: var(--azul) !important; border-color: var(--rosa) !important; }
@media (max-width: 560px) {
  /* "Sin cobertura" se partía en dos líneas: el contador era muy ancho */
  .box-stepper { padding: .15rem !important; }
  .box-stepper .btn-qty { width: 2.2rem; height: 2.2rem; min-width: 0; padding: 0; }
  .box-stepper__num { width: 2.1rem; }
  .box-fila__nombre { font-size: .92rem; }
}

/* Fotos reales de box y corporativos */
.corp-foto__pie { margin-top: .6rem; font-size: .85rem; color: var(--azul); opacity: .8; }
.box-cabeza { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 2rem; align-items: center; }
.box-cabeza__texto { margin: .2rem 0 0; max-width: 40rem; }
.box-cabeza__foto { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--radius-md); box-shadow: var(--shadow-soft); }
.box-invita__foto { width: 88px; height: 88px; object-fit: cover; border-radius: var(--radius-sm); flex-shrink: 0; }
.box-invita__copia { flex: 1 1 18rem; }
@media (max-width: 700px) {
  .box-cabeza { grid-template-columns: minmax(0, 1fr) 110px; gap: 1rem; align-items: start; }
  .box-cabeza__foto { aspect-ratio: 3 / 4; }
  .box-invita__foto { width: 64px; height: 64px; }
}
@media (max-width: 860px) {
  /* El resumen flota abajo mientras se elige: solo total y botón, para no
     tapar media pantalla. El detalle se ve en el carrito. */
  .box-resumen {
    display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .2rem 1rem;
    padding: .7rem 1rem !important;
  }
  .box-resumen .cart-summary-label { grid-column: 1; margin: 0; font-size: .75rem; }
  .box-resumen .cart-summary-total { grid-column: 1; margin: 0; font-size: 1.35rem; }
  .box-resumen__lineas, .box-resumen .cart-summary-note { display: none; }
  .box-resumen [data-box-enviar] { grid-column: 2; grid-row: 1 / span 2; }
}
@media (max-width: 860px) {
  body:has(.box-resumen) .dr-social-float { bottom: 6.8rem; }
}

/* Venta corporativa: la caja grande (mejor foto) y los cuchuflís al lado */
.corp-foto--doble { display: grid; grid-template-columns: 1.7fr 1fr; gap: .8rem; align-items: end; }
.corp-foto--doble img { aspect-ratio: auto; }
.corp-foto--doble .corp-foto__principal { aspect-ratio: 3 / 4; }
.corp-foto--doble .corp-foto__segunda { aspect-ratio: 9 / 16; }
.corp-foto--doble .corp-foto__pie { grid-column: 1 / -1; }
@media (max-width: 860px) {
  .corp-foto--doble img, .corp-foto--doble .corp-foto__principal { aspect-ratio: 3 / 4; }
  .corp-foto--doble .corp-foto__segunda { aspect-ratio: 9 / 16; }
}

/* Catálogo de 4: una fila de 4 en escritorio y 2 x 2 en pantallas medianas y
   teléfono. Con 3 columnas quedaba 3 + 1 suelto abajo. */
@media (min-width: 1100px) {
  .catalog-grid--n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.2rem; }
  .catalog-grid--n4 .catalog-card .catalog-media { aspect-ratio: 1 / 1; }
  .catalog-grid--n4 .catalog-card__nombre { font-size: 1.05rem; }
  .catalog-grid--n4 .catalog-price { font-size: 1.3rem; }
}
@media (min-width: 561px) and (max-width: 1099.98px) {
  .catalog-grid--n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Menú de escritorio en pantallas de 992 a 1279px: con "Arma tu box" los
   enlaces no cabían y "Haz tu pedido" empujaba la página hacia el lado. */
@media (min-width: 992px) and (max-width: 1279.98px) {
  .dr-nav .navbar-nav { gap: .2rem !important; }
  .dr-nav .nav-link { font-size: .78rem; letter-spacing: .05em; padding-inline: .55rem !important; }
  .dr-nav .dr-pedido { padding: .6rem 1.1rem !important; font-size: .78rem; }
  .dr-nav .dr-logo-img { max-height: 52px; width: auto; }
}

/* Franja azul: Paket vuelve, debajo de las líneas y en la misma letra delgada */
.ig-minimo .ig-lineas__despacho {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .5rem;
  margin: .9rem 0 0; color: #fff !important; font-weight: 400; font-size: clamp(1rem, 2vw, 1.2rem);
}
/* SVG y no el caracter: el iPhone dibuja el ♥ como emoji rojo */
.ig-hero__corazon { width: .9em; height: .9em; fill: var(--rosa); vertical-align: -.08em; margin-left: .1em; }
.ig-lineas--despacho { gap: .4rem 2.4rem; align-items: center; }
.ig-minimo .ig-lineas--despacho li { font-size: clamp(1.02rem, 2vw, 1.3rem); }
.ig-lineas__paket { display: inline-flex; align-items: center; gap: .5rem; }
@media (min-width: 901px) { .ig-minimo .ig-lineas--despacho li { font-size: 1.3rem; } }
@media (max-width: 640px) { .ig-lineas--despacho { flex-direction: column; gap: .5rem; } }
@media (min-width: 1200px) { .ig-lineas--despacho { flex-wrap: nowrap; } }
@media (min-width: 901px) {
  .ig-lineas--despacho { max-width: none; }
  .ig-hero .ig-hero__bajada { max-width: 36rem; }
}


/* ============================================================
   Revisión de QA antes de publicar (14-09)
   ============================================================ */

/* "Nuestros productos" en la portada: 4 productos en 4 columnas (con
   auto-fill quedaba una quinta vacía), nombre y precio siempre visibles y
   sobre un degradado azul, no rosado: el velo rosado lavaba las fotos y en
   escritorio el texto solo aparecía al pasar el mouse. */
.dr-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.dr-tile { border-radius: var(--radius-sm); }
.dr-tile-overlay,
.dr-tile:hover .dr-tile-overlay {
  opacity: 1; padding: 1rem;
  background: linear-gradient(to top, rgba(42, 64, 87, .88), rgba(42, 64, 87, .35) 38%, rgba(42, 64, 87, 0) 62%);
}
.dr-tile-name { color: #fff !important; font-size: 1rem; }
.dr-tile-price { color: var(--rosa) !important; font-size: .95rem; }
@media (max-width: 860px) {
  .dr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .dr-tile-overlay, .dr-tile:hover .dr-tile-overlay { padding: .6rem; }
  .dr-tile-name { font-size: .85rem; }
  .dr-tile-price { font-size: .82rem; }
}

/* En carrito y checkout el botón flotante "Ver carrito" sobra (ya estás
   ahí) y tapaba el resumen del pedido. */
.sin-fab .dr-cart-fab { display: none !important; }

/* Botones del hero del mismo alto */
.ig-hero__acciones a { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; }

/* Áreas táctiles de 44px en pantallas táctiles (guía de Apple). Se agranda
   el área, no el dibujo: la muestra de color sigue viéndose igual. */
@media (pointer: coarse), (max-width: 800px) {
  .qty-control .btn-qty { min-width: 44px; height: 44px; font-size: 1rem; }
  .catalog-actions .qty-control .btn-qty { min-width: 40px; height: 40px; padding: 0; }
  .catalog-actions .qty-control { padding: .2rem; }
  .btn-trash i { font-size: 1rem; }
  .muestra { padding: 6px; margin: -6px; }
  .opciones__muestras { gap: 1rem; }
  .muestra__color { width: 32px; height: 32px; }
  .btn-linkline { display: inline-flex; align-items: center; min-height: 44px; }
  .box-stepper .btn-qty { width: 44px; height: 44px; }
  .footer-link { display: block; padding-block: .35rem; }
}

/* Ficha como página propia: el nombre es el h1 */
.detail-titulo { font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 0 0 .4rem; }

/* Página 404 */
.pagina-error {
  display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 2.5rem; align-items: center;
  padding-block: 4rem 5rem; max-width: 960px;
}
.pagina-error__foto { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-md); }
.pagina-error h1 { margin: 0 0 .6rem; }
.pagina-error p { margin: 0 0 1.4rem; }
.pagina-error__acciones { display: flex; flex-wrap: wrap; gap: .7rem; }
@media (max-width: 700px) {
  .pagina-error { grid-template-columns: 1fr; gap: 1.5rem; padding-block: 2rem 3rem; }
  .pagina-error__foto { aspect-ratio: 16 / 9; }
}

/* Galería "Nuestros dulces": 12 fotos en filas completas (6, 4 o 2 por fila) */
.ig-mosaico { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1199.98px) { .ig-mosaico { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 767.98px) { .ig-mosaico { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; } }

/* "Quitar box" es un botón de formulario: sin el borde gris del navegador */
.cart-box__cabeza .btn-linkline { background: none; border: 0; padding: 0 .2rem; cursor: pointer; }

/* Cómo pagar (pedido confirmado) */
.pago-pasos { text-align: left; margin: 1.6rem 0 .4rem; padding: 1.2rem 1.3rem; border-radius: var(--radius-md); background: var(--rosa-lavado, rgba(245, 167, 214, .16)); }
.pago-pasos__titulo { font-size: 1.15rem; margin: 0 0 .7rem; color: var(--azul); }
.pago-pasos__lista { margin: 0; padding-left: 1.2rem; display: grid; gap: .7rem; color: var(--azul); }
.pago-pasos__lista b { display: block; }
.pago-datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .4rem 1rem; margin: .5rem 0 0; }
.pago-datos dt { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; opacity: .75; }
.pago-datos dd { margin: 0; font-weight: 700; }

/* Botones flotantes con los colores oficiales de cada marca: se reconocen
   al tiro. Pintados de rosado parecían parte del sitio y no WhatsApp. */
.dr-social-btn--wa,
.dr-social-btn--wa:hover { background: #25d366 !important; color: #fff !important; box-shadow: 0 8px 22px rgba(37, 211, 102, .35) !important; }
.dr-social-btn--ig,
.dr-social-btn--ig:hover {
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%) !important;
  color: #fff !important; box-shadow: 0 8px 22px rgba(214, 36, 159, .3) !important;
}
.dr-social-btn--wa i, .dr-social-btn--ig i { color: #fff !important; }