/* ============================================================
   Punto Umbral — hoja de estilo del sitio
   Beige #E7CCA3 es el fondo del logotipo: es el color de marca,
   no un acento. El enso se pinta con mask-image, así toma el
   color del tema y nunca arrastra fondo propio.
   ============================================================ */

/* ---------- Tokens: tema claro (base) ---------- */
:root {
  --papel:      #FFFDF9;
  --arena:      #F7EFE2;
  --arena-2:    #EFE4D2;
  --beige:      #E7CCA3;
  --beige-osc:  #D8B888;
  --beige-hond: #C9A470;
  --linea:      #E4D5BC;
  --linea-sutil:#EFE6D6;
  --linea-beige:#CFAE7C;
  /* Solo para texto: --beige-hond como letra da 2.04:1 sobre papel y
     el minimo para texto grande es 3:1. Medido el 8-sep-2026. */
  --cifra:      #A97C3B;
  --tinta:      #131009;
  --tinta-2:    #3A332A;
  --gris:       #6B6153;
  --gris-beige: #63512F;
  --sello:      #93372B;
  --sombra:     0 1px 2px rgba(19,16,9,.05), 0 10px 34px rgba(19,16,9,.07);

  --display: "Jost", "Century Gothic", Futura, "Trebuchet MS", sans-serif;
  --texto:   "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --ancho:   1180px;
  --gutter:  clamp(20px, 5vw, 64px);
  --radio:   3px;

  color-scheme: light;
}

/* ---------- Un solo tema, a propósito ----------
   El sitio NO tiene tema oscuro. La identidad de Punto Umbral es el beige del
   logotipo sobre papel claro; invertida deja de reconocerse, y el diseño
   aprobado en Claude Design es claro. `color-scheme: light` evita además que
   el navegador pinte de oscuro los campos del formulario y las barras. */

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--sello);
  outline-offset: 3px;
  border-radius: 2px;
}

.contenedor { width: 100%; max-width: var(--ancho); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- Tipografía ---------- */
h1, h2, h3, h4 { font-family: var(--display); font-weight: 400; text-wrap: balance; margin: 0; letter-spacing: -.015em; line-height: 1.12; }

.titular-xl { font-size: clamp(2.5rem, 6vw, 4.3rem); font-weight: 300; line-height: 1.05; letter-spacing: -.03em; }
.titular-l  { font-size: clamp(1.85rem, 3.4vw, 2.75rem); font-weight: 300; letter-spacing: -.025em; }
.titular-m  { font-size: clamp(1.2rem, 2vw, 1.45rem); font-weight: 400; }

p { margin: 0; }
.prosa { max-width: 62ch; color: var(--tinta-2); }
.prosa-ancha { max-width: 74ch; color: var(--tinta-2); }
.prosa-larga { max-width: 68ch; color: var(--tinta-2); display: grid; gap: 18px; }
.prosa-larga h3 { margin-top: 14px; color: var(--tinta); }

.rotulo {
  font-family: var(--texto);
  font-size: .69rem; font-weight: 600;
  letter-spacing: .19em; text-transform: uppercase;
  color: var(--gris); margin: 0;
}

/* ---------- Secciones ---------- */
.seccion { padding-block: clamp(52px, 7.5vw, 100px); border-top: 1px solid var(--linea-sutil); }
.seccion--arena { background: var(--arena); border-top-color: var(--linea); }
.seccion--primera { border-top: 0; }

.ficha { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: clamp(22px, 4vw, 56px); align-items: start; }
@media (max-width: 880px) { .ficha { grid-template-columns: 1fr; gap: 16px; } }
.ficha__cuerpo { display: grid; gap: 28px; }

/* ---------- Botones ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 26px;
  font-family: var(--texto); font-size: .95rem; font-weight: 500;
  text-decoration: none; border: 1px solid transparent; border-radius: var(--radio);
  cursor: pointer; text-align: center;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.boton--solido { background: var(--tinta); color: var(--papel); }
.boton--solido:hover { background: var(--sello); transform: translateY(-1px); }
.boton--linea { border-color: var(--linea-beige); color: var(--tinta); background: transparent; }
.boton--linea:hover { border-color: var(--tinta); background: color-mix(in srgb, var(--tinta) 6%, transparent); }
.boton svg { flex: none; }

.enlace-sub {
  font-size: .93rem; color: var(--tinta); text-decoration: none;
  border-bottom: 1px solid var(--beige-hond); padding-bottom: 2px; justify-self: start;
  transition: border-color .15s ease, color .15s ease;
}
.enlace-sub:hover { color: var(--sello); border-color: var(--sello); }

/* ---------- Cabecera: la franja beige es la firma de marca ---------- */
.cabecera {
  position: sticky; top: 0; z-index: 50;
  background: var(--beige);
  border-bottom: 1px solid var(--linea-beige);
}
.cabecera__fila { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 66px; }

.marca { display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--tinta); }
/* El enso va en ::before y el punto en ::after. Si el punto fuera hijo del
   elemento enmascarado, la propia máscara lo recortaría: el centro del enso es
   transparente. Por eso el contenedor no lleva mask. */
.marca__enso { width: 30px; height: 30px; flex: none; position: relative; }
.marca__enso::before {
  content: ""; position: absolute; inset: 0;
  background: var(--tinta);
  -webkit-mask: url("enso.2be40f73.png") center/contain no-repeat;
          mask: url("enso.2be40f73.png") center/contain no-repeat;
}
.marca__enso::after {
  content: ""; position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  width: 5px; height: 5px; border-radius: 50%; background: var(--papel);
}
.marca__texto { display: block; }
.marca__nombre { font-family: var(--display); font-size: 1.1rem; font-weight: 400; letter-spacing: .03em; line-height: 1.1; display: block; }
.marca__giro { font-family: var(--texto); font-size: .58rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gris-beige); display: block; margin-top: 1px; }

.nav { display: flex; align-items: center; gap: 26px; }
.nav a { font-size: .91rem; text-decoration: none; color: var(--tinta-2); transition: color .15s ease; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--sello); }
.nav a[aria-current="page"] { font-weight: 500; }

.cabecera .boton { padding: 10px 18px; font-size: .87rem; }

/* ---------- Menú de móvil ----------
   Regla que no se vuelve a romper: el menú SOLO se esconde cuando el JS ya
   está corriendo y puede volver a abrirlo. `sitio.js` marca <html> con
   data-menu="listo"; si el JS no carga, el panel se queda desplegado como
   lista y la navegación nunca desaparece. Antes el nav era display:none a
   secas por debajo de 1000px y el sitio se quedaba sin menú en el celular. */
.menu-boton {
  display: none; flex: none;
  width: 44px; height: 44px; padding: 0; margin-right: -8px;
  background: transparent; border: 0; cursor: pointer;
  align-items: center; justify-content: center;
}
.menu-boton__rayas, .menu-boton__rayas::before, .menu-boton__rayas::after {
  display: block; width: 22px; height: 2px; border-radius: 2px;
  background: var(--tinta);
  transition: transform .28s cubic-bezier(.22,.61,.36,1), opacity .18s ease;
}
.menu-boton__rayas { position: relative; }
.menu-boton__rayas::before, .menu-boton__rayas::after {
  content: ""; position: absolute; left: 0;
}
.menu-boton__rayas::before { top: -7px; }
.menu-boton__rayas::after  { top:  7px; }
/* Abierto, las tres rayas se vuelven una X. */
.menu-boton[aria-expanded="true"] .menu-boton__rayas { background: transparent; }
.menu-boton[aria-expanded="true"] .menu-boton__rayas::before { transform: translateY(7px) rotate(45deg); }
.menu-boton[aria-expanded="true"] .menu-boton__rayas::after  { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1000px) {
  .menu-boton { display: inline-flex; }
  .cabecera__fila { flex-wrap: wrap; }
  .cabecera__cita { display: none; }

  .nav {
    order: 3; width: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    margin-inline: calc(-1 * var(--gutter));
    padding: 4px var(--gutter) 18px;
    border-top: 1px solid var(--linea-beige);
  }
  .nav a {
    font-size: 1.05rem; padding: 14px 0;
    border-bottom: 1px solid color-mix(in srgb, var(--linea-beige) 55%, transparent);
  }
  .nav a:last-child { border-bottom: 0; }

  /* A partir de aquí manda el JS. */
  [data-menu="listo"] .nav { display: none; }
  [data-menu="listo"] .nav[data-abierto] {
    display: flex;
    animation: baja-menu .26s cubic-bezier(.22,.61,.36,1) both;
  }
}
@keyframes baja-menu {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Portada ---------- */
.portada { background: var(--beige); border-bottom: 1px solid var(--linea-beige); overflow: hidden; position: relative; }

/* Dos orbes que respiran detrás del contenido. Van en pseudoelementos porque
   la CSP prohibe estilos en linea: no puede haber divs decorativos con style. */
.portada::before, .portada::after {
  content: ""; position: absolute; border-radius: 50%; pointer-events: none;
}
.portada::before {
  width: 760px; height: 760px; left: -240px; top: -280px;
  background: radial-gradient(circle at 40% 40%,
    color-mix(in srgb, var(--papel) 85%, transparent),
    color-mix(in srgb, var(--papel) 0%, transparent) 62%);
  animation: respira 13s ease-in-out infinite;
}
.portada::after {
  width: 520px; height: 520px; right: 80px; bottom: -220px;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--sello) 16%, transparent),
    color-mix(in srgb, var(--sello) 0%, transparent) 65%);
  animation: respira 17s ease-in-out infinite reverse;
}
@keyframes respira {
  0%, 100% { transform: scale(1);    opacity: .5; }
  50%      { transform: scale(1.07); opacity: .8; }
}
.portada__rejilla {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(28px, 5vw, 64px); align-items: center;
  padding-block: clamp(48px, 7vw, 92px);
}
@media (max-width: 900px) { .portada__rejilla { grid-template-columns: 1fr; padding-block: 42px 52px; } }

.portada__contenido { display: grid; gap: 24px; }
.portada__antetitulo { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; color: var(--gris-beige); }
.portada__antetitulo::before { content: ""; width: 34px; height: 1px; background: var(--beige-hond); flex: none; }
.portada__sub { font-size: 1.12rem; max-width: 54ch; color: var(--tinta-2); }
.portada__acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 2px; }
.portada__pie { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: .88rem; color: var(--gris-beige); margin-top: 4px; }
.portada__pie span { display: flex; align-items: center; gap: 8px; }
.portada__pie span + span::before { content: ""; width: 3px; height: 3px; border-radius: 50%; background: var(--beige-hond); }

/* El enso, pintado por máscara: se ve, y el punto del centro es el "punto" del nombre */
.portada__marca { position: relative; justify-self: center; width: min(420px, 78vw); aspect-ratio: 1; }

/* Dos anillos concéntricos girando a velocidades distintas y en sentidos
   opuestos. Casi imperceptible de un vistazo; al quedarse mirando, respira. */
.portada__marca::before, .portada__marca::after {
  content: ""; position: absolute; border-radius: 50%; pointer-events: none;
}
.portada__marca::before {
  inset: 6%; border: 1px solid color-mix(in srgb, var(--tinta) 14%, transparent);
  animation: girar 90s linear infinite;
}
.portada__marca::after {
  inset: -4%; border: 1px dashed color-mix(in srgb, var(--tinta) 16%, transparent);
  animation: girar 140s linear infinite reverse;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* El enso ya no "entra y se queda quieto": se PINTA. Dos máscaras
   superpuestas y multiplicadas — el PNG del trazo y un barrido cónico que
   avanza de 0 a 360 grados — hacen que el círculo aparezca como si lo
   estuviera dibujando el pincel. Después rueda para siempre, tan despacio
   (casi 4 minutos por vuelta) que no distrae de la lectura. */
@property --barrido {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
.portada__enso {
  /* Vale 360deg de partida, no 0: si el navegador no sabe interpolar la
     variable de ángulo, el enso sale entero desde el principio y solo se
     pierde el dibujado. Empezando en 0 se quedaría invisible. */
  --barrido: 360deg;
  position: absolute; inset: 0;
  background: var(--tinta);
  -webkit-mask-image: url("enso.2be40f73.png"),
                      conic-gradient(from -100deg, #000 var(--barrido), transparent 0);
          mask-image: url("enso.2be40f73.png"),
                      conic-gradient(from -100deg, #000 var(--barrido), transparent 0);
  -webkit-mask-size: contain, 140% 140%;
          mask-size: contain, 140% 140%;
  -webkit-mask-position: center, center;
          mask-position: center, center;
  -webkit-mask-repeat: no-repeat, no-repeat;
          mask-repeat: no-repeat, no-repeat;
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
  animation: pincelada 1.7s cubic-bezier(.32,.86,.4,1) both,
             rueda 230s linear 1.7s infinite;
}
@keyframes pincelada { from { --barrido: 0deg; } to { --barrido: 360deg; } }
@keyframes rueda { to { rotate: 360deg; } }

/* Tercer anillo, desfasado y a otra velocidad: con dos el giro se lee como
   una sola pieza; con tres el conjunto nunca repite la misma posición. */
.portada__marca { --anillo: color-mix(in srgb, var(--tinta) 12%, transparent); }
.portada__aro {
  position: absolute; inset: -13%; border-radius: 50%;
  border: 1px solid var(--anillo);
  border-left-color: transparent; border-right-color: transparent;
  animation: girar 62s linear infinite;
  pointer-events: none;
}
/* La foto de sesión va DENTRO del anillo del enso, igual que en el prototipo:
   el trazo la enmarca. Se funde con una máscara radial a transparente — no a
   un color — para que el borde no recorte contra el beige.
   Ancho y alto explícitos, no `inset`: en un elemento reemplazado con
   width/height auto, `inset` no manda y la imagen toma su tamaño natural. */
.portada__foto {
  position: absolute; left: 16%; top: 16%;
  width: 68%; height: 68%; max-width: none;
  border-radius: 50%; object-fit: cover;
  -webkit-mask: radial-gradient(circle, #000 54%, transparent 76%);
          mask: radial-gradient(circle, #000 54%, transparent 76%);
  animation: trazo 1.1s cubic-bezier(.22,.61,.36,1) both;
}
.portada__punto {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  width: 13px; height: 13px; border-radius: 50%; background: var(--papel);
  box-shadow: 0 0 0 7px color-mix(in srgb, var(--papel) 45%, transparent);
}
/* El pulso sale del punto central: es el latido del "Punto" del nombre. */
.portada__punto::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--papel) 90%, transparent);
  animation: pulso 4.5s ease-out infinite;
}
@keyframes pulso {
  0%   { transform: scale(.4);  opacity: .9; }
  100% { transform: scale(3.4); opacity: 0; }
}
@keyframes trazo { from { opacity: .25; transform: rotate(-9deg) scale(.97); } to { opacity: 1; transform: none; } }
@media (max-width: 900px) { .portada__marca { width: min(280px, 62vw); order: -1; } }

/* ---------- Encabezado de páginas interiores ---------- */
.encabezado { background: var(--beige); border-bottom: 1px solid var(--linea-beige); padding-block: clamp(38px, 5.5vw, 68px); position: relative; overflow: hidden; }
.encabezado__enso {
  position: absolute; right: -6%; top: 50%; translate: 0 -50%;
  width: min(360px, 46vw); aspect-ratio: 1; opacity: .16;
  background: var(--tinta);
  -webkit-mask: url("enso.2be40f73.png") center/contain no-repeat;
          mask: url("enso.2be40f73.png") center/contain no-repeat;
  pointer-events: none;
}
/* El max-width va en los HIJOS, no en el contenedor. Puesto en el contenedor
   competía con el `margin-inline: auto` de .contenedor y centraba todo el
   encabezado: quedaba descuadrado respecto a las secciones de abajo, con un
   hueco muerto a la izquierda. Detectado el 8-sep-2026 comparando capturas. */
.encabezado__contenido { position: relative; display: grid; gap: 16px; }
.encabezado__contenido > * { max-width: 62ch; }
.encabezado .rotulo { color: var(--gris-beige); }
.encabezado p { color: var(--tinta-2); }

.miga { font-size: .82rem; color: var(--gris-beige); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.miga a { text-decoration: none; }
.miga a:hover { color: var(--sello); }
.miga span::before { content: "/"; margin-right: 8px; color: var(--beige-hond); }

/* ---------- Franja de confianza ---------- */
.confianza { background: var(--arena); border-bottom: 1px solid var(--linea); }
.confianza__rejilla { display: grid; grid-template-columns: repeat(4, 1fr); }
.confianza__dato { padding: 24px 24px 24px 0; display: grid; gap: 4px; align-content: start; }
.confianza__dato + .confianza__dato { padding-left: 24px; border-left: 1px solid var(--linea); }
.confianza__valor { font-family: var(--display); font-size: 1.06rem; letter-spacing: -.01em; }
.confianza__nota { font-size: .86rem; color: var(--gris); line-height: 1.45; }
@media (max-width: 860px) {
  .confianza__rejilla { grid-template-columns: repeat(2, 1fr); }
  .confianza__dato { padding: 20px; }
  .confianza__dato:nth-child(odd) { padding-left: 0; }
  .confianza__dato:nth-child(even) { padding-left: 20px; border-left: 1px solid var(--linea); }
  .confianza__dato:nth-child(n+3) { border-top: 1px solid var(--linea); }
}

/* ---------- Modalidades ---------- */
/* Dos tarjetas separadas, no una rejilla partida por una línea: cada modalidad
   es una decisión distinta y debe leerse como un objeto propio. */
.modalidades { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 820px) { .modalidades { grid-template-columns: 1fr; } }
.modalidad {
  --lado: clamp(26px, 3.2vw, 34px);
  background: var(--papel); border: 1px solid var(--linea); border-radius: 6px;
  overflow: hidden;
  display: grid; gap: 15px; align-content: start;
  padding: 0 var(--lado) clamp(28px, 3.2vw, 36px);
  transition: transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease;
}
/* La foto sangra a los tres bordes. El ancho va explícito porque una <img>
   es un elemento reemplazado: en grid NO se estira sola, se queda con su
   tamaño intrínseco por mucho que el área sea más ancha. */
.modalidad__foto {
  width: calc(100% + 2 * var(--lado)); max-width: none;
  height: 260px; object-fit: cover;
  margin-inline: calc(-1 * var(--lado));
  margin-bottom: clamp(10px, 1.4vw, 16px);
}
@media (max-width: 560px) { .modalidad__foto { height: 210px; } }
.modalidad:hover { transform: translateY(-5px); box-shadow: 0 22px 50px rgba(19,16,9,.13); }
.modalidad--destacada { background: var(--arena); }
.seccion--arena .modalidad { background: var(--papel); }
.seccion--arena .modalidad--destacada { background: var(--arena-2); }
.modalidad__precio { font-family: var(--display); font-size: 1.55rem; font-weight: 300; letter-spacing: -.02em; }
.modalidad__precio small { font-family: var(--texto); font-size: .81rem; color: var(--gris); letter-spacing: 0; margin-left: 8px; }

/* ---------- Padecimientos ---------- */
.grupos { display: grid; gap: 32px; }
.grupo { display: grid; gap: 13px; }
.grupo__lista { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.grupo__lista li {
  font-size: .92rem; padding: 7px 15px; border: 1px solid var(--linea);
  border-radius: 100px; color: var(--tinta-2); background: var(--papel);
  transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
}
.grupo__lista li:hover { border-color: var(--beige-hond); background: var(--arena); transform: translateY(-2px); }

/* Fichas de padecimiento (página Qué tratamos) */
.padecimientos { display: grid; grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); gap: 1px; background: var(--linea); border: 1px solid var(--linea); }
.padecimiento { background: var(--papel); padding: 26px 24px 30px; display: grid; gap: 10px; align-content: start; }
.padecimiento h3 { font-size: 1.14rem; }
.padecimiento p { font-size: .93rem; color: var(--tinta-2); line-height: 1.6; }
.padecimiento .rotulo { font-size: .63rem; }

/* ---------- Pasos ---------- */
/* Sin cajas: cada paso cuelga de una línea con un punto marcando su inicio.
   El rótulo va grande en Jost ligero — funciona igual con "01" que con
   "Primero" o "Ropa", así que no obliga a numerar lo que no es secuencia. */
.pasos { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(24px, 3vw, 40px); }
@media (max-width: 1000px) { .pasos { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .pasos { grid-template-columns: 1fr; } }
.paso {
  position: relative; padding-top: 34px;
  border-top: 1px solid var(--linea);
  display: grid; gap: 10px; align-content: start;
}
/* El punto de arranque, con su halo latiendo. Un solo pseudoelemento: el halo
   es un box-shadow animado, no un segundo círculo. */
.paso::before {
  content: ""; position: absolute; top: -5px; left: 0;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--sello);
  animation: latido 4.5s ease-out infinite;
}
@keyframes latido {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--sello) 55%, transparent); }
  100% { box-shadow: 0 0 0 14px color-mix(in srgb, var(--sello) 0%, transparent); }
}
/* Va calificado con .paso: `.paso p` de abajo es clase + tipo y le gana a una
   clase sola, así que sin esto el rótulo se queda con el tamaño del párrafo. */
.paso .paso__n {
  font-family: var(--display); font-weight: 200;
  font-size: clamp(1.35rem, 2.1vw, 1.8rem); line-height: 1.05;
  letter-spacing: -.03em; color: var(--gris-beige);
  text-transform: none; text-wrap: balance;
}
/* El color claro es SOLO para las cifras. Un rotulo como "Ropa" o "Formacion"
   se lee a 21,6 px, y a ese tamano el minimo es 4,5:1, no 3:1 — con --cifra
   se quedaba en 3,27:1. Las cifras van a 41-58 px, donde 3:1 basta. */
.pasos--cifras .paso__n { color: var(--cifra); }
/* Solo donde el rótulo es una cifra y la lista es de verdad una secuencia.
   "Ropa" o "Comida" a este tamaño serían un titular, no un número. */
.pasos--cifras .paso__n {
  font-size: clamp(2.6rem, 5vw, 3.6rem); line-height: 1;
  letter-spacing: -.04em; font-variant-numeric: tabular-nums;
}
.paso__t { font-family: var(--display); font-size: 1.18rem; line-height: 1.25; }
.paso p { font-size: .93rem; color: var(--tinta-2); line-height: 1.62; text-wrap: pretty; }

/* ---------- Precios ---------- */
.envoltura-tabla { overflow-x: auto; }
.tabla-precios { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; min-width: 460px; }
.tabla-precios caption { text-align: left; font-size: .86rem; color: var(--gris); padding-bottom: 14px; }
.tabla-precios th, .tabla-precios td { text-align: left; padding: 15px 18px; border-bottom: 1px solid var(--linea); }
.tabla-precios thead th { font-family: var(--texto); font-size: .68rem; font-weight: 600; letter-spacing: .17em; text-transform: uppercase; color: var(--gris); padding-block: 10px; }
.tabla-precios td:not(:first-child), .tabla-precios th:not(:first-child) { text-align: right; }
.tabla-precios tbody th { font-weight: 500; font-family: var(--texto); font-size: .96rem; letter-spacing: 0; text-transform: none; }
.tabla-precios tbody th small { display: block; font-weight: 400; font-size: .81rem; color: var(--gris); }
.tabla-precios .cifra { font-family: var(--display); font-size: 1.14rem; }
.tabla-precios tbody tr:hover { background: var(--arena); }
.seccion--arena .tabla-precios tbody tr:hover { background: var(--arena-2); }

/* ---------- Colonias ---------- */
.colonias { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.colonias li {
  font-size: .9rem; padding: 6px 14px; background: var(--papel);
  border: 1px solid var(--linea); border-radius: 100px; color: var(--tinta-2);
  transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
}
.colonias li:hover { border-color: var(--beige-hond); background: var(--arena); transform: translateY(-2px); }

/* ---------- Valoraciones ---------- */
.filtros { display: flex; flex-wrap: wrap; gap: 8px; }
.filtro {
  font-family: var(--texto); font-size: .88rem;
  padding: 8px 16px; border-radius: 100px; cursor: pointer;
  border: 1px solid var(--linea); background: var(--papel); color: var(--tinta-2);
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.filtro:hover { border-color: var(--beige-hond); }
.filtro[aria-pressed="true"] { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }
.filtro__n { opacity: .55; margin-left: 6px; font-variant-numeric: tabular-nums; }

.valoraciones { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: start; }
@media (max-width: 1000px) { .valoraciones { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) { .valoraciones { grid-template-columns: 1fr; } }

.valoracion {
  background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio);
  padding: 26px 24px; display: grid; gap: 16px; align-content: start;
  transition: transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease;
}
.valoracion:hover { transform: translateY(-5px); box-shadow: 0 22px 50px rgba(19,16,9,.13); }
.seccion--arena .valoracion { background: var(--papel); }
.valoracion__texto { font-size: .97rem; line-height: 1.62; color: var(--tinta); }
.valoracion__pie { display: grid; gap: 9px; padding-top: 15px; border-top: 1px solid var(--linea-sutil); }
.valoracion__quien { font-family: var(--display); font-size: 1rem; }
.valoracion__meta { font-size: .81rem; color: var(--gris); }

.sesiones { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sesiones__punto { width: 7px; height: 7px; border-radius: 50%; background: var(--linea); flex: none; }
.sesiones__punto--hito { background: var(--sello); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sello) 18%, transparent); }
.sesiones__leyenda { font-size: .75rem; color: var(--gris); margin-left: 5px; }

.vacio { padding: 40px 0; color: var(--gris); font-size: .95rem; }

/* ---------- Formulario ---------- */
.formulario { display: grid; gap: 20px; max-width: 640px; }
.campo { display: grid; gap: 7px; }
.campo > label { font-size: .88rem; font-weight: 500; color: var(--tinta); }
.campo__ayuda { font-size: .81rem; color: var(--gris); }
.campo__fila { display: grid; grid-template-columns: 1fr 110px; gap: 14px; }
@media (max-width: 560px) { .campo__fila { grid-template-columns: 1fr; } }

input[type="text"], input[type="email"], select, textarea {
  font-family: var(--texto); font-size: .97rem; color: var(--tinta);
  background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio);
  padding: 12px 14px; width: 100%;
  transition: border-color .15s ease, box-shadow .15s ease;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--beige-hond);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--beige-hond) 22%, transparent);
  outline: none;
}
textarea { resize: vertical; min-height: 130px; line-height: 1.6; }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--gris) 50%), linear-gradient(135deg, var(--gris) 50%, transparent 50%); background-position: calc(100% - 19px) 51%, calc(100% - 14px) 51%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 38px; }

.opciones { display: flex; flex-wrap: wrap; gap: 8px; }
.opcion { position: relative; }
.opcion input { position: absolute; opacity: 0; width: 100%; height: 100%; cursor: pointer; margin: 0; }
.opcion span { display: block; padding: 9px 17px; border: 1px solid var(--linea); border-radius: 100px; font-size: .9rem; color: var(--tinta-2); cursor: pointer; transition: all .15s ease; }
.opcion input:checked + span { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }
.opcion input:focus-visible + span { outline: 2px solid var(--sello); outline-offset: 2px; }

.consentimiento { display: flex; gap: 11px; align-items: start; font-size: .88rem; color: var(--tinta-2); line-height: 1.55; }
.consentimiento input { margin-top: 4px; accent-color: var(--sello); flex: none; width: 16px; height: 16px; }

.contador { font-size: .78rem; color: var(--gris); text-align: right; font-variant-numeric: tabular-nums; }
.contador--alto { color: var(--sello); }

.aviso-form { padding: 15px 18px; border-radius: var(--radio); font-size: .9rem; border: 1px solid var(--linea); background: var(--arena); }
.aviso-form--ok { border-color: color-mix(in srgb, var(--sello) 35%, var(--linea)); }
.aviso-form--error { border-color: var(--sello); color: var(--sello); }

/* ---------- Mapa ---------- */
.mapa { border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; background: var(--arena); }
.mapa iframe { display: block; width: 100%; height: 340px; border: 0; filter: saturate(.75); }

/* ---------- Datos de contacto ---------- */
.datos { display: grid; gap: 1px; background: var(--linea); border: 1px solid var(--linea); }
.dato { background: var(--papel); padding: 18px 22px; display: grid; grid-template-columns: 150px 1fr; gap: 16px; align-items: baseline; }
@media (max-width: 620px) { .dato { grid-template-columns: 1fr; gap: 4px; } }
.dato a { text-decoration: none; border-bottom: 1px solid var(--beige-hond); }
.dato a:hover { color: var(--sello); border-color: var(--sello); }

/* ---------- Preguntas ---------- */
.preguntas { display: grid; }
.pregunta { border-bottom: 1px solid var(--linea); }
.pregunta summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 19px 0; cursor: pointer; list-style: none;
  font-family: var(--display); font-size: 1.08rem;
}
.pregunta summary::-webkit-details-marker { display: none; }
.pregunta summary::after { content: "+"; font-family: var(--display); font-size: 1.3rem; color: var(--gris); flex: none; transition: transform .2s ease; }
.pregunta[open] summary::after { transform: rotate(45deg); }
.pregunta__r { padding-bottom: 21px; font-size: .96rem; color: var(--tinta-2); max-width: 68ch; }

/* ---------- Cierre ---------- */
.cierre { background: var(--tinta); color: var(--papel); border-top: 0; position: relative; overflow: hidden; }
/* El enso girando muy despacio en la esquina: firma de marca sobre el negro. */
.cierre::before {
  content: ""; position: absolute; left: -90px; bottom: -180px;
  width: 440px; height: 440px; opacity: .14; pointer-events: none;
  /* --papel, no --beige: el cierre se invierte en tema oscuro (fondo --tinta),
     y --papel es el único token que contrasta con --tinta en los dos temas. */
  background: var(--papel);
  -webkit-mask: url("enso.2be40f73.png") center/contain no-repeat;
          mask: url("enso.2be40f73.png") center/contain no-repeat;
  animation: girar 160s linear infinite reverse;
}
.cierre > * { position: relative; }
.cierre .rotulo { color: var(--beige-hond); }
.cierre h2 { color: var(--papel); }
.cierre .prosa { color: color-mix(in srgb, var(--papel) 76%, var(--tinta)); }
.cierre .boton--solido { background: var(--beige-hond); color: #131009; }
.cierre .boton--solido:hover { background: var(--papel); }
.cierre .boton--linea { border-color: color-mix(in srgb, var(--papel) 32%, transparent); color: var(--papel); }
.cierre .boton--linea:hover { border-color: var(--papel); background: color-mix(in srgb, var(--papel) 10%, transparent); }

/* ---------- Pie ---------- */
.pie { background: var(--arena); border-top: 1px solid var(--linea); padding-block: 50px 30px; font-size: .91rem; }
.pie__rejilla { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 36px; }
@media (max-width: 940px) { .pie__rejilla { grid-template-columns: 1fr 1fr; gap: 30px; } }
@media (max-width: 560px) { .pie__rejilla { grid-template-columns: 1fr; } }
.pie__col { display: grid; gap: 9px; align-content: start; }
.pie__col a { color: var(--tinta-2); text-decoration: none; }
.pie__col a:hover { color: var(--sello); }
.pie__nota { color: var(--gris); max-width: 34ch; }
.pie__legal { margin-top: 38px; padding-top: 20px; border-top: 1px solid var(--linea); font-size: .79rem; color: var(--gris); display: grid; gap: 10px; max-width: 80ch; }
.pie__legal a { color: var(--gris); }

/* ---------- Botón flotante de WhatsApp ---------- */
.flotante {
  position: fixed; right: 16px; bottom: 16px; z-index: 60;
  display: flex; align-items: center; gap: 9px;
  padding: 13px 19px; border-radius: 100px;
  background: var(--tinta); color: var(--papel);
  text-decoration: none; font-size: .91rem; font-weight: 500;
  box-shadow: 0 8px 28px rgba(19,16,9,.3);
  transition: background-color .18s ease;
  animation: flota 3.6s ease-in-out infinite;
}
/* El punto beige antes del texto: el mismo "punto" de la marca, en pequeño. */
.flotante::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%;
  background: var(--beige-hond); flex: none;
}
.flotante:hover { background: var(--sello); animation-play-state: paused; }
@keyframes flota {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}
@media (min-width: 1001px) { .flotante { display: none; } }

/* ---------- Utilidades ---------- */
.solo-lectores { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.saltar { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--tinta); color: var(--papel); padding: 10px 16px; border-radius: var(--radio); text-decoration: none; }
.saltar:focus { left: 8px; }
.logo-pie { width: 96px; height: 96px; border-radius: var(--radio); }

/* ---------- Utilidades de composicion (sustituyen estilos en linea) ---------- */
.grupo__lista--vertical { flex-direction: column; align-items: flex-start; }
.pasos--tres { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .pasos--tres { grid-template-columns: 1fr; } }
.rotulo--bloque { margin-bottom: 12px; }
.nota-legal { max-width: 74ch; }
.semi { font-weight: 500; }

/* ---------- Articulos ---------- */
.articulos { display: grid; gap: 1px; background: var(--linea); border: 1px solid var(--linea); }
.articulo-tarjeta { background: var(--papel); padding: clamp(26px, 3vw, 38px); display: grid; gap: 12px; }
.articulo-tarjeta h2 a { text-decoration: none; }
.articulo-tarjeta h2 a:hover { color: var(--sello); }
.articulo-origen {
  font-size: .85rem; color: var(--gris); padding-top: 14px;
  border-top: 1px solid var(--linea-sutil); max-width: 60ch;
}
.articulo-origen span { color: var(--tinta-2); font-style: italic; }

.cita {
  margin: 6px 0; padding: 22px 26px; background: var(--arena);
  border-left: 2px solid var(--beige-hond); border-radius: 0 var(--radio) var(--radio) 0;
  display: grid; gap: 12px;
}
.cita p { font-size: 1.02rem; line-height: 1.6; color: var(--tinta); }
.cita footer { font-size: .84rem; color: var(--gris); font-family: var(--display); }

.lista-datos { margin: 0; padding-left: 20px; display: grid; gap: 10px; }
.lista-datos li { color: var(--tinta-2); }
.lista-datos strong { color: var(--tinta); font-weight: 500; }

/* ---------- Atmósfera de sección ----------
   Dos fondos vivos que separan bloques sin meter otra línea ni otra caja.
   Ambos en pseudoelementos: la CSP prohibe estilos en línea, así que no puede
   haber divs decorativos con style="" como en el prototipo de Claude Design. */

/* Enso enorme girando en la esquina. Va en secciones de contenido largo,
   donde el lector necesita algo que respire mientras lee. */
.seccion--enso { position: relative; overflow: hidden; }
.seccion--enso::before {
  content: ""; position: absolute; right: -140px; top: -120px;
  width: 520px; height: 520px; opacity: .18; pointer-events: none;
  background: var(--beige-hond);
  -webkit-mask: url("enso.2be40f73.png") center/contain no-repeat;
          mask: url("enso.2be40f73.png") center/contain no-repeat;
  animation: girar 200s linear infinite;
}
.seccion--enso > * { position: relative; }

/* Trama de puntos a la deriva: sugiere los puntos de acupuntura sin dibujarlos. */
.seccion--trama { position: relative; overflow: hidden; }
.seccion--trama::before {
  content: ""; position: absolute; inset: -40px; pointer-events: none;
  opacity: .55;
  background-image: radial-gradient(color-mix(in srgb, var(--beige-hond) 28%, transparent) 1px, transparent 1px);
  background-size: 26px 26px;
  animation: deriva 26s ease-in-out infinite;
}
.seccion--trama > * { position: relative; }
@keyframes deriva {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(24px, -18px); }
}

/* ---------- Retrato en Quiénes somos ----------
   Es la mayor palanca de confianza de todo el sitio: un paciente va a dejar
   entrar a un desconocido a su casa. Por eso va grande y con nombre. */
.retrato-bloque {
  display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 60px); align-items: center;
}
@media (max-width: 820px) {
  .retrato-bloque { grid-template-columns: 1fr; gap: 26px; }
}
.retrato-bloque__texto { display: grid; gap: 18px; align-content: start; }

.retrato { margin: 0; display: grid; gap: 14px; position: relative; }
.retrato img {
  width: 100%; height: auto; border-radius: 6px;
  background: var(--arena);
  border: 1px solid var(--linea);
}
.retrato figcaption { display: grid; gap: 3px; }
.retrato__nombre { font-family: var(--display); font-size: 1.14rem; }
.retrato__rol { font-size: .84rem; color: var(--gris); line-height: 1.45; }

/* Foto a todo el ancho de la columna de contenido, con la misma esquina y
   línea que el resto de bloques del sitio. */
.foto-ancha {
  width: 100%; height: clamp(220px, 30vw, 340px); object-fit: cover;
  border-radius: 6px; border: 1px solid var(--linea);
}

/* Enlaces que solo tienen sentido en el panel de móvil: en la barra de
   escritorio no caben ocho, pero en el panel sobra sitio y dejar fuera
   Contacto o el WhatsApp obligaría a bajar al pie. */
.nav__extra, .nav__wa { display: none; }
@media (max-width: 1000px) {
  .nav__extra { display: block; }
  .nav__wa { display: inline-flex; margin-top: 16px; justify-content: center; }
  /* El color va calificado con .nav: `.nav a` es clase + tipo y le gana a
     `.boton--solido`, que es una clase sola. Sin esto el texto sale gris
     oscuro sobre el negro del botón y no se lee. Segunda vez que muerde
     esta colisión: ojo al añadir estilos a un <a> que ya cae bajo `.nav a`. */
  .nav .nav__wa { font-size: .95rem; padding: 14px 22px; color: var(--papel); }
  .nav .nav__wa:hover { color: var(--papel); }
}

/* ============================================================
   Romper la retícula
   El sitio se sentía cuadrado no por las cajas, sino porque TODOS los
   bordes entre secciones eran la misma línea recta horizontal. Curvar el
   cambio de color rompe esa repetición sin tocar el contenido.
   ============================================================ */
.seccion--arena {
  border-top: 0;
  border-radius: clamp(26px, 3.6vw, 56px);
}
/* Dos secciones de arena seguidas se leerían como una sola caja partida. */
.seccion--arena + .seccion--arena { margin-top: clamp(10px, 1.4vw, 20px); }

.cierre { border-radius: clamp(26px, 3.6vw, 56px) clamp(26px, 3.6vw, 56px) 0 0; }
.encabezado { border-bottom: 0; border-radius: 0 0 clamp(26px, 3.6vw, 56px) clamp(26px, 3.6vw, 56px); }
.portada { border-bottom: 0; border-radius: 0 0 clamp(26px, 3.6vw, 56px) clamp(26px, 3.6vw, 56px); }

/* ============================================================
   Fondos de detalle
   Recortes cerrados — agujas y luz de vela, sin caras ni escenas
   reconocibles: se leen como textura y no dan a entender que sean el
   consultorio real. El velo va por encima con un 88-94 % de opacidad, así
   que de la foto solo pasa un susurro y el texto no pierde contraste.
   ============================================================ */
.seccion--enso {
  background:
    linear-gradient(color-mix(in srgb, var(--arena) 87%, transparent),
                    color-mix(in srgb, var(--arena) 95%, transparent)),
    url("fondo-agujas.bc30241a.jpg") center / cover no-repeat,
    var(--arena);
}
.cierre {
  background:
    linear-gradient(rgba(19, 16, 9, .90), rgba(19, 16, 9, .955)),
    url("fondo-luz.24576269.jpg") center / cover no-repeat,
    var(--tinta);
}
/* Parallax solo con ratón y pantalla grande: iOS ignora `fixed` y en móvil
   cuesta rendimiento. Donde no aplica, el fondo se queda quieto y ya. */
@media (min-width: 900px) and (hover: hover) {
  .seccion--enso, .cierre { background-attachment: scroll, fixed, scroll; }
}

/* ---------- Aparición al llegar ----------
   Solo bajo [data-anima="listo"], que pone `sitio.js`. Si el JS no corre,
   ninguna de estas reglas aplica y el contenido está visible de entrada:
   nada queda esperando a un observador que quizá no llegue. */
[data-anima="listo"] :is(.modalidad, .valoracion, .paso, .padecimiento,
                         .articulo-tarjeta, .retrato) {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s cubic-bezier(.22,.61,.36,1) var(--retardo, 0ms),
              transform .7s cubic-bezier(.22,.61,.36,1) var(--retardo, 0ms);
}
[data-anima="listo"] :is(.modalidad, .valoracion, .paso, .padecimiento,
                         .articulo-tarjeta, .retrato)[data-visible] {
  opacity: 1;
  transform: none;
}
/* Quien pidió menos movimiento no recibe ninguno: el JS ni siquiera marca
   el documento, pero por si acaso la transición también se anula arriba. */

/* ---------- Botones de redes ----------
   Un clic y estás en el perfil. Llevan el nombre escrito al lado, no solo el
   icono: un icono suelto se reconoce, pero el nombre quita toda duda de a
   dónde lleva, y el enlace pasa de 20 px a un objetivo cómodo para el dedo. */
.redes { display: flex; flex-wrap: wrap; gap: 10px; }
.red {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 16px 9px 13px;
  border: 1px solid var(--linea); border-radius: 100px;
  background: var(--papel); color: var(--tinta-2);
  font-size: .89rem; text-decoration: none; line-height: 1;
  transition: color .18s ease, border-color .18s ease,
              background-color .18s ease, transform .18s ease;
}
.red svg { flex: none; }
.red:hover { transform: translateY(-2px); border-color: currentColor; }
/* Cada red toma su propio color al pasar por encima: se reconoce al vuelo
   sin pintar el sitio de morado y azul en reposo. */
.red--instagram:hover { color: #C13584; background: color-mix(in srgb, #C13584 7%, var(--papel)); }
.red--facebook:hover  { color: #1877F2; background: color-mix(in srgb, #1877F2 8%, var(--papel)); }

/* En el pie el fondo ya es arena: el botón se dibuja sobre papel para que
   no se confunda con los enlaces de texto de al lado. */
.redes--pie { margin-top: 4px; }

/* En el panel del celular van en fila, anchos y cómodos de tocar. */
.redes--menu { margin-top: 14px; gap: 10px; }
.redes--menu .red { flex: 1; justify-content: center; padding: 13px 14px; }
@media (min-width: 1001px) { .redes--menu { display: none; } }

/* ---------- Comodidad para el dedo ----------
   Medido el 8-sep-2026: los enlaces del pie median 24 px de alto y la miga
   22 px. Para tocar con el pulgar hacen falta unos 40. En escritorio no
   hace falta, asi que el aire extra entra solo en pantallas pequenas. */
@media (max-width: 700px) {
  .pie__col a { padding-block: 8px; }
  .pie__rejilla { gap: 26px; }
  .miga { gap: 10px; }
  .miga a { padding-block: 9px; display: inline-block; }
}

/* Los enlaces subrayados y la casilla de consentimiento median menos de
   30 px de alto: en el celular se fallan con el dedo. */
@media (max-width: 700px) {
  .enlace-sub { padding-block: 6px 4px; }
}
.consentimiento input { width: 20px; height: 20px; }

/* ============================================================
   El rótulo de sección
   Era un texto diminuto en mayúsculas, perdido en una columna vacía: "se ve
   chico y no remarca". Ahora es un subtítulo de verdad — en Jost, en cuerpo
   grande y sin mayúsculas forzadas — apoyado en una barra de color que crece
   al entrar la sección, y que se queda acompañando su lectura.
   ============================================================ */
.ficha > .rotulo {
  position: relative;
  align-self: start;
  padding-left: 20px;
  font-family: var(--display);
  font-size: clamp(1.15rem, 1.5vw, 1.42rem);
  font-weight: 300;
  letter-spacing: -.01em;
  text-transform: none;
  line-height: 1.22;
  color: var(--tinta);
  text-wrap: balance;
}
/* La barra: arranca en el rojo de la marca y se apaga hacia el beige. */
.ficha > .rotulo::before {
  content: "";
  position: absolute; left: 0; top: .16em; bottom: .1em;
  width: 3px; border-radius: 3px;
  background: linear-gradient(var(--sello), var(--beige-hond));
}
/* El punto de la marca, en la cabeza de la barra. */
.ficha > .rotulo::after {
  content: "";
  position: absolute; left: -2px; top: calc(.16em - 3px);
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--sello);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--sello) 14%, transparent);
}

@media (min-width: 881px) {
  .ficha > .rotulo { position: sticky; top: 100px; padding-left: 22px; }

  [data-anima="listo"] .ficha > .rotulo::before {
    transform: scaleY(0); transform-origin: top;
    transition: transform .9s cubic-bezier(.22,.61,.36,1);
  }
  [data-anima="listo"] .ficha > .rotulo[data-visible]::before { transform: scaleY(1); }
  [data-anima="listo"] .ficha > .rotulo::after {
    opacity: 0; transition: opacity .5s ease .25s;
  }
  [data-anima="listo"] .ficha > .rotulo[data-visible]::after { opacity: 1; }
}

/* El cierre va sobre negro. `.ficha > .rotulo` y `.cierre .rotulo` empatan en
   especificidad, y la mía queda después en el archivo: sin esto el rótulo
   "Agenda" salía NEGRO SOBRE NEGRO, invisible (medido: 1.00:1). Tercera vez
   que muerde una colisión de especificidad en esta hoja. */
.cierre .ficha > .rotulo { color: var(--papel); }
.cierre .ficha > .rotulo::before { background: linear-gradient(var(--beige-hond), color-mix(in srgb, var(--beige-hond) 25%, transparent)); }
.cierre .ficha > .rotulo::after {
  background: var(--beige-hond);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--beige-hond) 18%, transparent);
}