/* ============================================================
   NATUREFIT LAS REJAS — hoja de estilos del sitio

   Los colores, tipografías, espaciados y radios NO se escriben
   a mano acá: todos vienen de tokens.css (copia de
   wiki/proyectos/naturefit-las-rejas/marca/tokens.css).
   Si un valor de marca cambia, se actualiza allá y se vuelve a
   copiar el archivo — este no se toca.
   ============================================================ */

:root {
  --max-width: 1120px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--nf-fuente-cuerpo);
  font-size: var(--nf-txt-cuerpo);
  font-weight: var(--nf-peso-cuerpo);
  line-height: var(--nf-lh-cuerpo);
  color: var(--nf-texto);
  background: var(--nf-fondo);
}

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

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--nf-esp-5);
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--nf-boton-fondo);
  color: var(--nf-boton-texto);
  padding: var(--nf-esp-3) var(--nf-esp-4);
  z-index: 200;
}
.skip-link:focus {
  left: 0;
}

/* ---------- Tipografía ---------- */
h1,
h2,
h3,
h4 {
  font-family: var(--nf-fuente-titulo);
  font-weight: var(--nf-peso-titulo);
  color: var(--nf-titular);
  letter-spacing: var(--nf-track-titular);
  margin: 0 0 0.5em;
}
h1 {
  font-size: clamp(30px, 5vw, var(--nf-txt-display));
  line-height: var(--nf-lh-display);
}
h2 {
  font-size: clamp(24px, 3.4vw, var(--nf-txt-h1));
  line-height: var(--nf-lh-h1);
}
h3 {
  font-size: var(--nf-txt-h3);
  line-height: var(--nf-lh-h3);
}
h4 {
  font-size: var(--nf-txt-chico);
  line-height: var(--nf-lh-chico);
}

/* Recurso propio de marca: titular a dos colores.
   Primera línea verde bosque, segunda en cursiva ocre de texto. */
.titular-2 {
  display: block;
  font-weight: 500;
  font-style: italic;
  color: var(--nf-texto-destacado);
}

p {
  margin: 0 0 1em;
  color: var(--nf-texto);
}

a {
  color: var(--nf-titular);
}

.eyebrow {
  font-family: var(--nf-fuente-cuerpo);
  font-weight: var(--nf-peso-caption);
  font-size: var(--nf-txt-caption);
  line-height: var(--nf-lh-caption);
  letter-spacing: var(--nf-track-caption);
  text-transform: uppercase;
  color: var(--nf-texto-suave);
  margin: 0 0 var(--nf-esp-3);
}

/* ---------- Íconos de línea ---------- */
.ico {
  width: 22px;
  height: 22px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ico-lg {
  width: 34px;
  height: 34px;
  color: var(--nf-verde-salvia);
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgb(244 241 232 / 0.94);
  backdrop-filter: blur(8px);
  border-bottom: var(--nf-borde-fino);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--nf-esp-4);
  padding-top: var(--nf-esp-3);
  padding-bottom: var(--nf-esp-3);
}
.brand {
  display: flex;
  align-items: center;
  text-decoration: none;
}
.brand-logo {
  height: 52px;
  width: auto;
  display: block;
}
.main-nav {
  display: flex;
  gap: var(--nf-esp-5);
}
.main-nav a {
  text-decoration: none;
  color: var(--nf-texto);
  font-size: var(--nf-txt-chico);
  font-weight: var(--nf-peso-cuerpo-alto);
  white-space: nowrap;
}
.main-nav a:hover {
  color: var(--nf-texto-destacado);
}
.header-cta {
  white-space: nowrap;
}

/* ---------- Botones ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--nf-esp-2);
  padding: var(--nf-esp-3) var(--nf-esp-5);
  border-radius: var(--nf-radio-pill);
  font-family: var(--nf-fuente-cuerpo);
  font-size: var(--nf-txt-chico);
  font-weight: var(--nf-peso-cuerpo-alto);
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition:
    transform 0.12s ease,
    background 0.12s ease;
}
.btn:hover {
  transform: translateY(-1px);
}
.btn.is-disabled,
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.whatsapp-float.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.btn-primary {
  background: var(--nf-boton-fondo);
  color: var(--nf-boton-texto);
}
.btn-primary:hover {
  background: var(--nf-boton-hover);
}
.btn-ghost {
  background: transparent;
  color: var(--nf-titular);
  border-color: var(--nf-titular);
}
.btn-ghost:hover {
  background: var(--nf-superficie);
}
/* Excepción declarada de paleta: verde oficial de WhatsApp.
   Sobre este verde va SIEMPRE texto tinta, nunca blanco. */
.btn-whatsapp {
  background: var(--nf-whatsapp);
  color: var(--nf-tinta);
}
.btn-whatsapp:hover {
  background: var(--nf-whatsapp);
  filter: brightness(0.94);
}
.btn-lg {
  padding: var(--nf-esp-4) var(--nf-esp-6);
  font-size: var(--nf-txt-cuerpo);
}
.btn-block {
  width: 100%;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  background-color: var(--nf-fondo);
  border-bottom: var(--nf-borde-fino);
  padding: var(--nf-esp-8) 0 var(--nf-esp-7);
}
/* La cenefa botánica va en una capa aparte y atenuada: es textura de fondo,
   no puede competir con el titular. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--nf-patron);
  background-size: var(--nf-patron-tam);
  opacity: 0.4;
  pointer-events: none;
}
.hero-inner {
  position: relative;
  max-width: 800px;
}
.hero h1 {
  margin-bottom: var(--nf-esp-4);
}
.hero-lead {
  font-size: var(--nf-txt-destacado);
  line-height: var(--nf-lh-destacado);
  max-width: 680px;
}
.hero-actions {
  display: flex;
  gap: var(--nf-esp-3);
  flex-wrap: wrap;
  margin-bottom: var(--nf-esp-6);
}
.hero-facts {
  display: flex;
  gap: var(--nf-esp-5);
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
  color: var(--nf-titular);
  font-size: var(--nf-txt-chico);
  font-weight: var(--nf-peso-cuerpo-alto);
}
.hero-facts li {
  display: flex;
  align-items: center;
  gap: var(--nf-esp-2);
}
.hero-facts .ico {
  color: var(--nf-verde-salvia);
}

/* ---------- Secciones ---------- */
#inicio,
#servicios,
#agendamiento,
#ubicacion,
#contacto,
#mapa {
  scroll-margin-top: 96px;
}
.section {
  padding: var(--nf-esp-8) 0;
}
.section-alt {
  background: var(--nf-superficie);
  border-top: var(--nf-borde-fino);
  border-bottom: var(--nf-borde-fino);
}
.section-lead {
  font-size: var(--nf-txt-destacado);
  line-height: var(--nf-lh-destacado);
  max-width: 680px;
  color: var(--nf-texto-suave);
}
.subsection-title {
  margin-top: var(--nf-esp-7);
  font-size: var(--nf-txt-h2);
  line-height: var(--nf-lh-h2);
}

/* ---------- Servicios ---------- */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--nf-esp-5);
  margin-top: var(--nf-esp-5);
}
.service-card {
  background: var(--nf-superficie);
  border: var(--nf-borde-fino);
  border-radius: var(--nf-radio-grande);
  padding: var(--nf-esp-6);
}
.section-alt .service-card {
  background: var(--nf-crudo);
}
.service-icon {
  margin-bottom: var(--nf-esp-3);
  color: var(--nf-verde-salvia);
}
.service-highlight {
  background: var(--nf-crudo);
  border: var(--nf-borde-fino);
  color: var(--nf-titular);
  border-radius: var(--nf-radio);
  padding: var(--nf-esp-3) var(--nf-esp-4);
  font-size: var(--nf-txt-chico);
  line-height: var(--nf-lh-chico);
}
.services-connector {
  display: flex;
  align-items: flex-start;
  gap: var(--nf-esp-3);
  margin-top: var(--nf-esp-5);
  padding: var(--nf-esp-4) var(--nf-esp-5);
  background: var(--nf-superficie);
  border: var(--nf-borde-fino);
  border-left: 4px solid var(--nf-ocre-grafico);
  border-radius: var(--nf-radio);
  color: var(--nf-titular);
  font-size: var(--nf-txt-chico);
  line-height: var(--nf-lh-chico);
  /* Medido en 1280 px: sin tope, esta llamada se estiraba a 1072 px, o sea 143
     caracteres por línea — el doble del rango en que el ojo vuelve solo al
     principio de la siguiente. Los leads del sitio ya están acotados a 680 px;
     esta se había quedado afuera por ser una caja con borde y no un párrafo
     suelto. */
  max-width: 68ch;
}
.services-connector .ico {
  color: var(--nf-ocre-texto);
  margin-top: 2px;
}

/* ---------- Destacados ---------- */
.destacados-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--nf-esp-4);
  margin-top: var(--nf-esp-5);
}
.destacado-card {
  border: var(--nf-borde-fino);
  border-radius: var(--nf-radio-grande);
  overflow: hidden;
  background: var(--nf-superficie);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition:
    transform 0.12s ease,
    border-color 0.12s ease;
}
.destacado-card:hover {
  transform: translateY(-2px);
  border-color: var(--nf-verde-salvia);
}
.destacado-img-wrap {
  aspect-ratio: 1 / 1;
  background: var(--nf-crudo);
  overflow: hidden;
}
.destacado-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.destacado-body {
  padding: var(--nf-esp-3) var(--nf-esp-4) var(--nf-esp-4);
  flex: 1;
  display: flex;
  flex-direction: column;
}
.destacado-body h4 {
  margin: 0 0 var(--nf-esp-1);
  font-size: var(--nf-txt-chico);
}
.destacado-body p {
  font-size: var(--nf-txt-caption);
  line-height: var(--nf-lh-chico);
  color: var(--nf-texto-suave);
  margin-bottom: var(--nf-esp-3);
  flex: 1;
}
.destacado-price {
  font-weight: var(--nf-peso-cuerpo-alto);
  color: var(--nf-texto-destacado);
}

/* ---------- Catálogo ---------- */
.catalogo-search {
  margin: var(--nf-esp-4) 0 var(--nf-esp-2);
}
.catalogo-search input {
  width: 100%;
  max-width: 420px;
  padding: var(--nf-esp-3) var(--nf-esp-4);
  border-radius: var(--nf-radio-pill);
  border: var(--nf-borde-fino);
  background: var(--nf-superficie);
  font-family: var(--nf-fuente-cuerpo);
  font-size: var(--nf-txt-cuerpo);
  color: var(--nf-texto);
}
.catalogo-search input:focus {
  outline: 2px solid var(--nf-verde-bosque);
}
.catalogo-empty {
  color: var(--nf-texto-suave);
}

.categoria-block {
  border-top: var(--nf-borde-fino);
}
.categoria-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--nf-esp-3);
  background: none;
  border: none;
  padding: var(--nf-esp-4) var(--nf-esp-1);
  font-family: var(--nf-fuente-titulo);
  font-size: var(--nf-txt-h3);
  font-weight: var(--nf-peso-titulo);
  color: var(--nf-titular);
  cursor: pointer;
  text-align: left;
}
.categoria-toggle .chevron {
  transition: transform 0.15s ease;
  color: var(--nf-ocre-texto);
}
.categoria-toggle[aria-expanded="true"] .chevron {
  transform: rotate(180deg);
}
.categoria-count {
  font-family: var(--nf-fuente-cuerpo);
  font-weight: var(--nf-peso-cuerpo);
  color: var(--nf-texto-suave);
  font-size: var(--nf-txt-chico);
}

.producto-list {
  list-style: none;
  margin: 0 0 var(--nf-esp-3);
  padding: 0;
  display: grid;
  gap: var(--nf-esp-2);
}
.producto-list[hidden] {
  display: none;
}
.producto-row {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  gap: var(--nf-esp-3);
  align-items: center;
  padding: var(--nf-esp-2);
  border-radius: var(--nf-radio);
  background: var(--nf-superficie);
  border: var(--nf-borde-fino);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.12s ease;
}
.producto-row:hover {
  border-color: var(--nf-verde-salvia);
}
.producto-thumb {
  width: 52px;
  height: 52px;
  border-radius: var(--nf-radio-chico);
  overflow: hidden;
  background: var(--nf-crudo);
  border: var(--nf-borde-fino);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--nf-verde-salvia);
}
.producto-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.producto-info strong {
  display: block;
  color: var(--nf-titular);
  font-size: var(--nf-txt-chico);
}
.producto-info span {
  font-size: var(--nf-txt-caption);
  line-height: var(--nf-lh-caption);
  color: var(--nf-texto-suave);
}
.producto-precio {
  font-weight: var(--nf-peso-cuerpo-alto);
  color: var(--nf-texto-destacado);
  white-space: nowrap;
  text-align: right;
}
.badge-sin-stock {
  display: inline-block;
  margin-top: 2px;
  font-size: var(--nf-txt-caption);
  font-weight: var(--nf-peso-cuerpo-alto);
  color: var(--nf-ocre-texto);
  background: var(--nf-crudo);
  border: 1px solid var(--nf-ocre-grafico);
  padding: 1px var(--nf-esp-2);
  border-radius: var(--nf-radio-pill);
}

/* ---------- Agendamiento ---------- */
.agenda-grid {
  display: grid;
  grid-template-columns: minmax(260px, 380px) 1fr;
  gap: var(--nf-esp-6);
  margin-top: var(--nf-esp-5);
  align-items: start;
}
.agenda-facts {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--nf-esp-5);
  display: grid;
  gap: var(--nf-esp-3);
}
.agenda-facts li {
  display: flex;
  align-items: flex-start;
  gap: var(--nf-esp-3);
  background: var(--nf-crudo);
  border: var(--nf-borde-fino);
  border-radius: var(--nf-radio);
  padding: var(--nf-esp-3) var(--nf-esp-4);
  font-size: var(--nf-txt-chico);
  line-height: var(--nf-lh-chico);
}
.agenda-facts .ico {
  color: var(--nf-verde-salvia);
  margin-top: 2px;
}
.agenda-form {
  background: var(--nf-crudo);
  border: var(--nf-borde-fino);
  border-radius: var(--nf-radio-grande);
  padding: var(--nf-esp-5);
}
.form-row {
  margin-bottom: var(--nf-esp-4);
}
.form-row-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--nf-esp-3);
}
.agenda-form label {
  display: block;
  font-weight: var(--nf-peso-cuerpo-alto);
  font-size: var(--nf-txt-chico);
  margin-bottom: var(--nf-esp-1);
  color: var(--nf-titular);
}
/* El alto mínimo de 44 px no es estético. Medido en 375 px, los cinco campos y
   el select de horario quedaban en 36–38 px, bajo el mínimo de área táctil, y
   este formulario es el camino de agendamiento del sitio: un campo que se falla
   al tocar en el celular cuesta una cita. El padding vertical sube de 8 a 12 px
   y el min-height garantiza el piso aunque cambie la fuente. */
.agenda-form input,
.agenda-form select,
.agenda-form textarea {
  width: 100%;
  min-height: 44px;
  padding: var(--nf-esp-3);
  border-radius: var(--nf-radio);
  border: var(--nf-borde-fino);
  font-family: var(--nf-fuente-cuerpo);
  font-size: var(--nf-txt-chico);
  resize: vertical;
  background: var(--nf-marfil);
  color: var(--nf-texto);
}
.agenda-form select {
  cursor: pointer;
}
.agenda-form input:focus,
.agenda-form select:focus,
.agenda-form textarea:focus {
  outline: 2px solid var(--nf-verde-bosque);
}
.form-note {
  font-size: var(--nf-txt-caption);
  line-height: var(--nf-lh-caption);
  margin-top: var(--nf-esp-3);
  text-align: center;
  color: var(--nf-texto-suave);
  /* 94 caracteres por línea medidos. En texto centrado pesa más que en alineado
     a la izquierda, porque cada línea arranca en un punto distinto. */
  max-width: 56ch;
  margin-inline: auto;
}
/* Solo aparece si el navegador bloqueó la ventana de WhatsApp. Va en ocre y no en
   rojo a propósito: no es un error de la persona ni del formulario, es una salida
   alternativa. El [hidden] necesita el display:none explícito porque la regla de
   abajo lo pisaría. */
.form-fallback[hidden] {
  display: none;
}
.form-fallback {
  display: block;
  font-size: var(--nf-txt-caption);
  line-height: var(--nf-lh-caption);
  margin-top: var(--nf-esp-3);
  padding: var(--nf-esp-3);
  text-align: center;
  border-radius: var(--nf-radio);
  background: var(--nf-superficie);
  border: 1px solid var(--nf-ocre-grafico);
  color: var(--nf-texto);
}
.form-fallback a {
  color: var(--nf-ocre-texto);
  font-weight: var(--nf-peso-cuerpo-alto);
  /* Es la salida de emergencia cuando WhatsApp no abrió: tiene que ser tocable
     de verdad, no un renglón de 15 px. */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--nf-esp-2);
}
.field-hint {
  font-size: var(--nf-txt-caption);
  line-height: var(--nf-lh-caption);
  margin: var(--nf-esp-1) 0 0;
  color: var(--nf-texto-suave);
}

.map-wrap {
  margin-top: var(--nf-esp-6);
  border-radius: var(--nf-radio-grande);
  overflow: hidden;
  border: var(--nf-borde-fino);
}
.map-wrap iframe {
  width: 100%;
  height: 320px;
  border: 0;
}

/* ---------- Ubicación ---------- */
.ubicacion-grid {
  display: grid;
  grid-template-columns: minmax(260px, 380px) 1fr;
  gap: var(--nf-esp-5);
  margin-top: var(--nf-esp-5);
  align-items: stretch;
}
.ubicacion-media {
  border: var(--nf-borde-fino);
  border-radius: var(--nf-radio-grande);
  overflow: hidden;
  background: var(--nf-superficie);
  display: flex;
  flex-direction: column;
}
.ubicacion-media img {
  flex: 1;
  width: 100%;
  min-height: 220px;
  object-fit: cover;
  background: var(--nf-crudo);
}
.ubicacion-caption {
  margin: 0;
  padding: var(--nf-esp-3) var(--nf-esp-4);
  font-size: var(--nf-txt-caption);
  line-height: var(--nf-lh-caption);
  color: var(--nf-texto-suave);
  text-align: center;
}
.ubicacion-grid .map-wrap {
  margin-top: 0;
}
.ubicacion-grid .map-wrap iframe {
  height: 100%;
  min-height: 260px;
}
.ubicacion-address {
  display: flex;
  align-items: flex-start;
  gap: var(--nf-esp-2);
  margin-top: var(--nf-esp-5);
  font-weight: var(--nf-peso-cuerpo-alto);
  color: var(--nf-titular);
  /* Misma razón que la llamada de servicios: la dirección completa se estiraba a
     126 caracteres por línea. Una dirección se lee de un golpe o no se lee. */
  max-width: 56ch;
}
.ubicacion-address .ico {
  color: var(--nf-verde-salvia);
  margin-top: 3px;
}
.ubicacion-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--nf-esp-2);
  margin-top: var(--nf-esp-3);
}
.ubicacion-metro {
  display: inline-flex;
  align-items: center;
  gap: var(--nf-esp-2);
  margin: 0;
  background: var(--nf-superficie);
  border: var(--nf-borde-fino);
  color: var(--nf-titular);
  font-size: var(--nf-txt-chico);
  padding: var(--nf-esp-2) var(--nf-esp-4);
  border-radius: var(--nf-radio-pill);
}
.ubicacion-metro .ico {
  color: var(--nf-verde-salvia);
}

/* ---------- Contacto ---------- */
.contacto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--nf-esp-4);
  margin-top: var(--nf-esp-5);
}
.contacto-card {
  background: var(--nf-crudo);
  border: var(--nf-borde-fino);
  border-radius: var(--nf-radio-grande);
  padding: var(--nf-esp-5);
}
.contacto-card p {
  font-size: var(--nf-txt-chico);
  line-height: var(--nf-lh-chico);
}
/* Los enlaces de WhatsApp e Instagram medían 23 px de alto: son enlaces de
   contacto en tarjetas de contacto, o sea lo que la gente viene a tocar. El
   inline-flex con min-height les da el área sin moverlos de la línea ni pedir un
   cambio de marcado. */
.contacto-card a,
.footer-dato a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.contacto-icon {
  margin-bottom: var(--nf-esp-2);
  color: var(--nf-verde-salvia);
}
/* ---------- Página de producto ---------- */
.producto-volver {
  display: inline-block;
  margin-bottom: var(--nf-esp-5);
  color: var(--nf-titular);
  font-weight: var(--nf-peso-cuerpo-alto);
  font-size: var(--nf-txt-chico);
  text-decoration: none;
}
.producto-volver:hover {
  color: var(--nf-texto-destacado);
}
.producto-grid {
  display: grid;
  grid-template-columns: minmax(260px, 420px) 1fr;
  gap: var(--nf-esp-7);
  align-items: start;
  min-height: 500px; /* reserva espacio mientras producto.js reemplaza el placeholder "Cargando…", evita que el footer salte (CLS) */
}
.producto-media {
  border: var(--nf-borde-fino);
  border-radius: var(--nf-radio-grande);
  overflow: hidden;
  background: var(--nf-superficie);
  /* La foto acompaña el scroll del texto: sin esto la columna izquierda queda
     vacía (391 px en la ficha más corta, ~600 en la más larga). El top deja
     pasar el header pegajoso. */
  position: sticky;
  top: 96px;
}
.producto-media img {
  width: 100%;
  /* El height: auto es obligatorio, no cosmético. producto.js emite la foto con
     width="750" height="750" para reservar el espacio y evitar el salto de layout;
     sin un height de autor, ese atributo se aplica como hint de presentación, las
     dos dimensiones quedan definidas y el aspect-ratio de abajo se ignora. La caja
     quedaba de 750 px de alto con el ancho de la columna y el object-fit: cover
     recortaba los costados: se perdía el 59% de la foto en mobile y el 44% en
     desktop (auditoría QA responsive 2026-08-01). */
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.producto-marca {
  font-family: var(--nf-fuente-cuerpo);
  font-weight: var(--nf-peso-caption);
  font-size: var(--nf-txt-caption);
  letter-spacing: var(--nf-track-caption);
  text-transform: uppercase;
  color: var(--nf-texto-suave);
  margin-bottom: var(--nf-esp-1);
}
.producto-info h1 {
  font-size: clamp(26px, 4vw, var(--nf-txt-h1));
  line-height: var(--nf-lh-h1);
  margin-bottom: var(--nf-esp-2);
}
.producto-tagline {
  font-family: var(--nf-fuente-titulo);
  font-style: italic;
  font-size: var(--nf-txt-destacado);
  line-height: var(--nf-lh-destacado);
  color: var(--nf-texto-destacado);
}
.producto-precio-grande {
  font-size: var(--nf-txt-h2);
  font-weight: var(--nf-peso-cuerpo-alto);
  color: var(--nf-texto-destacado);
  margin-bottom: var(--nf-esp-1);
}
.producto-formato {
  font-size: var(--nf-txt-chico);
  color: var(--nf-texto-suave);
  margin-bottom: var(--nf-esp-5);
}
.producto-info h2 {
  font-size: var(--nf-txt-h3);
  line-height: var(--nf-lh-h3);
  margin-top: var(--nf-esp-6);
}
.producto-registro {
  font-size: var(--nf-txt-caption);
  line-height: var(--nf-lh-caption);
  color: var(--nf-texto-suave);
  margin-top: var(--nf-esp-4);
}
.producto-no-encontrado {
  text-align: center;
  padding: var(--nf-esp-7) 0;
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--nf-verde-bosque);
  color: var(--nf-sobre-oscuro);
  padding: var(--nf-esp-7) 0 var(--nf-esp-5);
  font-size: var(--nf-txt-chico);
  line-height: var(--nf-lh-chico);
}
.site-footer p {
  color: inherit;
}
.site-footer a {
  color: inherit;
}
.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--nf-esp-5);
  align-items: start;
}
.footer-logo {
  height: 64px;
  width: auto;
}
.footer-firma {
  font-family: var(--nf-fuente-titulo);
  font-style: italic;
  font-size: var(--nf-txt-destacado);
  margin-top: var(--nf-esp-3);
}
.footer-dato {
  display: flex;
  align-items: flex-start;
  gap: var(--nf-esp-2);
  margin: 0 0 var(--nf-esp-2);
}
.footer-dato .ico {
  opacity: 0.75;
  margin-top: 2px;
}
.footer-legal {
  margin: var(--nf-esp-6) 0 0;
  padding-top: var(--nf-esp-4);
  border-top: 1px solid rgb(244 241 232 / 0.25);
  font-size: var(--nf-txt-caption);
  line-height: var(--nf-lh-caption);
  opacity: 0.85;
}

/* ---------- WhatsApp flotante ---------- */
.whatsapp-float {
  position: fixed;
  bottom: 22px;
  right: 22px;
  width: 58px;
  height: 58px;
  background: var(--nf-whatsapp);
  color: var(--nf-tinta); /* nunca blanco sobre el verde de WhatsApp */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--nf-sombra-card);
  z-index: 150;
  transition: transform 0.15s ease;
}
.whatsapp-float:hover {
  transform: scale(1.07);
}

/* Ocultarlo mientras hay foco en un campo, para que no tape el input activo. */
body:has(input:focus, select:focus, textarea:focus) .whatsapp-float {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

/* Ocultarlo cuando se superpone visualmente con el formulario de agendamiento o
   con el texto de la ficha de producto (calculado en common.js), para que no
   intercepte el primer tap ni tape contenido mientras se hace scroll. */
.whatsapp-float.whatsapp-float--yield {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  /* Las tres grillas de dos columnas se apilan en el mismo umbral. Antes la
     ficha y la ubicación aguantaban hasta 760 px, y entre 761 y 900 (iPad
     vertical) la columna de texto de la ficha caía a 237 px —unos 28
     caracteres por línea— y el mapa quedaba más angosto que la foto del local
     (auditoría QA responsive 2026-07-27). */
  .agenda-grid,
  .ubicacion-grid,
  .producto-grid {
    grid-template-columns: 1fr;
  }
  .form-row-split {
    grid-template-columns: 1fr;
  }
  /* Sin dos columnas no hay nada a lo que quedarse pegado. */
  .producto-media {
    position: static;
  }
}

@media (max-width: 1024px) {
  /* Botón más chico en tablet/mobile: reduce el área que puede tapar contenido. */
  .whatsapp-float {
    width: 46px;
    height: 46px;
    bottom: 16px;
    right: 16px;
  }
  .whatsapp-float svg {
    width: 22px;
    height: 22px;
  }
  .contacto-grid,
  .producto-info {
    padding-bottom: 56px;
  }
}

@media (max-width: 760px) {
  #inicio,
  #servicios,
  #agendamiento,
  #ubicacion,
  #contacto,
  #mapa {
    /* Tiene que ir por encima del alto real del header pegajoso, que acá mide
       128 px desde que los links del nav pasaron a 44 px de alto tocable. */
    scroll-margin-top: 148px;
  }
  .header-inner {
    flex-wrap: wrap;
    row-gap: var(--nf-esp-2);
  }
  .brand {
    order: 1;
  }
  .brand-logo {
    height: 44px;
  }
  .header-cta {
    order: 2;
  }
  .main-nav {
    order: 3;
    width: 100%;
    justify-content: space-between;
    gap: var(--nf-esp-2);
  }
  .main-nav a {
    font-size: var(--nf-txt-caption);
    /* El texto medía 21 px de alto, bajo el mínimo de 24x24 que pide WCAG 2.5.8,
       y con 19-20 px entre links la excepción por separación tampoco aplicaba.
       El min-height agranda el área tocable sin tocar el tamaño de la letra
       (auditoría QA responsive 2026-08-01). */
    display: flex;
    align-items: center;
    min-height: 44px;
  }
  .producto-row {
    grid-template-columns: 44px 1fr;
  }
  .producto-precio {
    grid-column: 2;
    text-align: left;
  }
}