/* ==========================================================================
   Medelia — sistema de diseño del sitio web
   Una sola hoja para TODO el sitio. Cada página nueva usa estas piezas;
   nadie inventa botones, barras ni viñetas por su cuenta.

   Reglas de la casa (Xim):
   1. Los botones van a la derecha de su fila              -> .acciones
      (excepción a propósito: los del panel de portada, alineados con su texto)
   2. Inputs, selects y botones miden lo mismo             -> --alto-control
   3. Cero fuentes de Google ni de terceros: todo se sirve desde /assets/fonts
   4. Todo el sitio en español
   5. Rediseño 21 oct 2026: fondo lila muy claro, tarjetas BLANCAS de radio
      grande con sombra lila suave, morado #5B45C4, tinta #2A2140, pie
      morado-noche con ola. Títulos Fraunces con acentos en <em> cursiva
      morada; cuerpo Manrope. (Antes: vidrio + Cormorant/Archivo.)

   PIEZAS REUTILIZABLES (para portada, agenda, portal…):
   .encabezado ............ cabecera común (la arma medelia.js; MENU_* viven ahí)
   .rotulo ................ etiqueta de sección en versalitas espaciadas («SERVICIOS»)
   .titulo-grande ......... título serif enorme; su <em> sale morado y cursivo
   .tarjeta-blanca ........ tarjeta blanca de radio grande (= .vidrio, ya blanco)
   .btn ................... botón de contorno (secundario)
   .btn--primario ......... morado        .btn--oscuro .... tinta casi negra
   .btn--claro ............ blanco (sobre noche)   .btn--chico .. compacto
   .btn--pildora .......... más redondo y compacto (cabecera)
   .chip / .chip--fuerte .. pastilla lila en versalitas («+ CONSULTAS…», «MÁS PEDIDO»)
   .icono-arco ............ ícono dentro de un arco (servicios); .icono-arco--lleno
   .icono-circulo ......... ícono en círculo lila (cómo trabajo, filas)
   .arco / .rayado ........ marco en arco para fotos / relleno rayado de «foto pendiente»
   .tarjeta-flotante ...... tarjetita blanca que flota sobre una foto
   .tarjeta-noche ......... tarjetita oscura («PRÓXIMA VISITA…»)
   .ola (+ --noche, --lila, --b) separador ondulado entre secciones
   .pie-noche ............. pie común (franja: Medelia · sanare et tueri + links + ©)
   .contacto-noche ........ bloque de contacto morado-noche de la portada
   .ventana ............... popup/modal genérico (<dialog class="ventana">)
   [data-ecg] ............. línea de ECG de borde a borde que termina en huellita
   ========================================================================== */

/* ---------- Tipografías locales (SIL OFL 1.1, ver fonts/OFL*.txt) ---------- */
@font-face { font-family: "Fraunces"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("../fonts/fraunces-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Fraunces"; font-weight: 500; font-style: normal; font-display: swap;
  src: url("../fonts/fraunces-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Fraunces"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("../fonts/fraunces-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Fraunces"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("../fonts/fraunces-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Fraunces"; font-weight: 400; font-style: italic; font-display: swap;
  src: url("../fonts/fraunces-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Fraunces"; font-weight: 500; font-style: italic; font-display: swap;
  src: url("../fonts/fraunces-500-italic.woff2") format("woff2"); }
@font-face { font-family: "Fraunces"; font-weight: 600; font-style: italic; font-display: swap;
  src: url("../fonts/fraunces-600-italic.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("../fonts/manrope-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-weight: 500; font-style: normal; font-display: swap;
  src: url("../fonts/manrope-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("../fonts/manrope-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("../fonts/manrope-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-weight: 800; font-style: normal; font-display: swap;
  src: url("../fonts/manrope-800-normal.woff2") format("woff2"); }
/* Cormorant se queda sólo para el lema «Sanare et tueri» */
@font-face { font-family: "Cormorant Garamond"; font-weight: 300; font-style: italic; font-display: swap;
  src: url("../fonts/cormorant-garamond-300-italic.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-weight: 300; font-style: normal; font-display: swap;
  src: url("../fonts/cormorant-garamond-300-normal.woff2") format("woff2"); }

/* ---------- Tokens ---------- */
:root {
  color-scheme: light;

  /* Fondos */
  --fondo:    #F6F3FB;   /* lila casi blanco: portada */
  --lila:     #EEE8F9;   /* lila claro: páginas internas y banda de servicios */
  --lila-2:   #E4DAF7;   /* lila marcado: bordes, rayas de foto pendiente */
  --lila-3:   #F2EDFC;   /* tinte suave: fondo de íconos y chips */
  --noche:    #2B2240;   /* pie, contacto, banda superior, tarjeta oscura */
  --noche-2:  #3A2F57;
  --lavanda-noche: #C9B8F4;   /* cursivas sobre noche */

  /* Morado y tinta */
  --morado:     #5B45C4;
  --morado-2:   #4C36B0;       /* hover */
  --titulo:     #2A2140;
  --ciruela:    #2A2140;       /* texto fuerte */
  --acento:     #5B45C4;       /* principal: botones, pestañas y chips elegidos */
  --acento-2:   #654FD0;       /* compañera de degradados (arriba) */
  --acento-3:   #4C36B0;       /* hover del principal */
  --acento-rgb: 91, 69, 196;
  --frio:       #5B45C4;       /* acentos de texto e iconos (nombre de antes) */
  --tinte:      91, 69, 196;   /* rgba(var(--tinte), .12) */
  --sombra-rgb: 70, 52, 140;
  --violeta:  var(--acento-2);
  --purpura:  var(--acento);
  --orquidea: var(--frio);
  --lavanda:  #F2EDF7;

  /* Texto */
  --tinta:   #2A2140;
  --tinta-2: rgba(42, 33, 64, 0.74);
  --tinta-3: rgba(42, 33, 64, 0.55);

  /* Superficies (los nombres «vidrio» se quedan: todo el sitio los usa; ya son blancas) */
  --vidrio-fondo:   #FFFFFF;
  --vidrio-fondo-2: #FFFFFF;
  --vidrio-hover:   #F8F5FE;
  --vidrio-borde:   #ECE6F8;
  --vidrio-linea:   rgba(var(--tinte), 0.14);
  --vidrio-blur:    none;
  --vidrio-sombra:  0 30px 60px -34px rgba(var(--sombra-rgb), 0.34),
                    0 2px 8px -4px rgba(var(--sombra-rgb), 0.08);
  --campo-fondo:    #FBFAFE;
  --campo-borde:    rgba(var(--tinte), 0.22);

  /* Tipografía */
  --f-titulo: "Fraunces", "Iowan Old Style", Georgia, serif;
  --f-texto:  "Manrope", -apple-system, "Segoe UI", sans-serif;
  --f-lema:   "Cormorant Garamond", "Iowan Old Style", Georgia, serif;

  /* Medidas */
  --alto-control: 46px;   /* botones = inputs = selects */
  --alto-barra:   64px;
  --alto-aviso:   36px;   /* banda oscura de arriba */
  --radio:        26px;
  --radio-control: 999px;
  --ancho:        1160px;
  --gutter:       clamp(16px, 4vw, 40px);
  --suave:        cubic-bezier(.2, .7, .2, 1);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--f-texto);
  font-size: 16px;
  line-height: 1.65;
  color: var(--tinta);
  background-color: var(--lila);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* El pie morado-noche es SIEMPRE lo último, pegado al fondo de la ventana aunque la
   página sea corta (Xim, 21 oct 2026: quedaba una franja lila vacía debajo).
   La ola del pie se empuja hacia abajo (margin-top: auto); el aire de arriba lo da main. */
body:has(> .pie-noche) { display: flex; flex-direction: column; }
body:has(> .pie-noche) > .ola--noche { margin-top: auto; flex: none; }
body:has(> .pie-noche):not(:has(.contacto-noche)) > main { margin-bottom: clamp(3rem, 7vw, 5rem); }
.pie-noche { margin-bottom: 0; }
img, svg { display: block; max-width: 100%; }
a { color: var(--orquidea); text-decoration-thickness: 1px; text-underline-offset: 3px; }
::selection { background: var(--morado); color: #fff; }
:focus-visible { outline: 2px solid var(--orquidea); outline-offset: 3px; }

h1, h2, h3 {
  font-family: var(--f-titulo);
  font-weight: 500;
  color: var(--titulo);
  line-height: 1.06;
  margin: 0 0 .5em;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
h2 { font-size: clamp(2.2rem, 4.4vw, 3.5rem); }
h3 { font-size: 1.7rem; font-weight: 600; letter-spacing: -0.015em; }
h1 em, h2 em, h3 em, .titulo-grande em { font-style: italic; font-weight: 500; color: var(--orquidea); }
p  { margin: 0 0 1em; text-wrap: pretty; }

.contenedor { width: min(var(--ancho), 100% - 2 * var(--gutter)); margin-inline: auto; }

/* Rótulo: la etiqueta de sección en versalitas espaciadas («SERVICIOS») */
.rotulo {
  display: inline-block;
  font: 700 .72rem/1.4 var(--f-texto);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--orquidea);
  margin-bottom: .9rem;
}
/* Título serif grande; su <em> sale morado y cursivo */
.titulo-grande { font-size: clamp(2.4rem, 5vw, 3.9rem); line-height: 1.02; letter-spacing: -0.03em; }
.lema { font-family: var(--f-lema); font-style: italic; font-weight: 300; color: var(--orquidea); }
.tenue { color: var(--tinta-2); }

/* ---------- Fondo de las páginas internas ----------
   Capa fija detrás de todo: lila claro parejo con una luz suave arriba a la izquierda.
   Las esferas flotantes de antes ya no se ven (el HTML que quede no estorba). */
.fondo { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  background:
    radial-gradient(50vmax 30vmax at 0% 0%, rgba(214, 198, 248, .55), transparent 70%),
    radial-gradient(40vmax 30vmax at 100% 100%, rgba(255, 255, 255, .55), transparent 70%),
    var(--lila);
}
.flotante, .anillo, .chispa { display: none; }
.campo[hidden] { display: none; }

/* ---------- Superficie base: tarjeta blanca ----------
   .vidrio se queda como nombre (agenda, portal y panel lo usan); ya no es vidrio. */
.vidrio, .tarjeta-blanca {
  background: #fff;
  border: 1px solid var(--vidrio-borde);
  box-shadow: var(--vidrio-sombra);
  border-radius: var(--radio);
}

/* ---------- LA barra (pie viejo del panel interno) ---------- */
.barra {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  min-height: var(--alto-barra);
  padding: 8px 8px 8px 26px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--vidrio-borde);
  box-shadow: var(--vidrio-sombra);
}
.barra__acciones { margin-left: auto; display: flex; gap: .5rem; align-items: center; }

/* Menú de huellita viejo: sólo lo usa el panel interno (admin.html) */
.cabecera { position: fixed; top: 16px; right: clamp(12px, 2.2vw, 28px); z-index: 20; }
.cabecera__menu { position: relative; }

.marca { display: flex; align-items: baseline; gap: .6rem; text-decoration: none; transition: opacity .4s; }
.marca--esquina { position: absolute; top: 16px; left: calc(clamp(12px, 2.2vw, 28px) + 76px); z-index: 20; min-height: 48px; align-items: center; }
@media (max-width: 700px) { .marca--esquina { left: clamp(12px, 2.2vw, 28px); } }
.marca__nombre {
  font-family: var(--f-titulo);
  font-size: 1.75rem;
  font-weight: 500;
  color: var(--titulo);
  letter-spacing: -.02em;
  line-height: 1;
}
.marca__lema { font: italic 500 1rem/1 var(--f-titulo); color: var(--lavanda-noche); letter-spacing: 0; }

/* ==========================================================================
   Cabecera común (imagen 1). La arma medelia.js con MENU_VISITA / MENU_SESION;
   el HTML de cada página trae sólo el respaldo sin JS.
   <header class="encabezado" [data-activo="agendar"]>
     <div class="encabezado__aviso">…</div>
     <div class="encabezado__barra"><div class="encabezado__fila contenedor">
       <a class="marca">…</a> <button class="encabezado__menu">…</button>
       <nav class="encabezado__nav">…</nav> <div class="encabezado__acciones">…</div>
   ========================================================================== */
/* La banda oscura sólo vive en la portada (Xim, 21 oct 2026); sin ella la barra se pega arriba */
.encabezado { position: sticky; top: 0; z-index: 30; }
.encabezado:has(> .encabezado__aviso) { top: calc(-1 * var(--alto-aviso)); }
.encabezado__aviso {
  height: var(--alto-aviso); display: grid; place-items: center; padding: 0 1rem;
  background: var(--noche); color: #fff;
  font: 500 .8rem/1.2 var(--f-texto); letter-spacing: .01em; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.encabezado__barra {
  position: relative;
  background:
    radial-gradient(34rem 9rem at 0% 50%, rgba(214, 198, 248, .85), transparent 70%),
    #F6F3FB;
}
.encabezado__fila { display: flex; align-items: center; gap: 1.5rem; min-height: 76px; }
.encabezado .marca {
  flex: none; overflow: hidden; white-space: nowrap;
  /* En la portada aparece cuando el «Medelia» grande se va (--marca lo pone medelia.js) */
  opacity: var(--marca, 1); max-width: calc(var(--marca, 1) * 10rem);
  margin-right: calc(var(--marca, 1) * .6rem - 1.5rem * (1 - var(--marca, 1)));
}
.encabezado__nav { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 1.6rem); }
.encabezado__nav a {
  position: relative; color: var(--tinta-2); text-decoration: none;
  font: 500 .95rem/1 var(--f-texto); padding: .55rem 0; white-space: nowrap;
  transition: color .2s;
}
.encabezado__nav a:hover { color: var(--tinta); }
/* El link activo: NEGRITAS MORADAS (pedido de Xim) */
.encabezado__nav a[aria-current] { color: var(--morado); font-weight: 800; }
.encabezado__acciones { margin-left: auto; display: flex; align-items: center; gap: 1.1rem; }
.encabezado__link { color: var(--tinta); text-decoration: none; font: 600 .95rem/1 var(--f-texto); white-space: nowrap; }
.encabezado__link:hover { color: var(--morado); }
.solo-movil { display: none !important; }
/* Botón de menú (sólo en celular): tres rayitas que se vuelven ✕ */
.encabezado__menu {
  display: none; place-items: center; flex: none;
  width: 42px; height: 42px; padding: 0; border-radius: 50%;
  border: 1px solid rgba(var(--tinte), .25); background: #fff; color: var(--tinta); cursor: pointer;
}
.encabezado__menu span, .encabezado__menu span::before, .encabezado__menu span::after {
  display: block; width: 16px; height: 1.6px; border-radius: 2px; background: currentColor; transition: transform .3s var(--suave), opacity .2s;
}
.encabezado__menu span { position: relative; }
.encabezado__menu span::before, .encabezado__menu span::after { content: ""; position: absolute; left: 0; }
.encabezado__menu span::before { top: -5px; }
.encabezado__menu span::after { top: 5px; }
.encabezado__menu[aria-expanded="true"] span { background: transparent; }
.encabezado__menu[aria-expanded="true"] span::before { transform: translateY(5px) rotate(45deg); }
.encabezado__menu[aria-expanded="true"] span::after { transform: translateY(-5px) rotate(-45deg); }

/* «Mi cuenta» con la inicial en cursiva, y su desplegable */
.cuenta-pildora { position: relative; }
.cuenta-pildora__boton {
  display: inline-flex; align-items: center; gap: .55rem; height: 42px; padding: 0 1rem 0 5px;
  border-radius: 999px; border: 1px solid rgba(var(--tinte), .28); background: #fff; cursor: pointer;
  font: 600 .92rem/1 var(--f-texto); color: var(--tinta);
}
.cuenta-pildora__inicial {
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: var(--lila-3); color: var(--morado); font: italic 600 1.05rem/1 var(--f-titulo);
}
.desplegable {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 40; min-width: 210px; padding: 6px;
  border-radius: 18px; background: #fff; border: 1px solid var(--vidrio-borde);
  box-shadow: 0 24px 50px -22px rgba(var(--sombra-rgb), .45);
}
.desplegable[hidden] { display: none; }
.desplegable a { display: block; padding: .7rem .9rem; border-radius: 12px; color: var(--tinta); text-decoration: none; font-weight: 500; }
.desplegable a:hover, .desplegable a:focus-visible { background: var(--lila-3); color: var(--morado); outline: none; }

@media (max-width: 900px) {
  .encabezado__fila { gap: .7rem; min-height: 64px; }
  .encabezado .marca { opacity: 1; max-width: none; margin-right: 0; }
  .marca__nombre { font-size: 1.5rem; }
  .encabezado__menu { display: grid; order: 3; }
  .encabezado__acciones { gap: .5rem; }
  .encabezado__acciones .encabezado__link { display: none; }
  .solo-movil { display: block !important; }
  .cuenta-pildora__texto { display: none; }
  .cuenta-pildora__boton { padding: 0 4px; }
  .encabezado__nav {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: .6rem var(--gutter) 1rem;
    background: #FBF9FE; border-bottom: 1px solid var(--vidrio-borde);
    box-shadow: 0 30px 40px -30px rgba(var(--sombra-rgb), .45);
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity .25s var(--suave), transform .3s var(--suave), visibility 0s .3s;
  }
  .encabezado__nav.abierto { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .encabezado__nav a { padding: .95rem .2rem; font-size: 1.05rem; border-bottom: 1px solid rgba(var(--tinte), .08); }
  .encabezado__nav a:last-child { border-bottom: 0; }
}
@media (max-width: 420px) {
  .encabezado__aviso { font-size: .7rem; }
  .encabezado__acciones .btn { padding: 0 .95rem; }
}

/* ---------- Botones ---------- */
.acciones {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;   /* a la derecha */
  gap: .6rem;
  margin-top: 1.75rem;
}
.acciones--inicio { justify-content: flex-start; }
/* .btn = contorno (secundario). Los demás son variantes */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  height: var(--alto-control);
  padding: 0 1.5rem;
  border-radius: var(--radio-control);
  font: 700 .95rem/1 var(--f-texto);
  letter-spacing: .005em;
  text-decoration: none;
  color: var(--tinta);
  cursor: pointer;
  white-space: nowrap;
  background: #fff;
  border: 1px solid rgba(var(--tinte), .30);
  transition: transform .2s var(--suave), background .25s, border-color .25s, box-shadow .25s, color .25s;
}
.btn[hidden] { display: none; }
.btn:hover { border-color: rgba(var(--tinte), .55); background: var(--vidrio-hover); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--contorno { background: transparent; }
.btn--primario {
  background: var(--morado); border-color: var(--morado); color: #fff;
  box-shadow: 0 14px 28px -14px rgba(var(--acento-rgb), .75);
}
.btn--primario:hover { background: var(--morado-2); border-color: var(--morado-2); box-shadow: 0 18px 32px -14px rgba(var(--acento-rgb), .85); }
.btn--oscuro { background: var(--noche); border-color: var(--noche); color: #fff; box-shadow: 0 14px 28px -16px rgba(43, 34, 64, .8); }
.btn--oscuro:hover { background: var(--noche-2); border-color: var(--noche-2); }
.btn--claro { background: #fff; border-color: #fff; color: var(--tinta); }
.btn--claro:hover { background: var(--lila-3); border-color: var(--lila-3); }
.btn--grande { height: 52px; padding: 0 1.7rem; font-size: 1rem; }
.btn--chico { height: 38px; padding: 0 1.1rem; font-size: .88rem; }
.btn--pildora { height: 42px; padding: 0 1.4rem; }
.btn .flecha { transition: transform .25s var(--suave); }
.btn:hover .flecha { transform: translateX(3px); }

/* ---------- Chip: pastilla lila en versalitas ---------- */
.chip {
  display: inline-flex; align-items: center; gap: .5rem; height: 30px; padding: 0 .95rem;
  border-radius: 999px; background: var(--lila-2); color: var(--morado);
  font: 700 .7rem/1 var(--f-texto); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
}
.chip--suave { background: var(--lila-3); }
.chip--fuerte { background: var(--morado); color: #fff; }

/* ---------- Íconos ---------- */
.icono-arco {
  width: 66px; height: 80px; display: grid; place-items: center;
  border-radius: 33px 33px 14px 14px; background: var(--lila-3); color: var(--morado);
}
.icono-arco svg { width: 24px; height: 24px; }
.icono-arco--lleno { background: var(--morado); color: #fff; box-shadow: 0 16px 30px -16px rgba(var(--acento-rgb), .8); }
.icono-circulo {
  width: 52px; height: 52px; flex: none; display: grid; place-items: center;
  border-radius: 50%; background: var(--lila-2); color: var(--morado);
}
.icono-circulo svg { width: 22px; height: 22px; }

/* ---------- Fotos: arco + relleno rayado mientras no hay foto ---------- */
.arco {
  position: relative; overflow: hidden;
  border-radius: 999px 999px 28px 28px;
  border: 8px solid #fff; background: var(--lila-3);
  box-shadow: 0 40px 70px -40px rgba(var(--sombra-rgb), .55);
}
.arco > img, .arco__foto > img, .arco .foto-xim { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.arco__foto { position: absolute; inset: 0; }
.rayado {
  display: grid; place-items: center; text-align: center; padding: 1.5rem;
  background: repeating-linear-gradient(135deg, #EAE2F8 0 22px, #E0D5F5 22px 44px);
  color: rgba(42, 33, 64, .55); font: 700 .72rem/1.5 var(--f-texto); letter-spacing: .16em; text-transform: uppercase;
}
.rayado--noche {
  background: repeating-linear-gradient(135deg, #4D3F72 0 26px, #554679 26px 52px);
  color: rgba(255, 255, 255, .78);
}
.circulo-foto {
  position: absolute; overflow: hidden; border-radius: 50%; border: 6px solid #fff;
  box-shadow: 0 20px 40px -20px rgba(var(--sombra-rgb), .55);
}
.circulo-foto .rayado { width: 100%; height: 100%; font-size: .6rem; letter-spacing: .1em; }

/* Tarjetitas que flotan sobre una foto */
.tarjeta-flotante {
  display: flex; align-items: center; gap: .8rem; padding: .8rem 1.1rem .8rem .8rem;
  border-radius: 16px; background: #fff; border: 1px solid var(--vidrio-borde);
  box-shadow: 0 24px 46px -24px rgba(var(--sombra-rgb), .5);
  line-height: 1.3;
}
.tarjeta-flotante strong { display: block; font: 700 .9rem/1.3 var(--f-texto); color: var(--tinta); }
.tarjeta-flotante small { display: block; font-size: .74rem; color: var(--tinta-3); }
.tarjeta-flotante__icono { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 10px; background: var(--lila-3); color: var(--morado); }
.tarjeta-flotante__icono svg { width: 16px; height: 16px; }
.tarjeta-noche {
  padding: 1rem 1.2rem 1.05rem; border-radius: 16px; background: var(--noche); color: #fff;
  box-shadow: 0 30px 50px -24px rgba(43, 34, 64, .75); line-height: 1.3;
}
.tarjeta-noche .rotulo { color: var(--lavanda-noche); font-size: .62rem; margin-bottom: .45rem; }
.tarjeta-noche strong { display: block; font: 600 1.45rem/1.1 var(--f-titulo); letter-spacing: -.01em; }
.tarjeta-noche small { display: flex; align-items: center; gap: .4rem; margin-top: .55rem; font-size: .78rem; color: rgba(255,255,255,.8); }
.tarjeta-noche small svg { width: 13px; height: 13px; }

/* ---------- Ola: separador ondulado ----------
   <div class="ola ola--noche" aria-hidden="true"></div> justo antes de la sección
   del color de la ola. --lila / --noche / --fondo pintan la ola; --b es la otra forma. */
.ola {
  --ola: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0 42C300 -4 640 6 1000 64C1190 84 1340 40 1440 18V100H0Z'/%3E%3C/svg%3E");
  display: block; height: clamp(44px, 7vw, 96px); margin-bottom: -1px;
  background: var(--ola-color, var(--noche));
  -webkit-mask: var(--ola) center bottom / 100% 100% no-repeat;
  mask: var(--ola) center bottom / 100% 100% no-repeat;
}
.ola--b {
  --ola: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0 78C240 30 420 22 640 58C900 100 1180 92 1440 52V100H0Z'/%3E%3C/svg%3E");
}
.ola--noche { --ola-color: var(--noche); }
.ola--lila { --ola-color: var(--lila); }
.ola--fondo { --ola-color: var(--fondo); }

/* ---------- Línea de ECG que termina en huellita (la arma medelia.js) ----------
   <div class="ecg" data-ecg></div> — ocupa TODO el ancho de la pantalla.
   Se dibuja con stroke-dashoffset al aparecer (clase .ecg--dibujar). */
.ecg { position: relative; width: 100vw; height: 96px; margin-left: calc(50% - 50vw); pointer-events: none; }
.ecg svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ecg path { fill: none; stroke: var(--morado); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.ecg .ecg__linea { opacity: .78; }
.ecg .ecg__huella path { stroke-width: inherit; }
.ecg--dibujar .ecg__linea { animation: ecg-trazo 2.6s cubic-bezier(.45, .05, .35, 1) forwards; }
.ecg--dibujar .ecg__huella > * { animation: ecg-trazo .9s ease-out forwards; animation-delay: calc(2.45s + var(--n, 0) * .12s); }
@keyframes ecg-trazo { from { stroke-dashoffset: var(--largo, 0); } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .ecg path { stroke-dashoffset: 0 !important; animation: none !important; }
}

/* ---------- Pie común (morado-noche) ----------
   Internas: <div class="ola ola--noche"></div><footer class="pie-noche">franja</footer>
   Portada: además el bloque .contacto-noche antes de la franja. */
.pie-noche { background: var(--noche); color: rgba(255, 255, 255, .82); }
.pie-noche__franja {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem;
  padding: 1.9rem 0 2.2rem; font-size: .84rem;
}
.contacto-noche + .pie-noche .pie-noche__franja { border-top: 1px solid rgba(255, 255, 255, .14); }
.pie-noche .marca__nombre { color: #fff; font-size: 1.5rem; }
.pie-noche .marca { align-items: baseline; gap: .35rem; }
.pie-noche nav { display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; margin-left: auto; margin-right: auto; }
.pie-noche nav a, .pie-noche__copy { color: rgba(255, 255, 255, .82); text-decoration: none; }
.pie-noche nav a:hover { color: #fff; }
.pie-noche__copy { margin-left: auto; }
.pie-noche nav + .pie-noche__copy { margin-left: 0; }

.contacto-noche { background: var(--noche); color: #fff; padding: clamp(2.5rem, 5vw, 3.5rem) 0 clamp(3rem, 6vw, 4.5rem); }
.contacto-noche .rotulo { color: var(--lavanda-noche); }
.contacto-noche h2 { color: #fff; margin: 0; }
.contacto-noche h2 em { color: var(--lavanda-noche); }
.contacto-noche__cabeza { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem 2rem; padding-bottom: clamp(2rem, 4vw, 3.5rem); border-bottom: 1px solid rgba(255, 255, 255, .16); }
.contacto-noche__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.contacto-noche__col { padding: 2.2rem 1.8rem 2.6rem; }
.contacto-noche__col:first-child { padding-left: 0; }
.contacto-noche__col + .contacto-noche__col { border-left: 1px solid rgba(255, 255, 255, .16); }
.contacto-noche__col > svg { width: 22px; height: 22px; color: var(--lavanda-noche); margin-bottom: 1.6rem; }
.contacto-noche__col .rotulo { font-size: .66rem; margin-bottom: .5rem; }
/* El WhatsApp (lo pone medelia.js desde maqueta-contacto.js) se lee como el resto de la columna */
.contacto-noche__col [data-contacto-numero] a { color: inherit; text-decoration: none; }
.contacto-noche__col [data-contacto-numero] a:hover { color: var(--lavanda-noche); }
.contacto-noche__col strong { display: block; font: 600 1.45rem/1.2 var(--f-titulo); color: #fff; letter-spacing: -.01em; }
.contacto-noche__col strong.apagado { color: var(--lavanda-noche); }
.contacto-noche__col small { display: block; margin-top: .3rem; font-size: .84rem; color: rgba(255, 255, 255, .72); }
.redes { list-style: none; margin: 0; padding: 0; }
.redes a {
  display: flex; justify-content: space-between; align-items: center; padding: .6rem 0;
  color: #fff; text-decoration: none; font-weight: 700; font-size: .92rem;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
}
.redes li:first-child a { padding-top: 0; }
.redes li:last-child a { border-bottom: 0; }
.redes a span { color: rgba(255, 255, 255, .6); transition: transform .25s var(--suave), color .2s; }
.redes a:hover span { color: #fff; transform: translate(2px, -2px); }
@media (max-width: 900px) {
  .contacto-noche__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contacto-noche__col:nth-child(3) { padding-left: 0; border-left: 0; }
  .contacto-noche__col:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, .16); }
}
@media (max-width: 560px) {
  .contacto-noche__cols { grid-template-columns: 1fr; }
  .contacto-noche__col, .contacto-noche__col:nth-child(3) { padding: 1.6rem 0; border-left: 0 !important; }
  .contacto-noche__col + .contacto-noche__col { border-top: 1px solid rgba(255, 255, 255, .16); }
  .contacto-noche__col > svg { margin-bottom: 1rem; }
  .pie-noche nav { margin: 0; width: 100%; }
  .pie-noche__copy { margin-left: 0; }
}

/* ---------- Menú de la huellita (sólo panel interno) ---------- */
.menu-boton { background: #fff; }
.menu-boton .huella { width: 20px; height: 20px; color: var(--orquidea); }
.menu-boton .chevron { width: 12px; height: 12px; transition: transform .3s var(--suave); opacity: .8; }
.menu-boton[aria-expanded="true"] { background: var(--vidrio-hover); border-color: rgba(var(--tinte), .35); }
.menu-boton[aria-expanded="true"] .chevron { transform: rotate(180deg); }

.menu-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 300px;
  max-width: calc(100vw - 24px);
  padding: 8px;
  border-radius: 22px;
  background: #fff;
  border: 1px solid var(--vidrio-borde);
  box-shadow: var(--vidrio-sombra);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(.98);
  transform-origin: top right;
  transition: opacity .25s var(--suave), transform .3s var(--suave), visibility 0s .3s;
}
.menu-panel.abierto { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.menu-panel a {
  display: flex; align-items: center; justify-content: space-between;
  padding: .85rem 1rem;
  border-radius: 14px;
  color: var(--tinta);
  text-decoration: none;
  font-weight: 500;
  transition: background .2s;
}
.menu-panel a:hover, .menu-panel a:focus-visible { background: var(--vidrio-hover); outline: none; }
.menu-panel a small { display: block; font-weight: 400; font-size: .8rem; color: var(--tinta-3); }
.menu-panel a .flecha { color: var(--orquidea); transition: transform .25s var(--suave); }
.menu-panel a:hover .flecha { transform: translateX(3px); }
.menu-panel hr { border: 0; height: 1px; background: var(--vidrio-linea); margin: 6px 10px; }

/* ---------- Viñetas ---------- */
.lista-vidrio {
  --chispa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0C12.6 7.4 14.2 11.2 24 12C14.2 12.8 12.6 16.6 12 24C11.4 16.6 9.8 12.8 0 12C9.8 11.2 11.4 7.4 12 0Z'/%3E%3C/svg%3E");
  list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; }
.lista-vidrio > li { position: relative; padding-left: 2.6rem; }
.lista-vidrio > li::before {
  content: "";
  position: absolute; left: .1rem; top: .08em;
  width: 1.3rem; height: 1.3rem;
  background: var(--morado);
  -webkit-mask: var(--chispa) center / contain no-repeat;
  mask: var(--chispa) center / contain no-repeat;
}
.lista-vidrio strong { display: block; font-weight: 700; color: var(--ciruela); }

/* ---------- Secciones ---------- */
.seccion { padding-block: clamp(4.5rem, 10vw, 8rem); }
.seccion__cabeza { max-width: 44rem; margin-bottom: 3rem; }
.seccion__cabeza--centro { max-width: 62rem; margin-inline: auto; text-align: center; }
.rejilla { display: grid; gap: 1.5rem; }
.rejilla--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.tarjeta { padding: clamp(1.6rem, 4vw, 2.6rem); }

/* Aparecer al hacer scroll (medelia.js las hace flotar al ritmo del scroll) */
.js [data-revelar] { opacity: 0; will-change: transform, opacity; }
.js [data-revelar].visible { opacity: 1; transform: none; }

/* ---------- Formularios (regla 4: misma altura que los botones) ---------- */
.campos { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.campo { display: grid; gap: .45rem; }
.campo--ancho { grid-column: 1 / -1; }
.campo label { font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-2); }
/* Un <label class="btn"> (subir archivo) dentro de .campo sigue siendo botón: sin esto,
   «.campo label» le gana y deja texto oscuro sobre el principal negro */
.campo label.btn { font: 500 .95rem/1 var(--f-texto); letter-spacing: .02em; text-transform: none; color: var(--ciruela); }
.campo label.btn--primario { color: #fff; }
/* Precios: sólo la cantidad va en violeta frío; «Desde» se queda como está */
.precio-monto { color: var(--frio); }
.campo input, .campo select, .campo textarea {
  width: 100%;
  height: var(--alto-control);
  padding: 0 1.1rem;
  border-radius: 14px;
  border: 1px solid var(--campo-borde);
  background: var(--campo-fondo);
  font: 400 1rem var(--f-texto);
  color: var(--tinta);
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.campo input::placeholder, .campo textarea::placeholder { color: var(--tinta-3); }
/* Sin las flechitas nativas en números: se ven chiquitas y fuera de estilo (para subir/bajar, .paso) */
.campo input[type=number] { -moz-appearance: textfield; appearance: textfield; }
.campo input[type=number]::-webkit-inner-spin-button, .campo input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.campo select {
  -webkit-appearance: none; appearance: none;
  padding-right: 2.6rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2344206E' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.1rem center;
}
.campo select option { background: #fff; color: var(--tinta); }

/* Selector propio, blanco con morado (pedido de Xim, 12 oct 2026): reemplaza al menú
   nativo, que no se deja pintar. <select data-selector> y medelia.js arma el resto;
   el <select> se queda escondido debajo para el valor, el name y el «required». */
.selector { position: relative; }
.selector__nativo { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.selector__boton {
  display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  width: 100%; height: var(--alto-control); padding: 0 1.1rem;
  border-radius: 14px; border: 1px solid rgba(var(--tinte), .28); background: #fff;
  font: 400 1rem var(--f-texto); color: var(--tinta); text-align: left; cursor: pointer;
  transition: border-color .2s, box-shadow .2s;
}
.selector__boton span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.selector__boton[data-vacio] span { color: var(--tinta-3); }
.selector__boton::after {
  content: ""; flex: none; width: 12px; height: 8px; transition: transform .2s var(--suave);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%235B45C4' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
}
.selector__boton[aria-expanded="true"]::after { transform: rotate(180deg); }
.selector__boton:focus-visible, .selector__boton[aria-expanded="true"] {
  outline: none; border-color: var(--frio); box-shadow: 0 0 0 4px rgba(var(--tinte), .16);
}
.selector__lista {
  position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; right: 0;
  margin: 0; padding: 6px; list-style: none; max-height: calc(3 * 2.6rem + 12px); overflow-y: auto; overscroll-behavior: contain;   /* 3 opciones a la vista, el resto con scroll */
  border-radius: 16px; background: #fff; border: 1px solid rgba(var(--tinte), .22);
  box-shadow: 0 22px 50px -20px rgba(var(--sombra-rgb), .40);
}
.selector__lista[hidden] { display: none; }
.selector__lista li { padding: .65rem .85rem; border-radius: 11px; cursor: pointer; color: var(--tinta); line-height: 1.3rem; }
/* Una sola marcada: el mouse mueve la «activa» (medelia.js), así no se encienden dos */
.selector__lista li.activa { background: rgba(var(--tinte), .10); color: var(--frio); }
.selector__lista li[aria-selected="true"] { background: var(--frio); color: #fff; font-weight: 500; }
.campo textarea { height: auto; min-height: 7rem; padding: .8rem 1.1rem; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none; border-color: var(--orquidea); background: #fff;
  box-shadow: 0 0 0 4px rgba(var(--tinte), .16);
}

/* Paso: número con − / + de vidrio y su unidad (km, min…). Misma altura que todo
   control; reemplaza las flechitas nativas del navegador, que se ven chiquitas.
   <div class="paso"><button data-paso="-1">−</button><input type="number"><span class="paso__unidad">km</span><button data-paso="1">+</button></div> */
.paso {
  display: inline-flex; align-items: center; gap: 2px;
  height: var(--alto-control); padding: 4px;
  border-radius: var(--radio-control);
  background: var(--campo-fondo);
  border: 1px solid var(--campo-borde);
  box-shadow: 0 1px 0 rgba(255,255,255,.95) inset, 0 10px 24px -16px rgba(var(--sombra-rgb), .35);
  transition: border-color .2s, box-shadow .2s;
}
.paso:focus-within { border-color: var(--orquidea); box-shadow: 0 0 0 4px rgba(var(--tinte), .16); }
.paso input {
  width: 3.4ch; min-width: 0; border: 0; background: none; outline: none; padding: 0;
  text-align: right; font: 600 1.15rem var(--f-texto); color: var(--ciruela);
  -moz-appearance: textfield; appearance: textfield;
}
.paso input::-webkit-inner-spin-button, .paso input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.paso__unidad { padding: 0 .55rem 0 .3rem; font-size: .8rem; letter-spacing: .04em; color: var(--tinta-3); }
.paso button {
  flex: none; display: grid; place-items: center;
  width: calc(var(--alto-control) - 10px); height: 100%;
  border-radius: calc(var(--radio-control) - 4px);
  border: 1px solid var(--vidrio-borde); background: var(--vidrio-fondo-2);
  font: 500 1.15rem/1 var(--f-texto); color: var(--ciruela); cursor: pointer;
  transition: background .2s, transform .15s;
}
.paso button:hover { background: rgba(255,255,255,.95); }
.paso button:active { transform: scale(.92); }
.paso button:focus-visible { outline: 2px solid var(--orquidea); outline-offset: 2px; }

/* Segmentos: elegir UNA opción entre pocas (servicio, sí/no). Vidrio, misma altura
   que los demás controles. Sirve con <button aria-pressed> o con radios ocultos. */
.segmentos {
  display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px;
  width: fit-content; max-width: 100%;
  border-radius: var(--radio-control);
  background: var(--lila-3);
  border: 1px solid var(--vidrio-borde);
}
.segmentos button, .segmentos label {
  display: inline-flex; align-items: center; justify-content: center;
  height: calc(var(--alto-control) - 10px); padding: 0 1.15rem;
  border: 0; border-radius: var(--radio-control); background: transparent;
  font: 500 .92rem/1 var(--f-texto); color: var(--tinta-2); letter-spacing: .01em;
  cursor: pointer; transition: background .25s, color .25s, box-shadow .25s;
}
.segmentos button:hover, .segmentos label:hover { color: var(--ciruela); background: rgba(255,255,255,.8); }
.segmentos input { position: absolute; opacity: 0; pointer-events: none; }
/* Elegido = el mismo púrpura de los botones principales (Xim, 27 sep 2026) */
.segmentos button[aria-pressed="true"], .segmentos label:has(input:checked) {
  background: linear-gradient(180deg, var(--acento-2), var(--acento)); color: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 8px 18px -8px rgba(var(--acento-rgb), .65);
}
.segmentos label:has(input:focus-visible) { outline: 2px solid var(--orquidea); outline-offset: 2px; }

/* Opciones tipo quiz: una fila de vidrio por respuesta, a todo lo ancho.
   Radios ocultos; la elegida se pinta del púrpura de los botones principales. */
.opciones { display: grid; gap: .6rem; }
.opciones label {
  display: flex; align-items: center; gap: .9rem;
  min-height: var(--alto-control); padding: .7rem 1.1rem;
  border-radius: 16px; cursor: pointer;
  background: var(--campo-fondo); border: 1px solid var(--campo-borde);
  font-weight: 500; color: var(--ciruela);
  transition: background .2s, color .2s, box-shadow .25s, transform .2s var(--suave);
}
.opciones label:hover { background: var(--vidrio-hover); transform: translateX(3px); }
.opciones input { position: absolute; opacity: 0; pointer-events: none; }
.opciones .marca-op {             /* el circulito de la izquierda */
  flex: none; width: 20px; height: 20px; border-radius: 50%;
  border: 1.5px solid rgba(var(--tinte), .40); display: grid; place-items: center;
  transition: border-color .2s, background .2s;
}
.opciones .marca-op::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #fff; transform: scale(0); transition: transform .25s var(--suave); }
.opciones label:has(input:checked) {
  background: linear-gradient(180deg, var(--acento-2), var(--acento)); color: #fff;
  border-color: rgba(255,255,255,.4);
  box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 12px 26px -14px rgba(var(--acento-rgb), .75);
}
.opciones label:has(input:checked) .marca-op { border-color: #fff; }
.opciones label:has(input:checked) .marca-op::after { transform: scale(1); }
.opciones label:has(input:focus-visible) { outline: 2px solid var(--orquidea); outline-offset: 2px; }

/* Filas con icono: tarjeta con cabeza (icono + título) y filas lilas, cada una con
   su icono en un cuadrito blanco. Sin flechas (Xim, 27 sep 2026). Si la fila es un
   link (<a class="fila">) se mueve un poquito al pasar el cursor. */
.tarjeta__cabeza { display: flex; align-items: center; gap: .8rem; margin-bottom: 1.2rem; }
.tarjeta__cabeza > svg { flex: none; width: 26px; height: 26px; color: var(--orquidea); }
.tarjeta__cabeza h3 { margin: 0; font-size: 1.6rem; line-height: 1.05; }
.tarjeta__cabeza small { display: block; font-size: .82rem; color: var(--tinta-3); margin-top: .15rem; }
.filas { display: grid; gap: .6rem; }
.fila {
  display: flex; align-items: center; gap: .9rem;
  padding: .7rem .9rem; border-radius: 18px;
  background: rgba(var(--tinte), .08); border: 1px solid rgba(255,255,255,.75);
  color: var(--ciruela); text-decoration: none;
  transition: background .2s, transform .2s var(--suave);
}
a.fila:hover { background: rgba(var(--tinte), .15); transform: translateX(3px); }
.fila__icono {
  flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  background: #fff; color: var(--orquidea); box-shadow: 0 6px 14px -8px rgba(var(--sombra-rgb), .35);
}
.fila__icono svg { width: 20px; height: 20px; }
.fila__texto { flex: 1; min-width: 0; line-height: 1.3; }
.fila__texto strong { display: block; font-weight: 600; overflow-wrap: anywhere; }
.fila__texto small { display: block; font-size: .8rem; color: var(--tinta-3); }

/* Barra de avance (cuestionarios por pasos) */
.avance { display: flex; align-items: center; gap: 1rem; }
.avance__riel { flex: 1; height: 6px; border-radius: 99px; background: rgba(var(--tinte), .12); overflow: hidden; }
.avance__lleno { height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--purpura), var(--acento)); transition: width .5s var(--suave); }
.avance__num { font-size: .8rem; font-weight: 600; color: var(--orquidea); min-width: 2.6em; text-align: right; }

/* Casilla de confirmación */
.casilla { display: flex; gap: .8rem; align-items: flex-start; cursor: pointer; font-size: .95rem; color: var(--tinta-2); }
.casilla input {
  -webkit-appearance: none; appearance: none; flex: none;
  width: 22px; height: 22px; margin: .1em 0 0; border-radius: 7px;
  background: #fff; border: 1px solid rgba(var(--tinte), .35);
  display: grid; place-content: center; cursor: pointer; transition: background .2s, border-color .2s;
}
.casilla input::after { content: ""; width: 10px; height: 6px; border: 2px solid #fff; border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px,-1px); opacity: 0; }
.casilla input:checked { background: var(--orquidea); border-color: var(--orquidea); }
.casilla input:checked::after { opacity: 1; }

/* Subir un archivo: el input real se esconde y el botón de vidrio lo abre */
.archivo { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; }
.archivo input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.archivo input[type=file]:focus-visible + .btn { outline: 2px solid var(--orquidea); outline-offset: 3px; }
.archivo__nombre { font-size: .9rem; color: var(--tinta-3); }
.archivo__nombre.listo { color: var(--orquidea); font-weight: 500; }

/* Texto sólo para lectores de pantalla */
.solo-lector { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Etiqueta: una palabrita de estado (Próxima, Vigente, Vence pronto…) */
.etiqueta {
  display: inline-flex; align-items: center; height: 24px; padding: 0 .7rem;
  border-radius: 99px; font: 600 .7rem/1 var(--f-texto); letter-spacing: .08em; text-transform: uppercase;
  color: var(--orquidea); background: rgba(var(--tinte), .12); border: 1px solid rgba(255,255,255,.8);
  white-space: nowrap;
}
.etiqueta--llena { color: #fff; background: linear-gradient(180deg, var(--acento-2), var(--acento)); }
.etiqueta--aviso { color: #8A4B12; background: rgba(240,170,92,.20); }
.etiqueta--tenue { color: var(--tinta-3); background: rgba(29,25,40,.06); }

/* Ventana = popup/modal genérico: <dialog class="ventana">. Tarjeta blanca encima de todo;
   tocar afuera la cierra (medelia.js). Botones abajo a la derecha. */
.ventana {
  width: min(640px, 100% - 32px); max-height: calc(100dvh - 32px);
  padding: clamp(1.4rem, 4vw, 2.2rem); overflow: auto;
  border-radius: 28px; border: 1px solid var(--vidrio-borde);
  background: #fff; color: var(--tinta);
  box-shadow: var(--vidrio-sombra), 0 40px 80px -30px rgba(var(--sombra-rgb), .45);
}
.ventana::backdrop { background: rgba(43,34,64,.38); }
.ventana h3 { margin-bottom: 1.2rem; }
.ventana h4 { font: 600 .72rem/1 var(--f-texto); letter-spacing: .14em; text-transform: uppercase; color: var(--orquidea); margin: 1.6rem 0 .9rem; }

/* Tabla de vidrio (cartilla, historiales). En móvil cada fila se vuelve tarjetita. */
.tabla { width: 100%; border-collapse: separate; border-spacing: 0 .45rem; font-size: .95rem; }
.tabla th { text-align: left; padding: 0 1rem .2rem; font: 600 .68rem/1 var(--f-texto); letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-3); }
.tabla td { padding: .8rem 1rem; background: var(--campo-fondo); border-block: 1px solid var(--vidrio-borde); color: var(--ciruela); vertical-align: middle; }
.tabla td:first-child { border-left: 1px solid var(--vidrio-borde); border-radius: 14px 0 0 14px; }
.tabla td:last-child  { border-right: 1px solid var(--vidrio-borde); border-radius: 0 14px 14px 0; }
.tabla td small { display: block; font-size: .8rem; color: var(--tinta-3); }
@media (max-width: 640px) {
  .tabla thead { display: none; }
  .tabla, .tabla tbody, .tabla tr, .tabla td { display: block; }
  .tabla tr { margin-bottom: .6rem; padding: .5rem 0; border-radius: 16px; background: var(--campo-fondo); border: 1px solid var(--vidrio-borde); }
  .tabla td, .tabla td:first-child, .tabla td:last-child { background: none; border: 0; border-radius: 0; padding: .3rem 1rem; }
  .tabla td[data-col]::before { content: attr(data-col); display: block; font: 600 .62rem/1.6 var(--f-texto); letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-3); }
}

/* ---------- Pie viejo (sólo panel interno: admin.html) ---------- */
.pie { padding-bottom: 24px; }
.pie .barra { font-size: .88rem; color: var(--tinta-2); }
.pie nav { display: flex; gap: .25rem; flex-wrap: wrap; }
.pie nav a { color: var(--tinta-2); text-decoration: none; padding: .45rem .8rem; border-radius: 999px; transition: background .2s, color .2s; }
.pie nav a:hover { background: var(--vidrio-hover); color: var(--tinta); }

/* ---------- Móvil ---------- */
@media (max-width: 560px) {
  body { font-size: 15.5px; }
  .barra { padding-left: 20px; }
  .menu-boton .texto { display: none; }
  .pie .barra { border-radius: var(--radio); flex-wrap: wrap; padding: 14px 16px; }
  .pie .barra__acciones { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .js [data-revelar] { opacity: 1; transform: none; }
}

/* ===== PORTAL (rediseño 21 oct) ===== */
/* portal.html (<body class="pagina-portal">) y el login cuenta.html (<body class="pagina-cuenta">).
   Maquetas de Xim 19–25. Todo va colgado de la clase del <body> para no pisar a nadie,
   salvo .btn--lila, que es pieza nueva para cualquiera (botón secundario relleno de lila:
   «Ver requisitos», «Ver detalle», «Ver», «Imprimir»). */
.btn--lila { background: var(--lila-3); border-color: var(--lila-3); color: var(--tinta); }
.btn--lila:hover { background: var(--lila-2); border-color: var(--lila-2); }

.pagina-portal .portal { padding-top: clamp(2.2rem, 5vw, 3.6rem); }
.pagina-portal [hidden] { display: none !important; }
.pagina-portal .vacio { margin: 0; padding: 1.6rem 1rem; text-align: center; color: var(--tinta-3); font-size: .95rem; }
/* En el inicio (sin peludito elegido) la cabecera NO muestra Citas · Vacunas… (Xim, ronda 2):
   sólo «Agendar cita» y «Mi cuenta»; en celular el menú tampoco las lista */
.pagina-portal.portal--inicio .encabezado__nav a[data-clave] { display: none !important; }
/* Estado vacío de cada pestaña: tarjeta a lo ancho, ícono suave, título y nota */
.pagina-portal .vacio-portal { display: grid; justify-items: center; gap: .55rem; padding: clamp(2rem, 5vw, 3.2rem) 1rem; text-align: center; }
.pagina-portal .vacio-portal__icono { width: 58px; height: 58px; display: grid; place-items: center; margin-bottom: .4rem; border-radius: 50%; background: var(--lila-3); color: var(--morado); }
.pagina-portal .vacio-portal__icono svg { width: 24px; height: 24px; }
.pagina-portal .vacio-portal strong { font: 500 clamp(1.3rem, 2.4vw, 1.55rem)/1.15 var(--f-titulo); letter-spacing: -.01em; color: var(--tinta); }
.pagina-portal .vacio-portal p { max-width: 30rem; margin: 0; font-size: .9rem; color: var(--tinta-3); }
.pagina-portal .estudios__vacio { grid-column: 1 / -1; }
.pagina-portal .panel--vacio .panel__nota { display: none; }
.pagina-portal .ficha__falta { margin-top: .75rem; border: 0; cursor: pointer; }
.pagina-portal .ficha__falta:hover { background: rgba(240, 170, 92, .32); }
.pagina-portal .panel { animation: portal-aparecer .4s var(--suave); }
@keyframes portal-aparecer { from { opacity: 0; transform: translateY(8px); } }
.pagina-portal .btn--claro { box-shadow: 0 10px 24px -16px rgba(var(--sombra-rgb), .45); }
.pagina-portal .btn--claro .chevron { width: 11px; height: 8px; transition: transform .2s var(--suave); }
.pagina-portal .btn--claro[aria-expanded="true"] .chevron { transform: rotate(180deg); }

/* ---------- Inicio: saludo + peluditos (imagen 19) ---------- */
.portal-hola { margin: 0 0 .9rem; font-size: clamp(2.8rem, 6.4vw, 4.8rem); line-height: 1; letter-spacing: -.035em; }
.portal-elige { margin: 0 0 2.2rem; color: var(--tinta-2); font-size: 1.02rem; }
.pagina-portal .peluditos { --cara: clamp(116px, 13vw, 138px); display: flex; flex-wrap: wrap; gap: 1.6rem clamp(1.2rem, 3vw, 2.4rem); }
.pagina-portal .peludito { position: relative; width: calc(var(--cara) + 36px); text-align: center; }
.pagina-portal .peludito__boton {
  display: grid; justify-items: center; gap: .9rem; width: 100%; padding: 0; border: 0; background: none;
  cursor: pointer; font: inherit; color: var(--tinta);
}
.pagina-portal .peludito__cara {
  width: var(--cara); aspect-ratio: 1; border-radius: 50%; overflow: hidden; display: grid; place-items: center;
  background: #fff; color: var(--morado); font: italic 500 calc(var(--cara) * .36)/1 var(--f-titulo);
  box-shadow: 0 24px 44px -24px rgba(var(--sombra-rgb), .55), 0 2px 6px -3px rgba(var(--sombra-rgb), .12);
  transition: transform .25s var(--suave), box-shadow .25s;
}
.pagina-portal .peludito__boton:hover .peludito__cara, .pagina-portal .peludito__boton:focus-visible .peludito__cara {
  transform: translateY(-3px); box-shadow: 0 0 0 3px rgba(var(--tinte), .22), 0 28px 48px -24px rgba(var(--sombra-rgb), .6);
}
.pagina-portal .peludito__cara img { width: 100%; height: 100%; object-fit: cover; }
.pagina-portal .peludito__texto { display: grid; justify-items: center; gap: .2rem; line-height: 1.25; }
.pagina-portal .peludito__texto strong { font: 500 1.55rem/1.1 var(--f-titulo); letter-spacing: -.01em; }
.pagina-portal .peludito__texto small { font-size: .8rem; color: var(--tinta-3); }
.pagina-portal .peludito__texto .etiqueta { margin-top: .55rem; }
/* Camarita sobre el borde del círculo: se ve siempre (en celular no hay cursor) */
.pagina-portal .peludito__camara {
  position: absolute; top: calc(var(--cara) * .72); left: calc(50% + var(--cara) * .2);
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: var(--lila-3); color: var(--morado); border: 3px solid #fff;
  box-shadow: 0 6px 14px -8px rgba(var(--sombra-rgb), .55); transition: transform .2s var(--suave);
}
.pagina-portal .peludito__camara:hover, .pagina-portal .peludito__camara:focus-within { transform: scale(1.1); }
.pagina-portal .peludito__camara svg { width: 15px; height: 15px; }
.pagina-portal .peludito__camara input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.pagina-portal .peludito--nuevo .peludito__cara {
  background: rgba(255, 255, 255, .35); border: 1.5px dashed rgba(var(--tinte), .5); box-shadow: none;
  font: 300 calc(var(--cara) * .26)/1 var(--f-texto); font-style: normal;
}
.pagina-portal .peludito--nuevo .peludito__texto strong { font-size: 1.4rem; }

/* ---------- Promociones: cupón blanco con sello de degradado frío ---------- */
.pagina-portal .promos { margin-top: clamp(3rem, 6vw, 4.2rem); }
.portal-seccion { display: flex; align-items: center; gap: .7rem; margin: 0 0 1.4rem; font-size: clamp(1.8rem, 3vw, 2.1rem); }
.portal-seccion svg { width: 22px; height: 22px; color: var(--morado); flex: none; }
.pagina-portal .promos__lista { display: grid; gap: 1.6rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 480px), 1fr)); }
/* El boleto va recortado (mask) y la mask se come las sombras: la sombra la da el papá */
.pagina-portal .promo {
  --pie: 76px; --muesca: 11px; position: relative; min-width: 0;
  filter: drop-shadow(0 22px 26px rgba(var(--sombra-rgb), .13)) drop-shadow(0 2px 3px rgba(var(--sombra-rgb), .06));
  transition: transform .3s var(--suave);
}
.pagina-portal .promo:hover, .pagina-portal .promo:focus-within { transform: translateY(-3px); }
.pagina-portal .promo__boleto {
  position: relative; overflow: hidden; display: flex; flex-direction: column; min-height: 100%;
  border-radius: 24px; background: #fff;
  -webkit-mask:
    radial-gradient(circle var(--muesca) at 0 calc(100% - var(--pie)), transparent 98%, #000) left / 51% 100% no-repeat,
    radial-gradient(circle var(--muesca) at 100% calc(100% - var(--pie)), transparent 98%, #000) right / 51% 100% no-repeat;
  mask:
    radial-gradient(circle var(--muesca) at 0 calc(100% - var(--pie)), transparent 98%, #000) left / 51% 100% no-repeat,
    radial-gradient(circle var(--muesca) at 100% calc(100% - var(--pie)), transparent 98%, #000) right / 51% 100% no-repeat;
}
.pagina-portal .promo__cuerpo { position: relative; flex: 1; display: flex; align-items: center; gap: 1.4rem; padding: 1.6rem 1.7rem 1.4rem; }
.pagina-portal .promo__texto { flex: 1; min-width: 0; }
.pagina-portal .promo__texto .rotulo { font-size: .64rem; margin-bottom: .55rem; }
.pagina-portal .promo__titulo { margin: 0; font: 500 clamp(1.45rem, 2.4vw, 1.75rem)/1.1 var(--f-titulo); letter-spacing: -.015em; color: var(--tinta); overflow-wrap: break-word; hyphens: auto;   /* «anywhere» encogía la columna y partía «desparasitació-n» */ }
.pagina-portal .promo__detalle { margin: .55rem 0 0; max-width: 34rem; font-size: .92rem; line-height: 1.5; color: var(--tinta-2); }
/* Pie del boleto: vigencia a la izquierda, «Agendar» a la derecha; mide --pie para que las muescas caigan en la línea */
.pagina-portal .promo__pie {
  height: var(--pie); flex: none; display: flex; align-items: center; gap: .8rem; padding: 0 1.4rem 0 1.7rem;
  background-image: linear-gradient(90deg, rgba(var(--tinte), .32) 50%, transparent 0);
  background-size: 8px 1.5px; background-repeat: repeat-x; background-position: calc(var(--muesca) + 10px) 0;
}
.pagina-portal .promo__vigencia { flex: 1; min-width: 0; display: flex; align-items: center; gap: .5rem; font-size: .82rem; line-height: 1.25; color: var(--tinta-2); }
.pagina-portal .promo__vigencia b { font-weight: inherit; white-space: nowrap; }
.pagina-portal .promo__vigencia svg { flex: none; width: 16px; height: 16px; color: var(--morado); }
.pagina-portal .promo__pie .btn { flex: none; }
/* El sello: redondo, degradado violeta-azulado FRÍO, aro punteado; al pasar el cursor se menea */
.pagina-portal .promo__sello {
  position: relative; z-index: 1; flex: none; width: 88px; height: 88px; border-radius: 50%;
  display: grid; place-items: center; padding: 8px; text-align: center; color: #fff;
  background:
    radial-gradient(circle at 30% 26%, rgba(255, 255, 255, .34), transparent 46%),
    linear-gradient(155deg, #7C8CF2 0%, #5B5BD8 45%, #4A3CB8 100%);
  box-shadow: 0 16px 28px -12px rgba(74, 70, 190, .65), inset 0 0 0 2px rgba(255, 255, 255, .28);
  outline: 1.5px dashed rgba(255, 255, 255, .75); outline-offset: -8px;
}
.pagina-portal .promo__sello span { transform: rotate(-10deg); font: italic 500 1.75rem/1 var(--f-titulo); letter-spacing: -.02em; overflow-wrap: anywhere; }
.pagina-portal .promo:hover .promo__sello, .pagina-portal .promo:focus-within .promo__sello { animation: portal-menear .6s var(--suave); }
@keyframes portal-menear { 30% { transform: rotate(8deg) scale(1.05); } 60% { transform: rotate(-5deg); } }
/* Huellitas y chispas de adorno, muy tenues y en tonos fríos */
.pagina-portal .promo__adorno { position: absolute; pointer-events: none; }
.pagina-portal .promo__adorno svg { width: 100%; height: 100%; }
.pagina-portal .promo__adorno--huella { color: #5B5BD8; opacity: .07; }
.pagina-portal .promo__adorno--h1 { width: 46px; height: 46px; right: 8.6rem; bottom: calc(var(--pie) + .5rem); transform: rotate(20deg); }
.pagina-portal .promo__adorno--h2 { width: 30px; height: 30px; right: 11.6rem; top: .9rem; transform: rotate(-14deg); opacity: .05; }
.pagina-portal .promo__adorno--chispa { color: #7C8CF2; opacity: .55; }
.pagina-portal .promo__adorno--c1 { width: 13px; height: 13px; right: 1.2rem; top: 1rem; }
.pagina-portal .promo__adorno--c2 { width: 9px; height: 9px; right: 7.4rem; top: 1.5rem; opacity: .45; }
.pagina-portal .promo__adorno--c3 { width: 10px; height: 10px; right: 1.6rem; bottom: calc(var(--pie) + .9rem); opacity: .4; }
@media (prefers-reduced-motion: reduce) { .pagina-portal .promo:hover, .pagina-portal .promo:focus-within { transform: none; } }

/* ---------- Expediente: «← Mis peluditos» + ficha del peludito (imágenes 20–25) ---------- */
.pagina-portal .ficha { display: flex; align-items: center; gap: clamp(1.1rem, 3vw, 2rem); margin-bottom: 1.8rem; }
.pagina-portal .ficha__texto { flex: 1; min-width: 0; }
.pagina-portal .ficha__texto h1 { margin: 0; font-size: clamp(2.6rem, 5.6vw, 4.1rem); line-height: 1; letter-spacing: -.035em; overflow-wrap: anywhere; }
.pagina-portal .ficha__texto p { margin: .55rem 0 0; color: var(--tinta-2); font-size: 1rem; }
.pagina-portal .ficha__acciones { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .6rem; }
.pagina-portal .foto-menu { position: relative; flex: none; }
.pagina-portal .ficha__foto {
  position: relative; width: clamp(96px, 11vw, 120px); aspect-ratio: 1; padding: 0; border: 0; border-radius: 50%; overflow: hidden; cursor: pointer;
  display: grid; place-items: center; background: #fff; color: var(--morado); font: italic 500 3.2rem/1 var(--f-titulo);
  box-shadow: 0 26px 46px -24px rgba(var(--sombra-rgb), .6), 0 2px 6px -3px rgba(var(--sombra-rgb), .12);
  transition: transform .2s var(--suave), box-shadow .25s;
}
.pagina-portal .ficha__foto:hover, .pagina-portal .ficha__foto[aria-expanded="true"] { transform: scale(1.03); box-shadow: 0 0 0 3px rgba(var(--tinte), .25), 0 26px 46px -24px rgba(var(--sombra-rgb), .6); }
.pagina-portal .ficha__foto img { width: 100%; height: 100%; object-fit: cover; }
/* Lapicito: siempre en celular, al pasar el cursor en compu */
.pagina-portal .ficha__lapiz { position: absolute; inset: auto 0 0; height: 32%; display: grid; place-items: center; background: rgba(var(--sombra-rgb), .5); color: #fff; opacity: 0; transition: opacity .2s; }
.pagina-portal .ficha__lapiz svg { width: 15px; height: 15px; }
.pagina-portal .ficha__foto:hover .ficha__lapiz, .pagina-portal .ficha__foto:focus-visible .ficha__lapiz { opacity: 1; }
@media (hover: none) { .pagina-portal .ficha__lapiz { opacity: 1; } }

/* Desplegables del portal (foto y «Cambiar peludito», imagen 23): la pieza .desplegable con botones */
.pagina-portal .desplegable { display: grid; gap: 2px; }
.pagina-portal .foto-menu__panel { left: 0; right: auto; }
.pagina-portal .menu-peluditos { position: relative; }
.pagina-portal .menu-peluditos__panel { min-width: 260px; }
.pagina-portal .desplegable button, .pagina-portal .desplegable label {
  position: relative; display: flex; align-items: center; gap: .8rem; width: 100%; padding: .6rem .75rem; border: 0; border-radius: 14px;
  background: none; cursor: pointer; font: 500 .92rem/1.2 var(--f-texto); color: var(--tinta); text-align: left;
}
.pagina-portal .desplegable button:hover, .pagina-portal .desplegable label:hover, .pagina-portal .desplegable label:focus-within,
.pagina-portal .desplegable button[aria-current="true"] { background: var(--lila-3); }
.pagina-portal .desplegable svg { width: 18px; height: 18px; color: var(--morado); flex: none; }
.pagina-portal .desplegable input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.pagina-portal .desplegable hr { width: calc(100% - 16px); margin: 4px 8px; border: 0; border-top: 1px solid var(--vidrio-borde); }
.pagina-portal .menu-peluditos__cara {
  width: 40px; height: 40px; flex: none; border-radius: 50%; overflow: hidden; display: grid; place-items: center;
  background: var(--lila-3); color: var(--morado); font: italic 500 1.2rem/1 var(--f-titulo);
}
.pagina-portal .desplegable button[aria-current="true"] .menu-peluditos__cara { background: #fff; }
.pagina-portal .menu-peluditos__cara img { width: 100%; height: 100%; object-fit: cover; }
.pagina-portal .menu-peluditos__cara--punteada { background: none; border: 1.5px dashed rgba(var(--tinte), .5); }
.pagina-portal .menu-peluditos__cara--punteada svg { width: 17px; height: 17px; }
.pagina-portal .menu-peluditos__texto { flex: 1; min-width: 0; line-height: 1.25; }
.pagina-portal .menu-peluditos__texto strong { display: block; font-weight: 700; }
.pagina-portal .menu-peluditos__texto small { display: block; font-size: .78rem; color: var(--tinta-3); }
.pagina-portal .menu-peluditos__check svg { width: 16px; height: 16px; }
.pagina-portal .desplegable .menu-peluditos__inicio { font-weight: 700; color: var(--morado); }

/* Tarjeta de sección: rótulo + título serif */
.pagina-portal .bloque-portal { padding: clamp(1.4rem, 3.4vw, 2rem) clamp(1.2rem, 3.4vw, 1.8rem); }
.pagina-portal .bloque-portal .rotulo { font-size: .64rem; margin-bottom: .45rem; }
.pagina-portal .bloque-portal__titulo { margin: 0 0 1.3rem; font-size: clamp(1.6rem, 2.8vw, 2rem); font-weight: 500; letter-spacing: -.02em; }
.pagina-portal .bloque-portal__cabeza { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .8rem 1.4rem; margin-bottom: 1.3rem; }
.pagina-portal .bloque-portal__cabeza .bloque-portal__titulo { margin: 0; }

/* ---------- Citas: próxima cita + historial (imagen 20) ---------- */
.pagina-portal .proxima {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1rem 1.6rem;
  padding: 1.3rem 1.4rem; margin-bottom: 1.2rem;
}
.pagina-portal .proxima__fecha {
  width: 96px; height: 108px; flex: none; display: grid; place-content: center; justify-items: center; gap: .3rem;
  border-radius: 18px; background: var(--morado); color: #fff;
  box-shadow: 0 16px 30px -16px rgba(var(--acento-rgb), .8);
}
.pagina-portal .proxima__fecha span { font: 700 .66rem/1 var(--f-texto); letter-spacing: .2em; text-transform: uppercase; opacity: .9; }
.pagina-portal .proxima__fecha strong { font: 500 2.9rem/.9 var(--f-titulo); letter-spacing: -.03em; }
.pagina-portal .proxima__fecha--vacia { background: var(--lila-3); color: var(--morado); box-shadow: none; }
.pagina-portal .proxima__fecha--vacia svg { width: 30px; height: 30px; }
.pagina-portal .proxima__rotulos { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-bottom: .4rem; }
.pagina-portal .proxima__rotulos .rotulo { margin: 0; font-size: .64rem; }
.pagina-portal .proxima h2 { margin: 0; font-size: clamp(1.5rem, 2.8vw, 2rem); font-weight: 500; letter-spacing: -.02em; }
.pagina-portal .proxima__meta { display: flex; flex-wrap: wrap; gap: .3rem 1.4rem; margin: .55rem 0 0; font-size: .86rem; color: var(--tinta-2); }
.pagina-portal .proxima__meta span { display: inline-flex; align-items: center; gap: .4rem; }
.pagina-portal .proxima__meta svg { width: 15px; height: 15px; color: var(--morado); flex: none; }
.pagina-portal .proxima__sub { margin: .45rem 0 0; font-size: .9rem; color: var(--tinta-2); }
.pagina-portal .proxima__toca { display: flex; flex-wrap: wrap; gap: .4rem; margin: .7rem 0 0; }
.pagina-portal .proxima__acciones { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .6rem; }
.pagina-portal .historial__fila {
  display: grid; grid-template-columns: minmax(120px, 160px) 40px minmax(0, 1fr) auto; align-items: center; gap: .6rem 1.1rem;
  padding: .95rem 0; border-top: 1px solid rgba(var(--tinte), .12);
}
.pagina-portal .historial__fecha strong { display: block; font: 500 1.3rem/1.15 var(--f-titulo); letter-spacing: -.01em; }
.pagina-portal .historial__fecha small, .pagina-portal .historial__texto small { display: block; font-size: .76rem; color: var(--tinta-3); }
.pagina-portal .historial__icono { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: var(--lila-3); color: var(--morado); }
.pagina-portal .historial__icono svg { width: 18px; height: 18px; }
.pagina-portal .historial__texto { line-height: 1.35; }
.pagina-portal .historial__texto strong { display: block; font-weight: 700; }

/* ---------- Cartilla (imagen 21) ---------- */
.pagina-portal .filtros { display: flex; flex-wrap: wrap; gap: .45rem; }
.pagina-portal .filtro {
  height: 38px; padding: 0 1.05rem; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--lila-3); color: var(--morado); font: 700 .84rem/1 var(--f-texto);
  transition: background .2s, color .2s;
}
.pagina-portal .filtro:hover { background: var(--lila-2); }
.pagina-portal .filtro[aria-pressed="true"] { background: var(--morado); color: #fff; box-shadow: 0 10px 20px -12px rgba(var(--acento-rgb), .8); }
.pagina-portal .proximas { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); margin-bottom: 1.4rem; }
.pagina-portal .proximas:empty { display: none; }
.pagina-portal .proxima-ap { display: flex; align-items: center; gap: .9rem; padding: 1rem 1.1rem; border-radius: 18px; background: var(--lila-3); line-height: 1.3; }
.pagina-portal .proxima-ap .icono-circulo { width: 42px; height: 42px; background: #fff; }
.pagina-portal .proxima-ap .icono-circulo svg { width: 18px; height: 18px; }
.pagina-portal .proxima-ap strong { display: block; font-weight: 700; font-size: .92rem; }
.pagina-portal .proxima-ap small { display: block; font-size: .76rem; color: var(--tinta-3); margin-bottom: .45rem; }
.pagina-portal .proxima-ap .etiqueta { height: 22px; font-size: .62rem; }
.pagina-portal .tabla .tipo { display: inline-flex; height: 19px; margin-top: .35rem; padding: 0 .55rem; font-size: .58rem; }
.pagina-portal .tabla td strong { display: block; font-weight: 700; }
.pagina-portal .tipo--vacuna { color: var(--morado); background: var(--lila-2); }
.pagina-portal .tipo--desparasitacion { color: #2E7D52; background: rgba(80, 180, 120, .16); }
/* Cartilla en el cel: tarjetas en vez de tabla; la franja y el ícono dicen el tipo */
.pagina-portal .cartilla__tarjetas { display: none; list-style: none; margin: 0; padding: 0; gap: .7rem; }
.pagina-portal .ap-tarjeta { display: grid; gap: .9rem; padding: 1rem 1.1rem 1rem 1.2rem; border-radius: 18px; background: var(--campo-fondo); border: 1px solid var(--vidrio-borde); border-left: 4px solid var(--morado); }
.pagina-portal .ap-tarjeta--desparasitacion { border-left-color: #3E9B66; }
.pagina-portal .ap-tarjeta__cabeza { display: flex; gap: .85rem; align-items: flex-start; }
.pagina-portal .ap-tarjeta .icono-circulo { width: 40px; height: 40px; }
.pagina-portal .ap-tarjeta .icono-circulo svg { width: 18px; height: 18px; }
.pagina-portal .ap-tarjeta--desparasitacion .icono-circulo { color: #2E7D52; background: rgba(80, 180, 120, .16); }
.pagina-portal .ap-tarjeta .tipo { display: inline-flex; height: 19px; padding: 0 .55rem; font-size: .58rem; margin-bottom: .35rem; }
.pagina-portal .ap-tarjeta strong { display: block; font-weight: 700; font-size: .98rem; line-height: 1.3; color: var(--ciruela); }
.pagina-portal .ap-tarjeta small { display: block; font-size: .8rem; color: var(--tinta-3); margin-top: .15rem; }
.pagina-portal .ap-tarjeta__fechas { display: grid; grid-template-columns: 1fr 1fr; margin: 0; padding-top: .8rem; border-top: 1px solid var(--vidrio-linea); }
.pagina-portal .ap-tarjeta__fechas div + div { padding-left: 1rem; border-left: 1px solid var(--vidrio-linea); }
.pagina-portal .ap-tarjeta__fechas dt { font: 600 .6rem/1.6 var(--f-texto); letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-3); }
.pagina-portal .ap-tarjeta__fechas dd { margin: 0; font-size: .9rem; color: var(--ciruela); }
@media screen and (max-width: 640px) {
  .pagina-portal .cartilla__tabla { display: none; }
  .pagina-portal .cartilla__tarjetas { display: grid; }
}
@media (min-width: 641px) {
  .pagina-portal .cartilla .tabla { border-spacing: 0; }
  .pagina-portal .cartilla .tabla th { padding: 0 1rem .8rem; border-bottom: 1px solid rgba(var(--tinte), .12); font-size: .64rem; }
  .pagina-portal .cartilla .tabla td, .pagina-portal .cartilla .tabla td:first-child, .pagina-portal .cartilla .tabla td:last-child {
    padding: 1.05rem 1rem; background: none; border: 0; border-radius: 0; border-bottom: 1px solid rgba(var(--tinte), .1); font-size: .9rem;
  }
}
.pagina-portal .cartilla .acciones { margin-top: 1.5rem; }
.pagina-portal .impresion { display: none; }

/* ---------- Recetas (imagen 22) ---------- */
.pagina-portal .recetas { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.pagina-portal .receta { padding: 1.2rem 1.3rem 1.1rem; border-radius: 20px; background: var(--lila-3); }
.pagina-portal .receta__cabeza { display: flex; align-items: flex-start; justify-content: space-between; gap: .8rem; }
.pagina-portal .receta h3 { margin: 0; font-size: 1.4rem; font-weight: 500; letter-spacing: -.01em; }
.pagina-portal .receta p { margin: .5rem 0 .9rem; font-size: .9rem; font-weight: 600; color: var(--tinta); }
.pagina-portal .receta__riel { height: 5px; border-radius: 99px; background: var(--lila-2); overflow: hidden; }
.pagina-portal .receta__riel span { display: block; height: 100%; border-radius: inherit; background: var(--morado); }
.pagina-portal .receta small { display: block; margin-top: .55rem; font-size: .76rem; color: var(--tinta-3); }

/* ---------- Estudios (imagen 24) ---------- */
.pagina-portal .estudios { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.pagina-portal .estudio { padding: 1.3rem 1.3rem 1.4rem; }
.pagina-portal .estudio__icono { width: 40px; height: 40px; display: grid; place-items: center; margin-bottom: 1.4rem; border-radius: 12px; background: var(--lila-3); color: var(--morado); }
.pagina-portal .estudio__icono svg { width: 18px; height: 18px; }
.pagina-portal .estudio h3 { margin: 0 0 .35rem; font-size: 1.65rem; font-weight: 500; letter-spacing: -.02em; }
.pagina-portal .estudio p { margin: 0; font-size: .82rem; color: var(--tinta-2); }
.pagina-portal .estudio time { display: block; margin-top: .2rem; font: 700 .78rem/1.4 var(--f-texto); color: var(--morado); }
.pagina-portal .estudio .estudio__nota { min-height: 1.2em; margin: .5rem 0 0; font-size: .78rem; color: var(--tinta-3); }
.pagina-portal .estudio__acciones { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-top: .6rem; }
.pagina-portal .estudio__acciones .btn { padding: 0 .8rem; }
.pagina-portal .panel__nota { margin: 1.1rem 0 0; font-size: .84rem; color: var(--tinta-3); }

/* ---------- Dudas (imagen 25; «Sobre» sube a la fila del título, pegado a la derecha) ---------- */
.pagina-portal .hilo__cabeza { align-items: flex-start; }
.pagina-portal .hilo__sobre { display: flex; align-items: center; gap: .6rem; margin-left: auto; }
.pagina-portal .hilo__sobre label { font: 700 .64rem/1 var(--f-texto); letter-spacing: .2em; text-transform: uppercase; color: var(--tinta-3); }
.pagina-portal .hilo__sobre .selector { min-width: 0; }
.pagina-portal .hilo__sobre .selector__boton {
  height: 38px; padding: 0 .9rem 0 1.05rem; gap: .6rem; border-radius: 999px; border-color: transparent;
  background: var(--lila-3); color: var(--morado); font: 700 .84rem/1 var(--f-texto);
}
.pagina-portal .hilo__sobre .selector__lista { left: auto; right: 0; min-width: 240px; max-height: calc(5 * 2.6rem + 12px); }
.pagina-portal .hilo__sobre select:not(.selector__nativo) { height: 38px; border-radius: 999px; border: 0; padding: 0 1rem; background: var(--lila-3); color: var(--morado); font: 700 .84rem var(--f-texto); }
.pagina-portal .dudas { display: grid; gap: 1.1rem; max-height: 32rem; overflow-y: auto; overscroll-behavior: contain; padding: .2rem .2rem .4rem; }
.pagina-portal .duda { max-width: min(62%, 34rem); padding: .85rem 1.1rem .75rem; line-height: 1.5; font-size: .93rem; color: var(--tinta); }
.pagina-portal .duda p { margin: .4rem 0 .35rem; }
.pagina-portal .duda small { display: block; font-size: .72rem; color: var(--tinta-3); }
.pagina-portal .duda--suya { justify-self: end; border-radius: 18px 18px 6px 18px; background: var(--lila-2); }
.pagina-portal .duda--medelia { justify-self: start; border-radius: 18px 18px 18px 6px; background: #fff; border: 1px solid var(--vidrio-borde); }
.pagina-portal .duda--medelia b { display: block; font: italic 500 1.05rem/1 var(--f-titulo); color: var(--morado); }
.pagina-portal .etiqueta--blanca { height: 22px; font-size: .6rem; color: var(--morado); background: #fff; border-color: #fff; }
.pagina-portal .hilo__form { margin-top: 1.4rem; padding-top: 1.4rem; border-top: 1px solid rgba(var(--tinte), .12); }
.pagina-portal .hilo__form .campo label { font: 700 .86rem/1.2 var(--f-texto); letter-spacing: 0; text-transform: none; color: var(--tinta); }
.pagina-portal .hilo__form textarea { min-height: 5.6rem; }
.pagina-portal .hilo__form .acciones { margin-top: 1rem; }

/* ---------- Ventanas del portal: Mi cuenta (Mis datos), detalle de cita ---------- */
.pagina-portal .ventana__cabeza { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.pagina-portal .ventana__cabeza h3 { display: flex; align-items: center; gap: .6rem; margin: 0; font-size: 1.8rem; font-weight: 500; }
.pagina-portal .ventana__cabeza h3 svg { width: 22px; height: 22px; color: var(--morado); flex: none; }
.pagina-portal .ventana__cerrar {
  flex: none; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--lila-3); color: var(--tinta);
}
.pagina-portal .ventana__cerrar:hover { background: var(--lila-2); }
.pagina-portal .ventana__cerrar svg { width: 18px; height: 18px; }
.pagina-portal .ventana .lista-vidrio { margin: .4rem 0 0; }
.pagina-portal .ventana .lista-vidrio li { color: var(--tinta-2); font-size: .94rem; }
.ventana--cuenta { width: min(560px, 100% - 32px); }
.pagina-portal .datos { display: grid; }
.pagina-portal .dato { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: .9rem; padding: .95rem 0; border-top: 1px solid rgba(var(--tinte), .12); }
.pagina-portal .dato:first-child { border-top: 0; }
.pagina-portal .dato__icono { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 13px; background: var(--lila-3); color: var(--morado); align-self: start; }
.pagina-portal .dato__icono svg { width: 19px; height: 19px; }
.pagina-portal .dato__texto { line-height: 1.35; }
.pagina-portal .dato__rotulo { display: block; font-size: .74rem; color: var(--tinta-3); margin-bottom: .1rem; }
.pagina-portal .dato__texto strong { display: block; font-weight: 700; overflow-wrap: anywhere; }
.pagina-portal .dato__texto small { display: block; margin-top: .15rem; font-size: .76rem; color: var(--tinta-3); }
.pagina-portal .dato__editar { padding: .5rem .2rem; border: 0; background: none; cursor: pointer; font: 700 .86rem/1 var(--f-texto); color: var(--morado); }
.pagina-portal .dato__editar:hover { text-decoration: underline; text-underline-offset: 3px; }
.pagina-portal .dato__editar:disabled { opacity: .35; cursor: default; text-decoration: none; }
/* Editando: el campo en su lugar (misma altura que los botones), Guardar / Cancelar a la derecha */
.pagina-portal .dato--editando { grid-template-columns: 44px minmax(0, 1fr); }
.pagina-portal .dato__forma { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: .45rem .6rem; }
.pagina-portal .dato__forma .dato__rotulo { grid-column: 1 / -1; }
.pagina-portal .dato__campos { display: grid; gap: .5rem; }
.pagina-portal .dato__botones { display: flex; justify-content: flex-end; gap: .5rem; }
.pagina-portal .dato__botones .btn { padding: 0 1.05rem; }
.pagina-portal .dato__aviso { grid-column: 1 / -1; order: 5; margin: 0; font-size: .8rem; color: #9B2C4A; }
.pagina-portal .dato__aviso:empty { display: none; }
.pagina-portal .dato[data-campo="domicilio"] .dato__forma { grid-template-columns: minmax(0, 1fr); }
.pagina-portal .dato[data-campo="domicilio"] .dato__campos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pagina-portal .dato[data-campo="domicilio"] .campo:first-child, .pagina-portal .dato[data-campo="domicilio"] .campo:last-child { grid-column: 1 / -1; }
.ventana--cuenta .acciones { margin-top: 1.2rem; padding-top: 1.2rem; border-top: 1px solid rgba(var(--tinte), .12); }

/* ---------- Celular ---------- */
@media (max-width: 760px) {
  .pagina-portal .ficha { flex-wrap: wrap; }
  .pagina-portal .ficha__acciones { width: 100%; justify-content: stretch; }
  .pagina-portal .ficha__acciones > .btn, .pagina-portal .ficha__acciones > .menu-peluditos { flex: 1 1 0; }
  .pagina-portal .menu-peluditos .btn { width: 100%; }
  .pagina-portal .proxima { grid-template-columns: auto minmax(0, 1fr); }
  .pagina-portal .proxima__acciones { grid-column: 1 / -1; }
  .pagina-portal .historial__fila { grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-areas: "fecha fecha fecha" "icono texto boton"; }
  .pagina-portal .historial__fecha { grid-area: fecha; }
  .pagina-portal .historial__icono { grid-area: icono; }
  .pagina-portal .historial__texto { grid-area: texto; }
  .pagina-portal .historial__fila .btn { grid-area: boton; }
  .pagina-portal .duda { max-width: 88%; }
}
@media (max-width: 560px) {
  .pagina-portal .portal { padding-top: 1.8rem; }
  .pagina-portal .peluditos { --cara: 92px; gap: 1.4rem .9rem; }
  .pagina-portal .peludito { width: calc(var(--cara) + 14px); }
  .pagina-portal .peludito__texto strong { font-size: 1.25rem; }
  .pagina-portal .peludito__texto small { font-size: .72rem; }
  .pagina-portal .peludito__texto .etiqueta { height: auto; min-height: 22px; padding: .25rem .5rem; white-space: normal; line-height: 1.2; font-size: .58rem; }
  .pagina-portal .peludito__camara { width: 32px; height: 32px; left: calc(50% + var(--cara) * .16); }
  .pagina-portal .promo { --pie: auto; }
  .pagina-portal .promo__boleto { -webkit-mask: none; mask: none; }
  .pagina-portal .promo__cuerpo { padding: 1.3rem 1.2rem 1.1rem; align-items: flex-start; }
  .pagina-portal .promo__sello { width: 68px; height: 68px; }
  .pagina-portal .promo__sello span { font-size: 1.35rem; }
  .pagina-portal .promo__pie { height: auto; flex-wrap: wrap; padding: 1rem 1.2rem 1.2rem; background-position: 0 0; }
  .pagina-portal .promo__pie .btn { margin-left: auto; }
  .pagina-portal .ficha__foto { width: 84px; font-size: 2.4rem; }
  .pagina-portal .proxima { padding: 1.1rem; gap: .9rem 1rem; }
  .pagina-portal .proxima__fecha { width: 72px; height: 84px; border-radius: 16px; }
  .pagina-portal .proxima__fecha strong { font-size: 2.2rem; }
  .pagina-portal .proxima__acciones .btn { flex: 1 1 0; padding: 0 .9rem; }
  .pagina-portal .bloque-portal__cabeza .filtros { width: 100%; }
  .pagina-portal .filtro { flex: 1 1 auto; padding: 0 .8rem; }
  .pagina-portal .cartilla .acciones .btn { flex: 1 1 0; }
  .pagina-portal .hilo__sobre { width: 100%; margin-left: 0; }
  .pagina-portal .hilo__sobre .selector { flex: 1; }
  .pagina-portal .hilo__sobre .selector__lista { left: 0; min-width: 0; }
  /* Ventanas a pantalla casi completa */
  .pagina-portal .ventana { width: calc(100% - 16px); max-width: none; max-height: calc(100dvh - 16px); border-radius: 22px; padding: 1.3rem 1.1rem; }
  .pagina-portal .dato { grid-template-columns: 40px minmax(0, 1fr) auto; gap: .75rem; }
  .pagina-portal .dato--editando { grid-template-columns: 40px minmax(0, 1fr); }
  .pagina-portal .dato__icono { width: 40px; height: 40px; }
  .pagina-portal .dato__forma { grid-template-columns: minmax(0, 1fr); }
  .pagina-portal .dato[data-campo="domicilio"] .dato__campos { grid-template-columns: minmax(0, 1fr); }
  .pagina-portal .dato__editar { padding: .8rem .3rem; }
  .ventana--cuenta .acciones .btn { width: 100%; }
}

/* ---------- Impresión de la cartilla (hoja CARTA) ----------
   Sólo sale la cartilla del peludito elegido, con membrete. Nada de flex ni
   overflow en lo que se imprime: no se parten entre páginas / recortan. */
@media print {
  @page { size: letter; margin: 14mm 12mm; }
  .pagina-portal { background: #fff; font-size: 11pt; }
  .pagina-portal .fondo, .pagina-portal .encabezado, .pagina-portal .ola, .pagina-portal .pie-noche,
  .pagina-portal .ficha, .pagina-portal .portal-inicio, .pagina-portal .panel:not(#panel-vacunas), .pagina-portal .bloque-portal__cabeza,
  .pagina-portal .proximas, .pagina-portal .no-imprimir, .pagina-portal dialog { display: none !important; }
  .pagina-portal .portal { padding: 0; width: 100%; }
  .pagina-portal #panel-vacunas { display: block !important; animation: none; }
  .pagina-portal .cartilla { background: none; border: 0; box-shadow: none; padding: 0; }
  .pagina-portal .impresion { display: block; margin-bottom: 18pt; padding-bottom: 10pt; border-bottom: 1.5pt solid #2A2140; }
  .pagina-portal .impresion__nombre { font: 500 26pt/1 var(--f-titulo); color: #2A2140; }
  .pagina-portal .impresion__giro { font: 600 7.5pt/1.6 var(--f-texto); letter-spacing: .2em; text-transform: uppercase; color: #5B45C4; }
  .pagina-portal .impresion__peludito { margin-top: 10pt; font-size: 10.5pt; color: #2A2140; }
  .pagina-portal .tabla { display: table !important; border-spacing: 0; }
  .pagina-portal .tabla thead { display: table-header-group !important; }
  .pagina-portal .tabla tbody { display: table-row-group !important; }
  .pagina-portal .tabla tr { display: table-row !important; break-inside: avoid; }
  .pagina-portal .tabla td, .pagina-portal .tabla th { display: table-cell !important; }
  .pagina-portal .tabla td { background: none !important; border: 0 !important; border-bottom: .75pt solid #D9CCE8 !important; border-radius: 0 !important; padding: 6pt; }
  .pagina-portal .tabla td::before { content: none !important; }
  .pagina-portal .tabla th { padding: 0 6pt 6pt; color: #5B45C4; }
  .pagina-portal .etiqueta { border: .75pt solid #C9B6E0; background: none !important; }
}

/* ---------- Login (cuenta.html): tarjeta blanca con «Medelia» grande ---------- */
.pagina-cuenta .entrada { min-height: calc(100dvh - 112px); display: grid; place-items: center; padding: clamp(2rem, 6vw, 4rem) 16px; }
.pagina-cuenta .acceso { width: min(440px, 100%); min-width: 0; padding: clamp(1.8rem, 5vw, 2.6rem) clamp(1.3rem, 5vw, 2.3rem) 1.9rem; border-radius: 28px; }
.pagina-cuenta .acceso__marca { margin: 0; text-align: center; font: 500 clamp(2.8rem, 11vw, 3.6rem)/1 var(--f-titulo); letter-spacing: -.035em; color: var(--tinta); }
.pagina-cuenta .acceso__lema { margin: .45rem 0 0; text-align: center; font: italic 300 1.15rem/1 var(--f-lema); color: var(--morado); }
.pagina-cuenta .acceso__titulo { margin: 1.7rem 0 1.1rem; text-align: center; font: 700 .72rem/1.4 var(--f-texto); letter-spacing: .24em; text-transform: uppercase; color: var(--morado); }
.pagina-cuenta .pildoras { display: grid; gap: .75rem; }
.pagina-cuenta .pildora {
  display: flex; align-items: center; gap: .7rem; height: 54px; padding: 0 6px 0 8px; border-radius: 99px;
  background: var(--campo-fondo); border: 1px solid var(--campo-borde); transition: border-color .2s, box-shadow .2s, background .2s;
}
.pagina-cuenta .pildora:focus-within { background: #fff; border-color: var(--morado); box-shadow: 0 0 0 4px rgba(var(--tinte), .16); }
.pagina-cuenta .pildora__icono { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--lila-3); color: var(--morado); }
.pagina-cuenta .pildora__icono svg { width: 17px; height: 17px; }
.pagina-cuenta .pildora input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; font: 400 1rem var(--f-texto); color: var(--tinta); }
.pagina-cuenta .pildora input:focus { outline: none; }
.pagina-cuenta .pildora input::placeholder { color: var(--tinta-3); }
.pagina-cuenta .olvide {
  flex: none; height: 40px; padding: 0 1rem; border-radius: 99px; cursor: pointer; border: 0;
  background: var(--lila-3); font: 700 .78rem/1 var(--f-texto); color: var(--morado);
}
.pagina-cuenta .olvide:hover { background: var(--lila-2); }
.pagina-cuenta .acceso__pie { display: flex; align-items: center; gap: 1.2rem; margin-top: 1.5rem; }
.pagina-cuenta .acceso__pie p { flex: 1; margin: 0; font-size: .8rem; line-height: 1.5; color: var(--tinta-2); }
.pagina-cuenta .entrar {
  flex: none; width: 56px; height: 56px; border-radius: 50%; cursor: pointer; display: grid; place-items: center;
  border: 0; color: #fff; background: var(--morado); box-shadow: 0 14px 28px -14px rgba(var(--acento-rgb), .8);
  transition: transform .2s var(--suave), background .2s;
}
.pagina-cuenta .entrar:hover { background: var(--morado-2); transform: translateX(2px); }
.pagina-cuenta .entrar svg { width: 20px; height: 20px; }
.pagina-cuenta .acceso__aviso { min-height: 1.3em; margin: .8rem .4rem 0; font-size: .85rem; color: #9B2C4A; }
.pagina-cuenta .acceso__abajo { margin: 1.3rem 0 0; padding-top: 1.2rem; border-top: 1px solid rgba(var(--tinte), .12); text-align: center; font-size: .9rem; }
/* Cambiar de modo es un ENLACE de texto, sin botón */
.pagina-cuenta .cambiar { padding: 0; border: 0; background: none; cursor: pointer; font: 700 .92rem var(--f-texto); color: var(--morado); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.pagina-cuenta .cambiar:hover { color: var(--morado-2); text-decoration-thickness: 2px; }
.pagina-cuenta .acceso__casilla { margin: 1rem 0 0; font-size: .84rem; }
.pagina-cuenta .acceso__casilla[hidden] { display: none; }
.pagina-cuenta .acceso__casilla a { color: inherit; }
.pagina-cuenta .acceso form { transition: opacity .25s var(--suave); }
.pagina-cuenta .acceso.cambiando form { opacity: 0; }
.pagina-cuenta [hidden] { display: none !important; }
/* ===== /PORTAL ===== */

/* ===== AGENDA (rediseño 21 oct) =====
   agenda.html: 5 pasos (Servicio · Fecha y hora · Mascota · Domicilio · Pago) + Gracias.
   Izquierda el paso; derecha, pegajosa, «Tu cita» y «Cotización»; abajo Atrás / Continuar
   a todo lo ancho. En celular todo va en una columna: paso, botones y luego el resumen.
   Piezas comunes que usa: .tarjeta-blanca, .rotulo, .titulo-grande, .btn, .chip,
   .campo, .casilla, .lista-vidrio, .ventana. Lo de aquí es sólo de la agenda (prefijo ag-). */
.ag { padding-top: clamp(1.5rem, 4vw, 2.6rem); }
.ag [hidden] { display: none !important; }
.ag .ico, .ag-requisitos .ico { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* Barra de avance de 5 segmentos */
.ag-progreso { margin-bottom: clamp(1.4rem, 3vw, 2.2rem); }
.ag-progreso .rotulo { margin-bottom: 1.1rem; }
.ag-progreso__actual { display: none; }
.ag-progreso ol { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; }
.ag-progreso li { display: grid; gap: .65rem; min-width: 0; }
.ag-progreso__riel { display: block; height: 4px; border-radius: 99px; background: var(--lila-2); overflow: hidden; }
.ag-progreso__riel::after { content: ""; display: block; height: 100%; width: 0; border-radius: inherit; background: var(--morado); transition: width .5s var(--suave); }
.ag-progreso li.hecho .ag-progreso__riel::after { width: 100%; }
.ag-progreso li.actual .ag-progreso__riel::after { width: 50%; }
.ag-progreso button {
  padding: 0; border: 0; background: none; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font: 600 .8rem/1.2 var(--f-texto); color: var(--tinta-3); cursor: default;
}
.ag-progreso li.hecho button, .ag-progreso li.actual button { color: var(--tinta); }
.ag-progreso li.hecho button:not(:disabled) { cursor: pointer; }
.ag-progreso li.hecho button:not(:disabled):hover { color: var(--morado); }

/* Rejilla: paso | resumen, y abajo los botones */
.ag-rejilla {
  /* stretch: la tarjeta del paso mide lo mismo que la columna derecha (Xim, ronda 2) */
  display: grid; gap: 20px 24px; align-items: stretch;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
  grid-template-areas: "paso resumen" "nav nav";
}
.ag-paso { grid-area: paso; min-width: 0; display: grid; gap: 16px; grid-template-rows: minmax(0, 1fr); }
.ag-paso > [data-paso="2"] { display: grid; gap: 16px; min-width: 0; grid-template-rows: auto 1fr; }
/* La columna se estira con la fila; lo pegajoso es su envoltorio, que nunca sale de la fila
   (así no se encima sobre Atrás / Continuar) */
.ag-resumen { grid-area: resumen; min-width: 0; }
.ag-resumen__pegajoso { position: sticky; top: 96px; display: grid; gap: 16px; }
.ag-nav { grid-area: nav; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 8px; }
.ag-nav .btn { width: 100%; height: 54px; font-size: 1rem; }
.ag-nav__atras { box-shadow: 0 14px 30px -22px rgba(var(--sombra-rgb), .5); }
.ag-aviso { grid-column: 1 / -1; margin: 0; padding: .8rem 1.1rem; border-radius: 14px; background: #FFF1EC; border: 1px solid #F3C9BA; font-size: .92rem; font-weight: 600; line-height: 1.45; color: #9A3F1E; }
/* Campo que falta: rojo suave */
.ag-falta input:not([type=radio]):not([type=checkbox]):not([type=file]), .ag-falta textarea { border-color: #DE8D73; background: #FFF7F4; }
.ag-pildoras.ag-falta, .ag-servicios.ag-falta, .ag-especies.ag-falta, .ag-metodos.ag-falta, .ag-horas.ag-falta { outline: 2px dashed #E39C86; outline-offset: 6px; border-radius: 14px; }
.ag-subir.ag-falta { border-color: #DE8D73; background: #FFF7F4; color: #9A3F1E; }
.casilla.ag-falta { background: #FFF1EC; box-shadow: 0 0 0 1.5px #E9AE9B inset; }
.ag-zona.ag-falta { box-shadow: 0 0 0 2px #E9AE9B, var(--vidrio-sombra); }
.ag-aviso:empty { display: none; }

/* Tarjeta de paso */
.ag-tarjeta { padding: clamp(1.3rem, 3.6vw, 2.3rem) clamp(1.1rem, 3.6vw, 2.2rem); display: grid; gap: 1.15rem; align-content: start; min-width: 0; }
.ag-titulo { font-size: clamp(2rem, 4.2vw, 2.65rem); margin: 0; letter-spacing: -.03em; }
.ag-sub { margin: -.7rem 0 .2rem; font-size: .92rem; color: var(--tinta-2); }
.ag-h3 { font-size: 1.55rem; font-weight: 500; margin: 0; }
.ag-h3--chico { font-size: 1.2rem; margin-top: .5rem; }
.ag-linea { border: 0; height: 1px; background: var(--vidrio-linea); margin: .5rem 0; width: 100%; }
.ag-enlace { padding: .3rem 0; border: 0; background: none; cursor: pointer; font: 700 .84rem/1 var(--f-texto); color: var(--morado); white-space: nowrap; }
.ag-enlace:hover { text-decoration: underline; text-underline-offset: 3px; }
.ag-opc { font-weight: 500; color: var(--tinta-3); }
.ag-icono { flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--lila-2); color: var(--morado); }

/* Etiquetas de campo: en la agenda van en frase normal y negritas (como las maquetas) */
.ag .campo > label:not([class]), .ag-etiqueta {
  display: block; font: 700 .82rem/1.3 var(--f-texto); letter-spacing: 0; text-transform: none; color: var(--tinta);
}
.ag .campo textarea { min-height: 5.5rem; }
/* Las tarjetas-opción y la caja de subir viven dentro de .campo: sin las versalitas de .campo label */
.ag .campo .ag-opcion, .ag .campo .ag-subir { text-transform: none; letter-spacing: 0; font-size: .9rem; color: #3B2C8C; }
.ag .campo .ag-opcion { color: var(--tinta); }
.ag-campos { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ag-campos--mascota { grid-template-columns: 1fr 1fr; }
.ag-campos--calle { grid-template-columns: 2fr 1fr 1fr; }

/* Notas con ícono (i) */
.ag-nota { display: flex; gap: .55rem; align-items: flex-start; margin: 0; font-size: .8rem; line-height: 1.5; color: var(--tinta-2); }
.ag-nota .ico { width: 15px; height: 15px; margin-top: .15em; color: var(--morado); }
.ag-nota--aviso { color: #9A4A17; }
.ag-nota--aviso .ico { color: #C46A2C; }

/* Tarjetas-opción (servicio, especie): radio escondido; la elegida, blanca con borde morado */
.ag-servicios { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ag-opcion {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: .3rem;
  padding: 1.15rem 1.15rem 1.25rem; border-radius: 20px; cursor: pointer; min-width: 0;
  background: #F4F0FC; border: 1.5px solid transparent;
  transition: background .2s, border-color .2s, box-shadow .25s, transform .2s var(--suave);
}
.ag-opcion:hover:not(:has(input:checked)) { background: #EFE9FB; }
.ag-opcion input { position: absolute; opacity: 0; pointer-events: none; }
.ag-opcion:has(input:checked) { background: #fff; border-color: var(--morado); box-shadow: 0 20px 34px -22px rgba(var(--sombra-rgb), .6); }
.ag-opcion:has(input:focus-visible) { outline: 2px solid var(--morado); outline-offset: 3px; }
.ag-opcion > strong { margin-top: .8rem; font: 500 1.4rem/1.15 var(--f-titulo); letter-spacing: -.015em; color: var(--titulo); }
.ag-opcion > small { font-size: .8rem; line-height: 1.45; color: var(--tinta-2); }
.ag-desde { margin-top: auto; padding-top: .8rem; font-size: .78rem; color: var(--tinta-2); }
.ag-desde b { color: var(--tinta); }
/* Servicio, más delgada (Xim, 29 oct): el ícono al lado del nombre y menos aire arriba y abajo */
.ag-servicios .ag-opcion { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: .7rem; row-gap: .35rem; padding: .95rem 1.1rem 1rem; }
.ag-servicios .ag-icono { width: 36px; height: 36px; border-radius: 10px; }
.ag-servicios .ag-opcion > strong { margin-top: 0; font-size: 1.3rem; }
.ag-servicios .ag-opcion > small, .ag-servicios .ag-desde { grid-column: 1 / -1; }
.ag-servicios .ag-desde { padding-top: .2rem; }
.ag-sub-servicio { display: grid; gap: 2rem; padding-top: 1.8rem; border-top: 1px solid var(--vidrio-linea); }
/* Cada pregunta del servicio con aire propio, todas del mismo tamaño (Xim, 21 oct) */
.ag-bloque { display: grid; gap: 2rem; }
.ag-grupo { display: grid; gap: 1rem; }
.ag-sub-servicio .ag-h3 { font-size: 1.4rem; }
.ag-otra { max-width: 420px; }

/* Píldoras para elegir (vacuna, sí/no, tipo de consulta) */
.ag-pildoras { display: flex; flex-wrap: wrap; gap: 8px; }
.ag-pildora {
  position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 42px; min-width: 64px; padding: 0 1.2rem;
  border-radius: 999px; cursor: pointer; background: #EFE9FB; border: 1.5px solid transparent;
  font: 700 .86rem/1.2 var(--f-texto); color: #3B2C8C; text-align: center;
  transition: background .2s, color .2s, box-shadow .25s;
}
.ag-pildora:hover:not(:has(input:checked)) { background: #E7DEFA; }
.ag-pildora input { position: absolute; opacity: 0; pointer-events: none; }
.ag-pildora:has(input:checked) { background: var(--morado); color: #fff; box-shadow: 0 10px 22px -12px rgba(var(--acento-rgb), .9); }
.ag-pildora:has(input:focus-visible) { outline: 2px solid var(--morado); outline-offset: 2px; }

/* ---------- Paso 2: zona ---------- */
.ag-zona { padding: 1rem 1.25rem; display: grid; gap: 1rem; }
.ag-zona__fila { display: flex; align-items: center; gap: 1rem; min-width: 0; }
.ag-zona__icono { flex: none; width: 48px; height: 48px; border-radius: 13px; display: grid; place-items: center; background: var(--morado); color: #fff; box-shadow: 0 12px 22px -12px rgba(var(--acento-rgb), .9); }
.ag-zona__texto { min-width: 0; flex: 1; line-height: 1.3; }
.ag-zona__texto .rotulo { display: block; margin: 0 0 .15rem; font-size: .64rem; }
.ag-zona__texto strong { display: block; font-size: 1.05rem; font-weight: 700; }
.ag-zona__texto small { display: block; font-size: .8rem; color: var(--tinta-2); }
.ag-zona__buscar { display: grid; gap: .7rem; }
.ag-zona__controles { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .6rem; }
.ag-autocompleta { position: relative; }
.ag-sugerencias {
  position: absolute; z-index: 6; top: calc(100% + 6px); left: 0; right: 0; margin: 0; padding: 6px; list-style: none;
  border-radius: 18px; background: #fff; border: 1px solid var(--vidrio-borde); box-shadow: 0 22px 50px -20px rgba(var(--sombra-rgb), .45);
}
.ag-sugerencias li { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem .8rem; border-radius: 12px; cursor: pointer; line-height: 1.3; }
.ag-sugerencias li small { color: var(--tinta-3); font-size: .8rem; white-space: nowrap; }
.ag-sugerencias li[aria-selected="true"], .ag-sugerencias li:hover { background: var(--lila-3); color: var(--morado); }

/* ---------- Paso 2: calendario ---------- */
.ag-cal { padding: clamp(1.2rem, 3.4vw, 2.3rem) clamp(1rem, 3.4vw, 2.3rem); min-width: 0; }
.ag-cal__cabeza { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.3rem; }
.ag-cal__mes { margin: 0; font-size: clamp(1.8rem, 3.8vw, 2.6rem); font-weight: 500; }
.ag-cal__mes span { color: #9C92B8; }
.ag-cal__flechas { display: flex; gap: .55rem; }
.ag-cal__flechas button {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: #fff; border: 1px solid var(--lila-2); color: var(--tinta); transition: border-color .2s, opacity .2s;
}
.ag-cal__flechas button:hover:not(:disabled) { border-color: var(--morado); color: var(--morado); }
.ag-cal__flechas button:disabled { opacity: .4; cursor: default; }
.ag-cal__flechas .ico { width: 18px; height: 18px; }
.ag-cal__semana { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); padding: .75rem 0; border-radius: 14px; background: #EEE8FA; text-align: center; font: 700 .86rem/1 var(--f-texto); color: var(--morado); }
.ag-cal__dias { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px clamp(4px, 1.4vw, 14px); margin-top: 1rem; }
.ag-dia {
  position: relative; aspect-ratio: 1.28; min-height: 44px; display: grid; place-content: center; justify-items: center; padding: 0;
  border: 1.5px solid transparent; border-radius: 16px; background: none; cursor: pointer;
  font: 500 clamp(1.15rem, 2.4vw, 1.7rem)/1 var(--f-titulo); color: var(--titulo);
  transition: background .2s, border-color .2s, box-shadow .25s;
}
/* El elegido conserva su morado al pasar el cursor (antes quedaba lila con número blanco) */
.ag-dia:hover:not(:disabled):not([aria-pressed="true"]) { background: var(--lila-3); }
.ag-dia:disabled { color: #C8C0DC; cursor: default; }
.ag-dia small { font: 700 .58rem/1 var(--f-texto); letter-spacing: .14em; text-transform: uppercase; color: var(--morado); margin-top: .3rem; }
.ag-dia--zona::after, .ag-dia--pocos::after { content: ""; position: absolute; left: 50%; bottom: 9%; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--morado); }
.ag-dia--pocos::after { background: #E0883A; }
.ag-dia--hoy { border-color: var(--lila-2); }
.ag-dia--hoy::after { display: none; }
.ag-dia[aria-pressed="true"] { background: var(--morado); border-color: var(--morado); color: #fff; box-shadow: 0 0 0 4px #E4DCFA, 0 16px 26px -14px rgba(var(--acento-rgb), .9); }
.ag-dia[aria-pressed="true"]::after { display: none; }
.ag-dia[aria-pressed="true"] small { color: #fff; }
.ag-cal__leyenda { display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; margin-top: 1.1rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--vidrio-linea); font-size: .8rem; color: var(--tinta-2); }
.ag-cal__leyenda span { display: inline-flex; align-items: center; gap: .45rem; }
.ag-cal__gris { color: #A39BBB; }
.ag-punto { width: 6px; height: 6px; border-radius: 50%; background: var(--morado); }
.ag-punto--pocos { background: #E0883A; }
.ag-punto--sin { background: #D3CCE4; }
.ag-horas__cabeza { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .3rem 1rem; margin: 1.5rem 0 1rem; }
.ag-horas__cabeza h3 { margin: 0; font-size: clamp(1.4rem, 2.6vw, 1.75rem); font-weight: 500; }
.ag-horas__cabeza span { font-size: .84rem; color: var(--tinta-2); }
/* Tantas columnas como quepan: si Xim agrega horas en el panel, bajan a otra fila parejas */
.ag-horas { display: grid; grid-template-columns: repeat(auto-fit, minmax(86px, 1fr)); gap: 10px; }
.ag-hora {
  height: 60px; border-radius: 16px; cursor: pointer; display: grid; place-content: center; justify-items: center; gap: .2rem;
  background: #EFE9FB; border: 1.5px solid transparent; font: 700 1rem/1 var(--f-texto); color: #3B2C8C;
  transition: background .2s, color .2s, box-shadow .25s;
}
.ag-hora:hover:not(:disabled):not([aria-pressed="true"]) { background: #E7DEFA; }
.ag-hora[aria-pressed="true"] { background: var(--morado); color: #fff; box-shadow: 0 14px 24px -12px rgba(var(--acento-rgb), .9); }
.ag-hora:disabled { cursor: not-allowed; background: transparent; border: 1.5px dashed var(--lila-2); color: #A39BBB; font-weight: 500; }
.ag-hora small { font: 700 .58rem/1 var(--f-texto); letter-spacing: .14em; text-transform: uppercase; }
.ag-horas__vacio { grid-column: 1 / -1; margin: 0; padding: .9rem 1.1rem; border-radius: 16px; background: var(--lila-3); font-size: .9rem; color: var(--tinta-2); }

/* ---------- Paso 3: especie y preguntas ---------- */
.ag-especie { gap: .55rem; }
.ag-especies { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ag-opcion--centro { align-items: center; justify-content: center; gap: .55rem; padding: 1.1rem .6rem; }
.ag-opcion--centro .ico { width: 26px; height: 26px; color: var(--morado); }
.ag-opcion--centro b { font-size: .92rem; }
.ag-preguntas { display: grid; gap: 0; padding: 1.4rem clamp(1rem, 2.6vw, 1.6rem) .6rem; border-radius: 22px; background: #F8F5FE; margin-top: .4rem; }
.ag-preguntas > .ag-h3 { margin-bottom: .6rem; }
.ag-pregunta { display: grid; gap: .75rem; padding: 1.1rem 0; border-top: 1px solid var(--vidrio-linea); }
#preguntas-servicio > .ag-pregunta:first-child { border-top: 0; padding-top: .4rem; }
.ag-pregunta > p { margin: 0; font-weight: 700; font-size: .95rem; color: var(--tinta); }
.ag-pregunta > p small { display: block; font-weight: 400; font-size: .8rem; color: var(--tinta-2); margin-top: .15rem; }
.ag-pregunta > p label { font: inherit !important; }
.ag-preguntas .campo input, .ag-preguntas .campo textarea { background: #fff; }

/* ---------- Paso 4: domicilio ---------- */
.ag-pin { display: flex; align-items: center; gap: .8rem; padding: .7rem 1.1rem .7rem .75rem; border-radius: 18px; background: #F4F0FC; font-size: .9rem; }
.ag-pin .ag-icono { width: 36px; height: 36px; border-radius: 10px; }
.ag-pin .ag-icono .ico { width: 17px; height: 17px; }
.ag-pin > span:nth-child(2) { flex: 1; min-width: 0; }
.ag-pin__nota { color: var(--tinta-2); }
.ag-mapa-caja { gap: .55rem; }
.ag-mapa { height: 260px; border-radius: 18px; overflow: hidden; border: 1px solid var(--campo-borde); }
.ag-subir {
  position: relative; display: flex; align-items: center; justify-content: center; gap: .6rem; min-height: 64px; padding: 1rem;
  border-radius: 18px; border: 1.5px dashed rgba(var(--tinte), .45); background: #FAF8FE; cursor: pointer;
  font: 700 .9rem/1.3 var(--f-texto); color: #3B2C8C; text-align: center; transition: background .2s, border-color .2s;
}
.ag-subir:hover { background: var(--lila-3); border-color: var(--morado); }
.ag-subir input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.ag-subir:has(input:focus-visible) { outline: 2px solid var(--morado); outline-offset: 3px; }
.ag-subir.listo { border-style: solid; border-color: var(--morado); background: #fff; color: var(--morado); }
.ag-subir .ico { width: 18px; height: 18px; color: var(--morado); }
.ag-subir span { overflow-wrap: anywhere; }

/* ---------- Paso 5: pago ---------- */
.ag-metodos { display: grid; gap: 10px; margin-top: -.5rem; }
.ag-metodo {
  position: relative; display: flex; align-items: center; gap: 1rem; padding: .85rem 1.1rem .85rem .9rem; border-radius: 18px; cursor: pointer;
  background: #F4F0FC; border: 1.5px solid transparent; transition: background .2s, border-color .2s, box-shadow .25s;
}
.ag-metodo:hover:not(:has(input:checked)) { background: #EFE9FB; }
.ag-metodo input { position: absolute; opacity: 0; pointer-events: none; }
.ag-metodo:has(input:checked) { background: #fff; border-color: var(--morado); box-shadow: 0 18px 30px -22px rgba(var(--sombra-rgb), .6); }
.ag-metodo:has(input:focus-visible) { outline: 2px solid var(--morado); outline-offset: 3px; }
.ag-metodo .ag-icono { background: #E9E2FA; }
.ag-metodo__texto { flex: 1; min-width: 0; line-height: 1.3; }
.ag-metodo__texto b { display: block; font-size: .95rem; }
.ag-metodo__texto small { display: block; font-size: .8rem; color: var(--tinta-2); }
.ag-radio { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid rgba(var(--tinte), .4); display: grid; place-items: center; }
.ag-radio::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--morado); transform: scale(0); transition: transform .2s var(--suave); }
.ag-metodo:has(input:checked) .ag-radio { border-color: var(--morado); }
.ag-metodo:has(input:checked) .ag-radio::after { transform: scale(1); }
.ag-privacidad { align-items: center; padding: .9rem 1.1rem; border-radius: 16px; background: #F4F0FC; color: var(--tinta); font-size: .9rem; }
.ag-privacidad a { font-weight: 700; color: var(--morado); }

/* ---------- Resumen: Tu cita + Cotización ---------- */
.ag-cita { padding: 1.45rem 1.4rem 1rem; min-width: 0; }
.ag-cita > .rotulo { font-size: .64rem; margin-bottom: .5rem; }
.ag-filas { list-style: none; margin: 0; padding: 0; }
.ag-fila { display: flex; align-items: center; gap: .85rem; padding: .8rem 0; border-top: 1px solid var(--vidrio-linea); min-width: 0; }
.ag-fila:first-child { border-top: 0; }
.ag-fila__icono { flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--lila-3); color: var(--morado); }
.ag-fila__icono .ico { width: 18px; height: 18px; }
.ag-fila--pendiente .ag-fila__icono { background: transparent; border: 1.5px dashed var(--lila-2); color: #A39BBB; }
.ag-fila__texto { flex: 1; min-width: 0; line-height: 1.3; }
.ag-fila__texto small { display: block; font-size: .72rem; color: var(--tinta-2); }
.ag-fila__texto strong { display: block; font-size: .95rem; font-weight: 700; overflow-wrap: anywhere; }
.ag-fila--pendiente .ag-fila__texto strong { font-weight: 500; color: var(--tinta-2); }
.ag-coti { padding: 1.45rem 1.4rem 1.3rem; min-width: 0; }
.ag-coti__cabeza { position: relative; display: flex; align-items: center; gap: .45rem; margin-bottom: .7rem; }
.ag-coti__cabeza h3 { margin: 0; font-size: 1.65rem; font-weight: 500; }
.ag-coti__cabeza > span { margin-left: auto; font: 700 .62rem/1 var(--f-texto); letter-spacing: .16em; color: var(--tinta-2); }
/* La «i» junto al título abre un globito con la aclaración del total */
.ag-info { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--morado); cursor: pointer; transition: background .2s; }
.ag-info:hover, .ag-info[aria-expanded="true"] { background: var(--lila-3); }
.ag-info .ico { width: 18px; height: 18px; }
.ag-globo {
  position: absolute; z-index: 5; top: calc(100% + 8px); left: 0; right: 0; margin: 0; padding: .85rem 1rem;
  border-radius: 14px; background: #fff; border: 1px solid var(--vidrio-borde);
  box-shadow: 0 22px 40px -18px rgba(var(--sombra-rgb), .55); font-size: .84rem; line-height: 1.5; color: var(--tinta);
}
.ag-coti__linea { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .7rem 0; border-top: 1px solid var(--vidrio-linea); font-size: .88rem; color: var(--tinta-2); }
.ag-coti__linea:first-of-type { border-top: 0; }
.ag-coti__linea b { color: var(--tinta); white-space: nowrap; }
.ag-coti__linea small, .ag-coti__total small { font-family: var(--f-texto); font-weight: 500; font-size: .78rem; color: var(--tinta-2); }
.ag-coti__total { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: .5rem 0 1rem; padding: 1rem 1.15rem; border-radius: 16px; background: #F3EFFB; }
.ag-coti__total > span { font: 800 .64rem/1.4 var(--f-texto); letter-spacing: .16em; text-transform: uppercase; color: var(--tinta); }
.ag-coti__total strong { display: grid; justify-items: end; text-align: right; font: 500 clamp(1.6rem, 3vw, 2rem)/1 var(--f-titulo); color: var(--titulo); letter-spacing: -.02em; }
.ag-coti__monto { white-space: nowrap; }
.ag-coti__monto--texto { white-space: normal; font: 700 .95rem/1.3 var(--f-texto); letter-spacing: 0; }
.ag-coti .ag-coti__total { margin-bottom: 0; }
.ag-coti__falta { margin-top: .35rem; font: 600 .74rem/1.35 var(--f-texto); letter-spacing: 0; color: var(--tinta-2); }

/* ---------- Popup de requisitos ---------- */
.ventana.ag-requisitos { width: min(880px, 100% - 32px); padding: clamp(1.4rem, 4vw, 2.6rem); }
.ventana.ag-condiciones { width: min(680px, 100% - 32px); }
.ag-condiciones h2 { outline: none; }
.ag-requisitos__cabeza { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.4rem; }
.ag-requisitos__cabeza .rotulo { margin-bottom: .3rem; font-size: .66rem; }
.ag-requisitos__cabeza h2 { margin: 0; font-size: clamp(2.1rem, 4.4vw, 2.9rem); }
.ag-cerrar { flex: none; width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--lila-3); color: var(--tinta); display: grid; place-items: center; cursor: pointer; }
.ag-cerrar:hover { background: var(--lila-2); }
.ag-cerrar .ico { width: 16px; height: 16px; }
.ag-requisitos__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 0; }
.ag-requisitos__cols > div { padding-right: 2rem; }
.ag-requisitos__cols > div + div { padding: 0 0 0 2rem; border-left: 1px solid var(--vidrio-linea); }
.ag-requisitos .chip { text-transform: none; letter-spacing: 0; font-size: .74rem; margin-bottom: 1.1rem; }
.ag-requisitos .lista-vidrio { gap: 1rem; font-size: .9rem; }
.ag-requisitos .lista-vidrio > li { padding-left: 2rem; }
.ag-requisitos .lista-vidrio > li::before { width: 1rem; height: 1rem; top: .2em; }
.ag-requisitos .lista-vidrio .tenue { display: block; font-size: .86rem; line-height: 1.5; }
.ag-requisitos__todas .lista-vidrio > li::before { opacity: .45; }
.ag-requisitos__pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.6rem; padding-top: 1.4rem; border-top: 1px solid var(--vidrio-linea); }
.ag-requisitos__casilla { align-items: center; padding: .8rem 1rem; border-radius: 14px; background: #F4F0FC; color: var(--tinta); font-weight: 700; font-size: .9rem; }
.ag-requisitos__botones { display: flex; gap: .6rem; margin-left: auto; }
.ag-requisitos .btn--primario:disabled { background: #E3DBF6; border-color: #E3DBF6; color: #9D92BE; box-shadow: none; cursor: not-allowed; transform: none; }

/* ---------- Gracias ---------- */
.ag-gracias { padding-top: clamp(.5rem, 2vw, 1.5rem); }
.ag-gracias__cabeza { text-align: center; max-width: 62rem; margin: 0 auto 2.4rem; display: grid; justify-items: center; }
.ag-check { width: 60px; height: 60px; border-radius: 18px; display: grid; place-items: center; background: var(--morado); color: #fff; margin-bottom: 1.6rem; box-shadow: 0 18px 30px -14px rgba(var(--acento-rgb), .9); }
.ag-check .ico { width: 26px; height: 26px; stroke-width: 2.2; }
.ag-gracias__cabeza .rotulo { font-size: .66rem; }
.ag-gracias__cabeza h1 { margin: 0 0 .4em; outline: none; }
.ag-gracias__cabeza p { max-width: 28rem; }
.ag-gracias__rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: stretch; }
.ag-gracias__nota { margin: 0 0 1rem; font-size: .84rem; line-height: 1.55; color: var(--tinta-2); }
.ag-gracias__links { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem 1.6rem; margin: 0 0 .5rem; }
.ag-gracias__links a:not(.btn) { font: 700 .84rem/1 var(--f-texto); color: var(--morado); text-decoration: none; padding: .3rem 0; }
.ag-gracias__links a:not(.btn):hover { text-decoration: underline; }
.ag-gracias__links .btn { margin-left: auto; }   /* el botón siempre a la derecha, aunque baje de renglón */
.ag-banda { display: flex; align-items: center; gap: .9rem; margin-top: 16px; padding: .9rem .9rem .9rem 1.4rem; border-radius: 22px; }
.ag-banda > .ico { width: 18px; height: 18px; color: var(--morado); }
.ag-banda p { flex: 1; min-width: 0; margin: 0; font-size: .9rem; color: var(--tinta-2); }
.ag-banda p b { color: var(--tinta); }
.ag-banda__btn { background: var(--lila-3); border-color: var(--lila-3); color: #3B2C8C; }
.ag-banda__btn:hover { background: var(--lila-2); border-color: var(--lila-2); }
.ag-gracias__fin { display: flex; justify-content: center; margin-top: 1.8rem; }
.ag-confeti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 40; }

/* ---------- Tableta y celular ---------- */
@media (max-width: 900px) {
  .ag-rejilla { grid-template-columns: minmax(0, 1fr); grid-template-areas: "paso" "nav" "resumen"; }
  .ag-resumen__pegajoso { position: static; }
  .ag-gracias__rejilla { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .ag-progreso ol { gap: 6px; }
  .ag-progreso button { display: none; }
  .ag-progreso__actual { display: inline; }
  .ag-servicios { grid-template-columns: 1fr; gap: 10px; }
  /* En celular la tarjeta de servicio va acostada: ícono a la izquierda */
  .ag-servicios .ag-opcion { align-items: start; column-gap: .9rem; row-gap: .15rem; padding: 1rem; }
  .ag-servicios .ag-icono { grid-row: span 3; }
  .ag-servicios .ag-opcion > small, .ag-servicios .ag-desde { grid-column: 2; }
  .ag-servicios .ag-opcion > strong { font-size: 1.25rem; }
  .ag-campos, .ag-campos--mascota { grid-template-columns: 1fr 1fr; }
  .ag-campos--calle { grid-template-columns: 1fr 1fr; }
  .ag-campos--calle .campo:first-child { grid-column: 1 / -1; }
  .ag-campos:not(.ag-campos--mascota):not(.ag-campos--calle) { grid-template-columns: 1fr; }
  .ag-zona__controles { grid-template-columns: 1fr; }
  .ag-horas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ag-dia { aspect-ratio: auto; height: 46px; border-radius: 12px; }
  .ag-dia small { font-size: .5rem; letter-spacing: .08em; margin-top: .15rem; }
  .ag-dia--hoy { height: 50px; }
  .ag-cal__semana { font-size: .74rem; }
  .ag-requisitos__cols { grid-template-columns: 1fr; }
  .ag-requisitos__cols > div, .ag-requisitos__cols > div + div { padding: 0; border-left: 0; }
  .ag-requisitos__cols > div + div { padding-top: 1.4rem; border-top: 1px solid var(--vidrio-linea); }
  .ag-requisitos__botones { width: 100%; }
  .ag-requisitos__botones .btn { flex: 1; }
  .ag-banda { flex-wrap: wrap; padding: 1rem 1.1rem; }
  .ag-banda p { flex-basis: calc(100% - 2rem); }
  .ag-banda__btn { margin-left: auto; }
}
@media (max-width: 400px) {
  .ag-nav { gap: 8px; }
  .ag-nav .btn { padding: 0 .8rem; }
  .ag-cal__dias { gap: 6px 3px; }
  .ag-cal__cabeza { margin-bottom: 1rem; }
  .ag-cal__flechas button { width: 42px; height: 42px; }
  .ag-pin { flex-wrap: wrap; }
  .ag-pin__nota { display: none; }
  .ag-metodo { gap: .75rem; padding: .8rem .9rem .8rem .75rem; }
  .ag-coti__total strong { font-size: 1.7rem; }
}
/* Paso 5: la información del método elegido */
.ag-pago-info { display: grid; gap: .7rem; padding: 1.1rem 1.2rem; border-radius: 18px; background: #F8F5FE; }
.ag-pago-info:empty { display: none; }
.ag-pago-info p { margin: 0; font-size: .9rem; color: var(--tinta-2); }
.ag-pago-info .banco { margin: 0; }
.ag-pago-info .banco div { background: #fff; }
.ag-pago-info__fila { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

/* Paso 3 con sesión: sus peluditos guardados */
.ag-sexo { display: grid; gap: .55rem; align-content: start; }
.ag-expediente { display: grid; gap: 1rem; padding: 1.2rem 1.3rem; border-radius: 18px; border: 1px dashed var(--lila-2); }
.ag-mis__op small { font-size: .76rem; color: var(--tinta-2); }
.ag-mis__inicial { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--lila-3); font: italic 500 1.25rem/1 var(--f-titulo); color: var(--morado); }
.ag-mis__inicial--mas { font-style: normal; font-family: var(--f-texto); font-weight: 600; }
/* ===== ASESORÍA (28 oct) =====
   asesoria.html (main.ag.as): el cuestionario de «Mi mascota tiene algo». Reusa lo de la agenda
   (.ag-opcion, .ag-pildora, .ag-subir, .ag-fila, .selector__boton…); aquí sólo lo nuevo (prefijo as-):
   secciones numeradas, control segmentado, píldora para agregar «Otro», contador de días,
   interruptor, tarjetas de riesgo y de contexto, desplegable de vacunas, tarjeta roja
   «Posible urgencia» y «Qué sigue». Todo control mide --alto-control o 42px como las píldoras. */
.as-extra { margin-top: -1rem; }
/* Los datos de la mascota con el mismo aire que el resto de la tarjeta */
.as .ag-nueva { display: grid; gap: 1.15rem; }

/* Su salud (paso Tu mascota) */
.as-salud { display: grid; gap: 1.8rem; padding-top: 1.6rem; border-top: 1px solid var(--vidrio-linea); }
.as-salud .ag-h3 { font-size: 1.3rem; }

/* Secciones numeradas dentro de un paso: «① Su ánimo» */
.as-sec { display: grid; gap: 1rem; min-width: 0; }
.as-sec + .as-sec { padding-top: 1.7rem; border-top: 1px solid var(--vidrio-linea); }
.as-num { display: flex; align-items: center; gap: .85rem; margin: 0; font-size: clamp(1.4rem, 2.6vw, 1.75rem); font-weight: 500; }
.as-num label { font: inherit; letter-spacing: inherit; text-transform: none; color: inherit; }
.as-num .ag-opc { font: 500 .82rem/1 var(--f-texto); letter-spacing: 0; }
.as-num__n { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--lila-3); font: 700 .74rem/1 var(--f-texto); letter-spacing: 0; color: var(--morado); }
.as-num__sub { margin: .25rem 0 0 calc(28px + .85rem); font-size: .84rem; color: var(--tinta-2); }

/* Mosaico de ícono (filas, grupos, riesgos, «Qué sigue») */
.as-tile { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--lila-3); color: var(--morado); }
.as-tile .ico { width: 19px; height: 19px; }
.as-tile--chico { width: 28px; height: 28px; border-radius: 8px; }
.as .as-tile--chico .ico { width: 15px; height: 15px; }

/* Preguntas chicas dentro de un panel */
.as-pregunta { margin: 0; font-weight: 700; font-size: .88rem; color: var(--tinta); }
.as-pregunta span { font-weight: 500; color: var(--tinta-2); }
.as-fila-pregunta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .6rem 1rem; }
.as-fila-pregunta > span { font-weight: 700; font-size: .88rem; color: var(--tinta); }
.as-fila-pregunta--izq { justify-content: flex-start; }

/* Panel que se abre con una respuesta (heridas, convulsión, medicamento, vacunas…) */
.as-panel { display: grid; gap: 1rem; padding: 1.1rem 1.2rem 1.2rem; border-radius: 20px; background: #F8F5FE; border: 1px solid var(--vidrio-borde); min-width: 0; grid-template-columns: minmax(0, 1fr); }
.as-panel .campo input, .as-panel .campo textarea, .as-panel .ag-subir { background: #fff; }
.as-otra { display: grid; gap: .7rem; }

/* Píldoras de casilla marcadas: con palomita (síntomas, colores, «¿Qué comió?»…) */
.as .ag-pildora:has(input[type=checkbox]:checked)::before {
  content: ""; flex: none; width: 10px; height: 5.5px; margin: -3px .55rem 0 0;
  border: 2px solid currentColor; border-top: 0; border-right: 0; transform: rotate(-45deg);
}

/* Control segmentado: Normal | Disminuida | … */
.as-seg { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px; max-width: 100%; min-height: var(--alto-control); padding: 4px; border-radius: 999px; background: #EFE9FB; }
.as-seg label {
  position: relative; display: inline-flex; align-items: center; justify-content: center; height: calc(var(--alto-control) - 8px); padding: 0 1rem;
  border-radius: 999px; cursor: pointer; font: 600 .86rem/1 var(--f-texto); color: var(--tinta-2); white-space: nowrap;
  transition: background .2s, color .2s, box-shadow .2s;
}
.as-seg input { position: absolute; opacity: 0; pointer-events: none; }
.as-seg label:hover:not(:has(input:checked)) { color: var(--morado); }
.as-seg label:has(input:checked) { background: #fff; color: var(--morado); font-weight: 700; box-shadow: 0 6px 16px -8px rgba(var(--sombra-rgb), .55); }
.as-seg label:has(input:focus-visible) { outline: 2px solid var(--morado); outline-offset: 1px; }
.as-seg--blanco { background: #fff; }
.as-seg--blanco label:has(input:checked) { background: var(--lila-3); box-shadow: 0 6px 14px -8px rgba(var(--sombra-rgb), .45); }

/* Píldora para agregar: «Otro [+]» punteada → «Tiembla ×» morada */
.as-mas {
  display: inline-flex; align-items: center; gap: .3rem; height: 42px; max-width: 100%; padding: 0 4px 0 1rem;
  border-radius: 999px; border: 1.5px dashed rgba(var(--tinte), .45); background: #fff; transition: border-color .2s, box-shadow .2s;
}
.as-mas:focus-within { border-style: solid; border-color: var(--morado); box-shadow: 0 0 0 4px rgba(var(--tinte), .12); }
/* Cerrada: sólo el círculo con la cruz, del alto de las píldoras */
.as-mas--cerrada { padding: 0; border-color: transparent; background: none; }
.as-mas--cerrada:focus-within { border-color: transparent; box-shadow: none; }
.ag .as-mas--cerrada input[type=text] { display: none; }
.as-mas--cerrada button { width: 42px; height: 42px; }
.as-mas--cerrada button:focus-visible { outline: 2px solid var(--morado); outline-offset: 2px; }
.ag .as-mas input[type=text] {
  width: 7.5rem; min-width: 0; height: auto; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; outline: none;
  font: 600 .86rem/1.2 var(--f-texto); color: var(--tinta);
}
.as-mas input::placeholder { color: var(--tinta-3); }
.as-mas button, .as-agregada button {
  flex: none; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: var(--lila-3); color: var(--morado); transition: background .2s;
}
.as-mas button:hover { background: var(--lila-2); }
.as .as-mas .ico, .as .as-agregada .ico { width: 14px; height: 14px; stroke-width: 2.2; }
.as-agregada {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 42px; max-width: 100%; padding: 4px 5px 4px 1.1rem; border-radius: 999px;
  background: var(--morado); color: #fff; font: 700 .86rem/1.2 var(--f-texto); box-shadow: 0 10px 22px -12px rgba(var(--acento-rgb), .9);
}
.as-agregada > span { overflow-wrap: anywhere; }
.as-agregada button { background: rgba(255, 255, 255, .2); color: #fff; }
.as-agregada button:hover { background: rgba(255, 255, 255, .32); }
.as-agregada button:focus-visible, .as-mas button:focus-visible { outline: 2px solid var(--morado); outline-offset: 2px; }

/* Vacunas y desparasitación (Xim, 29 oct): una fila de dos controles del mismo alto.
   «¿Cuáles?» (60 %) + «Su última vacuna» (40 %); la desparasitación usa la mitad. En celular, uno abajo del otro. */
.as-fila-dos { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 1rem; align-items: start; }
.as-fila-dos > .as-mes:only-child { grid-column: 1; max-width: 100%; }
.as-fila-dos:has(> .as-mes:only-child) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

/* Desplegable de varias a la vez: la caja es igual a un input; el botón la cubre toda (con la flechita)
   y los chips van encima, así tocar cualquier parte abre y sólo la «×» quita. La lista flota debajo. */
.as-multi { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: .45rem; min-width: 0; }
.as-multi__control { position: relative; min-width: 0; }
.as-multi__boton {
  position: absolute; inset: 0; width: 100%; padding: 0; border-radius: 14px; cursor: pointer;
  border: 1px solid var(--campo-borde); background: #fff; transition: border-color .2s, box-shadow .2s;
}
.as-multi__boton::after {
  content: ""; position: absolute; right: 1.1rem; top: calc(var(--alto-control) / 2 - 4px); width: 12px; height: 8px; transition: transform .2s var(--suave);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%235B45C4' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
}
.as-multi__boton[aria-expanded="true"]::after { transform: rotate(180deg); }
.as-multi__boton:focus-visible, .as-multi__boton[aria-expanded="true"] { outline: none; border-color: var(--frio); box-shadow: 0 0 0 4px rgba(var(--tinte), .16); }
.as-multi__chips {
  position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: var(--alto-control);
  margin: 0; padding: 7px 2.6rem 7px 7px; list-style: none; pointer-events: none;
}
.as-multi__vacio { padding-left: calc(1.1rem - 7px); font: 400 1rem var(--f-texto); color: var(--tinta-3); }
.as-chip {
  display: inline-flex; align-items: center; gap: .3rem; min-width: 0; max-width: 100%; min-height: 30px; padding: 3px 3px 3px .8rem;
  border-radius: 999px; background: var(--lila-3); border: 1px solid var(--lila-2); color: #3B2C8C; font: 700 .8rem/1.2 var(--f-texto);
}
.as-chip > span { overflow-wrap: anywhere; }
.as-chip button {
  flex: none; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: #fff; color: var(--morado); pointer-events: auto; transition: background .2s;
}
.as-chip button:hover { background: var(--lila-2); }
.as-chip button:focus-visible { outline: 2px solid var(--morado); outline-offset: 1px; }
.as .as-chip .ico { width: 12px; height: 12px; stroke-width: 2.4; }
.as-multi__panel {
  position: absolute; z-index: 25; top: calc(100% + 6px); left: 0; right: 0;
  display: grid; gap: 2px; padding: 6px; border-radius: 16px; background: #fff;
  border: 1px solid rgba(var(--tinte), .22); box-shadow: 0 22px 50px -20px rgba(var(--sombra-rgb), .4);
}
.as-multi__panel[hidden] { display: none; }
.as-multi__op { align-items: center; padding: .65rem .8rem; border-radius: 11px; color: var(--tinta); font-weight: 600; font-size: .92rem; }
.as-multi__op:hover { background: var(--lila-3); }
.as-multi__op:has(input:checked) { color: var(--morado); background: #F6F2FE; }
.as-multi__op input { margin: 0; }
.as-multi__op input:checked { background: var(--morado); border-color: var(--morado); }
.as-multi__op:has(input:focus-visible) { outline: 2px solid var(--morado); outline-offset: -2px; }

/* «¿Cuál otra?»: input en píldora con el «+» lila adentro, a la derecha (siempre abierta) */
.as-otra { display: grid; gap: .45rem; justify-items: start; }
.as-escribe.as-mas { display: flex; width: min(100%, 420px); height: var(--alto-control); padding: 0 6px 0 1.2rem; border: 1px solid var(--campo-borde); background: #fff; }
.as-escribe.as-mas:focus-within { border-color: var(--morado); box-shadow: 0 0 0 4px rgba(var(--tinte), .16); }
.ag .as-escribe input[type=text] { flex: 1; width: auto; font: 400 1rem var(--f-texto); }
.as-escribe button { width: 34px; height: 34px; }

/* Mes y año: botón igual a un input, con su calendario lila a la izquierda y la flechita a la derecha */
.as-mes { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: .45rem; min-width: 0; }
.as-mes__boton {
  display: flex; align-items: center; gap: .7rem; width: 100%; height: var(--alto-control); padding: 0 1.1rem 0 6px;
  border-radius: 14px; border: 1px solid var(--campo-borde); background: #fff; cursor: pointer; text-align: left;
  font: 400 1rem var(--f-texto); color: var(--tinta); transition: border-color .2s, box-shadow .2s;
}
.as-mes__boton::after {
  content: ""; flex: none; margin-left: auto; width: 12px; height: 8px; transition: transform .2s var(--suave);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%235B45C4' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
}
.as-mes__boton[aria-expanded="true"]::after { transform: rotate(180deg); }
.as-mes__boton:focus-visible, .as-mes__boton[aria-expanded="true"] { outline: none; border-color: var(--frio); box-shadow: 0 0 0 4px rgba(var(--tinte), .16); }
.as-mes__icono { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--lila-3); color: var(--morado); }
.as .as-mes__icono .ico { width: 17px; height: 17px; }
.as-mes__valor { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.as-mes__boton[data-vacio] .as-mes__valor { color: var(--tinta-3); }

/* El popover: el calendario de la agenda en chiquito (año en Fraunces, ‹ ›, píldoras lilas, morado al elegir) */
.as-mes__pop {
  position: absolute; z-index: 25; top: calc(100% + 8px); right: 0; width: max(100%, 300px); max-width: calc(100vw - 32px);
  padding: 1rem 1rem .9rem; border-radius: 20px; background: #fff; border: 1px solid var(--lila-2);
  box-shadow: 0 26px 54px -22px rgba(var(--acento-rgb), .5);
}
.as-mes__pop[hidden] { display: none; }
.as-mes__cabeza { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .85rem; }
.as-mes__titulo {
  display: inline-flex; align-items: center; gap: .4rem; padding: .2rem .5rem; margin-left: -.5rem; border: 0; border-radius: 10px; background: none; cursor: pointer;
  font: 500 1.6rem/1.1 var(--f-titulo); letter-spacing: -.01em; color: var(--titulo); white-space: nowrap;
}
.as-mes__titulo--años { font-size: 1.3rem; }
.as-mes__titulo:hover { background: var(--lila-3); }
.as-mes__titulo:focus-visible { outline: 2px solid var(--morado); outline-offset: 1px; }
.as .as-mes__titulo .ico { width: 15px; height: 15px; color: var(--morado); transform: rotate(90deg); }
.as-mes__titulo--años .ico { transform: rotate(-90deg) !important; }
.as-mes__pop .ag-cal__flechas { gap: .4rem; }
.as-mes__pop .ag-cal__flechas button { width: 36px; height: 36px; }
.as .as-mes__pop .ag-cal__flechas .ico { width: 15px; height: 15px; }
.as-mes__pop .ag-cal__flechas button:focus-visible { outline: 2px solid var(--morado); outline-offset: 2px; }
.as-mes__rejilla { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.as-mes__celda {
  height: 40px; padding: 0; border: 1.5px solid transparent; border-radius: 999px; background: #F4F0FC; cursor: pointer;
  font: 700 .86rem/1 var(--f-texto); color: #3B2C8C; transition: background .2s, color .2s, box-shadow .25s;
}
.as-mes__celda:hover:not(:disabled):not([aria-pressed="true"]) { background: var(--lila-2); }
.as-mes__celda--hoy { border-color: var(--lila-2); }
.as-mes__celda[aria-pressed="true"] { background: var(--morado); border-color: var(--morado); color: #fff; box-shadow: 0 0 0 3px #E4DCFA, 0 10px 20px -10px rgba(var(--acento-rgb), .9); }
.as-mes__celda:disabled { cursor: default; background: none; color: #B9B1CF; font-weight: 500; }
.as-mes__celda:focus-visible { outline: 2px solid var(--morado); outline-offset: 2px; }
.as-mes__no {
  display: block; width: 100%; height: 40px; margin-top: .85rem; border: 0; border-top: 1px solid var(--vidrio-linea); border-radius: 0 0 12px 12px;
  background: none; cursor: pointer; font: 700 .86rem/1 var(--f-texto); color: var(--morado);
}
.as-mes__no:hover { color: var(--morado-2); text-decoration: underline; text-underline-offset: 3px; }
.as-mes__no:focus-visible { outline: 2px solid var(--morado); outline-offset: 2px; border-radius: 10px; }

/* 1 · Ánimo: cinco caritas */
.as-animo { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.as-animo .ag-opcion { justify-content: flex-start; padding: 1.2rem .55rem 1.1rem; text-align: center; }
.as .as-animo .ico { width: 34px; height: 34px; stroke-width: 1.4; }
.as-animo .ag-opcion b { font-size: .82rem; line-height: 1.3; }

/* 2 · Comida y agua: fila con ícono y segmentado a la derecha */
.as-ingesta { display: grid; gap: 10px; }
.as-ingesta__fila { display: flex; align-items: center; gap: .6rem .9rem; padding: .55rem .6rem .55rem .8rem; border-radius: 20px; background: #F8F5FE; min-width: 0; }
.as-ingesta__fila > b { flex: 1; font-size: 1rem; }

/* 3 · Heces: tarjetas acostadas con su puntito de color */
.as-heces { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.as-heces__op { flex-direction: row; align-items: center; gap: .7rem; padding: .95rem 1rem; border-radius: 18px; }
.as-heces__op b { font-size: .88rem; line-height: 1.3; }
.as-punto { flex: none; width: 16px; height: 16px; border-radius: 50%; box-shadow: 0 0 0 1.5px rgba(42, 33, 64, .12) inset; }
.as-punto--normal { background: #A47B55; }
.as-punto--blanda { background: #C49A70; }
.as-punto--color { background: conic-gradient(#3B3127 0 25%, #E2C24A 0 50%, #6E8B3D 0 75%, #E9E4D6 0); }
.as-punto--diarrea { background: #DCC29C; }
.as-punto--gusanos { background: #F4EFE3; }
.as-punto--estrenido { background: #6A4930; }
.as-punto--nose { background: #fff; box-shadow: 0 0 0 1.5px var(--lila-2) inset; }

/* Contador de días: «− 4 días +» */
.as-fila-dias { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .6rem 1rem; padding: .65rem .7rem .65rem 1.2rem; border-radius: 20px; background: #F8F5FE; border: 1px solid var(--vidrio-borde); }
.as-fila-dias__t { font-weight: 700; font-size: .92rem; }
.as-dias { display: inline-flex; align-items: center; gap: .2rem; height: var(--alto-control); padding: 4px; border-radius: 999px; background: #EFE9FB; }
.as-dias button {
  flex: none; width: calc(var(--alto-control) - 8px); height: 100%; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center;
  background: #fff; font: 600 1.15rem/1 var(--f-texto); color: var(--morado); cursor: pointer; box-shadow: 0 4px 10px -6px rgba(var(--sombra-rgb), .5);
  transition: opacity .2s, background .2s;
}
.as-dias button:hover:not(:disabled) { background: var(--lila-3); }
.as-dias button:disabled { opacity: .45; cursor: default; }
.as-dias output { min-width: 5.2rem; text-align: center; font: 700 1rem/1 var(--f-texto); color: var(--tinta); }

/* Interruptor: «¿Tienen sangre o moco?» */
.as-interruptor { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .95rem 1.2rem; border-radius: 20px; background: #F4F0FC; cursor: pointer; }
.as-interruptor b { display: block; font-size: .95rem; color: var(--tinta); }
.as-interruptor small { display: block; font-size: .78rem; color: var(--tinta-2); }
.as-interruptor input { position: absolute; opacity: 0; pointer-events: none; }
.as-interruptor__riel { flex: none; position: relative; width: 52px; height: 30px; border-radius: 99px; background: var(--lila-2); transition: background .2s; }
.as-interruptor__riel::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff;
  box-shadow: 0 2px 6px rgba(var(--sombra-rgb), .3); transition: transform .2s var(--suave);
}
.as-interruptor:has(input:checked) .as-interruptor__riel { background: var(--morado); }
.as-interruptor:has(input:checked) .as-interruptor__riel::after { transform: translateX(22px); }
.as-interruptor:has(input:focus-visible) .as-interruptor__riel { outline: 2px solid var(--morado); outline-offset: 2px; }

/* 4 · Síntomas por grupo: como antes (sin tarjeta ni ícono), con el subtítulo más grande y las píldoras más chicas (Xim, 29 oct) */
.as-sgrupo { display: grid; gap: .75rem; min-width: 0; }
.as-sgrupo__cabeza { display: flex; align-items: center; gap: .65rem; margin: 0; font: 700 .76rem/1 var(--f-texto); letter-spacing: .2em; text-transform: uppercase; color: var(--tinta); }
.as-sgrupo .ag-pildoras { gap: 6px; }
.as-sgrupo .ag-pildora { min-height: 34px; min-width: 0; padding: 0 .9rem; font-size: .78rem; }
/* «+» y lo ya escrito: del alto de la píldora (34px) */
.as-sgrupo .as-mas { height: 34px; }
.as-sgrupo .as-mas--cerrada button { width: 34px; height: 34px; }
.as-sgrupo .as-agregada { min-height: 34px; padding: 3px 3px 3px .9rem; font-size: .78rem; }
.as-sgrupo .as-agregada button { width: 26px; height: 26px; }
@media (max-width: 640px) { .as-sintomas-caja { padding-inline: .5rem; } }

/* 5 · Riesgos: tarjeta lila con su Sí / No / No sé */
.as-riesgos { display: grid; gap: 12px; }
.as-riesgo { display: grid; gap: 1rem; padding: 1.05rem 1.1rem 1.05rem 1.2rem; border-radius: 22px; background: #F4F0FC; min-width: 0; }
.as-riesgo__cabeza { display: flex; align-items: center; gap: .8rem 1rem; }
.as-riesgo .as-tile { width: 44px; height: 44px; background: #fff; }
.as-riesgo__texto { flex: 1; min-width: 0; line-height: 1.35; }
.as-riesgo__texto small { display: block; margin-bottom: .15rem; font: 700 .64rem/1.4 var(--f-texto); letter-spacing: .18em; text-transform: uppercase; color: var(--morado); }
.as-riesgo__texto b { display: block; font-size: .95rem; color: var(--tinta); }
.as-riesgo__cabeza .as-seg { flex: none; }
.as-riesgo__revela { display: grid; gap: .8rem; padding-top: 1rem; border-top: 1px solid rgba(var(--tinte), .14); }
.as-riesgo .ag-pildora:not(:has(input:checked)) { background: #fff; }

/* Contexto: tarjetas con ícono y palomita */
.as-ctx-caja { display: grid; gap: 12px; }
.as-ctx { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.as-ctx__op { gap: .9rem; min-height: 124px; padding: 1.1rem 1.1rem 1.2rem; }
.as-ctx__icono { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: #fff; color: var(--morado); transition: background .2s, color .2s; }
.as-ctx__op:has(input:checked) .as-ctx__icono { background: var(--morado); color: #fff; }
.as-ctx__check { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--morado); color: #fff; opacity: 0; transform: scale(.6); transition: opacity .2s, transform .2s var(--suave); }
.as .as-ctx__check .ico { width: 13px; height: 13px; stroke-width: 2.6; }
.as-ctx__op:has(input:checked) .as-ctx__check { opacity: 1; transform: none; }
.as-ctx__op b { font-size: .9rem; line-height: 1.3; }

/* Lo que falta: el mismo contorno rojo suave de la agenda */
.as-seg.ag-falta, .as-animo.ag-falta, .as-heces.ag-falta, .as-ctx-caja.ag-falta { outline: 2px dashed #E39C86; outline-offset: 6px; border-radius: 18px; }
.as-seg.ag-falta { border-radius: 999px; }
.as-sintomas-caja.ag-falta, .as-otra.ag-falta { outline: 2px dashed #E39C86; outline-offset: 6px; border-radius: 18px; }
/* El desplegable de vacunas y las píldoras para escribir también se marcan */
.as-multi.ag-falta .as-multi__boton, .as-mes.ag-falta .as-mes__boton { border-color: #DE8D73; background: #FFF7F4; }
.ag-falta .as-mas { border-color: #DE8D73; }
.as .ag-falta .as-mas input[type=text]:not([type=radio]):not([type=checkbox]):not([type=file]) { background: none; }
/* Con sangría, para que se lea adentro de «Síntomas» (Xim, 29 oct) */
.as-sintomas-caja { display: grid; gap: 1.15rem; padding-inline: 1.5rem; }

/* Tarjeta roja «Posible urgencia» (arriba de «Tu asesoría»; en celular, arriba del paso) */
.as-urgencia {
  position: relative; overflow: hidden; padding: 1.5rem 1.45rem 1.25rem; border-radius: var(--radio); color: #fff;
  background: linear-gradient(165deg, #BC4452 0%, #9A2A3B 100%); box-shadow: 0 30px 50px -30px rgba(140, 30, 50, .7);
}
/* La cruz grande y tenue de la esquina */
.as-urgencia::before, .as-urgencia-banda::before {
  content: ""; position: absolute; top: -22px; right: -18px; width: 130px; height: 130px; pointer-events: none;
  background: linear-gradient(rgba(255, 255, 255, .13), rgba(255, 255, 255, .13)) center / 32% 100% no-repeat,
              linear-gradient(rgba(255, 255, 255, .13), rgba(255, 255, 255, .13)) center / 100% 32% no-repeat;
}
.as-urgencia__completa { position: relative; display: grid; gap: 1rem; }
.as-urgencia__cabeza { display: flex; align-items: center; gap: .9rem; }
.as-urgencia__icono { flex: none; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; background: #fff; color: #A8323F; box-shadow: 0 0 0 6px rgba(255, 255, 255, .22); }
.as .as-urgencia__icono .ico { width: 22px; height: 22px; stroke-width: 2; }
.as-urgencia__rotulo { font: 700 .66rem/1.3 var(--f-texto); letter-spacing: .24em; text-transform: uppercase; color: rgba(255, 255, 255, .92); }
.as-urgencia__titulo { margin: 0; font: 500 clamp(1.6rem, 2.6vw, 1.95rem)/1.1 var(--f-titulo); letter-spacing: -.02em; color: #fff; outline: none; }
.as-urgencia__titulo em, .as-urgencia-banda__titulo em, .as-urgencia__tira em { font-style: italic; color: #fff; }
.as-urgencia p { margin: 0; font-size: .88rem; line-height: 1.5; color: rgba(255, 255, 255, .88); }
.as-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.as-chips li { padding: .42rem .78rem; border-radius: 999px; background: rgba(255, 255, 255, .18); font: 700 .76rem/1.25 var(--f-texto); color: #fff; }
.as-urgencia__btn { height: 52px; background: #fff; border-color: #fff; color: #9A2A3B; }
.as-urgencia__completa .as-urgencia__btn { width: 100%; }
.as-urgencia__btn:hover { background: #FFF1F2; border-color: #FFF1F2; }
.as .as-urgencia__btn .ico { width: 18px; height: 18px; color: #BC4452; }
.as-urgencia__seguir {
  justify-self: center; padding: .2rem; border: 0; background: none; cursor: pointer; text-align: center;
  font: 700 .78rem/1.45 var(--f-texto); color: #fff; text-decoration: underline; text-underline-offset: 3px;
}
.as-urgencia__seguir:focus-visible, .as-urgencia__tira:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 8px; }
/* Plegada: una tira roja con el título y cuántas señales; «Ver» la vuelve a abrir */
.as-urgencia__tira { display: none; }
.as-urgencia.plegada { padding: .65rem .75rem; border-radius: 22px; }
.as-urgencia.plegada::before, .as-urgencia.plegada .as-urgencia__completa { display: none; }
.as-urgencia.plegada .as-urgencia__tira {
  display: flex; align-items: center; gap: .75rem; width: 100%; padding: 0; border: 0; background: none; color: #fff; text-align: left; cursor: pointer; font: inherit;
}
.as-urgencia__tira .as-urgencia__icono { width: 36px; height: 36px; box-shadow: none; }
.as .as-urgencia__tira .as-urgencia__icono .ico { width: 17px; height: 17px; }
.as-urgencia__tira-texto { flex: 1; min-width: 0; line-height: 1.3; }
.as-urgencia__tira-texto small { display: block; font: 700 .6rem/1.4 var(--f-texto); letter-spacing: .18em; text-transform: uppercase; color: rgba(255, 255, 255, .85); }
.as-urgencia__tira-texto b { display: block; font: 500 1.02rem/1.2 var(--f-titulo); }
.as-urgencia__tira-ver { flex: none; padding: .45rem .85rem; border-radius: 999px; background: rgba(255, 255, 255, .2); font: 700 .78rem/1 var(--f-texto); }
/* Abierta es alta: SIGUE pegajosa (Xim, 28 oct: el resumen debe bajar con el cuestionario)
   pero cabe en la pantalla con scroll propio; el relleno deja ver las sombras de las tarjetas */
.ag-resumen__pegajoso:has(> .as-urgencia:not([hidden]):not(.plegada)) {
  max-height: calc(100dvh - 112px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
  margin: -14px -14px 0; padding: 14px 14px 30px;
}
.ag-paso:has(> .as-urgencia) { grid-template-rows: auto minmax(0, 1fr); }

/* Gracias: banda roja a todo lo ancho */
.as-urgencia-banda {
  position: relative; overflow: hidden; display: flex; align-items: center; gap: 1.1rem 1.6rem; margin: 0 0 16px; padding: 1.6rem 1.8rem;
  border-radius: var(--radio); color: #fff; background: linear-gradient(120deg, #BC4452 0%, #962A3B 100%); box-shadow: 0 30px 50px -30px rgba(140, 30, 50, .7);
}
.as-urgencia-banda::before { top: -6px; right: -6px; width: 170px; height: 170px; }
.as-urgencia-banda__texto { position: relative; flex: 1; min-width: 0; display: grid; gap: .55rem; justify-items: start; }
.as-urgencia-banda__titulo { margin: 0; font: 500 clamp(1.35rem, 2.4vw, 1.75rem)/1.2 var(--f-titulo); letter-spacing: -.015em; color: #fff; }
.as-urgencia-banda .as-urgencia__btn { position: relative; flex: none; padding: 0 1.6rem; }

/* Gracias: «Qué sigue» */
.as-sigue { padding: 1.45rem 1.4rem 1.4rem; min-width: 0; }
.as-sigue > .rotulo { font-size: .64rem; margin-bottom: .8rem; }
.as-sigue ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.as-sigue li { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.1rem; border-radius: 18px; background: #F4F0FC; }
.as-sigue .as-tile { width: 44px; height: 44px; background: #fff; }
.as-sigue b { display: block; font-size: .98rem; color: var(--tinta); }
.as-sigue small { display: block; font-size: .84rem; line-height: 1.45; color: var(--tinta-2); }

/* ---------- Tableta y celular ---------- */
@media (max-width: 760px) {
  /* Caritas acostadas: una por renglón, cara a la izquierda */
  .as-animo { grid-template-columns: 1fr; gap: 8px; }
  .as-animo .ag-opcion { flex-direction: row; justify-content: flex-start; gap: .8rem; padding: .8rem 1rem; text-align: left; }
  .as .as-animo .ico { width: 28px; height: 28px; }
  .as-animo .ag-opcion b { font-size: .9rem; }
}
@media (max-width: 640px) {
  .as-num { gap: .65rem; }
  .as-num__sub { margin-left: calc(28px + .65rem); }
  .as-heces, .as-ctx { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .as-heces__op { padding: .85rem .8rem; }
  .as-ctx__op { min-height: 0; padding: 1rem .9rem 1.05rem; }
  /* Los segmentados se estiran a todo lo ancho y, si no caben, bajan de renglón */
  .as-seg { display: flex; width: 100%; border-radius: 22px; }
  .as-seg label { flex: 1 1 auto; padding: 0 .45rem; font-size: .8rem; }
  .as-ingesta__fila { flex-wrap: wrap; padding: .7rem; }
  .as-riesgo { padding: 1rem; }
  .as-riesgo__cabeza { flex-wrap: wrap; }
  .as-riesgo__cabeza .as-tile { align-self: flex-start; }
  .as-riesgo__texto { flex-basis: calc(100% - 44px - 1rem); }
  .as-fila-dias { padding: .7rem .7rem .7rem 1rem; }
  .as-urgencia { padding: 1.3rem 1.15rem 1.1rem; }
  .as-urgencia-banda { flex-wrap: wrap; padding: 1.3rem 1.15rem; }
  .as-urgencia-banda .as-urgencia__btn { width: 100%; }
  .as-urgencia-banda__texto { flex-basis: 100%; }   /* el círculo arriba, el texto a todo lo ancho */
  .as-sigue li { padding: .9rem; }
  /* Vacunas: un control abajo del otro; el mes y año a todo lo ancho, con su popover del mismo ancho */
  .as-fila-dos, .as-fila-dos:has(> .as-mes:only-child) { grid-template-columns: minmax(0, 1fr); }
  .as-mes__pop { left: 0; right: 0; width: auto; max-width: none; }
}
/* Popup de condiciones: «Lee los términos completos» (vive fuera de main.as) */
.as-cond-terminos { margin: 1rem 0 0; font: 700 .9rem/1.4 var(--f-texto); }
.as-cond-terminos a { color: var(--morado); text-underline-offset: 3px; }
/* ===== /ASESORÍA ===== */
/* ===== /AGENDA ===== */

/* Datos bancarios con «Copiar»: agenda (paso 5) y pago.html */
.banco { margin: .6rem 0 0; display: grid; gap: .6rem; }
.banco div { display: flex; align-items: center; gap: .8rem; padding: .7rem .6rem .7rem 1rem; border-radius: 14px; background: rgba(255,255,255,.66); border: 1px solid var(--vidrio-borde); }
.banco dt { flex: none; width: 5.2rem; font-size: .68rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--orquidea); }
.banco dd { flex: 1; margin: 0; font-weight: 500; color: var(--ciruela); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.banco dd.falta { color: var(--tinta-3); font-weight: 400; font-style: italic; }
.copiar { flex: none; height: 32px; padding: 0 .8rem; border-radius: 99px; border: 1px solid rgba(var(--tinte), .25); background: #fff; color: var(--orquidea); font: 600 .78rem/1 var(--f-texto); cursor: pointer; transition: background .2s, color .2s; }
.copiar:hover { background: var(--orquidea); color: #fff; }
.copiar:disabled { opacity: .4; cursor: default; background: #fff; color: var(--orquidea); }