/* ============================================================
   Expertos Betterware — estilos del sitio
   Aqui viven colores, tarjetas, carrusel, experiencias,
   reconocimiento y administracion. No hay estilos en index.html.
   ============================================================ */
/* ============================================================
   BASE — móvil primero
   ============================================================ */
:root{
  --turquesa:#00AEC7;
  --turquesa-osc:#0092A8;
  --turquesa-suave:#E3F6F9;
  --marino:#0A3A53;
  --naranja:#F5691D;
  --blanco:#FFFFFF;
  --gris-fondo:#F4F8F9;
  --gris-linea:#E3EAEC;
  --gris-texto:#5C7480;
  --r:14px; --r-chico:10px; --r-boton:12px;
  --sombra:0 2px 10px rgba(10,58,83,.07);
  --fuente:"Plus Jakarta Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
body{
  margin:0; background:var(--blanco); color:var(--marino);
  font-family:var(--fuente); font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block; max-width:100%}
button,input,select,textarea{font:inherit; color:inherit}
button{cursor:pointer; background:none; border:0; padding:0}
a{color:inherit; text-decoration:none}
:focus-visible{outline:3px solid var(--turquesa); outline-offset:2px; border-radius:6px}
.oculto{display:none !important}
.contenedor{max-width:1120px; margin:0 auto; padding:0 16px}
@media(min-width:720px){ .contenedor{padding:0 24px} }

svg.ic{width:18px; height:18px; stroke:currentColor; stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0}

/* ============================================================
   ENCABEZADO
   ============================================================ */
.cabecera{position:sticky; top:0; z-index:50; background:var(--blanco); box-shadow:0 1px 0 var(--gris-linea)}
.cab-fila{display:flex; align-items:center; gap:10px; padding:10px 16px; max-width:1120px; margin:0 auto}
@media(min-width:720px){ .cab-fila{padding:12px 24px; gap:16px} }

.logo{display:flex; align-items:center; gap:9px; flex-shrink:0}
.logo-betterware{width:142px; height:auto; display:block}
.logo-contexto{padding-left:9px; border-left:1px solid var(--gris-linea)}
.logo-contexto b{display:block; font-size:16px; font-weight:800; letter-spacing:-.01em; line-height:1.1; white-space:nowrap}
.logo-contexto small{display:block; font-size:9px; font-weight:600; color:var(--turquesa-osc); text-transform:uppercase; letter-spacing:.07em; white-space:nowrap}
@media(max-width:420px){ .logo{gap:6px} .logo-betterware{width:104px} .logo-contexto{padding-left:6px} .logo-contexto b{font-size:13px} .logo-contexto small{display:none} }

.cab-busqueda{flex:1; position:relative; max-width:520px; margin-left:auto}
.cab-busqueda input{
  width:100%; height:44px; border:2px solid var(--gris-linea); border-radius:999px;
  background:var(--gris-fondo); padding:0 40px 0 42px; font-size:15px; transition:.15s;
}
.cab-busqueda input::placeholder{color:#93A8B1}
.cab-busqueda input:focus{outline:none; border-color:var(--turquesa); background:#fff}
.cab-busqueda .lupa{position:absolute; left:15px; top:50%; transform:translateY(-50%); color:#93A8B1; width:17px; height:17px}
.cab-limpiar{position:absolute; right:10px; top:50%; transform:translateY(-50%); width:26px; height:26px;
  border-radius:50%; display:none; place-items:center; color:var(--gris-texto)}
.cab-limpiar svg{width:13px; height:13px}
.cab-busqueda.con-texto .cab-limpiar{display:grid}

.btn-cat{
  height:44px; padding:0 14px; border-radius:999px; border:2px solid var(--gris-linea);
  display:flex; align-items:center; gap:7px; font-weight:600; font-size:14px; flex-shrink:0; transition:.15s;
}
.btn-cat:hover{border-color:var(--turquesa); color:var(--turquesa-osc)}
.btn-cat[aria-expanded="true"]{background:var(--marino); border-color:var(--marino); color:#fff}
@media(max-width:560px){
  .cab-fila{flex-wrap:wrap}
  .cab-busqueda{order:3; flex-basis:100%; max-width:none; margin:0}
  .btn-cat{margin-left:auto; height:38px; width:38px; padding:0; justify-content:center}
  .btn-cat span{display:none}
}

/* hoja de secciones */
.hoja-cat{
  position:fixed; z-index:70; background:#fff; border-radius:18px 18px 0 0;
  left:0; right:0; bottom:0; padding:20px 16px calc(20px + env(safe-area-inset-bottom));
  transform:translateY(100%); transition:transform .22s ease; box-shadow:0 -8px 30px rgba(10,58,83,.15);
}
.hoja-cat.abierta{transform:none}
@media(min-width:560px){
  .hoja-cat{left:auto; right:24px; bottom:auto; top:64px; width:340px; border-radius:16px;
    transform:translateY(-8px); opacity:0; pointer-events:none; box-shadow:0 14px 40px rgba(10,58,83,.18)}
  .hoja-cat.abierta{transform:none; opacity:1; pointer-events:auto}
}
.hoja-cat h3{margin:0 0 12px; font-size:13px; font-weight:700; color:var(--gris-texto); text-transform:uppercase; letter-spacing:.06em}
.hoja-lista{display:grid; gap:4px}
.hoja-item{display:flex; align-items:center; justify-content:space-between; padding:11px 12px;
  border-radius:var(--r-chico); font-weight:600; font-size:15px; text-align:left; transition:.12s}
.hoja-item:hover{background:var(--gris-fondo)}
.hoja-item.activa{background:var(--turquesa-suave); color:var(--turquesa-osc)}
.hoja-item small{font-weight:600; color:var(--gris-texto); font-size:12.5px}
.velo{position:fixed; inset:0; background:rgba(10,58,83,.35); z-index:60; opacity:0; pointer-events:none; transition:.2s}
.velo.visible{opacity:1; pointer-events:auto}

/* ============================================================
   INICIO — mensaje
   ============================================================ */
.intro{padding:18px 0 2px}
.intro h1{margin:0 0 4px; font-size:22px; font-weight:800; letter-spacing:-.01em}
.intro p{margin:0; font-size:15.5px; color:var(--gris-texto); font-weight:500; max-width:70ch}
@media(min-width:720px){ .intro{padding:26px 0 4px} .intro h1{font-size:27px} .intro p{font-size:16.5px;white-space:nowrap} }
.destacados-inicio{padding-top:24px}

/* ============================================================
   CARRUSEL DE AVISOS
   ============================================================ */
.seccion-avisos{padding:14px 0 4px}
.carrusel-avisos{position:relative}
.cA-viewport{overflow:hidden; border-radius:var(--r); border:1px solid var(--gris-linea)}
.cA-pista{display:flex; transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.cA-slide{flex:0 0 100%; position:relative; aspect-ratio:16/9; display:block; background:var(--gris-fondo); overflow:hidden}
.cA-imagen{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.cA-badge{position:absolute; top:12px; left:14px; z-index:2; height:24px; padding:0 10px; border-radius:999px;
  background:rgba(255,255,255,.95); color:var(--marino); font-size:11px; font-weight:800;
  display:flex; align-items:center; gap:5px; text-transform:uppercase; letter-spacing:.04em}
.cA-badge svg{width:12px; height:12px}
.cA-nuevo{position:absolute; top:12px; right:14px; z-index:2; height:24px; padding:0 10px; border-radius:999px;
  background:var(--naranja); color:#fff; font-size:11px; font-weight:800; display:flex; align-items:center;
  text-transform:uppercase; letter-spacing:.05em}
.cA-velo{position:absolute; inset:0; z-index:1;
  background:linear-gradient(0deg, rgba(10,58,83,.78) 0%, rgba(10,58,83,.28) 46%, rgba(10,58,83,0) 78%)}
.cA-texto{position:absolute; left:16px; right:16px; bottom:14px; z-index:2; color:#fff}
.cA-texto b{display:block; font-size:18px; font-weight:800; line-height:1.25; text-shadow:0 1px 6px rgba(0,0,0,.2)}
.cA-texto span{display:block; margin-top:4px; font-size:13px; font-weight:600; opacity:.92; max-width:34ch}
@media(min-width:720px){ .cA-texto b{font-size:22px} }
.cA-flecha{position:absolute; top:50%; transform:translateY(-50%); width:38px; height:38px; border-radius:50%;
  background:rgba(255,255,255,.92); display:grid; place-items:center; color:var(--marino); z-index:3; box-shadow:var(--sombra)}
.cA-flecha:hover{background:#fff}
.cA-prev{left:10px} .cA-next{right:10px}
@media(max-width:720px){ .cA-flecha{display:none} }
.cA-puntos{display:flex; justify-content:center; gap:6px; margin-top:10px}
.cA-punto{width:7px; height:7px; border-radius:50%; background:var(--gris-linea); transition:.15s}
.cA-punto[aria-current="true"]{background:var(--turquesa); width:18px; border-radius:4px}

/* ============================================================
   ACCESOS PRINCIPALES
   ============================================================ */
.accesos-wrap{padding-top:18px;padding-bottom:4px}
.accesos{display:grid; grid-template-columns:repeat(2,1fr); gap:10px}
@media(min-width:720px){ .accesos{grid-template-columns:repeat(4,1fr); gap:14px} }
.acceso{
  display:flex; align-items:flex-start; gap:11px; padding:14px; border-radius:var(--r);
  background:var(--gris-fondo); border:2px solid transparent; text-align:left; transition:.15s;
}
.acceso:hover{border-color:var(--turquesa); background:var(--turquesa-suave)}
.acceso b{display:block; font-weight:800; font-size:14.5px}
.acceso > span:last-child > span{display:block; font-size:12.5px; font-weight:500; color:var(--gris-texto); line-height:1.35; margin-top:2px}
.acceso-ic{width:52px; height:52px; border-radius:15px; background:var(--turquesa); color:#fff;
  display:grid; place-items:center; box-shadow:0 6px 16px rgba(0,174,199,.22); flex-shrink:0}
.acceso-ic svg{width:25px;height:25px;stroke-width:2.4}
@media(min-width:720px){ .acceso{padding:16px} }
@media(max-width:400px){ .acceso > span:last-child{display:none} .acceso{align-items:center;justify-content:center;padding:12px} .acceso-ic{width:48px;height:48px} }

/* filtros por sección */
.filtros{position:sticky; top:var(--alto-cab,64px); z-index:40; background:#fff; border-bottom:1px solid var(--gris-linea); margin-top:16px}
.filtros-fila{display:flex; gap:8px; overflow-x:auto; padding:10px 16px; max-width:1120px; margin:0 auto; scrollbar-width:none}
.filtros-fila::-webkit-scrollbar{display:none}
@media(min-width:720px){ .filtros-fila{padding:10px 24px} }
.chip{
  height:36px; padding:0 15px; border-radius:999px; background:var(--gris-fondo);
  font-weight:600; font-size:13.5px; white-space:nowrap; flex-shrink:0;
  display:flex; align-items:center; gap:6px; color:var(--gris-texto); transition:.13s;
}
.chip:hover{color:var(--marino)}
.chip[aria-pressed="true"]{background:var(--marino); color:#fff}

/* secciones del inicio */
.seccion{padding:24px 0 4px}
.seccion-cab{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:4px}
.seccion-cab h2{margin:0; font-size:19px; font-weight:800; letter-spacing:-.01em}
@media(min-width:720px){ .seccion-cab h2{font-size:22px} }
.seccion-cab a{font-size:13.5px; font-weight:700; color:var(--turquesa-osc); white-space:nowrap}
.seccion-cab a:hover{text-decoration:underline}
.seccion-sub{margin:0 0 12px; font-size:13.5px; color:var(--gris-texto); font-weight:500}

.riel{display:grid; grid-auto-flow:column; grid-auto-columns:min(80%,310px); gap:12px;
  overflow-x:auto; scroll-snap-type:x mandatory; padding:4px 0 8px; scrollbar-width:none}
.riel::-webkit-scrollbar{display:none}
.riel > *{scroll-snap-align:start}
@media(min-width:720px){ .riel{grid-auto-flow:row; grid-auto-columns:unset; grid-template-columns:repeat(3,1fr); gap:18px; overflow:visible} }

.rejilla{display:grid; grid-template-columns:1fr; gap:14px; padding:4px 0 10px}
@media(min-width:560px){ .rejilla{grid-template-columns:repeat(2,1fr); gap:16px} }
@media(min-width:900px){ .rejilla{grid-template-columns:repeat(3,1fr); gap:18px} }

.resumen{padding:16px 0 0; display:flex; align-items:center; justify-content:space-between; gap:10px}
.resumen p{margin:0; font-size:14px; color:var(--gris-texto); font-weight:600}
.resumen p b{color:var(--marino)}
.resumen button{font-size:13.5px; font-weight:700; color:var(--turquesa-osc); text-decoration:underline; text-underline-offset:3px}

.vacio{text-align:center; padding:52px 16px}
.vacio .cara{width:60px; height:60px; margin:0 auto 14px; border-radius:18px; background:var(--gris-fondo);
  display:grid; place-items:center; color:var(--gris-texto)}
.vacio h3{margin:0 0 6px; font-size:19px; font-weight:800}
.vacio p{margin:0 auto 18px; color:var(--gris-texto); max-width:36ch}

/* ============================================================
   TARJETAS
   ============================================================ */
.tarjeta{
  background:#fff; border:1px solid var(--gris-linea); border-radius:var(--r);
  overflow:hidden; display:flex; flex-direction:column; box-shadow:var(--sombra);
  transition:transform .18s ease, box-shadow .18s ease;
}
.tarjeta:active{transform:scale(.985)}
@media(hover:hover){ .tarjeta:hover{transform:translateY(-3px); box-shadow:0 10px 24px rgba(10,58,83,.12)} }

.mini{position:relative; display:block; aspect-ratio:16/10; overflow:hidden; background:var(--gris-fondo)}
.insignia{
  position:absolute; top:10px; left:10px; z-index:2; height:24px; padding:0 10px; border-radius:999px;
  background:rgba(255,255,255,.95); color:var(--marino); font-size:11px; font-weight:800;
  display:flex; align-items:center; gap:5px; text-transform:uppercase; letter-spacing:.04em;
}
.insignia svg{width:12px; height:12px}
.insignia-nuevo{
  position:absolute; top:10px; right:10px; z-index:2; height:24px; padding:0 10px; border-radius:999px;
  background:var(--naranja); color:#fff; font-size:11px; font-weight:800;
  display:flex; align-items:center; text-transform:uppercase; letter-spacing:.05em;
}
.pastilla{
  position:absolute; right:10px; bottom:10px; z-index:2; padding:3px 8px; border-radius:7px;
  background:rgba(10,58,83,.82); color:#fff; font-size:11.5px; font-weight:700;
}
.tarjeta-cuerpo{padding:12px 14px 14px; display:flex; flex-direction:column; gap:8px; flex:1}
.tarjeta-cat{font-size:12px; font-weight:700; color:var(--turquesa-osc); text-transform:uppercase; letter-spacing:.05em}
.tarjeta h3{margin:0; font-size:16.5px; font-weight:700; line-height:1.3; letter-spacing:-.01em}
.tarjeta .breve{margin:0; font-size:13.5px; color:var(--gris-texto); font-weight:500; line-height:1.45}
.tarjeta-acciones{display:flex; gap:8px; margin-top:auto; padding-top:6px}
.btn{
  height:44px; border-radius:var(--r-boton); font-weight:700; font-size:14.5px;
  display:flex; align-items:center; justify-content:center; gap:8px; transition:.15s; padding:0 16px;
}
.btn-principal{flex:1; background:var(--turquesa); color:#fff}
.btn-principal:hover{background:var(--turquesa-osc)}
.btn-borde{border:2px solid var(--gris-linea); background:#fff}
.btn-borde:hover{border-color:var(--turquesa); color:var(--turquesa-osc)}
.btn-cuadro{width:44px; padding:0; flex-shrink:0}

/* tarjeta de experiencia: mayor peso visual */
.tarjeta-exp{border:2px solid var(--turquesa); box-shadow:0 6px 20px rgba(0,174,199,.18)}
.flujo{
  display:flex; align-items:center; gap:6px; padding:8px 10px; border-radius:var(--r-chico);
  background:var(--turquesa-suave); font-size:11.5px; font-weight:700; color:var(--turquesa-osc);
  flex-wrap:wrap;
}
.flujo .paso{display:flex; align-items:center; gap:5px}
.flujo svg{width:13px; height:13px}
.flujo .flecha{color:#7FCBD8; font-weight:800}
.flujo-claro{background:rgba(255,255,255,.2); color:#fff}
.flujo-claro .flecha{color:rgba(255,255,255,.7)}

/* ============================================================
   MINIATURAS GENERADAS
   ============================================================ */
.escena{position:absolute; inset:0; display:flex}

.esc-video{flex-direction:column; justify-content:flex-end; padding:14px; overflow:hidden;
  background:linear-gradient(160deg, var(--marino) 0%, #14556F 55%, var(--turquesa-osc) 130%)}
.esc-video::before{content:""; position:absolute; right:-30px; top:-30px; width:150px; height:150px;
  border-radius:50%; background:rgba(0,174,199,.25); z-index:1}
.portada-video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.86}
.esc-video .rotulo{position:relative; color:#fff; font-weight:800; font-size:17px; line-height:1.2;
  max-width:13ch; text-shadow:0 1px 6px rgba(0,0,0,.3); z-index:2}
.esc-video .canal{position:relative; margin-top:6px; display:flex; align-items:center; gap:6px;
  color:rgba(255,255,255,.85); font-size:11px; font-weight:700; z-index:2}
.esc-video .canal i{width:16px; height:16px; border-radius:50%; background:var(--turquesa); display:block}
.play{
  position:absolute; inset:0; margin:auto; width:52px; height:52px; border-radius:50%;
  background:rgba(255,255,255,.96); display:grid; place-items:center; box-shadow:0 4px 16px rgba(0,0,0,.25); z-index:3;
}
.play svg{width:19px; height:19px; fill:var(--turquesa-osc); stroke:none; margin-left:3px}
.play-video{border:0; cursor:pointer; transition:transform .16s ease, box-shadow .16s ease}
.play-video:hover{transform:scale(1.08); box-shadow:0 6px 20px rgba(0,0,0,.3)}
.play-video:focus-visible{outline:3px solid var(--naranja); outline-offset:3px}

.esc-exp{flex-direction:column; justify-content:center; gap:10px; padding:16px;
  background:linear-gradient(150deg, var(--turquesa) 0%, var(--turquesa-osc) 60%, var(--marino) 140%)}
.esc-exp .rotulo{color:#fff; font-weight:800; font-size:17px; line-height:1.2; max-width:16ch;
  text-shadow:0 1px 6px rgba(0,0,0,.18)}
.esc-exp .pasos{display:flex; align-items:center; gap:7px}
.esc-exp .nodo{width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,.94);
  display:grid; place-items:center; color:var(--turquesa-osc)}
.esc-exp .nodo svg{width:15px; height:15px}
.esc-exp .union{flex:0 0 14px; height:2.5px; border-radius:2px; background:rgba(255,255,255,.55)}
.esc-exp .medalla{background:#FFD166; color:var(--marino)}
.esc-exp-imagen{padding:0}

.esc-pdf{background:var(--gris-fondo); align-items:center; justify-content:center; padding:12px}
.portada{width:56%; max-width:150px; aspect-ratio:8.5/11; background:#fff; border-radius:6px;
  box-shadow:0 6px 18px rgba(10,58,83,.14); padding:13px 12px; overflow:hidden}
.portada .franja{height:5px; width:38%; border-radius:3px; background:var(--turquesa); margin-bottom:9px}
.portada .tit{font-size:11px; font-weight:800; line-height:1.25; color:var(--marino); margin-bottom:8px}
.portada .linea{height:4px; border-radius:2px; background:var(--gris-linea); margin-bottom:5px}
.portada .cuadro{height:34px; border-radius:5px; background:var(--turquesa-suave); margin-top:8px}

.esc-pres{background:linear-gradient(180deg,#EAF4F6,#F4F8F9); align-items:center; justify-content:center; padding:14px}
.diapo{width:82%; aspect-ratio:16/9; background:#fff; border-radius:8px; box-shadow:0 6px 18px rgba(10,58,83,.13);
  padding:11px 13px; display:flex; flex-direction:column; gap:7px; overflow:hidden}
.diapo .tit{font-size:11.5px; font-weight:800; color:var(--marino); line-height:1.2}
.diapo .barras{flex:1; display:flex; align-items:flex-end; gap:7px; padding-top:2px}
.diapo .barras i{flex:1; border-radius:3px 3px 0 0; background:var(--turquesa); opacity:.85}
.diapo .barras i:nth-child(2){background:var(--marino); height:55% !important}
.diapo .barras i:nth-child(4){background:var(--turquesa-osc)}

.esc-img{align-items:center; justify-content:center; overflow:hidden;
  background:radial-gradient(120% 120% at 20% 0%, var(--turquesa) 0%, var(--turquesa-osc) 60%, var(--marino) 130%)}
.recurso-imagen{position:absolute; inset:0; width:100%; height:100%}
.recurso-mini{object-fit:cover}
.recurso-completo{object-fit:contain; background:#fff}
@media(max-width:719px){
  .mini .recurso-mini{object-fit:contain; background:#fff}
}
.pieza{text-align:center; color:#fff; padding:12px}
.pieza .foco{width:36px; height:36px; margin:0 auto 8px; border-radius:50%; background:rgba(255,255,255,.18);
  display:grid; place-items:center; color:#FFD166}
.pieza .foco svg{width:18px; height:18px}
.pieza b{display:block; font-size:16px; font-weight:800; line-height:1.2; text-shadow:0 1px 4px rgba(0,0,0,.2)}
.pieza span{font-size:11px; font-weight:700; opacity:.85; text-transform:uppercase; letter-spacing:.08em}

.esc-noticia{flex-direction:column; justify-content:center; gap:8px; padding:16px;
  background:linear-gradient(155deg, #0E4763 0%, var(--marino) 70%)}
.esc-noticia::after{content:""; position:absolute; left:-24px; bottom:-24px; width:120px; height:120px;
  border-radius:50%; background:rgba(0,174,199,.22)}
.esc-noticia .megafono{width:34px; height:34px; border-radius:11px; background:var(--turquesa);
  display:grid; place-items:center; color:#fff; position:relative}
.esc-noticia .megafono svg{width:17px; height:17px}
.esc-noticia .rotulo{position:relative; color:#fff; font-weight:800; font-size:16.5px; line-height:1.25; max-width:16ch}

.esc-html{background:var(--gris-fondo); align-items:center; justify-content:center; padding:12px}
.captura{width:74%; max-width:200px; background:#fff; border-radius:9px; box-shadow:0 6px 18px rgba(10,58,83,.13);
  padding:11px; display:grid; gap:7px}
.captura .tit{font-size:10.5px; font-weight:800; color:var(--marino)}
.captura .campo{height:22px; border-radius:6px; border:1.5px solid var(--gris-linea); position:relative}
.captura .campo::after{content:attr(data-v); position:absolute; left:7px; top:50%; transform:translateY(-50%);
  font-size:9px; font-weight:700; color:var(--gris-texto)}
.captura .resultado{height:26px; border-radius:6px; background:var(--turquesa-suave); display:flex; align-items:center;
  justify-content:center; font-size:10px; font-weight:800; color:var(--turquesa-osc)}
.captura .btncap{height:24px; border-radius:6px; background:var(--turquesa); color:#fff; font-size:9.5px; font-weight:800;
  display:flex; align-items:center; justify-content:center}

/* ============================================================
   VISTA DE CONTENIDO
   ============================================================ */
.detalle{padding:14px 16px 40px}
@media(min-width:720px){.detalle{padding:14px 24px 40px}}
.detalle-principal{width:100%;max-width:820px;margin:0 auto}
.detalle > .volver{display:flex;width:100%;max-width:820px;margin-left:auto;margin-right:auto}
.volver{display:inline-flex; align-items:center; gap:7px; font-weight:700; font-size:14.5px;
  color:var(--turquesa-osc); padding:8px 0; margin-bottom:4px}
.volver:hover{text-decoration:underline}
.detalle h1{margin:6px auto 8px; font-size:24px; font-weight:800; line-height:1.2; letter-spacing:-.015em; text-align:center; max-width:820px}
@media(min-width:720px){ .detalle h1{font-size:30px} }
.det-meta{display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; margin:0 auto 14px}
.det-tag{height:26px; padding:0 11px; border-radius:999px; background:var(--turquesa-suave);
  color:var(--turquesa-osc); font-size:12.5px; font-weight:700; display:flex; align-items:center; gap:5px}
.det-tag svg{width:12px; height:12px}
.det-tag.gris{background:var(--gris-fondo); color:var(--gris-texto)}
.det-tag.nuevo{background:var(--naranja); color:#fff}

.visor{position:relative; border-radius:var(--r); overflow:hidden; aspect-ratio:16/10;
  border:1px solid var(--gris-linea); box-shadow:var(--sombra); background:var(--gris-fondo)}
@media(min-width:720px){ .visor{aspect-ratio:16/9; max-width:820px} }
.detalle > .visor{margin-left:auto; margin-right:auto}
.visor-imagen{aspect-ratio:1; max-width:680px}
.visor-portada{aspect-ratio:16/9; max-width:820px}
.visor iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.visor .escena{font-size:1.15em}
.visor .play{width:66px; height:66px}
.visor .play svg{width:24px; height:24px}
.esc-video-personalizado .portada-video{object-fit:contain;background:var(--gris-fondo)}
.esc-video-personalizado .portada-personalizada{opacity:1}
.esc-video-personalizado .play{z-index:2}

.det-texto{margin:18px auto 0; font-size:16px; line-height:1.65; color:var(--gris-texto); max-width:60ch; white-space:pre-line; text-align:center}
.detalle-principal > .det-texto{margin-bottom:18px}
.det-acciones{display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:18px auto 0; max-width:680px}
.det-acciones .btn{height:50px; font-size:15.5px}
.det-acciones .btn-cuadro{width:50px}
.btn-descargable{white-space:nowrap}
.btn-like{width:auto!important;min-width:54px!important;padding:0 12px;gap:6px;flex:none!important}
.btn-like svg{fill:transparent;transition:.15s}.btn-like[aria-pressed="true"]{color:#D92D65;border-color:#F3A8C2;background:#FFF0F5}.btn-like[aria-pressed="true"] svg{fill:currentColor}
.detalle-like{display:flex;justify-content:center;margin:0 auto 16px}.detalle-like .btn-like{height:42px}
.opcional{font-weight:500;color:var(--gris-texto)}
.quitar-archivo{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--gris-texto);margin-top:8px}
.campo-descargable{padding:14px;border:2px solid var(--turquesa);border-radius:var(--r);background:var(--turquesa-suave)}
.campo-descargable > label:first-child{color:var(--turquesa-osc);font-size:15px}

/* En escritorio, el encabezado, la lectura y los botones acompañan el recurso centrado. */
@media(min-width:720px){
  .detalle > .volver,
  .detalle > h1,
  .detalle > .det-meta,
  .detalle > .det-texto,
  .detalle > .det-acciones{
    width:min(680px, 100%);
    margin-left:auto;
    margin-right:auto;
  }
  .detalle > .volver{display:flex}
  .detalle > .det-texto{max-width:680px}
  .detalle > .det-acciones{max-width:680px}
}

.relacionados{padding-top:30px}
.detalle > .relacionados{width:100%;margin-left:auto;margin-right:auto}
.relacionados h2{margin:0 0 12px; font-size:19px; font-weight:800; text-align:center}

/* ============================================================
   EXPERIENCIA — recorrido en 4 pasos
   ============================================================ */
.ruta{display:flex; align-items:flex-start; gap:0; margin:4px auto 18px; max-width:560px}
.ruta-paso{flex:1; display:grid; gap:6px; justify-items:center; text-align:center; min-width:0}
.ruta-nodo{width:40px; height:40px; border-radius:50%; border:2.5px solid var(--gris-linea);
  background:#fff; display:grid; place-items:center; color:var(--gris-texto); transition:.2s; flex-shrink:0}
.ruta-nodo svg{width:17px; height:17px}
.ruta-paso > span:not(.ruta-nodo){font-size:10.5px; font-weight:700; color:var(--gris-texto); line-height:1.2; width:100%; max-width:70px; overflow-wrap:anywhere}
.ruta-union{flex:1; height:2.5px; background:var(--gris-linea); margin:19px -2px 0; min-width:10px}
.ruta-paso.hecho .ruta-nodo{background:var(--turquesa); border-color:var(--turquesa); color:#fff}
.ruta-paso.actual .ruta-nodo{border-color:var(--turquesa); color:var(--turquesa-osc); box-shadow:0 0 0 5px var(--turquesa-suave)}
.ruta-paso.actual span, .ruta-paso.hecho span{color:var(--marino)}
.ruta-union.hecha{background:var(--turquesa)}
@media(max-width:380px){ .ruta-nodo{width:34px; height:34px} .ruta-nodo svg{width:14px;height:14px} .ruta-paso > span:not(.ruta-nodo){font-size:9.5px} }

.resultados-busqueda{padding-top:18px;padding-bottom:40px}
.resultados-busqueda .resumen{margin-top:0}

.panel-paso{border:1px solid var(--gris-linea); border-radius:var(--r); box-shadow:var(--sombra);
  padding:18px; max-width:820px; margin:0 auto; background:#fff; text-align:center}
.panel-paso h2{margin:0 0 4px; font-size:18px; font-weight:800}
.panel-paso .guia{margin:0 0 14px; font-size:14px; color:var(--gris-texto); font-weight:500}

.avance-test{margin:0 0 10px; font-size:12.5px; font-weight:700; color:var(--turquesa-osc)}
.pregunta-texto{margin:0 0 12px; font-weight:700; font-size:15.5px; line-height:1.4; text-align:center}
.pregunta{display:grid; gap:9px}
.opcion{display:flex; align-items:center; gap:11px; padding:13px 14px; border:2px solid var(--gris-linea);
  border-radius:var(--r-boton); font-weight:600; font-size:14.5px; text-align:left; transition:.14s; background:#fff}
.opcion:hover{border-color:var(--turquesa)}
.opcion .circulo{width:20px; height:20px; border-radius:50%; border:2.5px solid var(--gris-linea); flex-shrink:0; display:grid; place-items:center; color:#fff}
.opcion.elegida{border-color:var(--turquesa); background:var(--turquesa-suave)}
.opcion.elegida .circulo{background:var(--turquesa); border-color:var(--turquesa)}
.opcion.elegida .circulo svg{width:11px; height:11px}
.opcion.correcta{border-color:#249B60; background:#EAF8EF}
.opcion.correcta .circulo{background:#249B60; border-color:#249B60}
.opcion.incorrecta{border-color:#D86B52; background:#FFF1ED}
.opcion.incorrecta .circulo{background:#D86B52; border-color:#D86B52}
.opcion:disabled{cursor:default}
.reaccion{display:flex; gap:9px; align-items:flex-start; margin-top:12px; padding:12px 14px; border-radius:var(--r-chico);
  background:var(--turquesa-suave); font-size:13.5px; font-weight:600; color:var(--marino); line-height:1.42}
.reaccion svg{color:var(--turquesa-osc); flex-shrink:0; margin-top:1px}
.paso-pie{display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin-top:16px}
.paso-pie .btn{flex:1; min-width:150px}
.panel-paso .btn{width:100%; max-width:360px; height:50px; font-size:15.5px}

.resultado-bloque{display:grid; gap:10px; margin:6px 0 18px; max-width:560px}
.resultado-item{display:flex; gap:10px; align-items:flex-start; padding:13px 14px; border-radius:var(--r-chico); background:var(--turquesa-suave)}
.resultado-item svg{color:var(--turquesa-osc); flex-shrink:0; margin-top:1px}
.resultado-item.tip{background:var(--gris-fondo)}
.resultado-item.tip svg{color:var(--gris-texto)}
.resultado-item span{font-size:14px; font-weight:600; color:var(--marino); line-height:1.45}
.resultado-puntaje{display:inline-flex; align-items:center; gap:7px; margin:0 0 14px; padding:8px 11px; border-radius:999px; background:var(--turquesa-suave); color:var(--turquesa-osc); font-size:13px; font-weight:800}
.objetivo{margin:0 auto 18px; padding:13px 14px; max-width:680px; border-radius:var(--r-chico); background:var(--turquesa-suave); color:var(--marino); font-size:14px; font-weight:600; line-height:1.5; text-align:center}
.objetivo b{display:block; margin-bottom:2px; color:var(--turquesa-osc); font-size:12px; letter-spacing:.04em; text-transform:uppercase}

.celebra{text-align:center; margin-bottom:20px}
.celebra-ic{width:56px; height:56px; margin:0 auto 10px; border-radius:50%; background:var(--turquesa-suave);
  display:grid; place-items:center; color:var(--turquesa-osc)}
.celebra-ic svg{width:26px; height:26px}
.celebra h2{margin:0 0 6px; font-size:21px; font-weight:800}
.celebra .guia{margin:0 auto; max-width:38ch}

.certificado{
  aspect-ratio:4/5; max-width:280px; margin:0 auto 20px; border-radius:22px; overflow:hidden; position:relative;
  background:#fff; color:var(--marino); padding:26px 22px; display:flex; flex-direction:column; justify-content:space-between; text-align:center;
  box-shadow:0 14px 34px rgba(10,58,83,.14); border:1px solid var(--gris-linea);
}
.certificado::before{content:""; position:absolute; right:-42px; top:-42px; width:135px; height:135px; border-radius:50%; background:#E8F5F8}
.certificado::after{content:""; position:absolute; left:-48px; bottom:-48px; width:115px; height:115px; border:16px solid #FFE9A3; border-radius:50%}
.cert-marca{position:relative; z-index:1; height:31px; display:flex; justify-content:center}
.cert-marca img{width:142px; height:31px; object-fit:contain}
.cert-acento{position:relative; z-index:1; width:34px; height:5px; border-radius:99px; background:#FFD100; margin:8px auto 0}
.cert-medio{position:relative; z-index:1}
.cert-medio small{display:block; color:var(--turquesa); font-size:7.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; margin-bottom:9px}
.cert-medio b{display:block; font-size:20px; font-weight:800; line-height:1.06; margin-bottom:13px; letter-spacing:-.04em}
.cert-agradece{font-size:10px; font-weight:500; color:var(--gris-texto); line-height:1.35; margin-bottom:14px}
.cert-nombre{font-size:22px; font-weight:800; line-height:1.06; margin-bottom:12px; letter-spacing:-.045em}
.cert-linea{font-size:10px; font-weight:500; color:var(--gris-texto); line-height:1.38}
.cert-pie{position:relative; z-index:1; font-size:9px; font-weight:600; color:var(--gris-texto); margin-top:12px}
.cert-expertos{position:relative; z-index:1; height:42px; margin-top:6px; display:flex; justify-content:center}
.cert-expertos img{width:52px; height:42px; object-fit:contain}

/* ============================================================
   COMPARTIR
   ============================================================ */
.modal{
  position:fixed; z-index:80; left:0; right:0; bottom:0; background:#fff;
  border-radius:18px 18px 0 0; padding:22px 18px calc(22px + env(safe-area-inset-bottom));
  transform:translateY(100%); transition:transform .22s ease; box-shadow:0 -8px 30px rgba(10,58,83,.2);
}
.modal.abierto{transform:none}
@media(min-width:560px){
  .modal{left:50%; right:auto; bottom:auto; top:50%; width:420px; border-radius:18px; padding:24px;
    transform:translate(-50%,-44%); opacity:0; pointer-events:none}
  .modal.abierto{transform:translate(-50%,-50%); opacity:1; pointer-events:auto}
}
.modal h3{margin:0 0 3px; font-size:19px; font-weight:800}
.modal .sub{margin:0 0 16px; font-size:14px; color:var(--gris-texto); font-weight:500;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.modal-cerrar{position:absolute; right:14px; top:14px; width:32px; height:32px; border-radius:50%;
  display:grid; place-items:center; background:var(--gris-fondo); color:var(--gris-texto); z-index:2}
.modal-cerrar svg{width:14px; height:14px}
.modal .btn{width:100%; height:50px; font-size:15.5px; margin-bottom:10px}
.btn-whats{background:#25D366; color:#fff}
.btn-whats:hover{filter:brightness(.95)}
.enlace-fila{display:flex; gap:8px}
.enlace-fila input{flex:1; height:50px; border:2px solid var(--gris-linea); border-radius:var(--r-boton);
  background:var(--gris-fondo); padding:0 12px; font-size:12.5px; font-weight:600; color:var(--gris-texto); min-width:0}

.aviso{
  position:fixed; left:50%; bottom:22px; transform:translate(-50%,12px);
  background:var(--marino); color:#fff; padding:12px 20px; border-radius:999px;
  font-size:14px; font-weight:700; z-index:95; opacity:0; pointer-events:none; transition:.2s;
  display:flex; align-items:center; gap:8px; box-shadow:0 8px 24px rgba(10,58,83,.3); max-width:calc(100vw - 32px);
}
.aviso.visible{opacity:1; transform:translate(-50%,0)}
.aviso svg{width:16px; height:16px; stroke:#4ADE80}

/* ============================================================
   ADMINISTRACIÓN (solo en /admin)
   ============================================================ */
.admin{padding:18px 0 50px}
.admin-cab{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:6px}
.admin-cab h1{margin:0; font-size:23px; font-weight:800}
.admin-cab-acciones{display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end}
.admin-cab-acciones .btn{padding:0 16px}
.admin p.nota{margin:0 0 18px; font-size:14px; color:var(--gris-texto)}
.reporte-admin{margin:20px 0 30px}
.reporte-admin h2{margin:0 0 4px;font-size:20px}
.reporte-tarjetas{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:14px 0}
@media(min-width:760px){.reporte-tarjetas{grid-template-columns:repeat(6,1fr)}}
.reporte-dato{padding:14px;border:1px solid var(--gris-linea);border-radius:var(--r);background:#fff;box-shadow:var(--sombra);text-align:center}
.reporte-dato b{display:block;font-size:24px;color:var(--turquesa-osc)}.reporte-dato span{font-size:12px;color:var(--gris-texto);font-weight:700}
.reporte-tabla{width:100%;border-collapse:collapse;background:#fff;border-radius:var(--r);overflow:hidden;box-shadow:var(--sombra)}
.reporte-tabla th,.reporte-tabla td{padding:10px 12px;border-bottom:1px solid var(--gris-linea);font-size:12.5px;text-align:right}
.reporte-tabla th:first-child,.reporte-tabla td:first-child{text-align:left}.reporte-tabla th{color:var(--gris-texto);background:var(--gris-fondo)}
.reporte-vacio{padding:18px;border:1px dashed var(--gris-linea);border-radius:var(--r);color:var(--gris-texto);text-align:center}
.reporte-filtros{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0}
.reporte-filtros label{display:grid;gap:4px;font-size:12px;font-weight:700;color:var(--gris-texto)}
.reporte-filtros select,.reporte-filtros input{height:42px;border:2px solid var(--gris-linea);border-radius:10px;padding:0 10px;background:#fff}
.reporte-filtros .btn{height:42px;align-self:end}
@media(min-width:760px){.reporte-filtros{grid-template-columns:2fr 1fr 1fr auto}}
.admin-lista{display:grid; gap:10px; margin-top:14px}
.admin-item{display:flex; align-items:center; gap:12px; padding:10px 12px; background:#fff;
  border:1px solid var(--gris-linea); border-radius:var(--r); box-shadow:var(--sombra)}
.admin-mini{position:relative; width:74px; aspect-ratio:16/10; border-radius:9px; overflow:hidden;
  flex-shrink:0; background:var(--gris-fondo)}
.admin-mini .escena{font-size:.5em}
.admin-mini .escena .rotulo{font-size:7px}
.admin-mini .escena .canal, .admin-mini .pasos{display:none}
.admin-mini .play{width:20px;height:20px}
.admin-mini .play svg{width:8px;height:8px}
.admin-txt{min-width:0; flex:1}
.admin-txt b{display:block; font-size:14.5px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.admin-txt span{font-size:12.5px; color:var(--gris-texto); font-weight:600}
.admin-item .btn-cuadro{width:38px; height:38px; border-radius:10px}
.admin-especial{font-size:11px; font-weight:700; color:var(--gris-texto); background:var(--gris-fondo); padding:6px 8px; border-radius:8px}
.btn-peligro{color:#B42318}.btn-peligro:hover{border-color:#F04438;background:#FFF1F0}
.admin-sesion{display:flex; justify-content:flex-end; margin-top:28px}
.admin-acceso{min-height:62vh; display:grid; place-items:center; padding-top:40px; padding-bottom:40px}
.admin-login{width:min(100%,420px); border:1px solid var(--gris-linea); border-radius:var(--r); padding:24px; box-shadow:var(--sombra); background:#fff}
.admin-login h1{margin:10px 0 6px;font-size:25px}.admin-login>p{margin:0 0 20px;color:var(--gris-texto)}
.admin-login form{display:grid;gap:9px}.admin-login label{font-size:13px;font-weight:700}
.admin-login input{height:48px;border:2px solid var(--gris-linea);border-radius:var(--r-boton);padding:0 13px;font-size:16px}
.admin-login .btn{margin-top:6px}.admin-candado{width:46px;height:46px;border-radius:14px;background:var(--turquesa-suave);display:grid;place-items:center;color:var(--turquesa-osc)}
.error-form{min-height:20px;margin:0!important;color:#B42318!important;font-size:13px;font-weight:600}
@media(max-width:620px){.admin-cab{align-items:flex-start;flex-direction:column}.admin-cab-acciones{width:100%;justify-content:stretch}.admin-cab-acciones .btn{flex:1}}

.admin-avisos{margin-top:30px}
.admin-avisos-lista{display:grid; gap:12px; margin-top:12px}
@media(min-width:820px){ .admin-avisos-lista{grid-template-columns:repeat(3,1fr)} }
.aviso-slot{border:1px solid var(--gris-linea); border-radius:var(--r); background:#fff; box-shadow:var(--sombra); overflow:hidden; display:flex; flex-direction:column}
.aviso-slot-prev{aspect-ratio:16/8; position:relative}
.aviso-slot-prev .cA-texto b{font-size:14px}
.aviso-slot-prev .cA-texto span{font-size:11px}
.aviso-slot-cuerpo{padding:12px; display:grid; gap:9px}
.aviso-fila{display:flex; align-items:center; justify-content:space-between; gap:8px}
.aviso-fila label{font-size:12px; font-weight:700; color:var(--gris-texto); flex-shrink:0}
.aviso-fila select{flex:1; margin-left:8px; border:2px solid var(--gris-linea); border-radius:8px; padding:7px 8px; font-size:12px; min-width:0}
.interruptor{width:42px; height:24px; border-radius:999px; background:var(--gris-linea); position:relative; flex-shrink:0; transition:.15s}
.interruptor::after{content:""; position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:.15s}
.interruptor[aria-pressed="true"]{background:var(--turquesa)}
.interruptor[aria-pressed="true"]::after{left:20px}
.aviso-orden{display:flex; align-items:center; gap:6px}
.aviso-orden button{width:26px; height:26px; border-radius:7px; background:var(--gris-fondo); display:grid; place-items:center; color:var(--marino)}
.aviso-orden button:disabled{opacity:.35}
.aviso-orden button svg{width:12px; height:12px}
.aviso-acciones{display:flex; gap:8px; margin-top:2px}
.aviso-acciones .btn{height:38px; font-size:12.5px; flex:1; padding:0 8px}
.aviso-vacio{border:2px dashed var(--gris-linea); border-radius:var(--r); display:grid; place-items:center; text-align:center;
  padding:26px 14px; color:var(--gris-texto); gap:6px; min-height:230px}
.aviso-vacio svg{width:22px; height:22px}

.forma{
  position:fixed; z-index:85; inset:0; background:#fff; overflow-y:auto;
  transform:translateY(100%); transition:transform .24s ease;
}
.forma.abierta{transform:none}
@media(min-width:640px){
  .forma{left:auto; width:480px; box-shadow:-8px 0 30px rgba(10,58,83,.15); transform:translateX(100%)}
  .forma.abierta{transform:none}
}
.forma-cab{position:sticky; top:0; background:#fff; display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px; border-bottom:1px solid var(--gris-linea); z-index:2}
.forma-cab h2{margin:0; font-size:18px; font-weight:800}
.forma-cuerpo{padding:18px; display:grid; gap:16px; padding-bottom:110px}
.campo{display:grid; gap:6px}
.campo label{font-size:13.5px; font-weight:700}
.campo input[type=text], .campo input[type=url], .campo input[type=date], .campo textarea, .campo select{
  width:100%; border:2px solid var(--gris-linea); border-radius:var(--r-boton); padding:12px 13px;
  font-size:15px; background:#fff;
}
.campo textarea{min-height:80px; resize:vertical}
.campo input:focus, .campo textarea:focus, .campo select:focus{outline:none; border-color:var(--turquesa)}
.campo .pista{font-size:12.5px; color:var(--gris-texto); font-weight:500}
.tipos{display:flex; flex-wrap:wrap; gap:8px}
.tipo-op{height:38px; padding:0 14px; border-radius:999px; background:var(--gris-fondo); font-weight:700; font-size:13.5px; color:var(--gris-texto)}
.tipo-op[aria-pressed="true"]{background:var(--turquesa); color:#fff}
.soltar{border:2px dashed var(--gris-linea); border-radius:var(--r); padding:20px; text-align:center;
  display:grid; gap:6px; place-items:center; color:var(--gris-texto); font-size:13.5px; font-weight:600}
.soltar b{color:var(--turquesa-osc); font-size:14.5px; font-weight:800}
.soltar svg{width:22px; height:22px}
.soltar input[type=file]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.soltar{cursor:pointer;position:relative}.soltar:hover{border-color:var(--turquesa);background:var(--turquesa-suave)}
.archivo-elegido{font-size:12.5px;color:var(--turquesa-osc);font-weight:700}
.vista-portada{width:100%;aspect-ratio:16/9;object-fit:contain;border:1px solid var(--gris-linea);border-radius:var(--r-chico);background:var(--gris-fondo)}
.opciones-publicacion{gap:10px}.opciones-publicacion label{display:flex;align-items:center;gap:9px;font-weight:600}
.opciones-publicacion input{width:19px;height:19px;accent-color:var(--turquesa)}
.campos-experiencia{display:grid;gap:16px;padding-top:4px;border-top:1px solid var(--gris-linea)}
.campo-cab,.pregunta-admin-cab{display:flex;align-items:center;justify-content:space-between;gap:10px}
.btn-texto{color:var(--turquesa-osc);font-size:12.5px;font-weight:800;padding:6px}.btn-texto.peligro{color:#B42318}
.lista-preguntas{display:grid;gap:12px}.pregunta-admin{border:1px solid var(--gris-linea);border-radius:var(--r-chico);padding:12px;display:grid;gap:10px;background:var(--gris-fondo)}
.pregunta-admin>input,.respuestas-admin input[type=text]{width:100%;border:1px solid var(--gris-linea);border-radius:8px;padding:9px 10px;background:#fff;font-size:13px}
.respuestas-admin{display:grid;gap:8px}.respuestas-admin label{display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:7px;font-size:11px;color:var(--gris-texto)}
.respuestas-admin .f-retro{grid-column:3}.respuestas-admin input[type=radio]{accent-color:var(--turquesa)}
.forma-pie{position:fixed; left:0; right:0; bottom:0; background:#fff; border-top:1px solid var(--gris-linea);
  padding:12px 18px calc(12px + env(safe-area-inset-bottom)); display:flex; gap:10px; z-index:3}
@media(min-width:640px){ .forma-pie{left:auto; width:480px} }
.forma-pie .btn{flex:1; height:50px; font-size:15.5px}
.nota-maqueta{display:flex; gap:10px; padding:12px 14px; border-radius:var(--r-chico);
  background:var(--turquesa-suave); color:var(--turquesa-osc); font-size:13.5px; font-weight:600; line-height:1.45}
.nota-maqueta svg{width:16px; height:16px; flex-shrink:0; margin-top:2px}

/* pie de sitio */
.pie{border-top:1px solid var(--gris-linea); background:var(--gris-fondo); padding:26px 0 34px; margin-top:30px}
.pie .contenedor{display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap}
.pie p{margin:0; font-size:13.5px; color:var(--gris-texto); font-weight:600}

@keyframes entra{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}
.anima{animation:entra .3s ease both}
@media(prefers-reduced-motion:reduce){ *,*::before,*::after{animation:none !important; transition:none !important} }