:root{
  /* Fondo blanco cálido con los cuatro colores del logo de ACIE. */
  /* Mismo lenguaje que la portada: papel cálido, tinta y un solo acento verde. */
  --fondo:#E8F3EE; --fondo-2:#FFFFFF; --superficie:#FFFFFF; --superficie-2:#E4ECF9; --hondo:#064C3B; --hondo-2:#0A3F7A;
  --borde:rgba(14,18,32,.09); --borde-vivo:rgba(0,96,200,.45);
  --grad:linear-gradient(120deg,#0B7A2A 0%,#00A0A0 45%,#0060C8 100%);
  --verde:#0B7A2A; --verde-texto:#0B7A2A; --verde-acie:#0A6A25; --verde-vivo:#00C000;
  --azul:#0060C8; --amarillo:#E8D000; --rojo:#F82000; --ambar:#8A7A00; --coral:#F82000;
  --texto:#0E1220; --tenue:#4A5063; --tenue-2:#8A90A3;
  --sombra:0 24px 60px -30px rgba(14,18,32,.22),0 2px 6px rgba(14,18,32,.04);
  --display:"Sora",system-ui,sans-serif;
  --cuerpo:"Inter",system-ui,sans-serif;
  --r:18px; --r-g:26px;
}
*{box-sizing:border-box}
html{overflow-x:clip;scroll-behavior:smooth}
body{margin:0;background:linear-gradient(160deg,#E8F3EE 0%,#EEF4F6 45%,#E4ECF9 100%) fixed;color:var(--texto);font-family:var(--cuerpo);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip;min-height:100vh}
img{max-width:100%;display:block}
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.08;letter-spacing:-.03em;margin:0}
p{margin:0 0 1rem}
button{font-family:var(--cuerpo)}
.env{width:min(100% - 2rem,700px);margin-inline:auto;position:relative;z-index:2}
.luz{position:fixed;border-radius:50%;filter:blur(100px);pointer-events:none;z-index:0}
.luz.a{width:560px;height:560px;background:rgba(0,192,0,.20);top:-260px;right:-180px;filter:blur(90px)}
.luz.b{width:460px;height:460px;background:rgba(0,96,200,.16);bottom:-240px;left:-200px;filter:blur(90px)}

/* Barra */
.barra{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.85);backdrop-filter:blur(16px);border-bottom:1px solid var(--borde)}
.barra-in{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.85rem 0}
.volver{display:inline-flex;align-items:center;gap:.5rem;color:var(--tenue);text-decoration:none;font-size:.88rem;transition:color .2s}
.volver:hover{color:var(--texto)}
.marca-mini{display:flex;align-items:center;gap:.5rem;font-family:var(--display);font-size:.92rem;font-weight:700}
.punto{width:9px;height:9px;border-radius:50%;background:var(--grad);flex:none;box-shadow:0 0 0 4px rgba(0,192,0,.14)}
.marca-mini{font-family:var(--display);font-size:.95rem;font-weight:700}

/* Botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.85rem 1.5rem;border-radius:999px;font-size:.95rem;font-weight:500;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:transform .22s,box-shadow .22s,background .22s,border-color .22s}
.btn:disabled{opacity:.35;cursor:not-allowed;transform:none!important}
.btn-verde{background:linear-gradient(135deg,var(--hondo),var(--hondo-2));border-color:transparent;color:#fff;font-weight:600;font-family:var(--display);box-shadow:0 12px 30px -12px rgba(0,96,200,.5)}
.btn-verde:not(:disabled):hover{transform:translateY(-2px);box-shadow:0 18px 40px -14px rgba(0,96,200,.6)}
.btn-fantasma{border-color:var(--borde);color:var(--texto);background:rgba(255,255,255,.7);backdrop-filter:blur(12px)}
.btn-fantasma:not(:disabled):hover{border-color:var(--borde-vivo);transform:translateY(-2px)}
.btn-texto{background:none;border:0;color:var(--tenue);cursor:pointer;font-size:.88rem;padding:.5rem;text-decoration:underline;text-underline-offset:3px}
.btn-texto:hover{color:var(--texto)}
.btn-ancho{width:100%}

/* Campos */
label{display:block;font-size:.85rem;letter-spacing:.02em;color:var(--tenue);margin-bottom:.5rem;font-weight:500}
input[type=text],input[type=time],textarea{width:100%;padding:.9rem 1.1rem;border-radius:14px;border:1px solid var(--borde);background:#FFFFFF;color:var(--texto);font-family:var(--cuerpo);font-size:1rem;line-height:1.5;resize:vertical}
input::placeholder,textarea::placeholder{color:var(--tenue-2)}
input:focus,textarea:focus{outline:none;border-color:var(--verde);box-shadow:0 0 0 3px rgba(11,122,42,.13)}
.ayuda{font-size:.82rem;color:var(--tenue-2);margin:.5rem 0 0}
.campo{margin-bottom:1.4rem}

/* Fichas y tarjetas */
.tarjeta{background:rgba(255,255,255,.66);backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.9);border-radius:var(--r-g);padding:1.9rem;box-shadow:var(--sombra)}
.sobretitulo{display:inline-block;font-family:var(--display);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tenue-2);font-weight:600;margin-bottom:.8rem}

/* Paso a paso */
.progreso{display:flex;gap:6px;margin:1.6rem 0 2.2rem}
.progreso i{flex:1;height:3px;border-radius:2px;background:rgba(29,34,48,.10);transition:background .4s}
.progreso i.hecho{background:var(--verde)}
.paso{display:none;animation:entra .45s cubic-bezier(.16,1,.3,1)}
.paso.act{display:block}
@keyframes entra{from{opacity:0;transform:translateY(16px)}}
.paso h2{font-size:clamp(1.6rem,5vw,2.2rem);margin-bottom:.7rem}
.paso>p{color:var(--tenue);font-size:1rem}
.navpaso{display:flex;gap:.7rem;align-items:center;margin-top:2rem}

/* Fichas de fortaleza */
.fichas{display:flex;flex-wrap:wrap;gap:.55rem;margin:1.2rem 0}
.fich{padding:.6rem 1rem;border-radius:999px;border:1px solid var(--borde);background:rgba(29,34,48,.03);color:var(--tenue);font-size:.9rem;cursor:pointer;transition:all .2s;font-family:var(--cuerpo)}
.fich:hover{border-color:var(--borde-vivo);color:var(--texto)}
.fich.sel{background:rgba(11,122,42,.13);border-color:var(--verde);color:var(--verde-texto);font-weight:500}
.contador{font-size:.82rem;color:var(--tenue-2)}
.suma{display:flex;gap:.5rem;margin-top:.5rem}
.suma input{flex:1}

/* La ficha del alter ego */
.heroe{text-align:center;padding:2.5rem 1.5rem;border-radius:var(--r-g);border:1px solid var(--borde-vivo);position:relative;overflow:hidden;
  background:linear-gradient(160deg,rgba(11,122,42,.17),rgba(0,96,200,.07) 55%,rgba(29,34,48,.02))}
.heroe .eres{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--verde-texto);font-weight:600;margin-bottom:.7rem}
.heroe h1{font-size:clamp(2.2rem,9vw,3.4rem);font-weight:800;margin-bottom:1rem}
.heroe .lema{font-family:var(--display);font-size:1.2rem;line-height:1.35;color:var(--texto);font-weight:700;max-width:26rem;margin:0 auto}
.lista{list-style:none;padding:0;margin:0}
.lista li{padding:1rem 0;border-bottom:1px solid var(--borde)}
.lista li:last-child{border-bottom:0}
.lista strong{display:block;font-family:var(--display);font-size:1.05rem;font-weight:700;letter-spacing:-.02em}
.lista span{font-size:.92rem;color:var(--tenue)}
.bloque{margin-top:1.2rem}
.bloque h3{font-size:1.1rem;margin-bottom:.9rem}

/* Racha */
.racha{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;margin-top:1.2rem}
.dato-r{text-align:center;padding:1.1rem .6rem;border-radius:var(--r);border:1px solid var(--borde);background:rgba(29,34,48,.025)}
.dato-r b{display:block;font-family:var(--display);font-size:1.9rem;font-weight:700;line-height:1;
  background:linear-gradient(135deg,var(--verde),var(--azul));-webkit-background-clip:text;background-clip:text;color:transparent}
.dato-r span{font-size:.74rem;color:var(--tenue-2);letter-spacing:.04em}
.nivel{margin-top:1.2rem}
.nivel-cab{display:flex;justify-content:space-between;font-size:.84rem;color:var(--tenue);margin-bottom:.5rem}
.nivel-barra{height:7px;border-radius:4px;background:rgba(29,34,48,.08);overflow:hidden}
.nivel-relleno{height:100%;border-radius:4px;background:linear-gradient(90deg,var(--verde-acie),var(--verde));transition:width .9s cubic-bezier(.16,1,.3,1)}

/* Rescate */
.rescate{position:fixed;inset:0;z-index:200;background:var(--fondo);display:none;overflow-y:auto;padding:2rem 0 3rem}
.rescate.abierto{display:block;animation:entra .4s ease}
.rescate-in{width:min(100% - 2rem,600px);margin-inline:auto;min-height:calc(100vh - 5rem);display:flex;flex-direction:column;justify-content:center;text-align:center}
.cerrar{position:fixed;top:1rem;right:1rem;z-index:210;background:rgba(29,34,48,.06);border:1px solid var(--borde);color:var(--texto);width:40px;height:40px;border-radius:50%;cursor:pointer;font-size:1.1rem;line-height:1}
.acto{display:none}
.acto.act{display:block;animation:entra .5s cubic-bezier(.16,1,.3,1)}
.respiro{width:170px;height:170px;border-radius:50%;margin:2rem auto;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle,rgba(11,122,42,.22),transparent 68%);border:1px solid var(--borde-vivo);
  transition:transform 4s cubic-bezier(.4,0,.6,1)}
.respiro.inspira{transform:scale(1.32)}
.respiro span{font-size:.95rem;color:var(--verde-texto);font-weight:500}
.acto h2{font-size:clamp(1.7rem,6vw,2.4rem);margin-bottom:1rem}
.acto .lema-g{font-family:var(--display);font-size:clamp(1.3rem,4.5vw,1.8rem);line-height:1.32;color:var(--texto);margin:1.5rem 0}
.recuerdo{text-align:left;border-left:2px solid var(--verde);padding:.3rem 0 .3rem 1.3rem;margin:1.2rem 0}
.recuerdo strong{display:block;font-family:var(--display);font-size:1.15rem}
.recuerdo span{color:var(--tenue);font-size:.94rem}
.aviso-cuidado{font-size:.78rem;color:var(--tenue-2);margin-top:2.5rem;line-height:1.5}

/* Lienzo del fondo de pantalla */
.previa{max-width:230px;margin:1.2rem auto;border-radius:16px;overflow:hidden;border:1px solid var(--borde)}
.oculto{display:none!important}
.aviso{padding:.9rem 1.1rem;border-radius:14px;background:rgba(232,208,0,.09);border:1px solid rgba(232,208,0,.25);color:var(--ambar);font-size:.88rem;margin-bottom:1.2rem}
.ok{background:rgba(11,122,42,.09);border-color:var(--borde-vivo);color:var(--verde-texto)}
.pie{text-align:center;color:var(--tenue-2);font-size:.82rem;padding:3rem 0 2rem}
.pie a{color:var(--tenue)}
@media (max-width:520px){
  .racha{grid-template-columns:1fr;gap:.6rem}
  .dato-r{display:flex;align-items:center;gap:.9rem;text-align:left;padding:.9rem 1.1rem}
  .dato-r b{font-size:1.5rem}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ═══════ Cuenta, formularios y administración ═══════ */
.env.estrecho{width:min(100% - 2rem,560px)}
.titulo-g{font-size:clamp(1.9rem,6.5vw,2.8rem);font-weight:800;margin-bottom:1rem}
.entradilla{color:var(--tenue);margin-bottom:2rem}
.centro{text-align:center;color:var(--tenue);font-size:.93rem}
.centro a{color:var(--verde-texto)}
.dos{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
select{width:100%;padding:.9rem 1.1rem;border-radius:14px;border:1px solid var(--borde);
  background:#FFFFFF;color:var(--texto);font-family:var(--cuerpo);font-size:1rem;
  appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%2393A1BA' stroke-width='1.8'%3E%3Cpath d='m1 1 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1.1rem center}
select:focus{outline:none;border-color:var(--verde);box-shadow:0 0 0 3px rgba(11,122,42,.13)}
input[type=email],input[type=tel],input[type=password]{width:100%;padding:.9rem 1.1rem;border-radius:14px;
  border:1px solid var(--borde);background:#FFFFFF;color:var(--texto);
  font-family:var(--cuerpo);font-size:1rem}
input[type=email]:focus,input[type=tel]:focus,input[type=password]:focus{outline:none;
  border-color:var(--verde);box-shadow:0 0 0 3px rgba(11,122,42,.13)}
.casilla{display:flex;gap:.75rem;align-items:flex-start;font-size:.9rem;color:var(--tenue);
  line-height:1.5;margin-top:.6rem;cursor:pointer}
.casilla input{width:20px;height:20px;flex:none;margin-top:.15rem;accent-color:var(--verde)}
.casilla a{color:var(--verde-texto)}

/* Las herramientas del panel */
.apps{display:grid;gap:.9rem}
.app{display:block;padding:1.4rem;border-radius:var(--r);border:1px solid var(--borde);
  background:rgba(29,34,48,.025);text-decoration:none;color:inherit;transition:all .25s}
.app:hover{border-color:var(--borde-vivo);background:rgba(11,122,42,.05);transform:translateY(-3px)}
.app-cab{display:flex;align-items:baseline;gap:.8rem;margin-bottom:.4rem}
.app-num{font-family:var(--display);font-size:.78rem;color:var(--verde-texto);border:1px solid var(--borde-vivo);
  border-radius:999px;padding:.15rem .55rem;font-weight:700}
.app-cab strong{font-family:var(--display);font-size:1.2rem;font-weight:700;letter-spacing:-.02em}
.app p{color:var(--tenue);font-size:.93rem;margin:0 0 .7rem}
.app-estado{font-size:.78rem;color:var(--tenue-2);border:1px solid var(--borde);border-radius:999px;
  padding:.25rem .7rem;display:inline-block}
.app-estado.hecho{color:var(--verde-texto);border-color:var(--borde-vivo);background:rgba(11,122,42,.08)}

/* La oferta de la cita */
.cita{margin-top:1.2rem;padding:2.2rem 1.8rem;border-radius:var(--r-g);text-align:center;
  border:1px solid var(--borde-vivo);
  background:linear-gradient(150deg,rgba(11,122,42,.18),rgba(0,96,200,.07) 55%,rgba(29,34,48,.02))}
.cita-gancho{font-family:var(--display);font-size:clamp(1.25rem,4.2vw,1.65rem);font-weight:700;
  letter-spacing:-.02em;line-height:1.25;margin-bottom:.9rem}
.cita-oferta{color:var(--tenue);margin-bottom:1.5rem}
.cita-oferta strong{color:var(--verde-texto);font-weight:600}

/* Datos de la persona */
.datos{margin:0}
.datos>div{display:flex;gap:1rem;padding:.85rem 0;border-bottom:1px solid var(--borde);align-items:baseline}
.datos>div:last-child{border-bottom:0}
.datos dt{font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--tenue-2);
  width:8.5rem;flex:none}
.datos dd{margin:0;font-size:.97rem}

/* Tabla de administración */
.tabla-envoltura{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tabla{width:100%;border-collapse:collapse;font-size:.9rem;min-width:660px}
.tabla th{text-align:left;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--tenue-2);font-weight:600;padding:.7rem .8rem;border-bottom:1px solid var(--borde)}
.tabla td{padding:.85rem .8rem;border-bottom:1px solid var(--borde);vertical-align:top}
.tabla tr:last-child td{border-bottom:0}
.tabla a{color:var(--verde-texto);text-decoration:none}
.tabla a:hover{text-decoration:underline}
.menor{display:block;font-size:.8rem;color:var(--tenue-2);margin-top:.15rem}
.tabla .menor a{color:var(--tenue-2)}

@media (max-width:560px){ .dos{grid-template-columns:1fr;gap:0} }

/* ═══════ La invocación: ánimos, escena y consejo ═══════ */
.bajo{color:var(--tenue);font-size:.98rem}
.btn-grande{padding:1.15rem;font-size:1.02rem}

/* Elegir cómo se siente */
.animos{display:grid;grid-template-columns:repeat(2,1fr);gap:.7rem;margin-top:1.8rem;text-align:left}
.animo{display:flex;flex-direction:column;gap:.25rem;padding:1.1rem .95rem;border-radius:var(--r);
  border:1px solid var(--borde);background:rgba(29,34,48,.025);color:var(--texto);cursor:pointer;
  font-family:var(--cuerpo);transition:all .22s}
.animo:hover{border-color:var(--borde-vivo);background:rgba(11,122,42,.06);transform:translateY(-2px)}
.animo-icono{color:var(--verde-texto);opacity:.85}
.animo-icono svg{width:24px;height:24px}
.animo b{font-family:var(--display);font-size:1rem;font-weight:700;letter-spacing:-.02em;margin-top:.35rem}
.animo-frase{font-size:.79rem;color:var(--tenue-2);line-height:1.35}

/* Qué tan fuerte */
.niveles{display:grid;gap:.7rem;margin-top:1.8rem;text-align:left}
.nivel-op{padding:1.1rem 1.2rem;border-radius:var(--r);border:1px solid var(--borde);
  background:rgba(29,34,48,.025);color:var(--texto);cursor:pointer;font-family:var(--cuerpo);
  transition:all .22s;display:block;width:100%}
.nivel-op:hover{border-color:var(--borde-vivo);background:rgba(11,122,42,.06);transform:translateY(-2px)}
.nivel-op b{display:block;font-family:var(--display);font-size:1.05rem;font-weight:700;letter-spacing:-.02em}
.nivel-op span{font-size:.85rem;color:var(--tenue-2)}

/* La escena animada */
.escena{position:relative;margin:0 auto;max-width:420px}
.figura{width:100%;height:auto;display:block}
.escena-texto{position:absolute;left:0;right:0;bottom:-8px;text-align:center;pointer-events:none}
.escena-sobre{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--tenue-2);
  font-weight:600;margin:0 0 .35rem}
.escena-titulo{font-family:var(--display);font-size:clamp(1.35rem,5.5vw,1.9rem);font-weight:700;
  letter-spacing:-.02em;margin:0;line-height:1.15}
.escena-titulo.encendido{background:linear-gradient(120deg,var(--verde),var(--azul));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.parpadea{animation:aparecerTexto .7s cubic-bezier(.16,1,.3,1)}
@keyframes aparecerTexto{from{opacity:0;transform:translateY(10px);filter:blur(4px)}}
.escena-pie{margin-top:2.6rem;min-height:56px}

/* El consejo de Fernando */
.consejo{text-align:left;border-radius:var(--r-g);border:1px solid var(--borde);padding:2rem 1.7rem;
  background:linear-gradient(168deg,var(--superficie),var(--fondo-2));margin-bottom:1.4rem}
.consejo-firma{display:flex;align-items:center;gap:.7rem;padding-bottom:1.3rem;margin-bottom:1.3rem;
  border-bottom:1px solid var(--borde)}
.consejo-firma strong{display:block;font-family:var(--display);font-size:.95rem;font-weight:700}
.consejo-firma span{font-size:.78rem;color:var(--tenue-2)}
.consejo h2{font-size:clamp(1.35rem,4.6vw,1.75rem);line-height:1.2;margin-bottom:1.2rem}
.consejo-cuerpo p{color:var(--tenue);font-size:.99rem;line-height:1.68;margin:0 0 1rem}
.consejo-cuerpo p:last-child{margin-bottom:0}
.consejo-accion{margin-top:1.6rem;padding:1.2rem 1.3rem;border-radius:var(--r);
  border:1px solid var(--borde-vivo);background:rgba(11,122,42,.07)}
.etiqueta-accion{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--verde-texto);
  font-weight:600;display:block;margin-bottom:.5rem}
.consejo-accion p{margin:0;font-size:.99rem;color:var(--texto);line-height:1.55}
.ritual-linea{color:var(--tenue-2);font-size:.9rem;margin:0}

/* Cierre */
.sello-final{width:62px;height:62px;border-radius:50%;margin:0 auto 1.4rem;display:flex;
  align-items:center;justify-content:center;color:#062A06;
  background:linear-gradient(135deg,var(--verde),var(--verde-acie));
  box-shadow:0 10px 34px -10px rgba(11,122,42,.65);animation:sube .6s cubic-bezier(.34,1.56,.64,1)}
@keyframes sube{from{transform:scale(.5);opacity:0}}
.conteo{color:var(--tenue);margin-top:1.5rem}
.conteo strong{color:var(--verde-texto)}
.aviso-cuidado.fuerte{color:var(--ambar);border:1px solid rgba(232,208,0,.28);
  background:rgba(232,208,0,.08);border-radius:14px;padding:1rem 1.1rem;margin-top:2rem}

/* ═══════ La ficha, con más presencia ═══════ */
.heroe{position:relative;padding-top:2.6rem;overflow:hidden}
/* Marca de agua: el alter ego de fondo, sin brillo y muy tenue, detrás del nombre. */
.heroe-sello{position:absolute;top:-14px;left:50%;transform:translateX(-50%);width:124px;height:auto;
  opacity:.11;pointer-events:none;z-index:0}
.heroe-sello g,.heroe-sello circle,.heroe-sello ellipse{filter:none!important}
.heroe>.eres,.heroe>h1,.heroe>.lema,.heroe>.heroe-fuerzas{position:relative;z-index:1}
.heroe-fuerzas{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:.45rem;
  padding:0;margin:1.6rem 0 0}
.heroe-fuerzas li{font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;font-weight:600;
  color:var(--verde-texto);border:1px solid var(--borde-vivo);border-radius:999px;padding:.32rem .8rem;
  background:rgba(11,122,42,.07)}
.manifiesto{margin-top:1.5rem;padding:1.9rem 1.7rem;border-radius:var(--r-g);
  border-left:3px solid var(--verde);background:linear-gradient(100deg,rgba(11,122,42,.08),transparent 70%)}
.manifiesto p{color:var(--tenue);font-size:1rem;line-height:1.66;margin:0 0 .9rem}
.manifiesto p:last-child{margin-bottom:0}
.manifiesto strong{color:var(--texto);font-weight:600}
.manifiesto em{color:var(--tenue-2);font-style:italic}
.manifiesto .manifiesto-abre{font-family:var(--display);font-size:1.15rem;font-weight:700;
  color:var(--texto);letter-spacing:-.02em;line-height:1.3}

@media (max-width:330px){ .animos{grid-template-columns:1fr} }

/* Reparto de ánimos en administración */
.barra-animo{display:flex;align-items:center;gap:.9rem;margin-bottom:.6rem;font-size:.88rem}
.barra-animo>span{width:8.5rem;flex:none;color:var(--tenue)}
.barra-pista{flex:1;height:8px;border-radius:4px;background:rgba(29,34,48,.07);overflow:hidden}
.barra-relleno{height:100%;border-radius:4px;background:linear-gradient(90deg,var(--verde-acie),var(--verde))}
.barra-animo b{width:2.2rem;text-align:right;color:var(--verde-texto);font-family:var(--display)}

/* ═══════ Sorteo de Instagram ═══════ */
.env.medio{width:min(100% - 2rem,760px)}
.pasos-sorteo{display:flex;gap:.4rem;margin:1.4rem 0 2rem;flex-wrap:wrap}
.paso-s{flex:1;min-width:0;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;font-weight:600;
  color:var(--tenue-2);padding-top:.7rem;border-top:3px solid rgba(29,34,48,.10);transition:all .3s;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.paso-s.hecho{color:var(--verde-texto);border-top-color:var(--verde)}
.vista-s{display:none;animation:entra .45s cubic-bezier(.16,1,.3,1)}
.vista-s.act{display:block}

.instrucciones{counter-reset:paso;list-style:none;padding:0;margin:1rem 0 1.4rem}
.instrucciones li{counter-increment:paso;position:relative;padding:0 0 .9rem 2.4rem;color:var(--tenue);font-size:.94rem;line-height:1.5}
.instrucciones li::before{content:counter(paso);position:absolute;left:0;top:-.05rem;width:1.65rem;height:1.65rem;
  border-radius:50%;border:1px solid var(--borde-vivo);color:var(--verde-texto);font-size:.78rem;font-weight:600;
  display:flex;align-items:center;justify-content:center}
.instrucciones strong{color:var(--texto);font-weight:500}
textarea.pegado{min-height:220px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.85rem;line-height:1.5}

.resumen-lectura{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;margin:1.3rem 0}
.tabla-previa{max-height:380px;overflow:auto;border:1px solid var(--borde);border-radius:14px}
.tabla-previa table{width:100%;border-collapse:collapse;font-size:.86rem}
.tabla-previa th{position:sticky;top:0;background:var(--superficie);text-align:left;font-size:.7rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--tenue-2);font-weight:600;padding:.65rem .8rem;border-bottom:1px solid var(--borde);z-index:1}
.tabla-previa td{padding:.6rem .8rem;border-bottom:1px solid var(--borde);vertical-align:top;color:var(--tenue)}
.tabla-previa td.u{color:var(--texto);font-weight:500;white-space:nowrap}
.tabla-previa td.n{text-align:center;color:var(--verde-texto);font-weight:600}
.tabla-previa tr.fuera td{opacity:.38;text-decoration:line-through}
.quitar{background:none;border:0;color:var(--tenue-2);cursor:pointer;font-size:1rem;padding:.1rem .35rem;border-radius:6px}
.quitar:hover{color:var(--coral);background:rgba(248,32,0,.1)}

.fila-reglas{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.interruptor{display:flex;align-items:flex-start;gap:.8rem;padding:1rem 1.1rem;border:1px solid var(--borde);
  border-radius:14px;cursor:pointer;margin-bottom:.7rem;transition:border-color .2s}
.interruptor:hover{border-color:var(--borde-vivo)}
.interruptor input{width:20px;height:20px;flex:none;margin-top:.1rem;accent-color:var(--verde)}
.interruptor b{display:block;font-weight:500;font-size:.95rem;color:var(--texto)}
.interruptor span{font-size:.83rem;color:var(--tenue-2)}
.opciones-modo{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin-bottom:1.4rem}
.opcion-modo{position:relative}
.opcion-modo input{position:absolute;opacity:0;pointer-events:none}
.opcion-modo label{display:block;padding:1.1rem;border:1px solid var(--borde);border-radius:14px;cursor:pointer;
  margin:0;transition:all .2s;height:100%}
.opcion-modo label b{display:block;font-family:var(--display);font-size:1rem;color:var(--texto);font-weight:700;
  letter-spacing:-.02em;margin-bottom:.25rem}
.opcion-modo label span{font-size:.83rem;color:var(--tenue-2);line-height:1.4;display:block}
.opcion-modo input:checked+label{border-color:var(--verde);background:rgba(11,122,42,.08)}
.opcion-modo input:focus-visible+label{box-shadow:0 0 0 3px rgba(11,122,42,.25)}
.vivo{position:sticky;bottom:1rem;z-index:5;margin-top:1.4rem;padding:1rem 1.2rem;border-radius:16px;
  border:1px solid var(--borde-vivo);background:rgba(255,255,255,.94);backdrop-filter:blur(12px);
  display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.vivo p{margin:0;font-size:.92rem;color:var(--tenue)}
.vivo strong{color:var(--verde-texto);font-family:var(--display);font-size:1.15rem}
.descartes{font-size:.85rem;color:var(--tenue-2);margin:.6rem 0 0}

/* La ruleta */
.escenario{text-align:center;padding:1rem 0 .5rem}
.escenario-premio{font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:var(--tenue-2);font-weight:600;margin-bottom:.5rem}
.escenario-orden{font-family:var(--display);font-size:clamp(1.3rem,4.6vw,1.8rem);font-weight:700;letter-spacing:-.02em;margin-bottom:1.6rem}
.ruleta{position:relative;height:240px;overflow:hidden;border-radius:var(--r-g);border:1px solid var(--borde);
  background:linear-gradient(180deg,var(--fondo) 0%,var(--superficie) 50%,var(--fondo) 100%);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 28%,#000 72%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 28%,#000 72%,transparent)}
.ruleta::before{content:"";position:absolute;left:8%;right:8%;top:50%;height:64px;transform:translateY(-50%);
  border-radius:16px;border:1px solid var(--borde-vivo);background:rgba(11,122,42,.06);z-index:0}
.ruleta-pista{position:absolute;left:0;right:0;top:0;will-change:transform;z-index:1}
.ruleta-nombre{height:64px;display:flex;align-items:center;justify-content:center;font-family:var(--display);
  font-size:clamp(1.25rem,5.4vw,1.9rem);font-weight:700;letter-spacing:-.02em;color:var(--tenue-2);white-space:nowrap}
.ruleta-nombre.final{color:var(--texto)}
.ruleta.gano{border-color:var(--verde);box-shadow:0 0 0 1px var(--verde),0 20px 60px -20px rgba(11,122,42,.55);transition:all .5s}
.ruleta.gano .ruleta-nombre.final{background:linear-gradient(120deg,var(--verde),var(--azul));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.chispas{position:absolute;inset:0;pointer-events:none;z-index:3}
.ganador-comentario{max-width:32rem;margin:1.4rem auto 0;color:var(--tenue);font-size:.97rem;min-height:3rem}
.ganador-comentario small{display:block;color:var(--tenue-2);font-size:.8rem;margin-top:.5rem}

/* Resultado */
.podio{margin-top:1.2rem;padding:1.6rem 1.5rem;border-radius:var(--r-g);border:1px solid var(--borde-vivo);
  background:linear-gradient(160deg,rgba(11,122,42,.16),rgba(0,96,200,.05) 55%,rgba(29,34,48,.02))}
.podio-titulo{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--verde-texto);font-weight:600;margin:0 0 1rem}
.podio-fila{display:flex;gap:1rem;align-items:flex-start;padding:.9rem 0;border-top:1px solid var(--borde)}
.podio-fila:first-of-type{border-top:0;padding-top:0}
.podio-pos{flex:none;width:2.1rem;height:2.1rem;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:700;color:#062A06;background:linear-gradient(135deg,var(--verde),var(--verde-acie))}
.podio-usuario{font-family:var(--display);font-size:1.3rem;font-weight:700;letter-spacing:-.02em;color:var(--texto);text-decoration:none}
.podio-usuario:hover{color:var(--verde-texto)}
.podio-comentario{margin:.25rem 0 0;color:var(--tenue);font-size:.92rem}
.huella{font-family:ui-monospace,Menlo,monospace;font-size:.76rem;color:var(--tenue-2);margin:.8rem 0 0;word-break:break-all}
.historial a{color:inherit;text-decoration:none;display:block}
.historial li:hover strong{color:var(--verde-texto)}
.aviso-legal{font-size:.82rem;color:var(--tenue-2);line-height:1.5;border-left:2px solid var(--borde);padding-left:1rem;margin-top:1.4rem}

@media (max-width:600px){
  .fila-reglas,.opciones-modo{grid-template-columns:1fr}
  .resumen-lectura{grid-template-columns:1fr}
  .vivo{position:static;margin-top:1.2rem}
  .vivo .btn{width:100%}
  .paso-s{font-size:0;letter-spacing:0}
  .paso-s::after{content:attr(data-corto);font-size:.68rem;letter-spacing:.05em}
}

/* ═══════ Lectura automática de Instagram ═══════ */
.ig-cuenta{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;font-size:.93rem;color:var(--tenue);margin-bottom:1rem}
.ig-cuenta strong{color:var(--texto)}
.ig-salir{margin-left:auto}
.ig-salir .btn-texto{padding:0}
.ig-publicacion{display:flex;gap:1rem;align-items:center;padding:.8rem;border:1px solid var(--borde);
  border-radius:14px;margin-bottom:1rem;background:rgba(29,34,48,.02)}
.ig-publicacion img,.ig-publicacion .ig-sin-foto{width:64px;height:64px;border-radius:10px;object-fit:cover;
  flex:none;background:var(--superficie-2);display:block}
.ig-publicacion strong{display:block;font-size:.92rem;font-weight:500;color:var(--texto);line-height:1.35}
.ig-publicacion span{font-size:.8rem;color:var(--tenue-2)}
.ig-progreso{margin-top:1rem}
.ig-barra-pista{height:8px;border-radius:4px;background:rgba(29,34,48,.08);overflow:hidden}
.ig-barra{height:100%;width:0;border-radius:4px;background:linear-gradient(90deg,var(--verde-acie),var(--verde));
  transition:width .5s ease}
.ig-grilla{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem}
.ig-post{position:relative;aspect-ratio:1;border:1px solid var(--borde);border-radius:12px;overflow:hidden;padding:0;
  background:var(--superficie-2);cursor:pointer;transition:transform .2s,border-color .2s}
.ig-post:hover{transform:translateY(-2px);border-color:var(--verde)}
.ig-post img,.ig-post .ig-sin-foto{width:100%;height:100%;object-fit:cover;display:block}
.ig-post>span:last-child{position:absolute;left:0;right:0;bottom:0;padding:.35rem .45rem;font-size:.68rem;color:#fff;
  background:linear-gradient(transparent,rgba(0,0,0,.78));text-align:left}
.url-meta{display:flex;gap:.5rem;margin-bottom:.9rem}
.url-meta input{flex:1;min-width:0;font-family:ui-monospace,Menlo,monospace;font-size:.8rem}
@media (max-width:600px){ .ig-grilla{grid-template-columns:repeat(3,1fr)} }

/* Solo en computador: desde el celular no se pueden copiar comentarios de Instagram. */
.solo-computador{display:none!important}
@media (hover:hover) and (min-width:900px){ .solo-computador{display:block!important} }

/* ═══════ Guía de contenido ═══════ */
.pestanas{display:flex;gap:.4rem;flex-wrap:wrap;margin:1.2rem 0 1.6rem}
.pestanas a{padding:.55rem .95rem;border-radius:999px;border:1px solid var(--borde);text-decoration:none;color:var(--tenue);font-size:.88rem;font-weight:500;background:rgba(255,255,255,.6)}
.pestanas a.act{background:var(--texto);color:#fff;border-color:var(--texto)}
.chip-pilar{display:inline-block;font-size:.72rem;font-weight:600;letter-spacing:.04em;padding:.28rem .7rem;border-radius:999px;color:var(--c);background:color-mix(in srgb,var(--c) 12%,#fff);border:1px solid color-mix(in srgb,var(--c) 35%,#fff)}
.chip{display:inline-block;font-size:.72rem;font-weight:500;padding:.28rem .7rem;border-radius:999px;color:var(--tenue);background:rgba(14,18,32,.05);border:1px solid var(--borde)}
.chip-publicada{color:var(--verde-texto);background:rgba(11,122,42,.1)}.chip-en_produccion{color:#8A5A00;background:rgba(232,208,0,.18)}.chip-descartada{opacity:.5}
.idea h3{margin:.6rem 0 .3rem;font-size:1.25rem}
.gancho{font-family:var(--display);font-weight:600;font-size:1.02rem;margin:.2rem 0 .4rem}
.idea-cuerpo{margin-top:1.4rem;padding-top:1.4rem;border-top:1px solid var(--borde)}
.idea-cuerpo h4{font-family:var(--display);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--tenue-2);margin:.4rem 0 .6rem}
.dos-col{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem}
.copiable{margin:1rem 0;border:1px solid var(--borde);border-radius:14px;overflow:hidden;background:#fff}
.copiable-cab{display:flex;justify-content:space-between;align-items:center;padding:.6rem .9rem;background:rgba(14,18,32,.04);font-size:.86rem}
.btn-copiar{border:1px solid var(--borde);background:#fff;border-radius:999px;padding:.3rem .8rem;font-size:.8rem;cursor:pointer;font-family:var(--cuerpo)}
.copiable pre{margin:0;padding:.9rem 1rem;white-space:pre-wrap;font-family:var(--cuerpo);font-size:.88rem;line-height:1.55;color:var(--tenue);max-height:420px;overflow:auto}
.acciones-idea{display:flex;gap:.8rem;flex-wrap:wrap;align-items:center;margin-top:1.2rem}
.publicar-forma{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.publicar-forma input[type=date],.publicar-forma input[type=text]{width:auto;padding:.6rem .8rem;font-size:.88rem}
input[type=date]{padding:.9rem 1.1rem;border-radius:14px;border:1px solid var(--borde);background:#fff;font-family:var(--cuerpo);font-size:1rem}
.fila-pilar{display:flex;gap:1rem;align-items:center;padding:.6rem 0;border-bottom:1px solid var(--borde)}
.fila-pilar .chip-pilar{min-width:11rem;text-align:center}
.opciones-redes{display:flex;gap:.6rem;flex-wrap:wrap}
.casilla-chica{display:inline-flex;align-items:center;gap:.4rem;padding:.5rem .9rem;border:1px solid var(--borde);border-radius:999px;font-size:.88rem;cursor:pointer;background:#fff;margin:0}
.casilla-chica input{accent-color:var(--verde)}
.fila-plan{display:grid;grid-template-columns:3rem 1fr auto;gap:1rem;align-items:center;padding:.8rem 0;border-bottom:1px solid var(--borde)}
.fila-plan .dia{font-family:var(--display);font-weight:700;color:var(--tenue-2)}
.fila-plan a{color:var(--texto);text-decoration:none}
.resultados-forma{display:flex;gap:.8rem;flex-wrap:wrap;align-items:flex-end;margin-top:.8rem}
.resultados-forma label{margin:0;font-size:.8rem}
.resultados-forma input{margin-top:.3rem;padding:.55rem .8rem;font-size:.9rem}
@media (max-width:700px){.dos-col{grid-template-columns:1fr}.fila-plan{grid-template-columns:2.4rem 1fr}.fila-plan form{grid-column:2}.fila-pilar{flex-wrap:wrap}}

/* ═══════ Panel de superadministración ═══════ */
.herramientas-admin{display:grid;grid-template-columns:repeat(3,1fr);gap:.9rem;margin:1.4rem 0 1.8rem}
.herr-admin{display:flex;flex-direction:column;gap:.35rem;padding:1.3rem 1.3rem 1.1rem;text-decoration:none;color:var(--texto);transition:transform .25s,box-shadow .25s}
.herr-admin:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(6,76,59,.14)}
.herr-admin strong{font-family:var(--display);font-size:1.15rem;font-weight:700;line-height:1.2}
.herr-admin span{font-size:.88rem;color:var(--tenue);line-height:1.5}
.herr-admin em{font-style:normal;font-size:.78rem;color:var(--tenue-2);margin-top:.5rem}
.herr-etq{font-family:var(--display);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--verde-texto);font-weight:600}
.herr-principal{grid-column:span 2;background:linear-gradient(135deg,var(--hondo),var(--hondo-2));color:#fff;border-color:transparent}
.herr-principal span,.herr-principal em{color:rgba(255,255,255,.78)}
.herr-principal .herr-etq{color:#B9F5D6}
@media (max-width:760px){.herramientas-admin{grid-template-columns:1fr 1fr}.herr-principal{grid-column:span 2}}
@media (max-width:520px){.herramientas-admin{grid-template-columns:1fr}.herr-principal{grid-column:span 1}}

/* ═══════ Programa de 12 semanas ═══════ */
.chip-dia{color:var(--hondo);background:rgba(6,76,59,.08);border-color:rgba(6,76,59,.2);font-weight:600}
.chip-pendiente{color:var(--tenue)}.chip-grabada{color:#8A5A00;background:rgba(232,208,0,.18)}
.dato-r small{font-size:.9rem;color:var(--tenue-2);font-weight:500}
.semana-cab{position:relative}
.nav-semanas{display:flex;justify-content:space-between;gap:1rem;margin-bottom:.8rem;font-size:.88rem}
.nav-semanas a{color:var(--verde-texto);text-decoration:none;font-weight:500}
.escenas{margin-bottom:1.4rem}
.escena{display:grid;grid-template-columns:2rem 1fr 34%;gap:.4rem 1rem;padding:.8rem 0;border-bottom:1px solid var(--borde);align-items:start}
.escena p{margin:0;line-height:1.55}
.escena-n{font-family:var(--display);font-weight:700;color:var(--tenue-2)}
.escena-dice{font-size:.98rem}
.escena-pantalla{font-family:var(--display);font-weight:600;font-size:.86rem;color:var(--hondo);background:rgba(6,76,59,.06);padding:.5rem .7rem;border-radius:10px}
.escena-pantalla small{display:block;font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--tenue-2);font-weight:600;margin-bottom:.15rem}
@media (max-width:640px){.escena{grid-template-columns:2rem 1fr}.escena-pantalla{grid-column:2}}
.laminas{list-style:none;padding:0;margin:0 0 1.2rem;counter-reset:lam}
.laminas li{counter-increment:lam;display:grid;grid-template-columns:2.2rem 1fr;gap:.6rem;padding:.7rem 0;border-bottom:1px solid var(--borde)}
.laminas li::before{content:counter(lam);font-family:var(--display);font-weight:700;color:var(--tenue-2)}
.laminas strong{display:block;font-family:var(--display);font-weight:700;margin-bottom:.15rem}
.laminas span{grid-column:2;color:var(--tenue);font-size:.92rem;line-height:1.5}
.fila-semana{display:grid;grid-template-columns:3rem 1fr auto;gap:1rem;align-items:start;text-decoration:none;color:var(--texto);transition:transform .2s}
.fila-semana:hover{transform:translateY(-2px)}
.fila-semana.actual{border-color:var(--hondo);box-shadow:0 0 0 2px rgba(6,76,59,.15)}
.fila-semana strong{display:block;font-family:var(--display);font-size:1.1rem;margin-bottom:.2rem}
.fila-semana>b{font-family:var(--display);font-size:1.2rem;color:var(--verde-texto)}
.num-semana{font-family:var(--display);font-weight:700;font-size:1.6rem;color:var(--tenue-2);line-height:1}
.mini-piezas{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.6rem}
.mini-piezas .chip{font-size:.68rem;padding:.2rem .55rem}
@media (max-width:600px){.fila-semana{grid-template-columns:2.4rem 1fr}.fila-semana>b{grid-column:2}}

.capas{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin:.6rem 0 .8rem}
.capa{font-size:.84rem;line-height:1.45;color:var(--tenue);padding:.7rem .85rem;border-radius:12px;background:rgba(6,76,59,.05);border:1px solid rgba(6,76,59,.1)}
.capa small{display:block;font-family:var(--display);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--hondo);font-weight:700;margin-bottom:.25rem}
@media (max-width:700px){.capas{grid-template-columns:1fr}}