/* ─────────────────────────────────────────────────────────────────────────────
   Consultorio Dr. Emanuel A. Soriano — hoja única.
   Azul #1557b0 y blanco, tinta azul muy oscura, bordes redondeados, Archivo en todo.
   Toda la paleta vive en el :root de abajo y está medida contra WCAG AA.
   ──────────────────────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&display=swap');
/* Serif para los títulos. Es lo que más separa un sitio profesional de una landing: la sans
   gruesa y apretada lee "producto", la serif lee "consultorio". El cuerpo sigue en sans,
   que se lee mejor en pantalla y en párrafos largos. */
@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,500;8..60,600&display=swap');

/*
 * Paleta lavanda del diseño "Agenda viva" (8/8/2026). Reemplazó al rosa #ffb5c0 en todo
 * el sitio, no solo en la portada.
 *
 * **El cambio que hay que tener presente:** el rosa era un color CLARO —se le ponía texto
 * oscuro encima— y el lavanda es OSCURO. Todo lo que usa `--accent` de fondo necesita
 * texto blanco, y para eso está `--sobre-accent`. Si alguna vez se vuelve a un acento
 * claro, se cambia ese token y no hay que revisar regla por regla.
 *
 * La escala `--n-*` sigue yendo de claro (100) a oscuro (800), que es al revés de como la
 * numera el documento de diseño. Se respetó la del sitio a propósito: son decenas de usos
 * ya escritos y dar vuelta la escala invertía el contraste en todas las pantallas.
 */
:root {
  /* ───────────────────────────────────────────────────────────────────────────
     SISTEMA VISUAL v1.0 — la fuente está en ../../diseno/sistema-visual.html
     Los nombres de esta primera tanda son los del diseñador y son los que valen.
     Cada par de color está MEDIDO contra WCAG AA; si se cambia un valor, se
     vuelve a medir. A un sitio de neurología entra gente mayor y con poca visión.
     ─────────────────────────────────────────────────────────────────────────── */
  --color-petroleo-700: #1b5862;   /* botón primario · blanco encima 8.02:1 */
  --color-petroleo-600: #256b75;   /* emblema y selección · blanco encima 6.11:1 */
  --color-petroleo-100: #dcecef;   /* fondos informativos */
  --color-petroleo-050: #edf5f5;
  --color-tinta:        #17272b;   /* sobre blanco 15.42:1 */
  --color-texto:        #42575c;   /* secundario · sobre blanco 7.64:1 */
  --color-borde-control:#597075;   /* contorno de TODO control · 5.25:1 sobre blanco */
  --color-borde-suave:  #c9d4d5;   /* decorativo: separadores y bordes de tarjeta */
  --color-fondo:        #f6f8f5;
  --color-superficie:   #ffffff;
  --color-foco:         #b6532a;   /* anillo de teclado · 4.93:1 sobre blanco */
  --color-error:        #9b2f2f;   --color-error-fondo:  #fce8e8;   /* 6.28:1 */
  --color-exito:        #1f6b49;   --color-exito-fondo:  #e4f4eb;   /* 5.66:1 */
  --color-aviso:        #7a4d00;   --color-aviso-fondo:  #fff1cc;   /* 6.47:1 */
  --color-info:         #315d88;   --color-info-fondo:   #e7eff8;   /* 5.93:1 */
  --color-inactivo-fondo: #e8eceb;

  /*
   * Tres valores que el sistema no define porque su página no tiene fondo oscuro,
   * y este sitio sí: la cinta de obras sociales. Medidos contra la tinta.
   */
  --color-petroleo-claro: #7fc4cf;  /* acento sobre la cinta oscura · 7.86:1 */
  --color-gris-claro:     #9aa9ae;  /* etiqueta sobre la cinta oscura · 6.36:1 */
  --color-petroleo-800:   #16474f;  /* botón apretado · blanco encima 10.25:1 */

  /* Fondo de la tarjeta del cerebro y del pie. */
  --color-noche:                 #0b2231;

  --fuente-interfaz:  Archivo, Arial, system-ui, sans-serif;
  --fuente-editorial: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --texto-xs: 0.8125rem;   /* 13 */
  --texto-sm: 0.9375rem;   /* 15 */
  --texto-base: 1.0625rem; /* 17 — el cuerpo sube de 15 a 17: quien entra acá lee peor */
  --texto-lg: 1.25rem;     /* 20 */
  /* Escala de diseno/sistema-visual.html. Las maquetas autocontenidas traen
     un h1 de hasta 6.5rem en su propio :root: eso no se copia. A ese tamaño,
     un max-width en ch apila una palabra por renglón y tapa el resto del bloque. */
  --titulo-3: clamp(1.35rem, 1.2rem + 0.5vw, 1.625rem);
  --titulo-2: clamp(1.75rem, 1.45rem + 1vw, 2.375rem);
  --titulo-1: clamp(2.35rem, 1.8rem + 2.1vw, 3.75rem);

  --espacio-1: .25rem; --espacio-2: .5rem;  --espacio-3: .75rem; --espacio-4: 1rem;
  --espacio-5: 1.5rem; --espacio-6: 2rem;   --espacio-7: 3rem;   --espacio-8: 4.5rem;
  --radio-control: .625rem;  /* 10 */
  --radio-tarjeta: 1rem;     /* 16 */
  --radio-pildora: 999px;
  --alto-control: 2.75rem;   /* 44 — el mínimo táctil, no una sugerencia */
  --sombra-tarjeta: 0 12px 34px rgba(23, 39, 43, .08);

  /* ───────────────────────────────────────────────────────────────────────────
     ALIAS HEREDADOS.
     El sitio tiene ~366 usos de los nombres viejos repartidos en esta hoja, en
     estilos inline del HTML y en plantillas que arma el JavaScript. Renombrarlos
     de una es un cambio mecánico grande y silencioso: si se escapa uno, no falla
     nada, solo queda un color viejo suelto que nadie ve hasta que un paciente lo ve.
     Así que los nombres viejos quedan y APUNTAN a los tokens de arriba. Ningún
     alias inventa un valor. Se migran de a poco, cuando se toque cada bloque.
     De paso resuelve lo que quedó anotado en PLANTILLA §8: --peach-200 guardaba
     un celeste y el nombre mentía. Ahora se ve a qué apunta.
     ─────────────────────────────────────────────────────────────────────────── */
  --bg:            var(--color-fondo);
  --surface:       var(--color-superficie);
  --text:          var(--color-tinta);
  --accent:        var(--color-petroleo-700);
  --sobre-accent:  #ffffff;
  --accent-claro:  var(--color-petroleo-claro);
  --accent-100:    var(--color-petroleo-050);
  --accent-200:    var(--color-petroleo-100);
  --accent-300:    var(--color-petroleo-600);
  --accent-400:    var(--color-petroleo-600);
  --accent-500:    var(--color-petroleo-600);
  --accent-700:    var(--color-petroleo-700);
  --accent-800:    var(--color-petroleo-800);
  --peach-200:     var(--color-petroleo-050);
  --mint:          var(--color-petroleo-050);
  --n-100:         var(--color-fondo);
  --n-200:         var(--color-inactivo-fondo);
  --n-300:         var(--color-borde-suave);
  --n-400:         var(--color-borde-control);
  --n-500:         var(--color-gris-claro);
  --n-600:         var(--color-texto);
  --n-700:         var(--color-texto);
  --n-800:         var(--color-texto);
  --divider:       rgba(23, 39, 43, .14);
  --rule:          var(--color-borde-suave);
  --radius:        var(--radio-control);
  --radius-lg:     var(--radio-tarjeta);
  --shadow-lg:     0 18px 44px rgba(23, 39, 43, .12);
  --shadow-card:   var(--sombra-tarjeta);
  --max:           74rem;

  /*
   * Las cuatro ilustraciones aprobadas. PNG de fallback primero: si el navegador
   * no entiende `image-set`, se queda con el `background: url(...png)` de cada
   * regla. El `background-image` que apunta a estos tokens lo pisa cuando sí.
   */
  --ilust-ondas: image-set(
    url("/img/ondas-topograficas.webp") type("image/webp"),
    url("/img/ondas-topograficas.png") type("image/png")
  );
  --ilust-sinapsis: image-set(
    url("/img/sinapsis-horizontal.webp") type("image/webp"),
    url("/img/sinapsis-horizontal.png") type("image/png")
  );
}

* , *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--fuente-interfaz); font-size: var(--texto-base); line-height: 1.58;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
  font-family: var(--fuente-editorial);
  font-weight: 600; line-height: 1.1; margin: 0 0 10px; text-wrap: balance;
}
h1 { font-size: var(--titulo-1); letter-spacing: -.025em; }
h2 { font-size: var(--titulo-2); letter-spacing: -.015em; }
h3 { font-size: var(--titulo-3); }
h4 { font-size: var(--texto-lg); font-weight: 700; }
p { margin: 0 0 12px; text-wrap: pretty; }
a { color: var(--accent-700); text-underline-offset: 3px; }
a:hover { color: var(--text); }
img { display: block; max-width: 100%; height: auto; }
:focus { outline: none; }
/* Naranja y no petróleo: el anillo tiene que despegarse de la interfaz, no fundirse
   con ella. 4.93:1 sobre blanco y 4.62:1 sobre el fondo de página. 3px, no 2. */
:focus-visible { outline: 3px solid var(--color-foco); outline-offset: 3px; }
::selection { background: var(--accent-200); }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }
.muted { color: var(--n-700); }
.kicker { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-700); margin: 0 0 20px; }
/* La ceja lleva una rayita adelante (<i>): ancla el bloque a la retícula sin dibujar
   una línea entera. Va en petróleo, que sobre el fondo de página da 7.51:1. */
.eyebrow { display: flex; align-items: center; gap: .7rem; margin: 0 0 .85rem;
  color: var(--accent); font-size: .78rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; }
.eyebrow i { flex: 0 0 auto; width: 2rem; height: 2px; background: currentColor; }
.hr { height: 2px; background: var(--divider); border: 0; margin: 0; }
.center-empty { padding: 40px 0; color: var(--n-700); }

/* botones */
.btn {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  font-family: inherit; font-weight: 700; font-size: inherit; line-height: 1.2;
  /* 44px de alto mínimo: es objetivo táctil, no estética. */
  min-height: var(--alto-control);
  padding: .65rem 1.125rem; border-radius: var(--radio-control); border: 2px solid transparent;
  background: transparent; color: var(--text); text-decoration: none; transition: background .15s, border-color .15s;
}
.btn-primary { background: var(--accent); color: var(--sobre-accent); -webkit-text-fill-color: var(--sobre-accent); }
.btn-primary { border-color: var(--accent); }
.btn-primary:hover { background: var(--color-petroleo-600); border-color: var(--color-petroleo-600); color: var(--sobre-accent); }
.btn-primary:active { background: var(--accent-700); }
.btn-secondary { background: var(--surface); color: var(--accent); border-color: var(--accent); }
.btn-secondary:hover { background: var(--accent-100); color: var(--accent); }
.btn-ghost { color: var(--accent-700); padding: 8px 10px; }
.btn-ghost:hover { background: var(--accent-100); }
.btn-dark { background: var(--text); color: #fff; }
.btn-dark:hover { background: var(--accent); color: #fff; }
.btn-sm { font-size: var(--texto-sm); padding: .5rem 1rem; }
/* Deshabilitado sin opacidad: bajar la opacidad arrastra el contraste del texto
   con él y deja de leerse. Se cambia el color, no la transparencia. */
.btn:disabled, .btn[aria-disabled="true"] {
  background: var(--color-inactivo-fondo); color: var(--color-texto);
  border-color: var(--color-borde-control); cursor: not-allowed;
}
/* Sin esto, `hidden` no oculta un botón: el display de arriba le gana al del navegador. */
.btn[hidden] { display: none; }
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; }

/* barra superior */
.topbar { position: sticky; top: 0; z-index: 70; background: rgba(246, 248, 245, .92);
  border-bottom: 1px solid rgba(89, 112, 117, .3); min-width: 0;
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.topbar-in { max-width: var(--max); width: 100%; min-height: 4.7rem; margin: 0 auto;
  padding: 14px 24px; display: flex; align-items: center; justify-content: space-between;
  gap: 2rem; min-width: 0; }
.brand { display: flex; flex-direction: column; line-height: 1.05; text-decoration: none; color: var(--text); min-width: 0; }
.brand b { font-family: var(--fuente-editorial); font-size: 1.07rem; font-weight: 600;
  letter-spacing: 0; text-transform: none; overflow-wrap: anywhere; }
.brand span { font-size: .74rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--color-texto); overflow-wrap: anywhere; }

/* El cuadrado con las iniciales, adelante de la marca. Se pinta desde CSS y no con una
   imagen: es texto, escala con el zoom y no suma un pedido más al servidor. */
.brand-marca { display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--text); min-width: 0; }
.brand-sello {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px; background: var(--accent);
  color: var(--sobre-accent); display: grid; place-items: center;
  font-size: 14px; font-weight: 600; letter-spacing: .01em;
}
.mainnav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; min-width: 0; max-width: 100%; }
[data-session-slot] { min-width: 0; flex-wrap: wrap; }
.mainnav a { min-height: 44px; display: inline-flex; align-items: center;
  font-weight: 600; font-size: .9rem; text-decoration: none; color: var(--text);
  padding: 6px 12px; border-bottom: 2px solid transparent; }
.mainnav a:hover { color: var(--accent-700); }
.mainnav a[aria-current="page"] { color: var(--accent-700); border-bottom-color: var(--accent); }
/* El CTA dentro de la barra: `.mainnav a` le gana en especificidad a `.btn-primary` y le
   dejaba el texto oscuro sobre el lavanda. Se veía bien solo por -webkit-text-fill-color,
   que no es estándar; esto lo resuelve con la propiedad de verdad. */
.mainnav a.btn-primary, .mainnav a.btn-primary:hover { color: var(--sobre-accent); border-bottom-color: transparent; }

/* grilla de celdas con reglas */
.cells { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--n-300); }
/* Con dos celdas se reparten en dos columnas en vez de dejar un hueco a la derecha. */
.cells:has(> :last-child:nth-child(2)) { grid-template-columns: repeat(2, 1fr); }
.cells > * { border-right: 1px solid var(--n-300); padding: 32px 24px; }
.cells > *:last-child { border-right: 0; }
.cells-tint { background: var(--accent-300); color: var(--sobre-accent); border-radius: var(--radius-lg); overflow: hidden; border-top: 0; }
.cells-peach { background: transparent; border-radius: 0; overflow: hidden; }
/* los bloques con fondo sangran hacia afuera para que su texto quede en la misma
   línea que los títulos y las reglas de la página */
@media (min-width: 1240px) {
  .wrap > .cells-tint, .wrap > .cells-peach { margin-left: -24px; margin-right: -24px; }
}
.stat { font-size: 40px; font-weight: 700; line-height: 1; margin: 0 0 8px; }
.stat-label { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--n-700); margin: 0; }
/* Sobre el acento, que ahora es oscuro, la etiqueta tiene que aclararse. Casi blanco y no
   un gris claro: con .78 de opacidad quedaba en 3.7:1 y no llegaba al mínimo de 4.5. */
.cells-tint .stat-label { color: rgba(255, 255, 255, .95); }

.split { display: grid; grid-template-columns: 0.4fr 0.6fr; border-bottom: 1px solid var(--n-300); }
.split > :last-child { border-left: 1px solid var(--n-300); padding: 48px 0 48px 48px; }
.split > :first-child { padding: 48px 40px 48px 0; }
.list-ruled { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 10px; }
.list-ruled li { border-top: 1px solid var(--divider); padding-top: 10px; }

/* bloque rosa a sangre */
.poster { background: var(--accent); color: var(--sobre-accent); }
.poster .wrap { padding: 80px 24px; }
.poster h2 { font-size: 48px; max-width: 22ch; margin-bottom: 24px; }

/* formularios */
.field { display: grid; gap: 6px; margin-bottom: 18px; }
.field label { font-size: 12px; letter-spacing: .04em; font-weight: 600; }
.input, select.input, textarea.input {
  /* 16px es el mínimo que evita que Safari haga zoom al tocar un campo. Antes era 14px acá y
     16px solo en el breakpoint de celular (max-width:640px) — un iPad nunca entraba ahí, así
     que el zoom le pasaba a Sofía en cualquier campo del panel. Ahora es siempre 16px. */
  font-family: inherit; font-size: var(--texto-base); color: var(--text); background: var(--surface);
  /* El contorno de un control pide 3:1 (WCAG 1.4.11). --color-borde-control da 5.25:1
     sobre blanco y 4.92:1 sobre el fondo de página, y va a 2px: con 1px el mismo color
     se lee menos aunque el número no cambie. */
  border: 2px solid var(--color-borde-control); border-radius: var(--radio-control);
  min-height: var(--alto-control); padding: .7rem .85rem; width: 100%; min-width: 0; max-width: 100%;
}
.input:focus-visible { border-color: var(--accent); }
.input::placeholder { color: var(--color-texto); opacity: 1; }
textarea.input { resize: vertical; min-height: 96px; }
/* entrevista: preguntas cortas de a varias por fila en vez de una por fila, para acortar
   un formulario que si no queda larguísimo de puro scroll. */
.campos-compactos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: 14px 18px; }

/* El Sí/No de la entrevista. `.seg` es inline-flex, pero adentro de un .field (que es grid)
   el ítem se estira a todo el ancho de la columna: los dos botones quedaban a la izquierda
   y sobraba media pastilla vacía al lado. Con justify-self abraza su contenido. El min-width
   es para que "Sí" y "No" midan lo mismo y la fila no baile. */
.seg[data-tipo="si_no"] { justify-self: start; }
.seg[data-tipo="si_no"] button { min-width: 62px; text-align: center; }
@media (pointer: coarse) {
  /* en el iPad estos botones son el modo principal de responder: 44px de alto mínimo */
  .seg[data-tipo="si_no"] button { padding: 12px 20px; min-width: 72px; }
}
.form-card { max-width: 460px; }
.form-narrow { max-width: 520px; }
.msg { border-radius: var(--radius); padding: 12px 16px; font-size: 14px; margin-bottom: 18px; border: 2px solid transparent; }
.msg-error { background: var(--accent-100); border-color: var(--accent-500); }
.msg-ok { background: var(--accent-200); border-color: var(--accent-700); }
.msg[hidden] { display: none; }
.input-error { border-color: var(--accent-700) !important; }
.field-msg { margin: 4px 0 0; font-size: 12px; color: var(--accent-700); }

/* tarjetas y tablas */
.card { border: 1px solid var(--color-borde-suave); border-radius: var(--radio-tarjeta); padding: var(--espacio-5); background: var(--surface); }
.card-tint { background: var(--accent-100); }
.grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th { text-align: left; font-size: var(--texto-sm); color: var(--text); background: var(--accent-200); padding: .9rem 1rem; border-bottom: 1px solid var(--color-borde-control); }
.table td { padding: 12px; border-bottom: 1px solid var(--divider); vertical-align: top; }

/* botoncito "×" para sacar un elemento suelto (ej: un plan de obra social) */
.btn-x {
  border: 0; background: none; cursor: pointer; font: inherit; color: inherit;
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 999px; line-height: 1; padding: 0;
}
.btn-x:hover { background: var(--accent-200); }

/*
 * Filas con varios campos de fecha/hora en tira (filtro de turnos, bloquear días u horas).
 * En pointer:coarse se apilan en una sola columna — ver la nota grande de abajo sobre por qué.
 */
.filtro-toolbar { display: flex; align-items: end; gap: 12px; flex-wrap: wrap; }

/* evolución nueva: fecha corta + título largo */
.grid-fecha-titulo { display: grid; grid-template-columns: 200px 1fr; gap: 16px; }

/*
 * Objetivos táctiles más grandes, SOLO cuando el dispositivo detecta un dedo y no un mouse
 * (pointer:coarse). Es lo que usa Sofía en el iPad: los botones chicos (confirmar, cancelar,
 * el "×" de sacar un plan) están pensados para apuntar con un mouse y cuestan de tocar bien.
 * Con este chequeo, quien entra con mouse o trackpad no ve ningún cambio.
 */
@media (pointer: coarse) {
  .btn-sm { padding: 11px 18px; }
  .btn-ghost { padding: 11px 14px; }
  .btn-x { width: 34px; height: 34px; font-size: 18px; }
  .table th, .table td { padding: 14px 12px; }
  .check input { width: 24px; height: 24px; }
  /*
   * En iOS, el control nativo de fecha/hora necesita más ancho del que ocupa a simple vista:
   * si no le sobra lugar, "pinta" por afuera de su propia caja y se ve encimado con el
   * elemento de al lado — aunque medido por el navegador (getBoundingClientRect) las cajas no
   * se solapen. No hay un mínimo de ancho que lo garantice para cualquier iPad, así que la
   * solución de fondo es no compartir la fila con nada más: una columna, un campo por línea.
   */
  .filtro-toolbar { flex-direction: column; align-items: stretch; }
  .filtro-toolbar .field, .filtro-toolbar > .btn { width: 100%; }
  /* Motivo (texto libre) sí aprovecha el ancho completo; fecha/hora no lo necesitan y
     estirados de punta a punta quedan feos. Esta regla es más específica y gana. */
  .filtro-toolbar .field:has(input[type="date"]), .filtro-toolbar .field:has(input[type="time"]) { width: auto; max-width: 220px; }

  /*
   * Mismo problema, versión grilla: cualquier campo de fecha/hora que comparta fila con otro
   * en un .duo/.trio (Nuevo paciente, Cargar turno) corre el mismo riesgo. En vez de ir
   * arreglando grilla por grilla, esta regla agarra CUALQUIER campo de fecha/hora en cualquier
   * grilla del sitio y le da la fila entera para él solo — :has() lo hace sin tener que tocar
   * el HTML de cada formulario. (Soporte de :has() en iOS desde 16.4, marzo 2023.)
   *
   * max-width: la fila entera evita el choque con el vecino, pero un campo que solo tiene que
   * mostrar "5/8/2026" no necesita ocupar todo el ancho de la tarjeta — queda estirado y feo.
   * Con el max-width, ocupa su fila propia pero del tamaño que le corresponde, pegado a la
   * izquierda (comportamiento por defecto de un grid item angosto).
   */
  .field:has(input[type="date"]), .field:has(input[type="time"]) { grid-column: 1 / -1; max-width: 220px; }

  /* acá las dos columnas son de ancho distinto (200px / 1fr): si solo se ensancha la fecha,
     el título le queda angosto de rebote. Se apilan los dos; el título sigue ocupando todo
     el ancho (le sirve, es texto largo) y la fecha queda angosta por la regla de arriba. */
  .grid-fecha-titulo { grid-template-columns: 1fr; }
}
/* La etiqueta lleva SIEMPRE texto: el color solo refuerza, nunca comunica solo. */
.tag { display: inline-flex; align-items: center; min-height: 2rem; width: fit-content;
  font-size: var(--texto-sm); font-weight: 700; line-height: 1.15; padding: .3rem .7rem;
  border: 1px solid currentColor; border-radius: var(--radio-pildora); background: var(--accent-200); }
.tag-ok { color: var(--color-exito); background: var(--color-exito-fondo); }
.tag-off { color: var(--color-texto); background: var(--color-inactivo-fondo); }
.tag-wait { color: var(--color-aviso); background: var(--color-aviso-fondo); }

/* selector de horarios */
.seg { display: inline-flex; border: 1px solid var(--n-300); border-radius: 3px; overflow: hidden; }
.seg button { font-family: inherit; font-weight: 600; font-size: 13px; padding: 10px 18px; border: 0; background: transparent; cursor: pointer; color: var(--text); -webkit-text-fill-color: var(--text); }
.seg button[aria-pressed="true"] { background: var(--accent); color: var(--sobre-accent); -webkit-text-fill-color: var(--sobre-accent); }
.days { display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px 10px; }
.day {
  flex: 0 0 auto; min-width: 92px; text-align: left; cursor: pointer; font-family: inherit;
  border: 1px solid var(--n-300); border-radius: var(--radius); background: #fff; padding: 12px;
  /* sin esto, iOS pinta de azul el texto de los botones */
  color: var(--text); -webkit-text-fill-color: var(--text);
}
.day b { display: block; font-size: 20px; }
.day span { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--n-700); }
.day[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--sobre-accent); }
/* La bajada del día tiene su propio color gris, que sobre el acento oscuro no se leía. */
.day[aria-pressed="true"] span { color: rgba(255, 255, 255, .95); }
.day:disabled { opacity: .35; cursor: not-allowed; }
.slots { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.slot {
  font-family: inherit; font-weight: 600; font-size: 14px; padding: 10px 16px;
  border-radius: 3px; border: 1px solid var(--n-300); background: #fff; cursor: pointer;
  color: var(--text); -webkit-text-fill-color: var(--text);
}
.slot[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--sobre-accent); }
/* El nombre de la sede al lado de la hora. Va por clase y no con un `style` en el JS:
   así puede aclararse cuando el horario queda elegido y el fondo pasa a ser oscuro. */
.slot-sede { font-weight: 400; font-size: 12px; color: var(--n-700); margin-left: 6px; }
.slot[aria-pressed="true"] .slot-sede { color: rgba(255, 255, 255, .95); }

/* chat */
.chat-launcher { position: fixed; right: 24px; bottom: 24px; z-index: 60; box-shadow: var(--shadow-lg); }
.chat-panel {
  position: fixed; right: 24px; bottom: 24px; z-index: 61; width: 380px; max-width: calc(100vw - 32px);
  height: min(560px, calc(100vh - 48px)); background: var(--bg); border: 2px solid var(--text);
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); display: none; flex-direction: column;
}
.chat-panel.open { display: flex; }
.chat-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--n-300); }
.chat-head b { font-size: 15px; }
.chat-head span { display: block; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-700); }
.chat-log { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.bubble { max-width: 88%; font-size: 14px; line-height: 1.5; padding: 11px 15px; white-space: pre-wrap; }
.bubble-bot { background: var(--surface); border-left: 2px solid var(--accent-500); border-radius: 4px 16px 16px 16px; }
.bubble-me { align-self: flex-end; background: var(--accent); color: var(--sobre-accent); border-radius: 16px 16px 4px 16px; }
.chat-form { border-top: 1px solid var(--n-300); padding: 12px; display: flex; gap: 8px; }
.chat-note { margin: 0; padding: 0 14px 12px; font-size: 11px; color: var(--n-700); }
.chat-icon { width: 34px; height: 34px; padding: 0; justify-content: center; border-radius: 999px; border: 1px solid var(--n-300); }

/* evoluciones: tarjetas grandes, apiladas, fecha al costado del título */
.note-card {
  background: #fff; border: 1px solid var(--n-300); border-radius: 24px; padding: 28px 30px;
}
.note-new { background: var(--accent-100); }
.note-head { display: grid; grid-template-columns: auto 1fr auto; gap: 22px; align-items: start; margin-bottom: 16px; }
.note-date {
  display: flex; flex-direction: column; min-width: 128px; padding-right: 22px;
  border-right: 1px solid var(--n-300);
}
.note-date b { font-size: 17px; line-height: 1.25; text-transform: capitalize; }
.note-date span { font-size: 12px; letter-spacing: .1em; color: var(--n-700); margin-top: 2px; }
.note-title {
  margin: 0; font-size: 25px; line-height: 1.15; letter-spacing: -.02em;
  background: var(--accent-200); border-radius: 12px; padding: 6px 14px; justify-self: start;
}
.note-body { margin: 0; font-size: 16px; line-height: 1.65; }
.note-body p { margin: 0 0 10px; }
.note-body p:last-child { margin-bottom: 0; }
.note-body ul, .note-body ol { margin: 0 0 10px; padding-left: 22px; }
.note-body li { margin-bottom: 4px; }
.note-body .txt-sm { font-size: 13px; }
.note-body .txt-lg { font-size: 20px; font-weight: 800; letter-spacing: -.01em; }
.note-body.plano { white-space: pre-wrap; }
.note-body h2, .rte-area h2 { font-size: 21px; margin: 18px 0 8px; }
.note-body h3, .rte-area h3 { font-size: 17px; margin: 14px 0 6px; }
.note-body h2:first-child, .rte-area h2:first-child,
.note-body h3:first-child, .rte-area h3:first-child { margin-top: 0; }
.note-body a, .rte-area a { color: var(--accent-700); }
.note-body .color-vino, .rte-area .color-vino { color: #a94447; }
.note-body .color-verde, .rte-area .color-verde { color: #2f6f4f; }
.note-body .color-azul, .rte-area .color-azul { color: #2f5d8a; }
.note-body .color-gris, .rte-area .color-gris { color: #5f6b7a; }
.note-body .font-poppins, .rte-area .font-poppins { font-family: Poppins, sans-serif; }
.note-body .font-inter, .rte-area .font-inter { font-family: Inter, sans-serif; }
.note-body .font-fraunces, .rte-area .font-fraunces { font-family: Fraunces, serif; }
.note-turno {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 14px;
  font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  background: var(--n-200); border-radius: 999px; padding: 5px 12px; color: var(--n-700);
}

/* Resumen al pie de la evolución. Se distingue del cuerpo a propósito: lo escribió el
   modelo, no Sofía, y en una historia clínica esa diferencia tiene que verse. */
.note-resumen {
  margin-top: 16px; padding: 12px 14px;
  border-left: 2px solid var(--accent-200); background: var(--n-100);
  border-radius: 0 12px 12px 0;
  font-size: 14px; line-height: 1.55; color: var(--n-800);
}
.note-resumen-tag {
  display: block; margin-bottom: 4px;
  font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--n-700);
}
.note-acciones { display: flex; gap: 4px; }
.note-del, .note-edit { opacity: 0; transition: opacity .15s; }
.note-card:hover .note-del, .note-card:hover .note-edit,
.note-del:focus-visible, .note-edit:focus-visible { opacity: 1; }

/* editor de texto */
.rte {
  border: 1px solid var(--n-300); border-radius: var(--radius);
  background: #fff; overflow: hidden; min-height: 260px;
  display: flex; flex-direction: column;
}
.rte-bar {
  display: flex; align-items: center; gap: 2px; flex-wrap: wrap;
  padding: 8px 10px; border-bottom: 1px solid var(--n-300); background: #f2f7fd;
}
.rte-btn {
  font-family: inherit; font-size: 14px; line-height: 1; color: var(--text); -webkit-text-fill-color: var(--text);
  min-width: 32px; height: 30px; padding: 0 9px; border: 0; border-radius: 8px;
  background: transparent; cursor: pointer;
}
.rte-btn:hover { background: var(--accent-200); }
.rte-btn:active { background: var(--accent-300); }
.rte-sep { width: 2px; height: 20px; background: var(--divider); margin: 0 6px; flex: 0 0 auto; }
.rte-area {
  flex: 1; min-height: 200px; padding: 16px 18px;
  font-family: inherit; font-size: 16px; line-height: 1.65; color: var(--text);
  outline: none; overflow-y: auto;
}
.rte:focus-within { border-color: var(--accent-500); }
.rte-area p { margin: 0 0 10px; }
.rte-area ul, .rte-area ol { margin: 0 0 10px; padding-left: 22px; }
.rte-area .txt-sm { font-size: 13px; }
.rte-area .txt-lg { font-size: 20px; font-weight: 800; }
@media (max-width: 700px) {
  .note-card { padding: 22px; border-radius: 18px; }
  .note-head { grid-template-columns: 1fr auto; gap: 12px; }
  .note-date { flex-direction: row; gap: 8px; border-right: 0; padding-right: 0; min-width: 0; }
  .note-title { font-size: 21px; grid-column: 1 / -1; }
}

/* pestañas del panel (Agenda / Pacientes / Cuenta) */
[data-tab-panel] { animation: none; }
[data-tab-panel][hidden] { display: none; }

/* ficha del paciente: contenido a la izquierda, materiales para mandar a la derecha */
/* SIN align-items:start a propósito: con eso, la caja del panel de materiales queda tan alta
   como su propio contenido (corto) en vez de tan alta como la fila entera (la ficha, larga).
   El "sticky" de abajo solo puede pegarse dentro de su propia caja: con align-items:start se
   quedaba pegado apenas los primeros ~700px de scroll y después se soltaba y desaparecía —
   es lo que Sofía describía como "se pierde" en su iPad. Sin esa línea, la caja se estira
   tanto como la ficha y el panel queda pegado durante todo el scroll. */
.ficha-grid { display: grid; grid-template-columns: 1fr 300px; gap: 20px; }
.ficha-aside {
  position: sticky; top: 96px; border: 1px solid var(--n-300); border-radius: var(--radius-lg);
  background: var(--accent-100); padding: 20px; max-height: calc(100vh - 120px); overflow-y: auto;
}
.ficha-aside h3 { font-size: 16px; margin-bottom: 4px; }
@media (max-width: 1100px) {
  .ficha-grid { grid-template-columns: 1fr; }
  .ficha-aside { position: static; max-height: none; }
}

/* ─── Tarjetas de material ─────────────────────────────────────────────────
   Se usan en dos lados: en la ficha del paciente son elegibles (envuelven un
   checkbox) y en la biblioteca de la pestaña Cuenta son solo informativas. */
.material-cards { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }

.material-card {
  display: flex; align-items: flex-start; gap: 10px;
  border: 1px solid var(--n-300); border-radius: var(--radius-lg);
  background: #fff; padding: 12px 14px;
  cursor: pointer; transition: border-color .12s, background .12s;
}
.material-card:hover { border-color: var(--n-700); }
.material-card input { flex: none; margin-top: 3px; width: 17px; height: 17px; accent-color: var(--accent-500); cursor: pointer; }
/* Elegida: se nota de un vistazo cuáles van a salir, sin tener que mirar cada casilla. */
.material-card:has(input:checked) { border-color: var(--text); background: var(--accent-100); }

.material-card-in { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.material-card-in b { font-size: 14px; line-height: 1.3; }
.material-card-desc { font-size: 12.5px; line-height: 1.45; color: var(--n-800); }
.material-card-pie { font-size: 11px; letter-spacing: .04em; color: var(--n-700); }

/* En la biblioteca no hay checkbox: la tarjeta no se elige, solo se mira o se borra. */
.material-card-lib { cursor: default; align-items: center; }
.material-card-lib:hover { border-color: var(--divider); }

.material-enviar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--n-300);
}

/* pie */
.footer { background: var(--surface); border-top: 1px solid var(--rule); margin-top: 72px; }
.footer .wrap { padding: 30px 24px; display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; font-size: 14px; color: var(--n-700); }

@media (max-width: 900px) {
  .cells { grid-template-columns: 1fr; }
  .cells > * { border-right: 0; border-bottom: 1px solid var(--n-300); }
  .cells > *:last-child { border-bottom: 0; }
  .split { grid-template-columns: 1fr; }
  .split > :last-child { border-left: 0; padding: 0 0 40px; }
  .split > :first-child { padding: 40px 0 24px; }
  /* En el pedido de turno, apilado, primero va la pregunta y después el resumen:
     arrancar con una tarjeta todavía vacía obliga a scrollear sin haber elegido nada. */
  .split:has([data-form-turno]) > :first-child { order: 2; padding: 8px 0 24px; }
  .poster h2 { font-size: 34px; }
}

/* grillas de a dos y de a tres que se apilan en el teléfono */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

/* encuesta y testimonios */
.nps { display: flex; gap: 6px; flex-wrap: wrap; }
.nps-btn {
  font-family: inherit; font-weight: 600; font-size: 15px; cursor: pointer;
  width: 46px; height: 46px; border: 1px solid var(--n-300); border-radius: var(--radius);
  background: #fff; color: var(--text); -webkit-text-fill-color: var(--text);
}
.nps-btn:hover { border-color: var(--text); }
.nps-btn[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--sobre-accent); }
.nps-guia {
  display: flex; justify-content: space-between; gap: 16px; margin-top: 8px;
  font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--n-700);
}
.check { display: flex; align-items: center; gap: 10px; font-size: 14px; cursor: pointer; }
.check input { width: 20px; height: 20px; accent-color: var(--accent-500); flex: 0 0 auto; }

.opinion { border-top: 1px solid var(--n-300); padding: 28px 0 0; }
.opinion p { font-size: 18px; line-height: 1.55; margin: 0 0 14px; text-wrap: pretty; }
.opinion cite {
  font-style: normal; font-size: 12px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--n-700);
}
.opiniones { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 32px; }

/* retrato */
.retrato {
  border: 1px solid var(--n-300); border-radius: var(--radius-lg);
  overflow: hidden; background: var(--n-200);
}
.retrato img { display: block; width: 100%; height: auto; }

/* Encuesta de opinión. Encapsulado: `.paso` suelto también vive en el recorrido
   editorial de consultas y sobre mí, y las dos reglas no pueden compartir
   selector global — la segunda pisaba a la primera. */
form[data-form-opinion] { counter-reset: paso; }
form[data-form-opinion] .paso {
  display: grid; grid-template-columns: 32px 1fr; gap: 18px; align-items: start;
  padding: 28px 0; border-top: 1px solid var(--n-300);
}
form[data-form-opinion] .paso:first-child { border-top: 0; padding-top: 0; }
form[data-form-opinion] .paso-n {
  width: 32px; height: 32px; border-radius: 999px; background: var(--accent); color: var(--sobre-accent);
  display: grid; place-items: center; font-weight: 600; font-size: 15px; line-height: 1;
}
form[data-form-opinion] .paso-n::before { counter-increment: paso; content: counter(paso); }
form[data-form-opinion] .paso h3 { font-size: 19px; margin: 0 0 4px; }
form[data-form-opinion] .paso h3 label { cursor: pointer; }
form[data-form-opinion] .paso .hint { font-size: 13px; color: var(--n-700); margin: 0 0 16px; }
form[data-form-opinion] .paso .field:last-child { margin-bottom: 0; }
.paso-cierre {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding-top: 28px; border-top: 1px solid var(--n-300);
}

/* portada "Agenda viva" ------------------------------------------------------
   El hero muestra cupo real: días con lugar y horarios libres, sin salir de la
   portada. Elegir uno lleva a /turnos.html con la fecha y la hora ya resueltas. */

.hero { display: grid; grid-template-columns: 1fr 430px; gap: 52px; align-items: start; padding: 60px 0 54px; }
.hero-titulo { font-size: clamp(38px, 6.2vw, 66px); line-height: 1.02; letter-spacing: -.035em; margin: 0 0 20px; }
.hero-bajada { font-size: 18px; line-height: 1.6; color: var(--n-800); max-width: 440px; margin: 0 0 30px; }

/* Eyebrow con el punto que late */
/* --accent-700 y no --accent: el lavanda del diseño da 4.41:1 sobre el fondo de página,
   apenas por debajo del mínimo de 4.5. El punto sí queda del color pleno: es un adorno. */
.hero-vivo { display: flex; align-items: center; gap: 9px; margin: 0 0 22px; font-size: 13px; font-weight: 600; color: var(--accent-700); }

.pasos-reserva { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.pasos-reserva li { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 600; color: var(--n-800); }
.pasos-reserva b {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 999px; background: var(--accent-200);
  color: var(--accent-700); display: grid; place-items: center; font-size: 12px; font-weight: 600;
}

/* Cinta de obras sociales */
.cinta { background: var(--text); color: #fff; padding: 22px 0; overflow: hidden; }
.cinta-label { font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--n-500); margin: 0 0 14px; }
.cinta-pistas { display: flex; width: max-content; animation: correr 26s linear infinite; }
.cinta-pista { display: flex; gap: 44px; padding-right: 44px; font-size: 20px; font-weight: 600; }
/* Acá el fondo es oscuro: va el acento claro, no el de siempre. */
.cinta-pista i { font-style: normal; color: var(--accent-claro); }
@keyframes correr { to { transform: translateX(-50%); } }

/* Áreas */
.areas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding: 60px 0; }
.area {
  background: var(--surface); border-radius: 16px; padding: 30px; display: grid; gap: 12px;
  align-content: start; text-decoration: none; color: var(--text);
  transition: transform .3s cubic-bezier(.2, .7, .2, 1), box-shadow .3s;
}
.area:hover { transform: translateY(-6px); box-shadow: 0 20px 40px -20px rgba(38, 35, 54, .32); color: var(--text); }
.area-muestra { width: 38px; height: 38px; border-radius: 11px; }
.area h3 { font-size: 21px; line-height: 1.2; letter-spacing: -.01em; margin: 0; }
.area p { font-size: 15px; line-height: 1.6; color: var(--n-800); margin: 0; }

@media (max-width: 900px) {
  /* La tarjeta va primero: el motivo de entrar a la portada es sacar turno. */
  .hero { grid-template-columns: 1fr; gap: 34px; padding: 34px 0 40px; }
  .hero > .agenda { order: -1; }
  .areas { padding: 40px 0; }
}
@media (max-width: 760px) { .areas { grid-template-columns: 1fr; } }


/* pedir turno: una pregunta por pantalla ------------------------------------- */
.wz-top { margin-bottom: 28px; }
.wz-pistas { display: flex; gap: 8px; list-style: none; margin: 0 0 10px; padding: 0; }
.wz-pista { flex: 1; min-width: 0; }
.wz-pista span {
  display: block; height: 6px; border-radius: 999px; background: var(--n-300);
  transition: background .45s cubic-bezier(.22, .61, .36, 1);
}
.wz-pista.hecha span { background: var(--accent-500); }
.wz-pista.activa span { background: var(--accent); }
.wz-pista i {
  /* --n-600, no --n-500: este último quedó pensado para ir sobre la cinta oscura de la
     portada y sobre fondo claro no llega al contraste mínimo. */
  display: block; margin-top: 7px; font-style: normal; font-size: 11px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--n-600);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wz-pista.activa i, .wz-pista.hecha i { color: var(--n-800); }
.wz-cuenta { margin: 0; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--n-600); }
.wz-cuenta b { color: var(--text); }

/* Alto mínimo para que la tarjeta de resumen y el pie no salten al cambiar de paso. */
.wz-marco { min-height: 330px; }
.wz-paso:focus { outline: 0; }
.wz-paso[hidden] { display: none; }
.wz-paso h3 { font-size: 23px; margin: 0 0 4px; letter-spacing: -.01em; }
.wz-paso .hint { font-size: 13px; color: var(--n-700); margin: 0 0 20px; }
.wz-nav {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--n-300);
}
.wz-nav .muted { flex: 1 1 200px; }

.wz-precio {
  margin: 22px 0 0; padding: 14px 18px; border-radius: var(--radius-lg);
  background: var(--accent-100); border: 2px solid var(--accent-200);
  font-size: 15px; line-height: 1.5;
}
.wz-precio[hidden] { display: none; }
.wz-precio b { font-size: 20px; font-weight: 600; letter-spacing: -.01em; }
.wz-precio span { display: block; margin-top: 5px; font-size: 13px; color: var(--n-700); }

/* Tarjetas de opción: tocar toda la tarjeta, no un radio chiquito. */
.opciones { display: grid; gap: 12px; }
.opciones-2 { grid-template-columns: 1fr 1fr; }
.opcion {
  font-family: inherit; text-align: left; cursor: pointer; color: var(--text);
  -webkit-text-fill-color: var(--text);
  display: grid; gap: 3px; padding: 18px; background: #fff;
  border: 1px solid var(--n-300); border-radius: var(--radius-lg);
  transition: transform .18s cubic-bezier(.22, .61, .36, 1), border-color .18s, background .18s;
}
.opcion b { font-size: 16px; font-weight: 600; }
.opcion span { font-size: 13px; color: var(--n-700); }
.opcion:hover { border-color: var(--text); transform: translateY(-2px); }
.opcion[aria-pressed="true"] { background: var(--accent-100); border-color: var(--text); }
.opcion-ico {
  width: 26px; height: 26px; margin-bottom: 6px; fill: none;
  stroke: var(--text); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

.resumen { position: sticky; top: 96px; }
.resumen-fila {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 11px 0; border-top: 1px solid var(--divider); font-size: 14px; color: var(--n-800);
}
.resumen-fila:first-of-type { border-top: 0; padding-top: 0; }
.resumen-fila b { font-weight: 600; color: var(--text); text-align: right; }

@media (max-width: 900px) {
  .resumen { position: static; }
  form[data-form-opinion] .paso { grid-template-columns: 28px 1fr; gap: 14px; }
  form[data-form-opinion] .paso-n { width: 28px; height: 28px; font-size: 13px; }
  .wz-marco { min-height: 300px; }
}

@media (max-width: 560px) {
  .opciones-2 { grid-template-columns: 1fr; }
  .wz-paso h3 { font-size: 20px; }
  /* Los nombres de los pasos no entran en un teléfono: queda la barra de avance sola. */
  .wz-pista i { display: none; }
  .wz-nav .btn { flex: 1 1 auto; justify-content: center; }
}

/* movimiento */
@media (prefers-reduced-motion: no-preference) {
  [data-reveal] { opacity: 0; transform: translateY(18px); }
  [data-reveal].vino {
    opacity: 1; transform: none;
    transition: opacity .65s cubic-bezier(.22, .61, .36, 1) var(--d, 0ms),
                transform .65s cubic-bezier(.22, .61, .36, 1) var(--d, 0ms);
  }

  .topbar { transition: box-shadow .3s ease; }
  .topbar.pegada { box-shadow: 0 8px 22px rgba(38, 35, 54, .10); }

  /* Portada: entradas de la columna del hero, de las fichas de día y de los horarios.
     `rise` es la misma curva en los tres, con distinta duración y escalonado. */
  @keyframes rise { from { opacity: 0; transform: translateY(22px); } }
  .hero-texto { animation: rise .7s cubic-bezier(.2, .7, .2, 1) both; }
  /* Los horarios de la semana entran escalonados por columna, no de a uno: con 35
     botones, animarlos uno por uno se siente lento en vez de vivo. */
  .dia-col { animation: rise .5s ease-out both; }
  .dia-col:nth-child(2) { animation-delay: 60ms; }
  .dia-col:nth-child(3) { animation-delay: 120ms; }
  .dia-col:nth-child(4) { animation-delay: 180ms; }
  .dia-col:nth-child(5) { animation-delay: 240ms; }
  @keyframes latido { 50% { opacity: .35; transform: scale(.7); } }

  /* Pasos del turno: el que sale se va para el lado de la lectura y el que entra
     llega del lado contrario, así se entiende que se avanza o se vuelve.

     La entrada va por animación y no por una clase con `opacity: 0` que después hay que
     sacar: si la pestaña está en segundo plano el navegador congela transiciones, y con
     el otro método el paso se quedaba invisible. Una animación que no llega a correr
     deja el elemento en su estado normal, que es justo lo que queremos. */
  .wz-paso {
    transition: opacity .18s ease, transform .18s cubic-bezier(.22, .61, .36, 1);
  }
  .wz-paso.se-va-izq { opacity: 0; transform: translateX(-22px); }
  .wz-paso.se-va-der { opacity: 0; transform: translateX(22px); }
  .wz-paso.viene-der { animation: entra-der .24s cubic-bezier(.22, .61, .36, 1); }
  .wz-paso.viene-izq { animation: entra-izq .24s cubic-bezier(.22, .61, .36, 1); }
  @keyframes entra-der { from { opacity: 0; transform: translateX(22px); } }
  @keyframes entra-izq { from { opacity: 0; transform: translateX(-22px); } }

  /* Los días y los horarios entran en cascada al aparecer la lista. */
  .day, .slot { animation: sube-corto .4s cubic-bezier(.22, .61, .36, 1) both; animation-delay: var(--d, 0ms); }
  @keyframes sube-corto { from { opacity: 0; transform: translateY(10px); } }

  /* El dato que acaba de cambiar en el resumen se destaca un instante. */
  .resumen-fila b.cambio { border-radius: 4px; animation: destello .9s ease; }
  @keyframes destello {
    0% { background: var(--accent); box-shadow: 0 0 0 4px var(--accent); }
    100% { background: transparent; box-shadow: 0 0 0 4px transparent; }
  }

  .btn { transition: background .18s, border-color .18s, color .18s, transform .18s cubic-bezier(.22, .61, .36, 1); }
  .btn:hover { transform: translateY(-2px); }
  .btn:active { transform: translateY(0); }

  .mainnav a { position: relative; }
  .mainnav a::after {
    content: ''; position: absolute; left: 12px; right: 12px; bottom: 0; height: 2px;
    background: var(--accent); transform: scaleX(0); transform-origin: left;
    transition: transform .28s cubic-bezier(.22, .61, .36, 1);
  }
  .mainnav a:hover::after, .mainnav a[aria-current="page"]::after { transform: scaleX(1); }

  .cells > * { transition: background .35s ease; }
  .cells:not(.cells-tint):not(.cells-peach) > *:hover { background: var(--accent-100); }

  .card { transition: border-color .25s, transform .25s cubic-bezier(.22, .61, .36, 1); }
  .grid-cards > .card:hover { transform: translateY(-3px); border-color: var(--accent-500); }

  .day, .slot, .seg button { transition: background .18s, border-color .18s, transform .12s; }
  .day:hover:not(:disabled), .slot:hover:not(:disabled) { border-color: var(--text); }
  .day:active:not(:disabled), .slot:active:not(:disabled) { transform: scale(.96); }

  .chat-panel.open { animation: entrar-chat .3s cubic-bezier(.22, .61, .36, 1); }
  .chat-launcher { transition: transform .22s cubic-bezier(.22, .61, .36, 1), background .18s; }
  .chat-launcher:hover { transform: translateY(-3px) scale(1.03); }
  .bubble { animation: entrar-burbuja .28s cubic-bezier(.22, .61, .36, 1); }

  @keyframes entrar-chat { from { opacity: 0; transform: translateY(16px) scale(.98); } }
  @keyframes entrar-burbuja { from { opacity: 0; transform: translateY(6px); } }
}

/* mobile */
/* nada empuja el ancho de la página: por defecto una celda de grid o de flex
   no se encoge por debajo de su contenido, y el calendario de días la estiraba */
form[data-form-opinion] .paso > div, .split > *, .cells > *, .duo > *, .trio > *,
.resumen, .form-card, .grid-cards > * { min-width: 0; }
.days, .slots { max-width: 100%; }

@media (max-width: 900px) {
  .split-plain { grid-template-columns: 1fr !important; gap: 28px !important; }
}

@media (max-width: 700px) {
  .duo, .trio { grid-template-columns: 1fr; }
  .topbar-in { flex-direction: column; align-items: flex-start; gap: .6rem; }
  .mainnav { width: 100%; justify-content: space-between; gap: .4rem; }
  .mainnav a:not(.btn) { font-size: .78rem; }
}

@media (max-width: 640px) {
  .wrap { padding: 0 18px; }

  /* la barra se lleva media pantalla si se apila: una sola tira que se desliza */
  .topbar-in { padding: 10px 18px; gap: .6rem; }
  .brand b { font-size: 1.07rem; }
  .brand span { font-size: .74rem; letter-spacing: .06em; }
  .mainnav {
    gap: 0; margin-left: -9px; width: 100%;
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    max-width: 100%; min-width: 0;
  }
  .mainnav::-webkit-scrollbar { display: none; }
  .mainnav a { font-size: 13px; padding: 7px 9px; white-space: nowrap; }
  [data-session-slot] { flex: 0 0 auto; }

  .btn { padding: 13px 20px; }
  .btn-sm { padding: 10px 16px; }

  .stat { font-size: 32px; }
  .cells > * { padding: 26px 18px; }
  .poster .wrap { padding: 56px 18px; }
  .card, .note-card { padding: 20px; }

  form[data-form-opinion] .paso { padding: 22px 0; }
  .nps-btn { width: 40px; height: 40px; font-size: 14px; }
  .opiniones { gap: 20px; }
  .seg { display: flex; width: 100%; }
  .seg button { flex: 1; padding: 11px 8px; font-size: 12px; }
  .day { min-width: 84px; }
  .resumen-total b { font-size: 24px; }
  .slots { gap: 6px; }
  .slot { padding: 11px 14px; }

  .footer { margin-top: 48px; }
  .footer .wrap { flex-direction: column; gap: 10px; padding: 24px 18px; }

  .chat-launcher { right: 16px; bottom: 16px; }
  .chat-panel {
    right: 8px; bottom: 8px; width: calc(100vw - 16px);
    height: min(76vh, calc(100vh - 16px));
  }
  .bubble { max-width: 92%; }
}

/* ─── Práctica en casa ──────────────────────────────────────────────────────
   Del lado de Sofía: una tira de 14 cuadraditos por ejercicio, uno por día, lleno si
   ese día registró algo. Se lee de un vistazo si practicó toda la semana o solo la
   víspera de venir, que es una diferencia clínica real. */
.tira-dias { display: flex; gap: 3px; margin-top: 12px; flex-wrap: wrap; }
.dia-cuadro {
  width: 30px; height: 26px; border-radius: 6px;
  border: 1px solid var(--n-300); background: var(--n-100);
  display: grid; place-items: center;
  font-size: 10px; font-weight: 600; color: var(--n-700);
  font-variant-numeric: tabular-nums;
}
.dia-cuadro.hecho { background: var(--accent); border-color: var(--accent); color: var(--sobre-accent); }

/* Del lado del paciente: la tarjeta de cada ejercicio. */
.practica-consigna { font-size: 15px; line-height: 1.55; color: var(--n-800); }
.practica-consigna p { margin: 0 0 8px; }
.practica-consigna p:last-child { margin-bottom: 0; }
.practica-indicacion {
  font-size: 13.5px; margin: 10px 0 0; padding: 8px 12px;
  background: var(--accent-100); border-left: 2px solid var(--accent-300);
  border-radius: 0 8px 8px 0; color: var(--n-800);
}
.practica-control { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.practica-comentario { margin-top: 12px; font-size: 14px; }
.practica-hecha { border-color: var(--accent-500); background: var(--accent-100); }
/* El aro: guía de ritmo y cronómetro. Un círculo de fondo y otro encima al que se le mueve
   el stroke-dashoffset desde JS. Gira -90° para que empiece a llenarse desde arriba. */
.aro-caja { position: relative; width: 104px; height: 104px; flex: 0 0 auto; }
.aro { width: 104px; height: 104px; transform: rotate(-90deg); }
.aro circle { fill: none; stroke-width: 9; stroke-linecap: round; }
.aro-fondo { stroke: var(--n-200); }
.aro-linea { stroke: var(--accent-300); transition: stroke-dashoffset .1s linear, stroke .3s; }
.aro-linea.activo { stroke: var(--accent-500); }
.aro-linea.record { stroke: var(--accent-700); }
.aro-centro {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 17px; font-weight: 600; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; text-align: center; padding: 0 14px; line-height: 1.15;
}
.crono-lado { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }

/* Ejemplo que subió Sofía: su propia foto haciendo el ejercicio le gana a cualquier dibujo. */
.practica-ejemplo { margin: 12px 0 0; }
.practica-ejemplo img {
  width: 100%; max-width: 320px; border-radius: var(--radius);
  border: 1px solid var(--n-300);
}
.practica-ejemplo figcaption { font-size: 12px; color: var(--n-700); margin-top: 6px; }

/* Puntitos para contar repeticiones: en el celular tocar gana a tipear un número. */
.pips { display: flex; gap: 7px; flex-wrap: wrap; }
.pip {
  width: 30px; height: 30px; border-radius: 999px; cursor: pointer; padding: 0;
  border: 1px solid var(--n-300); background: #fff; transition: background .15s, transform .12s;
}
.pip:hover { border-color: var(--text); }
.pip.lleno { background: var(--accent); border-color: var(--accent); }
.pip:active { transform: scale(.9); }

/* Cómo viene la marca en los últimos días. */
.chispa-caja { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.chispa { width: 110px; height: 26px; overflow: visible; flex: 0 0 auto; }
.chispa path { fill: none; stroke: var(--accent-500); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chispa circle { fill: var(--accent-700); }

.escala { display: inline-flex; gap: 6px; }
.escala-btn {
  font-family: inherit; font-weight: 600; font-size: 15px; cursor: pointer;
  width: 44px; height: 44px; border: 1px solid var(--n-300); border-radius: var(--radius);
  background: #fff; color: var(--text); -webkit-text-fill-color: var(--text);
  transition: background .15s, border-color .15s;
}
.escala-btn:hover { border-color: var(--text); }
/* Del más pálido al más lleno: la escala se lee sin tener que procesar el número. Sin caritas,
   que con un adulto en rehabilitación post-ACV quedan condescendientes. */
.escala-btn.n1[aria-pressed="true"] { background: var(--n-200); border-color: var(--text); }
.escala-btn.n2[aria-pressed="true"] { background: var(--peach-200); border-color: var(--text); }
.escala-btn.n3[aria-pressed="true"] { background: var(--accent-200); border-color: var(--text); }
.escala-btn.n4[aria-pressed="true"] { background: var(--accent-300); border-color: var(--accent); color: var(--sobre-accent); }
.escala-btn.n5[aria-pressed="true"] { background: var(--accent-500); border-color: var(--text); }

@media (pointer: coarse) {
  .pip { width: 38px; height: 38px; }
}

/* El aro es información, no adorno: sigue moviéndose. Lo que se apaga es el suavizado, que
   con reduced-motion es justamente lo que molesta. */
@media (prefers-reduced-motion: reduce) {
  .aro-linea { transition: none; }
  .pip, .escala-btn { transition: none; }
  /* En la portada se apagan la cinta, el punto que late y el esqueleto de carga.
     Las entradas ya no existen acá: viven dentro del @media no-preference. */
  .cinta-pistas, .cerebro { animation: none; }
}

/* ─── Obras sociales ────────────────────────────────────────────────────────
   La tarjeta está pensada para el caso SIN logo: el nombre en tipografía se ve
   bien solo. El logo, cuando existe, reemplaza al texto. Alto fijo para que la
   grilla no baile según el tamaño de cada archivo. */
.os-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.os-card {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 78px; padding: 14px 16px;
  border: 1px solid var(--n-300); border-radius: var(--radius);
  background: var(--n-100);
  font-weight: 700; font-size: 13px; line-height: 1.3; color: var(--n-800);
}
.os-logo { max-width: 100%; max-height: 46px; width: auto; height: auto; object-fit: contain; }

/* Motivos de consulta: una lista numerada con reglas, no tarjetas de colores.
   La numeración sale de CSS (counter), así el HTML no lleva números escritos a mano
   que después haya que renumerar cuando se agrega o saca un motivo. */
.motivos { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--color-tinta); counter-reset: motivo; }
.motivos li {
  counter-increment: motivo;
  display: grid; grid-template-columns: 3rem minmax(11rem, .75fr) minmax(0, 1.25fr);
  gap: 1.5rem; padding: 1.6rem 0; border-bottom: 1px solid var(--color-borde-control);
  align-items: baseline;
}
.motivos li::before {
  content: "0" counter(motivo);
  color: var(--color-petroleo-700); font-size: .72rem; font-weight: 800; letter-spacing: .12em;
}
.motivos h3 { margin: 0; font-family: var(--fuente-interfaz); font-size: 1.1rem; font-weight: 700; }
.motivos h3 a { color: var(--text); text-decoration-color: var(--color-petroleo-600); }
.motivos h3 a:hover { border-bottom-color: var(--accent); color: var(--accent); }
.motivos p { margin: 0; color: var(--color-texto); font-size: .9rem; }

/* Enlace de texto en vez de botón: no todo lo que lleva a otra página tiene que gritar. */
.enlace-serio {
  font-weight: 600; color: var(--accent); text-decoration: none;
  border-bottom: 1px solid var(--accent-200); padding-bottom: 2px;
}
.enlace-serio:hover { border-bottom-color: var(--accent); }

/* ─────────────────────────────────────────────────────────────────────────────
   PORTADA (31/8/2026) — sistema visual v1.0

   Reemplaza al hero grande con la agenda debajo. Ahora la agenda ES la primera
   pantalla: el sitio existe para que alguien saque un turno sin llamar por
   teléfono, así que eso es lo primero que se ve. El cerebro cartográfico
   acompaña desde una columna angosta, completo y chico, y no vuelve a ocupar
   una pantalla entera.

   Todas las reglas de acá abajo son de la portada. Ninguna redefine `.slot`,
   que también vive en /turnos.html — la versión anterior de este bloque lo
   redefinía y le pisaba los estilos a esa página desde el final del archivo.
   ──────────────────────────────────────────────────────────────────────────── */

/* La agenda y su textura. El PNG tiene dibujo hasta el borde, así que va
   sobredimensionado, corrido y con una máscara suave: nunca se ve el borde
   rectangular del archivo ni se corta contra el final de la sección. */
.agenda { position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(2.5rem, 4vw, 4rem) 0 clamp(4rem, 8vw, 7rem); }
.agenda::before {
  content: ""; position: absolute; z-index: -2; top: -8rem; right: -18rem;
  width: min(78rem, 90vw); aspect-ratio: 3 / 2;
  background: url("/img/ondas-topograficas.png") center / contain no-repeat;
  background-image: var(--ilust-ondas);
  opacity: .18;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24% 82%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 24% 82%, transparent 100%);
}
.agenda::after { content: ""; position: absolute; z-index: -1; inset: 0;
  background: linear-gradient(120deg, var(--color-fondo) 0 58%, rgba(246, 248, 245, .78) 78%, var(--color-fondo) 100%); }

/* La agenda va primero en el HTML, así que al apilarse en una columna queda
   arriba sola: el orden de móvil no necesita `order` ni reordenar nada. */
.agenda-layout { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(17rem, .65fr);
  gap: 1.5rem 2rem; align-items: start; }

/* `min-width: 0` no es decorativo: sin él, un hijo de grilla se niega a achicarse
   por debajo de su contenido y la columna desborda hacia el costado. Es la causa
   habitual del desplazamiento horizontal en móvil. */
.agenda-principal { min-width: 0; }

.agenda-cab { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem;
  align-items: start; margin-bottom: 2rem; }
.agenda-cab h2 { max-width: 16ch; margin: 0; font-size: var(--titulo-1);
  line-height: 1.08; letter-spacing: -.025em; }
.agenda-meta { margin: 0; color: var(--color-texto); text-align: right; font-size: var(--texto-sm); }
.agenda-meta b { color: var(--color-tinta); }

.agenda-marco { overflow: hidden; border: 2px solid var(--color-borde-control);
  border-radius: 1.25rem; background: rgba(255, 255, 255, .96);
  box-shadow: 0 24px 70px rgba(11, 34, 49, .13); }
.agenda-flujo { padding: clamp(1.2rem, 3vw, 2rem); }
.agenda-lista { display: grid; gap: 12px; }

/* Cada opción es una tarjeta-botón de ancho completo: ciudad, día y hora.
   Mínimo 44 px de alto por el dedo, y bien por encima con el contenido real. */
.agenda-turno { width: 100%; min-height: 5rem; display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; gap: var(--espacio-4); padding: 12px 15px;
  border: 2px solid var(--color-borde-control); border-radius: var(--radio-control);
  background: var(--color-superficie); color: var(--color-tinta); text-align: left;
  font-family: inherit; cursor: pointer; }
.agenda-turno:hover { border-color: var(--color-petroleo-700); }
.agenda-turno[aria-pressed="true"] { border-color: var(--color-petroleo-600);
  background: var(--color-petroleo-600); color: #fff; }
.agenda-turno-cab { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espacio-2); margin-bottom: 3px; }
.agenda-turno-dia { font-weight: 700; }
.agenda-turno small { display: block; color: var(--color-texto); font-size: var(--texto-xs); }
.agenda-turno[aria-pressed="true"] small { color: rgba(255, 255, 255, .95); }
.agenda-turno time { font-size: var(--texto-lg); font-weight: 700; font-variant-numeric: tabular-nums; }

/* La ciudad se lee en la palabra; el color es el mismo para todas. */
.ciudad { min-height: 28px; display: inline-flex; align-items: center; padding: 2px 9px;
  border: 2px solid var(--color-petroleo-700); border-radius: var(--radio-pildora);
  background: var(--color-petroleo-700); color: #fff;
  font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.agenda-turno[aria-pressed="true"] .ciudad { border-color: #fff; background: #fff;
  color: var(--color-petroleo-700); }

.agenda-aviso { margin: 0; padding: var(--espacio-6) var(--espacio-4);
  border: 2px solid var(--color-borde-control); border-radius: var(--radio-control);
  color: var(--color-texto); text-align: center; }
.agenda-aviso-error { border-color: var(--color-error); background: var(--color-error-fondo); color: var(--color-error); }

.agenda-pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--espacio-4); margin-top: var(--espacio-4); }
.agenda-elegido { margin: 0; color: var(--color-texto); font-size: var(--texto-sm); }
.agenda-elegido::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px;
  background: var(--color-petroleo-600); border-radius: 50%; }
/* Anclas de compatibilidad: la alternativa aprobada no navega semanas. */
.agenda-compat { display: none; }

/* La tarjeta del cerebro. Se ve ENTERA y chica: `contain`, no `cover`. */
.cerebro-lateral { position: sticky; top: 7rem; align-self: start; height: max-content; margin: 0;
  overflow: hidden; border: 1px solid rgba(89, 112, 117, .48); border-radius: 1.25rem;
  background: var(--color-noche); color: #fff; box-shadow: 0 24px 70px rgba(11, 34, 49, .13); min-width: 0; }
.cerebro-lateral-imagen { padding: .85rem; border-bottom: 1px solid rgba(255, 255, 255, .2); }
.cerebro-lateral picture { display: block; }
.cerebro-lateral img { width: 100%; aspect-ratio: 3 / 2; object-fit: contain; border-radius: .75rem; }
.cerebro-lateral-texto { padding: 1.35rem; }
.cerebro-lateral-texto .eyebrow { color: #b9dce3; }
.cerebro-lateral h1 { max-width: 14ch; margin: 0; color: #fff;
  font-size: clamp(2.25rem, 3.1vw, 3.2rem); line-height: 1.08; letter-spacing: -.025em; }
.cerebro-lateral-bajada { margin: 1rem 0 1.1rem; color: #dce8ec; font-size: .93rem; }
.cerebro-lateral-detalles { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.cerebro-lateral-enlace { min-height: var(--alto-control); display: inline-flex; align-items: center;
  color: #fff; font-weight: 700; }
.cerebro-lateral-enlace::after { content: "↓"; margin-left: 4px; }
.cerebro-lateral-dato { display: flex; align-items: center; gap: 8px; color: #dce8ec;
  font-size: var(--texto-xs); font-weight: 600; }
.cerebro-lateral-dato::before { content: ""; width: 8px; height: 8px; background: var(--color-petroleo-claro); border-radius: 50%; }

/* Franja de principios. */
.principios { background: var(--color-petroleo-700); color: #fff; }
.principios-in { min-height: 4.5rem; display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; }
.principios p { margin: 0; padding: 1rem; text-align: center;
  font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.principios p + p { border-left: 1px solid rgba(255, 255, 255, .35); }

/* Motivos, con la sinapsis como capa ambiental detrás del texto. La lista
   `.motivos` es la que ya existía; acá solo se agrega la atmósfera. */
.motivos-seccion { position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(5rem, 10vw, 9rem) 0; background: #fff; }
.motivos-seccion::before { content: ""; position: absolute; z-index: -2; inset: -8% -12% -18% 35%;
  background: url("/img/sinapsis-horizontal.png") right center / cover no-repeat; opacity: .48;
  background-image: var(--ilust-sinapsis); }
.motivos-seccion::after { content: ""; position: absolute; z-index: -1; inset: 0;
  background: linear-gradient(90deg, #fff 0 40%, rgba(255, 255, 255, .95) 52%, rgba(255, 255, 255, .65) 72%, rgba(255, 255, 255, .25)); }
.motivos-cab { max-width: 43rem; margin-bottom: 3rem; }
.motivos-cab h2 { margin: 0; font-size: var(--titulo-1); letter-spacing: -.025em; }
.motivos-cab > p:last-child { max-width: 52ch; margin: .85rem 0 0; color: var(--color-texto); font-size: 1.08rem; }
.motivos-seccion .motivos { max-width: 48rem; }

/* Bloque del profesional, con la ilustración anatómica. NO es un retrato: la
   foto todavía no existe y no se simula. */
.perfil { padding: clamp(5rem, 10vw, 9rem) 0; }
.perfil-grid { display: grid; grid-template-columns: minmax(19rem, .9fr) minmax(0, 1.1fr);
  gap: 1.5rem 2rem; align-items: center; }
.perfil-arte { position: relative; min-height: 39rem; margin: 0; overflow: hidden;
  border-radius: 1.5rem;
  background: linear-gradient(145deg, var(--color-petroleo-100), #fff);
  box-shadow: 0 24px 70px rgba(11, 34, 49, .13); }
.perfil-arte::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(237, 245, 245, .08), rgba(237, 245, 245, .58)); }
.perfil-arte picture { display: block; height: 100%; }
.perfil-arte img { width: 100%; height: 100%; min-height: 39rem; object-fit: cover;
  object-position: 38% center; opacity: .82; }
.perfil-texto h2 { max-width: 14ch; margin: 0; font-size: var(--titulo-1);
  line-height: 1.08; letter-spacing: -.025em; }
.perfil-texto .parrafo-largo { max-width: 56ch; margin: 1.7rem 0 0; color: var(--color-texto); font-size: 1.03rem; }
.perfil-texto .parrafo-largo + .parrafo-largo { margin-top: 1rem; }
.perfil-enlace { min-height: 44px; display: inline-flex; align-items: center;
  margin-top: 1.4rem; color: var(--color-petroleo-700); font-weight: 700; }

/* Sedes. */
.sedes { padding: clamp(5rem, 9vw, 8rem) 0; background: var(--color-petroleo-050);
  border-block: 1px solid var(--color-borde-suave); }
.sedes-cab { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between;
  gap: 2rem; margin-bottom: 2.2rem; }
.sedes-cab h2 { margin: 0; font-size: var(--titulo-1); letter-spacing: -.025em; }
.sedes-cab p { max-width: 35rem; margin: 0; color: var(--color-texto); }
.sedes-grid { display: grid; grid-template-columns: 1fr 1fr; overflow: hidden;
  border: 2px solid var(--color-borde-control); border-radius: 1.25rem;
  background: var(--color-borde-control); gap: 1px; }
.sede { min-height: 14rem; padding: 1.6rem; background: #fff; }
.sede-turnos { grid-column: 1 / -1; }
.sede h3 { margin: 0 0 var(--espacio-3); color: var(--color-petroleo-700); font-size: var(--titulo-3); }
.sede p { margin: 0; color: var(--color-texto); }
.sede p + p { margin-top: .55rem; }
.testimonios { padding-top: var(--espacio-7); }

.footer.pie-ondas { position: relative; overflow: hidden; margin-top: 0; border-top: 0;
  background: var(--color-noche); color: #fff; padding: 5rem 0 2.5rem; }
.footer.pie-ondas .wrap { display: grid; grid-template-columns: 1fr auto; gap: 2rem;
  align-items: end; padding: 0 24px; }
.footer.pie-ondas p { margin: .25rem 0; color: #dce8ec; }
.footer.pie-ondas a { color: #fff; }
.pie-ondas::before { content: ""; position: absolute; top: -15rem; left: 50%;
  width: max(80rem, 120vw); aspect-ratio: 3 / 2; pointer-events: none;
  background: url("/img/ondas-topograficas.png") center top / 100% auto no-repeat;
  background-image: var(--ilust-ondas);
  opacity: .1; transform: translateX(-50%) rotate(180deg); }
.pie-ondas > * { position: relative; }

.parrafo-largo { max-width: 52ch; color: var(--color-texto); font-size: var(--texto-lg); line-height: 1.7; }

@media (max-width: 900px) {
  .agenda-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 17rem); gap: 2rem; }
  .perfil-grid { grid-template-columns: 1fr; }
  .perfil-arte, .perfil-arte picture, .perfil-arte img { min-height: 30rem; }
  .perfil-arte img { object-position: 35% 70%; }
  .sedes-grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  /* Una columna. La agenda queda arriba por orden del HTML: turnos primero,
     cerebro y presentación después. */
  .agenda-layout { grid-template-columns: 1fr; }
  .cerebro-lateral { position: relative; top: auto; max-width: 24rem; }
  .principios-in { grid-template-columns: 1fr; }
  .principios p + p { border-top: 1px solid rgba(255, 255, 255, .35); border-left: 0; }
  .agenda-cab { grid-template-columns: 1fr; }
  .agenda-meta { text-align: left; }
  /* La hora baja debajo del día cuando el ancho no alcanza. */
  .agenda-turno { grid-template-columns: 1fr; gap: 5px; }
  .agenda-pie { flex-direction: column; align-items: stretch; }
  .agenda-pie .btn { width: 100%; }
  .motivos-seccion::before { inset: 18% -45% 0 18%; opacity: .28; }
  .motivos-seccion::after { background: linear-gradient(90deg, #fff 0 58%, rgba(255, 255, 255, .78)); }
  .motivos li { grid-template-columns: 2.2rem minmax(0, 1fr); gap: .7rem; }
  .motivos h3, .motivos p { grid-column: 2; min-width: 0; }
  .footer.pie-ondas .wrap { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   CONSULTAS Y SOBRE MÍ (31/8/2026)

   Las dos páginas editoriales del sitio. Comparten el recorrido de tres pasos y
   el cierre oscuro, así que esas piezas viven acá una sola vez.

   Ninguna regla de este bloque es global: todas cuelgan de una clase propia de
   estas dos páginas. Lo que se comparte con el resto del sitio —`.wrap`,
   `.btn`, `.eyebrow`, `.list-ruled`, la cabecera y el pie— se reutiliza tal cual.
   ──────────────────────────────────────────────────────────────────────────── */

/* Botón claro sobre fondo oscuro. Solo existe dentro del cierre. */
.btn-claro { background: #fff; color: var(--color-noche); border-color: #fff; }
.btn-claro:hover { background: var(--color-petroleo-100); }

/* ── Consultas: entrada con la sinapsis de fondo ───────────────────────────── */
.consultas-entrada { position: relative; isolation: isolate; overflow: hidden;
  display: grid; align-items: center;
  padding: clamp(2rem, 4vw, 3rem) 0; background: #fffaf1;
  border-bottom: 1px solid var(--color-borde-suave); }
.consultas-entrada::before { content: ""; position: absolute; z-index: -2; inset: -20% -14% -20% 36%;
  background: url("/img/sinapsis-horizontal.png") right center / cover no-repeat; opacity: .5;
  background-image: var(--ilust-sinapsis); }
.consultas-entrada::after { content: ""; position: absolute; z-index: -1; inset: 0;
  background: linear-gradient(90deg, #fffaf1 0 42%, rgba(255, 250, 241, .94) 55%, rgba(255, 250, 241, .5) 76%, rgba(255, 250, 241, .16)); }
.consultas-entrada-texto { max-width: 40rem; }
.consultas-entrada h1 { max-width: none; margin: 0; font-size: var(--titulo-1);
  line-height: 1.12; letter-spacing: -.025em; text-align: left; text-wrap: pretty; }
.consultas-bajada { max-width: none; margin: .85rem 0 0; color: var(--color-texto); font-size: 1.07rem; }
.consultas-indice { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: .75rem 1.75rem;
  margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--color-borde-control);
  color: var(--color-texto); font-size: .79rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; }
.consultas-indice span { display: inline-flex; align-items: center; gap: .45rem; }
.consultas-indice b { color: var(--color-foco); font-variant-numeric: tabular-nums; }

/* ── Consultas: los tres capítulos ─────────────────────────────────────────── */
.capitulo { position: relative; padding: clamp(2rem, 4vw, 3.25rem) 0;
  border-bottom: 1px solid var(--color-borde-suave); }
.capitulo-dolor { background: #fff; }
.capitulo-episodios { overflow: hidden; background: var(--color-noche); color: #fff; }
.capitulo-episodios::before { content: ""; position: absolute; inset: -15% -20% -20% 48%;
  background: url("/img/ondas-topograficas.png") center / cover no-repeat; opacity: .08;
  background-image: var(--ilust-ondas); transform: rotate(180deg); }
.capitulo-episodios .capitulo-grid { position: relative; }
.capitulo-episodios .capitulo-numero { color: #9bd2da; }
.capitulo-episodios .capitulo-detalle p { color: #cfdee3; }
.capitulo-episodios .list-ruled li { border-color: rgba(255, 255, 255, .32); color: #fff; }
.capitulo-sueno { background: var(--color-petroleo-050); }
.capitulo-grid { display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: .35rem 1rem; align-items: baseline; }
.capitulo-numero { position: static; margin: 0; color: var(--color-petroleo-700);
  font-family: var(--fuente-editorial); font-size: var(--titulo-2); line-height: 1.08;
  letter-spacing: -.015em; font-weight: 600; font-variant-numeric: tabular-nums; }
.capitulo-cuerpo { min-width: 0; }
.capitulo-cuerpo h2 { max-width: none; margin: 0 0 1rem; font-size: var(--titulo-2); line-height: 1.08; letter-spacing: -.015em; }
.capitulo-detalle { max-width: 42rem; }
.capitulo-detalle p { margin: 0 0 1rem; color: var(--color-texto); font-size: 1.03rem; }
.capitulo .list-ruled { margin: 0; padding: 0; gap: 0; border-top: 2px solid currentColor; }
.capitulo .list-ruled li { padding: .7rem 0;
  border-top: 0; border-bottom: 1px solid var(--color-borde-control); font-weight: 600; }

/* ── Recorrido de tres momentos (consultas y sobre mí) ─────────────────────── */
.recorrido { position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(2.25rem, 4vw, 3.5rem) 0; background: #fff; }
.recorrido::before { content: ""; position: absolute; z-index: -1; right: -20rem; bottom: -15rem;
  width: min(70rem, 90vw); aspect-ratio: 3 / 2;
  background: url("/img/ondas-topograficas.png") center / contain no-repeat; opacity: .09;
  background-image: var(--ilust-ondas); }
/* Misma grilla que `.manera-in`: dos columnas iguales, poco hueco, alineadas
   arriba. Si no, el título de Sobre mí no calza con el del recorrido. */
.recorrido-cab { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.5rem 2rem; align-items: start; margin-bottom: 1.5rem; }
.recorrido-cab h2 { max-width: 16ch; margin: 0; font-size: var(--titulo-2); line-height: 1.08; letter-spacing: -.015em; }
.recorrido-bajada { max-width: 42ch; margin: 0; color: var(--color-texto); }
.pasos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  margin: 0; padding: 0; list-style: none; counter-reset: paso;
  border: 2px solid var(--color-borde-control); border-radius: 1.25rem;
  overflow: hidden; background: rgba(255, 255, 255, .94);
  box-shadow: 0 24px 70px rgba(11, 34, 49, .13); }
.pasos > .paso { min-height: 0; padding: 1.2rem 1.35rem; counter-increment: paso; }
.pasos > .paso + .paso { border-left: 1px solid var(--color-borde-control); }
.pasos > .paso::before { content: "0" counter(paso); display: block; margin-bottom: .85rem;
  color: var(--color-petroleo-700); font-size: .75rem; font-weight: 800; letter-spacing: .12em; }
.pasos > .paso h3 { margin: 0; font-family: var(--fuente-interfaz); font-size: 1.08rem; font-weight: 700; }
.pasos > .paso p { margin: .8rem 0 0; color: var(--color-texto); font-size: .91rem; }
.paso-lugar { margin: 0 0 auto; color: var(--color-texto);
  font-size: .75rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }

/* ── Cierre de consultas: petróleo, sin ondas ──────────────────────────────── */
.cierre { position: relative; overflow: hidden; padding: clamp(2rem, 4vw, 3rem) 0;
  background: var(--color-petroleo-700); color: #fff; }
.cierre-in { position: relative; display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: var(--espacio-5); }
.cierre h2 { max-width: 18ch; margin: 0; color: #fff; font-size: var(--titulo-1);
  line-height: 1.1; letter-spacing: -.025em; }

/* ── Sobre mí ──────────────────────────────────────────────────────────────── */
.perfil-entrada { position: relative; isolation: isolate; overflow: hidden;
  background: #fffaf1; border-bottom: 1px solid var(--color-borde-suave); }
.perfil-entrada::before { content: ""; position: absolute; z-index: -1; right: -15rem; bottom: -21rem;
  width: min(72rem, 94vw); aspect-ratio: 3 / 2;
  background: url("/img/ondas-topograficas.png") center / contain no-repeat; opacity: .12;
  background-image: var(--ilust-ondas); }
.perfil-entrada-grid { display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(22rem, .9fr);
  gap: 1.5rem 2rem; align-items: center; padding: clamp(3rem, 6vw, 5.5rem) 0; }
.perfil-entrada-texto { min-width: 0; }
.perfil-entrada h1 { max-width: 12ch; margin: 0; font-size: var(--titulo-1); line-height: 1.08; letter-spacing: -.025em; }
.perfil-credenciales { margin: 1.6rem 0 0; padding-top: 1.2rem; border-top: 1px solid var(--color-borde-control);
  color: var(--color-texto); font-size: .79rem; font-weight: 700; letter-spacing: .075em; line-height: 1.75;
  text-transform: uppercase; }
.perfil-bio-primera { max-width: 55ch; margin: 2.1rem 0 0; color: var(--color-texto); font-size: 1.08rem; }
.perfil-ilustracion { position: relative; min-height: 38rem; margin: 0; overflow: hidden;
  border: 1px solid rgba(89, 112, 117, .48); border-radius: 1.5rem;
  background: linear-gradient(155deg, #fff 0, var(--color-petroleo-100) 100%);
  box-shadow: 0 24px 70px rgba(11, 34, 49, .13); }
.perfil-ilustracion::before { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, .7), rgba(220, 236, 239, .2)); }
.perfil-ilustracion picture { display: block; height: 100%; }
.perfil-ilustracion img { position: absolute; z-index: 1; inset: 1.3rem 10% 3.2rem; width: 80%;
  height: calc(100% - 4.5rem); object-fit: contain; object-position: center;
  filter: saturate(.88) contrast(1.04); background: none; border-radius: 0; }
.perfil-ilustracion figcaption { position: absolute; z-index: 2; right: 1.2rem; bottom: 1rem; left: 1.2rem;
  display: flex; justify-content: space-between; gap: 1rem; padding-top: .75rem;
  border-top: 1px solid rgba(89, 112, 117, .55); color: var(--color-texto);
  font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.perfil-ilustracion figcaption span:last-child { color: var(--color-foco); }

.manera { padding: clamp(5rem, 10vw, 9rem) 0; background: #fff; border: 0; }
.manera-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.5rem 2rem; align-items: start; max-width: none; }
.manera-titulo { align-self: start; }
.manera h2, .manera-titulo h2 { max-width: 16ch; margin: 0; }
.manera-cuerpo { max-width: none; }
.manera-cuerpo p { margin: 0; color: var(--color-texto); font-size: var(--texto-lg); line-height: 1.58; }
.manera-cuerpo p + p { margin-top: 1.65rem; }
.manera-cuerpo p:last-child { padding-left: 1.25rem; border-left: 3px solid var(--color-petroleo-600);
  color: var(--color-tinta); font-family: var(--fuente-editorial);
  font-size: var(--texto-lg); line-height: 1.5; }

.escucha { position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(5rem, 10vw, 8rem) 0; background: var(--color-noche); color: #fff; }
.escucha::before { content: ""; position: absolute; z-index: -1; inset: -20% -15% -45% 42%;
  background: url("/img/ondas-topograficas.png") center / cover no-repeat; opacity: .09;
  background-image: var(--ilust-ondas); }
.escucha-in { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(14rem, 18rem);
  gap: 1.5rem 2rem; align-items: start; }
.escucha blockquote { max-width: 32ch; margin: 0; font-family: var(--fuente-editorial);
  font-size: clamp(1.65rem, 2.4vw, 2.5rem); font-weight: 600; line-height: 1.2; letter-spacing: -.02em; }
.escucha-accion { max-width: 20rem; }
.escucha-accion p { margin: 0 0 1.3rem; color: #c9dbe0; }

.sobre-recorrido { background: var(--color-petroleo-050); border-block: 1px solid var(--color-borde-suave); }
.sobre-recorrido::before { right: auto; left: -22rem; top: -14rem; bottom: auto; transform: rotate(180deg); }
.trayecto { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  margin: 0; padding: 0; list-style: none;
  overflow: hidden; border: 2px solid var(--color-borde-control); border-radius: 1.25rem;
  background: rgba(255, 255, 255, .94); box-shadow: 0 24px 70px rgba(11, 34, 49, .13); }
.trayecto-item { min-height: 21rem; display: flex; flex-direction: column;
  padding: clamp(1.5rem, 3vw, 2.25rem); }
.trayecto-item + .trayecto-item { border-left: 1px solid var(--color-borde-control); }
.trayecto-numero { margin-bottom: auto; color: var(--color-petroleo-700);
  font-size: .75rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.trayecto-item h3 { margin: 0; font-family: var(--fuente-interfaz); font-size: 1rem;
  font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.trayecto-item p { margin: .85rem 0 0; color: var(--color-texto); font-size: .94rem; }

@media (max-width: 900px) {
  .pasos { grid-template-columns: 1fr; }
  .pasos > .paso + .paso { border-top: 1px solid var(--color-borde-control); border-left: 0; }
  .perfil-entrada-grid { grid-template-columns: minmax(0, 1fr) minmax(19rem, .75fr); gap: 2rem; }
  .perfil-ilustracion { min-height: 33rem; }
}
@media (max-width: 700px) {
  .consultas-entrada::before { inset: 32% -55% -8% 8%; opacity: .24; }
  .consultas-entrada::after { background: linear-gradient(180deg, #fffaf1 0 58%, rgba(255, 250, 241, .72)); }
  .capitulo-grid { grid-template-columns: auto minmax(0, 1fr); }
  .capitulo-numero { position: static; top: auto; font-size: var(--titulo-2); }
  .capitulo-cuerpo, .recorrido-cab, .manera-in, .escucha-in { grid-template-columns: 1fr; }
  .capitulo-cuerpo h2 { max-width: none; }
  .pasos > .paso { min-height: 0; }
  .pasos > .paso::before { margin-bottom: .85rem; }
  .cierre-in { align-items: stretch; flex-direction: column; }
  .cierre-in .btn { width: 100%; }
  .perfil-entrada-grid { min-height: 0; grid-template-columns: 1fr; padding-block: 4.5rem; }
  .perfil-ilustracion { min-height: 31rem; }
  .manera-titulo { position: relative; top: auto; }
  .manera h2, .manera-titulo h2 { max-width: 16ch; }
  .trayecto { grid-template-columns: 1fr; }
  .trayecto-item { min-height: 0; }
  .trayecto-item + .trayecto-item { border-top: 1px solid var(--color-borde-control); border-left: 0; }
  .trayecto-numero { margin-bottom: 2.5rem; }
  .escucha-accion { max-width: none; }
  .escucha .btn { width: 100%; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   PEDIR TURNO (31/8/2026) — el contexto fijo del primer paso

   Reemplaza al paso de modalidad, que tenía una sola opción. Se LEE, no se
   elige: no es un botón, no tiene `aria-pressed` y nada avanza al tocarlo.
   ──────────────────────────────────────────────────────────────────────────── */
.wz-contexto { display: flex; align-items: flex-start; gap: var(--espacio-3);
  margin: 0 0 var(--espacio-5); padding: var(--espacio-4);
  border: 1px solid var(--color-borde-suave); border-radius: var(--radio-control);
  background: var(--color-petroleo-050); color: var(--color-tinta); }
.wz-contexto .opcion-ico { flex: 0 0 auto; width: 22px; height: 22px; margin-top: 2px;
  fill: none; stroke: var(--color-petroleo-700); stroke-width: 1.8; }
.wz-contexto b { display: block; }
.wz-contexto > span > span { display: block; color: var(--color-texto); font-size: var(--texto-sm); }
.wz-contexto-nota { margin-top: var(--espacio-2); }
.filtro-sedes { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 1rem; }
.filtro-sede { min-height: 44px; padding: 8px 14px; border: 2px solid var(--color-borde-control);
  border-radius: var(--radio-pildora); background: var(--color-superficie); color: var(--color-tinta);
  font: inherit; font-size: var(--texto-sm); font-weight: 700; cursor: pointer; }
.filtro-sede:hover { border-color: var(--color-petroleo-700); }
.filtro-sede[aria-pressed="true"] { border-color: var(--color-petroleo-700);
  background: var(--color-petroleo-700); color: #fff; }

/* ─────────────────────────────────────────────────────────────────────────────
   PEDIR TURNO — composición de la maqueta, encapsulada en `.pagina-turnos`.

   El wizard sigue usando `.wz-paso` (no `.paso` suelto) y `data-wz-pistas` sigue
   siendo un OL que arma `turnos.js`. Los días y horarios se pisan acá sin
   redefinir `.slot` global: esa clase la usa también la portada y el test
   cuenta las definiciones sueltas.
   ──────────────────────────────────────────────────────────────────────────── */
.turnos-entrada { position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(3rem, 6vw, 5rem) 0 clamp(3.5rem, 7vw, 5.5rem);
  background: var(--color-noche); color: #fff; }
.turnos-entrada::before { content: ""; position: absolute; z-index: -2; inset: -45% -18% -55% 35%;
  background: url("/img/ondas-topograficas.png") right center / cover no-repeat; opacity: .14;
  background-image: var(--ilust-ondas); }
.turnos-entrada::after { content: ""; position: absolute; z-index: -1; inset: 0;
  background: linear-gradient(90deg, var(--color-noche) 0 48%, rgba(11, 34, 49, .92) 64%, rgba(11, 34, 49, .62)); }
.turnos-entrada-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, .75fr);
  gap: 1.5rem 2rem; align-items: start; }
.turnos-entrada .eyebrow { color: #a7d5dc; }
.turnos-entrada h1 { max-width: 18ch; margin: 0; color: #fff;
  font-size: var(--titulo-1); letter-spacing: -.025em; text-wrap: pretty; }
.turnos-bajada { max-width: 51ch; margin: 1.2rem 0 0; color: #dce8ec; font-size: 1.04rem; }
.turnos-datos { display: grid; grid-template-columns: 1fr 1fr; border-block: 1px solid rgba(255, 255, 255, .36); }
.turno-dato { padding: 1.2rem 0; }
.turno-dato + .turno-dato { padding-left: 1.3rem; border-left: 1px solid rgba(255, 255, 255, .36); }
.turno-dato b { display: block; font-family: var(--fuente-editorial); font-size: 2rem; line-height: 1; color: #fff; }
.turno-dato span { display: block; margin-top: .45rem; color: #bfd0d6;
  font-size: .75rem; letter-spacing: .07em; text-transform: uppercase; }

.turnos-reserva { position: relative; isolation: isolate;
  padding: clamp(3.5rem, 7vw, 6rem) 0 clamp(5rem, 9vw, 8rem); }
.turnos-reserva::before { content: ""; position: absolute; z-index: -1; top: 0; right: -18rem;
  width: min(66rem, 88vw); aspect-ratio: 3 / 2;
  background: url("/img/ondas-topograficas.png") center / contain no-repeat; opacity: .08;
  background-image: var(--ilust-ondas);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 35% 75%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 35% 75%, transparent); }
.turnos-reserva-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(16.5rem, .36fr);
  gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.turnos-flujo { overflow: hidden; border: 2px solid var(--color-borde-control); border-radius: 1.25rem;
  background: rgba(255, 255, 255, .97); box-shadow: 0 24px 70px rgba(11, 34, 49, .13); }
.pagina-turnos .wz-top { display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; margin: 0; padding: 1.25rem clamp(1.2rem, 3vw, 2rem);
  background: var(--color-petroleo-050); border-bottom: 1px solid var(--color-borde-suave); }
.pagina-turnos .wz-cuenta { font-size: .8rem; font-weight: 700; letter-spacing: .08em; }
.pagina-turnos .wz-pistas { flex: 1; max-width: 16rem; margin: 0; }
.pagina-turnos .wz-marco { min-height: 28rem; padding: clamp(1.35rem, 4vw, 2.6rem); }
.pagina-turnos .wz-paso { min-height: 22rem; }
.pagina-turnos .wz-paso h3 { max-width: 22ch; font-size: var(--titulo-2);
  font-family: var(--fuente-editorial); font-weight: 600; }
.pagina-turnos .wz-nav { padding: 1.1rem clamp(1.2rem, 3vw, 2rem);
  border-top: 1px solid var(--color-borde-suave); background: #fbfcfb; }
.pagina-turnos .wz-precio { margin: 0 clamp(1.2rem, 3vw, 2rem); }

.pagina-turnos .days { display: grid; grid-template-columns: repeat(4, minmax(7rem, 1fr));
  gap: .65rem; overflow: visible; padding: 0; }
.pagina-turnos .day { min-height: 4.9rem; padding: .7rem .8rem; border: 2px solid var(--color-borde-control);
  border-radius: .8rem; text-align: left; }
.pagina-turnos .day b { font-size: 1rem; }
.pagina-turnos .slots { display: grid; grid-template-columns: repeat(3, minmax(8rem, 1fr));
  gap: .65rem; margin-top: 1.6rem; }
.pagina-turnos .slot { min-height: 4.45rem; display: flex; align-items: center; justify-content: space-between;
  gap: .65rem; padding: .7rem .8rem; border: 2px solid var(--color-borde-control);
  border-radius: .8rem; font-size: 1.05rem; }

.turnos-resumen { position: sticky; top: 6.3rem; overflow: hidden; border-radius: 1.25rem;
  background: var(--color-noche); color: #fff; box-shadow: 0 24px 70px rgba(11, 34, 49, .13); }
.turnos-resumen-arte { position: relative; overflow: hidden; padding: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, .2); }
.turnos-resumen-arte::before { content: ""; position: absolute; inset: 0;
  background: url("/img/ondas-topograficas.png") center / cover no-repeat; opacity: .08;
  background-image: var(--ilust-ondas); }
.turnos-resumen-arte picture, .turnos-resumen-arte img { position: relative; width: 100%;
  max-height: 10rem; object-fit: contain; }
.turnos-resumen-cuerpo { padding: 1.35rem; }
.turnos-resumen .eyebrow { color: #a7d5dc; }
.pagina-turnos .resumen-fila { display: grid; grid-template-columns: .72fr 1.28fr; gap: .75rem;
  padding: .8rem 0; border-top: 1px solid rgba(255, 255, 255, .22); font-size: .83rem; }
.pagina-turnos .resumen-fila span { color: #b9cbd1; }
.pagina-turnos .resumen-fila b { color: #fff; text-align: right; }
.turnos-resumen-nota { margin: .9rem 0 0; color: #bfd0d6; font-size: .74rem; }
.turnos-resumen-acciones { display: grid; gap: .55rem; margin-top: 1.1rem; }
.turnos-resumen .btn-secondary { color: #fff; border-color: #fff; background: transparent; }
.turnos-resumen a { color: #fff; }

.turnos-gestiones { padding: clamp(5rem, 9vw, 8rem) 0; background: #fff;
  border-block: 1px solid var(--color-borde-suave); }
.turnos-gestiones-cab { max-width: 46rem; margin-bottom: 2.5rem; }
.turnos-gestiones-cab h2 { margin: 0; }
.turnos-gestiones-grid { display: grid; grid-template-columns: 1fr 1fr; overflow: hidden;
  border: 2px solid var(--color-borde-control); border-radius: 1.25rem; }
.turnos-gestion { padding: clamp(1.4rem, 3vw, 2.2rem); }
.turnos-gestion + .turnos-gestion { border-left: 1px solid var(--color-borde-control); }
.turnos-gestion h3 { margin: 0; font-family: var(--fuente-interfaz); font-size: 1.08rem; }
.turnos-gestion p { color: var(--color-texto); }

.turnos-preparacion { padding: clamp(5rem, 9vw, 8rem) 0; }
.turnos-preparacion-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.5rem 2rem; align-items: start; }
.turnos-consejos { margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--color-tinta);
  counter-reset: consejo; }
.turnos-consejos li { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); gap: .35rem 1rem;
  padding: 1.4rem 0; border-bottom: 1px solid var(--color-borde-control); counter-increment: consejo;
  align-items: start; }
.turnos-consejos li::before { grid-column: 1; grid-row: 1; content: "0" counter(consejo); color: var(--color-petroleo-700);
  font-size: .75rem; font-weight: 800; letter-spacing: .1em; }
.turnos-consejos h4, .turnos-consejos p { grid-column: 2; min-width: 0; }
.turnos-consejos h4 { margin: 0; font-family: var(--fuente-interfaz); font-size: 1rem; }
.turnos-consejos p { margin: .35rem 0 0; color: var(--color-texto); font-size: .9rem; }
.turnos-coberturas { margin-top: 4rem; padding: 2rem; border-radius: 1.25rem;
  background: var(--color-petroleo-050); }
.turnos-coberturas p { color: var(--color-texto); }

.turnos-sedes { padding: clamp(5rem, 9vw, 8rem) 0; background: var(--color-petroleo-050);
  border-top: 1px solid var(--color-borde-suave); }
.turnos-sedes h2 { margin: .4rem 0 2rem; }
.turnos-sedes-grid { display: grid; grid-template-columns: 1fr 1fr; overflow: hidden;
  border: 2px solid var(--color-borde-control); border-radius: 1.25rem;
  background: var(--color-borde-control); gap: 1px; }
.turnos-sede { min-height: 13rem; padding: 1.6rem; background: #fff; }
.turnos-sede h3 { margin: 0 0 .6rem; color: var(--color-petroleo-700); }
.turnos-sede p { margin: 0; }
.turnos-sede p + p { margin-top: .45rem; }

@media (max-width: 920px) {
  .turnos-reserva-grid { grid-template-columns: minmax(0, 1fr) 16rem; gap: 1.5rem; }
  .pagina-turnos .days { grid-template-columns: repeat(2, 1fr); }
  .pagina-turnos .slots { grid-template-columns: repeat(2, 1fr); }
  .turnos-preparacion-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .turnos-entrada-grid, .turnos-reserva-grid { grid-template-columns: 1fr; }
  .turnos-datos { max-width: 30rem; }
  .turnos-resumen { position: relative; top: auto; }
  .turnos-resumen-arte { display: none; }
  .pagina-turnos .wz-paso { min-height: 0; }
  .pagina-turnos .wz-marco { min-height: 0; }
  .turnos-gestiones-grid, .turnos-sedes-grid { grid-template-columns: 1fr; }
  .turnos-gestion + .turnos-gestion {
    border-top: 1px solid var(--color-borde-control); border-left: 0; }
}
@media (max-width: 480px) {
  .pagina-turnos .days, .pagina-turnos .slots { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   FAMILIA DE CUENTA (31/8/2026)

   Entrar, crear cuenta, contraseña, confirmar correo y completar registro. Las
   cinco comparten la misma composición: un panel oscuro que explica el proceso
   y un panel claro con la tarea. Las ondas quedan RECORTADAS dentro del panel
   oscuro, sin capas exteriores ni cortes contra el borde de la sección.

   El formulario de cada página no se toca: campos, `id`, `name`, `autocomplete`
   y enganches siguen siendo los mismos. Lo que cambia es el marco.
   ──────────────────────────────────────────────────────────────────────────── */
.cuenta { padding-block: clamp(3rem, 7vw, 6.5rem); }
.cuenta-marco { display: grid; grid-template-columns: minmax(0, .88fr) minmax(25rem, 1.12fr);
  overflow: hidden; border: 1px solid rgba(89, 112, 117, .55); border-radius: 1.5rem;
  background: var(--color-superficie); box-shadow: 0 24px 70px rgba(11, 34, 49, .15); }

.cuenta-contexto { position: relative; isolation: isolate; min-height: 28rem;
  display: flex; flex-direction: column; justify-content: space-between; overflow: hidden;
  padding: clamp(2rem, 5vw, 3.25rem);
  background: var(--color-noche); color: #fff; }
.cuenta-contexto::before { content: ""; position: absolute; z-index: -1; inset: -12% -70% -35% -38%;
  background: url("/img/ondas-topograficas.png") center / cover no-repeat; opacity: .13;
  background-image: var(--ilust-ondas); transform: rotate(90deg); }
.cuenta-contexto > * { position: relative; }
.cuenta-contexto .eyebrow { color: #a9d3da; }
.cuenta-contexto h1 { max-width: 14ch; margin: 0; color: #fff;
  font-size: var(--titulo-1); line-height: 1.08; letter-spacing: -.025em; text-wrap: pretty; }
.cuenta-contexto h2 { margin: 0; color: #fff; font-size: var(--titulo-2); }
.cuenta-contexto p { max-width: 34ch; color: #d5e3e7; font-size: 1.02rem; }
.cuenta-contexto a { color: #fff; }
.cuenta-lista { margin: 3rem 0 0; padding: 0; list-style: none; border-top: 1px solid rgba(255, 255, 255, .35); }
.cuenta-lista li { display: flex; gap: .75rem;
  padding: 1rem 0; border-bottom: 1px solid rgba(255, 255, 255, .22);
  color: #d5e3e7; font-size: .88rem; counter-increment: cuenta-paso; }
.cuenta-lista { counter-reset: cuenta-paso; }
.cuenta-lista li::before { content: counter(cuenta-paso, decimal-leading-zero);
  flex: 0 0 2rem; color: #9bd2da; font-size: .7rem; font-weight: 800; letter-spacing: .1em; }

.cuenta-tarea { display: grid; align-content: center; padding: clamp(2rem, 6vw, 5rem); }
.form-cab { margin-bottom: 2rem; }
.form-cab h2 { max-width: 18ch; margin: 0; }
.form-cab p { margin: .85rem 0 0; color: var(--color-texto); }
.form-cab a { color: var(--color-petroleo-700); font-weight: 700; }
/* La tarjeta del formulario ya no necesita marco propio: el marco es el de la
   página. Sin esto quedaban dos bordes, uno dentro del otro. */
.cuenta-tarea .form-card { padding: 0; border: 0; background: none; box-shadow: none; }

@media (max-width: 860px) {
  /* Una columna. El orden lo decide el HTML de cada página: en entrar, contraseña,
     confirmar correo y completar registro va primero el contexto; en crear cuenta,
     primero el formulario. */
  .cuenta-marco { grid-template-columns: 1fr; }
  .cuenta-contexto { min-height: 0; padding: 2.25rem 1.35rem; }
  .cuenta-contexto h1 { max-width: 16ch; }
  .cuenta-lista { margin-top: 2rem; }
  .cuenta-tarea { padding: 2.4rem 1.35rem; }
}
.cuenta-tarea h1 { margin: 0; font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.12; letter-spacing: -.02em; }
.cuenta-bajada { max-width: 46ch; margin: var(--espacio-3) 0 var(--espacio-5); color: var(--color-texto); }
.cuenta-catalogo-vacio { margin: 0 0 var(--espacio-4); color: var(--color-texto); font-size: var(--texto-sm); }

/* ─────────────────────────────────────────────────────────────────────────────
   PANEL DEL PACIENTE (31/8/2026)

   Tablero: próximo turno arriba, historial y datos debajo. Las ondas quedan
   recortadas dentro de la cabecera oscura. El diario y las indicaciones tienen
   enganches reservados y no llegan visibles.
   ──────────────────────────────────────────────────────────────────────────── */
.panel-paciente { padding-block: clamp(2rem, 5vw, 3.5rem) clamp(3rem, 6vw, 5rem); }
.panel-paciente [hidden] { display: none !important; }
.panel-cabeza { position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--espacio-6); align-items: end;
  padding: clamp(1.75rem, 4vw, 3rem); border: 1px solid rgba(89, 112, 117, .55);
  border-radius: var(--radio-tarjeta); background: var(--color-noche); color: #fff;
  box-shadow: var(--sombra-tarjeta); }
.panel-cabeza::before { content: ""; position: absolute; z-index: -1; inset: 0;
  background: url("/img/ondas-topograficas.png") center / cover no-repeat; opacity: .16;
  background-image: var(--ilust-ondas); }
.panel-cabeza .eyebrow { color: var(--color-petroleo-claro); }
.panel-cabeza h1 { max-width: 12ch; margin: 0; color: #fff; }
.panel-cabeza p { max-width: 48ch; margin: var(--espacio-4) 0 0; color: #dce8ec; }
.panel-cabeza-acciones { display: flex; flex-wrap: wrap; gap: 10px; }
.panel-cabeza-acciones .btn-secondary { background: #fff; }

.panel-verificar { display: grid; grid-template-columns: auto 1fr auto; gap: var(--espacio-4); align-items: center;
  margin-top: var(--espacio-5); padding: 1.1rem 1.25rem; border: 2px solid var(--color-borde-control);
  border-radius: var(--radio-tarjeta); background: var(--color-petroleo-050); }
.panel-verificar-marca { width: 2.6rem; height: 2.6rem; display: grid; place-items: center;
  border-radius: 50%; background: var(--color-petroleo-700); color: #fff; font-weight: 800; }
.panel-verificar h2 { margin: 0; font-family: var(--fuente-interfaz); font-size: 1rem; }
.panel-verificar p { margin: .2rem 0 0; color: var(--color-texto); font-size: var(--texto-sm); }

.panel-tablero { display: grid; grid-template-columns: minmax(0, 1.32fr) minmax(18rem, .68fr);
  gap: var(--espacio-5); margin-top: var(--espacio-5); }
.panel-bloque { padding: clamp(1.35rem, 3vw, 2rem); border: 1px solid var(--color-borde-suave);
  border-radius: var(--radio-tarjeta); background: var(--color-superficie); }
.panel-bloque-cab { display: flex; align-items: baseline; justify-content: space-between; gap: var(--espacio-4);
  margin-bottom: var(--espacio-5); }
.panel-bloque-cab .eyebrow { margin: 0; }

.panel-turno { display: grid; grid-template-columns: auto 1fr; gap: var(--espacio-5); align-items: start;
  padding: 1.25rem; border: 2px solid var(--color-borde-control); border-radius: var(--radio-tarjeta);
  background: var(--color-petroleo-050); }
.panel-turno-fecha { width: 5.4rem; min-height: 5.4rem; display: grid; place-items: center; padding: .55rem;
  border-radius: .85rem; background: var(--color-petroleo-700); color: #fff; text-align: center; }
.panel-turno-fecha b { display: block; font-family: var(--fuente-editorial); font-size: 2rem; line-height: .9; }
.panel-turno-fecha span { font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.panel-turno-tipo { margin: 0 0 .4rem; color: var(--color-petroleo-700); font-size: .76rem;
  font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.panel-turno h3 { margin: 0; }
.panel-turno-meta { margin: .6rem 0 0; color: var(--color-texto); }
.panel-turno-acciones { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1rem; }

.panel-vacio { display: grid; place-items: center; min-height: 15rem; padding: 2rem;
  border: 2px dashed var(--color-borde-control); border-radius: var(--radio-tarjeta);
  background: var(--color-petroleo-050); color: var(--color-texto); text-align: center; }
.panel-vacio h3 { margin-bottom: .65rem; color: var(--color-tinta); }
.panel-vacio p { max-width: 34ch; margin: 0; }
.panel-vacio .btn { margin-top: 1.15rem; }

.panel-seccion { margin-top: var(--espacio-5); padding: clamp(1.35rem, 3vw, 2rem);
  border: 1px solid var(--color-borde-suave); border-radius: var(--radio-tarjeta);
  background: var(--color-superficie); }
.panel-seccion-cab { margin-bottom: 1.3rem; }
.panel-seccion-cab p { max-width: 44ch; margin: .55rem 0 0; color: var(--color-texto); }
.panel-tabla { overflow-x: auto; }
.panel-tabla table { width: 100%; min-width: 36rem; }

.panel-inferior { display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, .8fr);
  gap: var(--espacio-5); margin-top: var(--espacio-5); }
.panel-perfil .field { margin-top: 1rem; }
.panel-perfil-acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 1.25rem; }

@media (max-width: 980px) {
  .panel-cabeza { grid-template-columns: 1fr; align-items: start; }
}
@media (max-width: 850px) {
  .panel-tablero, .panel-inferior { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .panel-verificar { grid-template-columns: auto 1fr; }
  .panel-verificar .btn { grid-column: 1 / -1; width: 100%; }
  .panel-turno { grid-template-columns: 1fr; }
  .panel-turno-fecha { width: 100%; min-height: 0; grid-template-columns: auto 1fr; display: grid; text-align: left; }
  .panel-turno-fecha b { display: inline; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   Ficha profesional (paciente.html). Portada oscura, dos columnas, cronología.
   Los enganches de entrevista, ejercicios y diario quedan en el HTML y no
   llegan visibles mientras esos módulos estén apagados.
   ──────────────────────────────────────────────────────────────────────────── */
.ficha-profesional { padding-block: clamp(1.5rem, 4vw, 3rem) clamp(3rem, 6vw, 5rem); }
.ficha-profesional [hidden] { display: none !important; }
.ficha-volver { min-height: 44px; display: inline-flex; align-items: center;
  color: var(--color-petroleo-700); font-size: .88rem; font-weight: 700; text-decoration: none; }
.ficha-portada { position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem; align-items: end;
  margin-top: .8rem; padding: clamp(2rem, 4vw, 3.5rem);
  border: 1px solid rgba(89, 112, 117, .55); border-radius: var(--radio-tarjeta);
  background: var(--color-noche); color: #fff; box-shadow: var(--sombra-tarjeta); }
.ficha-portada::before { content: ""; position: absolute; z-index: -1; inset: 0;
  background: url("/img/ondas-topograficas.png") center / cover no-repeat; opacity: .18;
  background-image: var(--ilust-ondas); }
.ficha-portada .eyebrow { color: var(--color-petroleo-claro); }
.ficha-portada h1 { max-width: 14ch; margin: 0; color: #fff; }
.ficha-portada-contacto { margin: .9rem 0 0; overflow-wrap: anywhere; color: #d5e3e7; }
.ficha-portada-datos { width: 100%; min-width: 25rem; display: grid;
  grid-template-columns: repeat(3, minmax(7rem, 1fr)); gap: 1px; overflow: hidden;
  border: 1px solid rgba(220, 236, 239, .25); border-radius: .85rem;
  background: rgba(220, 236, 239, .25); }
.ficha-dato { padding: 1rem; background: rgba(7, 23, 34, .62); }
.ficha-dato small, .ficha-dato strong { display: block; }
.ficha-dato small { color: #b9cdd2; font-size: .7rem; letter-spacing: .09em; text-transform: uppercase; }
.ficha-dato strong { min-width: 0; margin-top: .35rem; overflow-wrap: anywhere; color: #fff; font-size: .9rem; }

.ficha-subnav { display: flex; gap: .4rem; overflow-x: auto; margin-top: 1rem; padding: .45rem;
  border: 1px solid var(--color-borde-suave); border-radius: .8rem; background: #fff; }
.ficha-subnav a { min-height: 44px; display: inline-flex; align-items: center;
  padding: .55rem .8rem; border-radius: .5rem; color: var(--color-texto);
  font-size: .8rem; font-weight: 700; text-decoration: none; white-space: nowrap; }
.ficha-subnav a:hover { background: var(--color-petroleo-050); color: var(--color-petroleo-700); }

.ficha-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(19rem, .36fr);
  gap: 1.25rem; align-items: start; margin-top: 1.25rem; }
.ficha-columna { min-width: 0; display: grid; gap: 1.25rem; }
.ficha-seccion { min-width: 0; padding: clamp(1.25rem, 2.7vw, 2rem);
  border: 1px solid var(--color-borde-suave); border-radius: var(--radio-tarjeta);
  background: var(--color-superficie); }
.ficha-seccion-cab { display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1.25rem; margin-bottom: 1.25rem; }
.ficha-seccion-cab p { max-width: 52ch; margin: .55rem 0 0; color: var(--color-texto); }
.ficha-tabla { overflow-x: auto; }
.ficha-tabla .table { min-width: 28rem; }
.ficha-timeline { display: grid; gap: .9rem; }
.ficha-editor { margin-top: 1.25rem; padding: 1.25rem;
  border: 1px solid var(--color-borde-suave); border-radius: .85rem;
  background: var(--color-petroleo-050); }
.ficha-editor h3 { margin: 0 0 .35rem; }
.ficha-editor summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 700; }
.ficha-editor[open] summary { margin-bottom: 1rem; }
.ficha-apoyo { position: sticky; top: 96px; }

@media (max-width: 980px) {
  .ficha-portada { grid-template-columns: minmax(0, 1fr); }
  .ficha-portada-datos { min-width: 0; }
  .ficha-layout { grid-template-columns: minmax(0, 1fr); }
  .ficha-apoyo { position: static; }
}
@media (max-width: 760px) {
  .ficha-portada { padding: 1.55rem; }
  .ficha-portada-datos { grid-template-columns: minmax(0, 1fr); }
  .ficha-dato { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: .5rem; align-items: center; }
  .ficha-dato strong { margin: 0; text-align: right; }
  .ficha-seccion-cab { align-items: flex-start; flex-direction: column; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   Panel profesional (admin.html). Navegación lateral en escritorio, tres
   controles táctiles en móvil. La pestaña interna `cuenta` se muestra como
   Consultorio.
   ──────────────────────────────────────────────────────────────────────────── */
.admin-shell { display: grid; grid-template-columns: 16.5rem minmax(0, 1fr); min-height: calc(100vh - 4.7rem); }
.admin-shell [hidden] { display: none !important; }
.admin-lado { position: relative; isolation: isolate; overflow: hidden;
  padding: 1.5rem 1.1rem 2rem; background: var(--color-noche); color: #fff; }
.admin-lado::before { content: ""; position: absolute; z-index: -1; inset: 0;
  background: url("/img/ondas-topograficas.png") center / cover no-repeat; opacity: .2;
  background-image: var(--ilust-ondas); }
.admin-lado .eyebrow { color: var(--color-petroleo-claro); margin: 0 0 1.25rem; }
.admin-tabs { display: grid; gap: .35rem; }
.admin-tabs button { min-height: 48px; display: flex; align-items: center;
  padding: .7rem .9rem; border: 0; border-radius: .65rem; background: transparent;
  color: #d5e3e7; font: inherit; font-weight: 700; text-align: left; cursor: pointer; }
.admin-tabs button[aria-selected="true"] { background: rgba(220, 236, 239, .18); color: #fff; }
.admin-tabs button:hover { background: rgba(220, 236, 239, .1); color: #fff; }
.admin-principal { min-width: 0; padding: clamp(1.25rem, 3vw, 2.5rem) clamp(1.25rem, 3vw, 2.5rem) 5rem; }
.admin-panel { display: grid; gap: 1.25rem; }
.admin-metricas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.admin-metrica { min-height: 7rem; padding: 1.1rem 1.2rem;
  border: 1px solid var(--color-borde-suave); border-radius: var(--radio-tarjeta);
  background: var(--color-superficie); }
.admin-metrica strong, .admin-metrica span { display: block; }
.admin-metrica strong { font-family: var(--fuente-editorial); font-size: 2rem; line-height: 1; }
.admin-metrica span { margin-top: .45rem; color: var(--color-texto); font-size: .82rem; font-weight: 700; }
.admin-seccion { padding: clamp(1.25rem, 2.7vw, 2rem);
  border: 1px solid var(--color-borde-suave); border-radius: var(--radio-tarjeta);
  background: var(--color-superficie); }
.admin-seccion-cab { display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1.25rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.admin-seccion-cab p { max-width: 52ch; margin: .45rem 0 0; color: var(--color-texto); }
.admin-seccion h2 { margin: 0; }
.admin-tabla { overflow-x: auto; }
.admin-tabla .table { min-width: 40rem; }
.admin-check { display: flex; align-items: center; gap: 8px; font-size: 14px; margin-bottom: 18px; }
.admin-cuenta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.admin-seccion-ancha { grid-column: 1 / -1; }
.dias-semana { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.sedes-admin { display: grid; gap: 16px; }
.sede-admin { padding: 1.2rem 1.4rem; border: 1px solid var(--color-borde-suave);
  border-radius: var(--radio-tarjeta); background: var(--color-superficie); }
.sede-admin-inactiva { opacity: .78; }
.sede-admin-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.sede-admin-cab h3 { margin: 0; }
.sede-admin-cab p { margin: .35rem 0 0; color: var(--color-texto); }
.sede-admin .horarios { display: grid; gap: 8px; margin: 1rem 0; }
.sede-admin .horario { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: .7rem .85rem; border: 1px solid var(--color-borde-suave);
  border-radius: var(--radio-control); }
.sede-admin .horario p { margin: 0; }
.sede-admin .horario-vacio { color: var(--color-texto); }

.admin-tabs-movil { display: none; }

@media (max-width: 1100px) {
  .admin-shell { grid-template-columns: 14rem minmax(0, 1fr); }
  .admin-cuenta { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 980px) {
  .admin-shell { display: block; }
  .admin-lado { display: none; }
  .admin-tabs-movil { position: sticky; z-index: 30; bottom: 0; display: grid;
    grid-template-columns: repeat(3, 1fr); gap: .35rem; padding: .55rem .75rem calc(.55rem + env(safe-area-inset-bottom));
    border-top: 1px solid var(--color-borde-suave); background: rgba(246, 248, 245, .96); }
  .admin-tabs-movil button { min-height: 48px; border: 0; border-radius: .55rem;
    background: transparent; color: var(--color-texto); font: inherit; font-weight: 700; cursor: pointer; }
  .admin-tabs-movil button[aria-selected="true"] { background: var(--color-petroleo-700); color: #fff; }
  .admin-metricas { grid-template-columns: minmax(0, 1fr); }
  .admin-seccion-cab { align-items: flex-start; flex-direction: column; }
  .admin-principal { padding-bottom: 6.5rem; }
}

/* ── 404 ───────────────────────────────────────────────────────────────────── */
.pagina-error { flex: 1; display: grid; place-items: center;
  padding: clamp(2rem, 7vw, 6rem) 0; }
.pagina-error-tarjeta { position: relative; isolation: isolate; width: 100%; min-height: 34rem;
  display: grid; grid-template-columns: minmax(17rem, .65fr) minmax(0, 1.35fr);
  overflow: hidden; border: 1px solid rgba(89, 112, 117, .55); border-radius: 1.5rem;
  background: var(--color-noche); color: #fff; box-shadow: 0 24px 70px rgba(11, 34, 49, .15); }
.pagina-error-tarjeta::before { content: ""; position: absolute; z-index: -1; inset: 0;
  background: linear-gradient(90deg, rgba(11, 34, 49, .94) 0%, rgba(11, 34, 49, .99) 48%, rgba(11, 34, 49, .68) 100%),
    url("/img/ondas-topograficas.png") center / cover no-repeat;
  background-image: linear-gradient(90deg, rgba(11, 34, 49, .94) 0%, rgba(11, 34, 49, .99) 48%, rgba(11, 34, 49, .68) 100%),
    var(--ilust-ondas); }
.pagina-error-numero { min-width: 0; display: grid; place-items: center; padding: 2rem;
  border-right: 1px solid rgba(220, 236, 239, .25); }
.pagina-error-numero span { display: block; font-family: var(--fuente-editorial); font-weight: 600;
  font-size: clamp(7rem, 17vw, 14rem); line-height: .8; letter-spacing: -.08em; color: rgba(255, 255, 255, .96); }
.pagina-error-contenido { min-width: 0; display: grid; align-content: center;
  padding: clamp(2rem, 6vw, 5rem); }
.pagina-error-contenido .eyebrow { color: #a9d3da; }
.pagina-error-contenido h1 { max-width: 16ch; margin: 0; color: #fff;
  font-size: var(--titulo-1); line-height: 1.08; letter-spacing: -.025em; }
.pagina-error-contenido > p { max-width: 43ch; margin: 1rem 0 0; color: #d5e3e7; }
.pagina-error-salidas { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.8rem; }
.pagina-error-salidas .btn-secondary { background: #fff; }
.pagina-error-secundaria { margin-top: 1.3rem; color: #c7dade; font-size: .82rem; }
.pagina-error-secundaria a { color: #fff; font-weight: 700; }
.cuerpo-error { min-height: 100vh; display: flex; flex-direction: column; }

.pagina-turno { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.turno-encabezado { margin-bottom: 1.8rem; }
.turno-encabezado h1 { max-width: 16ch; margin: 0; }
.turno-marco { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(21rem, .75fr);
  overflow: hidden; border: 1px solid rgba(89, 112, 117, .55); border-radius: 1.35rem;
  background: #fff; box-shadow: 0 24px 70px rgba(11, 34, 49, .13); }
.turno-marco [data-ficha] { min-width: 0; padding: clamp(2rem, 5vw, 4rem); }
.turno-marco [data-acciones],
.turno-marco [data-no-cancelable] { padding: clamp(2rem, 4vw, 3.5rem); }
.turno-marco > div:last-child { background: var(--color-petroleo-050);
  border-left: 1px solid var(--color-borde-suave); }

@media (max-width: 800px) {
  .turno-marco { grid-template-columns: 1fr; }
  .turno-marco > div:last-child { border-left: 0; border-top: 1px solid var(--color-borde-suave); }
}
@media (max-width: 760px) {
  .pagina-error-tarjeta { min-height: 0; grid-template-columns: 1fr; }
  .pagina-error-numero { min-height: 12rem; border-right: 0; border-bottom: 1px solid rgba(220, 236, 239, .25); }
  .pagina-error-numero span { font-size: 8rem; }
  .pagina-error-contenido { padding: 2.5rem 1.35rem; }
  .pagina-error-salidas { flex-direction: column; }
  .pagina-error-salidas .btn { width: 100%; }
}