/* ═══════════════════════════════════════════════════════════════════
   Página de agendar llamada · Fenómenus
   ═══════════════════════════════════════════════════════════════════

   Eloy, 24/08/2026: "en la página del calendly fusila [la de Gastromaps]
   pero en negro y estilo Fenómenus y con la info de Fenómenus; luego ya
   repaso copys, pero la estructura está ahí".

   La estructura es la suya: a la izquierda quién debería entrar en la
   llamada y qué se va a ver; a la derecha el calendario, solo. La diferencia
   de fondo es el listón: Gastromaps filtra duro (ticket medio, 1.000 €/mes)
   porque vende un servicio caro; Fenómenus cuesta 49,90 € al mes, así que
   aquí los cuatro puntos no filtran, preparan la llamada. Los copys quedan
   a la espera del repaso de Eloy.

   Hereda estilos.css y ajustes.css para que las tipografías, los colores y
   los botones sean exactamente los de la landing. */

.paginaAgendar{background:var(--bg); color:var(--text)}
.agendaPagina{min-height:100svh; display:flex; flex-direction:column}

/* ── cabecera ── */
.agendaCabecera{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:22px 5vw; position:relative;
  border-bottom:1px solid var(--line);
}
/* el hilo de color bajo la cabecera, como en la página de Gastromaps que
   mandó Eloy —allí azul y rosa; aquí, los dos colores de Fenómenus */
.agendaCabecera:after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:linear-gradient(90deg,#5e45dd,#ff7556 62%,#5e45dd00);
}
.agendaCabecera .logo img{display:block; height:24px; width:auto}
.agendaVolver{
  color:var(--muted); font-size:12px; font-weight:800; text-decoration:none;
  border-bottom:1px solid transparent; transition:.2s;
}
.agendaVolver:hover{color:var(--text); border-bottom-color:#ffffff40}

/* ── cuerpo: dos columnas en escritorio, una en móvil ── */
.agendaCuerpo{
  flex:1; display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(28px,4vw,64px); align-items:start; align-content:start;
  max-width:1240px; width:100%; margin:0 auto; padding:clamp(34px,5vw,70px) 5vw;
}

/* ── columna de texto ── */
.agendaTexto .kicker{
  color:var(--orange); letter-spacing:.16em; font-size:9px; font-weight:900;
  margin:0 0 18px;
}
.agendaTexto h1{
  margin:0; font:clamp(32px,4.4vw,52px)/1.02 Georgia,serif;
  letter-spacing:-.045em; text-wrap:balance;
}
.agendaTexto h1 em{color:var(--orange); font-style:normal; display:block}
.agendaEntrada{
  margin:22px 0 0; max-width:520px;
  color:var(--muted); font-size:15px; line-height:1.55; text-wrap:pretty;
}

.agendaRequisitos{
  margin-top:30px; padding:24px 26px;
  background:var(--panel); border:1px solid var(--line); border-radius:18px;
}
.agendaRequisitos h2{
  margin:0 0 16px; font:800 12px/1 inherit;
  letter-spacing:.1em; text-transform:uppercase; color:#cdc8d4;
}
.agendaRequisitos ul{list-style:none; margin:0; padding:0; display:grid; gap:15px}
.agendaRequisitos li{display:flex; gap:12px; align-items:flex-start}
.agendaRequisitos li>span{
  flex:none; width:21px; height:21px; margin-top:1px; border-radius:50%;
  display:grid; place-items:center;
  background:#ff755622; color:var(--orange); font-size:11px; font-weight:900;
}
.agendaRequisitos p{margin:0; color:var(--muted); font-size:12.5px; line-height:1.5}
.agendaRequisitos strong{display:block; color:var(--text); font-size:14px; margin-bottom:3px}

.agendaGarantia{
  margin:22px 0 0; display:flex; flex-wrap:wrap; align-items:baseline; gap:9px;
  color:#cdc8d4; font-size:12.5px;
}
.agendaGarantia b{
  color:var(--orange); letter-spacing:.11em; font-size:8px; font-weight:900;
  text-transform:uppercase;
}

/* ── columna del calendario ── */
.agendaCalendario{
  background:var(--panel); border:1px solid var(--line); border-radius:20px;
  overflow:hidden; position:sticky; top:24px;
}
.agendaCalendarioTop{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:17px 20px; border-bottom:1px solid var(--line); background:#12121c;
}
.agendaCalendarioTop p{margin:0}
.agendaCalendarioTop strong{display:block; font-size:14px}
.agendaCalendarioTop span{display:block; color:var(--muted); font-size:10px; margin-top:3px}
.agendaMarca{
  color:#6f6a79 !important; letter-spacing:.14em; font-size:8px; font-weight:900;
}
.agendaHueco{position:relative; min-height:660px; background:#ffffff}
.agendaHueco iframe{display:block; width:100%; height:660px; border:0}
/* el widget oficial de Calendly mete su iframe dentro de este div */
.agendaHueco .calendly-inline-widget{display:block; width:100%; min-width:0; height:660px}
.agendaCargando{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  gap:11px; color:#5a5566; font-size:11px; font-weight:800; background:#ffffff;
}
.agendaCargando[hidden]{display:none}
.agendaCargando i{
  width:17px; height:17px; border-radius:50%;
  border:2px solid #0000001f; border-top-color:var(--orange);
  animation:agendaGira .8s linear infinite;
}
@keyframes agendaGira{to{transform:rotate(360deg)}}
.agendaAparte{
  display:block; padding:13px 20px 15px; text-align:center;
  color:var(--muted); font-size:11px; text-decoration:none;
  border-top:1px solid var(--line);
}
.agendaAparte:hover{color:var(--text)}

/* ── pie ── */
.agendaPie{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:14px; padding:22px 5vw;
  border-top:1px solid var(--line); color:#6f6a79; font-size:10px;
}
.agendaPie nav{display:flex; gap:18px; flex-wrap:wrap}
.agendaPie a{color:#a7a4ad; font-size:11px; text-decoration:none}
.agendaPie a:hover{color:var(--text)}

@media(max-width:900px){
  .agendaCuerpo{grid-template-columns:1fr; gap:30px}
  .agendaCalendario{position:static}
  .agendaHueco,.agendaHueco iframe,
  .agendaHueco .calendly-inline-widget{min-height:700px; height:700px}
}
@media(max-width:600px){
  .agendaCabecera{padding:16px 5vw}
  .agendaCabecera .logo img{height:21px}
  .agendaVolver{font-size:11px}
  .agendaRequisitos{padding:20px 18px}
  .agendaPie{flex-direction:column; align-items:flex-start}
}
@media(prefers-reduced-motion:reduce){
  .agendaCargando i{animation:none}
}

/* El tic, dibujado. Norma de la casa desde el 23/08: ningún icono es un
   carácter del teclado —el mismo símbolo se pinta distinto en cada móvil—. */
.agendaRequisitos li>.agendaTic:after{
  content:""; width:11px; height:11px; background:var(--orange); display:block;
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round"><path d="m5 12.5 4.6 4.5L19 7"/></svg>') center/contain no-repeat;
          mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round"><path d="m5 12.5 4.6 4.5L19 7"/></svg>') center/contain no-repeat;
}

/* ═══════════════════════════════════════════════════════════════════
   Página de gracias (/agendar/gracias/)
   ═══════════════════════════════════════════════════════════════════
   Es la página que cuenta como conversión: aquí solo se llega habiendo
   reservado. Por eso no es un cartelito de "gracias" y ya: reaprovecha el
   momento de máxima atención para preparar la llamada (que el restaurante
   traiga su carta es lo que hace que la llamada sirva de algo).
   A una sola columna: aquí no hay nada que comparar, solo confirmar. */

.graciasCuerpo{
  flex:1; width:100%; max-width:660px; margin:0 auto; text-align:center;
  padding:clamp(40px,7vw,86px) 5vw; align-self:center;
}
.graciasCuerpo .kicker{
  color:var(--orange); letter-spacing:.16em; font-size:9px; font-weight:900;
  margin:0 0 16px;
}
.graciasCuerpo h1{
  margin:0; font:clamp(32px,5vw,52px)/1.02 Georgia,serif;
  letter-spacing:-.045em; text-wrap:balance;
}
.graciasCuerpo h1 em{color:var(--orange); font-style:normal; display:block}
.graciasEntrada{
  margin:22px auto 0; max-width:500px;
  color:var(--muted); font-size:15px; line-height:1.55; text-wrap:pretty;
}
.graciasEntrada strong{color:var(--text)}

/* el tic grande de confirmación, dibujado (no es un carácter) */
.graciasTic{
  width:56px; height:56px; margin:0 auto 26px; border-radius:50%;
  display:grid; place-items:center;
  background:#ff755622; border:1px solid #ff755644;
}
.graciasTic:after{
  content:""; width:26px; height:26px; background:var(--orange); display:block;
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"><path d="m5 12.5 4.6 4.5L19 7"/></svg>') center/contain no-repeat;
          mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"><path d="m5 12.5 4.6 4.5L19 7"/></svg>') center/contain no-repeat;
}

.graciasRequisitos{margin-top:34px; text-align:left}
.graciasMientras{
  margin:34px 0 16px; color:var(--muted); font-size:13px;
}
.graciasCuerpo .button{display:inline-flex}

@media(max-width:600px){
  .graciasTic{width:48px; height:48px; margin-bottom:22px}
  .graciasTic:after{width:22px; height:22px}
}