/* estilos.css — colores, letras y acomodo de la tpd.
   Los colores de cada cliente vienen de datos.js (tema) y reemplazan estos. */

:root {
  --c-fondo: #F6F8F7;     /* Esmalte */
  --c-principal: #1F4D45; /* Pino */
  --c-suave: #A8DCCB;     /* Menta */
  --c-acento: #E9A23B;    /* Ámbar */
  --c-texto: #17201E;     /* Tinta */
  --c-superficie: #FFFFFF;
  --c-linea: #D5DFDB;

  --fuente: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ancho: 1100px;
  --alto-encabezado: 72px; /* app.js lo ajusta al alto real del menú */
}

*, *::before, *::after { box-sizing: border-box; }

[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  padding-top: var(--alto-encabezado);
  background: var(--c-fondo);
  color: var(--c-texto);
  font-family: var(--fuente);
  font-size: 1.0625rem;
  line-height: 1.55;
}

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

:focus-visible {
  outline: 3px solid var(--c-acento);
  outline-offset: 2px;
}

.saltar {
  position: absolute;
  left: -9999px;
}
.saltar:focus {
  left: 1rem;
  top: 1rem;
  z-index: 100;
  padding: .5rem 1rem;
  background: var(--c-superficie);
  color: var(--c-principal);
}

.oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ── Menú superior fijo ───────────────────────────── */

.encabezado {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  background: var(--c-fondo);
  border-bottom: 1px solid var(--c-linea);
}

.encabezado__interior {
  display: grid;
  /* foto ≈16% del ancho, con tope de 88 px en pantallas grandes */
  grid-template-columns: clamp(56px, 16%, 88px) minmax(0, 1fr);
  max-width: var(--ancho);
  margin: 0 auto;
}

.encabezado__foto {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  background: var(--c-principal);
}

.encabezado__derecha {
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* sin esto el menú estira el encabezado */
  grid-template-rows: 1fr auto;
  min-width: 0;
}

.encabezado__fila {
  display: flex;
  align-items: center;
  gap: .5rem;
  min-width: 0;
  padding-right: .5rem;
}

.encabezado__nombre {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0 .25rem 0 .75rem;
  overflow: hidden;
  color: var(--c-principal);
  font-size: clamp(1.05rem, .9rem + 1vw, 1.5rem);
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.idioma {
  flex: 0 0 auto;
  padding: .1rem .35rem;
  border: 1.5px solid var(--c-linea);
  border-radius: 999px;
  background: var(--c-superficie);
  color: var(--c-principal);
  font: inherit;
  font-size: .85rem;
  font-weight: 700;
  cursor: pointer;
}

.menu {
  position: relative;
  background: var(--c-principal);
}

.menu__lista {
  position: relative; /* para medir la posición de cada opción */
  display: flex;
  gap: .125rem;
  margin: 0;
  padding: .25rem;
  overflow-x: auto;
  list-style: none;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.menu__lista::-webkit-scrollbar { display: none; }

.menu__lista li { flex: 0 0 auto; }

.menu__lista a {
  display: flex;
  align-items: center;
  min-height: 2rem;
  padding: .25rem .75rem;
  border-radius: 999px;
  color: #FFFFFF;
  font-size: .95rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.menu__lista a[aria-current="true"] {
  background: var(--c-suave);
  color: var(--c-principal);
}

.menu__lista svg {
  width: 1.15rem;
  height: 1.15rem;
  fill: currentColor;
}

.menu__flecha {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  padding: 0;
  border: 0;
  background: rgba(0, 0, 0, .35);
  color: #FFFFFF;
  cursor: pointer;
}
.menu__flecha[hidden] { display: none; }
.menu__flecha--izq { left: 0; }
.menu__flecha--der { right: 0; }
.menu__flecha:active { color: var(--c-acento); }
.menu__flecha svg {
  width: 26px;
  height: 26px;
  fill: currentColor;
}

/* ── Secciones ────────────────────────────────────── */

.seccion {
  --fondo-seccion: var(--c-fondo);
  scroll-margin-top: var(--alto-encabezado);
  padding: 3.5rem 1rem;
  background: var(--fondo-seccion);
}
.seccion:nth-child(even) { --fondo-seccion: var(--c-superficie); }

.seccion__interior {
  max-width: var(--ancho);
  margin: 0 auto;
}

.seccion__titulo {
  margin: 0 0 .75rem;
  color: var(--c-principal);
  font-size: clamp(1.6rem, 1.2rem + 2vw, 2.4rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.01em;
}


/* ── Inicio ───────────────────────────────────────── */

.inicio__interior {
  display: grid;
  gap: 2rem;
}

.inicio__foto {
  width: 100%;
  max-width: 420px;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 20px;
}

.inicio__nombre {
  margin: 0;
  color: var(--c-principal);
  font-size: clamp(2.2rem, 1.5rem + 4vw, 3.6rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.02em;
}

.inicio__especialidad {
  margin: .5rem 0 0;
  font-size: 1.3rem;
  font-weight: 700;
}

.inicio__cedula {
  margin: .25rem 0 0;
  color: color-mix(in srgb, var(--c-texto) 70%, transparent);
  font-size: .95rem;
}

/* "Abierto ahora · cierra a las 8:00 p.m." */
.estado {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin: 1rem 0 0;
  padding: .3rem .8rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--c-texto) 8%, transparent);
  font-size: .95rem;
  font-weight: 700;
}
.estado::before {
  content: "";
  width: .6rem;
  height: .6rem;
  border-radius: 50%;
  background: #B3261E;
}
.estado--abierto { background: color-mix(in srgb, var(--c-suave) 45%, transparent); }
.estado--abierto::before { background: #1E8E3E; }

.horario .estado { margin: 0 0 .5rem; }

.botones {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.75rem;
}

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 48px;
  padding: .75rem 1.25rem;
  border: 2px solid var(--c-principal);
  border-radius: 12px;
  font-weight: 700;
  text-decoration: none;
}
.boton svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: currentColor;
}
.boton--principal {
  background: var(--c-principal);
  color: #FFFFFF;
}
.boton--secundario {
  background: transparent;
  color: var(--c-principal);
}
.boton--acento {
  border-color: var(--c-acento);
  background: var(--c-acento);
  color: var(--c-texto);
}
.boton--enlace {
  min-height: 0;
  padding: .25rem 0;
  border: 0;
  color: var(--c-principal);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.seccion__intro {
  max-width: 60ch;
  margin: 0 0 2rem;
}

/* ── Servicios: lista de precios ──────────────────── */

.precios {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 2px solid var(--c-principal);
}

.precios__fila {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 1rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--c-linea);
}

.precios__nombre {
  margin: 0;
  font-size: 1.2rem;
  line-height: 1.3;
}

.precios__precio {
  margin: 0;
  color: var(--c-principal);
  font-size: 1.2rem;
  font-weight: 800;
  white-space: nowrap;
}

.precios__desde {
  font-size: .85rem;
  font-weight: 400;
}

.precios__descripcion {
  grid-column: 1 / -1;
  max-width: 60ch;
  margin: .25rem 0 .5rem;
  color: color-mix(in srgb, var(--c-texto) 80%, transparent);
}

.precios__agendar {
  grid-column: 1 / -1;
  justify-self: start;
  color: var(--c-principal);
  font-weight: 700;
  text-underline-offset: 3px;
}

/* ── Promoción ────────────────────────────────────── */

.promo {
  max-width: 640px;
  padding: 1.75rem 1.5rem;
  border-radius: 20px;
  background: var(--c-principal);
  color: #FFFFFF;
}

.promo__titulo {
  margin: 0;
  font-size: 1.5rem;
  line-height: 1.2;
}

.promo__descripcion { margin: .5rem 0 0; }

.promo__precios {
  display: flex;
  align-items: baseline;
  gap: .75rem;
  margin: 1.25rem 0 0;
}

.promo__antes {
  font-size: 1.1rem;
  opacity: .75;
}

.promo__precio {
  color: var(--c-acento);
  font-size: 2.4rem;
  font-weight: 800;
  line-height: 1;
}

.promo__vigencia {
  margin: .5rem 0 0;
  font-size: .9rem;
  opacity: .85;
}

.promo .boton { margin-top: 1.5rem; }

/* ── Resultados: comparador antes / después ───────── */

.resultados {
  display: grid;
  gap: 2rem;
}

.comparador { margin: 0; }

.comparador__marco {
  --pos: 50%;
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  aspect-ratio: 4 / 3;
  background: var(--c-linea);
}
.comparador__marco:has(.comparador__control:focus-visible) {
  outline: 3px solid var(--c-acento);
  outline-offset: 2px;
}

.comparador__marco img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.comparador__antes { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }

.comparador__etiqueta {
  position: absolute;
  top: .75rem;
  padding: .15rem .6rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .9);
  color: var(--c-texto);
  font-size: .85rem;
  font-weight: 700;
}
.comparador__etiqueta--antes { left: .75rem; }
.comparador__etiqueta--despues { right: .75rem; }

.comparador__linea {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  width: 3px;
  background: #FFFFFF;
  transform: translateX(-50%);
  pointer-events: none;
}
.comparador__linea svg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  padding: 6px;
  border-radius: 50%;
  background: #FFFFFF;
  fill: var(--c-principal);
  transform: translate(-50%, -50%);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}

/* El control real es invisible y cubre toda la foto: se arrastra en cualquier parte. */
.comparador__control {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
}

.comparador figcaption {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .25rem 1rem;
  margin-top: .6rem;
  font-weight: 700;
}

.comparador__aviso {
  color: color-mix(in srgb, var(--c-texto) 65%, transparent);
  font-size: .85rem;
  font-weight: 400;
}

/* ── Citas: formulario y tarjeta de cita ──────────── */

.cita {
  display: grid;
  gap: 2rem;
}

.cita__campos {
  display: grid;
  gap: 1.5rem;
  min-width: 0;
}

.cita__grupo {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.cita__grupo legend,
.cita__campo label {
  display: block;
  margin-bottom: .4rem;
  padding: 0;
  font-weight: 700;
}

.cita__grupo > .cita__ayuda { margin: -.25rem 0 .6rem; }

.cita__opcion {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-height: 52px;
  margin-bottom: .5rem;
  padding: .6rem .9rem;
  border: 1.5px solid var(--c-linea);
  border-radius: 12px;
  background: var(--c-superficie);
  cursor: pointer;
}
.cita__opcion:has(input:checked) {
  border-color: var(--c-principal);
  background: color-mix(in srgb, var(--c-suave) 30%, var(--c-superficie));
}
.cita__opcion input {
  flex: 0 0 auto;
  width: 1.3rem;
  height: 1.3rem;
  margin: 0;
  accent-color: var(--c-principal);
}

.cita__opcion-nombre { flex: 1 1 auto; }

.cita__opcion-precio {
  color: var(--c-principal);
  font-weight: 700;
  white-space: nowrap;
}

.cita__grupo--dos .cita__opcion { margin-bottom: 0; }
.cita__grupo--dos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .5rem;
}

.cita__campo input,
.cita__campo select,
.cita__campo textarea {
  width: 100%;
  min-height: 50px;
  padding: .7rem .9rem;
  border: 1.5px solid var(--c-linea);
  border-radius: 12px;
  background: var(--c-superficie);
  color: var(--c-texto);
  font: inherit;
}
.cita__campo textarea { resize: vertical; }
.cita__campo select:disabled { color: color-mix(in srgb, var(--c-texto) 55%, transparent); }
.cita__campo [aria-invalid="true"] { border-color: #B3261E; }

.cita__pareja {
  display: grid;
  gap: 1.5rem;
}

.cita__ayuda {
  margin: .35rem 0 0;
  color: color-mix(in srgb, var(--c-texto) 70%, transparent);
  font-size: .9rem;
}

.cita__error {
  margin: .35rem 0 0;
  color: #B3261E;
  font-size: .95rem;
  font-weight: 700;
}
.cita__error:empty { display: none; }

.cita__resumen .boton {
  width: 100%;
  margin-top: 1.25rem;
}
.cita__resumen > .cita__ayuda { text-align: center; }

/* La tarjeta de cita: como la tarjetita que te da el consultorio con tu próxima cita. */
.tarjeta-cita {
  position: relative;
  border: 1.5px solid var(--c-principal);
  border-radius: 16px;
  background: var(--c-superficie);
  box-shadow: 0 14px 30px -18px color-mix(in srgb, var(--c-principal) 60%, transparent);
}

.tarjeta-cita__cabeza {
  position: relative;
  padding: 1rem 1.25rem;
  border-radius: 14px 14px 0 0;
  border-bottom: 2px dashed color-mix(in srgb, var(--c-principal) 45%, transparent);
  background: var(--c-principal);
  color: #FFFFFF;
}

/* Muescas a los lados, como un boleto que se desprende */
.tarjeta-cita__cabeza::before,
.tarjeta-cita__cabeza::after {
  content: "";
  position: absolute;
  bottom: -11px;
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--c-principal);
  border-radius: 50%;
  background: var(--fondo-seccion);
}
.tarjeta-cita__cabeza::before { left: -12px; clip-path: inset(0 0 0 50%); }
.tarjeta-cita__cabeza::after { right: -12px; clip-path: inset(0 50% 0 0); }

.tarjeta-cita__titulo {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 800;
}

.tarjeta-cita__con {
  margin: .1rem 0 0;
  font-size: .95rem;
  opacity: .9;
}

.tarjeta-cita__cuerpo {
  margin: 0;
  padding: .5rem 1.25rem 0;
}

.tarjeta-cita__fila {
  display: grid;
  grid-template-columns: 6rem minmax(0, 1fr);
  gap: .75rem;
  padding: .7rem 0;
  border-bottom: 1.5px dotted var(--c-linea);
}
.tarjeta-cita__fila dt {
  color: color-mix(in srgb, var(--c-texto) 65%, transparent);
  font-size: .9rem;
}
.tarjeta-cita__fila dd {
  margin: 0;
  color: var(--c-principal);
  font-weight: 700;
  overflow-wrap: anywhere;
}

.tarjeta-cita__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin: .5rem 1.25rem 0;
  padding: .9rem 1rem;
  border-radius: 12px;
  background: color-mix(in srgb, var(--c-acento) 18%, var(--c-superficie));
  font-weight: 700;
}

.tarjeta-cita__monto {
  font-size: 1.5rem;
  font-weight: 800;
  white-space: nowrap;
}

.tarjeta-cita__nota {
  margin: .5rem 1.25rem 1.1rem;
  color: color-mix(in srgb, var(--c-texto) 65%, transparent);
  font-size: .85rem;
}

/* ── Sobre mí ─────────────────────────────────────── */

.sobre {
  display: grid;
  gap: 2rem;
}

.sobre__texto {
  max-width: 62ch;
  margin: 0 0 1rem;
}

.sobre__formacion h3 {
  margin: 0 0 .75rem;
  font-size: 1.1rem;
}

.sobre__formacion ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sobre__formacion li {
  padding: .6rem 0 .6rem 1rem;
  border-left: 3px solid var(--c-suave);
}

/* ── Testimonios ──────────────────────────────────── */

.testimonios {
  display: grid;
  gap: 2rem;
}

.testimonio {
  margin: 0;
  padding-left: 1.25rem;
  border-left: 4px solid var(--c-suave);
}

.testimonio__estrellas {
  margin: 0;
  color: var(--c-acento);
  font-size: 1.15rem;
  letter-spacing: .1em;
}

.testimonio__texto {
  margin: .4rem 0;
  font-size: 1.1rem;
}
.testimonio__texto p { margin: 0; }

.testimonio__nombre { font-weight: 700; }

/* ── Preguntas frecuentes ─────────────────────────── */

.faq {
  max-width: 760px;
  border-top: 1px solid var(--c-linea);
}

.faq__item { border-bottom: 1px solid var(--c-linea); }

.faq__item summary {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 0;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+";
  color: var(--c-principal);
  font-size: 1.4rem;
  line-height: 1;
}
.faq__item[open] summary::after { content: "−"; }

.faq__item p {
  max-width: 62ch;
  margin: 0 0 1.1rem;
}

/* ── Ubicación y horario ──────────────────────────── */

.ubicacion {
  display: grid;
  gap: 2rem;
}

.ubicacion__direccion { font-style: normal; }
.ubicacion__direccion p { margin: 0; }
.ubicacion__direccion p:first-child {
  font-size: 1.15rem;
  font-weight: 700;
}
.ubicacion__referencias {
  color: color-mix(in srgb, var(--c-texto) 75%, transparent);
}

.horario { margin-top: 2rem; }
.horario h3 {
  margin: 0 0 .5rem;
  font-size: 1.1rem;
}
.horario dl { margin: 0; }
.horario__fila {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .25rem 1rem;
  padding: .6rem 0;
  border-bottom: 1px solid var(--c-linea);
}
.horario dt { font-weight: 700; }
.horario dd { margin: 0; }

.mapa {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 280px;
  overflow: hidden;
  border-radius: 20px;
  background:
    repeating-linear-gradient(0deg, transparent 0 38px, rgba(255, 255, 255, .5) 38px 40px),
    repeating-linear-gradient(90deg, transparent 0 38px, rgba(255, 255, 255, .5) 38px 40px),
    var(--c-suave);
}
.mapa .boton { background: var(--c-fondo); }

.mapa__iframe {
  width: 100%;
  height: 100%;
  min-height: 280px;
  border: 0;
}

/* ── Compartir ────────────────────────────────────── */

.compartir {
  display: grid;
  gap: 2rem;
  align-items: center;
}

.compartir__aviso {
  min-height: 1.5em;
  margin: .75rem 0 0;
  color: var(--c-principal);
  font-weight: 700;
}

.compartir__qr {
  justify-self: start;
  margin: 0;
  text-align: center;
}
.compartir__qr img {
  width: 200px;
  padding: 12px;
  border: 1px solid var(--c-linea);
  border-radius: 16px;
  background: #FFFFFF;
}
.compartir__qr figcaption {
  max-width: 220px;
  margin: .75rem 0 .25rem;
  font-size: .95rem;
}

/* ── Pie ──────────────────────────────────────────── */

.pie {
  padding: 2rem 1rem;
  background: var(--c-principal);
  color: #FFFFFF;
  text-align: center;
  font-size: .95rem;
}
.pie p { margin: 0; }

@media (min-width: 768px) {
  .seccion { padding: 5rem 2rem; }

  .inicio__interior {
    grid-template-columns: 1.1fr .9fr;
    align-items: center;
  }
  .inicio__foto { justify-self: end; }

  .resultados { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cita__pareja { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .testimonios { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
  .compartir { grid-template-columns: 1fr auto; }
}

@media (min-width: 960px) {
  .precios {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 3rem;
  }
  .sobre { grid-template-columns: 1.3fr .7fr; align-items: start; }
  .sobre__formacion { margin-top: 3.5rem; }
  .ubicacion { grid-template-columns: 1fr 1fr; align-items: stretch; }

  /* En computadora la tarjeta de cita acompaña mientras se llena el formulario */
  .cita {
    grid-template-columns: minmax(0, 1fr) 380px;
    align-items: start;
    column-gap: 3rem;
  }
  .cita__resumen {
    position: sticky;
    top: calc(var(--alto-encabezado) + 1.5rem);
  }
}