/* ─────────────────────────────────────────────────────────────────────
RESERVA CONFIRMADA + SIGUIENTES PASOS
· Todo cuelga de .cita → no toca tu tema. Sin regla body/html/*.
· Los datos salen de los parámetros que Calendly añade a la URL.
───────────────────────────────────────────────────────────────────── */
.cita{
--superficie: #15171F;
--superficie2:#1B1E29;
--borde: #272B39;
--borde-2: #333849;
--txt: #F3F4F8;
--txt-2: #A7ADBE;
--txt-3: #868DA1;
--marca: #7C5CFF;
--marca-cta: #7452F7; /* pasa contraste AA con texto blanco */
--marca-2: #B39BFF;
--hecho: #2ED8A7;
--ahora: #FFD84D;
font-family: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
-webkit-font-smoothing: antialiased;
max-width: 1060px; margin: 0 auto;
color: var(--txt); text-align: left;
}
.cita *, .cita *::before, .cita *::after{ box-sizing: border-box; }
.cita__card{
position: relative; overflow: hidden;
border: 1px solid var(--borde); border-radius: 22px; padding: 26px;
background:
radial-gradient(110% 130% at 100% 0%, rgba(124,92,255,.14) 0%, rgba(124,92,255,0) 58%),
linear-gradient(180deg, var(--superficie) 0%, #111420 100%);
box-shadow: 0 24px 60px -28px rgba(0,0,0,.9);
}
.cita__card::before{
content:""; position:absolute; inset:0 0 auto 0; height:1px;
background: linear-gradient(90deg, transparent, var(--marca) 20%, var(--hecho) 55%, var(--ahora) 80%, transparent);
opacity:.85;
}
.cita__grid{
display:grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
gap: 26px; align-items: stretch;
}
.cita__next{ display:flex; flex-direction:column; justify-content:center; }
/* ── izquierda: la reserva ── */
.cita__panel{
border:1px solid var(--borde); border-radius:16px; padding:22px;
background: linear-gradient(180deg, var(--superficie2), #171a24);
display:flex; flex-direction:column; gap:18px;
}
.cita__ok{
display:flex; align-items:center; gap:10px;
padding:11px 14px; border-radius:11px;
background: rgba(46,216,167,.10);
border:1px solid rgba(46,216,167,.38);
color: var(--hecho);
font-size:13px; font-weight:700; line-height:1.35;
}
.cita__ok svg{ width:17px; height:17px; flex:0 0 auto; }
.cita__fila{ display:grid; gap:4px; }
.cita__fila + .cita__fila{ padding-top:16px; border-top:1px solid var(--borde); }
.cita__k{
display:flex; align-items:center; gap:7px;
font-size:10.5px; font-weight:800; letter-spacing:.15em; text-transform:uppercase;
color: var(--txt-3);
}
.cita__k svg{ width:13px; height:13px; }
.cita__v{ font-size:16px; font-weight:800; letter-spacing:-.015em; line-height:1.3; color: var(--txt); }
.cita__v small{ display:block; margin-top:3px; font-size:13px; font-weight:500; color: var(--txt-2); }
.cita__acciones{ display:flex; flex-wrap:wrap; gap:9px; }
.cita__btn{
display:inline-flex; align-items:center; gap:8px;
padding:11px 16px; border-radius:11px;
font:700 13px/1 "Manrope", ui-sans-serif, system-ui, sans-serif;
text-decoration:none; cursor:pointer; border:1px solid transparent;
transition: background .18s ease, border-color .18s ease;
}
.cita__btn svg{ width:14px; height:14px; }
.cita__btn--1{ background: var(--marca-cta); color:#fff; }
.cita__btn--1:hover{ background:#7A57F9; }
.cita__btn--2{ background: rgba(255,255,255,.04); border-color: var(--borde-2); color: var(--txt); }
.cita__btn--2:hover{ background: rgba(255,255,255,.08); }
.cita__btn:focus-visible{ outline:2px solid var(--marca-2); outline-offset:3px; }
/* ── derecha: siguientes pasos ── */
.cita__eyebrow{
margin:0 0 6px; font-size:11px; font-weight:700;
letter-spacing:.18em; text-transform:uppercase; color: var(--txt-3);
}
.cita__h{
margin:0 0 18px; font-size: clamp(20px, 2.6vw, 26px);
font-weight:800; letter-spacing:-.02em; line-height:1.15; color: var(--txt);
}
.cita__list{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.cita__item{
display:grid; grid-template-columns:44px minmax(0,1fr); gap:14px;
padding:16px 18px; border:1px solid var(--borde); border-radius:14px;
background: linear-gradient(180deg, var(--superficie2), #171a24);
}
.cita__item.is-ahora{
border-color: rgba(255,216,77,.42);
background:
linear-gradient(180deg, rgba(255,216,77,.07), rgba(255,216,77,0) 60%),
linear-gradient(180deg, var(--superficie2), #171a24);
}
.cita__item.is-ahora .cita__icon{
background: rgba(255,216,77,.14); border-color: rgba(255,216,77,.5); color: var(--ahora);
}
.cita__item.is-ahora .cita__num{ color: var(--ahora); }
/* SVG y no emojis: los emojis se dibujan distinto en cada sistema operativo */
.cita__icon{
width:44px; height:44px; border-radius:13px; display:grid; place-items:center;
background: rgba(255,255,255,.04); border:1px solid var(--borde-2); color: var(--marca-2);
}
.cita__icon svg{ width:20px; height:20px; display:block; }
.cita__num{
display:block; margin-bottom:3px; font-size:10.5px; font-weight:800;
letter-spacing:.16em; color: var(--marca-2); font-variant-numeric: tabular-nums;
}
.cita__t{ margin:0 0 5px; font-size:15px; font-weight:800; letter-spacing:-.012em; line-height:1.25; color: var(--txt); }
.cita__p{ margin:0; font-size:13.5px; line-height:1.5; color: var(--txt-2); }
@media (max-width: 900px){ .cita__grid{ grid-template-columns: minmax(0,1fr); gap:22px; } }
@media (max-width: 560px){
.cita__card{ padding:18px; border-radius:16px; }
.cita__panel{ padding:18px; }
.cita__item{ grid-template-columns:38px minmax(0,1fr); gap:12px; padding:14px 15px; }
.cita__icon{ width:38px; height:38px; border-radius:11px; }
.cita__icon svg{ width:17px; height:17px; }
.cita__btn{ flex:1 1 100%; justify-content:center; }
}
@media (prefers-reduced-motion: reduce){ .cita *{ animation:none !important; transition:none !important; } }
/* fin del CSS del componente */
Reserva confirmada. Te hemos enviado los detalles por email.
Tu sesión es con
Cuándo
Consulta el email de confirmaciónAhí tienes la fecha y la hora exactas
Dónde
Google MeetRecibirás el enlace por email
Ya está reservada
Tres cosas antes de la sesión
-
PASO 01 · AHORA
Abre el email de confirmación
Lleva el enlace para conectarte. Si no aparece en 5 minutos, mira en Spam y en Promociones, y marca el remitente como fiable.
-
PASO 02 · EN 24 H
Guarda el número de tu director
Te escribirá por WhatsApp con lo que necesitas preparar. Si su número no está en tu agenda, el mensaje se te va a colar entre desconocidos.
-
PASO 03 · EL DÍA
Bloquea 45 minutos de verdad
Ordenador, no móvil. Sitio sin ruido y con cobertura estable. Si te conectas andando por la calle, la sesión no sirve para nada.
/* Lee los parámetros que Calendly añade al redirigir y rellena la tarjeta.
Si no hay parámetros (alguien entra directo, recarga sin query, comparte
el link pelado), NO se rompe: deja el texto genérico y esconde lo que
no puede rellenar. */
(function () {
var MESES = ['enero','febrero','marzo','abril','mayo','junio','julio',
'agosto','septiembre','octubre','noviembre','diciembre'];
var DIAS = ['domingo','lunes','martes','miércoles','jueves','viernes','sábado'];
/* El ISO de Calendly viene en la zona horaria del invitado, p.ej.
2026-08-12T18:00:00+02:00. Leemos la hora TAL CUAL del texto: así no
hay riesgo de que el navegador la desplace a otra zona. */
function partes(iso){
if (!iso) return null;
iso = String(iso).trim().replace(/\s(?=\d{2}:\d{2}$)/, '+'); // el "+" que se perdió al decodificar
var m = iso.match(/^(\d{4})-(\d{2})-(\d{2})[T ](\d{2}):(\d{2})/);
if (!m) return null;
var d = new Date(Date.UTC(+m[1], +m[2] - 1, +m[3]));
if (isNaN(d)) return null;
return { y:+m[1], mes:+m[2], dia:+m[3], h:m[4], min:m[5], dow:d.getUTCDay(), iso:iso };
}
function aUTC(iso){ // para los enlaces de calendario
var d = new Date(iso);
return isNaN(d) ? null : d.toISOString().replace(/[-:]/g,'').replace(/\.\d{3}/,'');
}
function esc(s){ return String(s).replace(/[&"]/g, function(c){
return {'':'>','&':'&','"':'"'}[c]; }); }
document.querySelectorAll('.cita').forEach(function (cita) {
var q = new URLSearchParams(window.location.search);
var con = (q.get('assigned_to') || '').trim();
var nombre = (q.get('event_type_name') || '').trim();
var ini = partes(q.get('event_start_time'));
var fin = partes(q.get('event_end_time'));
/* con quién */
if (con) {
cita.querySelector('[data-con]').textContent = con;
cita.querySelector('[data-fila-con]').hidden = false;
}
/* cuándo */
if (ini) {
var fecha = DIAS[ini.dow] + ', ' + ini.dia + ' de ' + MESES[ini.mes - 1] + ' de ' + ini.y;
fecha = fecha.charAt(0).toUpperCase() + fecha.slice(1);
var hora = ini.h + ':' + ini.min + (fin ? ' – ' + fin.h + ':' + fin.min : '') + ' (hora peninsular)';
var v = cita.querySelector('[data-cuando]');
v.innerHTML = esc(fecha) + '
' + esc(hora) + '';
/* enlaces de calendario reales, construidos con esa misma fecha */
var s = aUTC(ini.iso), e = fin ? aUTC(fin.iso) : null;
if (s && e) {
var titulo = nombre || 'Sesión de admisiones';
var lugar = cita.dataset.lugar || '';
var detalle= 'Sesión reservada. El enlace para conectarte está en tu email de confirmación.';
var g = cita.querySelector('[data-gcal]');
g.href = 'https://calendar.google.com/calendar/render?action=TEMPLATE'
+ '&text=' + encodeURIComponent(titulo)
+ '&dates=' + s + '/' + e
+ '&details=' + encodeURIComponent(detalle)
+ '&location=' + encodeURIComponent(lugar);
var ics = ['BEGIN:VCALENDAR','VERSION:2.0','PRODID:-//worldketing//ES','BEGIN:VEVENT',
'UID:' + s + '-worldketing', 'DTSTAMP:' + s, 'DTSTART:' + s, 'DTEND:' + e,
'SUMMARY:' + titulo, 'LOCATION:' + lugar, 'DESCRIPTION:' + detalle,
'END:VEVENT','END:VCALENDAR'].join('\r\n');
cita.querySelector('[data-ics]').href =
'data:text/calendar;charset=utf-8,' + encodeURIComponent(ics);
cita.querySelector('[data-acciones]').hidden = false;
}
}
/* dónde */
var lugarOut = cita.querySelector('[data-lugar-out]');
if (lugarOut && cita.dataset.lugar) {
lugarOut.innerHTML = esc(cita.dataset.lugar) +
(cita.dataset.lugarNota ? '
' + esc(cita.dataset.lugarNota) + '' : '');
}
});
})();