/* =========================================================================
   CERTIFICACIÓN INTERNACIONAL EN IMPORTACIONES — página de venta (v3)
   Emprendelandia · Valeria Bernardo · lanzamiento 2026-09

   REFERENCIA DE ESTRUCTURA Y BRANDING: la página oficial de Valeria,
   https://www.valeriabernardo.com/certificacion (935 palabras, fondo negro,
   Poppins, acentos naranja #FB8402 y magenta #E82C6C). Esta hoja modela ese
   patrón con la paleta verificada de Emprendelandia, no con los hex sueltos
   que usa su sitio.

   Paleta — clientes/emprendelandia/marca/activos-y-paleta.md
     · #FF28B4  magenta de MARCA, muestreado del logo. NO usar #F727A6
                ni #E82C6C: son variantes corridas que circulan por el vault.
     · #ED5D01 / #FF922E  naranja y ámbar del lanzamiento
     · #0D0C0B / #191817  negro y negro-2
     · #FEEBE2  crema
     · #790141  vinotinto de los creativos de testimonios

   Tipografías: Outfit (títulos) + Poppins (texto), las del lanzamiento.

   MÓVIL PRIMERO: el CSS base está escrito para 375 px; los @media solo
   agrandan. La mayoría del tráfico entra por celular.

   Sin animaciones de entrada por scroll (decisión de Samu). Las únicas
   animaciones son el latido del botón, el anillo de la garantía y el
   carrusel de testimonios, las tres apagadas con prefers-reduced-motion.
   ========================================================================= */

:root{
  --magenta:#FF28B4;
  --magenta-osc:#E01BA0;   /* extremo oscuro del degradado del boton: mas claro que #C9128C para que el texto negro llegue a 4,8:1 */
  --naranja:#ED5D01;
  --ambar:#FF922E;
  --negro:#0D0C0B;
  --panel:#16110F;
  --panel-alto:#221A17;
  --crema:#FEEBE2;
  --crema-suave:rgba(254,235,226,.84);
  --crema-tenue:rgba(254,235,226,.60);
  --vino:#790141;
  --linea:rgba(254,235,226,.14);
  --linea-mag:rgba(255,40,180,.30);
  --linea-nar:rgba(255,146,46,.30);
  --verde:#28C76F;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
  background:var(--negro);
  color:var(--crema);
  font-family:'Poppins',system-ui,sans-serif;
  font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  padding-bottom:76px;          /* aire para la barra fija de móvil */
}
img{max-width:100%;display:block;height:auto}
strong{font-weight:700;color:#fff}
h1,h2,h3,h4{font-family:'Outfit',system-ui,sans-serif;color:#fff;line-height:1.18}

.env{width:100%;max-width:800px;margin:0 auto;padding:0 16px}
section{padding:40px 0}
.centro{text-align:center}

/* Frase resaltada con fondo de color dentro del propio titular: es el
   recurso que sostiene el escaneo rápido en móvil. */
.hl{
  background:var(--magenta);color:#0D0C0B;
  padding:0 6px;border-radius:4px;font-weight:800;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}
.hl-nar{
  background:var(--naranja);color:#0D0C0B;
  padding:0 6px;border-radius:4px;font-weight:800;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}
.nar{color:var(--ambar);font-weight:600}
.mag{color:var(--magenta);font-weight:600}

.panel{
  background:linear-gradient(150deg,var(--panel-alto),var(--panel));
  border:1px solid var(--linea-mag);
  border-radius:18px;padding:24px 20px;
  box-shadow:0 14px 44px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,40,180,.10);
}

/* ---------- barra de cierre ---------- */
.barra-cierre{
  background:linear-gradient(90deg,var(--naranja),var(--magenta));
  color:#0D0C0B;text-align:center;
  font-size:.77rem;font-weight:600;padding:9px 16px;line-height:1.4;
}

/* ---------- cabecera + titular ---------- */
.cabecera{padding:22px 0 0;text-align:center}
.logo{width:152px;margin:0 auto}
.titular{padding:24px 0 26px;text-align:center}
.titular h1{
  font-size:clamp(1.38rem,5.6vw,2.15rem);
  font-weight:700;line-height:1.3;letter-spacing:-.01em;
}
.titular .aval-linea{
  margin-top:16px;font-size:clamp(.88rem,3.4vw,1rem);
  color:var(--ambar);font-weight:600;line-height:1.5;
}

/* ---------- video ---------- */
.video-caja{
  width:100%;aspect-ratio:16/9;background:#080706;
  border:1px solid var(--linea);border-radius:12px;
  display:grid;place-items:center;overflow:hidden;position:relative;
}
.video-caja iframe,.video-caja video{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-hueco{text-align:center;color:var(--crema-tenue);font-size:.8rem;padding:14px;line-height:1.5}
.play{
  width:58px;height:58px;border-radius:50%;
  border:2px solid rgba(255,40,180,.55);
  display:grid;place-items:center;margin:0 auto 12px;
}
.play svg{width:22px;height:22px;fill:var(--magenta);margin-left:4px}
.video-pie{text-align:center;font-size:.88rem;color:var(--crema-suave);padding:14px 4px 0}

/* ---------- tarjeta de producto + CTA ---------- */
.producto{text-align:center}
.producto h2{
  font-size:clamp(1.45rem,5.8vw,2.3rem);font-weight:800;
  text-transform:uppercase;line-height:1.1;margin-bottom:14px;
}
.producto p{font-size:.96rem;color:var(--crema-suave);margin-bottom:22px}

.boton{
  display:inline-flex;flex-direction:column;align-items:center;gap:2px;
  background:linear-gradient(180deg,var(--magenta),var(--magenta-osc));
  color:#0D0C0B;font-family:'Poppins',sans-serif;
  padding:15px 26px;border-radius:50px;text-decoration:none;max-width:100%;
  box-shadow:0 0 26px rgba(255,40,180,.38);
  animation:latido 2.6s ease-in-out infinite;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
  transition:transform .12s,box-shadow .2s;
}
.boton-txt{
  font-size:clamp(.84rem,3.4vw,1rem);font-weight:800;
  text-transform:uppercase;letter-spacing:.02em;line-height:1.15;
}
.boton-sub{font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;opacity:.82}
.boton:hover{box-shadow:0 0 42px rgba(255,40,180,.7);transform:translateY(-2px);animation-play-state:paused}
.boton:active{transform:scale(.98)}
.boton:focus-visible{outline:3px solid var(--ambar);outline-offset:3px}
@keyframes latido{
  0%,100%{box-shadow:0 0 20px rgba(255,40,180,.32)}
  50%{box-shadow:0 0 38px rgba(255,40,180,.62)}
}
.tras-boton{font-size:.78rem;color:var(--crema-tenue);margin-top:12px;line-height:1.5}
.sellos{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;margin-top:18px}
.sello{display:flex;align-items:center;gap:6px;font-size:.72rem;color:var(--crema-tenue)}
.sello svg{width:16px;height:16px;fill:rgba(254,235,226,.5);flex-shrink:0}
.enlace-suave{color:var(--crema-tenue);font-size:.8rem;text-decoration:underline}
.enlace-suave:hover{color:var(--crema)}

/* ---------- beneficios con check ---------- */
.beneficios{display:grid;gap:10px}
.beneficio{
  display:flex;align-items:center;gap:12px;
  background:linear-gradient(150deg,var(--panel-alto),var(--panel));
  border:1px solid var(--linea-nar);border-radius:14px;padding:15px 16px;
}
.beneficio .tic{
  flex-shrink:0;width:26px;height:26px;border-radius:50%;
  background:rgba(255,146,46,.16);border:1px solid rgba(255,146,46,.6);
  display:grid;place-items:center;
}
.beneficio .tic svg{width:13px;height:13px;stroke:var(--ambar);stroke-width:3;fill:none}
.beneficio span{
  font-family:'Outfit',sans-serif;font-weight:600;font-size:.92rem;
  color:#fff;line-height:1.35;
}

/* ---------- pilares: metodología / mentores / comunidad ---------- */
.tit-bloque{
  font-size:clamp(1.3rem,5.2vw,1.9rem);font-weight:700;
  text-align:center;line-height:1.25;margin-bottom:20px;
}
.pilares{display:grid;gap:12px}
.pilar{
  background:linear-gradient(150deg,var(--panel-alto),var(--panel));
  border:1px solid var(--linea-mag);border-radius:16px;padding:20px 18px;
}
.pilar h3{font-size:1.15rem;font-weight:700;color:var(--magenta);margin-bottom:6px}
.pilar p{font-size:.88rem;color:var(--crema-suave);margin-bottom:12px}
.pilar ul{list-style:none;display:grid;gap:7px}
.pilar li{
  position:relative;padding-left:22px;font-size:.87rem;color:var(--crema);line-height:1.45;
}
.pilar li::before{
  content:"";position:absolute;left:2px;top:6px;
  width:7px;height:4px;border-left:2px solid var(--verde);border-bottom:2px solid var(--verde);
  transform:rotate(-45deg);
}

/* ---------- recursos que validan + aval ---------- */
.recursos{display:grid;gap:10px;margin-bottom:22px}
.recurso{
  background:linear-gradient(150deg,var(--panel-alto),var(--panel));
  border:1px solid var(--linea);border-radius:14px;padding:16px;
}
.recurso b{display:block;font-family:'Outfit',sans-serif;color:#fff;font-size:.95rem;margin-bottom:3px}
.recurso span{font-size:.85rem;color:var(--crema-suave);line-height:1.5}
.aval{
  text-align:center;border:1px dashed var(--linea-nar);border-radius:14px;padding:18px 16px;
}
.aval .aval-sello{display:block;width:auto;height:96px;margin:0 auto 14px}
.aval .rotulo{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--crema-tenue)}
.aval .nombre{font-family:'Outfit',sans-serif;font-weight:700;color:#fff;font-size:1.02rem;margin-top:7px}
.aval .lugar{font-size:.8rem;color:var(--crema-tenue);margin-top:2px}

/* ---------- plan de formación ---------- */
.cursos{list-style:none;display:grid;gap:8px}
.cursos li{
  background:linear-gradient(150deg,var(--panel-alto),var(--panel));
  border:1px solid var(--linea);border-radius:12px;padding:13px 15px;
  font-size:.88rem;color:var(--crema-suave);line-height:1.5;
}
.cursos li b{display:block;color:#fff;font-family:'Outfit',sans-serif;font-weight:600;font-size:.95rem;margin-bottom:2px}
.cursos li.eje{border-color:var(--linea-mag)}
.cursos li.eje b{color:var(--magenta)}
.pastilla{
  display:inline-block;background:var(--magenta);color:#0D0C0B;
  font-family:'Poppins',sans-serif;font-size:.65rem;font-weight:800;
  letter-spacing:.04em;text-transform:uppercase;
  padding:2px 8px;border-radius:20px;margin-left:6px;vertical-align:middle;white-space:nowrap;
}

/* ---------- bonos ---------- */
.bonos{
  text-align:center;border-top:1px solid var(--linea);
  background:linear-gradient(180deg,#140F0D 0%,var(--negro) 100%);
}
.bonos h2{
  font-size:clamp(1.45rem,5.8vw,2.2rem);font-weight:800;
  text-transform:uppercase;line-height:1.15;margin-bottom:20px;
}
.bono-lista{display:grid;gap:12px;text-align:left}
.bono{
  background:linear-gradient(150deg,var(--panel-alto),var(--panel));
  border:1px solid var(--linea-mag);border-radius:14px;padding:18px 16px;
}
.bono .num{
  display:inline-block;font-family:'Outfit',sans-serif;font-weight:800;
  font-size:.72rem;letter-spacing:.08em;color:var(--magenta);margin-bottom:6px;
}
.bono h3{font-size:1rem;font-weight:700;margin-bottom:5px;line-height:1.3}
.bono p{font-size:.87rem;color:var(--crema-suave);line-height:1.55}

/* ---------- carrusel de testimonios ---------- */
.testimonios{
  text-align:center;border-top:1px solid var(--linea);
  background:linear-gradient(180deg,#2A0518 0%,var(--negro) 100%);
}
.testimonios h2{
  font-size:clamp(1.45rem,5.8vw,2.2rem);font-weight:800;
  text-transform:uppercase;margin-bottom:6px;
}
.testimonios .bajada{font-size:.86rem;color:var(--crema-suave);margin-bottom:20px}
.carrusel{position:relative;overflow:hidden;border-radius:16px}
.pista{
  display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
  padding-bottom:2px;
}
.pista::-webkit-scrollbar{display:none}
.diapo{
  /* 82 % + gap: la siguiente tarjeta asoma por el borde derecho, que es lo que
     le dice a la persona que hay más testimonios y se puede arrastrar. */
  flex:0 0 82%;scroll-snap-align:start;
  background:rgba(121,1,65,.28);border:1px solid rgba(255,40,180,.24);
  border-radius:14px;overflow:hidden;
}
.diapo img{width:100%;aspect-ratio:4/5;object-fit:cover}
.diapo .pie-caso{padding:11px 14px;text-align:left}
.diapo .monto{font:800 1.1rem/1.2 'Outfit',sans-serif;color:var(--magenta)}
.diapo .quien{font-size:.8rem;color:var(--crema-suave);margin-top:2px}
.puntos{display:flex;justify-content:center;gap:8px;margin-top:14px}
.punto{
  width:9px;height:9px;border-radius:50%;padding:0;cursor:pointer;
  background:rgba(254,235,226,.26);border:0;transition:background .2s,transform .2s;
}
.punto[aria-current="true"]{background:var(--magenta);transform:scale(1.25)}
.punto:focus-visible{outline:2px solid var(--ambar);outline-offset:3px}
.descargo{
  font-size:.72rem;color:var(--crema-tenue);line-height:1.6;
  margin:18px auto 0;max-width:600px;
}

/* ---------- precio ---------- */
.oferta{text-align:center;border-top:1px solid var(--linea)}
.caja-precio{position:relative;padding-top:30px;text-align:left}
.etiqueta{
  position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  background:linear-gradient(90deg,var(--naranja),var(--magenta));
  color:#0D0C0B;font-size:.66rem;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;padding:6px 14px;border-radius:20px;white-space:nowrap;
}
.lista-incluye{list-style:none;display:grid;gap:10px;margin-bottom:24px}
.lista-incluye li{position:relative;padding-left:26px;font-size:.89rem;color:var(--crema-suave);line-height:1.5}
.lista-incluye li::before{
  content:"";position:absolute;left:0;top:3px;width:17px;height:17px;border-radius:50%;
  background:rgba(40,199,111,.16);border:1px solid rgba(40,199,111,.55);
}
.lista-incluye li::after{
  content:"";position:absolute;left:5px;top:8px;width:7px;height:4px;
  border-left:2px solid var(--verde);border-bottom:2px solid var(--verde);transform:rotate(-45deg);
}
.precio{text-align:center}
.precio-viejo{font-size:.9rem;color:var(--crema-tenue);text-decoration:line-through}
.precio-hoy{font:800 clamp(2.5rem,11vw,3.8rem)/1 'Outfit',sans-serif;color:#fff;margin-top:4px}
.precio-hoy span{font-size:1.05rem;font-weight:600;margin-left:6px;color:var(--crema-suave)}
.precio-resto{font-size:.92rem;color:var(--magenta);font-weight:600;margin-top:8px}
.precio-nota{font-size:.8rem;color:var(--crema-tenue);max-width:520px;margin:12px auto 20px;line-height:1.6}

/* ---------- garantía ---------- */
.garantia{
  text-align:center;border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);
  background:radial-gradient(ellipse at center,#1A0E16 0%,var(--negro) 72%);
}
.medalla{width:clamp(160px,44vw,210px);aspect-ratio:1/1;margin:0 auto 22px;position:relative;display:grid;place-items:center}
.medalla svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.anillo{animation:giro 18s linear infinite;transform-origin:50% 50%}
.rayos{animation:giroRev 14s linear infinite;transform-origin:50% 50%;opacity:.85}
@keyframes giro{100%{transform:rotate(360deg)}}
@keyframes giroRev{100%{transform:rotate(-360deg)}}
.medalla-num{
  position:absolute;inset:0;display:grid;place-items:center;
  font:800 clamp(62px,18vw,92px)/1 'Outfit',sans-serif;color:#fff;
}
.garantia h2{font-size:clamp(1.4rem,5.6vw,2.2rem);font-weight:800;text-transform:uppercase;line-height:1.12;margin-bottom:14px}
.garantia p{font-size:.95rem;color:var(--crema-suave);max-width:540px;margin:0 auto}

/* ---------- quién es Valeria ---------- */
.quien{border-top:1px solid var(--linea)}
.quien .antetitulo{
  font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--crema-tenue);text-align:center;margin-bottom:18px;
}
.quien-caja{display:grid;gap:18px;align-items:start}
.quien-foto{border-radius:16px;overflow:hidden;border:1px solid var(--linea-mag)}
.quien-foto img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:center}
.quien h2{font-size:clamp(1.5rem,6vw,2.1rem);font-weight:800;text-transform:uppercase;margin-bottom:10px}
.quien p{font-size:.92rem;color:var(--crema-suave);margin-bottom:10px}
.quien p:last-child{margin-bottom:0}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--linea)}
.faq-item{border-bottom:1px solid var(--linea)}
.faq-p{
  width:100%;background:none;border:0;color:#fff;
  font-family:'Outfit',sans-serif;font-size:.96rem;font-weight:600;line-height:1.4;
  text-align:left;padding:16px 34px 16px 0;cursor:pointer;position:relative;
}
.faq-p:focus-visible{outline:2px solid var(--magenta);outline-offset:2px}
.faq-ico{
  position:absolute;right:2px;top:50%;transform:translateY(-50%);
  color:var(--magenta);font-size:1.5rem;font-weight:400;line-height:1;
}
.faq-r{
  max-height:0;overflow:hidden;font-size:.89rem;color:var(--crema-suave);
  line-height:1.65;padding:0;transition:max-height .28s ease,padding .28s ease;
}
.faq-item.abierto .faq-r{max-height:480px;padding:0 0 16px}

/* ---------- cierre ---------- */
.cierre{text-align:center;border-top:1px solid var(--linea)}
.cierre h2{font-size:clamp(1.35rem,5.4vw,2rem);font-weight:700;line-height:1.3;margin-bottom:18px}

/* ---------- pie ---------- */
.pie{
  padding:30px 0 28px;border-top:1px solid var(--linea);
  font-size:.73rem;color:var(--crema-tenue);text-align:center;line-height:1.7;
}
.pie p+p{margin-top:10px}
.pie a{color:var(--crema-tenue)}

/* ---------- barra fija de móvil ---------- */
.barra-fija{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  background:rgba(13,12,11,.96);backdrop-filter:blur(8px);
  border-top:1px solid var(--linea-mag);
  padding:9px 14px calc(9px + env(safe-area-inset-bottom));
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.barra-fija .dato{font-size:.7rem;color:var(--crema-tenue);line-height:1.35}
.barra-fija .dato b{display:block;color:#fff;font-size:.88rem;font-family:'Outfit',sans-serif}
.barra-fija .boton{padding:11px 18px;animation:none;flex-shrink:0}
.barra-fija .boton-txt{font-size:.78rem}

/* ---------- reducción de movimiento ---------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .boton{animation:none}
  .anillo,.rayos{animation:none}
  .pista{scroll-behavior:auto}
}

/* =========================================================================
   ESCRITORIO — solo agranda. Una sola columna de lectura: la página se
   diseñó para el celular, que es por donde entra la mayoría.
   ========================================================================= */
@media(min-width:700px){
  body{padding-bottom:0}
  .barra-fija{display:none}
  section{padding:56px 0}
  .env{padding:0 24px}
  .panel{padding:34px 30px}
  .cabecera{padding:28px 0 0}
  .logo{width:186px}
  .titular{padding:28px 0 30px}
  .beneficios{grid-template-columns:1fr 1fr}
  .pilares{grid-template-columns:repeat(3,1fr)}
  .recursos{grid-template-columns:repeat(3,1fr)}
  .bono-lista{grid-template-columns:1fr 1fr}
  .diapo{flex:0 0 32%}
  .quien-caja{grid-template-columns:290px 1fr;gap:30px}
  .cursos li{font-size:.93rem;padding:15px 18px}
  .faq-p{font-size:1.03rem}
}