/* =============================================================================
   pium! — portada. Depende de pium.css (tokens, reset, nav, pie, íconos).
   ============================================================================= */

/* ---------- HERO ------------------------------------------------------------ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: center;
  padding: 128px 0 var(--sp-18);
  overflow: hidden;
}
.hero-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--sp-14); align-items: center; }
@media (max-width: 980px) { .hero-grid { grid-template-columns: 1fr; gap: var(--sp-12); text-align: center; } }

.hero-badge {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 7px 16px 7px 12px; border-radius: 999px;
  background: rgba(0, 193, 255, 0.07); border: 1px solid rgba(0, 193, 255, 0.22);
  font-size: var(--fs-xs); color: var(--primary); font-weight: 500;
  margin-bottom: var(--sp-6);
}
.hero-badge .ico { width: 15px; height: 15px; }

.hero h1 {
  font-size: var(--fs-display); line-height: var(--lh-tight);
  letter-spacing: var(--ls-display); margin-bottom: var(--sp-5);
  text-wrap: balance;
}
.hero p.lead { font-size: var(--fs-lead); color: var(--text-2); max-width: 46ch; margin-bottom: var(--sp-8); }
@media (max-width: 980px) { .hero p.lead { margin-inline: auto; } .store-btns { justify-content: center; } }

.hero-ctas { display: flex; flex-direction: column; gap: var(--sp-5); }
.hero-trust { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; color: var(--text-3); font-size: var(--fs-xs); }
@media (max-width: 980px) { .hero-trust { justify-content: center; } }
/* Debajo de 560 la fila se parte y el filete queda colgando al final del renglón */
@media (max-width: 560px) {
  .hero-trust { flex-direction: column; gap: var(--sp-2); }
  .hero-trust .sep { display: none; }
}
.hero-trust b { color: var(--primary); font-size: var(--fs-h4); font-weight: 700; }
.hero-trust .sep { width: 1px; height: 14px; background: var(--line-2); }

/* ---------- Maqueta de teléfono --------------------------------------------- */
.phone-stage { position: relative; display: flex; justify-content: center; align-items: center; }
.phone {
  position: relative; width: 296px; height: 612px;
  background: linear-gradient(150deg, #1c2434, #050a14);
  border-radius: 46px; padding: 11px;
  box-shadow:
    0 0 0 1.5px rgba(146, 172, 224, 0.16),
    0 30px 60px -12px rgba(0, 0, 0, 0.75),
    0 60px 120px -40px rgba(0, 193, 255, 0.4);
  transform: rotate(-5deg);
  animation: phoneFloat 7s ease-in-out infinite;
}
@keyframes phoneFloat {
  0%, 100% { transform: rotate(-5deg) translateY(0); }
  50%      { transform: rotate(-5deg) translateY(-16px); }
}
@media (max-width: 980px) {
  .phone { transform: rotate(-3deg) scale(0.94); }
  @keyframes phoneFloat {
    0%, 100% { transform: rotate(-3deg) scale(0.94) translateY(0); }
    50%      { transform: rotate(-3deg) scale(0.94) translateY(-12px); }
  }
}
@media (max-width: 480px) { .phone { width: 264px; height: 546px; } }
.phone::before {
  content: ''; position: absolute; top: 11px; left: 50%; transform: translateX(-50%);
  width: 100px; height: 23px; background: #050a14; border-radius: 0 0 14px 14px; z-index: 3;
}
.phone-screen { width: 100%; height: 100%; border-radius: 35px; overflow: hidden; background: var(--bg-2); }
.phone-shot { width: 100%; height: 100%; object-fit: cover; object-position: top center; }

.float-card {
  position: absolute; z-index: 5;
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 11px var(--sp-4) 11px 11px;
  background: rgba(8, 14, 28, 0.82);
  backdrop-filter: blur(24px) saturate(160%); -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  box-shadow: var(--sh-lg);
  text-align: left;
  animation: floatCard 6.5s ease-in-out infinite;
}
.float-card .fc-ico {
  width: 36px; height: 36px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid transparent;
  clip-path: polygon(var(--fold) 0, 100% 0, 100% calc(100% - var(--fold)), calc(100% - var(--fold)) 100%, 0 100%, 0 var(--fold));
}
.float-card .fc-ico .ico { width: 19px; height: 19px; }
.float-card b { display: block; color: var(--text-0); font-size: var(--fs-xs); font-weight: 600; line-height: 1.35; }
.float-card span { display: block; color: var(--text-3); font-size: var(--fs-caption); line-height: 1.5; }

.float-card.fc1 { top: 5%; left: -8%; }
.float-card.fc1 .fc-ico { background: rgba(53, 208, 127, 0.12); border-color: rgba(53, 208, 127, 0.28); color: var(--success); }
.float-card.fc2 { bottom: 15%; right: -9%; animation-delay: -3.2s; }
.float-card.fc2 .fc-ico { background: rgba(0, 193, 255, 0.12); border-color: rgba(0, 193, 255, 0.3); color: var(--primary); }
@keyframes floatCard {
  0%, 100% { transform: translateY(0) rotate(-1.5deg); }
  50%      { transform: translateY(-13px) rotate(1.5deg); }
}
@media (max-width: 1100px) { .float-card.fc1 { left: -2%; } .float-card.fc2 { right: -2%; } }
@media (max-width: 560px) { .float-card { display: none; } }

/* ---------- Marquesina de categorías ---------------------------------------- */
.marquee {
  overflow: hidden; position: relative;
  border-block: 1px solid var(--line);
  padding: var(--sp-5) 0; background: rgba(255, 255, 255, 0.012);
}
.marquee::before, .marquee::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 110px; z-index: 2; pointer-events: none;
}
.marquee::before { left: 0; background: linear-gradient(to right, var(--bg-0), transparent); }
.marquee::after { right: 0; background: linear-gradient(to left, var(--bg-0), transparent); }
.marquee-track { display: flex; gap: var(--sp-10); width: max-content; animation: scroll 44s linear infinite; }
.marquee-track span {
  font-size: clamp(1.125rem, 2.2vw, 1.75rem); font-weight: 600; color: var(--text-3);
  letter-spacing: -0.015em; white-space: nowrap;
  display: flex; align-items: center; gap: var(--sp-10);
}
/* Separador: rombo, no un asterisco tipográfico */
.marquee-track span::after {
  content: ''; width: 7px; height: 7px; flex-shrink: 0;
  background: var(--accent); transform: rotate(45deg); opacity: 0.65;
}
@keyframes scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Tarjetas -------------------------------------------------------- */
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
@media (max-width: 940px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .card-grid { grid-template-columns: 1fr; } }

.card {
  position: relative; padding: var(--sp-8) var(--sp-6) var(--sp-6);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.022));
  border: 1px solid var(--line-2); border-radius: var(--r-lg); overflow: hidden;
  transition: transform 0.4s var(--ease), border-color 0.3s, background 0.3s;
}
.card::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(460px circle at var(--mx, 50%) var(--my, 50%), rgba(0, 193, 255, 0.1), transparent 45%);
  opacity: 0; transition: opacity 0.35s;
}
/* Faceta angular en la esquina: guiño al plegado del logo */
.card::after {
  content: ''; position: absolute; top: 0; right: 0;
  width: 68px; height: 68px; pointer-events: none;
  background: linear-gradient(225deg, rgba(0, 193, 255, 0.14), transparent 62%);
  clip-path: polygon(100% 0, 0 0, 100% 100%);
  transition: opacity 0.35s; opacity: 0.7;
}
.card:hover { transform: translateY(-5px); border-color: rgba(0, 193, 255, 0.28); }
.card:hover::before { opacity: 1; }
.card:hover::after { opacity: 1; }
.card:nth-child(even)::after { background: linear-gradient(225deg, rgba(182, 109, 255, 0.14), transparent 62%); }

.card-ico {
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--sp-5); color: var(--primary);
  background: rgba(0, 193, 255, 0.08); border: 1px solid rgba(0, 193, 255, 0.2);
  clip-path: polygon(var(--fold) 0, 100% 0, 100% calc(100% - var(--fold)), calc(100% - var(--fold)) 100%, 0 100%, 0 var(--fold));
  transition: transform 0.4s var(--ease);
}
.card-ico .ico { width: 23px; height: 23px; }
.card:nth-child(even) .card-ico {
  color: var(--accent); background: rgba(182, 109, 255, 0.08); border-color: rgba(182, 109, 255, 0.22);
}
.card:hover .card-ico { transform: translateY(-2px) rotate(-4deg); }
.card h3 { font-size: var(--fs-h3); margin-bottom: var(--sp-2); letter-spacing: -0.012em; }
.card p { color: var(--text-2); font-size: var(--fs-sm); }

/* ---------- Escrow ---------------------------------------------------------- */
.escrow-card {
  display: grid; grid-template-columns: 1fr 0.82fr; gap: var(--sp-14); align-items: center;
  padding: var(--sp-14); border-radius: var(--r-xl);
  background:
    radial-gradient(circle at 0% 100%, rgba(0, 193, 255, 0.11), transparent 58%),
    radial-gradient(circle at 100% 0%, rgba(182, 109, 255, 0.11), transparent 58%),
    linear-gradient(140deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.008));
  border: 1px solid var(--line-2); position: relative; overflow: hidden;
}
@media (max-width: 940px) { .escrow-card { grid-template-columns: 1fr; padding: var(--sp-8) var(--sp-6); gap: var(--sp-10); } }

.badge-shield {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 6px 14px 6px 10px; border-radius: 999px;
  background: rgba(0, 193, 255, 0.09); border: 1px solid rgba(0, 193, 255, 0.28);
  color: var(--primary); font-size: var(--fs-caption); font-weight: 600;
  letter-spacing: var(--ls-caption); text-transform: uppercase; margin-bottom: var(--sp-5);
}
.badge-shield .ico { width: 14px; height: 14px; }
@media (max-width: 600px) { .badge-shield { letter-spacing: 0.09em; padding: 6px 12px 6px 9px; } }
.escrow-text h2 { font-size: var(--fs-h2); line-height: var(--lh-tight); letter-spacing: var(--ls-display); margin-bottom: var(--sp-4); }
/* :not() evita que esta regla (0,1,1) le gane a .badge-shield (0,1,0) y le
   imponga el tamaño de párrafo a la píldora. */
.escrow-text > p:not(.badge-shield) { color: var(--text-2); font-size: var(--fs-lead); margin-bottom: var(--sp-6); }
.escrow-features { list-style: none; display: flex; flex-direction: column; gap: var(--sp-3); }
.escrow-features li {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  font-size: var(--fs-body); color: var(--text-1);
}
.escrow-features .ico { width: 20px; height: 20px; margin-top: 2px; color: var(--primary); stroke-width: 2; }

/* =============================================================================
   Diagrama de custodia — «la hoja que se pliega»
   El escrow contado con el mismo gesto que arma el pájaro del logo: una hoja de
   papel con el pago apoyado en el centro, las cuatro esquinas plegadas hacia
   adentro sobre él (pliegue blintz, sólo rectas y 45°), un sello encima, y la
   apertura al cierre de la operación.

   Acá viven sólo los materiales —de qué está hecho cada trozo de papel—. El
   movimiento lo calcula assets/js/escrow.js cuadro a cuadro: la curvatura de
   la solapa en vuelo, la luz que le pega según cómo esté girada y la sombra
   que tira sobre la hoja de abajo. El marcado está en index.html y viene
   escrito en el último cuadro (hoja cerrada y sellada), que es lo que se ve si
   el JS no corre o si el sistema pide no animar.
   ============================================================================= */
.escrow-visual { width: 100%; max-width: 420px; margin-inline: auto; }
.escrow-visual svg { width: 100%; height: auto; overflow: visible; }

/* ---------- Extremos: comprador y vendedor ---------------------------------- */
.ev-label { font-family: var(--font); font-size: var(--fs-xs); font-weight: 600; fill: var(--text-1); }
.ev-ico { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: square; stroke-linejoin: miter; }

.ev-chip-plate {
  fill: rgba(8, 14, 28, 0.92); stroke: var(--line-2); stroke-width: 1; stroke-linejoin: miter;
  transition: fill 0.45s var(--ease), stroke 0.45s var(--ease);
}
.ev-chip .ev-ico { transition: color 0.45s var(--ease); }
.ev-chip .ev-label { transition: fill 0.45s var(--ease); }
.ev-chip-ring { fill: none; stroke: var(--accent); stroke-width: 1.4; stroke-linejoin: miter; }

/* En reposo el ícono lleva su color de marca a media asta; cuando el pago pasa
   por ahí, el extremo se enciende del todo. */
[data-ev='chipBuyer'] .ev-ico { color: rgba(0, 193, 255, 0.5); }
[data-ev='chipSeller'] .ev-ico { color: rgba(182, 109, 255, 0.5); }
[data-ev='chipBuyer'].is-on .ev-chip-plate { fill: rgba(0, 193, 255, 0.1); stroke: rgba(0, 193, 255, 0.62); }
[data-ev='chipBuyer'].is-on .ev-ico { color: var(--primary); }
[data-ev='chipSeller'].is-on .ev-chip-plate { fill: rgba(182, 109, 255, 0.1); stroke: rgba(182, 109, 255, 0.62); }
[data-ev='chipSeller'].is-on .ev-ico { color: var(--accent); }
.ev-chip.is-on .ev-label { fill: var(--text-0); }

.ev-rail { fill: none; stroke: var(--line); stroke-width: 1.5; }
.ev-flow { fill: none; stroke-width: 2; stroke-dasharray: 5 9; stroke-linecap: butt; }
[data-ev='flowIn'] { stroke: var(--primary); }
[data-ev='flowOut'] { stroke: var(--accent); }

/* ---------- El papel --------------------------------------------------------
   El tono de la hoja vive en el degradé #ev-paper-g de index.html; escrow.js
   arranca de esos mismos dos valores (PAPER_HI/PAPER_LO) para calcular los de
   las solapas, así que si se cambia uno hay que cambiar el otro.

   Ojo: ningún `url(#…)` de este bloque va acá. Una referencia local dentro de
   una hoja de estilos externa se resuelve contra la URL de la hoja, no contra
   la del documento, y hay motores donde eso deja el degradé o el desenfoque
   sin resolver. Van como atributo de presentación en el marcado.           */
.ev-drop { fill: rgba(2, 6, 17, 0.72); }
.ev-precrease { fill: none; stroke: var(--line-2); stroke-width: 1; stroke-linejoin: miter; }

.ev-face { stroke: none; }
/* El color del canto lo pone escrow.js cuadro a cuadro y cambia de signo con el
   pliegue: de perfil es una línea de luz, con la hoja cerrada es la juntura
   entre dos capas apoyadas y va más oscuro que el papel. Son esas cuatro
   junturas las que dejan ver el pliegue en el cuadro en reposo, donde las
   cuatro solapas miran para el mismo lado y la luz ya no las distingue.
   Por eso acá no se declara: una regla de hoja de estilos le ganaría al
   atributo que escribe el JS. */
.ev-cut { fill: none; stroke-width: 0.9; stroke-linejoin: miter; stroke-linecap: butt; }
.ev-creases path { fill: none; stroke: rgba(255, 255, 255, 0.42); stroke-width: 1.1; stroke-linecap: butt; }

/* La sombra que cada solapa levantada tira sobre la hoja. El desenfoque va
   siempre: sin él queda un polígono oscuro de canto duro que no se lee como
   sombra sino como un pedazo de papel suelto. Es un solo filtro sobre una caja
   de unos 200 px y el bucle se detiene cuando el diagrama no está a la vista,
   así que el costo está acotado.
   En pantallas chicas la figura ocupa poco: la misma sombra pesa visualmente
   más, y por eso se aclara. */
.ev-shadows { fill: rgba(2, 6, 17, 0.66); }
@media (max-width: 640px) { .ev-shadows { fill: rgba(2, 6, 17, 0.48); } }

/* ---------- El pago ----------------------------------------------------------
   El canto de la ficha: el degradé de marca visto de costado y en sombra. Es un
   tono de material, no un color de la paleta, por eso va literal. */
.ev-coin-edge { fill: #0a2748; }
.ev-coin-rim { fill: none; stroke: rgba(255, 255, 255, 0.5); stroke-width: 1.1; stroke-linejoin: miter; }
.ev-coin-mark { fill: none; stroke: var(--ink-on-brand); stroke-width: 2.4; stroke-linecap: square; }

/* ---------- El sello --------------------------------------------------------- */
.ev-seal-plate { stroke: rgba(255, 255, 255, 0.8); stroke-width: 1; stroke-linejoin: miter; }
.ev-ring { fill: none; stroke: var(--primary); stroke-width: 1.6; stroke-linejoin: miter; }
.ev-shackle {
  fill: none; stroke: var(--ink-on-brand); stroke-width: 2.9;
  stroke-linecap: butt; stroke-linejoin: miter;
}
.ev-lock-body { fill: var(--ink-on-brand); }
.ev-lock-hole { fill: var(--text-1); }

/* Colores forzados: `fill` y `stroke` no entran en las propiedades que el modo
   sustituye, así que el papel conserva su paleta —está bien, es un dibujo— pero
   los rótulos y las cajas quedarían con colores de tema oscuro sobre el fondo
   del sistema. Esos sí se pasan a los colores del sistema. */
@media (forced-colors: active) {
  .ev-label { fill: CanvasText; }
  .ev-chip-plate { fill: Canvas; stroke: CanvasText; }
  .ev-chip .ev-ico, .ev-chip.is-on .ev-ico { color: CanvasText; }
  .ev-rail { stroke: CanvasText; }
  .ev-drop, .ev-shadows { fill: none; }
}

/* ---------- Pasos ----------------------------------------------------------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }
@media (max-width: 980px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .steps { grid-template-columns: 1fr; } }
.step {
  position: relative; padding: var(--sp-6) var(--sp-6) var(--sp-6);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.022));
  border: 1px solid var(--line-2); border-radius: var(--r-lg);
  transition: transform 0.35s var(--ease), border-color 0.3s;
  overflow: hidden;
}
.step::after {
  content: ''; position: absolute; left: 0; top: 0; width: 3px; height: 0;
  background: var(--grad); transition: height 0.4s var(--ease);
}
.step:hover { transform: translateY(-5px); border-color: rgba(0, 193, 255, 0.28); }
.step:hover::after { height: 100%; }
.step .num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; margin-bottom: var(--sp-4);
  font-size: var(--fs-xs); font-weight: 700; color: var(--primary);
  background: rgba(0, 193, 255, 0.08); border: 1px solid rgba(0, 193, 255, 0.24);
  clip-path: polygon(var(--fold) 0, 100% 0, 100% calc(100% - var(--fold)), calc(100% - var(--fold)) 100%, 0 100%, 0 var(--fold));
}
.step h3 { font-size: var(--fs-h3); margin-bottom: 6px; }
.step p { font-size: var(--fs-sm); color: var(--text-2); }

/* ---------- Métricas -------------------------------------------------------- */
.stats {
  background:
    radial-gradient(circle at 18% 50%, rgba(0, 193, 255, 0.06), transparent 55%),
    radial-gradient(circle at 82% 50%, rgba(182, 109, 255, 0.06), transparent 55%);
  border-block: 1px solid var(--line);
  padding: var(--sp-18) 0;
}
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); }
@media (max-width: 820px) { .stats-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-8); } }
/* A 360–375 px las cifras con `white-space: nowrap` desbordan su columna */
@media (max-width: 480px) { .stats-grid { grid-template-columns: 1fr; gap: var(--sp-6); } }
.stat { text-align: center; }
.stat .num {
  font-size: clamp(2.25rem, 5vw, 3.5rem); font-weight: 700; line-height: 1;
  letter-spacing: -0.045em; white-space: nowrap; color: var(--text-0);
}
.stat.accent .num { color: var(--primary); }
.stat .lbl {
  font-size: var(--fs-caption); color: var(--text-3); letter-spacing: var(--ls-caption);
  text-transform: uppercase; margin-top: var(--sp-3); font-weight: 600;
}

/* ---------- Confianza ------------------------------------------------------- */
.trust-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
@media (max-width: 860px) { .trust-grid { grid-template-columns: 1fr; } }
.trust-card {
  padding: var(--sp-10) var(--sp-8); border-radius: var(--r-lg); border: 1px solid var(--line-2);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.022));
  display: flex; flex-direction: column; gap: var(--sp-3);
  transition: transform 0.35s var(--ease), border-color 0.3s;
}
.trust-card:hover { transform: translateY(-5px); border-color: rgba(0, 193, 255, 0.28); }
.trust-card h3 { font-size: var(--fs-h3); }
.trust-card p { color: var(--text-2); font-size: var(--fs-sm); }

.trust-card.cashback { background: var(--grad); border-color: transparent; justify-content: space-between; }
.trust-card.cashback h3, .trust-card.cashback .trust-big { color: var(--ink-on-brand); }
.trust-card.cashback p { color: var(--ink-on-brand); }
.trust-card.cashback .cashback-copy { margin-top: auto; }
.trust-card.cashback .cashback-kicker {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-caption); font-weight: 700; letter-spacing: var(--ls-caption);
  text-transform: uppercase; color: var(--ink-on-brand);
}
.trust-card.cashback .ico { width: 15px; height: 15px; }
/* Especificidad (0,2,0): tiene que ganarle a `.trust-card p` (0,1,1), que si no
   le impone --fs-sm y el número queda del tamaño de un párrafo. */
.trust-card .trust-big {
  font-size: clamp(2.5rem, 5vw, 2.875rem); font-weight: 700;
  line-height: 1; letter-spacing: -0.045em; margin-top: var(--sp-4);
}

.trust-card.proteccion { gap: var(--sp-6); }
.proteccion-top { display: flex; align-items: flex-start; gap: var(--sp-5); }
.proteccion-ico {
  width: 56px; height: 56px; flex-shrink: 0; color: var(--primary);
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 193, 255, 0.08); border: 1px solid rgba(0, 193, 255, 0.24);
  clip-path: polygon(var(--fold) 0, 100% 0, 100% calc(100% - var(--fold)), calc(100% - var(--fold)) 100%, 0 100%, 0 var(--fold));
}
.proteccion-ico .ico { width: 27px; height: 27px; }
.proteccion-facts { display: flex; flex-direction: column; gap: var(--sp-2); }
.proteccion-facts > div {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 11px var(--sp-4); border-radius: var(--r-xs);
  background: rgba(0, 193, 255, 0.045); border: 1px solid rgba(0, 193, 255, 0.14);
}
.proteccion-facts .ico { width: 17px; height: 17px; color: var(--primary); flex-shrink: 0; }
.proteccion-facts b { font-size: var(--fs-sm); font-weight: 600; color: var(--text-0); }
.proteccion-facts span { font-size: var(--fs-sm); color: var(--text-2); }

/* ---------- Instagram ------------------------------------------------------- */
.ig-panel {
  border: 1px solid var(--line); border-radius: var(--r-xl);
  padding: var(--sp-6);
  background:
    radial-gradient(circle at 100% 0%, rgba(182, 109, 255, 0.1), transparent 58%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.008));
}
@media (max-width: 560px) { .ig-panel { padding: var(--sp-4); border-radius: var(--r-lg); } }

.ig-head {
  display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap;
  padding: var(--sp-2) var(--sp-2) var(--sp-6);
}
.ig-avatar { width: 54px; height: 54px; flex-shrink: 0; clip-path: polygon(var(--fold) 0, 100% 0, 100% calc(100% - var(--fold)), calc(100% - var(--fold)) 100%, 0 100%, 0 var(--fold)); box-shadow: 0 4px 18px rgba(182, 109, 255, 0.3); }
.ig-id { flex: 1; min-width: 150px; }
.ig-id .handle { font-size: var(--fs-h4); font-weight: 700; color: var(--text-0); }
.ig-id .sub { font-size: var(--fs-xs); color: var(--text-2); }
.ig-follow {
  display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 44px;
  padding: 11px var(--sp-5); border-radius: 999px; text-decoration: none;
  font-size: var(--fs-sm); font-weight: 600; color: #fff;
  background: linear-gradient(135deg, #f9ce34 0%, #ee2a7b 46%, #6228d7 100%);
  transition: transform 0.25s var(--ease), box-shadow 0.3s;
}
.ig-follow:hover { transform: translateY(-2px); box-shadow: 0 12px 30px -8px rgba(238, 42, 123, 0.5); }
.ig-follow .ico { width: 17px; height: 17px; }

.ig-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
@media (max-width: 700px) { .ig-grid { grid-template-columns: repeat(2, 1fr); } }

.ig-tile {
  position: relative; aspect-ratio: 1; overflow: hidden;
  border-radius: var(--r-md); border: 1px solid var(--line);
  background: var(--bg-1); text-decoration: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-3); padding: var(--sp-5); text-align: center;
  transition: transform 0.35s var(--ease), border-color 0.3s;
}
.ig-tile:hover { transform: translateY(-4px); border-color: var(--line-2); }

/* Placeholder de marca: trama de facetas + pájaro, hasta cargar fotos reales */
.ig-tile::before {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(135deg, rgba(0, 193, 255, 0.16), transparent 55%),
    linear-gradient(315deg, rgba(182, 109, 255, 0.2), transparent 58%);
}
.ig-tile::after {
  content: ''; position: absolute; inset: 0; opacity: 0.5;
  background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 26px 26px;
}
.ig-tile img { position: relative; z-index: 1; width: 42%; max-width: 74px; opacity: 0.9; transition: transform 0.4s var(--ease); }
.ig-tile:hover img { transform: scale(1.07) rotate(-4deg); }
.ig-tile span {
  position: relative; z-index: 1;
  font-size: var(--fs-xs); font-weight: 600; color: var(--text-1);
}

/* Variante con foto real:
   <a class="ig-tile has-photo" href="…"><img src="…" alt="…" loading="lazy"></a> */
.ig-tile.has-photo { padding: 0; gap: 0; }
.ig-tile.has-photo::before, .ig-tile.has-photo::after { content: none; }
.ig-tile.has-photo img { width: 100%; max-width: none; height: 100%; object-fit: cover; opacity: 1; }
.ig-tile.has-photo::after {
  content: ''; position: absolute; inset: 0; opacity: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(2, 6, 17, 0.7));
  transition: opacity 0.35s;
}
.ig-tile.has-photo:hover::after { opacity: 1; }

.ig-foot { padding: var(--sp-6) var(--sp-2) var(--sp-2); text-align: center; font-size: var(--fs-xs); color: var(--text-3); }
.ig-foot a { color: var(--primary); text-decoration: none; font-weight: 500; }
.ig-foot a:hover { text-decoration: underline; }

/* ---------- Preguntas frecuentes -------------------------------------------- */
.faq-list { max-width: 780px; margin-inline: auto; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: var(--sp-5);
  padding: var(--sp-5) 0; background: none; border: none; cursor: pointer; text-align: left;
  font-family: var(--font); font-size: var(--fs-h4); font-weight: 600;
  color: var(--text-0); line-height: 1.4;
  transition: color 0.2s;
}
.faq-q:hover { color: var(--primary); }
.faq-plus {
  width: 32px; height: 32px; flex-shrink: 0;
  border: 1px solid var(--line-2); position: relative;
  clip-path: polygon(var(--fold) 0, 100% 0, 100% calc(100% - var(--fold)), calc(100% - var(--fold)) 100%, 0 100%, 0 var(--fold));
  transition: transform 0.35s var(--ease), background 0.3s, border-color 0.3s;
}
.faq-plus::before, .faq-plus::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 12px; height: 1.8px; background: var(--text-1);
  transform: translate(-50%, -50%); transition: background 0.3s, opacity 0.3s;
}
.faq-plus::after { transform: translate(-50%, -50%) rotate(90deg); }
/* Gira 180° —no 90°— para que el trazo que queda sea un menos y no una «I». */
.faq-q[aria-expanded='true'] .faq-plus { background: var(--grad); border-color: transparent; transform: rotate(180deg); }
.faq-q[aria-expanded='true'] .faq-plus::before,
.faq-q[aria-expanded='true'] .faq-plus::after { background: #041018; }
.faq-q[aria-expanded='true'] .faq-plus::after { opacity: 0; }

/* `visibility` saca los enlaces del panel colapsado del orden de tabulación:
   sin esto quedan enfocables dentro de una caja de 0 px de alto. */
.faq-a {
  display: grid; grid-template-rows: 0fr; visibility: hidden;
  transition: grid-template-rows 0.35s var(--ease), visibility 0.35s;
}
.faq-a > div { overflow: hidden; }
.faq-q[aria-expanded='true'] + .faq-a { grid-template-rows: 1fr; visibility: visible; }
.faq-a p { color: var(--text-2); font-size: var(--fs-body); padding: 0 var(--sp-12) var(--sp-5) 0; }
@media (max-width: 620px) { .faq-a p { padding-right: 0; } }

/* ---------- CTA final ------------------------------------------------------- */
.cta-card {
  position: relative; text-align: center;
  padding: var(--sp-18) var(--sp-8); border-radius: var(--r-xl);
  background:
    radial-gradient(circle at 50% 0%, rgba(0, 193, 255, 0.16), transparent 62%),
    radial-gradient(circle at 50% 100%, rgba(182, 109, 255, 0.14), transparent 62%),
    linear-gradient(140deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.008));
  border: 1px solid var(--line-2); overflow: hidden;
}
@media (max-width: 620px) { .cta-card { padding: var(--sp-12) var(--sp-5); } }
/* Facetas en las esquinas, en lugar de los asteriscos girando */
.cta-card::before, .cta-card::after {
  content: ''; position: absolute; width: 180px; height: 180px; pointer-events: none;
}
.cta-card::before {
  top: 0; left: 0;
  background: linear-gradient(135deg, rgba(0, 193, 255, 0.22), transparent 60%);
  clip-path: polygon(0 0, 100% 0, 0 100%);
}
.cta-card::after {
  bottom: 0; right: 0;
  background: linear-gradient(315deg, rgba(182, 109, 255, 0.22), transparent 60%);
  clip-path: polygon(100% 100%, 100% 0, 0 100%);
}
.cta-logo { width: 68px; margin: 0 auto var(--sp-6); position: relative; z-index: 1; }
.cta-card h2 {
  position: relative; z-index: 1;
  font-size: var(--fs-h2); letter-spacing: var(--ls-display); line-height: 1.06;
  margin-bottom: var(--sp-3); text-wrap: balance;
}
.cta-card > p {
  position: relative; z-index: 1;
  font-size: var(--fs-lead); color: var(--text-2); margin: 0 auto var(--sp-8); max-width: 44ch;
}
.cta-card .store-btns { justify-content: center; position: relative; z-index: 1; }