/* =========================================================
   Harmon & Click — Sistema de diseño
   Colores tomados de los logos. Cada producto usa su propio
   color SOLO como fondo suave de su galería y encabezado.
   ========================================================= */

:root {
  /* Marca (logo) */
  --verde: #00c080;            /* verde turquesa del logo: detalles grandes y fondos */
  --verde-turquesa: #1bbfc9;   /* final del degradado de la bolsa */
  --verde-600: #008f64;
  --verde-700: #007a55;        /* botones y enlaces (contraste AA con blanco: 5.4) */
  --verde-800: #006446;        /* hover */
  --verde-100: #d6f3e8;
  --verde-50: #ecf9f4;
  --coral: #f82868;            /* rosa-coral del logo */
  --coral-700: #d6204f;        /* texto/etiquetas (AA con blanco: 5.0) */
  --naranja: #ff8a00;          /* naranja del logo */
  --coral-50: #fff0f3;
  --degradado-verde: linear-gradient(120deg, #00c080 0%, #1bbfc9 100%);
  --degradado-coral: linear-gradient(120deg, #ff8a00 0%, #f82868 100%);

  /* Base */
  --blanco: #ffffff;
  --crema: #faf7f2;
  --crema-2: #f3eee6;
  --tinta: #1b2220;
  --tinta-2: #46504c;
  --tinta-3: #66716d;
  --linea: #e6e9e5;
  --linea-fuerte: #d3d9d4;
  --oscuro: #131c19;

  /* Tipografía */
  --f-titulo: "Fraunces", "Iowan Old Style", Georgia, serif;
  --f-cuerpo: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --t-xs: 0.8125rem;
  --t-sm: 0.9375rem;
  --t-base: 1.0625rem;
  --t-lg: 1.25rem;
  --t-xl: clamp(1.5rem, 1.2rem + 1.2vw, 1.875rem);
  --t-2xl: clamp(1.875rem, 1.4rem + 2vw, 2.75rem);
  --t-3xl: clamp(2.375rem, 1.6rem + 3.6vw, 4rem);

  /* Espaciado (escala de 4 px) */
  --s1: 0.25rem; --s2: 0.5rem; --s3: 0.75rem; --s4: 1rem; --s5: 1.5rem;
  --s6: 2rem; --s7: 3rem; --s8: 4rem; --s9: 6rem; --s10: 8rem;

  /* Radios y sombras */
  --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-pill: 999px;
  --sombra-sm: 0 1px 2px rgba(19, 28, 25, .06), 0 2px 8px rgba(19, 28, 25, .04);
  --sombra-md: 0 4px 24px rgba(19, 28, 25, .08);
  --sombra-lg: 0 18px 50px rgba(19, 28, 25, .14);

  --ancho: 1180px;
  --ancho-texto: 68ch;
  --alto-cabecera: 68px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--alto-cabecera) + 16px); }
body {
  margin: 0; font-family: var(--f-cuerpo); font-size: var(--t-base); line-height: 1.65;
  color: var(--tinta); background: var(--blanco); -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4 { font-family: var(--f-titulo); font-weight: 600; line-height: 1.15; letter-spacing: -.01em; margin: 0 0 var(--s3); color: var(--tinta); text-wrap: balance; }
h1 { font-size: var(--t-3xl); }
h2 { font-size: var(--t-2xl); }
h3 { font-size: var(--t-xl); }
p { margin: 0 0 var(--s4); text-wrap: pretty; }
a { color: var(--verde-700); text-underline-offset: 3px; }
a:hover { color: var(--verde-800); }
ul, ol { margin: 0; padding: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }

:focus-visible { outline: 3px solid var(--verde-700); outline-offset: 3px; border-radius: 6px; }
.sobre-oscuro :focus-visible, .pie :focus-visible { outline-color: #7ee8c4; }
.solo-lectores { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar { position: absolute; left: var(--s4); top: -100px; z-index: 200; background: var(--tinta); color: #fff; padding: var(--s3) var(--s4); border-radius: var(--r-sm); }
.saltar:focus { top: var(--s3); }

.contenedor { width: min(100% - 2rem, var(--ancho)); margin-inline: auto; }
.seccion { padding-block: var(--s8); }
.seccion--crema { background: var(--crema); }
.encabezado-seccion { max-width: 640px; margin: 0 auto var(--s7); text-align: center; }
.encabezado-seccion p { color: var(--tinta-2); font-size: var(--t-lg); }
.etiqueta-seccion { display: inline-block; font-size: var(--t-xs); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--verde-700); margin-bottom: var(--s3); }
@media (min-width: 900px) { .seccion { padding-block: var(--s9); } }

/* ---------- Botones ---------- */
.btn {
  --bg: var(--verde-700); --fg: #fff; --bd: var(--verde-700);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 52px; padding: 0 var(--s5); border-radius: var(--r-pill);
  background: var(--bg); color: var(--fg); border: 2px solid var(--bd);
  font-weight: 600; font-size: var(--t-base); line-height: 1; text-decoration: none; text-align: center;
  transition: transform .2s var(--ease), background-color .2s, box-shadow .2s, color .2s, border-color .2s;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { --bg: var(--verde-800); --bd: var(--verde-800); color: var(--fg); box-shadow: var(--sombra-md); transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.98); box-shadow: none; }
.btn--secundario { --bg: #fff; --fg: var(--verde-700); --bd: var(--verde-700); }
.btn--secundario:hover { --bg: var(--verde-50); --fg: var(--verde-800); --bd: var(--verde-800); }
.btn--claro { --bg: #fff; --fg: var(--verde-800); --bd: #fff; }
.btn--claro:hover { --bg: var(--verde-50); --fg: var(--verde-800); --bd: var(--verde-50); }
.btn--sm { min-height: 44px; padding: 0 var(--s4); font-size: var(--t-sm); }
.btn--bloque { width: 100%; }
.btn svg { width: 20px; height: 20px; flex: none; }
.btn[disabled], .btn[aria-busy="true"] { opacity: .65; pointer-events: none; }
.btn .giro { width: 18px; height: 18px; border: 2.5px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: gira .7s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
.enlace-flecha { display: inline-flex; align-items: center; gap: var(--s2); font-weight: 600; text-decoration: none; }
.enlace-flecha svg { width: 18px; height: 18px; transition: transform .2s var(--ease); }
.enlace-flecha:hover svg { transform: translateX(3px); }

/* ---------- Barra de anuncio y cabecera ---------- */
.anuncio { background: var(--verde-800); color: #fff; text-align: center; font-size: var(--t-sm); font-weight: 500; padding: var(--s2) var(--s4); letter-spacing: .01em; }
.cabecera { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.92); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid var(--linea); }
.cabecera__fila { height: var(--alto-cabecera); display: flex; align-items: center; justify-content: space-between; gap: var(--s4); }
.cabecera__logo { display: block; flex: none; }
.cabecera__logo img { height: 52px; width: auto; }
.menu { display: none; }
.menu a { position: relative; text-decoration: none; color: var(--tinta); font-weight: 500; font-size: var(--t-sm); padding: var(--s2) 0; }
.menu a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--degradado-verde); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease); }
.menu a:hover::after, .menu a[aria-current="true"]::after { transform: scaleX(1); }
.menu a[aria-current="true"] { color: var(--verde-700); font-weight: 600; }
.cabecera__acciones { display: flex; align-items: center; gap: var(--s2); }
.icono-btn { position: relative; width: 46px; height: 46px; display: grid; place-items: center; background: transparent; border: 0; border-radius: 50%; color: var(--tinta); text-decoration: none; transition: background-color .2s; }
.icono-btn:hover { background: var(--verde-50); color: var(--verde-800); }
.icono-btn svg { width: 24px; height: 24px; }
.contador { position: absolute; top: 3px; right: 1px; min-width: 20px; height: 20px; padding: 0 5px; display: grid; place-items: center; background: var(--coral-700); color: #fff; border-radius: var(--r-pill); font-size: 11px; font-weight: 700; line-height: 1; transform: scale(1); transition: transform .25s var(--ease); }
.contador[data-vacio="true"] { display: none; }
.contador.salto { animation: salto .45s var(--ease); }
@keyframes salto { 40% { transform: scale(1.35); } }
.burger { display: grid; }
.menu-movil { border-top: 1px solid var(--linea); background: #fff; padding: var(--s3) 0 var(--s5); }
.menu-movil a { display: block; padding: var(--s3) 0; text-decoration: none; color: var(--tinta); font-weight: 500; font-size: var(--t-lg); border-bottom: 1px solid var(--linea); }
.menu-movil a[aria-current="true"] { color: var(--verde-700); font-weight: 600; }
@media (min-width: 900px) {
  :root { --alto-cabecera: 76px; }
  .cabecera__logo img { height: 60px; }
  .menu { display: flex; gap: var(--s6); }
  .burger, .menu-movil { display: none !important; }
}

/* ---------- Héroe ---------- */
.heroe { position: relative; overflow: hidden; background: var(--crema); padding-block: var(--s7) calc(var(--s9) + var(--s2)); }
[data-cabecera] { display: block; min-height: calc(var(--alto-cabecera) + 36px); }
.heroe::before, .heroe::after { content: ""; position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5; pointer-events: none; }
.heroe::before { width: 380px; height: 380px; background: #b7f0dc; top: -140px; left: -120px; }
.heroe::after { width: 340px; height: 340px; background: #ffd3c4; bottom: -140px; right: -80px; }
.heroe__grid { position: relative; z-index: 1; display: grid; gap: var(--s7); align-items: center; }
.heroe__texto h1 { margin-bottom: var(--s4); }
.heroe__texto h1 em { font-style: italic; color: var(--verde-700); }
.heroe__texto p { font-size: var(--t-lg); color: var(--tinta-2); max-width: 46ch; }
.heroe__botones { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s5); }
.heroe__nota { margin-top: var(--s4); font-size: var(--t-sm); color: var(--tinta-3); }
.collage { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s3); max-width: 480px; margin-inline: auto; }
.collage .foto { border-radius: var(--r-lg); box-shadow: var(--sombra-md); }
.collage a:nth-child(even) { transform: translateY(var(--s5)); }
.collage a { display: block; transition: transform .35s var(--ease); }
.collage a:hover { transform: translateY(-4px); }
.collage a:nth-child(even):hover { transform: translateY(calc(var(--s5) - 4px)); }
@media (min-width: 900px) {
  .heroe { padding-block: var(--s9) calc(var(--s10) - var(--s2)); }
  .heroe__grid { grid-template-columns: 1.05fr 1fr; gap: var(--s8); }
  .collage { max-width: 430px; gap: var(--s4); margin-inline: 0 auto; }
  .collage a:nth-child(even) { transform: translateY(var(--s6)); }
  .collage a:nth-child(even):hover { transform: translateY(calc(var(--s6) - 4px)); }
}

/* ---------- Foto de producto (marco 3:4 con fondo desenfocado de la propia foto) ---------- */
.foto { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: var(--tema-fondo, var(--crema-2)); isolation: isolate; }
.foto::before { content: ""; position: absolute; inset: -12%; background: var(--bg) center / cover; filter: blur(26px) saturate(1.15); z-index: -1; }
.foto img { width: 100%; height: 100%; object-fit: contain; }

/* ---------- Revisor de C.P. ---------- */
.zona { position: relative; z-index: 2; margin-top: calc(var(--s7) * -1); }
.zona-tarjeta { background: #fff; border: 1px solid var(--linea); border-radius: var(--r-lg); box-shadow: var(--sombra-lg); padding: var(--s5); display: grid; gap: var(--s4); }
.zona-tarjeta h2 { font-size: var(--t-xl); margin: 0 0 var(--s1); }
.zona-tarjeta .zona__sub { color: var(--tinta-2); margin: 0; font-size: var(--t-sm); }
.cp-form { display: flex; gap: var(--s2); }
.cp-form .campo-cp { flex: 1; min-width: 0; }
.campo-cp { position: relative; }
.campo-cp input { width: 100%; height: 52px; padding: 0 var(--s4) 0 48px; border: 1.5px solid var(--linea-fuerte); border-radius: var(--r-pill); background: #fff; font-size: var(--t-base); letter-spacing: .06em; transition: border-color .2s, box-shadow .2s; }
.campo-cp svg { position: absolute; left: 16px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); color: var(--verde-700); pointer-events: none; }
.campo-cp input:focus { outline: none; border-color: var(--verde-700); box-shadow: 0 0 0 4px var(--verde-100); }
.cp-resultado { min-height: 0; }
.aviso { display: flex; gap: var(--s3); padding: var(--s4); border-radius: var(--r-md); font-size: var(--t-sm); line-height: 1.55; animation: aparece .35s var(--ease); }
.aviso > svg { width: 24px; height: 24px; flex: none; margin-top: 1px; }
.aviso strong { display: block; font-size: var(--t-base); margin-bottom: var(--s1); }
.aviso p { margin: 0 0 var(--s2); }
.aviso p:last-of-type { margin-bottom: 0; }
.aviso .btn { margin-top: var(--s3); }
.aviso--ok { background: var(--verde-50); border: 1px solid var(--verde-100); color: #0b3b2b; }
.aviso--ok > svg { color: var(--verde-700); }
.aviso--info { background: var(--coral-50); border: 1px solid #ffd3dc; color: #4a1626; }
.aviso--info > svg { color: var(--coral-700); }
.aviso--error { background: #fff4f2; border: 1px solid #ffd3cc; color: #6c1b10; }
.aviso--error > svg { color: #c2371f; }
.aviso--carga { background: var(--crema); border: 1px solid var(--linea); color: var(--tinta-2); align-items: center; }
@keyframes aparece { from { opacity: 0; transform: translateY(6px); } }
@media (min-width: 900px) {
  .zona-tarjeta { grid-template-columns: 1fr 1.1fr; align-items: start; padding: var(--s6); gap: var(--s6); }
  .zona-tarjeta .cp-cuerpo { display: grid; gap: var(--s4); }
}
.zona--compacta .zona-tarjeta { box-shadow: none; padding: var(--s4); background: var(--crema); grid-template-columns: 1fr; gap: var(--s3); border-radius: var(--r-md); }
.zona--compacta h2 { font-size: var(--t-base); font-family: var(--f-cuerpo); font-weight: 600; letter-spacing: 0; }

/* ---------- Distintivos de confianza ---------- */
.confianza { padding-block: var(--s7); }
.confianza__lista { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s4); }
.confianza__item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s3); padding: var(--s4) var(--s2); font-weight: 600; font-size: var(--t-sm); line-height: 1.35; }
.confianza__icono { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; background: var(--verde-50); color: var(--verde-700); }
.confianza__icono svg { width: 28px; height: 28px; }
@media (min-width: 800px) { .confianza__lista { grid-template-columns: repeat(4, 1fr); } .confianza__item { flex-direction: row; text-align: left; justify-content: center; font-size: var(--t-base); } }

/* ---------- Tarjetas de producto ---------- */
.rejilla-productos { display: grid; gap: var(--s5); grid-template-columns: repeat(2, 1fr); }
.tarjeta { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--linea); border-radius: var(--r-lg); overflow: hidden; text-decoration: none; color: inherit; transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s; }
.tarjeta:hover { transform: translateY(-4px); box-shadow: var(--sombra-lg); border-color: transparent; color: inherit; }
.tarjeta .foto { border-radius: 0; }
.tarjeta .foto img { transition: transform .5s var(--ease); }
.tarjeta:hover .foto img { transform: scale(1.03); }
.tarjeta__cuerpo { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s4); flex: 1; }
.tarjeta__tipo { font-size: var(--t-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-3); }
.tarjeta h3 { font-size: var(--t-lg); margin: 0; }
.tarjeta__beneficio { color: var(--tinta-2); font-size: var(--t-sm); line-height: 1.5; margin: 0; flex: 1; }
.tarjeta__precio { display: grid; grid-template-areas: "desde antes" "precio precio"; grid-template-columns: auto 1fr; column-gap: var(--s2); align-items: baseline; margin-top: var(--s2); min-height: 3.4rem; }
.tarjeta__desde { grid-area: desde; font-size: var(--t-xs); color: var(--tinta-3); }
.tarjeta__precio .precio { grid-area: precio; line-height: 1.2; }
.tarjeta__precio .precio-antes { grid-area: antes; font-size: var(--t-xs); }
.precio { font-family: var(--f-titulo); font-weight: 600; font-size: var(--t-xl); color: var(--tinta); }
.precio-antes { color: var(--tinta-3); text-decoration: line-through; font-size: var(--t-sm); }
.tarjeta .btn { margin-top: var(--s3); }
@media (min-width: 640px) { .tarjeta__cuerpo { padding: var(--s5); } }
@media (min-width: 1000px) { .rejilla-productos { grid-template-columns: repeat(4, 1fr); gap: var(--s5); } }
@media (max-width: 420px) { .tarjeta h3 { font-size: var(--t-base); } .tarjeta .btn { padding: 0 var(--s3); font-size: var(--t-sm); } }

/* Esqueletos de carga */
.esqueleto { background: linear-gradient(100deg, var(--crema-2) 30%, #fbf8f3 50%, var(--crema-2) 70%); background-size: 200% 100%; animation: brillo 1.3s linear infinite; border-radius: var(--r-md); }
@keyframes brillo { to { background-position: -200% 0; } }
.tarjeta-esq { aspect-ratio: 3 / 5; }

/* ---------- Cómo funciona ---------- */
.pasos { list-style: none; display: grid; gap: var(--s5); counter-reset: paso; }
.paso { position: relative; display: flex; gap: var(--s4); align-items: flex-start; padding: var(--s5); background: #fff; border: 1px solid var(--linea); border-radius: var(--r-lg); }
.paso__num { flex: none; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: var(--degradado-verde); color: #fff; font-family: var(--f-titulo); font-weight: 600; font-size: var(--t-lg); }
.paso h3 { font-size: var(--t-lg); margin: 0 0 var(--s1); font-family: var(--f-cuerpo); font-weight: 600; letter-spacing: 0; }
.paso p { margin: 0; color: var(--tinta-2); font-size: var(--t-sm); }
@media (min-width: 900px) {
  .pasos { grid-template-columns: repeat(4, 1fr); }
  .paso { flex-direction: column; gap: var(--s4); }
}

/* ---------- Testimonios (oculto hasta tener reseñas reales) ---------- */
.testimonios__rejilla { display: grid; gap: var(--s4); }
.testimonio { background: #fff; border: 1px solid var(--linea); border-radius: var(--r-lg); padding: var(--s5); }
.testimonio blockquote { margin: 0 0 var(--s3); font-family: var(--f-titulo); font-size: var(--t-lg); }
.testimonio cite { font-style: normal; color: var(--tinta-3); font-size: var(--t-sm); }
@media (min-width: 800px) { .testimonios__rejilla { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Acordeón (preguntas frecuentes) ---------- */
.acordeon { max-width: 780px; margin-inline: auto; border-top: 1px solid var(--linea); }
.acordeon__item { border-bottom: 1px solid var(--linea); }
.acordeon__boton { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--s4); padding: var(--s5) 0; background: none; border: 0; text-align: left; font-weight: 600; font-size: var(--t-base); line-height: 1.4; color: var(--tinta); }
.acordeon__boton:hover { color: var(--verde-700); }
.acordeon__boton svg { width: 22px; height: 22px; flex: none; color: var(--verde-700); transition: transform .3s var(--ease); }
.acordeon__boton[aria-expanded="true"] svg { transform: rotate(45deg); }
.acordeon__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s var(--ease); }
.acordeon__panel > div { overflow: hidden; }
.acordeon__panel[data-abierto="true"] { grid-template-rows: 1fr; }
.acordeon__panel p { color: var(--tinta-2); padding-bottom: var(--s5); margin: 0; max-width: 62ch; }

/* ---------- Banda de WhatsApp ---------- */
.banda { background: var(--oscuro); color: #fff; border-radius: var(--r-lg); padding: var(--s7) var(--s5); text-align: center; position: relative; overflow: hidden; }
.banda::before { content: ""; position: absolute; inset: 0; background: radial-gradient(600px 220px at 15% 0%, rgba(0,192,128,.28), transparent 60%), radial-gradient(500px 220px at 90% 100%, rgba(248,40,104,.22), transparent 60%); }
.banda > * { position: relative; }
.banda h2 { color: #fff; }
.banda p { color: #cfd9d5; max-width: 52ch; margin-inline: auto; }

/* ---------- Pie de página ---------- */
.pie { background: var(--oscuro); color: #cdd6d2; padding-block: var(--s8) var(--s6); margin-top: var(--s9); }
.pie a { color: #e8f3ee; text-decoration: none; }
.pie a:hover { color: #7ee8c4; text-decoration: underline; }
.pie__grid { display: grid; gap: var(--s7); }
.pie__logo img { width: 230px; height: auto; }
.pie h2 { font-family: var(--f-cuerpo); font-size: var(--t-xs); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #8fa49b; margin-bottom: var(--s4); }
.pie ul { list-style: none; display: grid; gap: var(--s3); }
.pie li { font-size: var(--t-sm); }
.pie__legal { margin-top: var(--s7); padding-top: var(--s5); border-top: 1px solid rgba(255,255,255,.12); font-size: var(--t-xs); line-height: 1.6; color: #98a8a1; }
.pie__legal p { margin-bottom: var(--s2); max-width: 90ch; }
@media (min-width: 800px) { .pie__grid { grid-template-columns: 1.3fr 1fr 1fr; } }

/* ---------- Botón flotante de WhatsApp ---------- */
.wa-flotante { position: fixed; right: 16px; bottom: 16px; z-index: 90; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: var(--verde-700); color: #fff; box-shadow: 0 8px 24px rgba(0, 90, 62, .4); transition: transform .25s var(--ease), background-color .2s; }
.wa-flotante:hover { background: var(--verde-800); color: #fff; transform: scale(1.06); }
.wa-flotante svg { width: 30px; height: 30px; }
body.con-barra .wa-flotante { bottom: 92px; }
@media (min-width: 900px) { body.con-barra .wa-flotante { bottom: 16px; } }

/* ---------- Aviso emergente ---------- */
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 150; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; display: flex; align-items: center; gap: var(--s4); background: var(--tinta); color: #fff; padding: var(--s3) var(--s3) var(--s3) var(--s5); border-radius: var(--r-pill); box-shadow: var(--sombra-lg); font-size: var(--t-sm); font-weight: 500; width: max-content; max-width: calc(100% - 2rem); transition: opacity .3s var(--ease), transform .3s var(--ease); }
.toast[data-visible="true"] { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.toast a { color: #7ee8c4; font-weight: 600; white-space: nowrap; }
body.con-barra .toast { bottom: 96px; }

/* ---------- Páginas de producto ---------- */
.migas { display: flex; align-items: center; gap: var(--s2); font-size: var(--t-sm); padding-top: var(--s4); }
.migas a { display: inline-flex; align-items: center; gap: var(--s1); text-decoration: none; font-weight: 600; color: var(--tema-texto, var(--verde-700)); min-height: 44px; }
.migas a:hover { opacity: .8; color: var(--tema-texto, var(--verde-700)); }
.migas a svg { width: 18px; height: 18px; }
.migas span { color: var(--tema-texto-suave); }
.pp-banda { background: var(--tema-fondo); color: var(--tema-texto); padding-bottom: var(--s7); }
.pp-banda__titulo { padding-block: var(--s2) var(--s5); }
.pp-banda__titulo .tipo { display: inline-block; font-size: var(--t-xs); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--tema-texto-suave); margin-bottom: var(--s2); }
.pp-banda__titulo h1 { color: var(--tema-texto); font-size: var(--t-2xl); margin-bottom: var(--s2); }
.pp-banda__titulo p { color: var(--tema-texto-suave); margin: 0; font-size: var(--t-lg); max-width: 52ch; }
.pp-grid { display: grid; gap: var(--s5); align-items: start; }
@media (min-width: 900px) {
  .pp-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--s7); }
  .pp-banda__titulo h1 { font-size: var(--t-3xl); }
  .pp-panel { position: sticky; top: calc(var(--alto-cabecera) + 20px); }
}

/* Galería */
.galeria { min-width: 0; }
.galeria__visor { position: relative; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sombra-md); background: rgba(0,0,0,.08); }
.galeria__pista { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.galeria__pista::-webkit-scrollbar { display: none; }
.galeria__slide { flex: 0 0 100%; scroll-snap-align: center; scroll-snap-stop: always; border: 0; padding: 0; display: block; cursor: zoom-in; width: 100%; }
.galeria__flecha { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; display: none; place-items: center; border-radius: 50%; border: 0; background: rgba(255,255,255,.92); color: var(--tinta); box-shadow: var(--sombra-md); transition: background-color .2s, transform .2s var(--ease); }
.galeria__flecha:hover { background: #fff; transform: translateY(-50%) scale(1.06); }
.galeria__flecha svg { width: 22px; height: 22px; }
.galeria__flecha--ant { left: 12px; }
.galeria__flecha--sig { right: 12px; }
.galeria__contador { position: absolute; right: 12px; bottom: 12px; background: rgba(19,28,25,.7); color: #fff; padding: 3px 10px; border-radius: var(--r-pill); font-size: var(--t-xs); font-weight: 600; }
.galeria__miniaturas { display: flex; gap: var(--s2); margin-top: var(--s3); overflow-x: auto; padding: 4px; scrollbar-width: none; }
.galeria__miniaturas::-webkit-scrollbar { display: none; }
.miniatura { flex: 0 0 auto; width: 68px; aspect-ratio: 3 / 4; border-radius: var(--r-sm); overflow: hidden; border: 2px solid transparent; padding: 0; background: rgba(255,255,255,.2); opacity: .75; transition: opacity .2s, border-color .2s, transform .2s var(--ease); }
.miniatura img { width: 100%; height: 100%; object-fit: cover; }
.miniatura:hover { opacity: 1; transform: translateY(-2px); }
.miniatura[aria-current="true"] { opacity: 1; border-color: var(--tema-acento, var(--verde)); box-shadow: 0 0 0 2px rgba(255,255,255,.7); }
@media (min-width: 900px) { .galeria__flecha { display: grid; } .miniatura { width: 84px; } }

/* Panel de compra */
.pp-panel { background: #fff; color: var(--tinta); border-radius: var(--r-lg); box-shadow: var(--sombra-lg); padding: var(--s5); }
.pp-panel__intro { color: var(--tinta-2); font-size: var(--t-base); margin-bottom: var(--s5); }
.pp-panel h2 { font-size: var(--t-lg); font-family: var(--f-cuerpo); font-weight: 600; letter-spacing: 0; margin-bottom: var(--s3); }
.paquetes { display: grid; gap: var(--s3); }
.paquete { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s3) var(--s4); width: 100%; text-align: left; background: #fff; border: 2px solid var(--linea-fuerte); border-radius: var(--r-md); padding: var(--s4); min-height: 76px; transition: border-color .2s, background-color .2s, box-shadow .2s, transform .2s var(--ease); -webkit-tap-highlight-color: transparent; }
.paquete:hover { border-color: var(--verde); }
.paquete[aria-checked="true"] { border-color: var(--verde-700); background: var(--verde-50); box-shadow: 0 0 0 3px var(--verde-100); }
.paquete:active { transform: scale(.99); }
.paquete__radio { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--linea-fuerte); display: grid; place-items: center; background: #fff; transition: border-color .2s; }
.paquete[aria-checked="true"] .paquete__radio { border-color: var(--verde-700); }
.paquete[aria-checked="true"] .paquete__radio::after { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--verde-700); }
.paquete__nombre { font-weight: 600; line-height: 1.25; }
.paquete__detalle { display: block; font-size: var(--t-xs); color: var(--tinta-3); font-weight: 500; margin-top: 2px; }
.paquete__ahorro { display: inline-block; margin-top: var(--s2); font-size: var(--t-xs); font-weight: 700; color: var(--verde-800); background: var(--verde-100); padding: 2px 10px; border-radius: var(--r-pill); }
.paquete__precio { text-align: right; line-height: 1.2; }
.paquete__precio .precio { font-size: var(--t-xl); }
.paquete__precio .precio-antes { display: block; }
.paquete__frase { grid-column: 1 / -1; margin: 0; font-size: var(--t-sm); color: var(--verde-800); font-weight: 500; }
.etiqueta-favorito { position: absolute; top: -11px; left: 54px; background: var(--coral-700); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 3px 12px; border-radius: var(--r-pill); }
.pp-cuatro { font-size: var(--t-sm); color: var(--tinta-3); margin: var(--s3) 0 0; }
.pp-botones { display: grid; gap: var(--s3); margin-top: var(--s5); }
.pp-envio { list-style: none; display: grid; gap: var(--s2); margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--linea); font-size: var(--t-sm); color: var(--tinta-2); }
.pp-envio li { display: flex; gap: var(--s2); align-items: center; }
.pp-envio svg { width: 18px; height: 18px; color: var(--verde-700); flex: none; }
.pp-panel .zona--compacta { margin-top: var(--s4); }

/* Barra fija inferior (móvil) */
.barra-fija { position: fixed; left: 0; right: 0; bottom: 0; z-index: 95; background: rgba(255,255,255,.96); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--linea); padding: var(--s3) var(--s4) calc(var(--s3) + env(safe-area-inset-bottom)); display: flex; align-items: center; justify-content: space-between; gap: var(--s4); box-shadow: 0 -8px 30px rgba(19,28,25,.08); }
.barra-fija__info { line-height: 1.2; min-width: 0; }
.barra-fija__info small { display: block; color: var(--tinta-3); font-size: var(--t-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barra-fija__info .precio { font-size: var(--t-xl); }
.barra-fija .btn { flex: none; }
@media (min-width: 900px) { .barra-fija { display: none; } }
body.con-barra { padding-bottom: 84px; }
@media (min-width: 900px) { body.con-barra { padding-bottom: 0; } }

/* Secciones de contenido del producto */
.pp-seccion { padding-block: var(--s7); }
.pp-seccion + .pp-seccion { border-top: 1px solid var(--linea); }
.pp-seccion__cab { margin-bottom: var(--s5); }
.pp-seccion__cab h2 { font-size: var(--t-xl); margin: 0; }
.beneficios { list-style: none; display: grid; gap: var(--s3); }
.beneficio { display: flex; gap: var(--s4); align-items: flex-start; padding: var(--s4); background: var(--crema); border-radius: var(--r-md); }
.beneficio svg { width: 24px; height: 24px; flex: none; color: var(--verde-700); margin-top: 2px; }
.beneficio strong { display: block; font-weight: 600; margin-bottom: 2px; }
.beneficio span { color: var(--tinta-2); font-size: var(--t-sm); }
@media (min-width: 700px) { .beneficios { grid-template-columns: repeat(2, 1fr); } }
.dos-col { display: grid; gap: var(--s6); }
@media (min-width: 900px) { .dos-col { grid-template-columns: 1fr 1fr; gap: var(--s8); } }
.nota { color: var(--tinta-3); font-size: var(--t-sm); }
.lista-pasos { list-style: none; counter-reset: p; display: grid; gap: var(--s4); }
.lista-pasos li { counter-increment: p; display: flex; gap: var(--s4); align-items: flex-start; }
.lista-pasos li::before { content: counter(p); flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--verde-50); color: var(--verde-800); font-weight: 700; font-size: var(--t-sm); }
.lista-notas { margin-top: var(--s5); padding-left: 1.2rem; display: grid; gap: var(--s2); color: var(--tinta-2); font-size: var(--t-sm); }
.tabla { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.tabla th, .tabla td { text-align: left; padding: var(--s3) var(--s2); border-bottom: 1px solid var(--linea); vertical-align: top; }
.tabla th { font-weight: 600; width: 46%; color: var(--tinta); }
.tabla td { color: var(--tinta-2); }
.sellos { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); }
.sellos li { display: inline-flex; align-items: center; gap: var(--s2); padding: 6px 14px; border: 1px solid var(--verde-100); background: var(--verde-50); color: #0b3b2b; border-radius: var(--r-pill); font-size: var(--t-xs); font-weight: 600; }
.sellos svg { width: 14px; height: 14px; color: var(--verde-700); }
.alerta-caja { margin-top: var(--s5); padding: var(--s4) var(--s5); background: #fffaf0; border: 1px solid #f3e0b5; border-radius: var(--r-md); }
.alerta-caja h3 { font-family: var(--f-cuerpo); font-size: var(--t-base); font-weight: 700; letter-spacing: 0; margin-bottom: var(--s2); }
.alerta-caja ul { padding-left: 1.2rem; display: grid; gap: var(--s1); font-size: var(--t-sm); color: var(--tinta-2); }
.extra-pareja { margin-top: var(--s3); font-weight: 600; color: var(--coral-700); }
.leyenda { padding: var(--s4) var(--s5); background: var(--crema); border-left: 4px solid var(--verde); border-radius: var(--r-sm); font-size: var(--t-sm); color: var(--tinta-2); }
.otros-productos .rejilla-productos { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .otros-productos .rejilla-productos { grid-template-columns: repeat(3, 1fr); } }

/* Visor ampliado */
.visor { position: fixed; inset: 0; z-index: 300; background: rgba(10,14,12,.94); display: grid; place-items: center; padding: var(--s4); animation: aparece .25s var(--ease); }
.visor img { max-height: 92vh; max-width: min(96vw, 900px); width: auto; border-radius: var(--r-sm); }
.visor__cerrar { position: absolute; top: 12px; right: 12px; width: 48px; height: 48px; border-radius: 50%; border: 0; background: rgba(255,255,255,.14); color: #fff; display: grid; place-items: center; }
.visor__cerrar:hover { background: rgba(255,255,255,.25); }
.visor__cerrar svg { width: 24px; height: 24px; }

/* ---------- Carrito y formulario ---------- */
.pagina-titulo { padding-block: var(--s6) var(--s5); }
.pagina-titulo h1 { font-size: var(--t-2xl); margin-bottom: var(--s2); }
.pagina-titulo p { color: var(--tinta-2); margin: 0; }
.carrito-grid { display: grid; gap: var(--s6); align-items: start; padding-bottom: var(--s7); }
@media (min-width: 960px) { .carrito-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s7); } .carrito-resumen { position: sticky; top: calc(var(--alto-cabecera) + 20px); } }
.caja { background: #fff; border: 1px solid var(--linea); border-radius: var(--r-lg); padding: var(--s5); }
.caja + .caja { margin-top: var(--s4); }
.caja h2 { font-size: var(--t-lg); font-family: var(--f-cuerpo); font-weight: 700; letter-spacing: 0; margin-bottom: var(--s4); }
.linea { display: grid; grid-template-columns: 76px 1fr; gap: var(--s4); padding-block: var(--s4); border-bottom: 1px solid var(--linea); }
.linea:first-of-type { padding-top: 0; }
.linea .foto { border-radius: var(--r-sm); }
.linea__nombre { font-weight: 600; line-height: 1.3; }
.linea__nombre a { color: inherit; text-decoration: none; }
.linea__paquete { font-size: var(--t-xs); color: var(--verde-800); font-weight: 600; margin-top: 2px; }
.linea__pie { display: flex; align-items: center; justify-content: space-between; margin-top: var(--s3); gap: var(--s3); flex-wrap: wrap; }
.cantidad { display: inline-flex; align-items: center; border: 1.5px solid var(--linea-fuerte); border-radius: var(--r-pill); }
.cantidad button { width: 40px; height: 40px; display: grid; place-items: center; background: none; border: 0; border-radius: 50%; color: var(--tinta); font-size: 20px; line-height: 1; }
.cantidad button:hover { background: var(--verde-50); color: var(--verde-800); }
.cantidad output { min-width: 28px; text-align: center; font-weight: 600; }
.linea__total { font-family: var(--f-titulo); font-weight: 600; font-size: var(--t-lg); text-align: right; }
.linea__total small { display: block; font-family: var(--f-cuerpo); font-weight: 500; font-size: var(--t-xs); color: var(--tinta-3); }
.linea__quitar { background: none; border: 0; color: var(--tinta-3); font-size: var(--t-xs); text-decoration: underline; padding: var(--s1) 0; min-height: 32px; }
.linea__quitar:hover { color: var(--coral-700); }
.fila-resumen { display: flex; justify-content: space-between; gap: var(--s4); padding-block: var(--s2); font-size: var(--t-sm); color: var(--tinta-2); }
.fila-resumen--ahorro { color: var(--verde-800); font-weight: 600; }
.fila-resumen--total { font-size: var(--t-lg); color: var(--tinta); font-weight: 700; border-top: 1px solid var(--linea); margin-top: var(--s2); padding-top: var(--s4); }
.fila-resumen--total .precio { font-size: var(--t-2xl); }
.nota-combinados { margin-top: var(--s3); padding: var(--s3) var(--s4); background: var(--coral-50); color: #4a1626; border-radius: var(--r-sm); font-size: var(--t-sm); }
.combo-aplicado { margin-top: var(--s3); padding: var(--s3) var(--s4); background: var(--verde-50); color: #0b3b2b; border: 1px solid var(--verde-100); border-radius: var(--r-sm); font-size: var(--t-sm); font-weight: 600; }
.vacio { text-align: center; padding: var(--s8) var(--s4); max-width: 460px; margin: 0 auto; }
.vacio svg { width: 96px; height: 96px; margin: 0 auto var(--s5); color: var(--verde); }
.vacio p { color: var(--tinta-2); }

.formulario { display: grid; gap: var(--s4); }
.fila-2 { display: grid; gap: var(--s4); }
@media (min-width: 560px) { .fila-2 { grid-template-columns: 1fr 1fr; } }
.campo label { display: block; font-weight: 600; font-size: var(--t-sm); margin-bottom: var(--s2); }
.campo .opcional { font-weight: 400; color: var(--tinta-3); }
.campo input, .campo textarea { width: 100%; min-height: 52px; padding: var(--s3) var(--s4); border: 1.5px solid var(--linea-fuerte); border-radius: var(--r-md); background: #fff; font-size: 1rem; transition: border-color .2s, box-shadow .2s; }
.campo textarea { min-height: 88px; resize: vertical; }
.campo input:focus, .campo textarea:focus { outline: none; border-color: var(--verde-700); box-shadow: 0 0 0 4px var(--verde-100); }
.campo input[aria-invalid="true"], .campo textarea[aria-invalid="true"] { border-color: #c2371f; box-shadow: 0 0 0 4px #ffe4df; }
.campo .error { display: none; margin: var(--s2) 0 0; font-size: var(--t-sm); color: #a8281a; font-weight: 500; }
.campo input[aria-invalid="true"] ~ .error, .campo textarea[aria-invalid="true"] ~ .error { display: block; }
.privacidad { display: flex; gap: var(--s2); align-items: center; justify-content: center; font-size: var(--t-sm); color: var(--tinta-2); margin: 0; text-align: center; }
.confirmacion { padding: var(--s4); border-radius: var(--r-md); background: var(--verde-50); border: 1px solid var(--verde-100); color: #0b3b2b; font-size: var(--t-sm); }
.confirmacion p { margin: 0 0 var(--s2); }

/* ---------- Texto legal ---------- */
.texto-legal { max-width: var(--ancho-texto); padding-block: var(--s6) var(--s7); }
.texto-legal h2 { font-size: var(--t-xl); margin-top: var(--s6); }
.texto-legal ul { padding-left: 1.25rem; display: grid; gap: var(--s2); margin: 0 0 var(--s4); color: var(--tinta-2); }
.texto-legal p { color: var(--tinta-2); }
.texto-legal h2 { margin-bottom: var(--s3); }
.legal-resumen { padding: var(--s5); background: var(--verde-50); border: 1px solid var(--verde-100); border-left: 4px solid var(--verde); border-radius: var(--r-md); }
.legal-resumen h2 { margin-top: 0; }
.legal-resumen ul { margin: 0; color: var(--tinta); }
.pendiente { padding: var(--s5); border: 2px dashed var(--coral-700); background: var(--coral-50); border-radius: var(--r-md); color: #4a1626; }
.pendiente strong { color: var(--coral-700); }

/* ---------- Animaciones al hacer scroll ---------- */
.js .revelar { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: var(--retraso, 0ms); }
.js .revelar.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .js .revelar { opacity: 1; transform: none; }
}