/* LlaviYo — diseño limpio: fondo blanco, superficies gris claro, botones azules tipo píldora.
   Siempre en tema claro, también si el celular está en modo oscuro. */

:root {
  --fondo: #ffffff;
  --fondo-suave: #f3f6fa;
  --superficie: #ffffff;
  --texto: #0b1b33;
  --suave: #566680;
  --borde: #d5deea;
  --borde-suave: #e6ecf4;
  /* Marca: azul noche, azul eléctrico y cian. --azul es un poco más profundo que el eléctrico para que el texto blanco
     encima de él se lea bien (contraste 4,5:1); el eléctrico y el cian van en brillos, íconos y fondos oscuros. */
  --noche: #07152d;
  --electrico: #087bff;
  --cian: #00d5f2;
  --azul: #0a6fe8;
  --azul-hover: #0a72ee;
  --enlace: #0667d9;
  --azul-suave: #e7f1ff;
  /* Degradado de los botones */
  --degradado-boton: linear-gradient(180deg, #0a72ee 0%, #0659cf 100%);
  --ok: #1b7f3b;
  --ok-fondo: #e9f7ee;
  --error: #c4291c;
  --error-fondo: #fdecea;
  --aviso: #8a5a00;
  --aviso-fondo: #fff5dc;
  --radio: 18px;
  --radio-grande: 28px;
  --tono-redes: #0071e3;
  --tono-encontrar: #30b05c;
  --tono-pagos: #f59e0b;
  --tono-musica: #fa2d48;
  --tono-profesional: #a259ff;
  --tono-objetos: #14a38b;
  --tono-deporte: #ef6c1a;
  --tono-viaje: #0a84ff;
  --tono-mascota: #c2410c;
  --tono-fe: #b8862b;
  --tono-llamar: #5e5ce6;
  --tono-restaurante: #f2a541;
  --rojo: #ff3b30;
  --dorado: #e3b85c;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font: 17px/1.47 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;
  letter-spacing: -0.022em;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { line-height: 1.1; margin: 0 0 .5rem; font-weight: 600; letter-spacing: -0.02em; }
h1 { font-size: clamp(2rem, 5vw, 3rem); }
h2 { font-size: 1.3rem; }
h2 .icono { width: 1.1em; height: 1.1em; vertical-align: -0.15em; color: var(--suave); }
p { margin: 0 0 1rem; }
a { color: var(--enlace); text-decoration: none; }
a:hover { text-decoration: underline; }
code { font-size: .88em; background: var(--fondo-suave); padding: .1em .4em; border-radius: 6px; }

.contenedor { width: 100%; max-width: 1024px; margin: 0 auto; padding: 0 20px; }
.contenido { padding-top: 32px; padding-bottom: 64px; min-height: 70vh; }
.suave { color: var(--suave); }
.centro { text-align: center; }
.izquierda { text-align: left; }
.codigo { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: .02em; }
.icono { width: 1.25em; height: 1.25em; flex-shrink: 0; vertical-align: middle; }

/* Barra superior translúcida */
.barra {
  position: sticky; top: 0; z-index: 20;
  background: rgb(7 21 45 / 94%);
  backdrop-filter: saturate(160%) blur(16px); -webkit-backdrop-filter: saturate(160%) blur(16px);
  border-bottom: 1px solid rgb(255 255 255 / 8%);
}
.barra-interior { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; }
.marca { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 1.12rem; color: #fff; white-space: nowrap; }
.marca:hover { text-decoration: none; }
.menu { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; justify-content: flex-end; font-size: .88rem; }
.menu a:not(.boton) { color: #fff; opacity: .88; }
.menu a:not(.boton):hover { opacity: 1; text-decoration: none; }
.menu form { margin: 0; }

/* Botones */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 22px;
  border: 0; border-radius: 980px;
  background: var(--degradado-boton); color: #fff;
  font: inherit; font-weight: 400; text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background .2s, filter .2s, transform .1s;
}
.boton:hover { filter: brightness(1.12); text-decoration: none; }
.boton:active { transform: scale(.98); }
.boton-contorno { background: transparent; color: var(--enlace); box-shadow: inset 0 0 0 1px var(--enlace); }
.boton-contorno:hover { background: var(--azul-suave); filter: none; }
.boton-pequeno { min-height: 34px; padding: 0 16px; font-size: .88rem; }
.boton-grande { min-height: 52px; padding: 0 30px; }
.boton-ancho { width: 100%; }
.boton-icono { padding: 0; width: 44px; }
.boton-whatsapp { background: #25d366; color: #fff; }
.boton-whatsapp:hover { background: #1fbe5a; }
.enlace { background: none; border: 0; padding: 0; font: inherit; color: var(--texto); opacity: .85; cursor: pointer; }
.enlace:hover { opacity: 1; }
.acciones { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.acciones-centro { justify-content: center; }
.boton-icono-mini { display: inline-grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 50%; background: transparent; color: var(--suave); cursor: pointer; }
.boton-icono-mini:hover { background: var(--fondo-suave); color: var(--texto); }
.boton-icono-mini .icono { width: 18px; height: 18px; }

/* Tarjetas y bloques */
.tarjeta { background: var(--fondo-suave); border-radius: var(--radio); padding: 24px; margin-bottom: 16px; }
.caja-estrecha { max-width: 460px; margin: 0 auto; }
.caja-media { max-width: 640px; margin: 0 auto; }
.rejilla { display: grid; gap: 16px; align-items: start; }
.rejilla > .tarjeta { margin-bottom: 0; }
.rejilla + .tarjeta, .rejilla + section { margin-top: 16px; }
@media (min-width: 820px) { .rejilla { grid-template-columns: 1.4fr 1fr; } }
.tarjeta h2:not(:first-child) { margin-top: 28px; }
.encabezado-seccion { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.etiqueta { display: inline-block; color: var(--suave); font-weight: 600; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 10px; }
.vacio { text-align: center; padding: 24px 8px; }
.sello-activar { margin: 8px auto 20px; }
.sello-activar img { border-radius: 18px; }

/* Portada */
.portada { text-align: center; padding: 56px 0 40px; max-width: 820px; margin: 0 auto; }
.portada h1 { font-size: clamp(2.6rem, 8vw, 4.8rem); font-weight: 700; letter-spacing: -0.035em; margin-bottom: 16px; }
.entrada { font-size: clamp(1.1rem, 2.4vw, 1.4rem); color: var(--suave); max-width: 640px; line-height: 1.4; }
.portada .entrada { margin: 0 auto 8px; }
/* Arriba del título: debajo de «QR» y de «NFC», un QR y un chip redondo pequeños, del mismo tamaño */
.portada .acciones { justify-content: center; margin-top: 24px; }
.seccion-titulo { text-align: center; margin: 56px 0 24px; }
.seccion-titulo h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
.pasos { display: grid; gap: 16px; margin: 20px 0; }
@media (min-width: 760px) { .pasos { grid-template-columns: repeat(3, 1fr); } }
.pasos .tarjeta { margin: 0; }
.pasos p { color: var(--suave); margin: 0; }
.numero { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--azul); color: #fff; font-weight: 600; margin-bottom: 14px; }
.activar-rapido { margin-top: 24px; text-align: center; }
.activar-rapido .fila-formulario { max-width: 460px; margin: 0 auto; }

/* Formularios */
.formulario { display: grid; gap: 16px; }
.formulario label { display: grid; gap: 6px; font-weight: 500; font-size: .94rem; }
.formulario small { font-weight: 400; }
.formulario .tarjeta { display: grid; gap: 16px; margin: 0; }
.formulario .tarjeta > h2, .formulario .tarjeta > p { margin: 0; }
.formulario .tarjeta h2:not(:first-child) { margin-top: 8px; }
fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 10px; min-width: 0; }
legend { font-weight: 600; margin-bottom: 8px; padding: 0; }
input:not([type=radio]):not([type=checkbox]):not([type=file]), select, textarea {
  width: 100%; min-height: 48px; padding: 0 14px;
  border: 1px solid var(--borde); border-radius: 12px;
  background: var(--superficie); color: var(--texto);
  font: inherit; font-size: 1rem; font-weight: 400; letter-spacing: normal;
  transition: border-color .15s, box-shadow .15s;
}
textarea { padding: 12px 14px; min-height: 80px; resize: vertical; line-height: 1.4; }
select { appearance: none; padding-right: 36px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236e6e73' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 4px rgb(0 113 227 / 22%); }
.boton:focus-visible, .opcion-tipo input:focus-visible + span, .perfil input:focus-visible + span, .funcion:focus-visible { outline: 3px solid rgb(0 113 227 / 50%); outline-offset: 2px; }
.fila-formulario { display: flex; gap: 10px; flex-wrap: wrap; }
.fila-formulario input { flex: 1 1 220px; }
.dos-columnas { display: grid; gap: 12px; }
@media (min-width: 600px) { .dos-columnas { grid-template-columns: 1fr 1fr; } }
.casilla { display: flex !important; gap: 10px; align-items: center; font-weight: 400 !important; }
.casilla input { width: 18px; height: 18px; accent-color: var(--azul); }
.formulario-funcion { max-width: 720px; }

.opciones-tipo { display: flex; flex-wrap: wrap; gap: 8px; }
.opciones-anchas .opcion-tipo { flex: 1 1 140px; }
.opcion-tipo { position: relative; font-weight: 400 !important; }
.opcion-tipo input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.opcion-tipo span { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; border-radius: 12px; background: var(--superficie); box-shadow: inset 0 0 0 1px var(--borde); text-align: center; }
.opcion-tipo input:checked + span { box-shadow: inset 0 0 0 2px var(--azul); color: var(--enlace); font-weight: 500; }
.opcion-tipo input:disabled + span { opacity: .4; }
.opcion-tipo small { margin-left: 4px; color: var(--suave); }

/* Avisos */
.alerta { padding: 14px 16px; border-radius: 14px; margin-bottom: 16px; }
.alerta-ok { background: var(--ok-fondo); color: var(--ok); }
.alerta-error { background: var(--error-fondo); color: var(--error); }
.alerta-aviso { background: var(--aviso-fondo); color: var(--aviso); }
.requisitos { list-style: none; padding: 0; margin: 0 0 20px; display: grid; gap: 4px; }
.requisitos .ok { color: var(--ok); }
.requisitos .falla { color: var(--error); font-weight: 600; }

.insignia { display: inline-flex; align-items: center; gap: 4px; font-size: .72rem; font-weight: 600; letter-spacing: 0; padding: 3px 10px; border-radius: 999px; background: var(--azul-suave); color: var(--enlace); vertical-align: middle; }
.insignia .icono { width: 12px; height: 12px; }
.insignia-pausa { background: var(--error-fondo); color: var(--error); }
.insignia-activa { background: var(--ok-fondo); color: var(--ok); }
.insignia-premium { background: linear-gradient(90deg, #f6e3b4, #e3b85c); color: #4a3510; }

/* ------------------------------------------------------------ Ilustraciones animadas */
.funcion-redes { --tono: var(--tono-redes); }
.funcion-encontrar { --tono: var(--tono-encontrar); }
.funcion-pagos { --tono: var(--tono-pagos); }
.funcion-musica { --tono: var(--tono-musica); }
.funcion-profesional { --tono: var(--tono-profesional); }
.funcion-fe { --tono: var(--tono-fe); }
.funcion-llamar { --tono: var(--tono-llamar); }
.funcion-restaurante { --tono: var(--tono-restaurante); }
.funcion-objetos { --tono: var(--tono-objetos); }
.funcion-deporte { --tono: var(--tono-deporte); }
.funcion-viaje { --tono: var(--tono-viaje); }
.funcion-mascota { --tono: var(--tono-mascota); }
.funcion-ninguna { --tono: var(--suave); }
.tipo-cuidado { --tono: #ff375f; }   /* «Cuida a quien amas», en la portada: el rojo de los corazones */
.tipo-mascotas { --tono: #0a7d70; }   /* el verde de LlaviPet */

.ilustracion { display: block; width: 100%; height: auto; overflow: visible; }
.ilustracion * { transform-box: fill-box; transform-origin: center; }
.ilus-trazo { fill: none; stroke: var(--tono); stroke-width: 3; opacity: .3; }
.ilus-relleno { fill: var(--tono); }
.ilus-suave { fill: var(--tono); opacity: .16; }
.ilus-suave-fuerte { fill: var(--tono); }
.ilus-blanco { fill: #fff; }
.ilus-fondo { fill: var(--fondo-suave); }
.ilus-trazo-fino { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ilus-trazo-tono { stroke: var(--tono); }
.ilus-flota { fill: var(--tono); opacity: .7; animation: ilus-flota 3.2s ease-in-out infinite; animation-delay: var(--d, 0s); }
.ilus-sube { animation: ilus-sube 3.6s ease-in-out infinite; animation-delay: var(--d, 0s); }
.ilus-rebota { animation: ilus-rebota 2s ease-in-out infinite; }
.ilus-onda { fill: none; stroke: var(--tono); stroke-width: 2; animation: ilus-onda 2.4s ease-out infinite; animation-delay: var(--d, 0s); }
.ilus-brillo { animation: ilus-brillo 3.2s ease-in-out infinite; }
.ilus-moneda { animation: ilus-moneda 3.2s ease-in-out infinite; }
.ilus-dibuja { fill: none; stroke: var(--tono); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 70; stroke-dashoffset: 70; opacity: .55; animation: ilus-dibuja 3.6s ease-in-out infinite; animation-delay: var(--d, 0s); }
.ilus-destello { fill: var(--dorado); animation: ilus-destello 2.4s ease-in-out infinite; animation-delay: var(--d, 0s); }
.ilus-halo { fill: var(--tono); opacity: .14; animation: ilus-halo 3s ease-in-out infinite; }
.ilus-cuenta { fill: var(--tono); opacity: .3; animation: ilus-cuenta 3.6s ease-in-out infinite; animation-delay: var(--d, 0s); }

@keyframes ilus-sube { 0% { opacity: 0; transform: translateY(8px); } 14%, 82% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes ilus-flota { 0% { opacity: 0; transform: translateY(10px) scale(.8); } 30%, 60% { opacity: .75; } 100% { opacity: 0; transform: translateY(-14px) scale(1); } }
@keyframes ilus-rebota { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes ilus-onda { 0% { transform: scale(.35); opacity: .7; } 100% { transform: scale(1.5); opacity: 0; } }
@keyframes ilus-brillo { 0% { transform: translateX(0); } 60%, 100% { transform: translateX(150px); } }
@keyframes ilus-moneda { 0%, 40% { transform: scale(0); } 55% { transform: scale(1.12); } 65%, 90% { transform: scale(1); } 100% { transform: scale(0); } }
@keyframes ilus-dibuja { 0% { stroke-dashoffset: 70; } 35%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes ilus-destello { 0%, 100% { transform: scale(.55) rotate(0deg); opacity: .5; } 50% { transform: scale(1.1) rotate(45deg); opacity: 1; } }
.ilus-alerta { fill: var(--rojo); animation: ilus-latido 1.6s ease-in-out infinite; }
.ilus-timbre { transform-origin: 50% 50%; animation: ilus-timbre 1.6s ease-in-out infinite; }
.ilus-arco { fill: none; stroke: var(--tono); stroke-width: 2.5; stroke-linecap: round; animation: ilus-parpadea 1.6s ease-in-out infinite; animation-delay: var(--d, 0s); }
.ilus-trazo-grueso { fill: none; stroke: var(--tono); stroke-width: 6; stroke-linecap: round; }
.ilus-latido { fill: var(--rojo); animation: ilus-latido 1.4s ease-in-out infinite; }
.ilus-globo { transform-origin: 30% 100%; animation: ilus-globo 3.2s ease-in-out infinite; }
.ilus-cuerda { fill: none; stroke: var(--tono); stroke-width: 1.5; opacity: .6; }
.ilus-huella { opacity: .18; animation: ilus-huella 3.2s ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes ilus-latido { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.14); } 30% { transform: scale(1); } 45% { transform: scale(1.08); } }
@keyframes ilus-timbre { 0%, 40%, 100% { transform: rotate(0); } 5%, 15%, 25% { transform: rotate(-14deg); } 10%, 20%, 30% { transform: rotate(14deg); } }
@keyframes ilus-parpadea { 0%, 100% { opacity: .15; } 20%, 40% { opacity: 1; } }
@keyframes ilus-globo { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-6px) rotate(4deg); } }
@keyframes ilus-huella { 0% { opacity: .18; } 10%, 70% { opacity: 1; } 85%, 100% { opacity: .18; } }
.ilus-audifono { fill: none; stroke: var(--tono); stroke-width: 6; stroke-linecap: round; }
.ilus-almohadilla { fill: var(--tono); animation: ilus-pulso 1.2s ease-in-out infinite; animation-delay: var(--d, 0s); }
.ilus-barra-centro { fill: var(--tono); opacity: .85; animation: ilus-barra-centro .9s ease-in-out infinite alternate; animation-delay: var(--d, 0s); }
@keyframes ilus-barra-centro { from { transform: scaleY(.22); } to { transform: scaleY(1); } }
@keyframes ilus-pulso { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
.ilus-vapor { fill: none; stroke: var(--borde); stroke-width: 3; stroke-linecap: round; animation: ilus-vapor 2.4s ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes ilus-vapor { 0% { opacity: 0; transform: translateY(8px); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateY(-10px); } }
@keyframes ilus-halo { 0%, 100% { transform: scale(.9); opacity: .12; } 50% { transform: scale(1.06); opacity: .26; } }
@keyframes ilus-cuenta { 0%, 40%, 100% { opacity: .3; transform: scale(1); } 8%, 22% { opacity: 1; transform: scale(1.3); } }
@media (prefers-reduced-motion: reduce) {
  .ilustracion * { animation: none !important; }
  .ilus-huella { opacity: 1; }
  .ilus-cuenta { opacity: .8; }
  .ilus-dibuja { stroke-dashoffset: 0; }
  .ilus-moneda { transform: none; }
}

/* ------------------------------------------------------------ Bienvenida: las 5 funciones */
.bienvenida { text-align: center; max-width: 760px; margin: 8px auto 36px; }
.bienvenida .entrada { margin: 0 auto; }
.plan-activar { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 8px; margin: 4px 0 14px; color: var(--suave); }   /* el pack del llavero, al activarlo */
.funciones { display: grid; gap: 20px; margin-bottom: 32px; }
@media (min-width: 760px) {
  .funciones { grid-template-columns: 1fr 1fr; }
}
.funcion {
  display: grid; gap: 8px; position: relative;
  padding: 32px 28px 28px; border-radius: var(--radio-grande);
  background: var(--fondo-suave); color: var(--texto);
  transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s;
}
.funcion:hover { text-decoration: none; transform: translateY(-3px); box-shadow: 0 18px 40px rgb(0 0 0 / 10%); }
.funcion-ilustracion { max-width: 240px; width: 70%; margin: 0 auto 8px; }
.funcion-texto { text-align: center; }
.funcion h2 { font-size: 1.6rem; display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.funcion p { color: var(--suave); max-width: 400px; margin: 0 auto 14px; }
.funcion-accion { display: inline-flex; align-items: center; gap: 6px; color: var(--enlace); }
.funcion-accion .icono { width: 16px; height: 16px; transition: transform .2s; }
.funcion:hover .funcion-accion .icono { transform: translateX(3px); }
/* Negocios en la bienvenida: Pagos va adentro, separado por una línea y con su propio enlace */
.funcion .funcion-tambien { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--borde); }
/* Fe católica: recuadro color marfil cálido */
.funcion.funcion-fe, .funcion-actual.funcion-fe { background: #f8f2e4; --fondo: #fffaf0; }


.cabecera-funcion { display: grid; gap: 16px; align-items: center; margin-bottom: 24px; }
.cabecera-funcion-ilustracion { width: 150px; padding: 12px; border-radius: 24px; background: var(--fondo-suave); }
@media (min-width: 600px) { .cabecera-funcion { grid-template-columns: auto 1fr; gap: 28px; } }
.cabecera-funcion h1 { margin-bottom: 6px; }
.cabecera-funcion p:last-child { margin: 0; max-width: 520px; }
.titulo-con-insignia { margin-top: 12px !important; }

/* Panel de un llavero */
.funcion-actual-cabecera { display: flex; gap: 20px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
.funcion-actual-ilustracion { width: 120px; padding: 10px; border-radius: 20px; background: var(--fondo); flex-shrink: 0; }
.lista-llaveros { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 12px; }
.tarjeta-llavero { display: flex; justify-content: space-between; align-items: center; gap: 16px; color: inherit; margin: 0; transition: transform .2s, box-shadow .2s; }
.tarjeta-llavero:hover { text-decoration: none; transform: translateY(-2px); box-shadow: 0 10px 28px rgb(0 0 0 / 8%); }
.tarjeta-llavero-ilustracion { width: 64px; height: 64px; padding: 6px; border-radius: 16px; background: var(--fondo); flex-shrink: 0; display: grid; place-items: center; color: var(--suave); }
.tarjeta-llavero-principal { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; flex: 1; }
.destino { flex-basis: 100%; color: var(--suave); font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contador { display: grid; justify-items: end; line-height: 1.1; flex-shrink: 0; }
.contador-numero { font-size: 1.8rem; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.contador-grande .contador-numero { font-size: 2.8rem; }
.copiar { display: flex; gap: 8px; margin-bottom: 12px; }
.copiar input { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .85rem !important; }
.estadisticas { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 16px; }
@media (min-width: 760px) { .estadisticas { grid-template-columns: repeat(4, 1fr); } }
.estadisticas .tarjeta { display: grid; margin: 0; }
.lista-codigos { padding-left: 18px; word-break: break-all; }

/* Formulario de redes: filas ordenables */
.lista-redes, .lista-medios { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.fila-red { display: grid; grid-template-columns: minmax(130px, 170px) 1fr auto; gap: 8px; align-items: center; padding: 10px; border-radius: 14px; background: var(--superficie); transition: opacity .2s; }
.lista-medios .fila-red { grid-template-columns: minmax(130px, 170px) 1fr; }
.fila-red-estado { grid-column: 1 / -1; font-size: .78rem; font-weight: 600; color: var(--suave); padding-left: 4px; }
.fila-red-estado:empty { display: none; }
.fila-red[data-estado="publicada"] .fila-red-estado { color: var(--enlace); }
.fila-red[data-estado="guardada"] { opacity: .72; }
.fila-red-acciones { display: flex; }
@media (max-width: 560px) {
  .fila-red { grid-template-columns: 1fr auto; }
  .fila-red select { grid-column: 1 / -1; }
  .lista-medios .fila-red { grid-template-columns: 1fr; }
}

/* Formulario Encuéntrame */
.perfiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 10px; }   /* cuatro perfiles: dos por fila en el celular */
.perfil { position: relative; }
.perfil input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.perfil > span { display: grid; justify-items: center; gap: 8px; padding: 18px 8px; border-radius: 16px; background: var(--superficie); box-shadow: inset 0 0 0 1px var(--borde); text-align: center; font-size: .9rem; }
.perfil .icono { width: 34px; height: 34px; color: var(--suave); }
.perfil input:checked + span { box-shadow: inset 0 0 0 2px var(--azul); color: var(--enlace); }
.perfil input:checked + span .icono { color: var(--azul); }
.campo-foto { display: flex; gap: 16px; align-items: center; }
.campo-foto > div:last-child { display: grid; gap: 8px; justify-items: start; }
.campo-foto p { margin: 0; font-size: .85rem; }
.campo-foto-vista { width: 88px; height: 88px; border-radius: 50%; overflow: hidden; background: var(--superficie); display: grid; place-items: center; color: var(--suave); flex-shrink: 0; }
.campo-foto-vista img { width: 100%; height: 100%; object-fit: cover; }
.campo-foto-vista .icono { width: 36px; height: 36px; }
.contactos-formulario { display: grid; gap: 12px; }
.contacto-formulario { padding: 12px; border-radius: 14px; background: var(--superficie); gap: 8px; }
.contacto-formulario legend { float: left; width: 100%; margin-bottom: 4px; font-size: .9rem; }
iframe.cancion { width: 100%; border: 0; border-radius: 12px; display: block; background: var(--fondo-suave); }

/* Fotos de la página de presentación en el formulario */
.fotos-landing { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.foto-landing { margin: 0; display: grid; gap: 4px; padding: 8px; border-radius: 14px; background: var(--superficie); font-size: .85rem; }
.foto-landing img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; }
.foto-landing .casilla { gap: 6px; font-size: .85rem; }

/* Formulario Fe católica: tres botones que se encienden o apagan */
.botones-fe { display: grid; gap: 10px; }
.opcion-fe { position: relative; font-weight: 400 !important; }
.opcion-fe input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.opcion-fe > span { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 16px; background: var(--superficie); box-shadow: inset 0 0 0 1px var(--borde); transition: box-shadow .15s; }
.opcion-fe-icono { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #f8f2e4; color: var(--tono-fe); flex-shrink: 0; }
.opcion-fe-texto { display: grid; flex: 1; line-height: 1.3; }
.opcion-fe-texto small { color: var(--suave); }
.opcion-fe-marca { width: 24px; height: 24px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--borde); flex-shrink: 0; }
.opcion-fe input:checked + span { box-shadow: inset 0 0 0 2px var(--azul); }
.opcion-fe input:checked + span .opcion-fe-marca { background: var(--azul) 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='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 14px no-repeat; box-shadow: none; }
.opcion-fe input:focus-visible + span { outline: 3px solid rgb(0 113 227 / 50%); outline-offset: 2px; }

/* Temas de la página de presentación */
.temas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }

/* Tablas */
.tabla-desplazable { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--borde-suave); white-space: nowrap; }
th { color: var(--suave); font-weight: 500; }
td form { margin: 0; }

/* Códigos QR: siempre oscuro sobre blanco para que la cámara los lea */
.qr { background: #fff; padding: 12px; border-radius: 14px; width: 100%; max-width: 220px; margin: 4px 0 12px; }
.qr svg { display: block; width: 100%; height: auto; }
.hoja-qr { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; margin-bottom: 16px; }
.tarjeta-qr { margin: 0; padding: 14px; text-align: center; }
.tarjeta-qr .qr { margin: 0 auto 8px; max-width: 170px; }
.tarjeta-qr figcaption { display: grid; gap: 2px; font-size: .9rem; }

.pie { color: var(--suave); font-size: .8rem; padding-top: 20px; padding-bottom: 32px; border-top: 1px solid var(--borde-suave); }

/* ------------------------------------------------------------ Páginas públicas (al escanear) */
body.publica { background: var(--fondo); }
.publica-contenido { max-width: 460px; margin: 0 auto; padding: 48px 20px 32px; min-height: 85vh; }
.publica-cabecera { text-align: center; margin-bottom: 28px; }
.publica-cabecera h1 { font-size: clamp(1.9rem, 7vw, 2.4rem); font-weight: 700; margin-bottom: 6px; }
.publica-cabecera .entrada { margin: 10px auto 0; font-size: 1.05rem; }
.avatar { width: 96px; height: 96px; margin: 0 auto 18px; border-radius: 50%; display: grid; place-items: center; background: var(--tono, var(--azul)); color: #fff; font-size: 2.4rem; font-weight: 600; }
.avatar-icono .icono { width: 44px; height: 44px; }
.avatar-spotify { background: #1ed760; }
.foto-perfil { width: 140px; height: 140px; border-radius: 50%; object-fit: cover; display: block; margin: 0 auto 18px; box-shadow: 0 10px 30px rgb(0 0 0 / 12%); }
.botones-publicos { display: grid; gap: 12px; }
/* Perfil de varias funciones (Basic y VIP): un botón grande y de color por función, y «Volver» para regresar al menú */
.perfil-botones { display: grid; gap: 14px; }
.perfil-boton { display: flex; align-items: center; gap: 16px; min-height: 84px; padding: 14px 20px 14px 16px; border-radius: 22px; background: var(--tono); color: #fff; box-shadow: 0 10px 24px rgb(0 0 0 / 12%); transition: transform .15s; }
.perfil-boton:hover { text-decoration: none; transform: translateY(-2px); }
.perfil-boton-icono { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 16px; background: rgb(255 255 255 / 22%); }
.perfil-boton-icono .icono { width: 28px; height: 28px; }
.perfil-boton-texto { display: grid; gap: 2px; flex: 1; min-width: 0; }
.perfil-boton-texto strong { font-size: 1.25rem; }
.perfil-boton-texto small { opacity: .88; }
.perfil-boton-flecha { flex: none; width: 20px; height: 20px; opacity: .85; }
.volver-perfil { position: fixed; z-index: 20; top: 12px; left: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; background: rgb(255 255 255 / 92%); color: #1d1d1f; font-weight: 600; box-shadow: 0 4px 14px rgb(0 0 0 / 18%); }
.volver-perfil .icono { width: 16px; height: 16px; }
/* El perfil en el panel del dueño: cada función con su orden, y subir, bajar o quitar */
.lista-perfil { list-style: none; padding: 0; margin: 14px 0; display: grid; gap: 10px; counter-reset: perfil; }
.lista-perfil li { counter-increment: perfil; display: grid; grid-template-columns: auto 56px 1fr; align-items: center; gap: 8px 12px; padding: 12px; border-radius: 16px; background: var(--fondo-suave); }
.lista-perfil li::before { content: counter(perfil); font-weight: 700; color: var(--suave); width: 1.2em; text-align: center; }
.lista-perfil-ilustracion { display: block; width: 56px; }
.lista-perfil-texto { display: grid; gap: 4px; min-width: 0; }
.lista-perfil-texto .insignia { justify-self: start; }
.lista-perfil-acciones { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
.lista-perfil-acciones form { margin: 0; }
.aviso-vista-previa ~ .volver-perfil { top: 56px; }
.boton-publico { display: flex; align-items: center; gap: 14px; min-height: 68px; padding: 10px 18px 10px 12px; border-radius: 18px; background: var(--fondo-suave); color: var(--texto); transition: transform .15s, background .2s; }
.boton-publico:hover { text-decoration: none; transform: scale(1.01); }
.boton-publico:active { transform: scale(.99); }
.boton-publico-icono { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--superficie); color: var(--texto); flex-shrink: 0; }
.boton-publico-icono .icono { width: 24px; height: 24px; }
.boton-publico-texto { display: grid; flex: 1; min-width: 0; line-height: 1.25; }
.boton-publico-texto small { color: var(--suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.boton-publico-flecha { color: var(--suave); width: 18px; height: 18px; }

.pestanas { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; margin-bottom: 16px; } /* 1 a 3 pestañas, según lo que se muestre */
.pestana { display: grid; justify-items: center; gap: 6px; padding: 16px 6px; border: 0; border-radius: 18px; background: var(--fondo-suave); color: var(--texto); font: inherit; font-size: .88rem; cursor: pointer; transition: background .2s, color .2s, box-shadow .2s; }
.pestana .icono { width: 26px; height: 26px; color: var(--tono); }
.pestana[aria-selected="true"] { background: var(--azul); color: #fff; }
.pestana[aria-selected="true"] .icono { color: #fff; }
.panel-publico { background: var(--fondo-suave); border-radius: 18px; padding: 20px; margin-bottom: 12px; }
.panel-publico[hidden] { display: none; }
.panel-publico h2 { font-size: 1.1rem; }
.datos-publicos { margin: 0; display: grid; gap: 12px; }
.datos-publicos div { display: grid; gap: 2px; }
.datos-publicos dt { font-size: .8rem; color: var(--suave); }
.datos-publicos dd { margin: 0; }
.casilla-ubicacion { font-size: .9rem; margin-bottom: 12px; }
.lista-contactos { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.contacto { display: flex; align-items: center; gap: 8px; padding: 10px 10px 10px 14px; border-radius: 14px; background: var(--superficie); }
.contacto-nombre { display: grid; flex: 1; min-width: 0; line-height: 1.25; }
.contacto-nombre small { color: var(--suave); }
.contacto .boton { min-height: 40px; padding: 0 16px; }
.contacto .boton-icono { width: 40px; padding: 0; }

.medios-pago { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.medio-pago { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 18px; background: var(--fondo-suave); }
.medio-pago-icono { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--superficie); color: var(--tono); flex-shrink: 0; }
.medio-pago-logo { width: 64px; border-radius: 12px; padding: 7px; }
.medio-pago-logo img { display: block; max-width: 100%; max-height: 100%; }
.medio-pago-breb { padding: 0; overflow: hidden; background: #2c0259; }   /* el logo de Bre-B trae su fondo morado */
.medio-pago-breb img { width: 100%; height: 100%; object-fit: contain; }
.medio-pago-texto { display: grid; flex: 1; min-width: 0; line-height: 1.3; }
.medio-pago-texto small { color: var(--suave); }
.medio-pago-texto strong { font-size: 1.12rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.medio-pago .boton { min-height: 38px; padding: 0 14px; font-size: .9rem; }
.canciones { display: grid; gap: 12px; }

.galeria { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -20px 24px; padding: 0 20px 4px; scrollbar-width: none; }
.galeria::-webkit-scrollbar { display: none; }
.galeria a { flex: 0 0 78%; scroll-snap-align: center; }
.galeria img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 18px; }
.galeria a:only-child { flex-basis: 100%; }

.aviso-vista-previa { position: sticky; top: 0; z-index: 30; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 20px; background: var(--azul); color: #fff; font-size: .88rem; }
.aviso-vista-previa a { color: #fff; font-weight: 600; text-decoration: underline; }
.aviso-vista-previa .icono { width: 18px; height: 18px; }
.publica-pie { text-align: center; color: var(--suave); font-size: .8rem; padding: 16px 20px 32px; }
.publica-nota { text-align: center; color: var(--suave); font-size: .85rem; margin-top: 20px; }
body.funcion-fe { --fondo: #fffcf6; --fondo-suave: #f6efe0; --superficie: #ffffff; }
.funcion-fe .boton-publico-icono { color: var(--tono-fe); }

@media print {
  .barra, .pie, .no-imprimir, .alerta { display: none !important; }
  body { background: #fff; color: #000; }
  .contenido { padding: 0; }
  .hoja-qr { grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .tarjeta-qr { background: #fff; border: 1px dashed #999; break-inside: avoid; }
  .tarjeta-qr .qr { padding: 0; }
  .codigo { color: #000; }
}

/* ------------------------------------------------------------ Cambios de función */
.alerta-info { background: var(--azul-suave); color: var(--texto); }
.enlace-pequeno { background: none; border: 0; padding: 0; margin-top: 4px; font: inherit; font-size: .8rem; color: var(--enlace); cursor: pointer; }
.enlace-pequeno:hover { text-decoration: underline; }
.contador form { margin: 0; }
.paquetes { display: grid; gap: 16px; max-width: 900px; margin: 0 auto 24px; }
@media (min-width: 720px) { .paquetes { grid-template-columns: repeat(3, 1fr); } }
.paquete { position: relative; display: grid; gap: 4px; justify-items: center; text-align: center; padding: 48px 24px 24px; border-radius: var(--radio-grande); background: var(--fondo-suave); }
.paquete h2 { font-size: 1.25rem; margin: 0; }
.paquete .precio { font-size: 2.4rem; font-weight: 700; letter-spacing: -0.03em; margin: 4px 0 0; }
.paquete .suave { margin-bottom: 16px; }
.paquete .insignia { position: absolute; top: 14px; }
.paquete-destacado { background: radial-gradient(90% 60% at 80% 0%, rgb(8 123 255 / 34%), transparent 70%), linear-gradient(165deg, #0c2550, var(--noche) 70%); color: #fff; --suave: #aebdd3; box-shadow: 0 24px 50px rgb(7 21 45 / 28%), inset 0 0 0 1px rgb(0 213 242 / 30%); }
.lista-pedidos { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 8px; }
.lista-pedidos li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--superficie); }
.lista-pedidos li > div { display: grid; gap: 2px; min-width: 0; }
.lista-pedidos form { margin: 0; }
.celda-con-boton { display: flex; align-items: center; gap: 8px; }
.idea-texto { margin: 0; }
.idea-leida { opacity: .6; }

/* ------------------------------------------------------------ Ideas (bienvenida) */
.tarjeta-idea { display: grid; gap: 16px; max-width: 760px; margin: 32px auto 48px; padding: 28px; border-radius: var(--radio-grande); }
.tarjeta-idea .boton .icono { width: 18px; height: 18px; }
@media (min-width: 600px) { .tarjeta-idea { grid-template-columns: auto 1fr; } }
.tarjeta-idea-icono { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: #fff4d6; color: #c98a00; }
.tarjeta-idea-icono .icono { width: 30px; height: 30px; }
.tarjeta-idea .formulario { margin-top: 12px; justify-items: start; }

/* ------------------------------------------------------------ Encuéntrame: perfiles animados y sugerencias */
.perfil > span { padding: 14px 8px 16px; }
.perfil-ilustracion { display: block; width: 100%; max-width: 110px; padding: 0 !important; }
.sugerencias { display: flex; flex-wrap: wrap; gap: 6px; margin-top: -6px; }
.sugerencias:not(:has(.sugerencia:not([hidden]))) { display: none; }
.sugerencia { border: 0; border-radius: 999px; padding: 6px 12px; background: var(--azul-suave); color: var(--enlace); font: inherit; font-size: .85rem; cursor: pointer; }
.sugerencia::before { content: "+ "; }
.sugerencia:hover { background: #d9e8fb; }
.avatar-ilustracion { background: var(--fondo-suave); padding: 14px; }

/* ------------------------------------------------------------ Llamada rápida: botones a pantalla completa */
.tarjeta-emergencia { box-shadow: inset 4px 0 0 var(--rojo); }
body.funcion-llamar .publica-contenido { max-width: none; padding: 0; min-height: 0; }
.pantalla-llamadas { display: grid; grid-template-rows: repeat(var(--filas, 4), 1fr); gap: 4px; height: 100vh; height: 100dvh; background: #fff; }
.aviso-vista-previa + .publica-contenido .pantalla-llamadas { height: calc(100dvh - 44px); }
.boton-llamada { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px; padding: 12px 20px; color: #fff; text-align: center; text-decoration: none; }
.boton-llamada:hover { text-decoration: none; filter: brightness(1.05); }
.boton-llamada:active { filter: brightness(.92); }
.boton-llamada-nombre { font-size: clamp(2rem, 9vw, 3.4rem); font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.boton-llamada-accion { display: inline-flex; align-items: center; gap: 10px; font-size: clamp(1.2rem, 5vw, 1.6rem); font-weight: 500; opacity: .95; }
.boton-llamada-accion .icono { width: 1.3em; height: 1.3em; }
.boton-llamada-1 { background: #0071e3; }
.boton-llamada-2 { background: #1f9d55; }
.boton-llamada-3 { background: #5e5ce6; }
.boton-llamada-emergencia { background: var(--rojo); }

/* Contador de cambios de función "1 de 10" */
.bienvenida .caja-estrecha { margin-top: 20px; text-align: left; }
.mensaje-llamada { margin-top: 2px; }

/* ------------------------------------------------------------ Catálogo de llaveros (portada) */
.seccion-titulo .entrada { margin: 8px auto 0; }
.catalogo { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); margin-bottom: 24px; }
@media (max-width: 520px) {
  .catalogo { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .modelo { padding: 14px 8px 16px; }
  .modelo .boton-pequeno { padding: 6px 12px; font-size: .8rem; line-height: 1.2; white-space: normal; }
  .modelo-vista { height: 170px; }
  .modelo h3 { font-size: 1rem; }
  .modelo-ideal { font-size: .78rem; }
}
.modelo { display: grid; justify-items: center; gap: 4px; padding: 20px 18px 22px; border-radius: var(--radio-grande); background: var(--fondo-suave); text-align: center; }
.modelo-vista { display: block; width: 100%; height: 240px; padding: 0; border: 0; background: none; cursor: pointer; perspective: 900px; }
.modelo-giro { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .8s cubic-bezier(.2, .8, .2, 1); }
.modelo.volteado .modelo-giro { transform: rotateY(180deg); }
.modelo-cara { position: absolute; inset: 0; display: grid; grid-template-rows: 100%; place-items: center; backface-visibility: hidden; -webkit-backface-visibility: hidden; }  /* con la fila fija, el dibujo no pasa de la altura de la tarjeta */
.modelo-reverso { transform: rotateY(180deg); }
.llavero-svg { height: 100%; width: auto; max-width: 100%; overflow: visible; }
.modelo-frente .llavero-svg { transform-origin: 50% 6%; animation: balanceo 4.5s ease-in-out infinite; }
.modelo:nth-child(2n) .modelo-frente .llavero-svg { animation-delay: -1.6s; }
.modelo:nth-child(3n) .modelo-frente .llavero-svg { animation-delay: -2.9s; }
.modelo.volteado .modelo-frente .llavero-svg { animation-play-state: paused; }
@keyframes balanceo { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
.modelo h3 { font-size: 1.15rem; margin: 8px 0 0; }
.modelo-ideal { color: var(--suave); font-size: .9rem; margin: 0; }
.modelo-tecnologia { display: inline-flex; align-items: center; gap: 4px; margin: 6px 0 0; padding: 3px 10px; border-radius: 999px; background: var(--azul-suave); color: var(--enlace); font-size: .75rem; font-weight: 600; }
.modelo-tecnologia .icono { width: 14px; height: 14px; }
.modelo-colores { display: flex; gap: 6px; margin: 8px 0 4px; }
.modelo-colores span { width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgb(0 0 0 / 14%); }
@media (prefers-reduced-motion: reduce) {
  .modelo-frente .llavero-svg { animation: none; }
  .modelo-giro { transition: none; }
}

/* ------------------------------------------------------------ Carrusel de llaveros (portada y bienvenida) */
.carrusel { position: relative; display: grid; gap: 12px; justify-items: center; }
.carrusel-escenario { position: relative; width: 100%; height: 320px; overflow-x: clip; }  /* los que entran y salen no sacan barra horizontal */
.carrusel-escenario::before { content: ""; position: absolute; left: 50%; top: 50%; width: 260px; height: 260px; transform: translate(-50%, -54%); border-radius: 50%; background: var(--fondo-suave); }
.carrusel-item { position: absolute; inset: 0; margin: 0; display: grid; justify-items: center; align-content: center; gap: 10px; opacity: 0; transform: translateX(48px) scale(.9); transition: opacity .6s ease, transform .7s cubic-bezier(.2, .8, .2, 1); pointer-events: none; }
.carrusel-item.activo { opacity: 1; transform: none; }
.carrusel-item.saliendo { opacity: 0; transform: translateX(-48px) scale(.9); }
.carrusel-item .llavero-svg { height: 250px; transform-origin: 50% 6%; animation: balanceo 4.5s ease-in-out infinite; }
.carrusel-item figcaption { font-weight: 600; font-size: 1.05rem; }
.carrusel-puntos { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 260px; }
.carrusel-puntos button { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 4px; background: var(--borde); cursor: pointer; transition: width .3s, background .3s; }
.carrusel-puntos button[aria-current="true"] { width: 20px; background: var(--texto); }
@media (prefers-reduced-motion: reduce) { .carrusel-item, .carrusel-item .llavero-svg { transition: none; animation: none; } }

.bienvenida-con-carrusel { display: grid; gap: 4px; align-items: center; max-width: 1024px; }
.bienvenida-con-carrusel .carrusel-escenario { height: 260px; }
.bienvenida-con-carrusel .carrusel-escenario::before { width: 200px; height: 200px; }
.bienvenida-con-carrusel .carrusel-item .llavero-svg { height: 200px; }
@media (min-width: 860px) {
  .bienvenida-con-carrusel { grid-template-columns: 1.3fr 1fr; text-align: left; gap: 32px; }
  .bienvenida-con-carrusel .entrada { margin-left: 0; }
}

/* Recuadro "¿Lo quieres con tu diseño?" del catálogo */
.modelo-personalizado { background: linear-gradient(160deg, var(--azul-suave), var(--fondo-suave) 70%); }
.modelo-personalizado .modelo-vista { cursor: default; display: grid; place-items: center; }
.modelo-personalizado .boton { margin-top: 10px; }
.personalizado-contorno { fill: none; stroke: var(--azul); stroke-width: 4; stroke-dasharray: 12 9; stroke-linecap: round; animation: personalizado-dibuja 6s linear infinite; }
.personalizado-lapiz { fill: none; stroke: var(--texto); stroke-width: 4; stroke-linejoin: round; stroke-linecap: round; }
.personalizado-destello { fill: var(--dorado); transform-box: fill-box; transform-origin: center; animation: ilus-destello 2.4s ease-in-out infinite; }
.personalizado-ilustracion { width: 200px; height: 240px; margin: 0 auto; }
@keyframes personalizado-dibuja { to { stroke-dashoffset: -210; } }
@media (prefers-reduced-motion: reduce) { .personalizado-contorno, .personalizado-destello { animation: none; } }

/* ------------------------------------------------------------ Restaurante */
.interruptor-boton { display: flex !important; justify-content: space-between; align-items: center; gap: 12px; cursor: pointer; font-weight: 600 !important; font-size: 1.15rem !important; }
.interruptor-titulo { display: inline-flex; align-items: center; gap: 8px; }
.interruptor-titulo .icono { color: var(--suave); }
.interruptor-boton input { position: absolute; opacity: 0; pointer-events: none; }
.interruptor { position: relative; width: 50px; height: 30px; border-radius: 999px; background: var(--borde); transition: background .2s; flex-shrink: 0; }
.interruptor::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / 25%); transition: transform .2s; }
.interruptor-boton input:checked + .interruptor { background: #34c759; }
.interruptor-boton input:checked + .interruptor::after { transform: translateX(20px); }
.interruptor-boton input:focus-visible + .interruptor { outline: 3px solid rgb(0 113 227 / 50%); outline-offset: 2px; }
[data-seccion-boton].apagado > :not(.interruptor-boton) { display: none; }
.menu-pdf { display: grid; place-items: center; gap: 4px; aspect-ratio: 1; border-radius: 10px; background: var(--fondo-suave); color: var(--texto); font-size: .8rem; text-align: center; }
.menu-pdf .icono { width: 28px; height: 28px; }
.desplegable { border-radius: 18px; background: var(--fondo-suave); }
.desplegable summary { list-style: none; cursor: pointer; }
.desplegable summary::-webkit-details-marker { display: none; }
.desplegable[open] .boton-publico-flecha { transform: rotate(180deg); }
.desplegable-contenido { padding: 0 12px 12px; }
.desplegable-contenido .medio-pago { background: var(--superficie); }
.menu-paginas { display: grid; gap: 8px; padding: 0 12px 12px; }
.menu-paginas img { display: block; width: 100%; border-radius: 12px; }

/* ------------------------------------------------------------ Manillas */
.catalogo-manillas { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.modelo-manilla .modelo-vista { height: 170px; display: grid; place-items: center; cursor: default; }
.manilla-svg { width: 100%; max-width: 280px; height: auto; overflow: visible; }
.modelo-manilla .manilla-svg { animation: flota 5s ease-in-out infinite; }
.modelo-manilla:nth-child(2n) .manilla-svg { animation-delay: -2s; }
@keyframes flota { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-6px) rotate(1.5deg); } }
.carrusel-manilla .manilla-svg { width: 300px; max-width: 92%; animation: flota 5s ease-in-out infinite; }
.bienvenida-con-carrusel .carrusel-manilla .manilla-svg { width: 240px; }
@media (max-width: 520px) { .catalogo-manillas { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .manilla-svg { animation: none !important; } }

/* Recuadro que invita a LlaviPet: lleva el verde azulado de esa marca */
.recuadro-llavipet { display: grid; gap: 20px; align-items: center; padding: 32px; margin: 0 0 32px; border-radius: var(--radio-grande); background: #e6f4f1; }
@media (min-width: 900px) { .recuadro-llavipet { grid-template-columns: 1.25fr 1fr; } }
.llavipet-texto { display: grid; gap: 16px; }
.llavipet-texto .boton { justify-self: start; }
.llavipet-muestra { display: flex; align-items: center; justify-content: center; gap: 8px; }
.llavipet-muestra img { width: min(220px, 48%); height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radio-grande); box-shadow: 0 18px 40px rgb(0 0 0 / 14%); }
.llavipet-llavero { width: min(96px, 24%); }
.llavipet-llavero .llavero-svg { display: block; width: 100%; height: auto; }
.recuadro-llavipet h2 { margin: 4px 0 6px; }
.recuadro-llavipet .etiqueta { color: #0b6b60; }
.llavipet-usos { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.llavipet-usos li { display: flex; gap: 8px; align-items: center; font-size: .95rem; }
.llavipet-usos .icono { width: 20px; height: 20px; flex: none; color: #0a7d70; }
.boton.boton-llavipet { background: #0a7d70; }
.boton.boton-llavipet:hover { background: #0b8276; }

/* ------------------------------------------------------------ Tienda: precios, carrito y WhatsApp */
.planes .paquete { padding-top: 56px; }
.plan-dibujo { width: 100%; height: 160px; margin: 0 auto 8px; display: flex; align-items: center; justify-content: center; gap: 4px; }
.plan-dibujo .llavero-svg { height: 100%; width: auto; max-width: 100%; }
.plan-dibujo-doble .llavero-svg { height: 110px; flex: none; }
.planes .paquete h2 { min-height: 2.5em; display: flex; align-items: center; justify-content: center; } /* los precios quedan a la misma altura */
.plan-dibujo-doble .manilla-svg { flex: 1; min-width: 0; max-width: 150px; height: auto; }
.planes .paquete { min-width: 0; display: flex; flex-direction: column; align-items: center; }
.planes .plan-incluye { align-self: stretch; }
.planes { max-width: 1120px; }
@media (min-width: 860px) { .planes { grid-template-columns: repeat(3, minmax(0, 1fr)); } .planes-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.planes-2 { max-width: 780px; }
@media (min-width: 720px) { .planes-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }   /* dos tarjetas: nunca una columna vacía */
.paquete .pago-unico { margin: 0 0 4px; font-size: .85rem; color: var(--ok); font-weight: 600; }
.plan-incluye { list-style: none; padding: 0; margin: 12px 0 20px; display: grid; gap: 10px; text-align: left; justify-self: stretch; }
.plan-incluye li { display: flex; gap: 10px; align-items: flex-start; }
.plan-incluye .icono { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--ok); }
.planes .boton-ancho { margin-top: auto; }
.planes-cambios { max-width: 640px; margin: -8px auto 56px; text-align: center; color: var(--suave); }
.planes-cambios strong { color: var(--texto); white-space: nowrap; }
/* Packs: el año de plan que traen, lo que se ahorra y en cuánto se renueva */
/* La tarjeta de precio de LlaviYo Pro (y las clases de los planes de perfil de antes) */
.plan-lema { max-width: 30ch; margin: 2px auto 6px; color: var(--suave); font-size: .95rem; }
.paquete .precio small { font-size: .45em; font-weight: 600; color: var(--suave); }
.plan-condiciones { width: 100%; margin: 0 0 14px; text-align: left; }
.plan-condiciones summary { padding: 12px 14px; font-weight: 600; color: var(--enlace); }
.plan-condiciones .desplegable-contenido { padding: 0 14px 14px; font-size: .9rem; }
.plan-condiciones ul { margin: 4px 0 10px; padding-left: 18px; }
.paquete-destacado .plan-condiciones { background: rgb(255 255 255 / 10%); }
.paquete-destacado .plan-condiciones summary { color: #8ec5ff; }
.tabla-planes-caja { max-width: 980px; margin: 32px auto 0; }
.tabla-planes { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .92rem; background: var(--superficie); border-radius: 18px; box-shadow: inset 0 0 0 1px var(--borde); overflow: hidden; }
.tabla-planes caption { caption-side: top; padding: 0 0 12px; font-size: 1.4rem; font-weight: 700; text-align: center; }
.tabla-planes caption small { display: block; font-size: .9rem; font-weight: 400; color: var(--suave); }
.tabla-planes th, .tabla-planes td { padding: 11px 10px; border-bottom: 1px solid var(--borde); text-align: center; vertical-align: middle; white-space: normal; }   /* las tablas de Admin no parten el texto; esta sí, para caber en el celular */
.tabla-planes tbody tr:last-child th, .tabla-planes tbody tr:last-child td { border-bottom: 0; }
.tabla-planes thead th { font-size: 1rem; background: var(--fondo-suave); }
.tabla-planes tbody th { text-align: left; font-weight: 500; }
.tabla-planes .columna-destacada { background: rgb(0 113 227 / 7%); font-weight: 600; }
.tabla-planes thead .columna-destacada { background: #000; color: #fff; }
.tabla-planes .valor-si { color: #1a7f37; }
.tabla-planes .valor-no { color: var(--suave); }
@media (max-width: 560px) {
  .tabla-planes { font-size: .8rem; }
  .tabla-planes th, .tabla-planes td { padding: 9px 5px; }
  .tabla-planes tbody th { width: 38%; }
}
.plan-renueva { margin: -6px 0 16px; font-size: .85rem; color: var(--suave); }
.paquete-destacado .pago-unico, .paquete-destacado .plan-incluye .icono { color: #7ee2a0; }
/* Planes de perfil: por qué no hay que tenerle miedo a la suscripción */
.plan-garantias { list-style: none; padding: 0; margin: 8px auto 24px; max-width: 900px; display: grid; gap: 10px; }
@media (min-width: 720px) { .plan-garantias { grid-template-columns: repeat(3, 1fr); } }
.plan-garantias li { display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px; border-radius: var(--radio); background: var(--fondo-suave); font-size: .92rem; }
.plan-garantias .icono { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--ok); }

.boton-carrito { position: relative; display: inline-grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 50%;
  background: var(--fondo-suave); color: var(--texto); cursor: pointer; }
.boton-carrito .icono { width: 20px; height: 20px; }
.carrito-cuenta { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: var(--azul); color: #fff; font-size: .7rem; font-weight: 700; line-height: 18px; text-align: center; }
.dialogo { width: min(480px, calc(100% - 32px)); max-height: calc(100% - 32px); padding: 24px; border: 0; border-radius: var(--radio-grande);
  background: var(--superficie); color: var(--texto); box-shadow: 0 30px 80px rgb(0 0 0 / 25%); }
.dialogo::backdrop { background: rgb(0 0 0 / 35%); }
.dialogo-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.dialogo-cabecera h2 { margin: 0; font-size: 1.35rem; }
.dialogo-cerrar { flex: none; width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--fondo-suave); color: var(--texto); font-size: 1.3rem; line-height: 1; cursor: pointer; }
.dialogo-dibujo:not(:empty) { width: 110px; margin: 0 auto 8px; }
.dialogo-dibujo:has(.manilla-svg) { width: 230px; }
.dialogo-dibujo svg { width: 100%; height: auto; }
.opciones-plan { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.opciones-plan legend { font-weight: 600; margin-bottom: 6px; }
.opciones-plan label { cursor: pointer; }
.opciones-plan input { position: absolute; opacity: 0; pointer-events: none; }
.opciones-plan span { display: grid; gap: 2px; padding: 12px 16px; border-radius: var(--radio); background: var(--fondo-suave); font-weight: 600; box-shadow: inset 0 0 0 2px transparent; }
.opciones-plan small { font-weight: 400; color: var(--suave); }
.opciones-plan input:checked + span { box-shadow: inset 0 0 0 2px var(--azul); background: var(--azul-suave); }
.opciones-plan input:focus-visible + span { outline: 3px solid rgb(0 113 227 / 50%); outline-offset: 2px; }
.carrito-lista { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 10px; }
.carrito-lista li { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: var(--radio); background: var(--fondo-suave); }
.carrito-miniatura { flex: none; width: 54px; }
.carrito-miniatura:has(.manilla-svg) { width: 84px; }
.carrito-miniatura:empty { display: none; }
.carrito-miniatura svg { display: block; width: 100%; height: auto; }
.carrito-miniatura img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; }
.carrito-detalle { flex: 1; min-width: 0; }
.carrito-lista strong { display: block; font-size: .95rem; }
.carrito-lista .suave { font-size: .85rem; }
.carrito-total { font-size: 1.3rem; font-weight: 700; text-align: right; margin: 0 0 12px; }
.boton.boton-whatsapp { background: #1fa855; }
.boton.boton-whatsapp:hover { background: #22b45c; }
.boton-whatsapp .icono { width: 20px; height: 20px; }
.modelo .boton-pequeno .icono { width: 16px; height: 16px; vertical-align: -3px; }

.whatsapp-flotante { position: fixed; right: 20px; bottom: 20px; z-index: 20; display: grid; place-items: center; width: 58px; height: 58px;
  border-radius: 50%; background: #25d366; color: #fff; box-shadow: 0 10px 30px rgb(0 0 0 / 25%); transition: transform .2s; }
.whatsapp-flotante:hover { transform: scale(1.06); text-decoration: none; }
.whatsapp-flotante .icono { width: 30px; height: 30px; }

/* Así están hechos */
.bondades { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); margin-bottom: 48px; }
.bondades .tarjeta { margin: 0; }
.bondades h3 { margin: 12px 0 4px; font-size: 1.1rem; }
.bondades p { margin: 0; color: var(--suave); }
.bondad-icono { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--azul-suave); color: var(--azul); }
.bondad-icono .icono { width: 22px; height: 22px; }

/* ------------------------------------------------------------ Vista previa de cada función: un celular */
.funcion[data-vista-previa] { cursor: pointer; }
.funcion .boton-contorno .icono { width: 16px; height: 16px; vertical-align: -3px; }
.dialogo-celular { width: min(400px, calc(100% - 24px)); padding: 20px 16px; }
.dialogo-celular > .suave { margin: -6px 0 10px; }
.celular { position: relative; width: min(320px, 100%); margin: 0 auto 12px; padding: 12px; border-radius: 48px; background: #1d1d1f;
  box-shadow: 0 20px 50px rgb(0 0 0 / 25%), inset 0 0 0 2px #3a3a3c; }
.celular-camara { position: absolute; z-index: 1; top: 22px; left: 50%; width: 84px; height: 24px; margin-left: -42px; border-radius: 999px; background: #000; }
.celular-pantalla { display: block; width: 100%; height: min(600px, calc(100vh - 230px)); min-height: 360px; border: 0; border-radius: 36px; background: #fff; }

/* ------------------------------------------------------------ Página de presentación por secciones */
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Descuentos por cantidad (precios y carrito) */
/* Va debajo de la tabla para comparar los planes: margen normal, sin subirse a ella */
.recuadro-descuento { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 20px; max-width: 760px; margin: 28px auto 56px;
  padding: 18px 22px; border-radius: var(--radio-grande); background: var(--ok-fondo); text-align: center; }
.recuadro-descuento p { margin: 0; font-weight: 600; }
.carrito-descuento { margin: 0 0 12px; padding: 10px 14px; border-radius: var(--radio); background: var(--ok-fondo); color: var(--ok); font-weight: 600; font-size: .92rem; }

/* ------------------------------------------------------------ Mi cuenta */
.caja-media > .tarjeta { margin-bottom: 18px; }
.tarjeta-peligro { box-shadow: inset 0 0 0 1px var(--error-fondo); }
.boton.boton-peligro { background: var(--error); }
.boton.boton-peligro:hover { background: #a82317; }
.aviso-correo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.aviso-correo form { margin: 0; }

/* Verificación en dos pasos */
.codigos-recuperacion { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.codigos-recuperacion code, .clave-totp { font: 600 1rem ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .04em; }
.codigos-recuperacion code { display: block; padding: 10px 12px; border-radius: 12px; background: var(--fondo-suave); text-align: center; }

/* ------------------------------------------------------------ Estado y estadísticas de los llaveros */
.insignia-estado { font-weight: 600; }
.insignia-activo { background: var(--ok-fondo); color: var(--ok); }
.insignia-pausado { background: var(--aviso-fondo); color: var(--aviso); }
.insignia-guardado, .insignia-pendiente { background: var(--fondo-suave); color: var(--suave); box-shadow: inset 0 0 0 1px var(--borde); }
.tarjeta-llavero-principal small { display: block; margin-top: 2px; }
.estadisticas { margin-bottom: 20px; }
.cifras { display: flex; flex-wrap: wrap; gap: 12px 40px; margin-bottom: 16px; }
.cifras > div { display: grid; }
.cifras strong { font-size: 2rem; letter-spacing: -.02em; line-height: 1.1; }
.tendencia { color: var(--suave); }
.grafica-escaneos { margin: 0 0 12px; }
/* Barras finas de un solo color, ancladas abajo, 2px de separación y puntas redondeadas de 4px; el número sale al pasar. */
.grafica-barras { display: grid; grid-template-columns: repeat(14, 1fr); gap: 2px; align-items: end; height: 120px; border-bottom: 1px solid var(--borde-suave); }
.grafica-columna { position: relative; height: 100%; display: flex; align-items: flex-end; cursor: default; outline-offset: 2px; }
.grafica-barra { display: block; width: 100%; min-height: 2px; border-radius: 4px 4px 0 0; background: var(--azul); }
.grafica-columna:hover .grafica-barra, .grafica-columna:focus-visible .grafica-barra { background: var(--azul-hover); }
.grafica-columna:hover::after, .grafica-columna:focus-visible::after {
  content: attr(data-texto); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); z-index: 2;
  padding: 6px 10px; border-radius: 10px; background: var(--texto); color: var(--fondo); font-size: .8rem; white-space: nowrap; pointer-events: none;
}
.grafica-columna:first-child:hover::after, .grafica-columna:first-child:focus-visible::after { left: 0; transform: none; }
.grafica-columna:last-child:hover::after, .grafica-columna:last-child:focus-visible::after { left: auto; right: 0; transform: none; }
.grafica-eje { display: flex; justify-content: space-between; margin-top: 4px; font-size: .78rem; color: var(--suave); }
.grafica-tabla { margin-top: 8px; font-size: .9rem; }
.grafica-tabla summary { cursor: pointer; color: var(--enlace); }

/* ------------------------------------------------------------ Accesibilidad */
.saltar { position: absolute; left: 12px; top: -60px; z-index: 50; padding: 10px 16px; border-radius: 12px; background: var(--texto); color: var(--fondo); }
.saltar:focus { top: 12px; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid rgb(0 113 227 / 55%); outline-offset: 2px;
}
main:focus { outline: none; }

/* Términos, privacidad y la casilla para aceptarlos */
.documento-legal h2 { font-size: 1.15rem; margin: 28px 0 8px; }
.documento-legal p, .documento-legal li { color: var(--texto); line-height: 1.6; }
.documento-legal ul { padding-left: 20px; }
.casilla-acepto { align-items: flex-start; font-size: .9rem; }
.casilla-acepto input { margin-top: 3px; }
.pie-enlaces { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; margin-bottom: 8px; }
.pie-enlaces a { color: var(--suave); }
.texto-error { color: var(--error); }

/* ------------------------------------------------------------ Tienda: productos con foto, ficha y galería */
.modelo h3 a { color: inherit; }
.modelo .modelo-ideal { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.modelo .enlace-pequeno .icono { width: 15px; height: 15px; vertical-align: -3px; }
.modelo-foto { position: relative; height: auto; aspect-ratio: 1; overflow: hidden; border-radius: 20px; background: var(--superficie); cursor: pointer; }
.modelo-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 520px) { .modelo-foto { height: auto; } }
.sin-foto { display: grid; place-items: center; width: 100%; height: 100%; min-height: 120px; color: var(--borde); }
.sin-foto .icono { width: 48px; height: 48px; }
.insignia-video { position: absolute; right: 10px; bottom: 10px; background: rgb(0 0 0 / 65%); color: #fff; }
.precio-producto { margin: 4px 0 0; font-weight: 600; font-size: 1.05rem; }
.miga { margin: 0 0 16px; color: var(--suave); font-size: .9rem; }
.ficha-producto { display: grid; gap: 28px; margin-bottom: 40px; }
@media (min-width: 860px) { .ficha-producto { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; } }
.ficha-texto h1 { margin: 0 0 6px; }
.ficha-texto .acciones { margin: 18px 0; }
.precio-ficha { margin: 0 0 10px; font-size: 1.6rem; font-weight: 600; letter-spacing: -.01em; }
.ficha-descripcion p { margin: 0 0 12px; }
.galeria-principal { overflow: hidden; border-radius: var(--radio-grande); background: var(--fondo-suave); aspect-ratio: 1; }
.galeria-vista { position: relative; display: grid; place-items: center; width: 100%; height: 100%; margin: 0; }
.galeria-vista[hidden] { display: none; }
.galeria-vista > img { width: 100%; height: 100%; object-fit: cover; }
.galeria-dibujo { position: absolute; inset: 0; padding: 8%; }
.galeria-dibujo svg { display: block; width: 100%; height: 100%; }
.galeria-vista iframe { width: 100%; height: 100%; border: 0; background: #000; }
.galeria-video { display: grid; place-items: center; align-content: center; gap: 10px; width: 100%; height: 100%; background: #1d1d1f; color: #fff; font-weight: 600; }
.galeria-play { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: rgb(255 255 255 / 18%); }
.galeria-play .icono { width: 34px; height: 34px; fill: currentColor; }
.galeria-miniaturas { display: flex; gap: 10px; margin-top: 12px; overflow-x: auto; scrollbar-width: none; }
.galeria-miniatura { flex: none; display: grid; place-items: center; width: 76px; height: 76px; padding: 4px; overflow: hidden; border: 0; border-radius: 16px;
  background: var(--fondo-suave); box-shadow: inset 0 0 0 2px transparent; cursor: pointer; transition: box-shadow .2s; }
.galeria-miniatura[aria-current="true"] { box-shadow: inset 0 0 0 2px var(--azul); }
.galeria-miniatura img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; }
.galeria-miniatura svg { width: 100%; height: 100%; }
.galeria-miniatura-video { display: grid; place-items: center; gap: 2px; width: 100%; height: 100%; border-radius: 12px; background: #1d1d1f; color: #fff; font-size: .75rem; font-weight: 600; }
.galeria-miniatura-video .icono { width: 22px; height: 22px; fill: currentColor; }
.pedido-hecho { display: grid; gap: 12px; margin-bottom: 12px; }
.pedido-hecho .alerta { margin: 0; }

/* ------------------------------------------------------------ Admin de la tienda */
.menu-admin { display: flex; gap: 6px; margin: 0 0 20px; padding-bottom: 4px; overflow-x: auto; scrollbar-width: none; }
.menu-admin a, .pestanas-admin a { flex: none; padding: 7px 14px; border-radius: 999px; background: var(--fondo-suave); color: var(--texto); font-size: .9rem; white-space: nowrap; }
.menu-admin a[aria-current="page"], .pestanas-admin a[aria-current="page"] { background: var(--texto); color: #fff; }
.menu-admin a[aria-current="page"] .insignia { background: #fff; }
.pestanas-admin a[aria-current="page"] .suave { color: rgb(255 255 255 / 75%); }
.barra-admin { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.barra-admin .fila-formulario { flex: 1 1 260px; max-width: 440px; }
.barra-admin .boton .icono { width: 18px; height: 18px; vertical-align: -4px; }
.pestanas-admin { display: flex; flex-wrap: wrap; gap: 6px; }
.barra-admin .fila-fechas { flex: 0 1 auto; max-width: none; align-items: center; }
.fila-fechas label { display: flex; align-items: center; gap: 6px; font-size: .9rem; }
.lista-disenos { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.lista-disenos li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 12px; background: var(--superficie); }
.celda-miniatura { width: 56px; }
.celda-miniatura svg, .celda-miniatura img, .celda-miniatura .sin-foto { display: block; width: 48px; height: 48px; min-height: 0; object-fit: cover; border-radius: 10px; }
.celda-miniatura .manilla-svg { width: 72px; height: auto; }
.celda-miniatura .sin-foto .icono { width: 24px; height: 24px; }
.tabla-productos .casilla { white-space: nowrap; }
.producto-diseno { display: flex; gap: 16px; align-items: center; }
.producto-diseno-dibujo { flex: none; width: 96px; }
.producto-diseno-dibujo svg { width: 100%; height: auto; }
.zona-peligro { margin: 32px 0 0; padding-top: 20px; border-top: 1px solid var(--borde-suave); }
.fila-categoria { display: grid; grid-template-columns: minmax(0, 1fr) 110px; gap: 12px; }
.formulario-categoria + form { margin-top: 10px; }
.mover-inventario { display: flex; gap: 6px; align-items: center; }
.mover-inventario > * { flex: none; }
.mover-inventario select, .mover-inventario input { width: auto; min-height: 36px; padding: 4px 8px; font-size: .85rem; }
.mover-inventario input[type="number"] { width: 80px; }
.mover-inventario input[name="nota"] { width: 150px; }
.insignia-aviso { background: var(--aviso-fondo); color: var(--aviso); }
.insignia-neutra { background: var(--fondo-suave); color: var(--suave); }
.modelo .insignia-pausa { margin-top: 6px; }
.insignia-pedido-pendiente { background: var(--aviso-fondo); color: var(--aviso); }
.insignia-pedido-pagado { background: var(--azul-suave); color: var(--enlace); }
.insignia-pedido-entregado { background: var(--ok-fondo); color: var(--ok); }
.insignia-pedido-cancelado { background: var(--fondo-suave); color: var(--suave); }
.tabla-pedidos td { vertical-align: top; }
.tabla-pedidos .icono { width: 15px; height: 15px; vertical-align: -3px; }
.lista-articulos { list-style: none; margin: 0; padding: 0; white-space: normal; min-width: 220px; }
.acciones-pedido { display: flex; flex-wrap: wrap; gap: 6px; }

/* ------------------------------------------------------------ Portada: botón «Ver catálogo» y carrusel que lleva al catálogo */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
#catalogo, #funciones { scroll-margin-top: 72px; }   /* que la barra de arriba no tape el título */
a.carrusel-escenario { display: block; color: inherit; cursor: pointer; }

/* ------------------------------------------------------------ Portada comercial (docs/REDISENO.md) */
.portada h1 .acento { color: var(--azul); }
.portada-cuenta { margin: 18px 0 0; color: var(--suave); font-size: .95rem; }

/* Compra según tu necesidad */
.necesidad-icono { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--azul-suave); color: var(--azul); margin-bottom: 8px; }
.necesidad-icono .icono { width: 24px; height: 24px; }
.necesidad-icono-llavipet { background: #e6f4f1; color: #0a7d70; }

/* Filtro del catálogo por líneas (assets/app.js) */
.filtro-activo { text-align: center; margin: 0 0 24px; padding: 12px 16px; border-radius: var(--radio); background: var(--azul-suave); }
.filtro-activo .enlace { color: var(--enlace); margin-left: 6px; }
.filtro-vacio { text-align: center; margin: 32px 0; }
.filtro-vacio .enlace { color: var(--enlace); }

/* Cómo funciona, en 4 pasos */
@media (min-width: 760px) { .pasos-cuatro { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .pasos-cuatro { grid-template-columns: repeat(4, 1fr); } }
.pasos h3 { font-size: 1.15rem; }

/* Soluciones para empresas y Compra con confianza */
.empresas-lista { display: grid; gap: 16px; }
.empresas-lista { grid-template-columns: 1fr; }
@media (min-width: 620px) { .empresas-lista { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 940px) { .empresas-lista { grid-template-columns: repeat(3, 1fr); } }
.empresas-lista article { display: flex; flex-direction: column; gap: 6px; }
.empresas-lista .empresa-cual { align-self: flex-start; margin-top: auto; }
.empresas-lista p { margin-bottom: 6px; }
.empresas .planes-empresa { margin-top: 20px; }
.empresas-lista article { padding: 22px; border-radius: var(--radio); background: var(--fondo-suave); }
.empresas-lista h3 { font-size: 1.1rem; }
.empresas-lista p { color: var(--suave); font-size: .95rem; margin: 0; }
.empresas .acciones { margin-top: 24px; }
.empresas .boton .icono { width: 20px; height: 20px; }
.confianza-legal { text-align: center; margin: 16px 0 0; font-size: .92rem; }

/* Productos destacados (portada) */
.destacados { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 760px) { .destacados { grid-template-columns: repeat(4, minmax(0, 1fr)); } }   /* los cuatro en una fila */
.destacado { display: grid; gap: 6px; align-content: start; justify-items: center; text-align: center; padding: 18px 16px; border-radius: var(--radio); background: var(--fondo-suave); }
.destacado h3 { font-size: 1.05rem; margin: 4px 0 0; }
.destacado h3 a { color: inherit; }
.destacado p { margin: 0; }
.destacado .boton { margin-top: 6px; }
.destacado .suave { font-size: .88rem; line-height: 1.35; }
.destacado-dibujo { display: grid; place-items: center; width: 100%; height: 150px; }
.destacado-dibujo .llavero-svg, .destacado-dibujo svg { height: 150px; width: auto; max-width: 100%; }
.destacado-dibujo img { max-height: 150px; border-radius: 12px; object-fit: cover; }
.destacado-beneficio { display: inline-flex; align-items: center; gap: 4px; font-size: .8rem; color: var(--enlace); }
.destacado-beneficio .icono { width: 14px; height: 14px; }

/* Planes de perfiles digitales (portada y /plan) */
.planes-digitales { grid-template-columns: 1fr; }
@media (min-width: 600px) { .planes-digitales { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .planes-digitales { grid-template-columns: repeat(2, 1fr); } }
.planes-digitales .paquete { display: grid; align-content: start; gap: 4px; }
.planes-digitales h3 { font-size: 1.3rem; margin: 0; }
.planes-digitales .precio { margin: 4px 0 0; }
.planes-digitales .plan-incluye { margin: 10px 0 14px; text-align: left; }
.planes-empresa { display: grid; gap: 16px; align-items: center; margin-top: 24px; }
@media (min-width: 820px) { .planes-empresa { grid-template-columns: 1fr auto; } }
.planes-empresa h3 { font-size: 1.2rem; }
.aviso-plan .boton { margin-top: 4px; }
.planes-digitales { max-width: 780px; }

/* ------------------------------------------------------------ Perfiles digitales y catálogo, juntos (portada) */
/* Cada perfil: su recuadro a la izquierda, en una columna gris más oscura que va de arriba abajo, y sus diseños a la
   derecha, en dos columnas de tres. Una línea separa un perfil del siguiente. En el celular va el perfil y debajo sus
   diseños. */
.perfil-catalogo { display: grid; gap: 16px; }
.perfil-catalogo + .perfil-catalogo, .perfil-catalogo + .categoria-catalogo { margin-top: 32px; padding-top: 32px; border-top: 1px solid var(--borde); }
.perfil-catalogo .perfil-catalogo-perfil.funcion { background: #e8e8ed; align-content: start; }
.perfil-catalogo .perfil-catalogo-perfil.funcion:hover { transform: none; box-shadow: none; }
.perfil-catalogo-pegado { display: grid; gap: 8px; }
.perfil-catalogo-perfil .etiqueta { margin-bottom: 4px; }
.perfil-catalogo-perfil .perfil-incluye { margin-top: -6px; font-size: .92rem; }
.perfil-catalogo-perfil .perfil-incluye strong { color: var(--texto); }
.perfil-vistas { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.modelo-llavipet { display: grid; grid-template-rows: 100%; place-items: center; }
.perfil-catalogo .catalogo { margin-bottom: 0; }
@media (min-width: 521px) { .perfil-catalogo-disenos { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); } }
@media (min-width: 900px) {
  .perfil-catalogo { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); align-items: stretch; }
  .perfil-catalogo-pegado { position: sticky; top: 80px; }
}

/* ------------------------------------------------------------ Vista previa de «así se abre» (pagina_directa) */
/* Un dibujo de ejemplo de lo que se abre al escanear: Instagram, WhatsApp con el mensaje, las reseñas o la llamada. */
.directa { min-height: 100vh; display: flex; flex-direction: column; background: #fff; }
.directa-aviso { margin: 0; padding: 10px 14px; font-size: .8rem; font-weight: 600; color: var(--suave); background: var(--fondo-suave); text-align: center; }
.directa-aviso .icono { width: 14px; height: 14px; vertical-align: -2px; }
.directa-pantalla { flex: 1; display: flex; flex-direction: column; gap: 14px; padding: 16px; }
.directa-pie { margin: 0; padding: 10px; font-size: .75rem; color: var(--suave); text-align: center; }
.directa-barra { display: flex; align-items: center; gap: 8px; font-size: 1rem; }
.directa-barra .icono { width: 22px; height: 22px; color: #d62976; }
.ig-perfil { display: flex; align-items: center; gap: 16px; }
.ig-avatar { flex: none; width: 74px; height: 74px; border-radius: 50%; display: grid; place-items: center; font-size: 1.8rem; font-weight: 700; color: #fff;
  background: #d62976; box-shadow: 0 0 0 3px #fff, 0 0 0 5px #f58529; }
.ig-cifras { flex: 1; display: flex; justify-content: space-around; text-align: center; font-size: .72rem; color: var(--suave); }
.ig-cifras strong { display: block; font-size: 1rem; color: var(--texto); }
.ig-nombre { margin: 0; font-size: .85rem; line-height: 1.4; }
.ig-seguir { display: block; padding: 8px; border-radius: 8px; background: #0095f6; color: #fff; font-weight: 700; font-size: .9rem; text-align: center; }
.ig-fotos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
.ig-fotos span { aspect-ratio: 1; border-radius: 2px; }
.directa-whatsapp .directa-pantalla { padding: 0; gap: 0; background: #efe7dd; }
.wa-barra { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #075e54; color: #fff; }
.wa-barra small { display: block; font-size: .72rem; opacity: .8; }
.wa-avatar { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: #25d366; font-weight: 700; }
.wa-chat { flex: 1; display: flex; align-items: center; justify-content: center; padding: 16px; }
.wa-nota { margin: 0; padding: 8px 12px; border-radius: 8px; background: #fff7c2; font-size: .8rem; text-align: center; }
.wa-escribir { display: flex; align-items: flex-end; gap: 8px; padding: 10px; }
.wa-texto { flex: 1; padding: 10px 14px; border-radius: 20px; background: #fff; font-size: .9rem; line-height: 1.35; }
.wa-enviar { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: #25d366; color: #fff; }
.wa-enviar .icono { width: 20px; height: 20px; }
.resena-negocio, .resena-escribir { display: grid; gap: 6px; padding: 14px; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--borde-suave); }
.resena-negocio strong { font-size: 1.1rem; }
.resena-nota { font-size: .9rem; }
.resena-estrellas { color: #fbbc04; letter-spacing: 1px; }
.resena-vacias { font-size: 2.2rem; color: #fbbc04; letter-spacing: 4px; text-align: center; }
.resena-caja { padding: 12px; min-height: 64px; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--borde); color: var(--suave); font-size: .85rem; }
.resena-publicar { justify-self: end; padding: 8px 18px; border-radius: 999px; background: #1a73e8; color: #fff; font-weight: 600; font-size: .9rem; }
.directa-llamada .directa-pantalla { background: #1c1c1e; color: #fff; justify-content: center; }
.llamada-pantalla { display: grid; justify-items: center; gap: 10px; text-align: center; }
.llamada-avatar { width: 88px; height: 88px; border-radius: 50%; display: grid; place-items: center; background: #3a3a3c; }
.llamada-avatar .icono { width: 40px; height: 40px; }
.llamada-nombre { font-size: 1.6rem; }
.llamada-numero { font-size: 1.1rem; opacity: .8; }
.llamada-boton { margin-top: 18px; display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px; border-radius: 999px; background: #30d158; color: #fff; font-weight: 700; font-size: 1.1rem; }
.llamada-boton .icono { width: 22px; height: 22px; }
.llamada-nota { max-width: 260px; margin: 10px 0 0; font-size: .82rem; opacity: .75; }

/* Texto solo para lectores de pantalla */
.solo-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Precios en las tarjetas del catálogo: el del Basic y, si el perfil es del VIP, el del VIP */
.precio-packs { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; }
.precio-packs small { font-size: .72em; font-weight: 600; color: var(--suave); text-transform: uppercase; letter-spacing: .04em; }
.precio-packs .precio-vip_anual { color: #a1741c; }

/* El combo de LlaviYo Pro: su fila y su aviso en el carrito */
.carrito-fila-combo strong { color: #6b21a8; }
.carrito-combo { margin: 0 0 12px; padding: 10px 14px; border-radius: var(--radio); background: #f3e8ff; color: #6b21a8; font-weight: 600; font-size: .92rem; }

/* ------------------------------------------------------------ LlaviYo Pro en el catálogo */
.tipo-precio { margin: 6px 0 4px; font-size: 1.02rem; }
.tipo-precio strong { font-size: 1.25rem; }
.lista-funciones-titulo { margin: 10px 0 6px; }
.lista-funciones { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; text-align: left; }
.ficha-detalle { border-radius: 14px; background: var(--superficie); }
.ficha-detalle summary { display: flex; align-items: center; gap: 10px; padding: 8px 12px; cursor: pointer; font-weight: 600; list-style: none; }
.ficha-detalle summary::-webkit-details-marker { display: none; }
.ficha-detalle summary::after { content: '+'; margin-left: auto; color: var(--suave); font-weight: 400; }
.ficha-detalle[open] summary::after { content: '–'; }
.ficha-detalle > p, .ficha-detalle > a { margin: 0 12px 8px; }
.ficha-detalle > a { display: inline-flex; margin-bottom: 10px; }
.ficha-icono { display: inline-grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 9px; background: var(--tono, var(--azul)); color: #fff; }
.ficha-icono .icono { width: 16px; height: 16px; }

/* La ventana del carrito: con qué función viene el LlaviYo Pro */
.dialogo-funcion { margin: 0; padding: 10px 14px; border-radius: 14px; background: var(--azul-suave); font-size: .9rem; }
.seccion-boton { margin: 20px 0 0; }

/* «Adquiere tu LlaviYo» y la página de LlaviYo Pro */
.adquiere { max-width: 860px; margin: 0 auto 32px; }
.disenos-pro { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); grid-auto-flow: dense; align-items: start; margin: 0 0 32px; }   /* dense: las manillas, anchas, no dejan huecos */
.diseno-pro { position: relative; border-radius: var(--radio); background: var(--fondo-suave); transition: box-shadow .2s; }
.diseno-pro-manilla { grid-column: span 2; }
.diseno-pro:hover, .diseno-pro.abierto { box-shadow: 0 10px 24px rgba(0, 0, 0, .1); }
.diseno-pro-vista { display: block; width: 100%; aspect-ratio: 1; padding: 12px; border: 0; border-radius: inherit; background: none; cursor: pointer; perspective: 800px; }
.diseno-pro-manilla .diseno-pro-vista { aspect-ratio: 2 / 1; }
.diseno-pro-vista:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
.diseno-pro-giro { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.2, .8, .2, 1); }
.diseno-pro.atras .diseno-pro-giro { transform: rotateY(180deg); }
.diseno-pro-cara { position: absolute; inset: 0; display: grid; grid-template-rows: 100%; place-items: center; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.diseno-pro-atras { transform: rotateY(180deg); }
.diseno-pro-cara svg { width: 100%; height: 100%; max-height: 150px; transition: transform .3s ease, filter .3s ease; }
.diseno-pro:hover { z-index: 2; }   /* el que se agranda queda por encima de los demás */
.diseno-pro:hover .diseno-pro-cara svg { transform: scale(1.8); filter: drop-shadow(0 14px 22px rgb(0 0 0 / 22%)); }   /* al pasar el mouse, se agranda mucho */
.diseno-pro-manilla:hover .diseno-pro-cara svg { transform: scale(1.35); }
.diseno-pro.abierto .diseno-pro-cara svg { transform: scale(1.18); }
.diseno-pro-acciones { display: grid; gap: 6px; padding: 0 10px 12px; }
.con-opciones .diseno-pro-acciones { display: none; }
.con-opciones .diseno-pro.abierto .diseno-pro-acciones { display: grid; animation: opciones-aparecen .2s ease; }   /* debajo del dibujo, que sigue a la vista */
@keyframes opciones-aparecen { from { opacity: 0; transform: translateY(-4px); } }
.diseno-pro-acciones .boton { width: 100%; justify-content: center; }
.diseno-pro-manilla .diseno-pro-acciones { grid-template-columns: 1fr 1fr; }
@media (prefers-reduced-motion: reduce) { .diseno-pro-giro, .diseno-pro-cara svg { transition: none; } .con-opciones .diseno-pro.abierto .diseno-pro-acciones { animation: none; } }
.pro-ayuda { margin: 8px auto 0; font-size: .88rem; }
/* La ficha de un llavero Pro, en una ventana: la galería a la izquierda y la descripción, el precio y los botones a la derecha */
.dialogo-ficha { width: min(860px, calc(100% - 24px)); }
.ficha-rapida { display: grid; gap: 18px; }
@media (min-width: 720px) { .ficha-rapida { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start; } }
.ficha-rapida .galeria-principal { width: min(100%, 52vh); margin: 0 auto; }
.ficha-rapida .galeria-miniaturas { justify-content: center; }
.ficha-rapida-texto .modelo-tecnologia { justify-self: start; }
.ficha-rapida .galeria-miniatura { width: 64px; height: 64px; }
.ficha-rapida-texto { display: grid; gap: 8px; align-content: start; }
.ficha-rapida-texto p { margin: 0; }
.ficha-rapida-texto .precio-ficha { font-size: 2rem; }
.ficha-rapida-plan { font-size: .9rem; }
.ficha-rapida-texto .ficha-descripcion p + p { margin-top: 8px; }
.ficha-rapida-acciones { display: grid; gap: 8px; margin-top: 6px; }
@media (min-width: 420px) { .ficha-rapida-acciones { grid-template-columns: 1fr 1fr; } }
.ficha-rapida-acciones .boton { justify-content: center; }
.paginacion { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0 0 40px; flex-wrap: wrap; }
.paginacion-numero { color: var(--suave); font-size: .92rem; }
.paginacion [aria-disabled="true"] { opacity: .4; pointer-events: none; }
.filtro-lineas { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 8px 0 0; }
.filtro-linea { display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px; border-radius: 999px; background: var(--fondo-suave); color: var(--texto); font-size: .95rem; text-decoration: none; }
.filtro-linea:hover { background: var(--borde-suave); }
.filtro-linea[aria-current="page"] { background: var(--azul); color: #fff; }
.filtro-lineas + .disenos-pro { margin-top: 20px; }

/* ------------------------------------------------------------ Marca: encabezado, pie y portada (app/portada.php) */
body { overflow-x: clip; }
.visualmente-oculto { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); border: 0; white-space: nowrap; }
.boton { font-weight: 500; }

/* Encabezado */
.menu { flex-wrap: nowrap; gap: 16px; }
.menu-cuenta { display: flex; align-items: center; gap: 18px; }
.menu-activar { padding: 7px 14px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 35%); white-space: nowrap; }
.menu-activar:hover { background: rgb(255 255 255 / 10%); }
.menu .enlace { color: #fff; }
.boton-comprar { min-height: 38px; font-weight: 600; background: linear-gradient(180deg, #0a72ee, #0659cf); box-shadow: 0 4px 16px rgb(8 123 255 / 40%); }
.barra .boton-carrito { background: rgb(255 255 255 / 12%); color: #fff; }
.menu-movil { display: none; position: relative; }
.menu-movil summary { display: grid; gap: 4px; align-content: center; justify-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgb(255 255 255 / 12%); cursor: pointer; list-style: none; }
.menu-movil summary::-webkit-details-marker { display: none; }
.menu-movil summary span { display: block; width: 16px; height: 2px; border-radius: 2px; background: #fff; }
.menu-movil-lista { position: absolute; top: calc(100% + 10px); right: 0; z-index: 30; display: grid; gap: 2px; min-width: 240px; padding: 10px; border-radius: 16px; background: var(--noche); box-shadow: 0 18px 40px rgb(3 10 26 / 45%), inset 0 0 0 1px rgb(255 255 255 / 12%); }
.menu-movil-lista a, .menu-movil-lista .enlace { display: block; padding: 11px 12px; border-radius: 10px; font-size: .98rem; box-shadow: none; white-space: normal; }
.menu-movil-lista a:active { background: rgb(255 255 255 / 10%); }
@media (max-width: 860px) {
  .menu-cuenta { display: none; }
  .menu-movil { display: block; }
  .menu { gap: 8px; }
}

/* Pie */
.contenido:has(+ .pie-marca), .contenido { padding-bottom: 56px; }
.pie-marca { background: var(--noche); color: rgb(255 255 255 / 78%); font-size: .92rem; padding: 44px 0 90px; }
.pie-marca-interior { display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.pie-marca h2 { margin: 0 0 10px; color: #fff; font-size: .95rem; font-weight: 600; letter-spacing: 0; }
.pie-marca a:not(.marca) { display: flex; align-items: center; gap: 8px; min-height: 32px; color: rgb(255 255 255 / 78%); }
.pie-marca a:hover { color: #fff; }
.pie-marca .pie-enlaces { display: block; margin: 0; text-align: left; }
.pie-marca a.marca { color: #fff; }
.pie-marca-logo p { margin: 8px 0 0; }
.pie-marca-derechos { margin: 26px auto 0; padding-top: 18px; color: rgb(255 255 255 / 55%); font-size: .82rem; }
.pie-marca-derechos::before { content: ""; display: block; margin-bottom: 18px; border-top: 1px solid rgb(255 255 255 / 12%); }

/* Portada: más ancha que las demás páginas */
body:has(.hero-marca) .contenedor { max-width: 1240px; }
.contenido:has(.hero-marca) { padding-top: 0; }
.hero-marca { margin-inline: calc(50% - 50vw); padding: 26px 0 14px; color: #fff;
  background: radial-gradient(60% 34% at 50% 44%, rgb(8 123 255 / 26%), transparent 72%), linear-gradient(180deg, var(--noche) 0%, var(--noche) 58%, #0d2d63 78%, var(--fondo-suave) 100%); }
.hero-marca-cabecera { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 40px; max-width: 1240px; margin: 0 auto 22px; padding: 0 20px; }
.hero-marca h1 { margin: 0; font-size: clamp(1.45rem, 2.7vw, 2.15rem); font-weight: 700; letter-spacing: -.025em; color: #fff; }
.hero-marca-lema { margin: 4px 0 0; color: var(--cian); font-size: clamp(1rem, 1.5vw, 1.15rem); }
.hero-marca-sellos { display: flex; gap: 0; margin: 0; padding: 0; list-style: none; }
.hero-marca-sellos li { display: grid; justify-items: center; gap: 4px; padding: 0 20px; font-size: .86rem; font-weight: 500; text-align: center; white-space: nowrap; }
.hero-marca-sellos li + li { border-left: 1px solid rgb(255 255 255 / 20%); }
.hero-marca-sellos .icono { width: 26px; height: 26px; color: #fff; }
@media (max-width: 620px) {
  .hero-marca-sellos { width: 100%; justify-content: space-between; }
  .hero-marca-sellos li { flex: 1; padding: 0 4px; font-size: .72rem; white-space: normal; }
  .hero-marca-sellos .icono { width: 22px; height: 22px; }
}

/* Carrusel principal: las cinco diapositivas se escalan juntas con su ancho (--ancho) */
.carrusel-principal { --ancho: min(84vw, 380px); --paso: calc(var(--ancho) + 6px); position: relative; }
.carrusel-escenario { position: relative; height: calc(var(--ancho) * 1.42); touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.diapositiva { --x: 0; --escala: 1; --fondo-1: #0c2f70; --fondo-2: var(--noche); --luz-1: rgb(8 123 255 / 58%); --luz-2: rgb(0 213 242 / 26%);
  container-type: inline-size; position: absolute; top: 0; left: 50%; width: var(--ancho); height: 100%; margin-left: calc(var(--ancho) / -2); overflow: hidden; border-radius: 26px; color: #fff;
  background: radial-gradient(70% 46% at 88% 62%, var(--luz-1), transparent 72%), radial-gradient(62% 40% at 4% 96%, var(--luz-2), transparent 72%), linear-gradient(168deg, var(--fondo-1), var(--fondo-2) 78%);
  box-shadow: 0 22px 50px rgb(3 10 26 / 42%), inset 0 0 0 1px rgb(255 255 255 / 14%);
  transform: translate3d(calc(var(--x) * var(--paso) + var(--arrastre, 0px)), 0, 0) scale(var(--escala));
  transition: transform .75s cubic-bezier(.22, .8, .26, 1), opacity .5s ease; }
.diapositiva::after { content: ""; position: absolute; inset: 0; z-index: 4; background: rgb(7 21 45 / 42%); opacity: 0; transition: opacity .5s ease; pointer-events: none; }
.diapositiva[data-pos="0"] { z-index: 5; }
.diapositiva[data-pos="1"], .diapositiva[data-pos="-1"] { --escala: .92; z-index: 4; cursor: pointer; }
.diapositiva[data-pos="1"] { --x: 1; }
.diapositiva[data-pos="-1"] { --x: -1; }
.diapositiva[data-pos="2"], .diapositiva[data-pos="-2"] { --escala: .84; z-index: 3; opacity: 0; cursor: pointer; }
.diapositiva[data-pos="2"] { --x: 2; }
.diapositiva[data-pos="-2"] { --x: -2; }
.diapositiva:not([data-pos="0"])::after { opacity: 1; }
.arrastrando .diapositiva { transition: none; }
.diapositiva.salta { transition: none; animation: diapositiva-aparece .55s ease both; }
@keyframes diapositiva-aparece { from { opacity: 0; } }
.diapositiva-funciona { --fondo-1: #0a4a5e; --luz-1: rgb(0 213 242 / 46%); --luz-2: rgb(8 123 255 / 30%); }
.diapositiva-redes { --fondo-1: #4a1a78; --luz-1: rgb(236 72 153 / 46%); --luz-2: rgb(8 123 255 / 34%); }
.diapositiva-proteccion { --fondo-1: #5a1630; --luz-1: rgb(248 72 72 / 38%); --luz-2: rgb(8 123 255 / 30%); }
.diapositiva-negocios { --fondo-1: #6a3d0c; --fondo-2: #16130f; --luz-1: rgb(245 158 11 / 46%); --luz-2: rgb(239 108 26 / 26%); }
.diapositiva-texto { position: relative; z-index: 2; padding: 7.5cqw 7.5cqw 0; }
.diapositiva h2 { margin: 0 0 .32em; color: #fff; font-size: 8.5cqw; font-weight: 700; line-height: 1.08; letter-spacing: -.028em; text-wrap: balance; }
.diapositiva p { margin: 0; color: rgb(255 255 255 / 92%); font-size: 5.1cqw; line-height: 1.26; text-wrap: balance; }
.diapositiva .acento { color: var(--cian); font-weight: 600; }
.diapositiva-boton { position: absolute; left: 7.5cqw; bottom: 6.6cqw; z-index: 3; display: inline-flex; align-items: center; gap: .45em; min-height: 44px; padding: 0 1.3em; border-radius: 999px; color: #fff; font-size: clamp(14px, 4.4cqw, 17px); font-weight: 600; white-space: nowrap;
  background: rgb(7 21 45 / 90%); box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 78%), 0 6px 18px rgb(3 10 26 / 40%); transition: background .2s, transform .15s; }
.diapositiva-boton:hover { background: var(--noche); text-decoration: none; transform: translateY(-1px); }
.diapositiva-boton .icono { width: 1.05em; height: 1.05em; }
.diapositiva-presentacion .diapositiva-boton { background: linear-gradient(180deg, #0a72ee, #0659cf); box-shadow: 0 6px 20px rgb(8 123 255 / 45%); }
.diapositiva-escena { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.diapositiva-escena::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 30%; background: linear-gradient(180deg, transparent, rgb(5 12 28 / 62%)); }
.escena-pieza { position: absolute; z-index: 2; display: block; --fondo-suave: rgb(7 21 45 / 70%); filter: drop-shadow(0 3cqw 4cqw rgb(0 0 0 / 45%)); }
.escena-pieza svg { display: block; width: 100%; height: auto; }

/* El celular de las escenas */
.telefono { position: absolute; z-index: 1; width: 45cqw; height: 92cqw; padding: 1.3cqw; border-radius: 7.4cqw; background: linear-gradient(145deg, #39465f, #0a1222 42%, #1b2640); box-shadow: 0 5cqw 10cqw rgb(0 0 0 / 50%), inset 0 0 0 .35cqw rgb(255 255 255 / 20%); }
.telefono-isla { position: absolute; z-index: 2; top: 2.7cqw; left: 50%; width: 12cqw; height: 3cqw; margin-left: -6cqw; border-radius: 99px; background: #05080f; }
.telefono-pantalla { display: flex; flex-direction: column; align-items: center; height: 100%; overflow: hidden; padding: 9cqw 2.6cqw 0; border-radius: 6.3cqw; background: linear-gradient(180deg, #fff, var(--fondo-suave)); color: var(--noche); font-size: 2.8cqw; line-height: 1.2; text-align: center; }
.pantalla-avatar { width: 11.5cqw; height: 11.5cqw; margin-bottom: 1.6cqw; }
.pantalla-avatar img { display: block; width: 100%; height: 100%; }
.pantalla-titulo { font-size: 1.42em; font-weight: 700; letter-spacing: -.02em; }
.pantalla-subtitulo { margin-top: .25em; color: var(--suave); font-size: .92em; }
.pantalla-lista { display: grid; gap: 1.5cqw; width: 100%; margin-top: 3cqw; }
.pantalla-boton { display: flex; align-items: center; gap: 1.8cqw; padding: 1.7cqw 2cqw; border-radius: 2.8cqw; background: #fff; box-shadow: 0 .5cqw 1.8cqw rgb(7 21 45 / 12%); font-size: 1.08em; font-weight: 600; text-align: left; }
.pantalla-icono .icono { display: block; width: 5cqw; height: 5cqw; }
.pantalla-listo, .pantalla-alerta { display: grid; place-items: center; width: 14cqw; height: 14cqw; margin: 2cqw 0 2cqw; border-radius: 50%; background: #dff8e8; color: #128a45; }
.pantalla-listo .icono, .pantalla-alerta .icono { width: 8cqw; height: 8cqw; }
.pantalla-alerta { background: #ffe5e5; color: #d32626; }
.pantalla-pasos { display: grid; gap: 1.4cqw; width: 100%; margin-top: 3.4cqw; }
.pantalla-pasos span { padding: 1.7cqw; border-radius: 2.6cqw; background: var(--azul-suave); color: var(--azul); font-size: 1.08em; font-weight: 600; }
.pantalla-datos { display: grid; gap: 1.4cqw; width: 100%; margin-top: 3cqw; text-align: left; font-size: 1.04em; }
.pantalla-datos span { padding: 1.5cqw 2cqw; border-radius: 2.4cqw; background: #fff; box-shadow: 0 .5cqw 1.8cqw rgb(7 21 45 / 10%); }
.pantalla-datos b { display: block; color: var(--suave); font-size: .82em; font-weight: 500; }
.pantalla-llamar { display: flex; align-items: center; justify-content: center; gap: 1.4cqw; width: 100%; margin-top: 2.4cqw; padding: 1.9cqw; border-radius: 99px; background: #d32626; color: #fff; font-size: 1.1em; font-weight: 600; }
.pantalla-llamar .icono { width: 4.4cqw; height: 4.4cqw; }
.ondas-nfc { position: absolute; z-index: 3; color: var(--cian); }
.ondas-nfc path { animation: onda-nfc 1.8s ease-in-out infinite; }
.ondas-nfc path:nth-child(2) { animation-delay: .2s; }
.ondas-nfc path:nth-child(3) { animation-delay: .4s; }
@keyframes onda-nfc { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }

/* Cada escena */
.diapositiva-presentacion .telefono { right: 4cqw; top: 53cqw; transform: rotate(7deg); }
.diapositiva-presentacion .pieza-principal { left: 3cqw; top: 58cqw; width: 54cqw; transform: rotate(-9deg); }
.diapositiva-funciona .telefono { right: 5cqw; top: 52cqw; transform: rotate(4deg); }
.diapositiva-funciona .pieza-principal { left: 4cqw; top: 62cqw; width: 44cqw; transform: rotate(-14deg); }
.diapositiva-funciona .ondas-llavero { left: 40cqw; top: 76cqw; width: 14cqw; }
.diapositiva-redes .telefono { right: -3cqw; top: 46cqw; transform: rotate(8deg); }
.diapositiva-redes .pieza-izquierda { left: -2cqw; top: 67cqw; width: 37cqw; transform: rotate(-11deg); z-index: 3; }
.diapositiva-redes .pieza-centro { left: 23cqw; top: 73cqw; width: 37cqw; transform: rotate(2deg); z-index: 4; }
.diapositiva-redes .pieza-derecha { left: 50cqw; top: 75cqw; width: 37cqw; transform: rotate(10deg); z-index: 5; }
.diapositiva-proteccion .telefono { right: 4cqw; top: 57cqw; transform: rotate(5deg); }
.diapositiva-proteccion .pieza-principal { left: 3cqw; top: 66cqw; width: 50cqw; transform: rotate(-10deg); }
.diapositiva-negocios .telefono { right: 4cqw; top: 57cqw; transform: rotate(5deg); }
.diapositiva-negocios .pieza-principal { left: 3cqw; top: 66cqw; width: 50cqw; transform: rotate(-10deg); }

/* Controles del carrusel */
.carrusel-flecha { position: absolute; top: calc(var(--ancho) * .71 - 26px); z-index: 8; display: grid; place-items: center; width: 52px; height: 52px; border: 0; border-radius: 50%; background: rgb(7 21 45 / 88%); color: #fff; box-shadow: 0 8px 24px rgb(3 10 26 / 45%), inset 0 0 0 1px rgb(255 255 255 / 22%); cursor: pointer; transition: background .2s, transform .15s; }
.carrusel-flecha:hover { background: var(--azul); transform: scale(1.05); }
.carrusel-flecha .icono { width: 24px; height: 24px; }
.carrusel-flecha-anterior { left: max(10px, calc(50% - 680px)); }
.carrusel-flecha-siguiente { right: max(10px, calc(50% - 680px)); }
.carrusel-controles { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 10px; }
.carrusel-puntos-principal { display: flex; }
.carrusel-punto { display: grid; place-items: center; width: 28px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; }
.carrusel-punto::before { content: ""; width: 10px; height: 10px; border-radius: 99px; background: rgb(7 21 45 / 26%); transition: width .3s, background .3s; }
.carrusel-punto[aria-current="true"]::before { width: 22px; background: var(--azul); }
.carrusel-pausa { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--noche); cursor: pointer; }
.carrusel-pausa .icono { width: 18px; height: 18px; }
.carrusel-flecha:focus-visible, .carrusel-punto:focus-visible, .carrusel-pausa:focus-visible, .diapositiva-boton:focus-visible, .categoria-marca:focus-visible { outline: 3px solid var(--cian); outline-offset: 2px; }
@media (max-width: 719px) { .carrusel-flecha { display: none; } }
@media (min-width: 720px) {
  .carrusel-principal { --ancho: 330px; --paso: 300px; }
  .diapositiva[data-pos="1"], .diapositiva[data-pos="-1"] { --escala: .84; }
  .diapositiva[data-pos="2"], .diapositiva[data-pos="-2"] { --escala: .7; opacity: 1; }
  .diapositiva[data-pos="2"] { --x: 1.72; }
  .diapositiva[data-pos="-2"] { --x: -1.72; }
}
@media (min-width: 1200px) { .carrusel-principal { --ancho: 372px; --paso: 338px; } }
@media (min-width: 1600px) { .carrusel-principal { --ancho: 410px; --paso: 400px; } }
@media (prefers-reduced-motion: reduce) {
  .diapositiva, .diapositiva::after, .carrusel-punto::before { transition: none; }
  .diapositiva.salta, .ondas-nfc path { animation: none; }
}
@media (scripting: none) {  /* sin JavaScript: una fila que se desliza con el dedo */
  .carrusel-escenario { display: flex; gap: 12px; height: auto; padding: 0 20px; overflow-x: auto; scroll-snap-type: x mandatory; }
  .diapositiva { position: relative; left: 0; flex: 0 0 var(--ancho); height: calc(var(--ancho) * 1.42); margin: 0; transform: none; opacity: 1 !important; scroll-snap-align: center; }
  .diapositiva::after, .carrusel-flecha, .carrusel-controles { display: none; }
}

/* Tres categorías */
.categorias-marca { display: grid; gap: 14px; margin: 18px 0 16px; }
.categoria-marca { display: grid; grid-template-columns: 40% 1fr; align-items: center; gap: 6px; min-height: 186px; padding: 16px 22px 16px 10px; border-radius: 22px; color: var(--noche); box-shadow: inset 0 0 0 1px rgb(8 123 255 / 16%); transition: transform .2s, box-shadow .2s; }
.categoria-marca:hover { text-decoration: none; transform: translateY(-3px); box-shadow: 0 16px 34px rgb(7 21 45 / 14%), inset 0 0 0 1px rgb(8 123 255 / 32%); }
.categoria-personal { background: linear-gradient(135deg, #f1f7ff, #dcebff); }
.categoria-proteccion { background: linear-gradient(135deg, #eef3ff, #d7e4fb); }
.categoria-negocios { background: linear-gradient(135deg, #fff5e6, #ffe2b9); box-shadow: inset 0 0 0 1px rgb(217 119 6 / 22%); }
.categoria-imagen { display: block; }
.categoria-imagen .escena-pieza { position: static; --fondo-suave: transparent; filter: drop-shadow(0 12px 14px rgb(7 21 45 / 24%)); transform: rotate(-7deg); }
.categoria-marca h2 { margin: 0 0 4px; color: var(--noche); font-size: clamp(1.6rem, 2.6vw, 2.05rem); font-weight: 700; letter-spacing: -.025em; }
.categoria-descripcion { margin: 0 0 10px; color: #33445f; font-size: .98rem; line-height: 1.32; }
.categoria-boton { display: inline-flex; align-items: center; gap: 6px; color: var(--enlace); font-weight: 600; }
.categoria-negocios .categoria-boton { color: #9a4f05; }
.categoria-boton .icono { width: 18px; height: 18px; }
@media (min-width: 900px) { .categorias-marca { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Franja: cuatro beneficios y los dos precios */
.franja-marca { display: grid; gap: 14px; margin: 0 0 8px; }
.franja-beneficios { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 8px; margin: 0; padding: 20px 12px; border-radius: 20px; background: #fff; list-style: none; box-shadow: 0 10px 30px rgb(7 21 45 / 8%), inset 0 0 0 1px var(--borde-suave); }
.franja-beneficios li { display: grid; justify-items: center; align-content: center; gap: 8px; padding: 0 8px; color: var(--noche); font-size: .95rem; font-weight: 600; line-height: 1.2; text-align: center; }
.franja-beneficios .icono { width: 40px; height: 40px; stroke-width: 1.5; }
.franja-precios { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.franja-precio { position: relative; display: grid; align-content: center; justify-items: center; gap: 2px; padding: 20px 12px 16px; border-radius: 18px; background: var(--fondo-suave); color: var(--noche); text-align: center; box-shadow: inset 0 0 0 1px var(--borde); transition: transform .2s, box-shadow .2s; }
.franja-precio:hover { text-decoration: none; transform: translateY(-2px); box-shadow: 0 12px 26px rgb(7 21 45 / 14%), inset 0 0 0 1px var(--borde); }
.franja-precio-destacado { background: linear-gradient(180deg, #f1f7ff, #dcebff); box-shadow: inset 0 0 0 2px var(--electrico); }
.franja-precio-destacado:hover { box-shadow: 0 12px 26px rgb(8 123 255 / 24%), inset 0 0 0 2px var(--electrico); }
.franja-insignia { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); padding: 3px 11px; border-radius: 999px; background: var(--azul); color: #fff; font-size: .74rem; font-weight: 600; white-space: nowrap; }
.franja-nombre { font-size: 1.02rem; font-weight: 600; }
.franja-valor { font-size: clamp(1.6rem, 2.5vw, 1.95rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.15; }
.franja-texto { color: #33445f; font-size: .8rem; line-height: 1.25; }
.franja-precio:focus-visible { outline: 3px solid var(--cian); outline-offset: 2px; }
@media (min-width: 620px) { .franja-beneficios { grid-template-columns: repeat(4, minmax(0, 1fr)); } .franja-beneficios li + li { border-left: 1px solid var(--borde); } }
@media (min-width: 1000px) { .franja-marca { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: stretch; } .franja-beneficios li { font-size: 1rem; } }

/* Planes, catálogo y demás secciones de la portada */
.planes-marca .planes-2 { max-width: 860px; }
.planes-marca .paquete { background-color: var(--fondo-suave); }
.planes-marca .paquete-destacado { background-color: var(--noche); }
.paquete-destacado .insignia { background: linear-gradient(90deg, var(--electrico), var(--cian)); color: var(--noche); font-weight: 700; }
.planes-comparar a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.planes-comparar .icono { width: 18px; height: 18px; }
.destacados-todos { margin: 18px 0 0; }
#planes, #catalogo, #como-funciona, #negocios, #preguntas { scroll-margin-top: 76px; }
.confianza-legal { text-align: center; font-size: .9rem; }

/* Preguntas frecuentes */
.preguntas-lista { display: grid; gap: 10px; max-width: 800px; margin: 0 auto 20px; }
.pregunta-marca { border-radius: 16px; background: var(--fondo-suave); }
.pregunta-marca summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 56px; padding: 12px 18px; font-weight: 600; cursor: pointer; list-style: none; }
.pregunta-marca summary::-webkit-details-marker { display: none; }
.pregunta-marca summary .icono { flex: none; width: 20px; height: 20px; color: var(--azul); transition: transform .2s; }
.pregunta-marca[open] summary .icono { transform: rotate(45deg); }
.pregunta-marca p { margin: 0; padding: 0 18px 16px; color: #33445f; }

/* Llamado final */
.cta-marca { margin: 32px 0 24px; padding: 44px 24px; border-radius: 26px; text-align: center; color: #fff; background: radial-gradient(70% 90% at 80% 10%, rgb(8 123 255 / 42%), transparent 70%), radial-gradient(50% 70% at 10% 100%, rgb(0 213 242 / 20%), transparent 70%), var(--noche); }
.cta-marca h2 { margin: 0 0 6px; color: #fff; font-size: clamp(1.7rem, 4vw, 2.5rem); font-weight: 700; letter-spacing: -.028em; }
.cta-marca p { margin: 0 0 18px; color: rgb(255 255 255 / 86%); }
.cta-marca .cta-marca-cuenta { margin: 16px 0 0; font-size: .92rem; }
.cta-marca-cuenta a { color: var(--cian); }

/* ---------------------------------------------------------------- Fotos reales, fichas de producto y secciones de la portada
   Las fotos van en assets/productos/ (app/medios.php y docs/GUIA-FOTOS.md). Nunca se deforman: se ven enteras, en un recuadro de la misma proporción. */
.foto-real { display: block; width: 100%; height: 100%; }
.foto-real img { display: block; width: 100%; height: 100%; object-fit: contain; }
.galeria-vista > img, .galeria-miniatura img { object-fit: contain; }
.galeria-vista > .foto-real { position: absolute; inset: 0; }
.galeria-miniatura .foto-real img { border-radius: 12px; }
.galeria-nota { position: absolute; left: 12px; bottom: 10px; padding: 3px 10px; border-radius: 999px; background: rgb(255 255 255 / 86%); color: var(--suave); font-size: .74rem; letter-spacing: 0; }
.destacado-dibujo .foto-real { height: 150px; }
.destacado-dibujo .foto-real img { border-radius: 12px; }
.diseno-pro-cara .foto-real img { border-radius: 12px; transition: transform .3s ease; }
.diseno-pro:hover .diseno-pro-cara .foto-real img { transform: scale(1.18); }

.diseno-pro-datos { display: grid; gap: 1px; margin: 0; padding: 0 12px 14px; text-align: center; font-size: .9rem; line-height: 1.25; }
.diseno-pro-datos span { color: var(--texto); font-weight: 600; }
.diseno-pro-datos strong { font-weight: 500; color: var(--suave); }

.plan-explicado { max-width: 680px; margin: 10px auto 0; color: var(--suave); }

.ficha-texto .etiqueta { margin-bottom: 4px; }
.ficha-plan { margin: 0; color: var(--enlace); font-weight: 600; }
.precio-ficha small { font-size: .85rem; font-weight: 500; letter-spacing: 0; color: var(--suave); }
.ficha-renovacion { margin: 2px 0 10px; color: var(--suave); font-size: .95rem; }
.ficha-acciones { margin: 16px 0 12px; }
.ficha-acciones .boton-grande { flex: 1 1 220px; justify-content: center; }
.ficha-subtitulo { margin: 22px 0 8px; font-size: 1.1rem; }
.ficha-otra-opcion { margin-top: 20px; padding: 16px 18px; border-radius: var(--radio); background: var(--fondo-suave); }
.ficha-otra-opcion .ficha-subtitulo { margin-top: 0; }
.ficha-otra-opcion p { margin: 0 0 10px; color: var(--suave); font-size: .95rem; }
.ficha-datos { display: grid; margin: 0; border-top: 1px solid var(--borde-suave); }
.ficha-datos > div { display: grid; grid-template-columns: minmax(96px, 30%) 1fr; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--borde-suave); font-size: .92rem; }
.ficha-datos dt { color: var(--suave); }
.ficha-datos dd { margin: 0; }
.ficha-rapida-texto .ficha-datos { margin-top: 6px; }

/* El espacio de un video: 16:9 siempre, con el archivo o mientras llega. */
.video-marco { position: relative; margin: 0; overflow: hidden; aspect-ratio: 16 / 9; border-radius: var(--radio-grande); background: linear-gradient(135deg, var(--noche) 0%, #0b2a57 62%, #0a4a8f 100%); }
.video-marco video { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; }
.video-escena { position: absolute; inset: 0; display: grid; place-items: center; }
.video-lienzo { container-type: inline-size; position: relative; width: 50%; aspect-ratio: 1; }
.video-lienzo .telefono { right: 6cqw; top: 4cqw; transform: rotate(4deg); }
.video-lienzo .pieza-principal { left: 0; top: 24cqw; width: 50cqw; transform: rotate(-12deg); }
.video-lienzo .ondas-llavero { left: 42cqw; top: 36cqw; width: 14cqw; }
.video-piezas { display: flex; justify-content: center; gap: 4%; width: 72%; --fondo-suave: transparent; filter: drop-shadow(0 10px 14px rgb(0 0 0 / 40%)); }
.video-piezas svg { width: 31%; height: auto; }
.video-aviso { position: absolute; left: 14px; top: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: rgb(255 255 255 / 16%); color: #fff; font-size: .8rem; letter-spacing: 0; }
.video-aviso .icono { width: 14px; height: 14px; }

.demostracion-contenido { display: grid; gap: 24px; align-items: center; }
@media (min-width: 900px) { .demostracion-contenido { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 36px; } }
.demostracion-pasos { display: grid; gap: 12px; margin: 0 0 18px; padding: 0; list-style: none; counter-reset: momento; }
.demostracion-pasos li { position: relative; display: grid; gap: 1px; padding-left: 42px; counter-increment: momento; }
.demostracion-pasos li::before { content: counter(momento); position: absolute; left: 0; top: 2px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--azul); color: #fff; font-weight: 600; font-size: .9rem; }
.demostracion-pasos span { color: var(--suave); font-size: .93rem; line-height: 1.35; }

.hechos-contenido { display: grid; gap: 24px; align-items: start; }
@media (min-width: 960px) {
  .hechos-contenido { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 32px; }
  .hechos-video { position: sticky; top: 92px; }
}
.proceso-pasos { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.proceso-pasos li { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border-radius: var(--radio); background: var(--fondo-suave); }
.proceso-icono { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--azul-suave); color: var(--azul); }
.proceso-icono .icono { width: 21px; height: 21px; }
.proceso-pasos h3 { margin: 0 0 4px; font-size: 1.05rem; }
.proceso-pasos p { margin: 0; color: var(--suave); font-size: .95rem; line-height: 1.4; }
.proceso-numero { color: var(--enlace); }
.hechos-cuidado { margin: 14px 0 0; color: var(--suave); font-size: .92rem; }

.negocios-ejemplos { display: grid; gap: 16px; }
@media (min-width: 860px) { .negocios-ejemplos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.negocio-ejemplo { display: flex; flex-direction: column; gap: 6px; padding: 24px; border-radius: var(--radio); background: var(--noche); color: #fff; }
.negocio-ejemplo .necesidad-icono { background: rgb(0 213 242 / 14%); color: var(--cian); }
.negocio-ejemplo h3 { margin: 8px 0 2px; font-size: 1.25rem; }
.negocio-entrada { margin: 0 0 10px; color: #bcc9dd; font-size: .95rem; line-height: 1.4; }
.negocio-ejemplo ul { display: grid; margin: 0; padding: 0; list-style: none; }
.negocio-ejemplo li { display: grid; gap: 2px; padding: 11px 0; border-top: 1px solid rgb(255 255 255 / 13%); }
.negocio-ejemplo li span:not(.insignia) { color: #bcc9dd; font-size: .9rem; }
.negocio-ejemplo .insignia { justify-self: start; margin-top: 4px; background: rgb(8 123 255 / 26%); color: #c7e6ff; }
.negocios-nota { max-width: 680px; margin: 16px auto 20px; text-align: center; color: var(--suave); font-size: .95rem; }

.preguntas-grupos { display: grid; gap: 28px; max-width: 820px; margin: 0 auto; }
.preguntas-grupo h3 { margin: 0 0 10px; font-size: 1.1rem; color: var(--enlace); }
.preguntas-enlaces { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin: 24px 0 0; font-weight: 500; }
.preguntas-grupo .preguntas-lista { max-width: none; margin: 0; }
html { scroll-padding-top: 84px; }   /* los enlaces a #como-funciona, #negocios… no quedan debajo de la barra fija */
/* En celulares de 375 px el botón «Hacer pedido por WhatsApp» ensanchaba el formulario del carrito y los campos se salían
   de la ventana: la columna nunca pasa del ancho disponible y los botones de ancho completo pueden partir el texto. */
.formulario { grid-template-columns: minmax(0, 1fr); }
.boton-ancho { white-space: normal; text-align: center; line-height: 1.25; padding: 8px 16px; }
@media (max-width: 599px) { .ficha-producto .galeria-principal { aspect-ratio: 4 / 3; } }   /* en el celular, el precio y «Agregar al carrito» se ven sin bajar */
/* Combos de 3 (COMBOS de app/llaveros.php) */
.paquete .plan-combo { margin: 0 0 4px; font-size: .88rem; font-weight: 600; }
.combo-aviso { display: flex; gap: 8px; align-items: flex-start; max-width: 680px; margin: 14px auto 0; padding: 12px 16px; border-radius: var(--radio); background: var(--azul-suave); color: var(--texto); font-size: .95rem; text-align: left; }
.combo-aviso .icono { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--azul); }
.ficha-combo { margin: 0 0 10px; font-size: .95rem; }
.ficha-rapida-texto .ficha-combo { margin: 0; }
.plan-explicado-ficha { margin: 0 0 10px; color: var(--suave); font-size: .95rem; }
/* Cantidad de cada artículo en el carrito: − / campo / + */
.carrito-cantidad { display: inline-flex; align-items: center; margin-top: 6px; border: 1px solid var(--borde); border-radius: 999px; overflow: hidden; background: var(--superficie); }
.carrito-cantidad button { width: 38px; height: 34px; padding: 0; border: 0; background: none; color: var(--azul); font-family: inherit; font-size: 1.2rem; font-weight: 600; line-height: 1; cursor: pointer; }
.carrito-cantidad button:disabled { color: var(--borde); cursor: default; }
.carrito-cantidad button:focus-visible { outline: 2px solid var(--azul); outline-offset: -2px; }
.carrito-lista .carrito-cantidad input[type="number"][inputmode] { width: 46px; min-height: 0; height: 34px; padding: 0; border: 0; border-inline: 1px solid var(--borde-suave); border-radius: 0; background: none; text-align: center; font-size: 16px; -moz-appearance: textfield; appearance: textfield; }
.carrito-cantidad input::-webkit-outer-spin-button, .carrito-cantidad input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ---------------------------------------------------------------- LlaviYo vende solo LlaviYo Pro (10 de noviembre de 2026)
   Una sola tarjeta de precio, las funciones incluidas, el recuadro de 3DTuyo (tienda hermana) y la ayuda. */
.planes-1 { grid-template-columns: minmax(0, 1fr); max-width: 520px; margin-inline: auto; }
.planes-marca .planes-1 { max-width: 520px; }
.recuadro-3dtuyo { display: grid; gap: 14px 24px; align-items: center; max-width: 860px; margin: 28px auto; padding: 20px 24px; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie); }
@media (min-width: 720px) { .recuadro-3dtuyo { grid-template-columns: 1fr auto; } }
.recuadro-3dtuyo h2 { margin: 0 0 6px; font-size: 1.15rem; }
.recuadro-3dtuyo p { margin: 0 0 4px; font-size: .95rem; }
.recuadro-3dtuyo .boton { justify-self: start; }
.preguntas-marca .recuadro-3dtuyo { margin-top: 24px; }
.detalle-pro { margin: 8px 0 32px; }
.funciones-incluidas { display: grid; gap: 10px; margin: 0 0 20px; padding: 0; list-style: none; }
@media (min-width: 640px) { .funciones-incluidas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .funciones-incluidas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.funciones-incluidas li { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--radio); background: var(--fondo-suave); }
.funcion-incluida-icono { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--azul-suave); color: var(--azul); }
.funcion-incluida-icono .icono { width: 20px; height: 20px; }
.funciones-incluidas strong { display: block; margin-bottom: 2px; }
.funciones-incluidas span:not(.funcion-incluida-icono) { color: var(--suave); font-size: .9rem; line-height: 1.35; }
.disenos-disponibles { display: grid; gap: 14px; align-items: center; }
@media (min-width: 720px) { .disenos-disponibles { grid-template-columns: 1fr auto; } }
.disenos-disponibles h3 { margin: 0 0 4px; }
.disenos-disponibles p { margin: 0; }
.ayuda h1 { margin-bottom: 4px; }
.ayuda-indice { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 14px 0 6px; font-weight: 600; }
.ayuda-guia { margin: 28px 0; }
.ayuda-guia h2 { font-size: 1.35rem; }
.ayuda-pasos { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; counter-reset: paso; }
.ayuda-pasos li { position: relative; display: grid; gap: 2px; padding: 14px 16px 14px 56px; border-radius: var(--radio); background: var(--fondo-suave); counter-increment: paso; }
.ayuda-pasos li::before { content: counter(paso); position: absolute; left: 16px; top: 14px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--azul); color: #fff; font-weight: 600; font-size: .9rem; }
.ayuda-pasos span { color: var(--suave); line-height: 1.45; }