/* ═══════════════════════════════════════════════════════════════════════════
   Páginas públicas. Móvil primero, maquetado desde 375 px.
   Todo el contenido está en el HTML: el movimiento cambia cómo se ve,
   nunca si existe.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Cabecera ────────────────────────────────────────────────────────────── */
.sitio__cabecera {
  background: var(--color-superficie);
  border-bottom: 1px solid var(--color-borde);
}
.sitio__barra {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--espacio-2) var(--espacio-6); padding-block: var(--espacio-3);
}
.sitio__marca { display: inline-flex; line-height: 0; }
.sitio__marca img { width: 150px; height: 58px; }
/* Sin menú desplegable: con seis enlaces, envolver es más robusto que un
   botón que necesita JavaScript para abrirse. */
.sitio__nav { flex: 1 1 100%; order: 3; }
.sitio__nav ul {
  display: flex; flex-wrap: wrap; gap: var(--espacio-1) var(--espacio-4);
  margin: 0; padding: 0; list-style: none;
}
.sitio__nav a {
  display: inline-flex; align-items: center; min-height: var(--tactil);
  color: var(--color-texto-suave); text-decoration: none; font-size: var(--texto-xs);
  /* Un punto por encima del texto normal: el menu se lee antes sin gritar.
     El 500 esta en la fuente --se cargan 400, 500 y 600--, asi que el
     navegador no tiene que fingirlo engordando el trazo. */
  font-weight: 500;
}
.sitio__nav a:hover { color: var(--color-principal); }
.sitio__nav a[aria-current='page'] { color: var(--color-principal); font-weight: 600; }
.sitio__cta { margin-left: auto; font-size: var(--texto-xs); padding-inline: var(--espacio-4); }

/* Avisos del servidor arriba de la pagina, con aire para que no queden
   pegados a la cabecera. */
.avisos-pagina { padding-top: var(--espacio-6); }
.avisos-pagina .estado { margin-bottom: 0; }

/* ── Portada ─────────────────────────────────────────────────────────────── */
/* La primera pantalla NO se anima: retrasar el elemento más grande empeora
   directamente el LCP. */
.portada { padding-block: var(--espacio-12) var(--espacio-8); }
.portada h1 { max-width: 18ch; }
.portada__caja { display: grid; gap: var(--espacio-8); align-items: center; }
.portada__texto > :last-child { margin-bottom: 0; }
.portada__foto img {
  width: 100%; height: auto; display: block;
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra-md);
}
.portada__entrada {
  font-size: var(--texto-md); max-width: 56ch; color: var(--color-texto);
}
.portada__acciones {
  display: flex; flex-wrap: wrap; gap: var(--espacio-3); margin-top: var(--espacio-6);
}
/* ── Bloques de contenido ────────────────────────────────────────────────── */
.bloque { padding-block: var(--espacio-12); }
.bloque--claro { background: var(--color-superficie); }
.bloque > .contenedor > h2 { max-width: 22ch; }
/* La respuesta directa en las primeras 40 a 60 palabras de cada sección. */
.entradilla { font-size: var(--texto-md); max-width: 60ch; }

.rejilla {
  display: grid; gap: var(--espacio-4);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin-top: var(--espacio-8);
}

/* ── Precios ─────────────────────────────────────────────────────────────── */
.precio { display: flex; flex-direction: column; gap: var(--espacio-2); position: relative; }
.precio--recomendado { border-color: var(--color-acento); border-width: 2px; }
/* Cinta que cuelga del borde de una tarjeta. Necesita un ancestro posicionado
   —.precio lo es— o se va contra el bloque inicial, es decir, al principio de
   la página. */
.precio__cinta {
  position: absolute; top: calc(var(--espacio-3) * -1); left: var(--espacio-6);
  background: var(--color-acento); color: #FFF;
  font-size: 12px; font-weight: 500; padding: 2px var(--espacio-3);
  border-radius: var(--radio-sm);
}

/* La misma etiqueta, pero dentro del texto. Es una clase aparte y no la
   anterior parcheada con un style suelto: si el parche falla, el elemento
   acaba flotando en la esquina de la página. */
.etiqueta-inline {
  display: inline-block;
  background: var(--color-acento); color: #FFF;
  font-size: 12px; font-weight: 500; padding: 2px var(--espacio-3);
  border-radius: var(--radio-sm); white-space: nowrap;
}
.precio__monto {
  font-size: var(--texto-2xl); font-weight: 600; color: var(--color-principal);
  line-height: 1.1; font-variant-numeric: tabular-nums;
}
.precio__unitario { font-size: var(--texto-xs); color: var(--color-texto-suave); }
.precio__incluye { margin: var(--espacio-2) 0 0; padding-left: var(--espacio-4); font-size: var(--texto-xs); }

/* Tabla de precios: los datos concretos van como TEXTO, nunca en una imagen.
   Es lo que los sistemas generativos pueden citar. */
.tabla-precios { width: 100%; border-collapse: collapse; margin-top: var(--espacio-6); }
.tabla-precios th, .tabla-precios td {
  padding: var(--espacio-3); text-align: left;
  border-bottom: 1px solid var(--color-borde);
}
.tabla-precios td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ── Preguntas frecuentes ────────────────────────────────────────────────── */
/* La pregunta es un encabezado y la respuesta va inmediatamente debajo. Nada
   de acordeones que escondan el texto tras un clic. */
.faq { margin-top: var(--espacio-8); }
.faq__item { padding-block: var(--espacio-6); border-bottom: 1px solid var(--color-borde); }
.faq__item h3 { font-size: var(--texto-md); margin-bottom: var(--espacio-2); }
.faq__item p { margin: 0; }

/* ── Calendario público ──────────────────────────────────────────────────── */
.calendario { margin-top: var(--espacio-6); }
.calendario__dia {
  border: 1px solid var(--color-borde); border-radius: var(--radio-lg);
  background: var(--color-superficie); margin-bottom: var(--espacio-3); overflow: hidden;
}
.calendario__cabecera {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--espacio-2);
  padding: var(--espacio-3) var(--espacio-4); background: var(--color-superficie-2);
  border-bottom: 1px solid var(--color-borde);
}
.calendario__cabecera strong { color: var(--color-principal); text-transform: capitalize; }
.calendario__horas {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: var(--espacio-2); padding: var(--espacio-3);
}
.franja {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: var(--tactil); padding: var(--espacio-2);
  border: 1px solid var(--color-borde); border-radius: var(--radio-md);
  font-size: var(--texto-xs); text-align: center;
}
.franja--libre {
  background: var(--color-superficie); cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease;
}
.franja--libre:has(input:checked) { background: var(--color-apoyo); border-color: var(--color-acento); }
.franja--libre strong { font-size: var(--texto-sm); }
.franja--ocupada { background: var(--color-superficie-2); color: var(--color-texto-suave); opacity: .7; }
/* Libre pero todavia no reservable. Se distingue de «ocupada» a proposito:
   esa hora si esta disponible, solo que no para hoy. */
.franja--pronto {
  background: var(--color-superficie-2); color: var(--color-texto-suave);
  opacity: .55; border-style: dashed;
}
.calendario__cerrado { padding: var(--espacio-4); color: var(--color-texto-suave); font-size: var(--texto-xs); }

/* ── Artículos ───────────────────────────────────────────────────────────── */
.articulo { max-width: var(--ancho-lectura); }
.articulo h2 { margin-top: var(--espacio-8); }
.articulo img { border-radius: var(--radio-lg); }
.articulo__meta { font-size: var(--texto-xs); color: var(--color-texto-suave); }
.tarjeta-articulo { display: flex; flex-direction: column; gap: var(--espacio-2); text-decoration: none; color: inherit; }
.tarjeta-articulo h3 { color: var(--color-principal); margin: 0; font-size: var(--texto-md); }

/* ── Testimonios ─────────────────────────────────────────────────────────── */
.testimonio blockquote { margin: 0 0 var(--espacio-3); font-size: var(--texto-md); }
.testimonio figcaption { font-size: var(--texto-xs); color: var(--color-texto-suave); }
.estrellas { color: var(--color-acento); letter-spacing: .1em; }

/* ── Pie ─────────────────────────────────────────────────────────────────── */
.sitio__pie {
  background: var(--color-principal); color: var(--color-fondo);
  padding-block: var(--espacio-12) var(--espacio-8); margin-top: var(--espacio-16);
}
.sitio__pie a { color: var(--color-fondo); }
.sitio__pie-logo { width: 150px; height: 58px; margin-bottom: var(--espacio-4); }
.sitio__pie-columnas {
  display: grid; gap: var(--espacio-8);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.sitio__pie-titulo { font-weight: 600; color: #FDFBF6; margin-bottom: var(--espacio-3); }
.sitio__pie address { font-style: normal; line-height: 1.7; }
.sitio__pie-lista { margin: 0; padding: 0; list-style: none; line-height: 2; }
.sitio__pie-fino {
  margin-top: var(--espacio-8); padding-top: var(--espacio-6);
  border-top: 1px solid rgba(230,224,202,.25);
  font-size: var(--texto-xs); opacity: .85;
}

/* ── Botón flotante de WhatsApp ──────────────────────────────────────────── */
.wa {
  position: fixed; right: var(--espacio-4); bottom: var(--espacio-4); z-index: 30;
  display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 50%;
  background: #25D366; color: #FFF;
  box-shadow: var(--sombra-md);
  transition: transform 160ms ease;
}
.wa:hover { transform: scale(1.06); color: #FFF; }

/* ── Tablet y escritorio: menu centrado ──────────────────────────────────── */
/* El menu ocupa el hueco entre el logo y el boton y centra sus enlaces ahi.
   No es un centrado optico exacto respecto a la pagina --eso pediria que el
   logo y el boton midieran lo mismo-- pero reparte el aire y se lee mucho
   mejor que pegado a la izquierda. */
@media (min-width: 768px) {
  .sitio__nav { flex: 1 1 auto; order: 0; }
  .sitio__nav ul { justify-content: center; gap: var(--espacio-1) var(--espacio-6); }
}

/* En tablet justo no cabe: medido a 768 px hacen falta 735 y hay 704, asi que
   el boton se caia a una segunda fila. Se recuperan esos 31 px repartidos
   --logo un poco menor y huecos mas cortos-- en vez de sacarlos de un solo
   sitio, que se notaria. A partir de 1000 px vuelve todo a su tamano. */
@media (min-width: 768px) and (max-width: 999px) {
  .sitio__barra { column-gap: var(--espacio-4); }
  .sitio__marca img { width: 130px; height: 50px; }
  .sitio__nav ul { gap: var(--espacio-1) var(--espacio-3); }
}

/* ── Escritorio ──────────────────────────────────────────────────────────── */
@media (min-width: 900px) {
  .portada { padding-block: var(--espacio-16) var(--espacio-12); }
  .portada__entrada { font-size: var(--texto-lg); }
  .portada__caja { grid-template-columns: 1fr 1fr; gap: var(--espacio-12); }
}

/* ── Ficha del consultorio ───────────────────────────────────────────────── */
/* Titulo, mosaico de fotos, y debajo el calendario con el precio siempre a la
   vista en una columna que acompana el scroll. */
.presentacion {
  background: var(--color-superficie);
  padding-block: var(--espacio-8) var(--espacio-6);
}
.presentacion h1 { margin-bottom: var(--espacio-2); }
.presentacion__entrada {
  font-size: var(--texto-md); color: var(--color-texto-suave); margin-bottom: 0;
}

/* ── Mosaico de fotos ────────────────────────────────────────────────────── */
/* En movil, una tira que se desliza con el dedo; en escritorio, la rejilla de
   una grande y cuatro pequenas. Las dos con CSS puro: un carrusel con
   JavaScript se lleva mal con el teclado y con los lectores de pantalla, y
   aqui no aporta nada que esto no haga. */
.mosaico { background: var(--color-superficie); padding-bottom: var(--espacio-8); }
.mosaico__caja { position: relative; }

.mosaico__rejilla {
  display: flex; gap: var(--espacio-2);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* El desbordamiento sale del contenedor para que la primera y la ultima
     no queden cortadas contra el borde de la pantalla. */
  margin-inline: calc(var(--espacio-4) * -1);
  padding-inline: var(--espacio-4);
  scrollbar-width: none;
}
.mosaico__rejilla::-webkit-scrollbar { display: none; }

.mosaico__rejilla picture { flex: 0 0 86%; scroll-snap-align: center; }
.mosaico__rejilla img {
  width: 100%; height: 100%; display: block;
  aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--radio-lg);
}

/* Boton flotante sobre el mosaico, como el «mostrar todas las fotos». */
.mosaico__todas {
  position: absolute; right: var(--espacio-6); bottom: var(--espacio-4);
  display: inline-flex; align-items: center; min-height: 40px;
  padding: 0 var(--espacio-4);
  background: var(--color-superficie); color: var(--color-principal);
  border: 1px solid var(--color-principal); border-radius: var(--radio-md);
  font-size: var(--texto-xs); font-weight: 500; text-decoration: none;
  box-shadow: var(--sombra-md);
}
.mosaico__todas:hover { background: var(--color-fondo); color: var(--color-principal); }

/* ── Reserva: calendario y panel de precio ───────────────────────────────── */
.reserva { display: block; padding-block: var(--espacio-8); }
.reserva__caja { display: grid; gap: var(--espacio-8); align-items: start; }
.reserva__titulo { margin-top: var(--espacio-8); }

/* Panel de precio. En movil es una barra fija abajo con el total y el boton;
   en escritorio, una tarjeta que acompana el scroll. */
.tarjeta-precio {
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-lg);
  padding: var(--espacio-6);
  box-shadow: var(--sombra-md);
}
.tarjeta-precio__monto {
  display: flex; align-items: baseline; gap: var(--espacio-2);
  margin: 0 0 var(--espacio-4);
}
.tarjeta-precio__monto strong {
  font-size: var(--texto-2xl); line-height: 1; color: var(--color-principal);
}
.tarjeta-precio__monto span { font-size: var(--texto-xs); color: var(--color-texto-suave); }

.tarjeta-precio__cuenta {
  margin: 0 0 var(--espacio-4); padding-top: var(--espacio-4);
  border-top: 1px solid var(--color-borde-suave);
  font-size: var(--texto-xs);
}
.tarjeta-precio__cuenta > div {
  display: flex; justify-content: space-between; gap: var(--espacio-4);
  margin-bottom: var(--espacio-2);
}
.tarjeta-precio__cuenta dt, .tarjeta-precio__cuenta dd { margin: 0; }
.tarjeta-precio__total {
  padding-top: var(--espacio-2);
  border-top: 1px solid var(--color-borde-suave);
  font-size: var(--texto-md); font-weight: 600; color: var(--color-principal);
}
.tarjeta-precio__vacio {
  margin: 0 0 var(--espacio-4); padding-top: var(--espacio-4);
  border-top: 1px solid var(--color-borde-suave);
  font-size: var(--texto-xs); color: var(--color-texto-suave); max-width: none;
}
.tarjeta-precio__boton { width: 100%; }
.tarjeta-precio__nota {
  margin: var(--espacio-3) 0 0; max-width: none;
  font-size: var(--texto-xs); color: var(--color-texto-suave);
}

/* Precio, capacidad y duracion de un vistazo, sin tener que leer el parrafo. */
.datos-rapidos {
  display: flex; flex-wrap: wrap; gap: var(--espacio-6);
  margin: 0 0 var(--espacio-6); padding: 0; list-style: none;
}
.datos-rapidos li { display: flex; flex-direction: column; }
.datos-rapidos strong {
  font-size: var(--texto-xl); line-height: 1.1; color: var(--color-principal);
}
.datos-rapidos span { font-size: var(--texto-xs); color: var(--color-texto-suave); }

/* ── Desplegable ─────────────────────────────────────────────────────────── */
/* <details> nativo. Sin JavaScript: el navegador ya sabe abrirlo y cerrarlo,
   y el texto esta en el HTML aunque este plegado. */
.desplegable {
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-md);
  background: var(--color-fondo);
  margin-top: var(--espacio-6);
}
.desplegable summary {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--espacio-3);
  min-height: var(--tactil);
  padding: var(--espacio-3) var(--espacio-4);
  font-weight: 500; color: var(--color-principal);
  cursor: pointer; list-style: none;
}
.desplegable summary::-webkit-details-marker { display: none; }
/* La flecha se dibuja con un borde girado: un caracter de fuente no siempre
   esta, y un SVG por aqui son bytes de mas. */
.desplegable summary::after {
  content: ''; flex: 0 0 auto;
  width: 8px; height: 8px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 160ms ease;
}
.desplegable[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.desplegable__cuerpo {
  padding: 0 var(--espacio-4) var(--espacio-4);
  border-top: 1px solid var(--color-borde-suave);
  padding-top: var(--espacio-4);
}
.desplegable__cuerpo > :last-child { margin-bottom: 0; }

/* ── Galeria ─────────────────────────────────────────────────────────────── */
.galeria {
  display: grid; gap: var(--espacio-4); margin-top: var(--espacio-6);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.galeria img {
  width: 100%; height: 100%; display: block;
  aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--radio-md);
  box-shadow: var(--sombra-sm);
}

/* ── Pie de la agenda y navegacion de semanas ────────────────────────────── */
.agenda__pie {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--espacio-3) var(--espacio-6);
  margin-top: var(--espacio-8);
}
.agenda__pie .registro__meta { margin: 0; }
.calendario__navegacion {
  display: flex; flex-wrap: wrap; gap: var(--espacio-3);
  margin-top: var(--espacio-6);
}
.calendario__resumen {
  margin: var(--espacio-4) 0 0; max-width: none;
  font-size: var(--texto-xs); color: var(--color-texto-suave);
}
.calendario__resumen span { opacity: .75; }

/* ── Botonera ────────────────────────────────────────────────────────────── */
/* En movil los botones de paquete quedaban pegados: aqui el hueco es del
   contenedor, no un margen suelto en cada uno. */
.botonera {
  display: flex; flex-wrap: wrap; gap: var(--espacio-3);
  margin-top: var(--espacio-6); margin-bottom: 0;
}
.botonera .boton { flex: 1 1 auto; }

/* ── Escritorio: ficha y botonera ────────────────────────────────────────── */
@media (min-width: 900px) {
  .presentacion { padding-block: var(--espacio-12); }
  .presentacion__caja { grid-template-columns: 1fr 1fr; gap: var(--espacio-12); }
  .botonera .boton { flex: 0 0 auto; }
}

/* ── Confirmar al final de la lista ──────────────────────────────────────── */
/* Repite lo del panel donde la gente lo busca: despues de terminar de marcar
   horas. No compite con el panel, lo acompana. */
.confirmar {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--espacio-4) var(--espacio-6);
  margin-top: var(--espacio-6);
  padding: var(--espacio-6);
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-lg);
}
.confirmar__cuenta { flex: 1 1 220px; }
.confirmar__vacio {
  margin: 0; max-width: none;
  font-size: var(--texto-xs); color: var(--color-texto-suave);
}
.confirmar__resumen {
  margin: 0; display: flex; flex-wrap: wrap; align-items: baseline;
  gap: var(--espacio-2) var(--espacio-4);
}
.confirmar__resumen dt { font-size: var(--texto-xs); color: var(--color-texto-suave); }
.confirmar__resumen dd {
  margin: 0; font-size: var(--texto-xl); font-weight: 600;
  color: var(--color-principal); line-height: 1;
}

@media (max-width: 599px) {
  .confirmar { flex-direction: column; align-items: stretch; }
  .confirmar .boton { width: 100%; }
}

/* ── Movil: el panel de precio es una barra fija abajo ───────────────────── */
/* Lo que importa --cuanto va y el boton-- no se va nunca de la pantalla. Es
   fija y no pegajosa porque el panel esta al final del formulario: pegajosa
   solo aparecería al llegar abajo, que es justo cuando ya no hace falta. */
@media (max-width: 899px) {
  .reserva__panel {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  }
  .tarjeta-precio {
    display: flex; align-items: center; gap: var(--espacio-4);
    border-radius: var(--radio-lg) var(--radio-lg) 0 0;
    border-width: 1px 0 0;
    padding: var(--espacio-3) var(--espacio-4);
  }
  .tarjeta-precio__monto { flex-direction: column; gap: 0; margin: 0; }
  .tarjeta-precio__monto strong { font-size: var(--texto-lg); }
  .tarjeta-precio__cuenta {
    margin: 0; padding: 0; border: 0; flex: 1 1 auto;
  }
  .tarjeta-precio__cuenta > div { margin: 0; }
  /* En la barra solo cabe el total; el desglose se queda para escritorio. */
  .tarjeta-precio__cuenta > div:not(.tarjeta-precio__total) { display: none; }
  .tarjeta-precio__total { padding: 0; border: 0; }
  .tarjeta-precio__vacio { display: none; }
  .tarjeta-precio__boton { width: auto; flex: 0 0 auto; padding-inline: var(--espacio-6); }
  .tarjeta-precio__nota { display: none; }

  /* Hueco para que la barra no tape el final del calendario. */
  .reserva { padding-bottom: 96px; }

  /* Y el boton de WhatsApp sube para no quedar encima del de reservar. */
  .con-barra-reserva .wa { bottom: 92px; }
}

/* ── Escritorio: mosaico en rejilla y panel que acompana el scroll ───────── */
@media (min-width: 900px) {
  .mosaico__rejilla {
    display: grid; overflow: visible;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: var(--espacio-2);
    aspect-ratio: 2 / 1;
    margin-inline: 0; padding-inline: 0;
  }
  .mosaico__rejilla picture { flex: none; min-width: 0; min-height: 0; }
  .mosaico__rejilla picture:first-child { grid-column: span 2; grid-row: span 2; }
  .mosaico__rejilla img { aspect-ratio: auto; height: 100%; border-radius: 0; }

  /* Las esquinas se redondean por fuera, no una a una: el mosaico se lee
     como una sola pieza. */
  .mosaico__rejilla picture:first-child img {
    border-radius: var(--radio-lg) 0 0 var(--radio-lg);
  }
  .mosaico__rejilla picture:nth-child(3) img { border-top-right-radius: var(--radio-lg); }
  .mosaico__rejilla picture:nth-child(5) img { border-bottom-right-radius: var(--radio-lg); }

  .reserva__caja { grid-template-columns: minmax(0, 1fr) 360px; gap: var(--espacio-12); }

  .reserva__panel { position: sticky; top: var(--espacio-6); }
}

/* ── Pantallas de acceso: entrar, registro, recuperar ────────────────────── */
/* Una tarjeta centrada y estrecha, no un formulario suelto ocupando toda la
   pagina. Es lo que hace cualquier acceso cuidado, y por una razon: cuando
   solo hay que hacer una cosa, el ancho de lectura corto y el encuadre
   centrado dicen «esto es todo lo que tienes que rellenar».
   Ni logo ni colores prestados: la estructura es comun, la marca es la
   nuestra. */
.acceso {
  display: flex; align-items: flex-start; justify-content: center;
  padding-block: var(--espacio-12);
}
.acceso__tarjeta {
  width: 100%; max-width: 27rem;          /* 432 px */
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra-md);
  padding: var(--espacio-8);
}
.acceso__marca {
  display: flex; justify-content: center;
  margin-bottom: var(--espacio-6);
}
.acceso__marca img { width: 130px; height: 50px; }

.acceso__titulo {
  margin-bottom: var(--espacio-2);
  font-size: var(--texto-xl); text-align: center;
}
.acceso__entrada {
  margin-bottom: var(--espacio-6); max-width: none;
  font-size: var(--texto-xs); color: var(--color-texto-suave); text-align: center;
}

.acceso .boton { width: 100%; }

/* Separador con la palabra en medio. Dos lineas que crecen y el texto fijo:
   sin anchos magicos ni pseudoelementos que se descuadren al traducir. */
.acceso__separador {
  display: flex; align-items: center; gap: var(--espacio-4);
  margin-block: var(--espacio-6);
  font-size: var(--texto-xs); color: var(--color-texto-suave);
}
.acceso__separador::before, .acceso__separador::after {
  content: ''; flex: 1 1 auto; height: 1px; background: var(--color-borde);
}

.acceso__pie {
  margin: 0; max-width: none;
  font-size: var(--texto-xs); color: var(--color-texto-suave); text-align: center;
}
.acceso__pie + .acceso__pie { margin-top: var(--espacio-2); }

/* La nota legal del registro: pequena, gris y al final, donde estorba menos
   sin dejar de estar antes del boton. */
.acceso__legal {
  margin: var(--espacio-4) 0 0; max-width: none;
  font-size: 13px; line-height: 1.5; color: var(--color-texto-suave);
}

@media (max-width: 599px) {
  .acceso { padding-block: var(--espacio-8); }
  .acceso__tarjeta { padding: var(--espacio-6); border-radius: var(--radio-md); }
}

/* ── Aviso de cookies ────────────────────────────────────────────────────── */
/* No tapa el contenido ni persigue por la pantalla: se queda abajo y las dos
   opciones tienen el mismo peso visual. Un "rechazar" escondido en gris claro
   es un rechazo decorativo. */
.cookies {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  padding: var(--espacio-3);
}
.cookies__caja {
  max-width: 900px; margin-inline: auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--espacio-4);
  background: var(--color-superficie);
  border: 1px solid var(--color-borde); border-radius: var(--radio-lg);
  padding: var(--espacio-4) var(--espacio-6);
  box-shadow: var(--sombra-md);
}
.cookies__texto { margin: 0; flex: 1 1 260px; font-size: var(--texto-xs); max-width: none; }
.cookies__acciones { display: flex; gap: var(--espacio-3); flex: 0 0 auto; }
.cookies__acciones .boton { font-size: var(--texto-xs); padding-inline: var(--espacio-4); }