/* =====================================================================
   secciones.css - los componentes de includes/secciones.php
   ---------------------------------------------------------------------
   El diseño de cada tipo de seccion, en un solo lugar (antes cada bloque
   HTML traia su copia, con su propio <style> y sus fuentes de Google).
   Los textos se editan en el panel (Secciones); aqui solo el diseño.
     .sec-tarjeta*   tarjeta con borde animado
     .sec-preguntas* preguntas (acordeon)
     .sec-pasos*     "¿Cómo funciona?"
     .sec-cartel*    titulos grandes decorativos
   ===================================================================== */

/* ---- Tarjeta destacada ---------------------------------------------- */
.sec-tarjeta-marco{width:100%;display:flex;justify-content:center;padding:18px 15px;box-sizing:border-box}
.sec-tarjeta{width:860px;max-width:100%;border-radius:26px;position:relative;overflow:hidden;font-family:"Poppins",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
/* El borde: un degradado conico que gira detras de la tarjeta */
.sec-tarjeta::before{content:"";position:absolute;inset:-4px;border-radius:inherit;z-index:0;
  background:conic-gradient(from 180deg,#27f1ff,#b7ffea,#27f1ff,#27f1ff);animation:sec-giro 3.4s linear infinite}
.sec-borde-arcoiris::before{background:conic-gradient(from 180deg,#27f1ff,#ff6bf7,#84f2c7,#27f1ff)}
.sec-tarjeta::after{content:"";position:absolute;inset:6px;border-radius:22px;z-index:1;background:#6f1aa6;box-shadow:0 18px 45px rgba(0,0,0,.28)}
@keyframes sec-giro{to{transform:rotate(360deg)}}
.sec-tarjeta-in{position:relative;z-index:2;display:flex;align-items:center;gap:26px;padding:22px 26px}
.sec-tarjeta-img{flex:0 0 auto}
.sec-tarjeta-img img{display:block;width:100%;max-width:200px;height:auto;border-radius:14px;filter:drop-shadow(0 12px 22px rgba(0,0,0,.35))}
.sec-tarjeta-txt{flex:1 1 auto;min-width:0}
.sec-tarjeta-compacta .sec-tarjeta-img img{max-width:230px}   /* "compacta" (la de Facebook): foto mas ancha y texto mas liviano */
.sec-tarjeta-compacta .sec-tarjeta-sub{font-weight:500;line-height:1.6}
.sec-tarjeta-compacta .sec-tarjeta-sub .sec-resalte{font-weight:500}
.sec-tarjeta-tit{margin:0;font-family:'Anton',var(--fuente),sans-serif;font-weight:400;font-size:34px;line-height:1.12;letter-spacing:-.4px;color:#fff}
.sec-resalte{color:#b8ff7a}
.sec-tarjeta-sub{margin:6px 0 16px;font-size:16px;font-weight:600;line-height:1.25;color:#fff}
.sec-tarjeta-sub .sec-resalte{font-weight:800}
.sec-tarjeta .boton-degradado.sec-tarjeta-btn{display:inline-flex;align-items:center;gap:10px;padding:12px 22px;font-family:"Poppins",var(--fuente),sans-serif}
.sec-tarjeta-btn svg{width:18px;height:18px;fill:currentColor;flex:none}
@media (max-width:768px){
  .sec-tarjeta-in{flex-direction:column;text-align:center;padding:20px;gap:18px}
  .sec-tarjeta-img img{max-width:170px}
  .sec-tarjeta-tit{font-size:28px;overflow-wrap:anywhere}
  .sec-tarjeta-sub{font-size:15px;margin:6px 0 14px}
  .sec-tarjeta .boton-degradado.sec-tarjeta-btn{font-size:12.5px;padding:11px 18px}
  .sec-tarjeta::after{border-radius:20px}
  /* "Compacta" (la de Facebook): mas baja en celular */
  .sec-tarjeta-compacta .sec-tarjeta-in{padding:16px;gap:14px}
  .sec-tarjeta-compacta .sec-tarjeta-img img{max-width:180px}
  .sec-tarjeta-compacta .sec-tarjeta-tit{font-size:22px}
  .sec-tarjeta-compacta .sec-tarjeta-sub{font-size:13px;margin:4px 0 12px}
  .sec-tarjeta-compacta .boton-degradado.sec-tarjeta-btn{font-size:13px;padding:9px 18px;gap:8px}
  .sec-tarjeta-compacta .sec-tarjeta-btn svg{width:15px;height:15px}
}

/* ---- Preguntas (acordeon) ------------------------------------------- */
.sec-preguntas{max-width:960px;margin:0 auto;padding:2px 18px;box-sizing:border-box}
.sec-preguntas.sec-con-titulo{padding:30px 18px}
.sec-preguntas + .sec-preguntas{margin-top:20px}   /* varios grupos seguidos (la pagina de preguntas frecuentes) */
.sec-preguntas + .boton-centro{margin:-22px 0 40px}   /* un boton justo despues ("volver al inicio"): pegado a las preguntas */
.sec-preguntas-tit{margin:0 0 30px;font-family:"Anton","Impact","Arial Black",sans-serif;font-size:46px;font-weight:400;text-align:center;color:#fff}
.sec-preg{margin:18px 0;border-radius:999px;overflow:hidden}
.sec-preg-h{margin:0;font:inherit}
.sec-preg-q{width:100%;display:flex;align-items:center;gap:12px;margin:0;padding:16px 22px;border:0;border-radius:999px;cursor:pointer;
  background:#fff;color:#6b2aa6;box-shadow:0 8px 16px rgba(0,0,0,.12);text-align:left;text-transform:none;
  font:500 14.6px/1.2 "Poppins",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;letter-spacing:.15px}
.sec-preg-q > span{flex:1 1 auto;min-width:0}
.sec-preg-q:focus-visible{outline:0;box-shadow:0 0 0 3px #fff,0 0 0 5px #c084fc}
.sec-chevron{flex:0 0 auto;margin-left:auto;width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg)}
.sec-preg-a{padding:10px 22px 16px;border-radius:0 0 16px 16px;background:#6b2aa6;color:#fff;
  font:13.8px/1.5 "Poppins",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
.sec-preg-a p{margin:0}
.sec-preg-a p + p{margin-top:1.5em}
.sec-preg-a a{color:#fff;text-decoration:underline;font-weight:700}
.sec-preg.abierta{border-radius:16px}
.sec-preg.abierta .sec-preg-q{background:#6b2aa6;color:#fff;border-radius:16px 16px 0 0;box-shadow:none}
.sec-preg.abierta .sec-chevron{transform:rotate(-135deg)}
.sec-preguntas + .sec-preguntas-mas{margin:5px 0 36px}
@media (max-width:680px){
  .sec-preguntas-tit{font-size:36px}
  .sec-preg{margin:16px 0}
  .sec-preg-q{font-size:13.6px;padding:12px 16px}
  .sec-preg-a{font-size:13.2px}
}

/* ---- Pasos ("¿Cómo funciona?") -------------------------------------- */
.sec-pasos{padding:15px 40px 20px;text-align:center}
.sec-pasos-tit{margin:0 0 24px;font-family:'Bebas Neue',var(--fuente),sans-serif;font-weight:400;font-size:clamp(2.8rem,6vw,4.5rem);line-height:1.1;letter-spacing:1px;color:#fff}
.sec-pasos-lista{display:flex;justify-content:center;align-items:flex-start;flex-wrap:wrap;gap:24px;max-width:1100px;margin:0 auto;padding-bottom:24px}
.sec-paso{position:relative;flex:1 1 260px;max-width:320px;padding:32px 32px 46px;border-radius:20px;background:#fff;text-align:center;cursor:pointer;
  box-shadow:0 8px 30px rgba(0,0,0,.12);transition:transform .25s ease,box-shadow .25s ease,background .4s ease}
.sec-paso:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,0,0,.2)}
.sec-paso-cab{display:block;width:100%;margin:0;padding:0;border:0;background:none;color:inherit;font:inherit;text-transform:none;cursor:pointer}
.sec-paso-cab:focus-visible{outline:0}
.sec-paso:has(.sec-paso-cab:focus-visible){box-shadow:0 0 0 3px #fff,0 0 0 6px #c084fc,0 8px 30px rgba(0,0,0,.12)}
.sec-paso-n{display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin:0 auto 12px;border-radius:50%;
  background:#2d2d2d;color:#fff;font-size:1.1rem;font-weight:900;transition:background .4s ease,color .4s ease}
.sec-paso-t{display:block;font-family:'Anton',var(--fuente),sans-serif;font-size:1.6rem;font-weight:400;letter-spacing:-.5px;color:#2d2d2d;transition:color .4s ease}
.sec-paso-flecha{position:absolute;z-index:2;left:50%;bottom:-18px;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:50%;background:#ede9fe;box-shadow:0 2px 8px rgba(0,0,0,.12);transition:background .2s ease}
.sec-paso-flecha svg{width:16px;height:16px;fill:none;stroke:#7c3aed;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s ease}
/* Lo que se despliega: de 0 a su alto, con animacion (sin adivinar un max-height) */
.sec-paso-mas{display:grid;grid-template-rows:0fr;opacity:0;padding:0 2px;transition:grid-template-rows .5s cubic-bezier(.4,0,.2,1),opacity .4s ease}
.sec-paso-mas-in{min-height:0;overflow:hidden}
.sec-paso-texto{margin-top:14px;padding-top:14px;border-top:1px solid #f0f0f0;text-align:left;
  font:500 1rem/1.7 'Poppins',var(--fuente),sans-serif;color:#7f38ee;transition:color .4s ease}
.sec-paso-texto p{margin:0}
.sec-paso-texto p + p{margin-top:.8em}
.sec-paso-texto a{color:inherit;text-decoration:underline}
.sec-paso-btn{padding-bottom:14px;text-align:center}
.sec-paso-btn .boton-degradado{margin-top:14px;padding:10px 34px;font-family:"Poppins",var(--fuente),sans-serif;box-shadow:0 2px 4px rgba(0,0,0,.08)}
/* Abierto */
.sec-paso.abierto{transform:none;background:linear-gradient(181deg,#2528ce -40.98%,#b84fff 107.6%);box-shadow:0 8px 30px rgba(0,0,0,.2)}
.sec-paso.abierto .sec-paso-n{background:rgba(255,255,255,.2);color:#fff}
.sec-paso.abierto .sec-paso-t,.sec-paso.abierto .sec-paso-texto{color:#fff}
.sec-paso.abierto .sec-paso-texto{border-top-color:rgba(255,255,255,.25)}
.sec-paso.abierto .sec-paso-mas{grid-template-rows:1fr;opacity:1}
.sec-paso.abierto .sec-paso-flecha{background:#7c3aed}
.sec-paso.abierto .sec-paso-flecha svg{stroke:#fff;transform:rotate(180deg)}
@media (max-width:680px){
  .sec-pasos{padding:40px 6px 60px}
  .sec-pasos-lista{gap:32px}
  .sec-paso{flex:1 1 100%;max-width:100%}
}

/* ---- Carteles (titulos grandes) ------------------------------------- */
.sec-cartel h2,.sec-cartel p{font-weight:400}
/* Sobre el fondo de la web (el blanco del diseño original lo tapaba el "CSS adicional"
   de WordPress; aqui ya es el diseño que se veia): "¡Tú podrías ser / el próximo ganador!" */
.sec-cartel-dos{margin:0;padding:30px 15px 0;background:transparent;color:#fff;text-align:center}
.sec-cartel-dos h2{max-width:1100px;margin:0 auto;font-family:'Anton',var(--fuente),sans-serif;font-size:clamp(28px,6vw,50px);line-height:1.1;letter-spacing:1px;color:#fff}
.sec-cartel-dos p{margin:5px 0 0;font-family:Arial,sans-serif;font-size:clamp(16px,3.5vw,22px)}
/* Tres lineas, la ultima grande y verde ("Confiaron / en su suerte y / GANARON") */
.sec-cartel-ganaron{padding:20px 20px 0;background:transparent;text-align:center}
.sec-cartel-ganaron h2,.sec-cartel-ganaron span,.sec-cartel-ganaron .sec-cartel-acento{font-family:'Anton',Impact,'Arial Black',sans-serif;font-weight:400;color:#fff}
.sec-cartel-ganaron h2{display:inline-block;margin:0;font-size:54px;line-height:1.1}
.sec-cartel-ganaron span{display:inline-block;margin-left:8px;font-size:26px}
.sec-cartel-ganaron .sec-cartel-acento{display:block;margin:5px 0 0;font-size:74px;line-height:1.1;color:#c4fcdb}
@media (max-width:600px){
  .sec-cartel-ganaron h2{font-size:32px}
  .sec-cartel-ganaron span{font-size:18px}
  .sec-cartel-ganaron .sec-cartel-acento{font-size:44px;margin-top:8px}
}
/* Imagen y texto grande ("Aquí están todas las respuestas...") */
.sec-cartel-imagen{width:100%;max-width:960px;margin:0 auto;padding:70px 22px 40px;box-sizing:border-box;background:transparent;overflow:visible}
.sec-cartel-in{width:100%;display:flex;justify-content:space-between;align-items:flex-start;gap:28px}
.sec-cartel-txt{flex:0 0 54%;font-family:'Anton',var(--fuente),sans-serif;line-height:1.05;color:#fff}
.sec-cartel-txt .l1,.sec-cartel-txt .l2{display:flex;align-items:baseline;gap:12px}
.sec-cartel-txt .l1{margin:0 0 12px}
.sec-cartel-txt .l1 .big{font-size:clamp(48px,5.8vw,86px)}
.sec-cartel-txt .l1 .small{font-size:clamp(26px,3.4vw,48px)}
.sec-cartel-txt .l2{margin:0 0 18px}
.sec-cartel-txt .l2 .small{font-size:clamp(32px,4vw,58px)}
.sec-cartel-txt .l2 .acento{font-size:clamp(70px,8.2vw,130px);color:#c4fcdb;white-space:nowrap}
.sec-cartel-txt .l3{font-size:clamp(26px,3.6vw,54px);line-height:1.15;padding-bottom:4px}
.sec-cartel-img{flex:0 0 46%;display:flex;justify-content:flex-start;align-items:flex-start}
.sec-cartel-img img{display:block;width:auto;height:auto;max-width:100%;max-height:clamp(220px,26vw,320px);object-fit:contain}
@media (max-width:900px){
  .sec-cartel-imagen{padding:40px 16px 64px}
  .sec-cartel-in{flex-direction:column;align-items:center;gap:18px}
  .sec-cartel-txt{width:100%;text-align:center}
  .sec-cartel-txt .l1,.sec-cartel-txt .l2{display:block;margin:0}
  .sec-cartel-txt .l1 .big{display:block;font-size:clamp(44px,11vw,62px);line-height:1;margin-bottom:6px}
  .sec-cartel-txt .l1 .small{display:block;font-size:clamp(22px,6vw,30px);margin-bottom:12px}
  .sec-cartel-txt .l2 .small{display:inline-block;font-size:clamp(26px,7.5vw,34px);margin-right:8px}
  .sec-cartel-txt .l2 .acento{display:inline-block;font-size:clamp(52px,13vw,82px);line-height:.95}
  .sec-cartel-txt .l3{margin-top:14px;font-size:clamp(22px,6.5vw,30px);line-height:1.2}
  .sec-cartel-img img{max-width:220px;margin-left:6px}
}

@media (prefers-reduced-motion:reduce){
  .sec-tarjeta::before{animation:none}
  .sec-paso,.sec-paso-mas,.sec-paso-flecha svg{transition:none}
  .sec-paso:hover{transform:none}
}