/* ============================================================
   FEATURES DE MARKETING - motor HTML del dashboard A
   ------------------------------------------------------------
   Un solo archivo para las 23 piezas. Se inyecta al final de
   cualquier plantilla (Agora, Luna, Terra, Sol y las que vengan).

   NO TRAE COLORES PROPIOS. Toma los del diseno que este puesto,
   con una cadena de respaldos: si la plantilla es Luna agarra el
   lila, si es Terra el oliva, si es Sol el ambar y si es Agora el
   teal. Por eso las piezas nunca desentonan.

   REGLA ANTI-CHOQUE
   Ninguna pieza flotante escribe su propia distancia al borde.
   Todas usan --f-abajo-der / --f-abajo-izq, que las calcula el
   gestor de carriles de marketing.js midiendo la altura real de
   cada una. Asi se pueden prender las 23 juntas.
   ============================================================ */

:root{
  /* --- Puente de colores: se adapta al diseno activo --- */
  /* El orden importa: se prueba el color principal de cada
     plantilla, de la mas nueva a la mas vieja. Agora define
     --teal Y --ambar, asi que --teal va antes. Aula no tiene
     ninguno de esos y cae en --tinta, que es su azul de marca:
     sin esta ultima escala, sus piezas salian violetas. */
  --f-ac:   var(--lila,   var(--oliva,   var(--teal,   var(--ambar,   var(--tinta,   #4f46e5)))));
  --f-ac2:  var(--lila-2, var(--oliva-2, var(--teal-2, var(--ambar-2, var(--tinta-2, #3730a3)))));
  --f-acl:  var(--lila-t, var(--oliva-t, var(--teal-t, var(--ambar-t, var(--marca-b, #eef2ff)))));
  --f-alt:  var(--menta,  var(--ocre,    var(--coral,  var(--ambar,   var(--marca,   #f59e0b)))));
  --f-papel: var(--blanco, #fff);
  --f-tinta: var(--tinta, #16181d);
  --f-tinta2: var(--tinta-2, #4b5563);
  --f-tinta3: var(--tinta-3, #8a8a9a);
  --f-linea: var(--linea, #e5e7eb);
  --f-tip:   var(--tip, system-ui, sans-serif);
  --f-radio: var(--radio, 14px);
  --f-ancho: var(--ancho, 1200px);

  /* --- Carriles: los escribe el gestor, no se tocan a mano --- */
  --f-abajo-der: 20px;
  --f-abajo-izq: 20px;
  --f-arriba: 0px;
}

.f-oculto{ display:none !important; }

/* ============================================================
   1. BARRA SUPERIOR ROTATIVA (clonada, con giro vertical)
   ============================================================ */
/* La ventanita tiene que ser MAS ALTA que la linea de texto, si no
   le corta las tildes y las colas de las letras. */
.f-rot{ display:inline-flex; align-items:center; justify-content:center;
  overflow:hidden; height:1.9em; vertical-align:middle; max-width:100%; }
.f-rot-linea{ display:inline-flex; align-items:center; justify-content:center;
  gap:8px; line-height:1.9em; white-space:nowrap;
  transition:transform .38s cubic-bezier(.4,0,.2,1), opacity .38s ease; }
@media (max-width:640px){
  .f-rot{ height:2.6em; }
  .f-rot-linea{ white-space:normal; line-height:1.3; text-align:center; }
}
.f-rot-linea.sale{ transform:translateY(-115%); opacity:0; }
.f-rot-linea.entra{ transform:translateY(115%); opacity:0; transition:none; }

/* ============================================================
   2. BARRA DE PROGRESO DE LECTURA (clonada)
   ============================================================ */
#fProgreso{ position:fixed; top:0; left:0; height:3px; width:0; z-index:950;
  background:var(--f-ac); transition:width .1s linear; pointer-events:none; }

/* ============================================================
   3. BARRA INFERIOR DE ACCION + contador + cupos (clonadas)
   ============================================================ */
#fInferior{ position:fixed; left:0; right:0; bottom:0; z-index:120;
  background:rgba(20,18,26,.93); backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  border-top:1px solid rgba(255,255,255,.14); color:#fff;
  transform:translateY(115%); transition:transform .34s cubic-bezier(.2,.9,.3,1);
  box-shadow:0 -6px 26px rgba(0,0,0,.26); padding-top:6px; }
#fInferior.ver{ transform:translateY(0); }
.f-inf{ display:flex; align-items:center; gap:20px; padding:13px 22px;
  width:min(100% - 24px, var(--f-ancho)); margin-inline:auto; flex-wrap:wrap; }
.f-inf-txt{ margin-right:auto; min-width:180px; }
.f-inf-t{ display:block; font-weight:700; font-size:15.5px; color:#fff; }
.f-inf-s{ display:block; font-size:13px; color:rgba(255,255,255,.72); margin-top:2px; }
.f-precio{ display:flex; align-items:baseline; gap:10px; }
.f-antes{ font-size:15px; color:rgba(255,255,255,.6); text-decoration:line-through; }
.f-ahora{ font-size:24px; font-weight:800; color:#fff; }
.f-off{ background:#ffd23f; color:#1a1a1a; border-radius:99px; padding:5px 11px;
  font-size:12.5px; font-weight:800; }
.f-inf-btn{ background:#fff; color:#12121a; border:none; border-radius:10px;
  padding:15px 30px; font:800 15.5px var(--f-tip); cursor:pointer;
  text-decoration:none; white-space:nowrap; transition:.18s;
  box-shadow:0 3px 0 rgba(0,0,0,.28); }
.f-inf-btn:hover{ background:#ffd23f; color:#12121a; transform:translateY(-2px); }
.f-inf-x{ position:absolute; top:8px; right:12px; background:rgba(255,255,255,.16);
  border:none; color:#fff; width:30px; height:30px; border-radius:50%;
  font-size:18px; line-height:1; cursor:pointer; display:grid; place-items:center; }
.f-inf-x:hover{ background:rgba(255,255,255,.3); color:#fff; }

#fReloj{ display:flex; gap:7px; align-items:center; }
.f-rel{ background:rgba(255,255,255,.14); border-radius:8px; padding:6px 9px;
  text-align:center; min-width:46px; }
.f-rel b{ display:block; font-size:17px; font-weight:800; line-height:1; color:#fff; }
.f-rel span{ display:block; font-size:12px; color:rgba(255,255,255,.7);
  letter-spacing:.06em; text-transform:uppercase; margin-top:3px; }

.f-cupos{ min-width:170px; }
.f-cupos-t{ display:block; font-size:12.5px; color:rgba(255,255,255,.8); margin-bottom:6px; }
.f-barra{ height:7px; border-radius:99px; background:rgba(255,255,255,.22); overflow:hidden; }
.f-barra i{ display:block; height:100%; width:0; background:var(--f-alt);
  border-radius:99px; transition:width 1.2s ease; }

/* ============================================================
   4. AVISOS FLOTANTES (clonada) - carril abajo-izquierda
   ============================================================ */
#fAviso{ position:fixed; left:20px; bottom:var(--f-abajo-izq); z-index:110;
  background:var(--f-papel); color:var(--f-tinta);
  border:1px solid var(--f-linea); border-left:4px solid var(--f-ac);
  border-radius:var(--f-radio); padding:13px 40px 13px 16px; max-width:310px;
  font:400 13.8px/1.45 var(--f-tip); box-shadow:0 12px 34px rgba(0,0,0,.16);
  opacity:0; transform:translateX(-16px); transition:.35s ease; pointer-events:none; }
#fAviso.ver{ opacity:1; transform:translateX(0); pointer-events:auto; }
#fAviso b{ display:block; margin-bottom:3px; color:var(--f-tinta); }
.f-aviso-x{ position:absolute; right:8px; top:8px; background:none; border:none;
  font-size:16px; color:var(--f-tinta3); cursor:pointer; padding:2px 6px; }

/* ============================================================
   5. PANEL DE BIENVENIDA (clonada) - carril abajo-derecha
   ============================================================ */
#fBienvenida{ position:fixed; right:20px; bottom:var(--f-abajo-der); z-index:112;
  /* Tope de alto: si la pila lo empujaba muy arriba, el boton de
     cerrar quedaba fuera de la pantalla. */
  width:min(340px, calc(100vw - 40px)); max-height:calc(100vh - 130px); overflow-y:auto;
  background:var(--f-papel);
  border:1px solid var(--f-linea); border-radius:var(--f-radio); overflow:hidden;
  box-shadow:0 18px 46px rgba(0,0,0,.20); opacity:0; transform:translateY(18px);
  transition:.34s cubic-bezier(.2,.9,.3,1); pointer-events:none; }
#fBienvenida.ver{ opacity:1; transform:translateY(0); pointer-events:auto; }
.f-bien-banda{ height:6px; background:var(--f-ac); }
.f-bien-in{ padding:26px 24px 22px; position:relative; }
.f-bien-in b{ display:block; font:800 18px/1.25 var(--f-tip);
  color:var(--f-tinta); margin-bottom:8px; }
.f-bien-in p{ margin:0 0 18px; font-size:14.5px; line-height:1.6; color:var(--f-tinta2); }
.f-bien-btn{ display:block; text-align:center; background:var(--f-ac); color:#fff;
  border:none; border-radius:10px; padding:13px 18px; font:700 14.5px var(--f-tip);
  text-decoration:none; cursor:pointer; transition:.18s; }
.f-bien-btn:hover{ background:var(--f-ac2); color:#fff; }
.f-bien-x{ position:absolute; top:10px; right:10px; width:28px; height:28px;
  border-radius:50%; background:var(--f-acl); border:none; color:var(--f-tinta2);
  font-size:16px; line-height:1; cursor:pointer; display:grid; place-items:center; }

/* ============================================================
   6. HERRAMIENTAS FLOTANTES (clonada) - carril abajo-derecha
   ============================================================ */
/* Chicas y juntas: eran de 44px con 8px de aire y ocupaban media
   esquina. Ahora 36px con 4px, agrupadas como un solo bloque. */
#fHerr{ position:fixed; right:20px; bottom:var(--f-abajo-der); z-index:111;
  display:flex; flex-direction:column; gap:4px; }
#fHerr button{ width:36px; height:36px; border-radius:50%; border:1px solid var(--f-linea);
  background:var(--f-papel); color:var(--f-tinta2); font:700 13px var(--f-tip);
  cursor:pointer; box-shadow:0 3px 10px rgba(0,0,0,.12);
  display:grid; place-items:center; transition:.18s; }
#fHerr button:hover{ background:var(--f-ac); color:#fff; border-color:var(--f-ac);
  transform:translateY(-2px); }

/* ============================================================
   7. WHATSAPP (clonada) - carril abajo-derecha
   ============================================================ */
#fWsp{ position:fixed; right:20px; bottom:var(--f-abajo-der); z-index:113;
  width:56px; height:56px; border-radius:50%; background:#25d366; color:#fff;
  display:grid; place-items:center; box-shadow:0 8px 24px rgba(37,211,102,.4);
  text-decoration:none; transition:.2s; }
#fWsp:hover{ transform:scale(1.07); color:#fff; }
#fWsp svg{ width:29px; height:29px; fill:#fff; }
#fGlobo{ position:fixed; right:86px; bottom:var(--f-abajo-der); z-index:113;
  background:var(--f-papel); color:var(--f-tinta); border:1px solid var(--f-linea);
  border-radius:var(--f-radio); padding:11px 15px; max-width:230px;
  font:400 13.5px/1.45 var(--f-tip); box-shadow:0 10px 28px rgba(0,0,0,.16);
  opacity:0; transform:translateX(10px); transition:.3s; pointer-events:none; }
#fGlobo.ver{ opacity:1; transform:translateX(0); }

/* ============================================================
   8. SELLO DE GARANTIA (clonada) - dentro del contenido
   ============================================================ */
.f-garantia{ display:flex; align-items:center; gap:18px;
  background:var(--f-acl); border:2px solid var(--f-ac);
  border-radius:var(--f-radio); padding:20px 24px;
  width:min(100% , 720px); margin:32px auto 0; }
.f-garantia-sello{ width:64px; height:64px; border-radius:50%; flex-shrink:0;
  background:var(--f-papel); border:3px solid var(--f-ac);
  display:grid; place-items:center; font-size:28px; }
.f-garantia b{ display:block; font:800 17px var(--f-tip);
  color:var(--f-tinta); margin-bottom:4px; }
.f-garantia span{ display:block; font-size:14.5px; line-height:1.55; color:var(--f-tinta2); }
@media (max-width:560px){ .f-garantia{ flex-direction:column; text-align:center; } }

/* ============================================================
   ENCABEZADO EN DOS FILAS
   ------------------------------------------------------------
   El menu principal, el selector de idioma, los iconos de redes y
   el boton de registro no entran todos en una sola linea: en un
   monitor comun los dos ultimos quedaban recortados.

   Ahora el menu se queda arriba y el resto baja a una segunda
   fila pegada abajo, alineada a la derecha. Vale para las cinco
   plantillas del motor a la vez.
   ============================================================ */
.top-in{ flex-wrap:wrap; row-gap:0; }
.top-in .nav{ order:2; }
.top-in .top-acc{ order:3; width:100%; justify-content:flex-end;
  gap:10px; padding:7px 0 9px; margin-top:2px;
  border-top:1px solid var(--f-linea); }
/* En el celular el menu es un desplegable: ahi la segunda fila
   no hace falta y los controles vuelven al lado de la marca. */
@media (max-width:1000px){
  .top-in .top-acc{ order:0; width:auto; border-top:none;
    padding:0; margin-top:0; }
}

/* ============================================================
   9. ICONOS SOCIALES DEL ENCABEZADO (clonada)
   ============================================================ */
.f-redes-top{ display:flex; align-items:center; gap:7px; }
/* Cuadrado de 40x40 CLAVADO, con los cuatro lados iguales.
   Antes la plantilla le ponia min-height:44px por la regla de zonas
   tocables y el boton quedaba de 32 de ancho por 44 de alto: un
   rectangulo en el que el simbolo se veia corrido y la "f" de
   Facebook parecia salirse de la caja. */
/* 44x44: cuadrado (para que el simbolo quede centrado) y ademas
   al tamano minimo de zona tocable que exige el proyecto. */
.f-redes-top a{ width:44px; height:44px; min-width:44px; min-height:44px;
  border-radius:12px; display:inline-flex; align-items:center;
  justify-content:center; padding:0; transition:transform .16s, filter .16s;
  flex-shrink:0; box-shadow:0 1px 2px rgba(0,0,0,.16); }
.f-redes-top a:hover{ transform:translateY(-2px); filter:brightness(1.1); }
/* El simbolo va en blanco sobre el color de la marca, y con el
   cuadro completo de 24 para que quede centrado de verdad. */
.f-redes-top svg{ width:19px; height:19px; fill:#fff; display:block; }
@media (max-width:1000px){ .f-redes-top{ display:none; } }
/* En la segunda fila hay lugar de sobra, asi que los iconos se
   ven completos en pantallas grandes. */

/* ============================================================
   10. FICHA DEL MAESTRO (nueva) - panel lateral
   ============================================================ */
#fVelo{ position:fixed; inset:0; z-index:200; background:rgba(20,16,30,.5);
  backdrop-filter:blur(3px); opacity:0; pointer-events:none; transition:.3s; }
#fVelo.ver{ opacity:1; pointer-events:auto; }
#fFicha{ position:fixed; top:0; right:0; bottom:0; z-index:201;
  width:min(480px, 100vw); background:var(--f-papel); color:var(--f-tinta);
  overflow-y:auto; transform:translateX(100%);
  transition:transform .36s cubic-bezier(.2,.9,.3,1);
  box-shadow:-14px 0 46px rgba(0,0,0,.22); }
#fFicha.ver{ transform:translateX(0); }
.f-ficha-top{ position:sticky; top:0; z-index:2; background:var(--f-ac);
  color:#fff; padding:26px 26px 22px; }
.f-ficha-x{ position:absolute; top:14px; right:14px; width:34px; height:34px;
  border-radius:50%; background:rgba(255,255,255,.2); border:none; color:#fff;
  font-size:19px; line-height:1; cursor:pointer; display:grid; place-items:center; }
.f-ficha-x:hover{ background:rgba(255,255,255,.34); color:#fff; }
.f-ficha-foto{ width:96px; height:96px; border-radius:50%; overflow:hidden;
  border:4px solid rgba(255,255,255,.4); margin-bottom:16px;
  background:rgba(255,255,255,.2); display:grid; place-items:center; font-size:34px; }
.f-ficha-foto img{ width:100%; height:100%; object-fit:cover; }
.f-ficha-top h3{ margin:0 0 5px; font:800 25px/1.15 var(--f-tip); color:#fff; }
.f-ficha-esp{ margin:0; font-size:13.5px; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:rgba(255,255,255,.85); }
.f-ficha-cuerpo{ padding:26px; }
.f-ficha-bloque{ margin-bottom:26px; }
.f-ficha-bloque h4{ margin:0 0 10px; font:800 11.5px var(--f-tip);
  letter-spacing:.12em; text-transform:uppercase; color:var(--f-ac); }
.f-ficha-bloque p{ margin:0; font-size:15px; line-height:1.65; color:var(--f-tinta2); }
.f-ficha-dato{ display:flex; gap:12px; align-items:flex-start;
  background:var(--f-acl); border-radius:var(--f-radio); padding:14px 16px; margin-bottom:10px; }
.f-ficha-dato span:first-child{ font-size:19px; flex-shrink:0; }
.f-ficha-dato b{ display:block; font-size:14.5px; color:var(--f-tinta); }
.f-ficha-dato small{ display:block; font-size:13px; color:var(--f-tinta2); margin-top:2px; }
.f-ficha-btns{ display:grid; gap:10px; }
.f-ficha-btn{ display:flex; align-items:center; justify-content:center; gap:8px;
  border-radius:10px; padding:14px 18px; font:700 14.5px var(--f-tip);
  text-decoration:none; cursor:pointer; border:2px solid var(--f-ac); transition:.18s; }
.f-ficha-btn.pri{ background:var(--f-ac); color:#fff; }
.f-ficha-btn.pri:hover{ background:var(--f-ac2); color:#fff; }
.f-ficha-btn.sec{ background:var(--f-papel); color:var(--f-ac); }
.f-ficha-btn.sec:hover{ background:var(--f-acl); color:var(--f-ac); }

/* --- Kit de difusion, dentro de la ficha --- */
.f-kit{ background:var(--f-acl); border:2px dashed var(--f-ac);
  border-radius:var(--f-radio); padding:18px; }
.f-kit textarea{ width:100%; min-height:96px; border:1px solid var(--f-linea);
  border-radius:9px; padding:11px 13px; font:400 13.5px/1.5 var(--f-tip);
  color:var(--f-tinta); background:var(--f-papel); resize:vertical; margin-bottom:10px; }
.f-kit-fila{ display:flex; gap:8px; flex-wrap:wrap; }
.f-kit-fila button{ flex:1 1 120px; border:1px solid var(--f-ac); background:var(--f-papel);
  color:var(--f-ac); border-radius:8px; padding:10px 12px;
  font:700 13px var(--f-tip); cursor:pointer; transition:.16s; }
.f-kit-fila button:hover{ background:var(--f-ac); color:#fff; }
.f-kit-ok{ display:block; font-size:12.5px; color:var(--f-ac);
  margin-top:9px; font-weight:700; min-height:16px; }

/* ============================================================
   11. AGENDA EN TU ZONA HORARIA (nueva)
   ============================================================ */
.f-huso{ display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  background:var(--f-acl); border:2px solid var(--f-ac);
  border-radius:var(--f-radio); padding:14px 18px; margin-bottom:22px; }
.f-huso-txt{ margin-right:auto; font-size:14.5px; color:var(--f-tinta2); }
.f-huso-txt b{ color:var(--f-tinta); }
.f-huso button{ background:var(--f-ac); color:#fff; border:none; border-radius:99px;
  padding:9px 18px; font:700 13px var(--f-tip); cursor:pointer; transition:.16s; }
.f-huso button:hover{ background:var(--f-ac2); color:#fff; }
.f-huso button.off{ background:var(--f-papel); color:var(--f-ac); border:2px solid var(--f-ac); }
.f-hora-local{ display:block; font-size:12.5px; font-weight:700;
  color:var(--f-ac); margin-top:3px; }

/* ============================================================
   12. AGREGAR A MI CALENDARIO (nueva)
   ============================================================ */
.f-cal{ display:inline-flex; align-items:center; gap:6px; background:transparent;
  border:1.5px solid var(--f-linea); color:var(--f-tinta2); border-radius:99px;
  padding:6px 13px; font:700 12px var(--f-tip); cursor:pointer;
  transition:.16s; white-space:nowrap; }
.f-cal:hover{ border-color:var(--f-ac); color:var(--f-ac); background:var(--f-acl); }
.f-cal-todo{ margin-top:18px; }

/* ============================================================
   13. MI AGENDA PERSONAL (nueva) - carril abajo-derecha
   ============================================================ */
.f-fav{ background:transparent; border:1.5px solid var(--f-linea); color:var(--f-tinta3);
  border-radius:99px; width:34px; height:34px; font-size:15px; cursor:pointer;
  display:grid; place-items:center; transition:.16s; flex-shrink:0; }
.f-fav:hover{ border-color:var(--f-alt); color:var(--f-alt); }
.f-fav.on{ background:var(--f-alt); border-color:var(--f-alt); color:#fff; }
#fMiAgenda{ position:fixed; right:20px; bottom:var(--f-abajo-der); z-index:114;
  background:var(--f-ac); color:#fff; border:none; border-radius:99px;
  padding:13px 20px; font:800 14px var(--f-tip); cursor:pointer;
  box-shadow:0 10px 28px rgba(0,0,0,.24); display:none; align-items:center; gap:9px; }
#fMiAgenda.ver{ display:inline-flex; }
#fMiAgenda span{ background:rgba(255,255,255,.26); border-radius:99px;
  padding:2px 9px; font-size:13px; }

/* ============================================================
   14. BUSCADOR DE MAESTROS (nueva)
   ============================================================ */
.f-busca{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-bottom:24px; }
.f-busca input{ flex:1 1 260px; min-height:48px; border:2px solid var(--f-linea);
  border-radius:var(--f-radio); padding:0 18px; font:400 15px var(--f-tip);
  color:var(--f-tinta); background:var(--f-papel); }
.f-busca input:focus{ outline:none; border-color:var(--f-ac); }
.f-chips{ display:flex; gap:7px; flex-wrap:wrap; }
.f-chip{ background:var(--f-papel); border:1.5px solid var(--f-linea);
  color:var(--f-tinta2); border-radius:99px; padding:8px 15px;
  font:600 13px var(--f-tip); cursor:pointer; transition:.16s; }
.f-chip:hover{ border-color:var(--f-ac); color:var(--f-ac); }
.f-chip.on{ background:var(--f-ac); border-color:var(--f-ac); color:#fff; }
.f-sinres{ text-align:center; padding:40px 20px; color:var(--f-tinta3);
  font-size:15px; display:none; }
.f-sinres.ver{ display:block; }

/* ============================================================
   15. ESCALERA DE PRECIOS (nueva)
   ============================================================ */
.f-escalera{ background:var(--f-papel); border:2px solid var(--f-ac);
  border-radius:var(--f-radio); padding:24px; margin-bottom:28px; }
.f-escalera h4{ margin:0 0 16px; font:800 12px var(--f-tip); letter-spacing:.12em;
  text-transform:uppercase; color:var(--f-ac); }
.f-esc-tramos{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:16px; }
.f-esc-t{ border:2px solid var(--f-linea); border-radius:var(--f-radio);
  padding:14px 12px; text-align:center; position:relative; }
.f-esc-t b{ display:block; font-size:21px; font-weight:800; color:var(--f-tinta3); }
.f-esc-t span{ display:block; font-size:12px; color:var(--f-tinta3); margin-top:3px; }
.f-esc-t.activo{ border-color:var(--f-ac); background:var(--f-acl); }
.f-esc-t.activo b{ color:var(--f-ac); font-size:25px; }
.f-esc-t.activo span{ color:var(--f-ac); font-weight:700; }
.f-esc-t.pasado{ opacity:.45; }
.f-esc-t.pasado b{ text-decoration:line-through; }
.f-esc-ahora{ position:absolute; top:-11px; left:50%; transform:translateX(-50%);
  background:var(--f-ac); color:#fff; font:800 9.5px var(--f-tip);
  letter-spacing:.06em; text-transform:uppercase; padding:3px 10px;
  border-radius:99px; white-space:nowrap; }
.f-esc-pie{ font-size:14px; color:var(--f-tinta2); text-align:center; }
.f-esc-pie b{ color:var(--f-ac); }
@media (max-width:620px){ .f-esc-tramos{ grid-template-columns:1fr; } }

/* ============================================================
   16. MUESTRA GRATIS (nueva) - ventana al centro
   ============================================================ */
.f-modal{ position:fixed; inset:0; z-index:210; display:grid; place-items:center;
  padding:20px; background:rgba(20,16,30,.62); backdrop-filter:blur(4px);
  opacity:0; pointer-events:none; transition:.3s; }
.f-modal.ver{ opacity:1; pointer-events:auto; }
.f-modal-caja{ width:min(520px, 100%); max-height:88vh; overflow-y:auto;
  background:var(--f-papel); color:var(--f-tinta); border-radius:var(--f-radio);
  box-shadow:0 26px 70px rgba(0,0,0,.3); transform:translateY(20px);
  transition:.32s cubic-bezier(.2,.9,.3,1); position:relative; }
.f-modal.ver .f-modal-caja{ transform:translateY(0); }
.f-modal-banda{ height:7px; background:var(--f-ac); border-radius:var(--f-radio) var(--f-radio) 0 0; }
.f-modal-in{ padding:32px 30px 28px; }
.f-modal-in h3{ margin:0 0 10px; font:800 23px/1.2 var(--f-tip); color:var(--f-tinta); }
.f-modal-in p{ margin:0 0 20px; font-size:15px; line-height:1.6; color:var(--f-tinta2); }
.f-modal-x{ position:absolute; top:16px; right:16px; width:32px; height:32px;
  border-radius:50%; background:var(--f-acl); border:none; color:var(--f-tinta2);
  font-size:17px; line-height:1; cursor:pointer; display:grid; place-items:center; z-index:2; }
.f-modal-video{ aspect-ratio:16/9; background:var(--f-acl); border-radius:var(--f-radio);
  display:grid; place-items:center; margin-bottom:20px; border:2px solid var(--f-linea); }
.f-modal-play{ width:64px; height:64px; border-radius:50%; background:var(--f-ac);
  color:#fff; border:none; font-size:24px; cursor:pointer; display:grid; place-items:center; }
.f-form{ display:flex; gap:9px; flex-wrap:wrap; }
.f-form input{ flex:1 1 200px; min-height:50px; border:2px solid var(--f-linea);
  border-radius:10px; padding:0 16px; font:400 15px var(--f-tip);
  color:var(--f-tinta); background:var(--f-papel); }
.f-form input:focus{ outline:none; border-color:var(--f-ac); }
.f-form button{ background:var(--f-ac); color:#fff; border:none; border-radius:10px;
  padding:0 26px; min-height:50px; font:800 14.5px var(--f-tip); cursor:pointer; }
.f-form button:hover{ background:var(--f-ac2); color:#fff; }
.f-legal{ display:block; font-size:12.5px; color:var(--f-tinta3); margin-top:12px; }

/* ============================================================
   17. PROGRAMA DE REFERIDOS (nueva)
   ============================================================ */
.f-refe{ background:var(--f-acl); border:2px solid var(--f-ac);
  border-radius:var(--f-radio); padding:26px; text-align:center;
  width:min(100%, 760px); margin:32px auto 0; }
.f-refe h4{ margin:0 0 8px; font:800 20px var(--f-tip); color:var(--f-tinta); }
.f-refe p{ margin:0 0 18px; font-size:14.5px; line-height:1.6; color:var(--f-tinta2); }
.f-refe-premios{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:20px; }
.f-refe-p{ background:var(--f-papel); border:2px solid var(--f-linea);
  border-radius:var(--f-radio); padding:14px 10px; }
.f-refe-p b{ display:block; font-size:23px; font-weight:800; color:var(--f-ac); }
.f-refe-p span{ display:block; font-size:12.5px; color:var(--f-tinta2); margin-top:3px; }
.f-refe-link{ display:flex; gap:8px; }
.f-refe-link input{ flex:1; min-height:48px; border:2px solid var(--f-linea);
  border-radius:10px; padding:0 15px; font:400 13.5px var(--f-tip);
  color:var(--f-tinta2); background:var(--f-papel); }
.f-refe-link button{ background:var(--f-ac); color:#fff; border:none; border-radius:10px;
  padding:0 22px; min-height:48px; font:800 13.5px var(--f-tip); cursor:pointer; white-space:nowrap; }
@media (max-width:560px){ .f-refe-premios{ grid-template-columns:1fr; } }

/* ============================================================
   18. PANEL DE INTERRUPTORES (clonada, solo para el dueno)
   ============================================================ */
#fSwitch{ position:fixed; right:20px; bottom:var(--f-abajo-der); z-index:220;
  width:min(300px, calc(100vw - 40px)); max-height:70vh; overflow-y:auto;
  background:var(--f-papel); border:2px solid var(--f-ac);
  border-radius:var(--f-radio); box-shadow:0 20px 52px rgba(0,0,0,.24);
  font:400 13px var(--f-tip); }
#fSwitch h5{ position:sticky; top:0; margin:0; padding:14px 16px;
  background:var(--f-ac); color:#fff; font:800 13.5px var(--f-tip);
  display:flex; align-items:center; justify-content:space-between; }
#fSwitch h5 button{ background:rgba(255,255,255,.2); border:none; color:#fff;
  width:24px; height:24px; border-radius:50%; cursor:pointer; font-size:15px; line-height:1; }
#fSwitch ul{ list-style:none; margin:0; padding:10px 14px 16px; }
#fSwitch li{ display:flex; align-items:center; gap:10px; padding:7px 0;
  border-bottom:1px solid var(--f-linea); }
#fSwitch li:last-child{ border-bottom:none; }
#fSwitch label{ flex:1; color:var(--f-tinta2); cursor:pointer; font-size:12.5px; }
#fSwitch .f-sw-nota{ padding:10px 16px; background:var(--f-acl);
  color:var(--f-tinta2); font-size:12px; line-height:1.5; }

/* ============================================================
   19. VENTANA DE RESCATE AL SALIR (clonada) - usa .f-modal
   ============================================================ */

/* ============================================================
   AJUSTES DE CELULAR COMUNES
   ============================================================ */
@media (max-width:640px){
  .f-inf{ gap:12px; padding:12px 16px; }
  .f-inf-btn{ width:100%; padding:14px 20px; }
  #fReloj{ order:3; }
  #fFicha{ width:100vw; }
  #fHerr button{ width:40px; height:40px; }
  #fMiAgenda{ padding:11px 16px; font-size:13px; }
  #fGlobo{ display:none; }
}

/* El panel de interruptores no puede salirse de la pantalla:
   si se sale, su boton de cerrar queda inalcanzable. */
#fSwitch{
  position: fixed !important;
  right: 12px !important;
  bottom: 12px !important;
  top: auto !important;
  max-width: min(320px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  z-index: 60;
}
#fSwitch h5{position:sticky;top:0;background:inherit;z-index:2}
@media (max-width:560px){
  #fSwitch{left:12px;right:12px !important;max-width:none}
}


/* ============================================================
   EL PANEL DE INTERRUPTORES, ACOTADO A LA PANTALLA
   Media 300 px fijos y se anclaba a la derecha. En un telefono de
   375 px se salia por el costado y hacia que TODA la pagina se
   pudiera mover para los lados. Ahora nunca pasa del ancho de la
   ventana.
   ============================================================ */
/* El panel de interruptores es una caja anclada abajo a la derecha:
   media 300 px fijos y en un telefono se salia por el costado. */
#fSwitch{
  max-width:calc(100vw - 24px);
  right:12px;
  box-sizing:border-box;
}
@media (max-width:420px){
  #fSwitch{ left:12px; right:12px; width:auto; }
}

/* ------------------------------------------------------------------
   LA FICHA DEL MAESTRO NO PUEDE MOVER LA PAGINA PARA EL COSTADO
   Es un cajon que entra deslizandose desde la derecha: vive en
   right:0 y se esconde con transform:translateX(100%). Ese
   desplazamiento la deja FUERA de la pantalla, y una pieza fuera de
   la pantalla hace que toda la pagina se pueda arrastrar para el
   costado en el telefono.

   Recortar en la raiz NO alcanza: un elemento position:fixed se
   ubica respecto de la ventana y NO lo recorta el overflow de sus
   padres. La forma que si funciona es sacarlo del calculo mientras
   esta cerrado, con visibility:hidden. La transicion incluye
   visibility con retardo para que la animacion de salida se siga
   viendo completa antes de esconderlo.
   ------------------------------------------------------------------ */
html{ overflow-x:clip; }

/* Ni el recorte en la raiz ni visibility:hidden alcanzaron: el
   navegador siguio contando esos 375 px de mas. La unica forma
   segura es que la ficha NUNCA se mueva fuera de la ventana. En vez
   de empujarla con transform, se la deja quieta en su lugar y se la
   TAPA con clip-path. El recorte se anima igual de bien, la caja
   nunca sale de la pantalla y el ancho de la pagina no cambia. */
#fFicha{
  /* 100vw INCLUYE la barra de desplazamiento; el ancho util es
     menor. Con 100vw la ficha quedaba unos 15 px mas ancha que la
     pantalla y arrancaba en left:-15, lo que estiraba la caja de
     desplazamiento aunque nada se viera cortado. Con max-width:100%
     se mide contra el ancho util de verdad. */
  max-width:100%;
  transform:none;
  clip-path:inset(0 0 0 100%);
  visibility:hidden;
  transition:clip-path .36s cubic-bezier(.2,.9,.3,1), visibility 0s linear .36s;
}
#fFicha.ver{
  transform:none;
  clip-path:inset(0 0 0 0);
  visibility:visible;
  transition:clip-path .36s cubic-bezier(.2,.9,.3,1);
}
@media (prefers-reduced-motion:reduce){
  #fFicha,#fFicha.ver{ transition:none; }
}


/* ============================================================
   AIRE ALREDEDOR DE LAS PIEZAS INYECTADAS
   ------------------------------------------------------------
   POR QUE ESTO ESTABA MAL DESDE EL PRINCIPIO
   Las plantillas cuidan el espaciado de SUS bloques, pero las
   piezas que agregan las features (el sello de garantia, la barra
   de huso horario, la escalera de precios, el buscador, los
   referidos) se insertan en el medio del contenido con margen
   CERO. Resultado: aparecen pegadas contra el titulo de arriba y
   contra el bloque de abajo, sin un pixel de separacion.

   Es el defecto que mas veces se reporto ("todo pegado, sin
   padding") y siempre se arreglaba a mano en una plantilla,
   asi que volvia a aparecer en la siguiente. Esta regla lo
   resuelve de raiz: vale para las tres versiones de psico.ar,
   para los seis sitios de masajistas y para cualquier plantilla
   que se haga de ahora en adelante.
   ============================================================ */
.f-chips,
.f-escalera,
.f-garantia,
.f-huso,
.f-refe,
.f-sinres,
.f-cal-todo,
.f-busca{
  margin-block: 28px;
}

/* Si la pieza abre una seccion, no necesita margen arriba. */
.c > .f-chips:first-child,
.c > .f-escalera:first-child,
.c > .f-garantia:first-child,
.c > .f-huso:first-child,
.c > .f-refe:first-child{
  margin-block-start: 0;
}

/* Las que no traen relleno propio, ahora lo tienen. */
.f-huso{ padding: 14px 18px; }
.f-garantia{ padding: 20px 22px; }

/* En el telefono el aire se achica, pero nunca desaparece. */
@media (max-width: 640px){
  /* 24 px es el minimo del proyecto, tambien en el telefono. */
  .f-chips,.f-escalera,.f-garantia,.f-huso,
  .f-refe,.f-sinres,.f-cal-todo,.f-busca{ margin-block: 28px; }
}


/* ============================================================
   POPUP CONFIGURABLE  ·  estilos de sus dos modos
   Usa el modal de siempre (.f-modal) y le suma la imagen, el
   boton y el formulario. Se manda a 460 px para que NO ocupe la
   pantalla entera: el pedido fue un popup de verdad, no una
   cortina.
   ============================================================ */
.f-modal.f-pop .f-modal-caja{ width:min(460px, calc(100vw - 32px)); }
.f-pop .f-modal-banda{ height:9px;
  background:linear-gradient(90deg, var(--f-ac), var(--f-ac2, var(--f-ac))); }
.f-pop-img{ margin:0 0 18px; border-radius:12px; overflow:hidden;
  max-height:180px; background:var(--f-acl); }
.f-pop-img img{ width:100%; height:180px; object-fit:cover; display:block; }
.f-pop-btn{ display:inline-flex; align-items:center; justify-content:center;
  width:100%; min-height:48px; padding:0 22px; border-radius:12px;
  background:var(--f-ac); color:#fff; text-decoration:none;
  font-weight:700; font-size:15.5px; }
.f-pop-btn:hover{ filter:brightness(1.08); }
.f-pop-form{ display:grid; gap:10px; }
.f-pop-form input{ min-height:48px; padding:0 14px; font-size:16px;
  border:1px solid var(--f-linea, #ddd); border-radius:12px; }
.f-pop-form button{ min-height:48px; border:0; border-radius:12px;
  background:var(--f-ac); color:#fff; font-weight:700; font-size:15.5px;
  cursor:pointer; }
.f-pop-ok{ margin:0; padding:14px 16px; border-radius:12px;
  background:var(--f-acl); color:var(--f-tinta); font-size:15px; }

/* ============================================================
   TELEFONO · lo minimo que pide el skill movil-total
   ------------------------------------------------------------
   Se agrega aca, en la hoja COMPARTIDA de las features, y no en
   la plantilla de turno: si se arregla en una sola plantilla, el
   problema reaparece en la siguiente. Son dos cosas:

   1. CAMPOS A 16 px. Safari en iPhone hace zoom automatico al
      enfocar un campo de menos de 16 px, y la pagina queda
      corrida. Las capturas de correo de las features estaban en
      13,5 px.
   2. ZONAS TOCABLES DE 44 px. Los botones de cerrar de los
      avisos, el de agendar y la estrella estaban entre 22 y 35 px
      de alto: con el pulgar no se aciertan.
   ============================================================ */
@media (max-width: 820px){
  /* Selector PELADO a proposito: varios <input> de las features
     no llevan atributo type, y input[type="text"] no matchea un
     atributo ausente. Con «input» se cubren todos. Se excluyen
     los de casilla y radio, que no tienen texto. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select, textarea{
    font-size: 16px !important;
  }

  .f-inf-x, .f-aviso-x, .f-bien-x, .f-pop-x, .f-x{
    min-width: 44px; min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .f-cal, .f-fav{
    min-height: 44px; padding-inline: 16px;
  }
  .f-fav{ min-width: 44px; }
  .bt-tira, .f-tira a, .f-tira .bt{
    min-height: 40px; padding-block: 9px;
    display: inline-flex; align-items: center;
  }
}

/* ============================================================
   BIO-SITES · ganchos creados por el motor (18/09/2026)
   Cuando la página no trae la barra de arriba, los iconos de
   redes o el bloque de precios, el motor los crea. Estos estilos
   los dejan presentables.
   ============================================================ */
.f-tira-auto{ background:#18221e; color:#fff; text-align:center;
  padding:9px 16px; font:600 13.5px/1.4 system-ui,-apple-system,Segoe UI,sans-serif; }
.f-tira-auto span{ display:inline-block; }
.f-acc-auto a{ width:32px; height:32px; min-width:32px; min-height:32px; border-radius:9px; }
.f-garantia-auto{ max-width:760px; margin:28px auto 36px; }

/* ============================================================
   ICONOS SOCIALES CREADOS POR EL MOTOR EN UN BIO-SITE (18/09/2026)
   ------------------------------------------------------------
   En las landings los iconos del encabezado se esconden por debajo
   de 1000 px porque ahi el menu pasa a ser un desplegable y los
   incluye. Un bio-site NO tiene ese desplegable: si se escondian,
   la feature no hacia nada en un telefono, que es de donde llega
   casi toda la visita. La tira que crea el motor (.f-acc-auto) se
   ve SIEMPRE, y se pasa a la linea de abajo si no entra.
   Se mantienen los 44 px de zona tocable que exige el proyecto.
   ============================================================ */
.top-acc.f-acc-auto{ display:inline-flex; align-items:center; flex-wrap:wrap; gap:8px; }
@media (max-width:1000px){
  .top-acc.f-acc-auto .f-redes-top{ display:flex; flex-wrap:wrap; gap:8px; }
}
/* La plantilla del bio-site le gana en especificidad a
   «.f-redes-top a» y dejaba los iconos en 32x32. Con la clase de la
   tira automatica delante vuelven a su cuadrado de 44. */
.top-acc.f-acc-auto .f-redes-top a{ width:44px; height:44px;
  min-width:44px; min-height:44px; border-radius:12px; padding:0; }
.top-acc.f-acc-auto .f-redes-top svg{ width:19px; height:19px; }

/* ============================================================
   BOTON DENTRO DE LA BARRA DE NOTIFICACION (18/09/2026)
   ------------------------------------------------------------
   Aparece solo si se escribe un texto de boton en el panel. La
   barra sigue siendo una sola linea: el boton va al final y, si no
   entra (telefono), pasa abajo. 44 px de alto, como toda zona
   tocable del proyecto, y 12 px de aire respecto del mensaje.
   ============================================================ */
/* OJO: NO se puede estilar «.tira» a secas. En 8 de los 44 moldes de
   bio-site esa clase es una seccion de contenido de tres tarjetas, y
   este bloque la convertia en una fila centrada. Solo la barra que
   crea el motor. */
.f-tira-auto{ display:flex; flex-wrap:wrap; align-items:center;
  justify-content:center; gap:12px; }
.f-tira-btn{ display:inline-flex; align-items:center; justify-content:center;
  min-height:34px; padding:6px 16px; border-radius:999px;
  background:#fff; color:#111; font:700 13px/1 system-ui,sans-serif;
  text-decoration:none; white-space:nowrap; flex-shrink:0;
  box-shadow:0 1px 3px rgba(0,0,0,.2); transition:transform .16s, box-shadow .16s; }
.f-tira-btn:hover{ transform:translateY(-1px); box-shadow:0 3px 9px rgba(0,0,0,.26); }
@media (max-width:520px){
  .f-tira-btn{ min-height:38px; width:auto; }
}