/* ============================================================================
   El portal del paciente, sus materiales, sus citas y su horario (25-09-2026).
   Los colores y las formas son los de espacio.css (los de su web): aquí solo
   va lo nuevo. La hoja sobre el agua es la foto de la portada de su web.
   ========================================================================== */

/* ------------------------------------------------ el saludo y la hojita */
.portal-hola h1{display:flex;align-items:center;gap:.28em;flex-wrap:wrap}
.hojita{
  width:.62em;height:auto;flex:0 0 auto;display:inline-block;
  transform-origin:50% 90%;
  animation:hojita-mece 7s ease-in-out infinite alternate;
  filter:drop-shadow(0 2px 3px #986c3e33);
}
@keyframes hojita-mece{
  from{transform:rotate(-9deg) translateY(0)}
  to{transform:rotate(7deg) translateY(-3px)}
}

/* ------------------------------------ la tarjeta de su próxima sesión */
/* Desde el 27-09-2026 el agua va de fondo del saludo (.agua-hero) y la
   tarjeta flota sobre su borde: ya no lleva la foto dentro. */
.portal-proxima{padding:0}
.portal-proxima::after{display:none}
.portal-proxima__texto{padding:30px 34px;position:relative;z-index:1;min-width:0}
/* El vídeo de su portada encima de la foto: entra fundido cuando ya se mueve,
   así nunca se ve un hueco negro. */
.hoja-video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:62% 58%;
  opacity:0;transition:opacity 1.6s ease;pointer-events:none;
}
.hoja-video.se-mueve{opacity:1}

/* ==========================================================================
   El agua de fondo del saludo, en su resumen y en el del paciente
   (27-09-2026). Víctor: «que esté de fondo en el resumen… con música lofi,
   que se pueda pausar». En el ordenador es un gran recuadro con el agua
   moviéndose, el saludo en crema a la izquierda y la hoja a la derecha; en el
   móvil va de borde a borde bajo la cabecera, como en una app. Lo oscuro del
   degradado va solo donde está el texto: la hoja se queda limpia.
   ========================================================================== */
.agua-hero{
  position:relative;isolation:isolate;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;
  min-height:clamp(290px,40vh,440px);
  margin:4px 0 30px;padding:48px 52px;
  border-radius:calc(var(--radio) + 8px);
  background:#0b5f63 url(img/hoja-agua-hero.webp) 64% 58%/cover no-repeat;
  box-shadow:0 34px 70px -42px #08676cb3,0 2px 6px -2px #03201d33;
  color:var(--cream);
}
.agua-hero__fondo{position:absolute;inset:0;z-index:-2}
.agua-hero .hoja-video{object-position:64% 58%}
.agua-hero::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(90deg,#03201dd6 0%,#03201d9e 30%,#03201d33 58%,#03201d00 78%),
    linear-gradient(0deg,#03201d52 0%,#03201d00 42%);
}
.agua-hero__texto{position:relative;max-width:min(580px,64%)}
.agua-hero .eyebrow{color:#f3f0e7c7}
.agua-hero h1{color:var(--cream);margin:.12em 0 .22em;text-shadow:0 2px 26px #03201d8c}
.agua-hero__texto > p:not(.eyebrow){color:#f3f0e7eb;margin:0;max-width:46ch;font-size:18px;
  text-shadow:0 1px 14px #03201d99}
/* Entra suave, como su web. */
.agua-hero__texto > *{animation:agua-entra 1s var(--ease) both}
.agua-hero__texto > :nth-child(2){animation-delay:.08s}
.agua-hero__texto > :nth-child(3){animation-delay:.16s}
@keyframes agua-entra{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* El paciente: la tarjeta de su sesión flota sobre el borde del agua. */
.agua-hero--paciente{padding-bottom:98px}
.agua-hero--paciente + .portal-proxima{margin:-72px 28px 34px;position:relative;z-index:2;
  box-shadow:0 26px 60px -30px #03201d99}

@media(max-width:700px){
  .agua-hero{
    margin:0 0 24px;
    min-height:clamp(260px,46svh,380px);
    padding:28px 20px 26px;justify-content:flex-end;
    border-radius:22px;
    background-position:70% 60%;
    box-shadow:0 24px 50px -34px #08676cb3;
  }
  /* Si es lo primero de la página, pegada a la cabecera y de borde a borde,
     como en una app (con un aviso encima, se queda dentro de los márgenes). */
  .envoltorio > .agua-hero:first-child{margin:-26px -22px 24px;padding:30px 22px 28px;border-radius:0 0 28px 28px}
  .agua-hero .hoja-video{object-position:70% 60%}
  .agua-hero::before{background:linear-gradient(0deg,#03201de6 0%,#03201da6 34%,#03201d1f 64%,#03201d00 80%)}
  .agua-hero__texto{max-width:100%}
  .agua-hero__texto > p:not(.eyebrow){font-size:16px}
  .agua-hero--paciente{padding-bottom:104px}
  .agua-hero--paciente + .portal-proxima{margin:-58px 0 28px}
}

/* ------------------------------------------------ la música de fondo */
.musica{
  position:absolute;top:18px;right:18px;z-index:3;
  display:inline-flex;align-items:center;gap:10px;
  min-height:44px;padding:0 16px 0 9px;border-radius:999px;
  border:1px solid #f3f0e75c;background:#03201d47;color:var(--cream);
  -webkit-backdrop-filter:blur(12px) saturate(1.3);backdrop-filter:blur(12px) saturate(1.3);
  font:600 14px/1 'Ohlala Sans','DM Sans',system-ui,sans-serif;letter-spacing:.01em;
  cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:background .25s var(--ease),border-color .25s var(--ease),transform .2s var(--ease);
}
.musica[hidden]{display:none}
.musica:hover{background:#03201d70;border-color:#f3f0e7a3}
.musica:active{transform:scale(.97)}
.musica:focus-visible{outline:2px solid var(--cream);outline-offset:3px}
.musica__icono{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  background:var(--cream);color:var(--pine);flex:0 0 auto}
.musica__icono svg{width:12px;height:12px;fill:currentColor;display:block}
.musica__pausa,.musica--suena .musica__play{display:none}
.musica--suena .musica__pausa{display:block}
.musica__ondas{display:inline-flex;align-items:center;gap:2.5px;height:16px}
.musica__ondas i{width:2.5px;height:100%;border-radius:2px;background:currentColor;opacity:.9;
  transform:scaleY(.22);transition:transform .4s var(--ease)}
.musica--suena .musica__ondas i{animation:musica-onda 1.05s ease-in-out infinite alternate}
.musica--suena .musica__ondas i:nth-child(2){animation-duration:.8s;animation-delay:-.3s}
.musica--suena .musica__ondas i:nth-child(3){animation-duration:1.25s;animation-delay:-.6s}
.musica--suena .musica__ondas i:nth-child(4){animation-duration:.9s;animation-delay:-.2s}
.musica--suena .musica__ondas i:nth-child(5){animation-duration:1.15s;animation-delay:-.5s}
@keyframes musica-onda{from{transform:scaleY(.22)}to{transform:scaleY(1)}}
@media(max-width:700px){ .musica{top:14px;right:14px} }
.portal-proxima .cuando{margin-bottom:10px}
/* La hora, en su línea: con el punto delante se partía mal («· 10:00» sola abajo). */
.portal-proxima .cuando .hora-grande{display:block;margin:8px 0 0}
.portal-proxima .cuando .hora-grande::before{content:"a las";margin-right:.3em;opacity:.7}
.portal-proxima__donde strong{color:var(--cream);font-weight:600}
.portal-proxima .detalle{margin:0 0 6px}
.portal-proxima__botones{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px;align-items:center}
.portal-proxima .button.claro{background:transparent;color:var(--cream);border-color:#f3f0e7a8}
.portal-proxima .button.claro:hover{background:#ffffff1f;color:var(--cream);border-color:var(--cream)}
.portal-proxima__pedir{font-size:18px;padding:14px 30px}
.portal-proxima__nota{font-size:14px;margin:12px 0 0 !important;max-width:46ch}
@media(max-width:700px){
  .portal-proxima__texto{padding:22px 20px 24px}
  .portal-proxima__botones .button{flex:1 1 100%;justify-content:center;min-height:48px}
}

/* ------------------------------------------------------ los dos bloques */
.portal-bloque__titulo{font-size:clamp(25px,3vw,32px);margin:0 0 10px;display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.portal-bloque__titulo .etiqueta{font-family:'Ohlala Sans','DM Sans',sans-serif;letter-spacing:.12em}
.portal-bloque__mas{margin:14px 0 0;font-size:15px}
.portal-suave{color:var(--suave)}
.portal-lista .accion .button{min-height:44px}
.portal-lista li{padding:14px 0}
.portal-pago{
  background:#d5b6811f;border:1px solid #d5b68166;border-radius:var(--radio-s);
  padding:6px 16px;margin:0 0 14px;
}
.portal-pago__titulo{margin:10px 0 0;font-weight:600;color:var(--copper)}
section.portal-pago{padding:26px}
.portal-cita__estado{display:block;margin-top:6px}
.portal-espera p{color:var(--ink)}

/* Lo que ella le escribe al dárselo, como un recado suyo. */
.portal-mensaje{
  display:block;margin:10px 0 2px;padding:10px 14px;border-radius:14px 14px 14px 4px;
  background:#0b8b8c12;color:var(--pine) !important;font-size:15px !important;max-width:60ch;
}
.portal-devuelto{display:block}
.portal-docs .material__acciones .button{min-height:44px}
.portal-docs .plegable input[type=file]{
  width:100%;font:inherit;font-size:15px;padding:14px;background:var(--blanco);
  border:1.5px dashed #08676c55;border-radius:var(--radio-s);cursor:pointer;
}

/* El error de un campo, junto al campo (y lo escrito se queda). */
.campo__error{margin:7px 0 0;color:var(--fallo);font-size:14px;font-weight:600}

/* ----------------------------------------------------- pedir cita: dónde */
.portal-sitios{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 12px}
.portal-sitio{
  display:inline-flex;align-items:center;justify-content:center;min-height:46px;
  padding:10px 16px;border-radius:60px;border:1px solid var(--line);
  background:var(--papel);color:var(--pine);font-weight:500;font-size:15px;
}
.portal-sitio:hover{text-decoration:none;border-color:var(--teal);background:#0b8b8c12}
.portal-sitio--aqui,.portal-sitio--aqui:hover{background:var(--pine);border-color:var(--pine);color:var(--cream)}
.portal-sitio__donde{color:var(--suave);font-size:15px;margin:0 0 18px}
@media(max-width:700px){
  .portal-sitios{display:grid;grid-template-columns:1fr 1fr}
  .portal-sitio{padding:10px 8px}
}

/* ------------------------------------------------ pedir cita: el mes */
.cal{max-width:560px}
.cal__cabecera{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 10px}
.cal__mes{margin:0;font-size:clamp(24px,3vw,30px);text-align:center;flex:1}
.cal__flecha{
  display:grid;place-items:center;width:46px;height:46px;border-radius:50%;
  border:1px solid var(--line);color:var(--pine);font-size:24px;line-height:1;background:var(--papel);
}
.cal__flecha:hover{text-decoration:none;border-color:var(--teal);background:#0b8b8c12}
.cal__flecha--no{opacity:.28}
.cal__semana,.cal__dias{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.cal__semana span{text-align:center;font-size:12px;font-weight:600;letter-spacing:.12em;color:var(--suave);padding:4px 0}
.cal__dia{
  min-height:54px;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:1px;font-variant-numeric:tabular-nums;border:1px solid transparent;min-width:0;overflow:hidden;
}
.cal__n{font-size:16px;line-height:1.1}
.cal__q{font-size:10px;line-height:1.1;letter-spacing:.02em;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:clip}
.cal__dia--libre{background:#0b8b8c14;border-color:#0b8b8c38;color:var(--pine);font-weight:600;cursor:pointer}
.cal__dia--libre .cal__q{color:var(--teal);font-weight:500}
.cal__dia--libre:hover{text-decoration:none;background:#0b8b8c26;border-color:var(--teal)}
.cal__dia--elegido,.cal__dia--elegido:hover{background:var(--pine);border-color:var(--pine);color:var(--cream)}
.cal__dia--elegido .cal__q{color:#f3f0e7cc}
.cal__punto{width:6px;height:6px;border-radius:50%;background:var(--teal);margin-top:4px}
.cal__dia--elegido .cal__punto{background:var(--cream)}
.cal__dia--cerrado,.cal__dia--festivo,.cal__dia--lleno,.cal__dia--sin,.cal__dia--pasado,.cal__dia--fuera{color:#8a9a96b8}
.cal__dia--festivo .cal__n,.cal__dia--cerrado .cal__n{text-decoration:line-through;text-decoration-color:#8a9a9680}
.cal__dia--festivo .cal__q{color:var(--copper)}
.cal__dia--hoy{border-color:#98553366}
.cal__dia--otro{min-height:0}
.cal__leyenda{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:12px 0 0;font-size:13px;color:var(--suave)}

/* Resumen: Hoy y Mañana conservan el ancho; a la derecha queda siempre la
   clave de los colores y la cuenta de Google de la que vienen. */
.inicio-agenda{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,270px);gap:18px;align-items:start}
.inicio-agenda > .dos-dias{grid-template-columns:repeat(2,minmax(0,1fr));min-width:0}
.inicio-leyenda{position:sticky;top:96px;margin-top:var(--separacion,32px);padding:22px 20px}
.inicio-leyenda h2{font-size:28px;margin:2px 0 13px}
.inicio-leyenda__cuenta{font-size:13px;line-height:1.45;color:var(--suave);overflow-wrap:anywhere;margin:0 0 14px}
.inicio-leyenda__cuenta strong{color:var(--pine)}
.inicio-leyenda__lista{list-style:none;padding:0;margin:0 0 14px;display:flex;flex-direction:column;gap:7px}
.inicio-leyenda__lista li{display:flex;align-items:center;gap:9px;min-width:0;font-size:14px;line-height:1.3}
.inicio-leyenda__lista li > i{width:14px;height:14px;border-radius:4px;flex:0 0 14px;background:var(--c);box-shadow:inset 0 0 0 1px #0002}
.inicio-leyenda__lista li > span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.inicio-leyenda__mezcla{display:grid;grid-template-columns:repeat(2,7px);width:14px;height:14px;overflow:hidden;border-radius:4px;flex:0 0 14px}
.inicio-leyenda__mezcla i{background:var(--c)}
@media (max-width:1120px){
  .inicio-agenda{grid-template-columns:minmax(0,1fr)}
  .inicio-leyenda{position:static;margin-top:0}
  .inicio-leyenda__lista{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:700px){
  .inicio-agenda > .dos-dias{grid-template-columns:minmax(0,1fr)}
  .inicio-leyenda{padding:18px 16px}
  .inicio-leyenda__lista{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:390px){.inicio-leyenda__lista{grid-template-columns:minmax(0,1fr)}}
.cal__muestra{display:inline-block;width:14px;height:14px;border-radius:4px;vertical-align:-2px}
.cal__muestra--libre{background:#0b8b8c26;border:1px solid #0b8b8c55}
.cal__muestra--no{background:#8a9a961a;border:1px solid #8a9a9633;margin-left:8px}
@media(max-width:420px){
  .cal-tarjeta{padding:18px 12px}
  .cal__semana,.cal__dias{gap:3px}
  .cal__dia{min-height:48px;border-radius:10px}
  .cal__q{font-size:9px}
  .cal__dia--libre .cal__q{font-size:9.5px}
}

/* El mes y las horas, lado a lado en el ordenador. */
.pedir{display:grid;gap:0 22px;align-items:start}
@media(min-width:960px){
  .pedir{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
  .pedir .cal-horas{position:sticky;top:96px}
}

/* ------------------------------------------------ pedir cita: las horas */
.cal-horas__ayuda{margin:0 0 12px}
.cal-horas__lista{margin:0 0 6px}
.hora--radio{position:relative;display:inline-flex;align-items:center;min-height:44px;min-width:78px;justify-content:center;font-weight:500;margin:0}
.hora--radio input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.hora--radio:has(input:checked){background:var(--pine);border-color:var(--pine);color:var(--cream)}
.hora--radio.elegida{background:var(--pine);border-color:var(--pine);color:var(--cream)}
.hora--radio:has(input:focus-visible){outline:3px solid #0b8b8c55;outline-offset:2px}
.cal-horas__mensaje{margin-top:18px}
#horas{scroll-margin-top:96px}
#horas:focus{outline:none}
@media(max-width:700px){
  #form-cita .button[type=submit]{width:100%;justify-content:center;min-height:50px}
}

/* ------------------------------------------------------ el comprobante */
.portal-comprobante__botones{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:20px 0 0}

/* ==========================================================================
   Su panel
   ========================================================================== */

/* Pestañas que son enlaces, en una tira que se parte en dos filas si no cabe. */
.pestanas-tira{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 20px}
.pestanas-tira a.pestana{min-height:40px;font-size:15px}

/* ------------------------------------------- materiales: «Qué es» en botones */
.chips{display:flex;flex-wrap:wrap;gap:8px;border:0;padding:0;margin:0;min-width:0}
.chips legend{font-size:14px;font-weight:600;color:var(--ink);margin:0 0 8px;padding:0}
.chip{position:relative;margin:0;font-weight:400}
.chip input{position:absolute;opacity:0;width:1px;height:1px}
.chip span{
  display:inline-flex;align-items:center;min-height:42px;padding:8px 16px;border-radius:60px;
  border:1px solid var(--line);background:var(--papel);color:var(--ink);font-size:15px;cursor:pointer;
  transition:background .18s var(--ease),border-color .18s var(--ease);
}
.chip span:hover{border-color:var(--teal)}
.chip input:checked + span{background:var(--pine);border-color:var(--pine);color:var(--cream)}
.chip input:focus-visible + span{outline:3px solid #0b8b8c55;outline-offset:2px}

/* Un desplegable con su buscador encima (las temáticas son muchas). */
.buscable__filtro,.elige__buscar{
  width:100%;font:inherit;font-size:15px;color:var(--ink);margin:0 0 8px;
  background:var(--papel);border:1px solid var(--line);border-radius:999px;padding:9px 14px;
}
.buscable__filtro:focus,.elige__buscar:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px #0b8b8c22;background:var(--blanco)}
.tematica-nueva{margin-top:10px}

/* Elegir a quién se lo da: buscar por código o nombre y marcar a varios. */
.elige{border:1px solid var(--line);border-radius:var(--radio-s);background:var(--blanco);padding:12px}
.elige__buscar{margin:0 0 8px}
.elige__lista{max-height:260px;overflow:auto;margin:0;padding:0;list-style:none;overscroll-behavior:contain}
.elige__uno{margin:0}
.elige__uno label{
  display:flex;align-items:center;gap:10px;min-height:44px;margin:0;padding:6px 8px;border-radius:10px;
  font-weight:400;font-size:15px;cursor:pointer;
}
.elige__uno label:hover{background:#08676c0d}
.elige__uno input{width:20px;height:20px;accent-color:var(--pine);flex:0 0 auto}
.elige__uno .ident{margin-left:0}
.elige__uno--ya label{color:var(--suave);cursor:default}
.elige__ya{font-size:12.5px;color:var(--suave);margin-left:auto}
.elige__nadie{margin:8px 4px;color:var(--suave);font-size:14px}
.elegidos{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0;min-height:0}
.elegidos:empty{display:none}
.elegidos .chapa{padding:3px 11px}

/* Sus trámites y plantillas: la etiqueta individual o pareja. */
.version{margin-left:6px}

/* Tus listas (Qué es y Temáticas), plegadas. */
.listas-suyas > summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px}
.listas-suyas > summary::-webkit-details-marker{display:none}
.listas-suyas > summary h2{margin:0}
.listas-suyas > summary::after{content:"＋";font-size:22px;color:var(--pine)}
.listas-suyas[open] > summary::after{content:"－"}
.listas-suyas__cuerpo{margin-top:16px}
.listas-suyas h3{margin:22px 0 8px}

/* ------------------------------------------------------------- Citas */
.citas-meses{display:flex;align-items:center;gap:10px;margin:14px 0 10px;min-width:0}
.citas-meses__nav{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);flex:0 0 auto;font-size:20px;color:var(--pine)}
.citas-meses__nav:hover{text-decoration:none;border-color:var(--teal)}
.citas-meses__nav--no{opacity:.3}
.citas-meses__titulo{font-family:'Cormorant Garamond',Georgia,serif;font-size:26px;color:var(--pine);margin:0;white-space:nowrap}
.citas-meses__tira{display:flex;gap:6px;overflow-x:auto;flex:1 1 auto;min-width:0;padding:2px 0 6px;scrollbar-width:thin}
.citas-meses__tira a{white-space:nowrap;flex:0 0 auto}
.citas-dia{margin:22px 0 4px;font-family:'Ohlala Sans','DM Sans',system-ui,sans-serif;font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--suave)}
.citas-dia--hoy{color:var(--copper)}
.cita__n{
  flex:0 0 auto;min-width:38px;height:38px;border-radius:12px;display:grid;place-items:center;
  background:#08676c12;color:var(--pine);font-weight:700;font-variant-numeric:tabular-nums;font-size:15px;margin-top:2px;
}
.cita--hoy .cita__n{background:var(--copper);color:var(--cream)}
.cita--hecha .cita__n{background:#8a9a961a;color:var(--suave)}
.cita__quien{
  appearance:none;border:0;background:none;padding:0;font:inherit;cursor:pointer;text-align:left;
  display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;color:inherit;
}
.cita__quien:hover .quien,.cita__quien:focus-visible .quien{text-decoration:underline;text-decoration-color:#0b8b8c80}
.lista .cuerpo .cita__quien .quien{color:var(--ink);font-size:16px;font-weight:600}
.lista .cuerpo .cita__quien .ident{font-size:11px}
.lista .cuerpo .cita__quien .ident--solo{font-size:13px;color:var(--ink)}
.lista .cuerpo .estado{margin-right:12px}
.cita .nota__texto{margin:6px 0 0}
.cita__quien-nota{font-size:12px;font-weight:600;color:var(--teal);background:#0b8b8c14;border-radius:60px;padding:2px 9px}
.burbuja{position:relative;max-width:480px;background:var(--blanco);box-shadow:0 14px 40px -18px #08676c66;border-color:#0b8b8c55}
.burbuja::before{
  content:"";position:absolute;top:-8px;left:26px;width:14px;height:14px;background:var(--blanco);
  border-left:1px solid #0b8b8c55;border-top:1px solid #0b8b8c55;transform:rotate(45deg);
}
.burbuja__notas{list-style:none;margin:0 0 12px;padding:0}
.burbuja__notas li{display:block;padding:10px 12px;border-radius:10px;background:var(--papel);margin:0 0 8px;border:0;font-size:15px;white-space:pre-wrap}
.burbuja__notas li small{display:block;color:var(--suave);font-size:12.5px;margin-top:4px;white-space:normal}
.cita__cancelar fieldset{border:0;padding:0;margin:0 0 12px}
.cita__cancelar legend{font-size:12.5px;font-weight:600;margin:0 0 6px;padding:0}
.opciones-sencillas{display:flex;flex-wrap:wrap;gap:8px}
.ajuste-corto{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
.ajuste-corto .campo{margin:0}
.ajuste-corto select{min-width:170px}
@media(max-width:700px){
  .citas-meses{flex-wrap:wrap}
  .citas-meses__tira{flex:1 1 100%;order:3}
  .burbuja{max-width:none}
}

/* ------------------------------------------------------------ Horario */
.cambios{list-style:none;margin:0;padding:0}
.cambio{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
.cambio:last-child{border-bottom:0}
.cambio__que{flex:1 1 280px;min-width:0}
.cambio__que strong{display:block;color:var(--ink);font-weight:600}
.cambio__que span{display:block;color:var(--suave);font-size:14px}
.cambio__botones{display:flex;flex-wrap:wrap;gap:6px}
.cambio__botones form{margin:0}
.cambio--festivo .cambio__que strong{color:var(--copper)}
.cambio--pasado{opacity:.6}
.propuesta{background:#d5b6811a;border:1px solid #d5b68166;border-radius:var(--radio-s);padding:14px 16px;margin:0 0 10px}
.propuesta__titulo{font-size:13px;color:var(--suave);margin:0 0 4px}
.propuesta__que{font-weight:600;color:var(--ink);margin:0 0 10px}
.horario-comun{font-size:18px;color:var(--ink);margin:0 0 6px}
.que-pasa{margin:0 0 16px}
.horas-concretas{display:flex;flex-wrap:wrap;gap:12px;margin-top:12px}
.horas-concretas[hidden]{display:none}
.horas-concretas .campo{flex:1 1 140px;margin:0}
.fechas{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.fechas .campo{flex:1 1 170px;margin:0}
.fechas .interruptor{margin:0 0 12px}
.atajos-fecha{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 16px}
.duracion-form{display:grid;gap:14px}
@media(min-width:760px){ .duracion-form{grid-template-columns:repeat(3,minmax(0,1fr));align-items:end} }
input[type=time]{
  width:100%;font:inherit;font-size:16px;color:var(--ink);
  background:var(--papel);border:1px solid var(--line);border-radius:var(--radio-s);padding:11px 12px;
}

/* ------------------------------------------ las anclas, bajo la cabecera fija */
[id]{scroll-margin-top:110px}
@media(max-width:700px){ [id]{scroll-margin-top:80px} }

@media(prefers-reduced-motion:reduce){
  .hojita{animation:none}
  .hoja-video{display:none}
  .agua-hero__texto > *{animation:none}
  .musica__ondas i{animation:none !important}
}