/* ==========================================================================
   ESPUMA TORITO — Componentes
   Botones, etiquetas, tarjetas y elementos de marca.
   ========================================================================== */

/* ---------- Botones ---------- */
.btn {
  --btn-bg: var(--negro);
  --btn-color: var(--blanco);
  --btn-borde: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 50px;
  padding: 0.8em 1.6em;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.005em;
  text-decoration: none;
  color: var(--btn-color);
  background: var(--btn-bg);
  border: 1px solid var(--btn-borde);
  border-radius: var(--radio-full);
  transition:
    background var(--dur-rapida) var(--ease),
    color var(--dur-rapida) var(--ease),
    border-color var(--dur-rapida) var(--ease),
    transform var(--dur-rapida) var(--ease);
  -webkit-tap-highlight-color: transparent;
}

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

.btn:active {
  transform: translateY(0);
}

.btn svg {
  width: 1.15em;
  height: 1.15em;
  flex-shrink: 0;
}

.btn--primario { --btn-bg: var(--rojo); }
.btn--primario:hover { --btn-bg: var(--rojo-oscuro); }

.btn--oscuro:hover { --btn-bg: var(--grafito); }

.btn--claro { --btn-bg: var(--blanco); --btn-color: var(--negro); }

.btn--contorno {
  --btn-bg: transparent;
  --btn-color: var(--negro);
  --btn-borde: rgb(21 16 18 / 0.25);
}
.btn--contorno:hover { --btn-borde: var(--negro); }

.btn--contorno-claro {
  --btn-bg: transparent;
  --btn-color: var(--blanco);
  --btn-borde: rgb(255 255 255 / 0.35);
}
.btn--contorno-claro:hover { --btn-borde: var(--blanco); }

.btn--whatsapp { --btn-bg: var(--color-whatsapp); --btn-color: var(--negro); }
.btn--whatsapp:hover { --btn-bg: #1FBF5B; }

.btn--sm {
  min-height: 40px;
  padding: 0.6em 1.15em;
  font-size: var(--fs-sm);
}

/* Enlace con flecha */
.enlace-flecha {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}

.enlace-flecha::after {
  content: "→";
  transition: transform var(--dur-rapida) var(--ease);
}

.enlace-flecha:hover::after {
  transform: translateX(4px);
}

/* ---------- Etiqueta ---------- */
.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.4em 0.9em;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--grafito);
  background: var(--blanco);
  border: var(--borde);
  border-radius: var(--radio-full);
}

.etiqueta__punto {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--rojo);
}

.etiqueta--oscura {
  color: var(--blanco);
  background: rgb(255 255 255 / 0.08);
  border-color: rgb(255 255 255 / 0.16);
}

/* ---------- Tarjeta ---------- */
.tarjeta {
  position: relative;
  padding: var(--sp-6);
  background: var(--color-superficie);
  border: var(--borde);
  border-radius: var(--radio-lg);
  transition:
    box-shadow var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}

.tarjeta:hover {
  box-shadow: var(--sombra-alta);
  transform: translateY(-3px);
}

.tarjeta h4 {
  margin-bottom: var(--sp-2);
}

.tarjeta p {
  color: var(--color-texto-suave);
  font-size: var(--fs-sm);
}

.tarjeta__icono {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: var(--sp-5);
  border-radius: var(--radio);
  background: var(--icono-bg, var(--amarillo-suave));
  color: var(--icono-color, var(--negro));
}

.tarjeta__icono svg {
  width: 24px;
  height: 24px;
}

/* Línea de color superior (acento por tarjeta) */
.tarjeta--acento {
  overflow: hidden;
}

.tarjeta--acento::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: var(--acento, var(--rojo));
}

.tarjeta--oscura {
  background: var(--grafito);
  border-color: rgb(255 255 255 / 0.08);
  color: var(--blanco);
}

.tarjeta--oscura p {
  color: rgb(255 255 255 / 0.7);
}

/* ---------- Dato numérico ---------- */
.dato__numero {
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 112%;
  font-size: var(--fs-3xl);
  line-height: 1;
  letter-spacing: -0.03em;
}

.dato__texto {
  margin-top: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--color-texto-suave);
}

/* ==========================================================================
   Elementos de marca
   ========================================================================== */

/* Logotipo oficial: el torito forma la "T" de TORITO (assets/brand/logo-torito.svg) */
.logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
}

.logo__img {
  width: auto;
  height: 52px;
}

.logo--grande .logo__img {
  height: clamp(96px, 12vw, 150px);
}

/* Franja con los colores del logo. Usar como separador o detalle. */
.franja {
  height: 4px;
  background: var(--franja-marca);
}

.franja--gruesa { height: 8px; }

/* Textura sutil de franjas verticales (eco del fondo de la lata).
   Usa el color del texto, así funciona sobre fondos claros y oscuros. */
.textura-franjas {
  background-image: repeating-linear-gradient(
    90deg,
    transparent 0 40px,
    color-mix(in srgb, currentColor 3%, transparent) 40px 80px
  );
}

.btn--bloque { width: 100%; }

/* Íconos del sprite (index.html): trazo que hereda el color del texto */
.icono {
  width: 1.25em;
  height: 1.25em;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Panel (contenedor blanco sin efecto hover) ---------- */
.panel {
  background: var(--blanco);
  border: var(--borde);
  border-radius: var(--radio-lg);
}

/* ---------- Lista con check ---------- */
.lista-check {
  --check-bg: var(--rojo);
  display: grid;
  gap: var(--sp-3);
  padding: 0;
  list-style: none;
}

.lista-check li {
  position: relative;
  padding-left: 32px;
}

.lista-check li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.18em;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--check-bg)
    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.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")
    center / 12px no-repeat;
}

/* ---------- Formularios ---------- */
.campo {
  display: grid;
  gap: var(--sp-2);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.campo__label {
  padding: 0;
  font-size: var(--fs-sm);
  font-weight: 700;
}

.campo__label span {
  font-weight: 500;
  color: var(--color-texto-suave);
}

legend.campo__label {
  margin-bottom: var(--sp-2);
}

.campo__ayuda {
  font-size: var(--fs-sm);
  color: var(--color-texto-suave);
}

.campo__error {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--rojo-oscuro);
}

.campos-2 {
  display: grid;
  gap: var(--sp-4);
}

.input {
  width: 100%;
  min-height: 48px;
  padding: 0.7em 0.95em;
  background: var(--blanco);
  border: 1px solid #D9D1C3;
  border-radius: var(--radio);
  transition:
    border-color var(--dur-rapida) var(--ease),
    box-shadow var(--dur-rapida) var(--ease);
}

.input::placeholder {
  color: #A39A92;
}

.input:focus {
  outline: none;
  border-color: var(--turquesa);
  box-shadow: 0 0 0 3px rgb(20 163 199 / 0.18);
}

.input[aria-invalid="true"] {
  border-color: var(--rojo);
}

select.input {
  appearance: none;
  padding-right: 2.6em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23151012' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9em center;
  background-size: 18px;
}

/* Opciones tipo tarjeta (radio / checkbox) */
.opciones {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
}

.opcion {
  position: relative;
  cursor: pointer;
}

.opcion input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.opcion__caja {
  display: grid;
  gap: 2px;
  height: 100%;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid #D9D1C3;
  border-radius: var(--radio);
  line-height: 1.3;
  transition:
    border-color var(--dur-rapida) var(--ease),
    background var(--dur-rapida) var(--ease);
}

.opcion__caja strong {
  font-weight: 700;
}

.opcion__caja small {
  font-size: var(--fs-sm);
  color: var(--color-texto-suave);
}

.opcion:hover .opcion__caja {
  border-color: #B9AFA2;
}

.opcion input:checked + .opcion__caja {
  background: var(--crema);
  border-color: var(--negro);
  box-shadow: inset 0 0 0 1px var(--negro);
}

.opcion input:focus-visible + .opcion__caja {
  outline: 2px solid var(--turquesa);
  outline-offset: 2px;
}

/* Control de cantidad */
.stepper {
  display: inline-flex;
  align-items: stretch;
  width: fit-content;
  background: var(--blanco);
  border: 1px solid #D9D1C3;
  border-radius: var(--radio-full);
  overflow: hidden;
}

.stepper:focus-within {
  border-color: var(--turquesa);
  box-shadow: 0 0 0 3px rgb(20 163 199 / 0.18);
}

.stepper button {
  width: 48px;
  font-size: 1.35rem;
  line-height: 1;
  transition: background var(--dur-rapida);
}

.stepper button:hover {
  background: var(--crema);
}

.stepper input {
  width: 64px;
  min-height: 46px;
  font-size: var(--fs-lg);
  font-weight: 700;
  text-align: center;
  border: 0;
  -moz-appearance: textfield;
  appearance: textfield;
}

.stepper input:focus {
  outline: none;
}

.stepper input::-webkit-inner-spin-button,
.stepper input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Deslizador */
.rango {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}

.rango input[type="range"] {
  flex: 1;
  min-width: 0;
  height: 28px;
  accent-color: var(--rojo);
  cursor: pointer;
}

.rango output {
  min-width: 3.2ch;
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 112%;
  font-size: var(--fs-xl);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* ---------- Acordeón (details/summary nativo) ---------- */
.acordeon {
  display: grid;
  gap: var(--sp-3);
}

.acordeon__item {
  background: var(--blanco);
  border: var(--borde);
  border-radius: var(--radio);
}

.acordeon__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  font-weight: 700;
  line-height: 1.4;
  cursor: pointer;
  list-style: none;
}

.acordeon__item summary::-webkit-details-marker {
  display: none;
}

.acordeon__item summary::after {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  rotate: 45deg;
  translate: 0 -3px;
  transition:
    rotate var(--dur) var(--ease),
    translate var(--dur) var(--ease);
}

.acordeon__item[open] summary::after {
  rotate: 225deg;
  translate: 0 3px;
}

.acordeon__cuerpo {
  padding: 0 var(--sp-5) var(--sp-5);
  color: var(--color-texto-suave);
}

.acordeon__cuerpo p + p {
  margin-top: var(--sp-3);
}

/* ==========================================================================
   Lata 3D: cilindro de caras con la etiqueta real (las crea js/lata3d.js).
   El diámetro sale de la proporción de la etiqueta: circunferencia = alto × aspecto.
   ========================================================================== */
.lata3d {
  --caras: 32;
  --circ: calc(var(--alto) * var(--aspecto));
  --diam: calc(var(--circ) / 3.1416);
  --cara: calc(var(--circ) / var(--caras));
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: var(--diam);
}

.lata3d__tapa {
  width: var(--diam);
  height: auto;
  margin-bottom: -1px;
}

.lata3d__cuerpo {
  position: relative;
  width: var(--diam);
  height: var(--alto);
  background-size: auto 100%;
  background-position: center;
}

.lata3d__cilindro {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  animation: lata-girar 22s linear infinite;
}

.lata3d__cara {
  position: absolute;
  top: 0;
  left: 50%;
  width: calc(var(--cara) + 0.6px);
  height: 100%;
  margin-left: calc(var(--cara) / -2 - 0.3px);
  background-size: var(--circ) 100%;
  background-repeat: repeat-x;
  background-position: calc(var(--i) * var(--cara) * -1 - var(--circ) / 2 + var(--cara) / 2) 0;
  transform: rotateY(calc(var(--i) * 360deg / var(--caras))) translateZ(calc(var(--diam) / 2));
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Luz de estudio: bordes oscuros y un brillo vertical */
.lata3d__cuerpo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgb(0 0 0 / 0.42) 0%,
    rgb(0 0 0 / 0.1) 14%,
    rgb(255 255 255 / 0.3) 30%,
    rgb(255 255 255 / 0.05) 42%,
    rgb(0 0 0 / 0) 60%,
    rgb(0 0 0 / 0.16) 82%,
    rgb(0 0 0 / 0.48) 100%
  );
}

.lata3d__base {
  width: var(--diam);
  height: calc(var(--diam) * 0.12);
  border-radius: 0 0 45% 45% / 0 0 100% 100%;
  background: linear-gradient(90deg, #6F7479, #C9CDD1 28%, #F2F4F5 40%, #B4B9BE 64%, #6A6F74);
}

/* Sombra en el piso */
.lata3d::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 50%;
  z-index: -1;
  width: calc(var(--diam) * 2.4);
  height: 18px;
  translate: -50% 0;
  background: radial-gradient(closest-side, rgb(21 16 18 / 0.28), transparent);
}

@keyframes lata-girar {
  to { transform: rotateY(-360deg); }
}

/* Latas que se pueden girar con el dedo o el mouse (js/lata3d.js) */
.lata3d--interactiva {
  cursor: grab;
  touch-action: pan-y; /* el desplazamiento vertical de la página sigue funcionando */
  -webkit-user-select: none;
  user-select: none;
}

.lata3d--interactiva.arrastrando {
  cursor: grabbing;
}

.lata3d:focus-visible {
  outline: 2px solid var(--turquesa);
  outline-offset: 10px;
  border-radius: var(--radio);
}

/* Puntos invisibles en la boquilla de la tapa: de ahí sale el chorro (js/espuma.js) */
.lata3d__boquilla,
.lata3d__boquilla-atras {
  position: absolute;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.lata3d__boquilla {
  top: calc(var(--diam) * 0.18);
  left: calc(var(--diam) * 0.12);
}

.lata3d__boquilla-atras {
  top: calc(var(--diam) * 0.2);
  left: calc(var(--diam) * 0.45);
}

/* ==========================================================================
   Interactividad (Fase 3)
   ========================================================================== */

/* Capa de espuma y confeti: no bloquea clics */
.capa-espuma {
  position: fixed;
  inset: 0;
  z-index: 150;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Botón flotante de WhatsApp */
.whatsapp-flotante {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 95;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  color: var(--negro);
  background: var(--color-whatsapp);
  border-radius: 50%;
  box-shadow: 0 12px 24px -10px rgb(21 16 18 / 0.5);
  opacity: 0;
  visibility: hidden;
  translate: 0 16px;
  transition:
    opacity var(--dur) var(--ease),
    translate var(--dur) var(--ease),
    visibility var(--dur),
    background var(--dur-rapida);
}

.whatsapp-flotante.visible {
  opacity: 1;
  visibility: visible;
  translate: 0 0;
}

.whatsapp-flotante:hover {
  background: #1FBF5B;
}

.whatsapp-flotante .icono {
  width: 28px;
  height: 28px;
}

/* Visor de la galería (<dialog>) */
html.visor-abierto {
  overflow: hidden;
}

.visor {
  width: 100%;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  color: var(--blanco);
  background: rgb(12 10 11 / 0.94);
  border: 0;
}

.visor[open] {
  display: grid;
  place-items: center;
  animation: visor-entrar var(--dur) var(--ease);
}

.visor::backdrop {
  background: rgb(12 10 11 / 0.6);
}

.visor__figura {
  display: grid;
  justify-items: center;
  gap: var(--sp-3);
  margin: 0;
  padding: var(--sp-8) var(--sp-4);
  touch-action: pan-y;
}

.visor__figura img,
.visor__figura video {
  width: auto;
  height: auto;
  max-width: min(92vw, 1100px);
  max-height: 78dvh;
  object-fit: contain;
  background: #000;
  border-radius: var(--radio);
}

.visor__figura figcaption {
  font-size: var(--fs-sm);
  color: rgb(255 255 255 / 0.8);
  text-align: center;
}

.visor__boton {
  position: absolute;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  font-size: 1.3rem;
  color: var(--blanco);
  background: rgb(255 255 255 / 0.1);
  border: 1px solid rgb(255 255 255 / 0.2);
  border-radius: 50%;
  transition: background var(--dur-rapida);
}

.visor__boton:hover {
  background: rgb(255 255 255 / 0.2);
}

.visor__cerrar {
  top: max(16px, env(safe-area-inset-top));
  right: 16px;
}

.visor__nav {
  top: 50%;
  translate: 0 -50%;
}

.visor__nav--anterior { left: 16px; }
.visor__nav--siguiente { right: 16px; }

.visor__contador {
  position: absolute;
  bottom: max(16px, env(safe-area-inset-bottom));
  left: 50%;
  translate: -50% 0;
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  color: rgb(255 255 255 / 0.7);
}

/* En celular las flechas bajan para no tapar la foto */
@media (max-width: 639px) {
  .visor__nav {
    top: auto;
    bottom: max(10px, env(safe-area-inset-bottom));
    translate: none;
  }
}

/* ==========================================================================
   Legal: aviso de cookies y autorizaciones
   ========================================================================== */

/* Aviso de cookies (js/consentimiento.js). Aceptar y Rechazar con el mismo peso. */
.aviso-cookies {
  position: fixed;
  right: 12px;
  bottom: max(12px, env(safe-area-inset-bottom));
  left: 12px;
  z-index: 120;
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  font-size: var(--fs-sm);
  line-height: 1.5;
  background: var(--blanco);
  border: var(--borde);
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra-alta);
}

.aviso-cookies a {
  font-weight: 700;
}

.aviso-cookies__botones {
  display: flex;
  gap: var(--sp-2);
}

.aviso-cookies__botones .btn {
  flex: 1;
}

/* Mientras el aviso está abierto, el botón flotante de WhatsApp no lo tapa */
html.con-aviso-cookies .whatsapp-flotante {
  visibility: hidden;
}

@media (min-width: 640px) {
  .aviso-cookies {
    right: auto;
    bottom: 24px;
    left: 24px;
    max-width: 440px;
  }
}

/* Casillas de autorización en los formularios */
.autorizaciones {
  display: grid;
  gap: var(--sp-3);
}

.consentimiento {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--color-texto-suave);
  cursor: pointer;
}

.consentimiento input {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  accent-color: var(--rojo);
  cursor: pointer;
}

.consentimiento input[aria-invalid="true"] {
  outline: 2px solid var(--rojo);
  outline-offset: 2px;
}

.consentimiento a {
  font-weight: 700;
  color: var(--color-texto);
}

/* Botón que se ve como enlace (p. ej. "Configurar cookies" dentro de un texto) */
.enlace-boton {
  padding: 0;
  font: inherit;
  font-weight: 600;
  color: var(--rojo-oscuro);
  text-decoration: underline;
  text-underline-offset: 3px;
  background: none;
  border: 0;
  cursor: pointer;
}