/* Velvet — portada. CSS propio y autónomo: styles.css sigue sirviendo SOLO a los
   documentos legales, así que rehacer la portada no puede romperlos. */

:root {
  --bg: #0b0611;
  --bg-2: #140c20;
  --card: #1a1230;
  --accent: #e94560;
  --accent-2: #a06bd4;
  --text: #f4eff9;
  --dim: #b6aac9;
  --dim-2: #7e7396;
  --border: rgba(255, 255, 255, 0.09);
  --maxw: 1080px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
/* El corte del desbordamiento lateral tiene que estar en html Y en body: solo en
   body, los navegadores móviles siguen dejando arrastrar la página de lado. */
html { scroll-behavior: smooth; overflow-x: hidden; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  width: 100%;
}
/* Nada puede salirse por ancho fijo: ni una imagen ni una palabra larga. */
img, svg { max-width: 100%; }

a { color: inherit; text-decoration: none; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* La cabecera y el menú viven en header.css: son comunes a las cuatro páginas. */

/* ── Hero ───────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  padding: 74px 0 84px;
  overflow: hidden;
  /* El propio hero vira al morado de la sección siguiente en su tramo final.
     Sin esto, entre el desvanecido de la foto (que deja ver el negro) y el
     morado de "Así de fácil" quedaba una franja oscura de un dedo de ancho. */
  /* Transición MUY larga y con muchas paradas: si llega al morado de golpe, en
     el punto donde deja de cambiar se ve una línea (el ojo detecta el cambio de
     pendiente, aunque los colores sean casi iguales). Se nota sobre todo en el
     centro, donde el velo es más transparente y no la disimula. */
  background: linear-gradient(180deg,
    transparent 0%,
    transparent 30%,
    rgba(20, 12, 32, 0.10) 44%,
    rgba(20, 12, 32, 0.24) 56%,
    rgba(20, 12, 32, 0.42) 68%,
    rgba(20, 12, 32, 0.60) 78%,
    rgba(20, 12, 32, 0.76) 86%,
    rgba(20, 12, 32, 0.90) 93%,
    rgba(20, 12, 32, 0.97) 98%,
    var(--bg-2) 100%);
}
/* Aquí había un resplandor rosa y morado de cuando el hero no tenía foto. Con
   la foto detrás sobraba: se veía como un semicírculo rosa arriba a la izquierda. */
.hero-grid {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1.05fr 0.95fr;
  gap: 56px; align-items: center;
}

/* ── Fondo en bucle del hero ─────────────────────────────────────────
   Tres fotos encadenadas con zoom lento y fundido cruzado: parece un vídeo
   pero son 3 JPG de ~100 KB, sin reproductor ni descarga pesada. */
.hero-bg {
  position: absolute; inset: 0; z-index: 0; overflow: hidden;
  /* La máscara va AQUÍ y no en cada foto: las fotos llevan un zoom lento
     (transform: scale), y la máscara se escala con ellas — la zona transparente
     se salía de la vista y el corte volvía. El contenedor no se mueve. */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 44%, rgba(0,0,0,0.62) 66%, rgba(0,0,0,0.26) 83%, transparent 97%);
          mask-image: linear-gradient(180deg, #000 0%, #000 44%, rgba(0,0,0,0.62) 66%, rgba(0,0,0,0.26) 83%, transparent 97%);
}
.hero-bg .slide {
  position: absolute; inset: 0;
  /* Las fotos ya vienen recortadas en apaisado y centradas en la cara, así que
     aquí basta con centrar. Si al cambiarlas el encuadre no cuadra, el 2º valor
     es el único número que hay que tocar (menos = encuadra más arriba). */
  background-size: cover; background-position: 50% 42%;
  opacity: 0;
  animation: fundido 21s linear infinite, zoomlento 21s ease-in-out infinite;
  will-change: opacity, transform;
}
.hero-bg .slide:nth-child(1) { background-image: url("img/hero-1.jpg"); animation-delay: 0s, 0s; }
.hero-bg .slide:nth-child(2) { background-image: url("img/hero-2.jpg"); animation-delay: 7s, 7s; }
.hero-bg .slide:nth-child(3) { background-image: url("img/hero-3.jpg"); animation-delay: 14s, 14s; }

@keyframes fundido {
  0%   { opacity: 0; }
  4%   { opacity: 1; }
  29%  { opacity: 1; }
  36%  { opacity: 0; }
  100% { opacity: 0; }
}
/* Igual que `fundido` pero sin llegar a opacidad plena: en móvil la foto se
   queda a media transparencia para que el texto mande. */
@keyframes fundidoMovil {
  0%   { opacity: 0; }
  4%   { opacity: 0.5; }
  29%  { opacity: 0.5; }
  36%  { opacity: 0; }
  100% { opacity: 0; }
}
/* Zoom suave. Ojo: al ampliar se recorta más, y eso se comía la cara — por eso
   ahora sube menos (1.02 → 1.09) y el desplazamiento va hacia ABAJO, no arriba. */
@keyframes zoomlento {
  0%   { transform: scale(1.02) translate3d(0, 0, 0); }
  36%  { transform: scale(1.09) translate3d(-0.8%, 1%, 0); }
  100% { transform: scale(1.09) translate3d(-0.8%, 1%, 0); }
}

/* Velo: sin esto el texto no se lee. Más opaco a la izquierda (donde está el
   titular) y abierto a la derecha, que es donde se ve la foto. */
.hero-bg .veil {
  position: absolute; inset: 0;
  /* Solo el horizontal, para que se lea el texto. El fundido de abajo ya no se
     hace aquí: lo hace la máscara de la propia foto. */
  background: linear-gradient(100deg,
    rgba(11, 6, 17, 0.96) 0%,
    rgba(11, 6, 17, 0.90) 30%,
    rgba(11, 6, 17, 0.40) 48%,
    rgba(11, 6, 17, 0.10) 64%,
    rgba(11, 6, 17, 0.20) 84%,
    rgba(11, 6, 17, 0.36) 100%);
}

.badge {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 13px; border-radius: 999px;
  border: 1px solid rgba(233, 69, 96, 0.35);
  background: rgba(233, 69, 96, 0.10);
  color: #ffb3c0; font-size: 12.5px; font-weight: 700; letter-spacing: 0.4px;
}
.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

h1 {
  margin: 20px 0 16px;
  font-size: clamp(38px, 5.6vw, 61px);
  line-height: 1.06; letter-spacing: -1.4px; font-weight: 800;
}
.grad {
  background: linear-gradient(96deg, var(--accent), var(--accent-2) 78%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lead { font-size: 18px; color: var(--dim); max-width: 30em; }

/* Botones de tienda (aún sin publicar) */
.stores { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.store-btn {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 20px; border-radius: 14px;
  border: 1px solid var(--border); background: rgba(255, 255, 255, 0.045);
  cursor: default;
}
.store-btn .txt { display: flex; flex-direction: column; line-height: 1.25; }
.store-btn .small { font-size: 10.5px; color: var(--dim-2); letter-spacing: 0.3px; }
.store-btn .big { font-size: 15.5px; font-weight: 700; }
.store-btn svg { width: 22px; height: 22px; fill: var(--text); opacity: 0.92; }
.soon-note { margin-top: 14px; font-size: 13.5px; color: var(--dim-2); }

/* ── Maqueta de conversación ────────────────────────────────────────── */
/* Es el producto enseñado sin una sola imagen: todo son cajas y texto. */
.phone {
  position: relative; justify-self: center;
  width: 300px; padding: 11px;
  border-radius: 40px;
  /* Bisel: el marco no es un color plano sino un degradado en diagonal, como el
     aluminio de un móvil real — claro arriba-izquierda, oscuro abajo-derecha. */
  background: linear-gradient(145deg, #4a3768 0%, #2a1d3f 28%, #191128 62%, #0d0916 100%);
  border: 0;
  box-shadow:
    /* filo de luz en el canto superior y sombra en el inferior */
    0 1px 0 rgba(255, 255, 255, 0.16) inset,
    0 -1px 0 rgba(0, 0, 0, 0.55) inset,
    0 0 0 1px rgba(255, 255, 255, 0.07),
    /* Sombra de contacto y sombra ambiente, las dos negras. Sin halo de color:
       se probó y ensuciaba el fondo alrededor del móvil. */
    0 14px 30px rgba(0, 0, 0, 0.45),
    0 40px 90px rgba(0, 0, 0, 0.62);
}
.screen {
  position: relative;
  border-radius: 30px; overflow: hidden;
  background: linear-gradient(180deg, #150d22, #0e0817);
  display: flex; flex-direction: column; height: 510px;
}
/* Reflejo del cristal: una franja diagonal tenue, como cuando le da la luz. */
.screen::after {
  content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background: linear-gradient(122deg,
    rgba(255, 255, 255, 0.09) 0%,
    rgba(255, 255, 255, 0.045) 16%,
    transparent 34%,
    transparent 100%);
}
/* Cabecera del chat, calcada de la app: atrás, avatar con punto de "en línea",
   nombre y los iconos de armario, regalo y guardados. */
.chat-top {
  display: flex; align-items: center; gap: 8px;
  padding: 13px 12px 11px;
  border-bottom: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.025);
}
.chat-top .back { color: var(--accent); display: flex; }
.chat-top .back svg { width: 18px; height: 18px; }
.avatar { position: relative; width: 34px; height: 34px; flex-shrink: 0; }
.avatar img {
  width: 100%; height: 100%; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--accent);
}
.avatar .online {
  position: absolute; right: -1px; bottom: -1px;
  width: 10px; height: 10px; border-radius: 50%;
  background: #4ade80; border: 2px solid #150d22;
}
.who { flex: 1; min-width: 0; }
.chat-name { font-size: 14.5px; font-weight: 700; line-height: 1.2; }
.chat-status { font-size: 11px; color: #4ade80; }
.acts { display: flex; gap: 11px; color: var(--accent); }
.acts svg { width: 17px; height: 17px; }

/* Barra de relación */
.rel {
  display: flex; align-items: center; gap: 7px;
  padding: 8px 13px;
  font-size: 10px; color: var(--dim);
  border-bottom: 1px solid var(--border);
}
.rel-name { color: #ff8a5c; font-weight: 700; }
.rel-bar { flex: 1; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.10); overflow: hidden; }
.rel-bar i { display: block; height: 100%; width: 76%; background: linear-gradient(90deg, var(--accent), #ff8a5c); }
.rel-lv { font-weight: 700; color: var(--text); }
.rel-streak { color: #ffb37a; }

.msgs { flex: 1; padding: 16px 14px; display: flex; flex-direction: column; gap: 9px; overflow: hidden; }
.msg {
  max-width: 82%; padding: 9px 13px; font-size: 13.4px; line-height: 1.5;
  border-radius: 17px;
  animation: aparece 0.5s ease both;
}
.msg.her {
  align-self: flex-start;
  background: rgba(255, 255, 255, 0.07);
  border-bottom-left-radius: 5px;
}
.msg.me {
  align-self: flex-end;
  background: linear-gradient(135deg, var(--accent), #c9457f);
  border-bottom-right-radius: 5px;
}
.msg:nth-child(1) { animation-delay: 0.15s; }
.msg:nth-child(2) { animation-delay: 0.75s; }
.msg:nth-child(3) { animation-delay: 1.35s; }
.msg:nth-child(4) { animation-delay: 1.95s; }
.typing { align-self: flex-start; display: flex; gap: 4px; padding: 12px 14px; animation-delay: 2.5s; }
.typing i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--dim);
  display: inline-block; animation: rebote 1.3s infinite;
}
.typing i:nth-child(2) { animation-delay: 0.18s; }
.typing i:nth-child(3) { animation-delay: 0.36s; }
@keyframes aparece { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
@keyframes rebote { 0%, 60%, 100% { transform: none; opacity: 0.45; } 30% { transform: translateY(-4px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .msg, .typing { animation: none; opacity: 1; transform: none; }
  .typing i { animation: none; }
}

.chat-input {
  margin: 0 12px 13px; padding: 10px 15px;
  border-radius: 999px; background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border);
  font-size: 12.8px; color: var(--dim-2);
}

/* ── Secciones ──────────────────────────────────────────────────────── */
.section { padding: 76px 0; }
/* Fundido largo arriba y abajo: con una franja corta se nota una linea donde
   cambia el fondo. Con ~14% a cada lado el paso es imperceptible. */
.section.alt {
  /* Arriba TAMBIÉN funde, igual que abajo: el hero acaba en el fondo general
     (la foto se desvanece y deja ver el negro), así que si la sección empezara
     directamente en morado se vería el escalón. Ahora entra y sale del mismo
     color con el que empiezan y acaban sus vecinas. */
  /* Funde por los DOS lados: esta clase la usan varias secciones y la de
     "Sin lugar a dudas" viene después de un fondo negro. */
  background: linear-gradient(180deg,
    var(--bg) 0%,
    rgba(20, 12, 32, 0.5) 8%,
    var(--bg-2) 20%,
    var(--bg-2) 80%,
    rgba(20, 12, 32, 0.5) 92%,
    var(--bg) 100%);
}
/* Excepción: la que va pegada al hero. El hero ya termina en morado, así que
   esta arranca en morado y no vuelve a pasar por negro (si no, se veía una
   franja oscura entre los dos). */
.section.alt.tras-hero {
  background: linear-gradient(180deg,
    var(--bg-2) 0%,
    var(--bg-2) 80%,
    rgba(20, 12, 32, 0.5) 92%,
    var(--bg) 100%);
}
.section h2 {
  font-size: clamp(27px, 3.4vw, 37px); letter-spacing: -0.7px; line-height: 1.18;
  text-align: center; font-weight: 800;
}
.section .sub { text-align: center; color: var(--dim); margin: 13px auto 44px; max-width: 32em; }

.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(238px, 1fr)); gap: 17px; }
.feature {
  padding: 27px 24px; border-radius: 19px;
  background: rgba(255, 255, 255, 0.032);
  border: 1px solid var(--border);
  transition: transform 0.22s ease, border-color 0.22s ease;
}
.feature:hover { transform: translateY(-3px); border-color: rgba(233, 69, 96, 0.35); }
.feature .ico {
  width: 42px; height: 42px; border-radius: 12px;
  display: grid; place-items: center; margin-bottom: 15px;
  background: linear-gradient(135deg, rgba(233, 69, 96, 0.20), rgba(160, 107, 212, 0.20));
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.feature .ico svg { width: 21px; height: 21px; stroke: #ffc2cd; fill: none; stroke-width: 1.7; }
.feature h3 { font-size: 17px; margin-bottom: 7px; font-weight: 700; }
.feature p { color: var(--dim); font-size: 14.6px; }

/* Pasos */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: 30px; }
.step { text-align: center; }
.step .num {
  width: 40px; height: 40px; margin: 0 auto 15px;
  display: grid; place-items: center; border-radius: 50%;
  font-weight: 800; font-size: 16px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
}
.step h3 { font-size: 16.5px; margin-bottom: 7px; }
.step p { color: var(--dim); font-size: 14.6px; }

/* Capturas reales de la app */
.shots {
  display: flex; flex-wrap: wrap; gap: 34px;
  justify-content: center; align-items: flex-start;
}
.shot { width: 268px; text-align: center; }
.shot img {
  width: 100%; height: auto; display: block;
  border-radius: 26px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  /* Profundidad en capas: filo de luz arriba, sombra de contacto corta y sombra
     ambiente larga, mas un halo de color muy tenue. Una sola sombra plana hacia
     que las capturas pareciesen pegadas. */
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.10) inset,
    0 6px 14px rgba(0, 0, 0, 0.45),
    0 30px 70px rgba(0, 0, 0, 0.55),
    0 18px 60px rgba(233, 69, 96, 0.13);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.shot:hover img {
  transform: translateY(-6px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.14) inset,
    0 10px 20px rgba(0, 0, 0, 0.5),
    0 44px 96px rgba(0, 0, 0, 0.65),
    0 24px 80px rgba(233, 69, 96, 0.20);
}
.shot figcaption { margin-top: 15px; font-size: 13.8px; color: var(--dim); }
/* Ligero abanico en escritorio: dos capturas rectas y centradas quedan planas */
@media (min-width: 881px) {
  .shot:first-child img { transform: rotate(-2deg); }
  .shot:last-child img  { transform: rotate(2deg); }
  .shot:hover img { transform: translateY(-6px) rotate(0deg); }
}

/* Transparencia */
.trust { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 15px; }
.trust-item {
  padding: 21px 22px; border-radius: 15px;
  border: 1px solid var(--border); background: rgba(255, 255, 255, 0.028);
}
.trust-item strong { display: block; margin-bottom: 5px; font-size: 15.4px; }
.trust-item span { color: var(--dim); font-size: 14.2px; }

/* Preguntas frecuentes. Con <details>: se despliegan sin una línea de JavaScript
   y los buscadores leen la respuesta aunque esté cerrada. El atributo name="faq"
   en el HTML las hace excluyentes (al abrir una se cierra la otra), también nativo. */
.faq { max-width: 780px; margin: 0 auto; }
.faq details {
  position: relative; overflow: hidden;
  border: 1px solid var(--border); border-radius: 16px;
  background: rgba(255, 255, 255, 0.028);
  margin-bottom: 12px;
  transition: border-color 0.3s ease, background 0.3s ease, transform 0.3s ease;
}
.faq details:hover { border-color: rgba(233, 69, 96, 0.30); background: rgba(255, 255, 255, 0.045); }
.faq details[open] {
  border-color: rgba(233, 69, 96, 0.40);
  background: rgba(255, 255, 255, 0.05);
}
/* Filo de luz a la izquierda cuando está abierta: marca cuál estás leyendo. */
.faq details::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  transform: scaleY(0); transform-origin: top;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.faq details[open]::before { transform: scaleY(1); }

.faq summary {
  cursor: pointer; list-style: none;
  padding: 18px 58px 18px 24px; position: relative;
  font-size: 16.5px; font-weight: 600;
  transition: color 0.22s ease;
}
/* Sin esto Safari y Chrome pintan su propio triángulo ▶ */
.faq summary::-webkit-details-marker { display: none; }
.faq summary::marker { content: ""; }
.faq summary:hover { color: #ffb3c0; }

/* Signo + que gira hasta convertirse en − al abrir */
.faq summary::after {
  content: ""; position: absolute; right: 24px; top: 50%;
  width: 13px; height: 13px; margin-top: -6.5px;
  background:
    linear-gradient(var(--accent), var(--accent)) center/13px 2px no-repeat,
    linear-gradient(var(--accent), var(--accent)) center/2px 13px no-repeat;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.faq details[open] summary::after {
  /* Al girar 90° la barra vertical se superpone a la horizontal: queda un − */
  transform: rotate(90deg);
  background:
    linear-gradient(var(--accent), var(--accent)) center/13px 2px no-repeat,
    linear-gradient(var(--accent), var(--accent)) center/2px 0 no-repeat;
}

.faq details p {
  padding: 0 24px 20px; color: var(--dim); font-size: 15.2px; line-height: 1.7;
}
.faq details p a { color: var(--accent-2); text-decoration: underline; }
/* La respuesta entra deslizándose: <details> no anima por sí solo. */
.faq details[open] p { animation: abrirFaq 0.38s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes abrirFaq {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .faq details[open] p { animation: none; }
  .faq details::before, .faq summary::after { transition: none; }
}

/* CTA */
.cta { padding: 84px 0; text-align: center; }
.cta-box {
  padding: 52px 32px; border-radius: 26px;
  background: radial-gradient(760px 300px at 50% 0%, rgba(233, 69, 96, 0.16), transparent 66%), rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
}
.cta .stores { justify-content: center; }

/* ── 1. Progreso de lectura ──────────────────────────────────────────
   Línea fina arriba del todo que avanza al bajar. La rellena home.js. */
.progreso {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 30;
  pointer-events: none;
}
.progreso i {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transition: width 0.08s linear;
}

/* ── 2. Marca de agua: la V enorme al fondo de la sección ─────────────
   No se lee, se intuye. Es lo que da carácter sin añadir ruido. */
.section.marca { position: relative; overflow: hidden; }
.section.marca::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 620px; height: 620px;
  background: url("img/logo-v.png") no-repeat center/contain;
  opacity: 0.035;
}
.section.marca > .wrap { position: relative; z-index: 1; }

/* ── 3. Iconos de la sección de transparencia ───────────────────────── */
.tico {
  width: 40px; height: 40px; border-radius: 11px;
  display: grid; place-items: center; margin-bottom: 14px;
  background: linear-gradient(135deg, rgba(233, 69, 96, 0.18), rgba(160, 107, 212, 0.18));
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.tico svg { width: 20px; height: 20px; fill: none; stroke: #ffc2cd; stroke-width: 1.6; }

/* ── 4. Pie ─────────────────────────────────────────────────────────── */
.site-footer {
  border-top: 1px solid var(--border);
  padding: 54px 0 34px;
  color: var(--dim-2); font-size: 13.6px;
}
.site-footer a { color: var(--dim); }
.site-footer a:hover { color: var(--text); }
.footer-grid {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 34px; align-items: start;
}
.footer-marca .brand-row { margin-bottom: 14px; }
.footer-marca .brand-row img { height: 34px; }
.footer-marca .brand { font-size: 23px; letter-spacing: 2.8px; }
.footer-marca p { color: var(--dim-2); font-size: 13.4px; line-height: 1.7; }
.footer-col h4 {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: 1.3px;
  color: var(--dim); margin-bottom: 13px; font-weight: 700;
}
/* overflow-wrap: el correo (22 caracteres) no cabe en una columna de móvil y era
   lo que empujaba la página hacia los lados. */
.footer-col a { display: block; margin-bottom: 9px; font-size: 13.8px; overflow-wrap: anywhere; }
.copy {
  text-align: center; margin-top: 42px; padding-top: 24px;
  border-top: 1px solid var(--border); color: var(--dim-2); font-size: 13px;
}

/* ── 5. Botones de tienda con vida ──────────────────────────────────── */
.store-btn {
  position: relative; overflow: hidden;
  transition: border-color 0.28s ease, background 0.28s ease, transform 0.28s ease;
}
.store-btn:hover {
  border-color: rgba(233, 69, 96, 0.42);
  background: rgba(255, 255, 255, 0.075);
  transform: translateY(-2px);
}
/* Destello que cruza el botón al pasar el ratón */
.store-btn::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.13), transparent);
  transform: skewX(-18deg); transition: left 0.55s ease;
}
.store-btn:hover::before { left: 120%; }
@media (prefers-reduced-motion: reduce) {
  .store-btn, .store-btn::before { transition: none; }
  .progreso i { transition: none; }
}

/* ── Efectos (home.js) ──────────────────────────────────────────────── */
/* Todo lo que se oculta lleva `.js` delante: sin JavaScript la web se ve
   entera, nada queda invisible por error. */
.js .reveal {
  opacity: 0; transform: translateY(22px);
  transition: opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0ms),
              transform 0.75s cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0ms);
  will-change: opacity, transform;
}
.js .reveal.visible { opacity: 1; transform: none; }

/* Brillo que sigue al cursor dentro de la tarjeta */
.feature, .trust-item, .cta-box, .faq details { position: relative; overflow: hidden; }
.feature::after, .trust-item::after, .cta-box::after, .faq details::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  opacity: 0; transition: opacity 0.32s ease;
  background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%),
              rgba(233, 69, 96, 0.14), transparent 62%);
}
.feature:hover::after, .trust-item:hover::after, .cta-box:hover::after, .faq details:hover::after { opacity: 1; }
/* La caja de cierre es mucho más grande: el mismo radio se perdería dentro. */
.cta-box::after {
  background: radial-gradient(520px circle at var(--mx, 50%) var(--my, 50%),
              rgba(233, 69, 96, 0.17), rgba(160, 107, 212, 0.07) 42%, transparent 68%);
}

/* El móvil levita y se inclina hacia el cursor */
.phone {
  transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  animation: levita 7s ease-in-out infinite;
  transition: box-shadow 0.4s ease;
}
@keyframes levita {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -13px; }
}

/* Degradado del titular en movimiento lento */
.grad {
  background: linear-gradient(96deg, var(--accent), var(--accent-2) 45%, var(--accent) 90%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: corre 9s ease-in-out infinite;
}
@keyframes corre {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}


/* Nada de esto se mueve si el sistema pide menos animación */
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .phone { animation: none; transform: none; }
  .grad { animation: none; }
  /* El fondo se queda quieto en la primera foto, sin fundidos ni zoom */
  .hero-bg .slide { animation: none; transform: none; opacity: 0; }
  .hero-bg .slide:nth-child(1) { opacity: 1; }
}

/* ── Móvil ──────────────────────────────────────────────────────────── */
@media (max-width: 880px) {
  .hero { padding: 52px 0 62px; }
  .hero-grid { grid-template-columns: 1fr; gap: 46px; }
  /* La foto llena el hero, pero ATENUADA: es ambiente, no protagonista. Así el
     recorte cerrado (en vertical solo se ve la franja central de una foto
     apaisada) deja de importar, y se funde con el negro antes de acabar. */
  .hero-bg .slide {
    /* Término medio. Con `cover` la foto (apaisada, 1100x619) se escalaba por el
       alto y solo quedaba a la vista un 26% del ancho: un primer plano enorme.
       Con 160% se veía natural pero cubría poca pantalla. Al 265% cubre toda la
       altura del hero y se ve el 38% de la foto. */
    background-size: 265% auto;
    background-position: 50% top;
    background-repeat: no-repeat;
    /* La animación llega a 0.5 en vez de a 1: media transparencia. */
    animation: fundidoMovil 21s linear infinite;
    /* Sin máscara en móvil: la foto no llena el alto del hero, así que el
       desvanecido se sigue haciendo con el velo en vw (que ya funciona). La
       máscara va en % del hero y aquí no cuadraría. */
    -webkit-mask-image: none;
            mask-image: none;
  }
  .hero-bg .veil {
    background:
      /* Las paradas van en vw, NO en %, y esa es la clave: el % se calcula sobre
         la altura del HERO, que es mucho más alto que la foto, así que el velo
         iba aún por el 80% cuando la imagen ya se había acabado — y se veía el
         corte. La foto mide 265% del ancho, o sea 149vw de alto, así que el
         fundido tiene que estar completo antes de ahí. */
      linear-gradient(180deg,
        rgba(11, 6, 17, 0.26) 0,
        rgba(11, 6, 17, 0.34) 30vw,
        rgba(11, 6, 17, 0.46) 58vw,
        rgba(11, 6, 17, 0.62) 82vw,
        rgba(11, 6, 17, 0.80) 104vw,
        rgba(11, 6, 17, 0.93) 124vw,
        var(--bg) 143vw);
  }
  .lead { margin-inline: auto; }
  .hero-copy { text-align: center; }
  .hero-copy .stores { justify-content: center; }
  .section { padding: 58px 0; }
  /* El pie pasa a dos columnas; a una sola queda una tira larguísima. */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px 20px; }
  .footer-marca { grid-column: 1 / -1; }
  /* Contacto queda solo en su fila: a media anchura y alineado a la izquierda
     se veía descolgado, así que ocupa todo el ancho y se centra. */
  .footer-col.contacto { grid-column: 1 / -1; text-align: center; }
  .section.marca::before { width: 380px; height: 380px; opacity: 0.03; }
}
@media (max-width: 420px) {
  /* Antes se escondía el primer enlace porque no cabían todos en la barra.
     Con el menú desplegable ya no hace falta: caben todos. */
  .phone { width: 100%; max-width: 300px; }
}