@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');
/* ============================================================
   Estilos de la web RumboBach — propuesta "cine + crema".
   Lo más habitual que querrás tocar está aquí arriba:

   --video-ancho   ancho máximo del vídeo (el alto se calcula solo, 16:9)
   --primario      naranja de la marca (botones, selección, brújula)
   --crema         color de fondo de la zona del calendario
   ============================================================ */
:root {
  --video-ancho: 960px;
  --primario: #D97757;           /* naranja principal (sobre fondos oscuros y botones) */
  --primario-oscuro: #C2603F;    /* naranja al pasar el ratón */
  --primario-texto: #B9532F;     /* naranja más oscuro para textos pequeños sobre claro */
  --primario-suave: #FBEAE2;     /* naranja muy claro (fondos de hover) */
  --crema: #F8F3EC;              /* fondo cálido de la zona del calendario */

  --oscuro: #121212;             /* fondo de cabecera, banda del vídeo y pie */
  --oscuro-2: #1B1B1B;           /* tarjetas sobre oscuro */
  --oscuro-borde: rgba(255, 255, 255, .09);
  --claro-sobre-oscuro: #D9D9D9; /* gris del logo "Rumbo" */
  --suave-sobre-oscuro: #A8A29C;

  --tarjeta: #FFFFFF;
  --texto: #1F1B18;
  --texto-suave: #6B625A;
  --borde: #EBE3D8;
  --tinta: #1A1613;              /* texto oscuro sobre los botones naranja */
  --exito: #23663B;
  --exito-fondo: #F1F8F2;
  --exito-borde: #CFE5D3;
  --error: #B42318;
  --radio: 16px;
  --radio-s: 10px;
  --sombra: 0 10px 30px rgba(60, 40, 20, .08), 0 1px 2px rgba(60, 40, 20, .05);
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--crema);
  color: var(--texto);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  /* el pie siempre queda abajo aunque la página sea corta */
  display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh;
}
button { font: inherit; cursor: pointer; }
input, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--primario); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--primario); color: var(--tinta); }

/* Texto solo para lectores de pantalla (etiquetas ocultas) */
.visualmente-oculto {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---------- Logo (brújula + texto) ---------- */
.logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.logo-brujula { display: block; flex: none; color: var(--primario); }
.logo-texto { display: inline-flex; white-space: nowrap; }
.logo-rumbo { color: var(--texto); }                  /* sobre fondo claro */
.logo-bach { color: var(--primario); }
.cabecera .logo-rumbo, .pie .logo-rumbo, .pantalla-acceso .logo-rumbo { color: var(--claro-sobre-oscuro); } /* sobre fondo oscuro */

.logo-cabecera .logo-brujula { width: 38px; height: 38px; }
.logo-cabecera { font-size: 1.25rem; }
.logo-acceso { flex-direction: column; gap: 14px; font-size: 1.75rem; }
.logo-acceso .logo-brujula { width: 84px; height: 84px; filter: drop-shadow(0 0 22px rgba(217, 119, 87, .35)); }
.logo-pie .logo-brujula { width: 30px; height: 30px; }
.logo-pie { font-size: 1.05rem; }

/* ---------- Pantalla de acceso ---------- */
.pantalla-acceso {
  min-height: 100vh; min-height: 100svh; display: grid; place-items: center; padding: 24px 16px;
  background:
    radial-gradient(60% 45% at 50% 0%, rgba(217, 119, 87, .22), transparent 70%),
    radial-gradient(50% 40% at 100% 100%, rgba(217, 119, 87, .08), transparent 70%),
    var(--oscuro);
  color: var(--claro-sobre-oscuro);
}
.tarjeta-acceso {
  position: relative; overflow: hidden;
  width: 100%; max-width: 400px;
  background: var(--oscuro-2); border: 1px solid var(--oscuro-borde); border-radius: 22px;
  padding: 40px 32px 32px; text-align: center;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55), 0 0 0 1px rgba(0, 0, 0, .4);
}
.tarjeta-acceso::after {
  /* fina línea naranja en el borde superior de la tarjeta */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--primario), transparent);
}
.tarjeta-acceso .logo { margin-bottom: 26px; }
.tarjeta-acceso h1 { margin: 0 0 22px; font-size: 1.25rem; font-weight: 600; letter-spacing: -.01em; color: #ECE8E4; }
.tarjeta-acceso form { display: grid; gap: 12px; }
.tarjeta-acceso input {
  width: 100%; padding: 14px 16px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 12px;
  background: #101010; color: #fff; font-size: 1.05rem; text-align: center; letter-spacing: .12em;
  transition: border-color .2s, box-shadow .2s;
}
.tarjeta-acceso input::placeholder { color: #8A8580; letter-spacing: 0; }
.tarjeta-acceso input:focus { outline: none; border-color: var(--primario); box-shadow: 0 0 0 4px rgba(217, 119, 87, .22); }
.tarjeta-acceso button {
  margin-top: 4px; padding: 14px; border: 0; border-radius: 12px;
  background: var(--primario); color: var(--tinta); font-weight: 700; font-size: 1rem;
  transition: background .2s, transform .15s, box-shadow .2s;
}
.tarjeta-acceso button:hover { background: #E4855F; box-shadow: 0 8px 24px rgba(217, 119, 87, .35); transform: translateY(-1px); }
.tarjeta-acceso button:active { transform: translateY(0) scale(.98); }
.tarjeta-acceso .error {
  margin: 0; padding: 10px 12px; border-radius: 10px; font-size: .9rem; font-weight: 600;
  color: #FFB3A6; background: rgba(180, 35, 24, .22); border: 1px solid rgba(255, 138, 122, .3);
}
.con-error input { border-color: rgba(255, 138, 122, .6); }

/* ---------- Cabecera ---------- */
.cabecera {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px max(16px, calc(50% - 534px));
  background: rgba(18, 18, 18, .92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: var(--claro-sobre-oscuro);
  position: sticky; top: 0; z-index: 10;
}
.logo-enlace { text-decoration: none; color: inherit; display: inline-flex; border-radius: 8px; }
.cabecera nav { display: flex; gap: 6px; }
.cabecera nav a {
  position: relative; color: var(--claro-sobre-oscuro); text-decoration: none; font-size: .95rem; font-weight: 600;
  padding: 8px 12px; border-radius: 999px; transition: color .2s, background .2s;
}
.cabecera nav a:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.cabecera nav a::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 2px; border-radius: 2px;
  background: var(--primario); transform: scaleX(0); transform-origin: left; transition: transform .25s ease;
}
.cabecera nav a:hover::after { transform: scaleX(1); }

.contenido { width: 100%; max-width: 1100px; margin: 0 auto; padding: 0 16px 80px; flex: 1 0 auto; }

/* ---------- Vídeo (banda oscura a todo el ancho) ---------- */
.seccion-video { position: relative; z-index: 0; display: flex; justify-content: center; padding: 40px 0 0; margin-bottom: 64px; }
.seccion-video::before {
  /* banda oscura: se extiende hasta los bordes de la ventana con una sombra recortada */
  content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: 0; bottom: 88px;
  background: radial-gradient(60% 70% at 50% 0%, rgba(217, 119, 87, .26), transparent 70%), var(--oscuro);
  box-shadow: 0 0 0 100vmax var(--oscuro); clip-path: inset(0 -100vmax);
}
.video-caja {
  width: 100%; max-width: var(--video-ancho); aspect-ratio: 16 / 9;
  background: #0B0B0B; border-radius: 20px; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 0 40px 90px rgba(0, 0, 0, .45), 0 12px 30px rgba(0, 0, 0, .35);
}
.video-caja video, .video-caja iframe { width: 100%; height: 100%; display: block; border: 0; }
.video-placeholder {
  position: relative; width: 100%; height: 100%; display: grid; place-items: center; align-content: center; gap: 14px;
  color: #B9B3AD; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; font-size: .8rem;
  background: linear-gradient(120deg, #101010 0%, #1A1816 40%, #231A16 55%, #101010 100%);
  background-size: 250% 250%; background-position: 0% 50%;
}
.video-placeholder::before {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 32px);
  pointer-events: none;
}
.video-placeholder svg {
  width: 76px; height: 76px; color: var(--primario);
  filter: drop-shadow(0 0 24px rgba(217, 119, 87, .55));
}

/* ---------- Citas ---------- */
.seccion-citas { padding-top: 8px; }
.seccion-citas h2 { text-align: center; margin: 0 0 8px; font-size: clamp(1.7rem, 3vw, 2.2rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.15; }
.seccion-citas h2::after { content: ""; display: block; width: 44px; height: 4px; margin: 14px auto 0; border-radius: 4px; background: var(--primario); }
.subtitulo { text-align: center; color: var(--texto-suave); margin: 0 0 32px; font-size: 1.05rem; }

.agenda { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 900px; margin: 0 auto; align-items: stretch; }
.horas { display: flex; flex-direction: column; }
@media (max-width: 720px) { .agenda { grid-template-columns: 1fr; } }

.calendario, .horas, .form-cita, .cita-ok {
  background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio); padding: 22px;
  box-shadow: var(--sombra);
}

.cal-cabecera { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.cal-cabecera span { font-weight: 700; font-size: 1.05rem; letter-spacing: -.01em; }
.cal-cabecera button {
  width: 38px; height: 38px; border: 1px solid var(--borde); background: #fff; border-radius: 50%;
  font-size: 1.4rem; line-height: 1; padding: 0 0 3px; color: var(--texto);
  transition: border-color .2s, color .2s, background .2s, transform .15s;
}
.cal-cabecera button:hover:not(:disabled) { border-color: var(--primario); color: var(--primario-texto); background: var(--primario-suave); transform: scale(1.06); }
.cal-cabecera button:active:not(:disabled) { transform: scale(.96); }
.cal-cabecera button:disabled { color: #C9C0B6; border-color: #F0EBE4; cursor: default; }

.cal-dias-semana, .cal-dias { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-dias-semana span { text-align: center; font-size: .72rem; color: var(--texto-suave); font-weight: 700; letter-spacing: .08em; padding-bottom: 6px; }
.cal-dia {
  aspect-ratio: 1; border: 0; border-radius: var(--radio-s); padding: 0;
  background: #FBF7F2; color: var(--texto); font-weight: 700; font-size: .95rem;
  transition: background .15s, color .15s, transform .15s, box-shadow .15s;
}
.cal-dia:hover:not(:disabled) { background: var(--primario-suave); color: var(--primario-texto); transform: scale(1.08); box-shadow: 0 6px 14px rgba(217, 119, 87, .2); }
.cal-dia:active:not(:disabled) { transform: scale(.96); }
.cal-dia.seleccionado, .cal-dia.seleccionado:hover { background: var(--primario); color: var(--tinta); box-shadow: 0 8px 18px rgba(217, 119, 87, .4); }
.cal-dia.no-disponible { background: transparent; color: #A39A90; cursor: default; font-weight: 500; }
.cal-dia.completo { background: #F1ECE5; color: #8F857A; text-decoration: line-through; cursor: default; font-weight: 500; }
.cal-dia.hoy { box-shadow: inset 0 0 0 2px var(--primario); }
.cal-dia.hoy.seleccionado { box-shadow: inset 0 0 0 2px var(--primario), 0 8px 18px rgba(217, 119, 87, .4); }

.horas-vacio { color: var(--texto-suave); margin: auto; text-align: center; padding: 48px 12px; max-width: 26ch; }
.horas-vacio::before {
  content: ""; display: block; width: 40px; height: 40px; margin: 0 auto 14px; border-radius: 50%;
  border: 2px solid var(--borde); background: radial-gradient(circle, var(--primario) 0 5px, transparent 6px);
}
.horas-titulo { margin: 0 0 14px; font-weight: 700; font-size: 1.05rem; letter-spacing: -.01em; }
.horas-titulo::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--primario); margin-right: 10px; vertical-align: 2px; }
.horas-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.hora {
  padding: 11px 0; border: 1px solid var(--borde); border-radius: var(--radio-s); background: #fff; font-weight: 600;
  transition: border-color .15s, color .15s, background .15s, transform .15s, box-shadow .15s;
}
.hora:hover:not(:disabled) { border-color: var(--primario); color: var(--primario-texto); background: var(--primario-suave); transform: translateY(-2px); box-shadow: 0 6px 14px rgba(217, 119, 87, .18); }
.hora:active:not(:disabled) { transform: translateY(0) scale(.97); }
.hora.seleccionado, .hora.seleccionado:hover { background: var(--primario); border-color: var(--primario); color: var(--tinta); box-shadow: 0 8px 18px rgba(217, 119, 87, .4); }
.hora:disabled { background: #F5F0E9; border-color: #F0EBE4; color: #8F857A; text-decoration: line-through; cursor: default; }

.form-cita, .cita-ok { max-width: 900px; margin: 20px auto 0; }
.form-cita { display: grid; gap: 14px; padding: 26px; }
.resumen { margin: 0 0 4px; font-weight: 700; color: var(--primario-texto); padding-left: 14px; border-left: 3px solid var(--primario); }
.form-cita label { display: grid; gap: 6px; font-size: .9rem; font-weight: 700; }
.form-cita input, .form-cita textarea {
  padding: 11px 14px; border: 1px solid var(--borde); border-radius: var(--radio-s); font-weight: 400; resize: vertical;
  background: #FCFAF7; transition: border-color .2s, box-shadow .2s, background .2s;
}
.form-cita input:focus, .form-cita textarea:focus { outline: none; background: #fff; border-color: var(--primario); box-shadow: 0 0 0 4px rgba(217, 119, 87, .18); }
.form-acciones { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; margin-top: 4px; }
.form-acciones button {
  padding: 12px 22px; border-radius: 999px; border: 0;
  background: var(--primario); color: var(--tinta); font-weight: 700;
  transition: background .2s, transform .15s, box-shadow .2s;
}
.form-acciones button:hover:not(:disabled) { background: var(--primario-oscuro); color: #fff; transform: translateY(-1px); box-shadow: 0 8px 20px rgba(217, 119, 87, .35); }
.form-acciones button:active:not(:disabled) { transform: translateY(0) scale(.98); }
.form-acciones button:disabled { opacity: .55; cursor: default; }
.form-acciones .secundario { background: #fff; color: var(--texto); border: 1px solid var(--borde); }
.form-acciones .secundario:hover { background: var(--crema); color: var(--texto); box-shadow: none; }
.form-msg { margin: 0; font-size: .9rem; color: var(--texto-suave); min-height: 1.2em; }
.form-msg.error { color: var(--error); font-weight: 600; }

.cita-ok { text-align: center; border-color: var(--exito-borde); background: var(--exito-fondo); padding: 30px 24px; }
.cita-ok strong { display: block; color: var(--exito); font-size: 1.3rem; font-weight: 800; letter-spacing: -.02em; }
.cita-ok strong::before { content: "\2713"; display: inline-grid; place-items: center; width: 28px; height: 28px; margin-right: 10px; border-radius: 50%; background: var(--exito); color: #fff; font-size: 1rem; vertical-align: 3px; }
.cita-ok p { margin: 8px 0 18px; color: var(--texto); }
.cita-ok button {
  padding: 11px 22px; border-radius: 999px; border: 1px solid var(--exito-borde); background: #fff; color: var(--exito); font-weight: 700;
  transition: background .2s, color .2s, transform .15s;
}
.cita-ok button:hover { background: var(--exito); color: #fff; transform: translateY(-1px); }

/* ---------- Pie ---------- */
.pie {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 28px max(16px, calc(50% - 534px)); background: var(--oscuro); color: var(--suave-sobre-oscuro);
  border-top: 1px solid var(--oscuro-borde);
}
.pie .logo-brujula { color: var(--primario); }
.pie-texto { font-size: .9rem; }

/* ---------- Lista de citas ---------- */
.titulo-pagina { margin: 36px 0 20px; font-size: clamp(1.6rem, 3vw, 2rem); font-weight: 800; letter-spacing: -.03em; }
.aviso { background: var(--exito-fondo); border: 1px solid var(--exito-borde); color: var(--exito); font-weight: 600; padding: 12px 16px; border-radius: var(--radio-s); margin: 0 0 18px; }
.vacio { text-align: center; color: var(--texto-suave); padding: 48px 16px; background: var(--tarjeta); border: 1px dashed var(--borde); border-radius: var(--radio); }
.tabla-scroll { overflow-x: auto; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--tarjeta); box-shadow: var(--sombra); }
.tabla { width: 100%; border-collapse: collapse; }
.tabla th, .tabla td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--borde); font-size: .95rem; vertical-align: top; }
.tabla th { background: #FBF7F2; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--texto-suave); white-space: nowrap; font-weight: 700; }
.tabla tbody tr { transition: background .15s; }
.tabla tbody tr:hover { background: #FDFBF8; }
.tabla tr:last-child td { border-bottom: 0; }
.tabla tr.pasada td { color: var(--texto-suave); }
.tabla tr.pasada td:first-child { text-decoration: line-through; }
.tabla td:first-child { white-space: nowrap; font-weight: 600; }
.tabla td:nth-child(2) { font-weight: 700; color: var(--primario-texto); }
.tabla a { color: var(--primario-texto); text-decoration-thickness: 1px; text-underline-offset: 2px; }
.tabla a:hover { color: var(--primario-oscuro); }
.form-borrar { margin: 0; }
.btn-borrar {
  border: 1px solid var(--borde); background: #fff; color: var(--error); border-radius: 999px; padding: 7px 14px; font-size: .85rem; font-weight: 700; white-space: nowrap;
  transition: background .2s, color .2s, border-color .2s;
}
.btn-borrar:hover { background: var(--error); border-color: var(--error); color: #fff; }

/* ---------- Móvil ---------- */
@media (max-width: 600px) {
  .tarjeta-acceso { padding: 32px 22px 26px; }
  .logo-acceso .logo-brujula { width: 72px; height: 72px; }
  .logo-acceso { font-size: 1.5rem; }
  .logo-cabecera .logo-brujula { width: 32px; height: 32px; }
  .logo-cabecera { font-size: 1.1rem; }
  .cabecera nav a { padding: 8px 10px; font-size: .9rem; }
  .seccion-video { padding-top: 24px; margin-bottom: 48px; }
  .seccion-video::before { bottom: 48px; }
  .video-caja { border-radius: 14px; }
  .video-placeholder svg { width: 56px; height: 56px; }
  .calendario, .horas, .form-cita, .cita-ok { padding: 16px; }
  .form-acciones button { flex: 1 1 auto; }
  .pie { justify-content: center; text-align: center; }
}

/* ============================================================
   Animaciones (solo si el usuario no ha pedido reducir el movimiento)
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  @keyframes subir { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
  @keyframes bajar { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
  @keyframes aparecer { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
  @keyframes brujula {
    0%   { transform: rotate(-150deg); opacity: 0; }
    55%  { transform: rotate(14deg); opacity: 1; }
    80%  { transform: rotate(-6deg); }
    100% { transform: rotate(0); }
  }
  @keyframes temblar {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-7px); } 40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); } 80% { transform: translateX(3px); }
  }
  @keyframes respirar { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.09); opacity: 1; } }
  @keyframes deriva { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
  @keyframes latido { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

  /* La brújula se orienta al cargar */
  .logo-brujula { animation: brujula 1.3s cubic-bezier(.22, .9, .3, 1) both; }
  .logo-enlace .logo-brujula { transition: transform .5s cubic-bezier(.34, 1.56, .64, 1); }
  .logo-enlace:hover .logo-brujula { transform: rotate(-25deg); }

  /* Entrada de la pantalla de acceso */
  .tarjeta-acceso { animation: subir .6s cubic-bezier(.22, .9, .3, 1) both; }
  .tarjeta-acceso h1 { animation: subir .5s .25s cubic-bezier(.22, .9, .3, 1) both; }
  .tarjeta-acceso form { animation: subir .5s .4s cubic-bezier(.22, .9, .3, 1) both; }
  .tarjeta-acceso.con-error { animation: subir .6s both, temblar .45s .55s ease-in-out both; }
  .pantalla-acceso::before {
    content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1;
    background: radial-gradient(40% 35% at 50% 0%, rgba(217, 119, 87, .18), transparent 70%);
    animation: latido 6s ease-in-out infinite;
  }

  /* Entrada de la página principal */
  .cabecera { animation: bajar .5s cubic-bezier(.22, .9, .3, 1) both; }
  .seccion-video { animation: subir .7s .1s cubic-bezier(.22, .9, .3, 1) both; }
  .seccion-citas h2 { animation: subir .5s .3s cubic-bezier(.22, .9, .3, 1) both; }
  .subtitulo { animation: subir .5s .4s cubic-bezier(.22, .9, .3, 1) both; }
  .calendario { animation: subir .6s .5s cubic-bezier(.22, .9, .3, 1) both; }
  .horas { animation: subir .6s .6s cubic-bezier(.22, .9, .3, 1) both; }
  .titulo-pagina, .aviso { animation: subir .5s .1s cubic-bezier(.22, .9, .3, 1) both; }
  .tabla-scroll, .vacio { animation: subir .6s .25s cubic-bezier(.22, .9, .3, 1) both; }
  .pie { animation: subir .6s .7s cubic-bezier(.22, .9, .3, 1) both; }

  /* Formulario y confirmación: se anima cada vez que aparecen */
  .form-cita, .cita-ok { animation: aparecer .45s cubic-bezier(.22, .9, .3, 1) both; }
  .cita-ok strong::before { animation: aparecer .5s .15s cubic-bezier(.34, 1.56, .64, 1) both; }

  /* Vídeo: degradado lento e icono que respira */
  .video-placeholder { animation: deriva 14s ease-in-out infinite; }
  .video-placeholder svg { animation: respirar 3s ease-in-out infinite; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}