/* Clases de Zuri — mundo de papel de escritorio: post-its, fichas y cinta sobre fondo rosa.
   Paleta de Zuri (2026-09-11) sin cambios; verde y rojo de horarios pedidos por Zuri (2026-09-12).
   Maqueta aprobada: .impeccable/mocks/comps/portada-a2.png */
:root {
  /* paleta de Zuri */
  --rosa: #f5a0a3;
  --rosa-hondo: #e07c80;
  --fondo: #f7e9e6;
  --blanco: #fffdfc;
  --naranja: #f4a966;
  --naranja-hondo: #d78f54;
  --azul: #9fb2ed;
  --azul-hondo: #6b80c4;
  --tinta: #2b2320;
  --tinta-suave: #5b4c46;
  --borde: rgba(43, 35, 32, 0.16);

  /* estados de horario */
  --libre: #a9d8a8;
  --libre-hondo: #3f7f4c;
  --ocupado: #e07c80;

  /* texturas recortadas de la maqueta */
  --papel-fondo: url("plates/fondo.png");
  --papel-rosa: url("plates/papel-rosa.png");
  --papel-azul: url("plates/papel-azul.png");
  --papel-naranja: url("plates/papel-naranja.png");
  --papel-ficha: url("plates/papel-tarjeta.png");

  /* tipografía */
  --serif: "Faustina", Georgia, "Times New Roman", serif;
  --pluma: "La Belle Aurore", "Bradley Hand", cursive;
  --sans: "Fira Sans", "Helvetica Neue", Arial, sans-serif;
  --t-titulo: clamp(2.6rem, 6.75vw, 6.6rem);
  --t-seccion: clamp(2.1rem, 3.3vw, 3.1rem);
  --t-ficha: clamp(1.8rem, 2.25vw, 2.25rem);
  --t-nota: clamp(1.3rem, 1.6vw, 1.6rem);
  --t-etiqueta: clamp(1.05rem, 1.45vw, 1.4rem);
  --t-cuerpo: 1.125rem;
  --t-chico: 1rem;

  /* espacio */
  --e-1: 8px;
  --e-2: 14px;
  --e-3: 22px;
  --e-4: 34px;
  --e-5: 52px;
  --e-6: clamp(64px, 8vw, 112px);

  /* forma y profundidad */
  --r-caja: 12px;
  --r-pastilla: 999px;
  --sombra-papel: drop-shadow(0 7px 6px rgba(43, 35, 32, 0.22)) drop-shadow(0 1px 1px rgba(43, 35, 32, 0.14));
  --sombra-papel-alta: drop-shadow(0 12px 10px rgba(43, 35, 32, 0.2)) drop-shadow(0 2px 2px rgba(43, 35, 32, 0.12));
  --linea: 2px solid var(--tinta);

  --ancho: 1540px;
  --lado: clamp(18px, 4vw, 60px);
  --curva: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 20px; }
body {
  margin: 0; color: var(--tinta);
  background: var(--fondo) var(--papel-fondo) repeat;
  font-family: var(--sans); font-size: var(--t-cuerpo); line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--rosa); color: var(--tinta); }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { margin: 0; font-weight: 500; text-wrap: balance; }
p { margin: 0; }
a { color: var(--tinta); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--azul-hondo); outline-offset: 3px; border-radius: 4px; }
button { font: inherit; color: inherit; }
.visualmente-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.envoltura { max-width: var(--ancho); margin: 0 auto; padding: 0 var(--lado); }

/* ---------- Papel: la textura se pinta en ::before, recortada a la forma; la sombra sigue la forma ---------- */
.papel { position: relative; isolation: isolate; border: 0; background: none; filter: var(--sombra-papel); }
.papel::before { content: ""; position: absolute; inset: 0; z-index: -1; background-repeat: repeat; background-size: 256px; }
.papel--rosa::before { background-color: var(--rosa); background-image: var(--papel-rosa); }
.papel--azul::before { background-color: var(--azul); background-image: var(--papel-azul); }
.papel--naranja::before { background-color: var(--naranja); background-image: var(--papel-naranja); }

/* ---------- Barra ---------- */
.barra { padding: 12px 0 4px; }
.barra__fila { display: flex; align-items: center; gap: clamp(20px, 2vw, 30px); }
.marca { font-family: var(--serif); font-weight: 500; font-size: clamp(1.5rem, 2.3vw, 2.15rem); letter-spacing: -0.01em; text-decoration: none; margin-right: auto; }
.marca { line-height: 0; }
.marca__logo { display: block; width: auto; height: clamp(58px, 5.6vw, 84px); }
.pie .marca__logo { height: 64px; }
.barra__nav { display: flex; gap: clamp(20px, 2vw, 31px); }
.barra__nav a { text-decoration: none; font-size: clamp(1.05rem, 1.2vw, 1.2rem); }
.barra__nav a:hover { text-decoration: underline; }
.pastilla {
  display: inline-flex; align-items: center; min-height: 42px; padding: 0 28px; border-radius: var(--r-pastilla);
  background: var(--naranja); text-decoration: none; font-size: 1.05rem; font-weight: 400;
  transition: background 0.2s, transform 0.2s var(--curva);
}
.pastilla:hover { background: var(--naranja-hondo); transform: translateY(-1px); }

/* ---------- Portada ---------- */
.portada { padding: 14px 0 var(--e-6); }
/* tira de papel rasgada, pegada con dos cintas; el papel va en ::before para que el recorte no corte las cintas */
.titulo-caja {
  position: relative; isolation: isolate; margin-top: 30px; transform: rotate(-0.8deg); filter: var(--sombra-papel-alta);
  overflow: clip; overflow-clip-margin: 40px; /* las cintas salen de la tira a propósito */
  padding: clamp(16px, 1.6vw, 26px) clamp(20px, 4vw, 70px) clamp(18px, 1.9vw, 30px);
}
.titulo-caja::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--blanco) var(--papel-ficha); background-size: 256px;
  clip-path: polygon(0 5%, 3% 0, 7% 3%, 12% 1%, 18% 4%, 25% 0, 33% 3%, 41% 1%, 50% 4%, 58% 0, 66% 3%, 74% 1%, 82% 4%, 90% 0, 96% 3%, 100% 1%, 100% 95%, 97% 100%, 91% 97%, 84% 100%, 76% 96%, 68% 99%, 60% 96%, 52% 100%, 44% 97%, 36% 100%, 28% 96%, 20% 99%, 12% 96%, 5% 100%, 0 97%);
}
.titulo-caja__cinta {
  position: absolute; z-index: 1; top: clamp(-18px, -1.2vw, -10px); width: clamp(70px, 9vw, 140px); height: clamp(24px, 2.3vw, 36px);
  box-shadow: 0 1px 2px rgba(43, 35, 32, 0.12);
}
.titulo-caja__cinta--izq { left: clamp(-14px, -1vw, -6px); background: rgba(159, 178, 237, 0.8); transform: rotate(-24deg); }
.titulo-caja__cinta--der { right: clamp(-14px, -1vw, -6px); background: rgba(245, 160, 163, 0.8); transform: rotate(20deg); }
.titulo-caja h1 {
  font-family: var(--serif); font-style: italic; font-weight: 500; font-size: var(--t-titulo);
  line-height: 0.93; letter-spacing: -0.012em; text-align: center; white-space: nowrap;
}

.portada__rejilla {
  overflow: clip; overflow-clip-margin: 40px;
  margin-top: clamp(30px, 3.1vw, 50px);
  display: grid; grid-template-columns: minmax(0, 530fr) minmax(0, 337fr) minmax(0, 458fr);
  column-gap: clamp(14px, 1.2vw, 20px); align-items: start;
}

/* lomo de cuaderno: dos líneas verticales detrás de las pestañas */
.pestanas { overflow-x: clip; overflow-clip-margin: 40px; position: relative; display: grid; gap: clamp(22px, 2vw, 30px); justify-items: start; padding: 33px 0 60px 15px; }
.pestanas::before, .pestanas::after { content: ""; position: absolute; top: 0; bottom: -80px; width: 2px; background: var(--tinta); }
.pestanas::before { left: 0; }
.pestanas::after { left: 26px; }

.pestana {
  --punta: clamp(24px, 2.2vw, 34px);
  display: flex; align-items: center; min-height: clamp(52px, 4.2vw, 66px); max-width: 100%;
  padding: 8px calc(var(--punta) + 14px) 8px clamp(56px, 5vw, 78px);
  text-align: left; font-size: clamp(1.05rem, 1.3vw, 1.25rem); font-weight: 400; line-height: 1.2; cursor: pointer; white-space: nowrap;
  transition: transform 0.35s var(--curva), filter 0.35s var(--curva);
}
.pestana::before {
  clip-path: polygon(0 0, calc(100% - var(--punta)) 0, 100% 50%, calc(100% - var(--punta)) 100%, 0 100%);
  background-image: linear-gradient(90deg, rgba(43, 35, 32, 0.07) 0 clamp(40px, 3.8vw, 58px), transparent 0), var(--papel-rosa);
}
.papel--azul.pestana::before { background-image: linear-gradient(90deg, rgba(43, 35, 32, 0.07) 0 clamp(40px, 3.8vw, 58px), transparent 0), var(--papel-azul); }
.papel--naranja.pestana::before { background-image: linear-gradient(90deg, rgba(43, 35, 32, 0.07) 0 clamp(40px, 3.8vw, 58px), transparent 0), var(--papel-naranja); }
.pestana::before { background-size: 100% 100%, 256px; background-repeat: no-repeat, repeat; }
/* esquina doblada en la punta */
.pestana::after {
  content: ""; position: absolute; right: calc(var(--punta) * 0.2); bottom: 2px; width: calc(var(--punta) * 0.8); height: 42%;
  background: linear-gradient(135deg, rgba(255, 253, 252, 0.55), rgba(43, 35, 32, 0.12));
  clip-path: polygon(0 100%, 100% 0, 30% 100%);
}
.pestana:hover { transform: translateX(8px); }
.pestana[aria-selected="true"] { transform: translateX(14px); filter: var(--sombra-papel-alta); }
/* aviso de que las pestañas se abren: letrero a mano y un asomo una sola vez */
.pestanas__pista {
  position: absolute; top: 2px; left: 46px; display: flex; align-items: flex-start; gap: 4px;
  font-family: var(--pluma); font-size: 1.35rem; line-height: 1; color: var(--tinta-suave); white-space: nowrap; pointer-events: none;
}
.pestanas__pista svg { width: 34px; height: 24px; margin-top: 6px; fill: none; stroke: var(--tinta-suave); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pestana.asoma { animation: asomar 0.9s var(--curva); }
@keyframes asomar { 0%, 100% { translate: 0 0; } 40% { translate: 16px 0; } }

.nota {
  margin-top: clamp(44px, 5.85vw, 92px); padding: clamp(24px, 2.4vw, 38px) clamp(20px, 2vw, 32px) clamp(30px, 3vw, 46px);
  width: 94%; margin-left: -1.2vw; min-height: clamp(250px, 20.3vw, 318px); transform: rotate(-4deg); transform-origin: 30% 20%;
  transition: transform 0.45s var(--curva);
}
.nota__titulo { font-family: var(--serif); font-weight: 500; font-size: var(--t-nota); line-height: 1.12; margin-bottom: 30px; }
.nota__texto { font-size: var(--t-cuerpo); line-height: 1.45; }
.nota.cambiando { animation: despegar 0.5s var(--curva); }
@keyframes despegar {
  0% { transform: rotate(-4deg); }
  35% { transform: rotate(3deg) translateY(-10px) scale(0.97); }
  100% { transform: rotate(-4deg); }
}

.tarjeta {
  position: relative; isolation: isolate; margin-top: 4px; margin-left: clamp(0px, 1.25vw, 19px); margin-right: clamp(-12px, -0.8vw, 0px);
  padding: clamp(34px, 3.3vw, 52px) clamp(24px, 3vw, 46px) clamp(8px, 0.6vw, 12px);
  transform: rotate(1.6deg); filter: var(--sombra-papel-alta);
}
.tarjeta::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--blanco) var(--papel-ficha) repeat; background-size: 256px;
}
.cinta {
  position: absolute; top: -18px; left: 34%; width: clamp(110px, 10.5vw, 160px); height: clamp(30px, 2.4vw, 40px);
  background: rgba(245, 160, 163, 0.78); transform: rotate(-2deg);
  box-shadow: 0 1px 2px rgba(43, 35, 32, 0.12);
}
.tarjeta__titulo { font-family: var(--serif); font-weight: 500; font-size: var(--t-ficha); line-height: 1.05; text-align: center; margin-bottom: clamp(24px, 2.45vw, 38px); }
.renglon { display: block; margin-bottom: clamp(22px, 2.3vw, 35px); }
.renglon span { display: block; font-size: clamp(1.05rem, 1.3vw, 1.3rem); line-height: 1.1; margin-bottom: 0; }
.renglon input, .renglon select {
  display: block; width: 100%; height: 22px; min-height: 0; line-height: 1.1; padding: 0 2px 1px; border: 0; border-bottom: var(--linea); border-radius: 0;
  background: transparent; color: var(--tinta); font: inherit; font-size: 1.15rem; appearance: none;
}
.renglon select { cursor: pointer; }
.renglon input:focus, .renglon select:focus { outline: none; border-bottom-color: var(--azul-hondo); box-shadow: 0 2px 0 var(--azul-hondo); }
.aviso-horario { margin: 0 0 var(--e-3); padding: 10px 14px; background: rgba(169, 216, 168, 0.45); border-radius: 6px; font-size: var(--t-chico); }
.aviso { min-height: 1.5em; margin-top: var(--e-2); font-size: var(--t-chico); font-weight: 500; color: #9b3f44; }

.etiqueta {
  display: flex; align-items: center; justify-content: center; width: 100%; min-height: clamp(56px, 4.6vw, 72px);
  margin-top: clamp(18px, 1.8vw, 28px); padding: 10px 24px; cursor: pointer; text-decoration: none;
  font-size: var(--t-etiqueta); font-weight: 400; transform: rotate(-0.8deg);
  transition: transform 0.3s var(--curva), filter 0.3s var(--curva);
}
.etiqueta::after {
  content: ""; position: absolute; right: 0; bottom: 0; width: 30px; height: 26px;
  background: linear-gradient(135deg, var(--naranja-hondo) 48%, rgba(255, 253, 252, 0.7) 52%);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
.etiqueta:hover { transform: rotate(-0.8deg) translateY(-2px); filter: var(--sombra-papel-alta); }
.etiqueta:active { transform: rotate(-0.8deg) translateY(1px); }
.etiqueta--ancha { max-width: 460px; }
.tarjeta .etiqueta { font-size: clamp(1.05rem, 1.3vw, 1.3rem); color: #431508; transform: none; }
.tarjeta .etiqueta:hover { transform: translateY(-2px); }
.tarjeta .etiqueta:active { transform: translateY(1px); }

.gracias h3 { font-family: var(--serif); font-size: var(--t-nota); margin-bottom: var(--e-3); }
.gracias p + p { margin-top: var(--e-2); }

/* ---------- Bandas ---------- */
.banda { padding: var(--e-6) 0; }
.banda--papel { background: rgba(255, 253, 252, 0.45); }
.titulo-seccion { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: var(--t-seccion); line-height: 1.05; letter-spacing: -0.01em; margin-bottom: var(--e-5); }
.titulo-seccion--centro { text-align: center; }

/* pasos y centro lado a lado; los precios abajo a todo lo ancho [Yendi 2026-09-13] */
.funciona { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: start; }

.pasos { list-style: none; margin: 0; padding: 0; counter-reset: paso; display: grid; gap: var(--e-4); }
.pasos li { position: relative; counter-increment: paso; padding-left: 64px; }
.pasos li::before {
  content: counter(paso); position: absolute; left: 0; top: -4px; width: 44px; height: 44px; display: grid; place-items: center;
  font-family: var(--serif); font-weight: 600; font-size: 1.35rem; border: var(--linea); border-radius: 50%;
  background: var(--blanco) var(--papel-ficha); background-size: 256px;
}
.pasos h3 { font-family: var(--serif); font-weight: 600; font-size: 1.45rem; line-height: 1.15; margin-bottom: 26px; }
.pasos p { color: var(--tinta-suave); line-height: 1.5; }
/* el último paso cambia el número por una estrella del mismo tamaño que los círculos */
.pasos li.pasos__listo::before { display: none; }
.estrella { position: absolute; left: -5px; top: -11px; width: 54px; height: 54px; transform: rotate(-8deg); }
.estrella svg { display: block; width: 100%; height: 100%; overflow: visible; fill: var(--naranja); stroke: var(--tinta); stroke-width: 2; stroke-linejoin: round; filter: drop-shadow(0 2px 0 rgba(43, 35, 32, 0.12)); }

.funciona__centro { display: grid; gap: var(--e-5); overflow: clip; overflow-clip-margin: 30px; }
.foto-clase { margin: 0; padding: 16px 16px 46px; transform: rotate(-1.5deg); position: relative; filter: var(--sombra-papel); }
.foto-clase::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--blanco) var(--papel-ficha); background-size: 256px; }
.foto-clase::after { content: ""; position: absolute; top: -16px; left: 40%; width: 110px; height: 34px; background: rgba(159, 178, 237, 0.75); transform: rotate(3deg); }
.foto-clase__marco img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.ruta { margin: 0; }
.ruta__dibujo { width: 100%; height: auto; overflow: visible; }
.ruta__camino { fill: none; stroke: var(--tinta); stroke-width: 3; stroke-dasharray: 2 10; stroke-linecap: round; }
.ruta__punto { fill: var(--blanco); stroke: var(--tinta); stroke-width: 3; }
.ruta__punto--meta { fill: var(--naranja); }
.ruta__bandera path { fill: none; stroke: var(--tinta); stroke-width: 3; stroke-linejoin: round; }
.ruta__bandera .ruta__tela { fill: var(--rosa-hondo); }
.v-cuerpo { stroke: var(--tinta); stroke-width: 3; stroke-linejoin: round; }
.v-rosa { fill: var(--rosa); } .v-azul { fill: var(--azul); } .v-naranja { fill: var(--naranja); }
.v-llanta { fill: var(--tinta); }
.v-ojo { fill: var(--tinta); }
.v-ventana { fill: var(--blanco); stroke: var(--tinta); stroke-width: 3; }
.v-fuego { fill: var(--rosa-hondo); stroke: var(--tinta); stroke-width: 2; stroke-linejoin: round; }
.ruta__vehiculo { transform-box: fill-box; }
.ruta__extremos { display: flex; justify-content: space-between; gap: var(--e-3); margin-top: 4px; font-size: var(--t-chico); font-weight: 500; }
.ruta figcaption { margin-top: var(--e-3); color: var(--tinta-suave); max-width: 46ch; }

.precios { overflow: clip; overflow-clip-margin: 30px; grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--e-4); align-items: start; }
.precios .titulo-seccion, .mas-opciones { grid-column: 1 / -1; }
.precios .titulo-seccion { margin-bottom: var(--e-4); }
.plan { position: relative; padding: var(--e-4) var(--e-4) var(--e-4); filter: var(--sombra-papel); margin-bottom: var(--e-4); }
.plan::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--blanco) var(--papel-ficha); background-size: 256px; }
.plan h3 { font-family: var(--serif); font-weight: 600; font-size: 1.5rem; margin-bottom: 18px; }
.plan__precio { font-family: var(--serif); font-weight: 600; font-size: clamp(2.6rem, 3.6vw, 3.4rem); line-height: 1; letter-spacing: -0.02em; margin-bottom: var(--e-3); font-variant-numeric: lining-nums tabular-nums; }
/* marcatextos real: entra tenue, se carga al inicio y se va gastando; bordes chuecos */
.resaltado {
  --marca: 244, 169, 102;
  margin: 0 -0.25em; padding: 0 0.25em; border-radius: 0.5em 0.2em 0.6em 0.15em; color: inherit;
  background: transparent linear-gradient(to right, rgba(var(--marca), 0.15), rgba(var(--marca), 0.8) 4%, rgba(var(--marca), 0.38)) no-repeat 0 88% / 100% 58%;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.plan--suelta .resaltado { --marca: 224, 124, 128; }
.plan__precio span { font-family: var(--sans); font-weight: 400; font-size: 1.05rem; letter-spacing: 0; color: var(--tinta-suave); }
.plan__nota { color: var(--tinta-suave); }
.plan__incluye { list-style: none; margin: var(--e-3) 0 0; padding: var(--e-3) 0 0; border-top: 1px solid var(--borde); display: grid; gap: 10px; }
.plan__incluye li { position: relative; padding-left: 28px; }
.plan__incluye li::before { content: ""; position: absolute; left: 0; top: 0.35em; width: 16px; height: 16px; border-radius: 3px; background: var(--rosa); transform: rotate(-6deg); }
.plan--suelta { transform: rotate(0.8deg); }
.plan--suelta::before { background: var(--naranja) var(--papel-naranja); background-size: 256px; }
.plan--suelta .plan__nota, .plan--suelta .plan__precio span { color: var(--tinta); }

.mas-opciones { border-top: var(--linea); padding-top: var(--e-3); }
.mas-opciones summary { cursor: pointer; font-weight: 500; font-size: 1.1rem; list-style-position: inside; }
.mas-opciones table { width: 100%; margin: var(--e-3) 0; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.mas-opciones th, .mas-opciones td { padding: 10px 6px; text-align: left; border-bottom: 1px solid var(--borde); font-size: var(--t-chico); }
.mas-opciones thead th { font-weight: 600; }
.mas-opciones tbody th { font-weight: 400; }
.mas-opciones p { color: var(--tinta-suave); font-size: var(--t-chico); }

/* ---------- Tutora y horarios ---------- */
.tutora-horarios { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
/* la foto flota y el texto sigue por debajo cuando ya no hay foto al lado */
.tutora__hoja { position: relative; display: flow-root; padding: var(--e-4); filter: var(--sombra-papel); }
.tutora__hoja::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--blanco) var(--papel-ficha); background-size: 256px; }
.tutora__foto { position: relative; float: left; width: 42%; margin: 0 var(--e-4) var(--e-3) 0; padding: 10px 10px 34px; background: #fff; transform: rotate(-2.5deg); box-shadow: 0 8px 14px -6px rgba(43, 35, 32, 0.35); }
.tutora__foto::after { content: ""; position: absolute; top: -14px; left: 30%; width: 96px; height: 30px; background: rgba(245, 160, 163, 0.8); transform: rotate(-4deg); }
.tutora__foto img { aspect-ratio: 4 / 5; object-fit: cover; }
.tutora__texto h3 { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 2rem; line-height: 1.1; margin-bottom: 28px; }
.tutora__texto p { margin-bottom: var(--e-2); line-height: 1.5; }
.tutora__texto p:last-child { margin-bottom: 0; }

.horarios .titulo-seccion { margin-bottom: 28px; }
.horarios__zona { color: var(--tinta-suave); margin-bottom: var(--e-4); }
.horarios__marco { overflow-x: auto; padding-bottom: 4px; }
.agenda { border-collapse: separate; border-spacing: 6px; width: 100%; min-width: 440px; font-variant-numeric: tabular-nums; }
.agenda th { font-weight: 500; font-size: var(--t-chico); padding: 2px 4px; }
.agenda thead th { text-align: center; }
.agenda tbody th { text-align: left; width: 3.2em; font-family: var(--serif); font-weight: 600; font-size: 1.15rem; }
.agenda td { padding: 0; }
.casilla {
  display: block; width: 100%; height: 44px; border-radius: 6px; border: 2px solid transparent; cursor: pointer;
  transition: transform 0.2s var(--curva), box-shadow 0.2s;
}
.casilla--libre { background: var(--libre); border-color: rgba(63, 127, 76, 0.45); }
.casilla--libre:hover { transform: translateY(-2px); box-shadow: 0 6px 8px -4px rgba(43, 35, 32, 0.3); }
.casilla--libre[aria-pressed="true"] { background: var(--libre-hondo); border-color: var(--tinta); }
.casilla--ocupado {
  cursor: not-allowed; background: repeating-linear-gradient(-45deg, var(--ocupado) 0 6px, #cf6a6f 6px 12px);
}
.horarios__leyenda { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-4); margin: var(--e-3) 0 0; font-size: var(--t-chico); }
.muestra { display: inline-block; width: 22px; height: 18px; border-radius: 4px; margin-right: 8px; vertical-align: -3px; }
.muestra--libre { background: var(--libre); border: 2px solid rgba(63, 127, 76, 0.45); }
.muestra--ocupado { background: repeating-linear-gradient(-45deg, var(--ocupado) 0 4px, #cf6a6f 4px 8px); }
.horarios__ejemplo { color: var(--tinta-suave); font-style: italic; margin-left: auto; }

/* ---------- Preguntas: burbujas de pensamiento en carrusel ---------- */
.banda--preguntas { overflow: hidden; }
.burbujas { position: relative; padding: 24px 0 70px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; cursor: grab; touch-action: pan-x pan-y; }
.burbujas::-webkit-scrollbar { display: none; }
.burbujas.arrastrando { cursor: grabbing; user-select: none; }
.burbujas__pista { list-style: none; margin: 0; padding: 0 var(--lado); display: flex; gap: clamp(26px, 3vw, 48px); width: max-content; align-items: flex-start; }
.burbuja { position: relative; width: clamp(260px, 24vw, 340px); padding: 30px 32px; border-radius: 52% 48% 46% 54% / 58% 54% 46% 42%; background: var(--blanco) var(--papel-ficha); background-size: 256px; filter: var(--sombra-papel); transition: transform 0.4s var(--curva); }
.burbuja:nth-child(3n+2) { transform: translateY(26px); }
.burbuja:nth-child(3n) { transform: translateY(-8px); }
.burbuja::before, .burbuja::after { content: ""; position: absolute; border-radius: 50%; background: inherit; }
.burbuja::before { left: 18%; bottom: -22px; width: 30px; height: 24px; }
.burbuja::after { left: 11%; bottom: -44px; width: 16px; height: 13px; }
.burbuja__pregunta { display: block; width: 100%; border: 0; background: none; cursor: pointer; text-align: center; font-family: var(--serif); font-weight: 500; font-size: 1.35rem; line-height: 1.2; }
.burbuja__respuesta { margin-top: var(--e-2); text-align: center; line-height: 1.45; font-size: var(--t-chico); }
.burbuja__respuesta.pendiente { color: var(--tinta-suave); font-style: italic; text-decoration: underline dashed rgba(43, 35, 32, 0.4); text-underline-offset: 4px; }
.burbuja.abierta { border-radius: 40px; }

/* ---------- Símbolos de fondo: trazos tenues que se mueven a otra velocidad al hacer scroll ---------- */
.con-simbolos { position: relative; isolation: isolate; }
.simbolos { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.simbolo {
  position: absolute; width: clamp(34px, var(--tam), var(--tam)); aspect-ratio: 1; translate: -50% -50%;
  fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; opacity: 0.28; will-change: transform;
  filter: url(#garabato);
}
.simbolo--rosa { stroke: var(--rosa-hondo); }
.simbolo--azul { stroke: var(--azul-hondo); }
.simbolo--naranja { stroke: var(--naranja-hondo); }

/* ---------- Pie ---------- */
.pie { padding: var(--e-5) 0 64px; border-top: 1px solid var(--borde); }
.pie__fila { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e-2) var(--e-4); color: var(--tinta-suave); font-size: var(--t-chico); }
.pie .marca { margin-right: 0; font-size: 1.4rem; color: var(--tinta); }
.pie a { margin-left: auto; font-weight: 500; }

/* ---------- Anchos ---------- */
@media (max-width: 1100px) {
  .titulo-caja h1 { white-space: normal; }
  .portada__rejilla { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .tarjeta { grid-column: 1 / -1; max-width: 560px; justify-self: center; width: 100%; margin-top: var(--e-4); margin-left: 0; margin-right: 0; }
  .nota { width: auto; margin-left: 0; }
  .tutora-horarios { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .barra__nav { display: none; }
  .portada { padding-top: 24px; }
  .portada__rejilla { grid-template-columns: minmax(0, 1fr); }
  .pestanas { padding: 36px 0 20px 15px; gap: 16px; }
  .pestana { white-space: normal; max-width: calc(100% - 24px); }
  .pestanas::after { left: 20px; }
  .pestanas::before, .pestanas::after { bottom: 0; }
  .nota { margin-top: 0; min-height: 0; width: auto; margin-left: 0; transform: rotate(-1.5deg); }
  @keyframes despegar { 0% { transform: rotate(-1.5deg); } 35% { transform: rotate(2deg) translateY(-8px) scale(0.98); } 100% { transform: rotate(-1.5deg); } }
  .tarjeta { transform: rotate(0.8deg); }
  .funciona, .precios { grid-template-columns: minmax(0, 1fr); }
  .tutora__foto { float: none; width: auto; max-width: 280px; margin: 0 0 var(--e-4); }
  .horarios__ejemplo { margin-left: 0; }
  .agenda { min-width: 0; table-layout: fixed; border-spacing: 4px; }
  .agenda th { padding: 0; }
  .agenda tbody th { width: 1.5em; }
  .agenda thead th { white-space: normal; line-height: 1.15; }
  .casilla { height: 40px; }
  .pie a { margin-left: 0; }
  .simbolo { width: calc(var(--tam) * 0.7); opacity: 0.22; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .burbujas { overflow-x: visible; cursor: auto; }
  .burbujas__pista { width: auto; flex-wrap: wrap; justify-content: center; }
  .burbuja:nth-child(n) { transform: none; }
  .burbuja[aria-hidden="true"] { display: none; }
  .nota.cambiando, .pestana.asoma { animation: none; }
  .pestana, .etiqueta, .casilla, .pastilla { transition: none; }
}