/* Recepta72 · plantilla consultorio v3 · estructura de conversión, mobile-first, BEM.
   Aquí vive SOLO el layout. La voz de cada estilo está en estilo-<estilo>.css y los colores en tema.css (generado). */

:root {
  --fuente-titulo: Georgia, "Times New Roman", serif;
  --fuente-texto: system-ui, -apple-system, "Segoe UI", sans-serif;
  --lado: 20px;
  --seccion: 52px;
  --radio: 16px;
  --radio-boton: 999px;
  --ancho: 1080px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.pagina {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--fuente-texto);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
:where(.pagina) img, :where(.pagina) svg { display: block; max-width: 100%; }
:where(.pagina) img { height: auto; }
:where(.pagina) p, :where(.pagina) h1, :where(.pagina) h2, :where(.pagina) h3, :where(.pagina) ul,
:where(.pagina) ol, :where(.pagina) dl, :where(.pagina) dd, :where(.pagina) blockquote { margin: 0; padding: 0; }
:where(.pagina) ul, :where(.pagina) ol { list-style: none; }
:where(.pagina) p { text-wrap: pretty; }
:where(.pagina) a { color: inherit; }

.solo-lectores { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.saltar {
  position: absolute; left: 12px; top: -80px; z-index: 60; padding: 12px 18px; border-radius: 999px;
  background: var(--blanco); color: var(--tinta); font-weight: 600; text-decoration: none;
}
.saltar:focus { top: 12px; }
/* Rótulo de las muestras de demostración: el consultorio no existe y así se dice. Colores fijos, no del tema. */
.aviso-muestra {
  padding: 8px var(--lado); background: #fde68a; color: #1f2937; font-family: var(--fuente-texto);
  font-size: 0.8125rem; line-height: 1.45; font-weight: 600; text-align: center;
}
.contenedor { width: 100%; max-width: var(--ancho); margin-inline: auto; padding-inline: var(--lado); }
:focus-visible { outline: 3px solid var(--marca); outline-offset: 3px; border-radius: 4px; }

/* Texto común */
.etiqueta {
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.4;
  color: var(--marca); margin-bottom: 10px;
}
.titulo { font-family: var(--fuente-titulo); font-size: 1.75rem; line-height: 1.18; margin: 0 0 24px; text-wrap: balance; }
.seccion { padding-block: var(--seccion); }
.seccion--suave { background: var(--suave); }
.enlace { color: var(--marca); font-weight: 600; text-underline-offset: 4px; }

/* Botones. El principal es SIEMPRE el relleno de mayor contraste de la pantalla. */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px;
  padding: 0 22px; border-radius: var(--radio-boton); font-family: var(--fuente-texto); font-weight: 700;
  font-size: 1rem; line-height: 1.2; text-decoration: none; cursor: pointer; touch-action: manipulation;
  background: var(--boton); color: var(--boton-texto); border: 2px solid var(--boton);
  transition: background-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}
.boton:hover { background: var(--boton-hover); border-color: var(--boton-hover); }
.boton:active { transform: translateY(1px); }
.boton__icono { flex: none; }
.boton--chico { min-height: 44px; padding: 0 16px; font-size: 0.9375rem; }
.boton--principal { display: flex; width: 100%; min-height: 60px; font-size: 1.125rem; }
.boton--sec { background: var(--blanco); color: var(--boton); }
.boton--sec:hover { background: var(--boton-tinte); color: var(--boton-hover); }
.boton--flotante {
  position: fixed; z-index: 50; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  min-height: 56px; padding: 0 22px; box-shadow: 0 0 0 3px #fff, 0 10px 26px rgba(0, 0, 0, 0.3);
}

/* 1. Barra mínima */
.barra { background: var(--fondo); border-bottom: 1px solid var(--linea); }
.barra__fila { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; }
.barra__marca { display: flex; align-items: center; min-width: 0; text-decoration: none; }
.barra__nombre {
  font-family: var(--fuente-titulo); font-weight: 600; font-size: 1.0625rem; line-height: 1.2;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.barra__logo { height: 40px; width: auto; max-width: 180px; object-fit: contain; }

/* 2-5. Primer pantallazo */
.inicio { position: relative; overflow: hidden; padding-block: 22px 32px; }
.inicio__rejilla { position: relative; z-index: 1; display: grid; gap: 24px; }
.inicio__titulo {
  font-family: var(--fuente-titulo); font-size: clamp(2rem, 9vw, 2.75rem); line-height: 1.08; margin: 0 0 12px;
  text-wrap: balance;
}
.inicio__acento { font-style: normal; color: var(--marca); }
.inicio__sub { color: var(--tinta-suave); font-size: 1.0625rem; line-height: 1.5; margin-bottom: 16px; }
.prueba {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px; padding: 8px 16px;
  background: var(--blanco); border: 1px solid var(--linea); border-radius: 999px; font-size: 0.9375rem;
}
.prueba__estrella, .prueba__check, .resena__estrella { color: var(--estrella); }
.prueba__check { color: var(--boton); }
.prueba__nota { font-weight: 800; }
.inicio__oferta {
  margin-top: 14px; padding: 10px 14px; text-align: center; line-height: 1.35; background: var(--boton-tinte);
  border-radius: calc(var(--radio) - 8px);
}
.inicio__oferta-texto { display: block; color: var(--boton); font-size: 1.0625rem; }
.inicio__oferta-detalle { display: block; color: var(--tinta-suave); font-size: 0.875rem; }
.inicio + .seccion { padding-top: 36px; }
.inicio__imagen { position: relative; }
.inicio__foto { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radio); }

/* 6. Tratamientos */
.trat__lista { display: grid; gap: 12px; }
.trat__item {
  display: flex; flex-direction: column; align-items: flex-start; padding: 18px; background: var(--blanco);
  border: 1px solid var(--linea); border-radius: var(--radio);
}
.trat__nombre { font-family: var(--fuente-titulo); font-size: 1.25rem; line-height: 1.25; margin-bottom: 6px; }
.trat__texto { color: var(--tinta-suave); font-size: 1rem; line-height: 1.5; margin-bottom: 14px; }
.trat__item .boton { margin-top: auto; }

/* 7. Por qué aquí */
.razones__lista { display: grid; gap: 14px; }
.razones__item { display: flex; gap: 14px; align-items: flex-start; }
.razones__check {
  flex: none; width: 32px; height: 32px; padding: 7px; border-radius: 50%; background: var(--marca-tinte);
  color: var(--marca);
}
.razones__titulo { font-weight: 700; line-height: 1.3; }
.razones__texto { color: var(--tinta-suave); font-size: 1rem; line-height: 1.5; }
.razones__fotos { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; margin-top: 24px; }
.razones__imagen { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: calc(var(--radio) - 4px); }

/* 8. Tres pasos */
.pasos__lista { display: grid; gap: 18px; margin-bottom: 28px; }
.pasos__item { display: flex; gap: 16px; align-items: flex-start; }
.pasos__numero {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--marca-tinte); color: var(--marca); font-family: var(--fuente-titulo); font-weight: 800; font-size: 1.125rem;
}
.pasos__titulo { font-weight: 700; line-height: 1.3; }
.pasos__texto { color: var(--tinta-suave); font-size: 1rem; line-height: 1.5; }

/* 9. Precios */
.precios__lista { display: grid; gap: 0; margin-bottom: 12px; }
.precios__fila {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 14px 0;
  border-bottom: 1px solid var(--linea);
}
.precios__nombre { font-weight: 600; }
.precios__monto { margin: 0; font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }
.precios__nota { color: var(--tinta-suave); font-size: 0.875rem; margin-bottom: 8px; }
.precios__rotulo { margin: 20px 0 10px; font-weight: 700; font-size: 0.9375rem; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips__item {
  padding: 8px 16px; background: var(--blanco); border: 1px solid var(--linea); border-radius: 999px;
  font-weight: 600; font-size: 0.9375rem; line-height: 1.2;
}

/* 10. Reseñas */
.resenas__resumen { display: flex; align-items: center; gap: 6px; margin: -8px 0 20px; color: var(--tinta-suave); }
.resenas__nota { color: var(--tinta); }
.resenas__lista { display: grid; gap: 12px; }
.resena { padding: 18px; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); }
.resena__estrellas { display: flex; gap: 2px; margin-bottom: 8px; }
.resena__estrella { width: 18px; height: 18px; }
.resena__texto { font-size: 1.0625rem; line-height: 1.55; margin-bottom: 8px; }
.resena__autor { color: var(--tinta-suave); font-size: 0.9375rem; font-weight: 600; }
.resenas__mas { margin-top: 18px; }

/* 11. Quién te atiende */
.profesional__tarjeta { display: flex; gap: 18px; align-items: center; }
.profesional__foto, .profesional__monograma {
  flex: none; width: 92px; height: 92px; border-radius: 50%; object-fit: cover; background: var(--marca-tinte);
}
.profesional__monograma { display: grid; place-items: center; color: var(--marca); font-family: var(--fuente-titulo); font-size: 1.75rem; font-weight: 700; }
.profesional__nombre { font-family: var(--fuente-titulo); font-size: 1.375rem; line-height: 1.2; }
.profesional__rol { color: var(--tinta-suave); }
.profesional__cred { font-size: 0.9375rem; font-weight: 600; margin-top: 4px; }

/* 12. Preguntas */
.faq__lista { display: grid; gap: 10px; }
.faq__item { background: var(--blanco); border: 1px solid var(--linea); border-radius: calc(var(--radio) - 4px); }
.faq__pregunta {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 56px; padding: 12px 18px;
  font-weight: 700; line-height: 1.35; cursor: pointer; list-style: none;
}
.faq__pregunta::-webkit-details-marker { display: none; }
.faq__pregunta::after { content: "+"; flex: none; font-size: 1.5rem; line-height: 1; color: var(--marca); transition: transform 200ms ease; }
.faq__item[open] .faq__pregunta::after { transform: rotate(45deg); }
.faq__respuesta { padding: 0 18px 18px; color: var(--tinta-suave); line-height: 1.55; }

/* 13. Cierre */
.cierre { background: var(--suave); }
.cierre__titulo { font-size: 1.875rem; margin-bottom: 20px; }
.cierre__agenda { margin-top: 14px; text-align: center; }
.sede { display: grid; gap: 0; margin: 28px 0 20px; }
.sede__fila { display: grid; gap: 2px; padding: 12px 0; border-top: 1px solid var(--linea); }
.sede__rotulo { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tinta-suave); }
.sede__dato { margin: 0; font-weight: 600; }
.cierre__acciones { display: flex; flex-wrap: wrap; gap: 10px; }
.cierre__acciones .boton { flex: 1 1 100%; white-space: nowrap; }
@media (min-width: 440px) { .cierre__acciones .boton { flex-basis: 0; } }

/* 14. Pie */
.pie { padding-block: 28px 112px; color: var(--tinta-suave); font-size: 0.875rem; line-height: 1.5; }
.pie__linea + .pie__linea { margin-top: 4px; }

@media (min-width: 760px) {
  :root { --lado: 32px; --seccion: 80px; }
  .titulo { font-size: 2.25rem; }
  .inicio { padding-block: 56px 72px; }
  .inicio__rejilla { grid-template-columns: 1.1fr 0.9fr; align-items: center; gap: 48px; }
  .inicio__titulo { font-size: clamp(2.75rem, 5vw, 4rem); }
  .inicio__sub { font-size: 1.1875rem; max-width: 34em; }
  .boton--principal { display: inline-flex; width: auto; min-width: 340px; }
  .inicio__oferta { display: inline-block; text-align: left; }
  .trat__lista { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .razones__lista { grid-template-columns: repeat(3, 1fr); gap: 28px; }
  .razones__item { flex-direction: column; }
  .pasos__lista { grid-template-columns: repeat(3, 1fr); gap: 32px; }
  .pasos__item { flex-direction: column; }
  .precios__lista, .faq__lista { max-width: 760px; }
  .resenas__lista { grid-template-columns: repeat(3, 1fr); }
  .cierre__caja > * { max-width: 760px; }
  .cierre__caja .boton--principal { min-width: 360px; }
  .barra__fila { min-height: 72px; }
  .boton--flotante { right: 28px; bottom: 28px; }
}
@media (min-width: 1100px) {
  .trat__lista { grid-template-columns: repeat(3, 1fr); }
  .cierre .contenedor { display: block; }
}
@media (prefers-reduced-motion: reduce) { .boton, .faq__pregunta::after { transition: none; } }