:root {
  --crema: #f5ecdf; --azul: #dfecf5; --rosa: #f6e0f6; --blanco: #fff;
  --marca: #5f6f82; --texto: #4f5d6e; --suave: #7d8a99;
  --boton: #5a6a7c; --boton-hover: #46546a; --linea: #e6d9c6;
  --nuevo: #c46bd6; --error: #b3261e; --ok: #2e7d4f; --wa: #25d366;
  --radio: 18px;
  --sombra: 0 6px 24px rgba(70, 84, 106, .10);
  --sombra-alta: 0 14px 36px rgba(70, 84, 106, .18);
  --suave-curva: cubic-bezier(.2, .8, .2, 1);
  --candado: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a6a7c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10' width='16' height='11' rx='2.5'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E");
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 76px; }
body { margin: 0; background: var(--crema); color: var(--texto); font: 16px/1.5 'DM Sans', system-ui, sans-serif; -webkit-tap-highlight-color: transparent; }
h1, h2, h3 { font-family: 'Fredoka', sans-serif; color: var(--marca); margin: 0; font-weight: 600; letter-spacing: -.3px; line-height: 1.15; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--boton); }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--boton); outline-offset: 2px; }

/* Cabecera y navegación */
.topbar { background: var(--boton); color: #fff; font-size: 13px; text-align: center; padding: 7px 16px; }
.cabecera { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px 8px 16px; background: rgba(245, 236, 223, .9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: box-shadow .25s; }
.cabecera.con-sombra { box-shadow: 0 4px 18px rgba(70, 84, 106, .12); }
.logo img { height: 40px; width: auto; transition: transform .3s var(--suave-curva); }
.logo:hover img { transform: rotate(-3deg) scale(1.04); }
.menu { display: flex; align-items: center; gap: 4px; }
.menu > a:not(.btn-carrito) { position: relative; padding: 10px 12px; font-weight: 700; font-size: 15px; color: var(--suave); text-decoration: none; transition: color .2s; }
.menu > a:not(.btn-carrito)::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: 5px; height: 2.5px; border-radius: 2px; background: var(--boton); transform: scaleX(0); transition: transform .3s var(--suave-curva); }
.menu > a[aria-current="page"] { color: var(--marca); }
.menu > a[aria-current="page"]::after { transform: scaleX(1); }
.btn-icono { position: relative; display: grid; place-items: center; width: 44px; height: 44px; margin-left: 4px; border-radius: 50%; background: var(--blanco); color: var(--marca); box-shadow: var(--sombra); transition: transform .2s; }
.btn-icono:active { transform: scale(.92); }
.btn-wa-top { background: var(--wa); color: #fff; box-shadow: 0 6px 16px rgba(37, 211, 102, .35); }
.btn-carrito[aria-current="page"] { background: var(--boton); color: #fff; }
.contador { position: absolute; top: -3px; right: -3px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--nuevo); color: #fff; font-size: 12px; font-weight: 700; display: grid; place-items: center; }
.contador.rebota { animation: rebota .6s var(--suave-curva); }

main { max-width: 1120px; margin: 0 auto; outline: none; min-height: 60vh; }
main.entra { animation: entra .45s var(--suave-curva); }

/* Botones */
.btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 50px; padding: 0 26px; border: 0; border-radius: 999px; background: var(--boton); color: #fff; font-weight: 700; font-size: 16px; text-decoration: none; cursor: pointer; transition: background .2s, transform .15s, box-shadow .2s; box-shadow: 0 6px 16px rgba(90, 106, 124, .25); }
.btn:hover { background: var(--boton-hover); transform: translateY(-1px); box-shadow: 0 10px 22px rgba(90, 106, 124, .3); }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.btn-block { width: 100%; }
.btn-grande { min-height: 58px; font-size: 18px; }
.btn-claro { background: var(--blanco); color: var(--marca); box-shadow: 0 4px 14px rgba(0, 0, 0, .18); min-height: 44px; padding: 0 20px; }
.btn-claro:hover { background: var(--blanco); }
.btn-borde { background: transparent; color: var(--marca); border: 2px solid var(--boton); box-shadow: none; }
.btn-borde:hover { background: var(--boton); color: #fff; }
.btn-brilla::after { content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent); transform: skewX(-20deg); animation: brillo 3.2s ease-in-out 1.2s infinite; }
.btn.cargando { color: transparent; }
.btn.cargando::before { content: ''; position: absolute; width: 22px; height: 22px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .4); border-top-color: #fff; animation: gira .8s linear infinite; }
.eyebrow { margin: 0 0 6px; font-size: 13px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--suave); }

/* Aparición al hacer scroll */
.revela { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--suave-curva), transform .6s var(--suave-curva); }
.revela.visible { opacity: 1; transform: none; }
.grilla .revela:nth-child(4n+2) { transition-delay: .06s; }
.grilla .revela:nth-child(4n+3) { transition-delay: .12s; }
.grilla .revela:nth-child(4n+4) { transition-delay: .18s; }

/* 1. Videos tipo historias */
.historias { position: relative; padding: 14px 0 6px; }
.barras { display: flex; gap: 4px; padding: 0 16px 10px; max-width: 560px; margin: 0 auto; }
.barras span { flex: 1; height: 3px; border-radius: 3px; background: rgba(90, 106, 124, .2); overflow: hidden; }
.barras i { display: block; height: 100%; background: var(--boton); transform: scaleX(0); transform-origin: left; transition: transform .25s linear; }
.pista { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 11vw 10px; scrollbar-width: none; overscroll-behavior-x: contain; }
.pista::-webkit-scrollbar { display: none; }
.historia { position: relative; flex: 0 0 78vw; max-width: 340px; aspect-ratio: 9 / 16; max-height: 68vh; border-radius: 22px; overflow: hidden; background: #d8d2c8; scroll-snap-align: center; transform: scale(.92); opacity: .55; transition: transform .45s var(--suave-curva), opacity .45s, box-shadow .45s; cursor: pointer; }
.historia.activa { transform: none; opacity: 1; box-shadow: var(--sombra-alta); }
@media (min-width: 560px) { .pista { padding-inline: calc(50% - 170px); } }
.historia video { width: 100%; height: 100%; object-fit: cover; display: block; background: #d8d2c8; }
.historia .reproducir { position: absolute; inset: 0; display: none; place-items: center; pointer-events: none; }
.historia .reproducir::before { content: ''; width: 76px; height: 76px; border-radius: 50%; background: rgba(255, 255, 255, .92) 54% 50% / 30px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%235a6a7c' d='M7 4.5v15l13-7.5z'/%3E%3C/svg%3E"); box-shadow: var(--sombra-alta); animation: late 1.6s ease-in-out infinite; }
.historia.activa.bloqueada .reproducir { display: grid; }
.historia.activa.cargando:not(.bloqueada) .reproducir { display: grid; }
.historia.activa.cargando:not(.bloqueada) .reproducir::before { width: 44px; height: 44px; background: none; border: 4px solid rgba(255, 255, 255, .5); border-top-color: #fff; box-shadow: none; animation: gira .8s linear infinite; }
.historia .sonido { position: absolute; top: 12px; right: 12px; width: 38px; height: 38px; border: 0; border-radius: 50%; cursor: pointer; background: rgba(0, 0, 0, .45) center / 20px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 9h4l5-4v14l-5-4H4z'/%3E%3Cpath d='m17 9 4 6m0-6-4 6'/%3E%3C/svg%3E"); }
.historia .sonido.on { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 9h4l5-4v14l-5-4H4z'/%3E%3Cpath d='M17 8.5a5 5 0 0 1 0 7M19.5 6a8.5 8.5 0 0 1 0 12'/%3E%3C/svg%3E"); }
.historia.activa .sonido:not(.on) { animation: late 1.8s ease-in-out 1.5s 3; }
.historia-pie { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; padding: 50px 14px 14px; background: linear-gradient(transparent, rgba(0, 0, 0, .55)); color: #fff; font: 600 17px/1.2 'Fredoka', sans-serif; opacity: 0; transform: translateY(10px); transition: opacity .4s .15s, transform .4s .15s var(--suave-curva); }
.historia.activa .historia-pie { opacity: 1; transform: none; }
.historia-pie small { display: block; font: 500 12px 'DM Sans', sans-serif; opacity: .85; }
.flecha { position: absolute; top: 50%; z-index: 2; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92) center / 22px no-repeat; box-shadow: var(--sombra); cursor: pointer; transition: transform .2s; }
.flecha:active { transform: scale(.9); }
.flecha.izq { left: 8px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a6a7c' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E"); }
.flecha.der { right: 8px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a6a7c' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E"); }
@media (min-width: 560px) { .flecha.izq { left: calc(50% - 230px); } .flecha.der { right: calc(50% - 230px); } }

.entrada { padding: 16px 16px 8px; text-align: center; max-width: 560px; margin: 0 auto; }
.entrada h1 { font-size: clamp(26px, 7vw, 38px); margin-bottom: 8px; }
.entrada p { margin: 0 0 18px; color: var(--suave); }
.entrada .btn { width: 100%; }
.btn-cta { white-space: nowrap; padding: 0 18px; font-size: clamp(16px, 4.6vw, 19px); }

/* Señales de confianza */
.confianza { list-style: none; margin: 0 auto; padding: 18px 16px 6px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; max-width: 760px; }
@media (min-width: 720px) { .confianza { grid-template-columns: repeat(4, 1fr); } }
.confianza li { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; padding: 12px 8px; background: var(--blanco); border-radius: 14px; font-size: 12.5px; color: var(--suave); line-height: 1.3; }
.confianza b { font: 600 15px 'Fredoka', sans-serif; color: var(--marca); }
.ic { width: 34px; height: 34px; margin-bottom: 4px; border-radius: 50%; background: var(--azul) center / 18px no-repeat; }
.ic-candado { background-image: var(--candado); }
.ic-mano { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a6a7c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v4M8 5v6M16 5v6M4 11h16l-1.5 7a3 3 0 0 1-3 2.5h-7a3 3 0 0 1-3-2.5z'/%3E%3C/svg%3E"); }
.ic-camion { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a6a7c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h11v10H3zM14 9h4l3 3v4h-7'/%3E%3Ccircle cx='7' cy='17.5' r='1.8'/%3E%3Ccircle cx='17' cy='17.5' r='1.8'/%3E%3C/svg%3E"); }
.ic-corazon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a6a7c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.6-7 10-7 10z'/%3E%3C/svg%3E"); }
.candado { display: inline-block; width: 15px; height: 15px; vertical-align: -2px; background: var(--candado) center / contain no-repeat; }

.bloque { padding: 26px 16px; }
.titulo-bloque { margin-bottom: 14px; }
.titulo-bloque h1, .titulo-bloque h2 { font-size: clamp(24px, 6.4vw, 34px); }
.titulo-bloque p { margin: 6px 0 0; color: var(--suave); }

.combos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 16px; }
@media (min-width: 720px) { .combos { grid-template-columns: repeat(4, 1fr); } }
.combo { background: var(--blanco); border-radius: var(--radio); overflow: hidden; text-decoration: none; color: var(--marca); display: flex; flex-direction: column; box-shadow: var(--sombra); transition: transform .3s var(--suave-curva), box-shadow .3s; }
.combo:hover { transform: translateY(-4px); box-shadow: var(--sombra-alta); }
.combo > img { aspect-ratio: 1; object-fit: cover; }
.formula { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: -22px; font: 600 18px 'Fredoka', sans-serif; }
.formula img { width: 40px; height: 40px; border-radius: 50%; border: 3px solid var(--blanco); object-fit: cover; }
.combo-nombre { padding: 6px 10px 12px; text-align: center; font-size: 13.5px; font-weight: 500; }

/* Pasos de la compra */
.pasos-compra { list-style: none; display: flex; justify-content: center; gap: 6px; margin: 0; padding: 14px 16px 0; font-size: 13px; font-weight: 700; color: var(--suave); }
.pasos-compra li { display: flex; align-items: center; gap: 6px; }
.pasos-compra li + li::before { content: ''; width: 18px; height: 2px; border-radius: 2px; background: var(--linea); margin-right: 2px; }
.pasos-compra span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--blanco); border: 2px solid var(--linea); font-size: 12px; }
.pasos-compra .actual { color: var(--marca); }
.pasos-compra .actual span { background: var(--boton); border-color: var(--boton); color: #fff; animation: late 1.6s ease-in-out 1; }
.pasos-compra .hecho span { background: var(--azul); border-color: var(--azul); color: var(--boton); }

/* 2. Hamacas */
.chips { display: flex; gap: 8px; overflow-x: auto; margin: 0 -16px 14px; padding: 0 16px 4px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; padding: 9px 15px; border-radius: 999px; background: var(--blanco); border: 1px solid var(--linea); color: var(--texto); font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap; transition: background .2s, color .2s; }
.chip[aria-current="true"] { background: var(--boton); border-color: var(--boton); color: #fff; }
.nota-linea { margin: -4px 0 14px; color: var(--suave); }
.grilla { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 720px) { .grilla { grid-template-columns: repeat(3, 1fr); gap: 18px; } }
@media (min-width: 1000px) { .grilla { grid-template-columns: repeat(4, 1fr); } }
.tarjeta { display: flex; flex-direction: column; background: var(--blanco); border-radius: var(--radio); overflow: hidden; text-decoration: none; color: inherit; box-shadow: var(--sombra); }
.tarjeta.visible { transition: opacity .6s var(--suave-curva), transform .35s var(--suave-curva), box-shadow .3s; }
.tarjeta.visible:hover { transform: translateY(-4px); box-shadow: var(--sombra-alta); }
.tarjeta:active { transform: scale(.98); }
.tarjeta-img { position: relative; display: block; overflow: hidden; }
.tarjeta-img img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform .6s var(--suave-curva); }
.tarjeta:hover .tarjeta-img img { transform: scale(1.05); }
.es-agotado .tarjeta-img img { opacity: .55; filter: grayscale(.4); }
.etiqueta { position: absolute; top: 8px; left: 8px; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; color: #fff; background: var(--nuevo); }
.etiqueta.agotado { background: var(--suave); }
.tarjeta-info { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px 14px; }
.tarjeta-nombre { display: flex; align-items: center; gap: 7px; font-family: 'Fredoka', sans-serif; font-weight: 600; color: var(--marca); font-size: 17px; line-height: 1.2; }
.tarjeta-nombre img { flex: none; width: 18px; height: 18px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px var(--linea); }
.tarjeta-sub { font-size: 12.5px; color: var(--suave); line-height: 1.3; }
.tarjeta-info b { margin-top: 4px; font-size: 16px; color: var(--texto); }

/* 3. Ficha */
.ficha { padding-bottom: 110px; }
@media (min-width: 900px) { .ficha { display: grid; grid-template-columns: 1.1fr 1fr; gap: 32px; padding: 16px 16px 120px; align-items: start; } .galeria-wrap { position: sticky; top: 76px; } }
.galeria-wrap { position: relative; margin-top: 12px; }
.galeria { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; background: var(--blanco); }
@media (min-width: 900px) { .galeria { border-radius: var(--radio); } }
.galeria::-webkit-scrollbar { display: none; }
.galeria figure { flex: 0 0 100%; margin: 0; scroll-snap-align: start; aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; }
.galeria figure > img { width: 100%; height: 100%; object-fit: cover; }
.galeria .es-video { background: #2b2b2b; }
.galeria video { height: 100%; width: auto; max-width: 100%; }
.puntos { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; padding: 10px 16px 0; }
.puntos button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: #cfc3b1; cursor: pointer; transition: transform .25s, background .25s, width .25s; }
.puntos button.p-video { width: 14px; border-radius: 4px; background: #d8a6c9; }
.puntos button[aria-current="true"] { background: var(--boton); width: 18px; border-radius: 4px; }
.vista-motivo { position: absolute; left: 12px; bottom: 32px; display: flex; align-items: center; gap: 8px; padding: 5px 12px 5px 5px; border-radius: 999px; background: rgba(255, 255, 255, .95); box-shadow: var(--sombra); font-size: 12px; animation: entra .35s var(--suave-curva); }
.vista-motivo img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.vista-motivo span { display: flex; flex-direction: column; line-height: 1.2; color: var(--suave); }
.vista-motivo b { color: var(--marca); font-size: 14px; }

.ficha-info { padding: 14px 16px 0; }
.volver { display: inline-block; font-size: 14px; font-weight: 700; text-decoration: none; margin-bottom: 10px; }
.ficha-info h1 { font-size: clamp(28px, 7vw, 40px); }
.precio-grande { margin: 6px 0 4px; font: 600 28px 'Fredoka', sans-serif; color: var(--texto); display: inline-block; }
.precio-grande.cambia { animation: pulso .45s var(--suave-curva); }
.desc { margin: 0 0 6px; color: var(--suave); }
.aviso { background: var(--rosa); padding: 12px 14px; border-radius: 12px; }
.opcion { border-top: 1px solid var(--linea); padding: 18px 0 6px; margin-top: 14px; }
.opcion-titulo { font-size: 18px; margin-bottom: 10px; }
.opcion-titulo span { font-family: 'DM Sans', sans-serif; font-weight: 500; font-size: 15px; color: var(--suave); margin-left: 6px; }
.opcion-titulo small { font: 400 14px 'DM Sans', sans-serif; color: var(--suave); }
.ayuda { margin: -6px 0 10px; font-size: 14px; color: var(--suave); }
.ayuda.grupo { margin: 14px 0 8px; font-weight: 700; color: var(--marca); }

.telas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px 8px; }
@media (min-width: 480px) { .telas { grid-template-columns: repeat(5, 1fr); } }
.tela { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 0; border: 0; background: none; cursor: pointer; text-decoration: none; color: var(--texto); font-size: 12px; line-height: 1.2; text-align: center; }
.tela img { width: 100%; max-width: 68px; aspect-ratio: 1; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px var(--linea); transition: box-shadow .2s, transform .3s var(--suave-curva); }
.tela:hover img { transform: scale(1.06); }
.tela[aria-checked="true"] img, .tela[aria-current="true"] img { box-shadow: 0 0 0 3px var(--crema), 0 0 0 5px var(--boton); animation: elige .35s var(--suave-curva); }
.tela[aria-checked="true"] span, .tela[aria-current="true"] span { font-weight: 700; color: var(--marca); }
.tela:disabled, .tela-agotada { opacity: .45; cursor: not-allowed; }
.tela em { position: absolute; top: -4px; right: 0; padding: 1px 6px; border-radius: 999px; background: var(--nuevo); color: #fff; font-style: normal; font-size: 10px; font-weight: 700; }
.tela em.ag { background: var(--suave); }

.segmentos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.segmentos label { position: relative; }
.segmentos input { position: absolute; opacity: 0; }
.segmentos span { display: flex; flex-direction: column; justify-content: center; min-height: 58px; padding: 6px 8px; border: 1.5px solid var(--linea); border-radius: 12px; background: var(--blanco); text-align: center; font-size: 13.5px; font-weight: 500; line-height: 1.2; cursor: pointer; transition: border-color .2s, box-shadow .2s, transform .15s; }
.segmentos span:active { transform: scale(.97); }
.segmentos small { color: var(--suave); font-size: 12px; margin-top: 2px; }
.segmentos input:checked + span { border-color: var(--boton); box-shadow: inset 0 0 0 1px var(--boton); color: var(--marca); font-weight: 700; }
.segmentos input:focus-visible + span { outline: 3px solid var(--boton); outline-offset: 2px; }
.campo { margin-top: 12px; }
.campo label { display: block; font-size: 14px; font-weight: 700; margin-bottom: 5px; color: var(--marca); }
.campo label small { font-weight: 400; color: var(--suave); }
.campo input, .accesorio select { width: 100%; min-height: 50px; padding: 0 14px; border: 1.5px solid var(--linea); border-radius: 12px; background: var(--blanco); color: var(--texto); font: 16px 'DM Sans', sans-serif; transition: border-color .2s, box-shadow .2s; }
.campo input:focus, .accesorio select:focus { outline: none; border-color: var(--boton); box-shadow: 0 0 0 4px rgba(90, 106, 124, .12); }
.sacude { animation: sacude .45s; border-color: var(--error) !important; }
.check { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: 15px; cursor: pointer; }
.check input { width: 20px; height: 20px; accent-color: var(--boton); }
.check small { color: var(--suave); }

.plegable summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
.plegable summary::-webkit-details-marker { display: none; }
.plegable summary::after { content: '+'; font-size: 24px; color: var(--marca); transition: transform .3s var(--suave-curva); }
.plegable[open] summary::after { transform: rotate(45deg); }
.plegable[open] > :not(summary) { animation: entra .35s var(--suave-curva); }
.accesorio { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px dashed var(--linea); }
.accesorio > div:first-child { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.accesorio small { color: var(--suave); font-size: 13px; }
.accesorio select { min-height: 40px; margin-top: 6px; max-width: 170px; font-size: 15px; }
.carrusel { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -16px 14px; padding: 0 16px; scrollbar-width: none; }
.carrusel::-webkit-scrollbar { display: none; }
.carrusel img { flex: 0 0 78%; max-width: 360px; aspect-ratio: 1; border-radius: 14px; scroll-snap-align: start; background: var(--blanco); }
.incluye { list-style: none; padding: 0; margin: 0 0 8px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; font-size: 14.5px; }
.incluye li { display: flex; gap: 8px; }
.incluye li::before { content: ''; flex: none; width: 18px; height: 18px; margin-top: 2px; border-radius: 50%; background: var(--azul) center / 12px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a6a7c' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E"); }
.datos { margin: 0 0 8px; font-size: 14.5px; }
.datos dt { font-weight: 700; color: var(--marca); margin-top: 10px; }
.datos dd { margin: 2px 0 0; }

.stepper { display: flex; align-items: center; border: 1.5px solid var(--linea); border-radius: 999px; background: var(--blanco); flex: none; }
.stepper button { width: 40px; height: 40px; border: 0; background: none; font-size: 20px; cursor: pointer; color: var(--marca); border-radius: 50%; transition: background .15s; }
.stepper button:active { background: var(--crema); }
.stepper output { min-width: 22px; text-align: center; font-weight: 700; }
.stepper.chico button { width: 32px; height: 32px; font-size: 17px; }

.barra-compra { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; gap: 10px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--blanco); box-shadow: 0 -6px 24px rgba(70, 84, 106, .14); animation: subir .45s var(--suave-curva); }
.barra-compra .stepper { height: 52px; }
.barra-compra .btn { min-height: 52px; font-size: 15px; padding: 0 16px; }
@media (min-width: 900px) { .barra-compra { left: auto; right: max(88px, calc((100vw - 1120px) / 2 + 16px)); bottom: 16px; width: 460px; border-radius: 999px; padding: 8px; } }

.msg { margin-top: 12px; font-size: 15px; }
.msg:empty { display: none; }
.msg.err { color: var(--error); }
.msg.ok { color: var(--ok); }

/* 4. Carrito */
.carrito { padding: 18px 16px 40px; max-width: 620px; margin: 0 auto; }
.carrito h1 { font-size: 30px; margin-bottom: 14px; }
.carrito h2 { font-size: 21px; margin: 26px 0 4px; }
.lineas { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.lineas li { display: grid; grid-template-columns: 88px 1fr 32px; gap: 12px; align-items: start; background: var(--blanco); padding: 10px; border-radius: 14px; animation: entra .35s var(--suave-curva); }
.lineas img { border-radius: 10px; aspect-ratio: 1; object-fit: cover; }
.lineas div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lineas b { color: var(--marca); }
.lineas small { font-size: 13px; color: var(--suave); line-height: 1.35; }
.fila-precio { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; }
.lineas .precio { font-weight: 700; }
.quitar { width: 32px; height: 32px; border: 0; border-radius: 50%; background: var(--crema); font-size: 20px; cursor: pointer; transition: background .2s, transform .2s; }
.quitar:hover { background: var(--rosa); transform: rotate(90deg); }
.seguir { display: inline-block; margin-top: 12px; font-weight: 700; text-decoration: none; }
.metodos { display: grid; gap: 8px; margin-top: 10px; }
.metodos label { display: flex; gap: 12px; align-items: center; padding: 14px; border: 1.5px solid var(--linea); border-radius: 14px; background: var(--blanco); cursor: pointer; transition: border-color .2s; }
.metodos label:has(input:checked) { border-color: var(--boton); box-shadow: inset 0 0 0 1px var(--boton); }
.metodos input { width: 20px; height: 20px; accent-color: var(--boton); flex: none; }
.metodos span { display: flex; flex-direction: column; }
.metodos b { color: var(--marca); }
.metodos small { color: var(--suave); font-size: 13.5px; }
.resumen { margin: 20px 0 6px; padding: 14px 16px; background: var(--blanco); border-radius: 14px; }
.resumen div { display: flex; justify-content: space-between; padding: 3px 0; }
.resumen dt, .resumen dd { margin: 0; }
.resumen .total { border-top: 1px solid var(--linea); margin-top: 6px; padding-top: 9px; font: 600 20px 'Fredoka', sans-serif; color: var(--marca); }
.nota-envio { font-size: 13.5px; color: var(--suave); margin: 8px 0 14px; }
.garantia { font-size: 13px; color: var(--suave); text-align: center; margin: 12px 0 0; }
.btn-wa { display: block; text-align: center; margin-top: 14px; font-weight: 700; color: #1f8c4e; }
.vacio { text-align: center; padding: 56px 20px; max-width: 520px; margin: 0 auto; }
.vacio h1 { font-size: 30px; margin-bottom: 10px; }
.vacio p { margin: 0 0 22px; }
.vacio .btn { margin: 4px; }
.girando { width: 40px; height: 40px; margin: 0 auto 18px; border-radius: 50%; border: 4px solid var(--linea); border-top-color: var(--boton); animation: gira .8s linear infinite; }
.check-ok { width: 72px; height: 72px; margin: 0 auto 16px; border-radius: 50%; background: var(--ok) center / 38px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E"); animation: rebota .7s var(--suave-curva); }

.pie { text-align: center; padding: 30px 16px 110px; font-size: 13.5px; color: var(--suave); }
.pie img { margin: 0 auto 10px; height: 36px; width: auto; }
.pie p { margin: 4px 0; }

/* Aviso tipo toast */
.aviso-flotante { position: fixed; left: 50%; top: 76px; z-index: 50; padding: 12px 20px; border-radius: 999px; background: var(--marca); color: #fff; font-weight: 700; font-size: 15px; box-shadow: var(--sombra-alta); transform: translate(-50%, -20px); opacity: 0; pointer-events: none; transition: transform .35s var(--suave-curva), opacity .35s; }
.aviso-flotante.ver { transform: translate(-50%, 0); opacity: 1; }

/* Pie: Instagram */
.ig { display: inline-flex; align-items: center; gap: 8px; margin: 6px 0; padding: 8px 16px; border-radius: 999px; background: var(--blanco); color: var(--marca); font-weight: 700; text-decoration: none; box-shadow: var(--sombra); transition: transform .2s; }
.ig:hover { transform: translateY(-2px); }
.pie a { color: var(--boton); }

/* Autorizaciones y notas de compra */
.autorizaciones { display: grid; gap: 6px; margin: 16px 0 4px; padding: 12px 14px; background: var(--blanco); border-radius: 14px; }
.autorizaciones .check { align-items: flex-start; margin: 0; font-size: 14px; line-height: 1.4; }
.autorizaciones .check input { flex: none; margin-top: 1px; }
.razon-social { font-size: 13.5px; background: var(--azul); border-radius: 12px; padding: 10px 14px; margin: 12px 0; line-height: 1.4; }
.nota-asesor { background: var(--rosa); border-radius: 14px; padding: 14px 16px; font-size: 15px; text-align: left; }

/* Videos del producto en la ficha */
.video-producto { position: relative; flex: 0 0 58%; max-width: 260px; margin: 0; aspect-ratio: 9 / 16; border-radius: 14px; overflow: hidden; background: #d8d2c8; scroll-snap-align: start; cursor: pointer; }
.video-producto video { width: 100%; height: 100%; object-fit: cover; }
.video-producto figcaption { position: absolute; left: 8px; bottom: 8px; padding: 5px 10px; border-radius: 999px; background: rgba(255, 255, 255, .92); color: var(--marca); font-weight: 700; font-size: 13px; }

/* Política de datos */
.legal { max-width: 720px; margin: 0 auto; padding: 24px 16px 40px; }
.legal img { margin-bottom: 18px; }
.legal h1 { font-size: clamp(26px, 6.5vw, 34px); margin-bottom: 6px; }
.legal h2 { font-size: 19px; margin: 22px 0 6px; }
.legal p, .legal li { font-size: 15px; }
.legal .btn { margin-top: 20px; }

@keyframes entra { from { opacity: 0; transform: translateY(12px); } }
@keyframes subir { from { transform: translateY(100%); } }
@keyframes rebota { 0% { transform: scale(.4); } 55% { transform: scale(1.25); } 100% { transform: scale(1); } }
@keyframes pulso { 50% { transform: scale(1.08); color: var(--boton); } }
@keyframes elige { 50% { transform: scale(1.12); } }
@keyframes late { 50% { transform: scale(1.12); } }
@keyframes sacude { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
@keyframes gira { to { transform: rotate(360deg); } }
@keyframes brillo { 0% { left: -60%; } 40%, 100% { left: 130%; } }
@keyframes onda { 0% { transform: scale(1); opacity: .5; } 100% { transform: scale(1.7); opacity: 0; } }
@keyframes aparece-wa { from { transform: scale(0) rotate(-30deg); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .revela { opacity: 1; transform: none; }
}

/* Personaliza: una sola foto que cambia con la base y el motivo */
.foto-unica { margin: 0; aspect-ratio: 1; background: var(--blanco); overflow: hidden; }
@media (min-width: 900px) { .foto-unica { border-radius: var(--radio); } }
.foto-unica img { width: 100%; height: 100%; object-fit: cover; transition: opacity .16s ease, transform .3s var(--suave-curva); }
.foto-unica img.cambiando { opacity: 0; transform: scale(.985); }
.foto-pie { text-align: center; margin: 10px 16px 0; font-size: 14px; font-weight: 700; color: var(--marca); }
.tela[aria-pressed="true"] img { box-shadow: 0 0 0 3px var(--crema), 0 0 0 5px var(--boton); animation: elige .35s var(--suave-curva); }
.tela[aria-pressed="true"] span { font-weight: 700; color: var(--marca); }
.tela em.ag, .tela.sin-foto em.nv { display: none; }
.tela.sin-foto em.ag { display: block; background: var(--suave); }
.tela.sin-foto { opacity: .4; cursor: not-allowed; }
.tela.sin-foto img { filter: grayscale(.6); }
.info-inicio { padding-top: 6px; }
.info-inicio .plegable:first-child { margin-top: 0; }

/* Soporte de pared: producto adicional */
.soporte-card { display: grid; grid-template-columns: 120px 1fr; gap: 14px; align-items: center; }
.soporte-card img { border-radius: 12px; background: var(--blanco); aspect-ratio: 1; object-fit: contain; }
.soporte-card .opcion-titulo { margin-bottom: 4px; }
.soporte-card .ayuda { margin: 0 0 4px; }
.oferta-soporte:empty { display: none; }
.oferta-soporte { display: grid; grid-template-columns: 72px 1fr auto; gap: 12px; align-items: center; margin-top: 14px; padding: 10px; background: var(--azul); border-radius: 14px; animation: entra .35s var(--suave-curva); }
.oferta-soporte img { width: 72px; height: 54px; object-fit: contain; background: var(--blanco); border-radius: 10px; }
.oferta-soporte div { display: flex; flex-direction: column; font-size: 14px; line-height: 1.3; }
.oferta-soporte b { color: var(--marca); }
.oferta-soporte small { color: var(--suave); }
.oferta-soporte .btn { min-height: 40px; padding: 0 16px; font-size: 14px; }