/* looplica.es — estilos de la web comercial. Marca looplica V3 (spec del campus 16/09).
   Letra alojada aquí: nada se carga de Google. */
@font-face{
  font-family:'Montserrat';font-style:normal;font-weight:400 800;font-display:swap;
  src:url('../fuentes/montserrat-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
:root{
  --fondo:#FFFFFF; --suave:#F5F8FF; --tinta:#111B30; --tinta-2:#566174;
  --borde:#E2E9ED; --azul:#315DF4; --azul-osc:#2448C9; --radio:22px;
}
*,*::before,*::after{box-sizing:border-box}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--fondo);color:var(--tinta);font:400 16px/1.6 Montserrat,'Segoe UI',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
img,video,svg{max-width:100%;display:block}
a{color:var(--azul)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--azul);outline-offset:3px}
.seccion--oscura a:focus-visible{outline-color:#fff}
h1,h2,h3{font-weight:800;letter-spacing:-.02em;line-height:1.15;margin:0 0 .5em}
h1{font-size:clamp(2.1rem,6vw,3.4rem)}
h2{font-size:clamp(1.6rem,4vw,2.2rem)}
h3{font-size:1.1rem}
p{margin:0 0 1em}
.envoltura{max-width:1080px;margin:0 auto;padding:0 16px}
@media(min-width:768px){.envoltura{padding:0 32px}}

/* Barra superior */
.barra{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:18px;padding-bottom:18px}
.logo{font-weight:800;font-size:1.45rem;letter-spacing:-.03em;color:var(--azul);text-decoration:none}
.barra nav{display:none;gap:22px;align-items:center}
.barra nav a{color:var(--tinta);text-decoration:none;font-weight:600;font-size:.92rem}
@media(min-width:860px){.barra nav{display:flex}}
.barra nav a.boton{color:#fff;padding:10px 20px}
.barra nav a.barra-acceso{color:var(--azul);font-size:.8rem}

/* Botones */
.boton{display:inline-block;padding:13px 24px;border-radius:999px;background:var(--azul);color:#fff;font-weight:700;text-decoration:none;border:2px solid var(--azul);font:inherit;font-weight:700;cursor:pointer}
.boton:hover{background:var(--azul-osc);border-color:var(--azul-osc)}
/* Cabecera: texto a la izquierda, capturas del panel y del móvil a la derecha */
.cabecera{padding-bottom:clamp(40px,7vw,80px)}
.cabecera-rejilla{display:grid;gap:40px;align-items:center;padding-top:clamp(24px,5vw,56px)}
@media(min-width:900px){.cabecera-rejilla{grid-template-columns:1fr 1.1fr}}
.acento{color:var(--azul)}
.entradilla{font-size:1.15rem;color:var(--tinta-2);max-width:34ch}
.cabecera-boton{margin-top:20px}
.cabecera-boton+.ayuda{margin-top:14px}
/* Composición de la cabecera: el progreso detrás, grande, y el móvil girado delante */
.cabecera{overflow-x:clip}
.cabecera-visual{min-width:0}
.cabecera-visual .aviso{margin-top:16px}
.composicion{position:relative}
.ventana{background:#fff;border:1px solid var(--borde);border-radius:16px;box-shadow:0 14px 40px rgba(17,27,48,.12);overflow:hidden;padding-top:28px;position:relative}
.ventana::before{content:"";position:absolute;top:11px;left:14px;width:7px;height:7px;border-radius:50%;background:#C9D2DC;box-shadow:12px 0 #C9D2DC,24px 0 #C9D2DC}
.ventana img{width:100%;height:auto;border-top:1px solid var(--borde)}
.ventana--margen{background:var(--suave);padding:40px 18px 18px}
.ventana--margen img{border:1px solid var(--borde);border-radius:10px}
/* Móvil de la cabecera: render con la pantalla del campus ya dentro (imagen de ChatGPT, 09/10/2026).
   Su fondo blanco se funde con la página; en la cabecera la "pantalla" viva es el vídeo de la sección Un entorno seguro. */
.movil-girado{position:relative;width:min(84%,330px);margin:-80px auto 0}
.telefono{display:block;width:100%;height:auto}
@media(min-width:900px){
  .composicion{padding-bottom:90px}
  .composicion>.ventana{width:84%;margin-left:auto}
  .movil-girado{position:absolute;left:0;top:24%;width:40%;margin:0}
  .cabecera-visual .aviso{width:46%;margin-top:28px}
}
/* Pantalla ancha: la ventana crece a su tamaño de lectura y se sale por la derecha */
@media(min-width:1100px){
  .composicion{padding-bottom:70px}
  .composicion>.ventana{width:720px;margin-left:100px}
  .movil-girado{left:-10px;top:130px;width:290px}
  .cabecera-visual .aviso{width:230px}
}

/* Vídeo de 90 s en ventana emergente (sin relleno: un clic en el propio <dialog> es un clic en el fondo) */
.modal-video{width:min(900px,calc(100% - 32px));max-width:none;padding:0;border:0;border-radius:24px;background:var(--tinta);color:#fff;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.45)}
.modal-video::backdrop{background:rgba(17,27,48,.78)}
.modal-video video{width:100%;aspect-ratio:16/9;background:#0F1526}
.modal-video .aviso{margin:0;padding:12px 16px 14px}
.modal-cerrar{position:absolute;top:12px;right:12px;z-index:1;width:40px;height:40px;border:0;border-radius:50%;background:rgba(255,255,255,.92);color:var(--tinta);font:700 18px/1 Montserrat,sans-serif;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.3)}
.modal-cerrar:hover{background:#fff}
.modal-cerrar:focus-visible{outline:3px solid #fff;outline-offset:2px}
.ver-video{margin:28px 0 0}
.aviso{font-size:.85rem;color:var(--tinta-2);text-align:center;margin-top:12px}

/* Secciones */
.seccion{padding:clamp(56px,9vw,96px) 0}
.seccion--suave{background:var(--suave)}
.antetitulo{display:block;font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--azul);margin-bottom:10px}
.estrecha{max-width:720px}
.seccion--junta{padding-top:clamp(32px,5vw,56px)}

/* Fondos: halos suaves rosa, lila y azul en las esquinas, detrás del contenido */
.brillo{position:relative;overflow:clip}
.brillo>*{position:relative;z-index:1}
/* Cada halo cabe en alto dentro de su sección (se desvanece antes del borde: sin cortes) y se sale por los lados */
.brillo::before,.brillo::after{content:"";position:absolute;z-index:0;pointer-events:none;width:var(--w,780px);height:var(--h,540px);background:radial-gradient(closest-side,var(--c) 15%,rgba(255,255,255,0))}
.brillo::before{--c:#FBE4EF}
.brillo::after{--c:#E3EBFF}
.brillo--cabecera::before{--c:#E9E4FA;--h:600px;top:60px;left:-340px}
.brillo--cabecera::after{--w:860px;--h:600px;top:220px;right:-300px}
.brillo--tematicas::before{bottom:30px;left:-360px}
.brillo--tematicas::after{--c:#E9E4FA;--h:480px;top:30px;right:-320px}
.brillo--seguro::before{--c:#E9E4FA;--h:460px;top:30px;right:-300px}
.brillo--seguro::after{--h:460px;bottom:30px;left:-340px}
.brillo--trabajo::before{--c:#E9E4FA;top:80px;right:-300px}
.brillo--trabajo::after{--c:#FBE4EF;--h:600px;bottom:160px;left:-380px}
.brillo--contacto::before{top:40px;left:-340px}
.brillo--contacto::after{--c:#E9E4FA;bottom:40px;right:-300px}

/* Preguntas */
.faq details{border-bottom:1px solid var(--borde);padding:16px 0}
.faq summary{font-weight:700;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';float:right;color:var(--azul);font-weight:800}
.faq details[open] summary::after{content:'–'}
.faq details p{margin:12px 0 0;color:var(--tinta-2)}

/* Formulario */
.formulario{display:grid;gap:16px;max-width:640px}
.campo label,.campo legend{display:block;font-weight:700;margin-bottom:6px}
.campo input[type=text],.campo input[type=email],.campo textarea{width:100%;padding:12px 14px;border:1px solid #8A94A6;border-radius:12px;font:inherit;color:var(--tinta);background:#fff}
.campo textarea{min-height:110px;resize:vertical}
.campo fieldset{border:0;padding:0;margin:0}
.campo .opcion{display:flex;gap:8px;align-items:center;margin:4px 0;font-weight:400}
.ayuda{font-size:.88rem;color:var(--tinta-2)}
.trampa{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}

/* Pie y páginas legales */
.pie{border-top:1px solid var(--borde);padding:32px 0;font-size:.92rem;color:var(--tinta-2)}
.pie .envoltura{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 32px}
.pie nav{display:flex;flex-wrap:wrap;gap:8px 22px}
.pie a{color:var(--tinta-2)}
.cabecera-simple{border-bottom:1px solid var(--borde)}
.acciones{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;margin-top:28px}
.entradilla--ancha{max-width:60ch}
.legal{max-width:760px;padding-top:48px;padding-bottom:72px}
.legal h1{font-size:clamp(1.8rem,5vw,2.4rem)}
.legal h2{font-size:1.25rem;margin-top:2em}

/* Secciones alternas: texto a un lado y una imagen viva al otro */
.dos-columnas{display:grid;gap:32px;align-items:center}
@media(min-width:900px){
  .dos-columnas{grid-template-columns:1fr 1.1fr;gap:56px}
  .dos-columnas--escenas{grid-template-columns:1.2fr 1fr;gap:48px}
  .dos-columnas--inversa{grid-template-columns:1.1fr 1fr}
  .dos-columnas--inversa>:last-child{order:-1}
  .dos-columnas--formadores{grid-template-columns:1.2fr 1fr}
  .dos-columnas--contacto{grid-template-columns:1fr 1.05fr;gap:64px}
}
video.bucle{width:100%;object-fit:cover;background:var(--suave);cursor:pointer}

/* Temáticas: el vídeo de la reunión con las situaciones alrededor */
.escenas-video{max-width:380px;margin:0 auto 0 0;border:6px solid #fff;border-radius:24px;overflow:hidden;box-shadow:0 18px 44px rgba(17,27,48,.18);position:relative;z-index:1}
.escenas-video video{aspect-ratio:4/5;width:100%;object-fit:cover}
.chips{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.chips li{display:flex;align-items:center;gap:8px;background:#fff;border-radius:999px;padding:8px 16px;font-size:15px;font-weight:600;color:var(--tinta);box-shadow:0 6px 18px rgba(17,27,48,.10)}
.chips li::before{content:"";flex:none;width:16px;height:16px;background:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23315DF4%27 stroke-width=%272%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M4 5h16v11H9l-5 4z%27/%3E%3C/svg%3E") center/contain no-repeat}
@media(min-width:900px){
  .escenas{display:flex;align-items:center}
  .escenas-video{flex:1 1 auto;min-width:0}
  .chips{flex-direction:column;align-items:flex-start;gap:16px}
  .chips li{transform:rotate(-3deg)}
  .chips li:nth-child(even){transform:rotate(-1deg)}
  .escenas{position:relative}
  .escenas .chips--encima{position:absolute;right:-110px;top:50%;transform:translateY(-50%);z-index:2;margin:0;gap:14px}
  .escenas .chips--encima li{padding:12px 22px 12px 18px;font-size:16px;box-shadow:0 12px 30px rgba(17,27,48,.18)}
}

/* Entorno seguro: el móvil con la persona en un círculo */
.movil-persona{position:relative;width:min(100%,460px);margin:0 auto;padding:0 0 22% 0}
.charla{width:68%;display:flex;flex-direction:column;gap:10px;font-size:14px;line-height:1.35}
.charla p{margin:0}
.charla-burbuja{max-width:88%;padding:10px 14px;border-radius:18px;background:#fff;color:var(--tinta);box-shadow:0 10px 26px rgba(17,27,48,.10)}
.charla-fila{display:flex;align-items:flex-end;gap:8px}
.charla-fila img{width:28px;height:28px;border-radius:50%;object-fit:cover;flex:none}
.charla-fila .charla-burbuja{border-bottom-left-radius:6px}
.charla-tu{align-self:flex-end;background:var(--azul);color:#fff;border-bottom-right-radius:6px}
.charla-coach{align-self:flex-start;max-width:80%;padding:8px 12px;border:1px solid #F2D48A;border-radius:14px;background:#FFF7E0;font-size:13px;box-shadow:0 10px 26px rgba(17,27,48,.08)}
.charla-coach b{display:block;color:#8A6410;font-size:12px}
video.redondo{position:absolute;width:62%;aspect-ratio:1/1;right:0;bottom:0;border-radius:50%;border:6px solid #fff;box-shadow:0 18px 44px rgba(17,27,48,.22);object-fit:cover;z-index:1}

/* Aprender haciendo: la ayuda se retira en tres pasos */
.andamio{list-style:none;margin:28px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:16px 34px}
.andamio li{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;font-weight:700;font-size:15px}
.andamio li+li::before{content:"→";position:absolute;left:-26px;top:14px;color:var(--azul);font-weight:700;font-size:18px}
@media(min-width:480px){.andamio{column-gap:52px}.andamio li+li::before{left:-38px}}
.andamio-icono{display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:16px;background:#fff;border:1px solid #DCE4FF;box-shadow:0 8px 22px rgba(49,93,244,.12)}
.andamio-icono svg{width:26px;height:26px;fill:none;stroke:var(--azul);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* Cómo funciona: tres ingredientes y la línea de cuatro pasos */
.ingredientes{position:relative;display:flex;justify-content:center;padding:24px 0}
.ingredientes::before{content:"";position:absolute;left:50%;top:50%;width:300px;aspect-ratio:1;border:1px solid #DCE4FF;border-radius:50%;transform:translate(-62%,-50%);pointer-events:none}
.chips--trabajo{position:relative;margin:0}
.chips--trabajo li{padding:12px 24px 12px 18px;font-size:16px;box-shadow:0 12px 30px rgba(17,27,48,.12)}
.chips--trabajo li::before{width:20px;height:20px}
.chips--trabajo li:nth-child(1)::before{background-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23315DF4%27 stroke-width=%272%27 stroke-linejoin=%27round%27 stroke-linecap=%27round%27%3E%3Cpath d=%27M6 3h9l4 4v14H6z%27/%3E%3Cpath d=%27M9 12h7M9 16h7%27/%3E%3C/svg%3E")}
.chips--trabajo li:nth-child(2)::before{background-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23315DF4%27 stroke-width=%272%27 stroke-linejoin=%27round%27 stroke-linecap=%27round%27%3E%3Ccircle cx=%279%27 cy=%278%27 r=%273.5%27/%3E%3Cpath d=%27M2.5 20c.6-3.6 3.2-5.5 6.5-5.5s5.9 1.9 6.5 5.5%27/%3E%3Cpath d=%27M16 4.8a3.3 3.3 0 0 1 0 6.4M18 14.8c2 .7 3.2 2.4 3.5 5.2%27/%3E%3C/svg%3E")}
.chips--trabajo li:nth-child(3)::before{background-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23315DF4%27 stroke-width=%272%27 stroke-linejoin=%27round%27 stroke-linecap=%27round%27%3E%3Cpath d=%27M2 9l10-5 10 5-10 5z%27/%3E%3Cpath d=%27M6 11v5c3 2.5 9 2.5 12 0v-5M22 9v6%27/%3E%3C/svg%3E")}
@media(min-width:900px){
  .chips--trabajo{gap:18px}
  .chips--trabajo li:nth-child(2){margin-left:28px}
}
.pasos-linea{list-style:none;margin:48px 0 0;padding:0;display:grid;gap:22px}
.pasos-linea li{position:relative;padding-left:30px}
.pasos-linea li::before{content:"";position:absolute;left:0;top:7px;width:9px;height:9px;border-radius:50%;background:var(--azul)}
.pasos-linea li:not(:last-child)::after{content:"";position:absolute;left:4px;top:24px;bottom:-16px;width:1px;background:#C9D4F5}
.pasos-n{display:block;font-size:.8rem;font-weight:800;letter-spacing:.06em;color:var(--azul)}
.pasos-linea h3{font-size:1rem;margin:2px 0 4px}
.pasos-linea p{margin:0;font-size:.92rem;color:var(--tinta-2)}
@media(min-width:760px){
  .pasos-linea{grid-template-columns:repeat(4,1fr);gap:28px}
  .pasos-linea li{padding:0}
  .pasos-n{margin-bottom:26px}
  .pasos-linea li::before{top:26px}
  .pasos-linea li:not(:last-child)::after{left:18px;right:-10px;top:26px;bottom:auto;width:auto;height:9px;background:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 8 10%27 fill=%27none%27 stroke=%27%23315DF4%27 stroke-width=%271.6%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M2 1.5L6.5 5 2 8.5%27/%3E%3C/svg%3E") right center/7px 9px no-repeat,linear-gradient(#C9D4F5,#C9D4F5) left center/calc(100% - 3px) 1px no-repeat}
}

/* Formadores: texto y foto en tarjeta redondeada */
.boton--borde-azul{background:#fff;color:var(--azul)}
.boton--borde-azul:hover{background:var(--suave);color:var(--azul-osc);border-color:var(--azul-osc)}
.foto-tarjeta{width:100%;max-width:440px;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:50% 30%;border-radius:24px;box-shadow:0 18px 44px rgba(17,27,48,.16);justify-self:end}

/* Contacto: texto a la izquierda, formulario en tarjeta blanca */
.formulario--tarjeta{max-width:none;background:#fff;border-radius:24px;padding:clamp(20px,4vw,32px);box-shadow:0 24px 60px rgba(17,27,48,.12)}
.formulario--tarjeta .boton{width:100%}

/* Tenéis el control: banda oscura con el panel */
.seccion--oscura{background:var(--tinta);color:#fff}
.titular{font-size:clamp(2.4rem,7vw,3.8rem)}
.seccion--oscura .entradilla{color:#C9D3E0}
#control{overflow-x:clip}
.chips--oscuro{margin:0}
.chips--oscuro li{box-shadow:0 8px 24px rgba(0,0,0,.35)}
@media(min-width:900px){.chips--oscuro{justify-self:center}}
/* Escaparate de tres pantallas: la central de frente y las laterales giradas hacia ella */
.escaparate{display:grid;gap:20px;margin-top:48px}
.escaparate-centro{order:-1}
.escaparate .ventana{border-color:rgba(255,255,255,.12);box-shadow:0 24px 60px rgba(0,0,0,.45)}
@media(min-width:1000px){
  .escaparate{display:block;position:relative;height:520px;margin-top:56px;perspective:1400px}
  .escaparate::after{content:"";position:absolute;left:-10%;right:-10%;bottom:-70px;height:200px;background:radial-gradient(ellipse 50% 50% at 50% 50%,rgba(49,93,244,.35),rgba(49,93,244,0) 70%);pointer-events:none}
  .escaparate .ventana{position:absolute;top:50%}
  .escaparate-centro{left:21%;width:58%;transform:translateY(-50%);z-index:2}
  .escaparate-izq,.escaparate-der{width:40%;z-index:1}
  .escaparate-izq{left:-13%;transform:translateY(-46%) rotateY(28deg)}
  .escaparate-der{right:-13%;transform:translateY(-46%) rotateY(-28deg)}
  .escaparate-izq img,.escaparate-der img{aspect-ratio:1/1;object-fit:cover;object-position:top}
}
.aviso--oscuro{color:#C9D3E0}


/* Cabecera: dos líneas de entradilla y botón + enlace al vídeo */
.entradilla--suave{font-size:1rem;margin-top:-10px}
.cabecera-acciones{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin:8px 0 18px}
.enlace-flecha{font-weight:700;color:var(--azul);text-decoration:none}
.enlace-flecha:hover{text-decoration:underline}

/* ---- Página para formadores ---- */
.titulo-centrado{text-align:center;max-width:30ch;margin-left:auto;margin-right:auto}
@media(min-width:760px){.titulo-centrado .acento{display:block}}
.cabecera-acciones--centradas{margin-top:24px}
/* Cabecera: el móvil con dos tarjetas flotando a los lados (decorativas) */
.movil-tarjetas{position:relative;width:200px;margin:0 auto}
.tarjeta-flotante{position:absolute;z-index:1;width:148px;padding:12px 14px;background:#fff;border-radius:18px;box-shadow:0 16px 40px rgba(17,27,48,.16);font-size:13px;line-height:1.3}
.tarjeta-flotante p{margin:0 0 8px}
.tarjeta-flotante-titulo{font-weight:800;color:var(--tinta)}
.tarjeta-flotante--izq{left:-64px;top:18%}
.tarjeta-flotante--der{right:-64px;bottom:16%}
.tarjeta-lista,.tarjeta-barras{list-style:none;margin:0;padding:0;display:grid;gap:7px;color:var(--tinta-2);font-weight:600}
.tarjeta-lista li{display:flex;align-items:center;gap:8px}
.tarjeta-lista svg{flex:none;width:22px;height:22px;padding:3px;border-radius:7px;background:var(--suave);fill:none;stroke:var(--azul);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tarjeta-barras span{display:block;height:6px;margin-top:4px;border-radius:99px;background:linear-gradient(var(--azul),var(--azul)) 0 0/var(--v) 100% no-repeat,#E3EBFF}
@media(min-width:900px){
  .movil-tarjetas{width:260px}
  .tarjeta-flotante{width:176px;padding:14px 16px}
  .tarjeta-flotante--izq{left:-138px}
  .tarjeta-flotante--der{right:-138px}
}
/* Que la práctica continúe: tres momentos unidos por flechas */
@media(min-width:900px){.dos-columnas--continua{grid-template-columns:1fr 1.15fr;gap:48px}}
.recorrido{list-style:none;margin:0;padding:0;display:grid;gap:34px;text-align:center}
.recorrido li{position:relative;display:flex;flex-direction:column;align-items:center}
.recorrido .andamio-icono{margin-bottom:12px}
.recorrido h3{font-size:1rem;margin:0 0 4px}
.recorrido p{margin:0;font-size:.92rem;color:var(--tinta-2)}
.recorrido li+li::before{content:"↓";position:absolute;top:-30px;left:50%;transform:translateX(-50%);color:var(--azul);font-weight:700;font-size:18px}
@media(min-width:600px){
  .recorrido{grid-template-columns:repeat(3,1fr);gap:28px}
  .recorrido li+li::before{content:"→";top:16px;left:-14px;transform:translateX(-50%)}
}
/* Con tu método: dos tarjetas, la línea de cuatro pasos y la píldora final */
.tarjetas-dos{display:grid;gap:20px;margin-top:36px}
@media(min-width:900px){.tarjetas-dos{grid-template-columns:1fr 1fr;gap:28px}}
.tarjeta{background:#fff;border:1px solid var(--borde);border-radius:var(--radio);padding:28px clamp(22px,3vw,32px);box-shadow:0 14px 40px rgba(17,27,48,.07)}
.tarjeta--azul{background:var(--suave);border-color:#DCE4FF}
.tarjeta h3{font-size:1.2rem;margin-bottom:16px}
.lista-check{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.lista-check li{display:flex;align-items:center;gap:12px;font-weight:600}
.lista-check li::before{content:"";flex:none;width:26px;height:26px;border-radius:50%;background:#E3EBFF url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23315DF4%27 stroke-width=%272.6%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M5 12.5l4.5 4.5L19 7.5%27/%3E%3C/svg%3E") center/15px no-repeat}
.pildora-info{display:flex;width:fit-content;max-width:100%;align-items:center;gap:10px;margin:44px auto 0;padding:12px 22px;border-radius:999px;background:var(--suave);border:1px solid #DCE4FF;font-weight:700;color:var(--tinta)}
.pildora-info svg{flex:none;width:20px;height:20px;fill:none;stroke:var(--azul);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
/* Ensayan: la portada del vídeo con el botón de reproducir encima */
.poster-video{display:block;position:relative;cursor:pointer}
.poster-video img{border-top:1px solid var(--borde);aspect-ratio:1280/600;object-fit:cover;object-position:top}
.poster-play{position:absolute;left:50%;top:50%;display:flex;align-items:center;justify-content:center;width:76px;height:76px;border-radius:50%;background:#fff;box-shadow:0 14px 36px rgba(17,27,48,.3);transform:translate(-50%,-50%);transition:transform .2s}
.poster-play svg{width:30px;height:30px;margin-left:4px;fill:var(--azul)}
.poster-video:hover .poster-play{transform:translate(-50%,-50%) scale(1.06)}
/* Cada persona: tres columnas con insignia redonda, sobre fondo oscuro */
.columnas-tres{list-style:none;margin:44px 0 0;padding:0;display:grid;gap:36px;text-align:center}
@media(min-width:760px){.columnas-tres{grid-template-columns:repeat(3,1fr);gap:40px}}
.columnas-tres h3{margin:16px 0 6px}
.columnas-tres p{margin:0 auto;max-width:28ch;color:#C9D3E0}
.insignia{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:50%;background:#1F2C4D;border:1px solid rgba(255,255,255,.16)}
.insignia svg{width:28px;height:28px;fill:none;stroke:#A9BDFF;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.nota-oscura{margin:48px 0 0;padding-top:24px;border-top:1px solid rgba(255,255,255,.14);text-align:center;font-size:.92rem;color:#C9D3E0}

/* Logo en imagen (Ana, 09/10/2026): azul en la web, negro en la página de formadores */
.logo{display:inline-flex;align-items:center;line-height:0}
.logo img{height:30px;width:auto}
.pie .logo img{height:26px}