/* ════════════════════════════════════════════════════════════════════════
   LA WEB DE CADA NEGOCIO

   Una sola hoja para todas. Lo que cambia entre una barbería y un spa son
   los tonos, los textos y las fotos — no la estructura.

   ── El sistema de tema ────────────────────────────────────────────────

   UN color lo decide todo. El dueño elige `--acento-rgb` y de ahí salen:

     --acento        el tono, tal cual
     --acento-hondo  25% más oscuro, para el hover
     --acento-suave  al 12%, para fondos y el resplandor
     --sobre-acento  NEGRO o BLANCO según cuál se lea encima

   El último no se puede calcular en CSS: `color-mix` mezcla, no mide
   contraste. Lo pone `app.js` con la luminancia relativa de WCAG. Sin eso,
   un acento lima o amarillo deja la franja final con texto blanco sobre
   amarillo — ilegible, y en la pantalla más grande de la página.

   ── Claro y oscuro ────────────────────────────────────────────────────

   `data-tema` en <html>. La sección «Nosotros» va SIEMPRE al contrario que
   el resto: es el respiro visual de la página, y en el modelo del que sale
   este diseño es lo que separa el encabezado del catálogo.
   ════════════════════════════════════════════════════════════════════════ */

:root {
  /* El acento por defecto. Lo pisa el del negocio en cuanto carga. */
  --acento-rgb: 37 99 235;

  /* Oscuro, que es el modo del modelo. */
  --fondo-rgb:      17 17 17;
  --fondo-2-rgb:    12 12 12;
  --fondo-3-rgb:     5  5  5;
  --texto-rgb:     252 252 252;
  --texto-2-rgb:   185 185 188;
  --borde-rgb:      46 46 48;
  /* El contraste: en oscuro, la sección clara. */
  --contra-rgb:    244 244 244;
  --contra-texto-rgb: 17 17 17;
  --contra-gris-rgb:  81 81 83;

  --acento:       rgb(var(--acento-rgb));
  --acento-hondo: color-mix(in srgb, rgb(var(--acento-rgb)) 75%, #000);
  --acento-suave: rgb(var(--acento-rgb) / .12);
  /* Lo pone app.js midiendo el contraste. El respaldo es blanco porque la
     mayoría de los acentos de la paleta son oscuros. */
  --sobre-acento: #fff;

  --fondo:   rgb(var(--fondo-rgb));
  --fondo-2: rgb(var(--fondo-2-rgb));
  --fondo-3: rgb(var(--fondo-3-rgb));
  --texto:   rgb(var(--texto-rgb));
  --gris:    rgb(var(--texto-2-rgb));
  --borde:   rgb(var(--borde-rgb));
  --contra:  rgb(var(--contra-rgb));

  --display: 'Bebas Neue', Impact, 'Arial Narrow', sans-serif;
  --cuerpo:  'Roboto Condensed', Arial, sans-serif;

  --curva: cubic-bezier(.22, 1, .36, 1);
  --radio: 6px;
  --ancho: 1180px;

  --sa-arriba: env(safe-area-inset-top, 0px);
  --sa-abajo:  env(safe-area-inset-bottom, 0px);
}

/* En claro se invierten los papeles: el fondo es papel y «Nosotros» oscuro. */
:root[data-tema="claro"] {
  --fondo-rgb:      252 252 252;
  --fondo-2-rgb:    244 244 244;
  --fondo-3-rgb:    255 255 255;
  --texto-rgb:       17  17  17;
  --texto-2-rgb:     81  81  83;
  --borde-rgb:      224 224 226;
  --contra-rgb:      17  17  17;
  --contra-texto-rgb: 252 252 252;
  --contra-gris-rgb:  185 185 188;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* El encabezado es FIJO y mide 75px: sin esto, cada enlace del menú dejaba
   los primeros 75px de la sección debajo de él — y la sección empieza por su
   rótulo, así que lo que quedaba tapado era justo el título que dice a dónde
   se acaba de llegar. Se declara en `:target` y en las secciones porque
   `scroll-margin` lo usa tanto el salto por `#ancla` como `scrollIntoView()`. */
:root { --alto-cabecera: 75px; }
section[id], .heroe { scroll-margin-top: calc(var(--alto-cabecera) + 8px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--cuerpo);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.contenedor { width: min(calc(100% - 40px), var(--ancho)); margin-inline: auto; }

h1, h2, h3 { font-family: var(--display); letter-spacing: .5px; line-height: .95; margin: 0; }
h2 { font-size: clamp(32px, 4.4vw, 54px); }

/* El sobretítulo y el rótulo de sección son la misma pieza con dos nombres
   porque en la página cumplen el mismo papel: decir de qué va lo que viene. */
.sobretitulo, .kicker {
  font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase;
  font-size: 13px; margin: 0 0 12px;
  color: var(--acento-texto, var(--acento));
}

/* ── Carga ──────────────────────────────────────────────────────────── */
.cargando { min-height: 100svh; display: grid; place-items: center; }
/* `[hidden]` del navegador es `display:none`, y CUALQUIER `display` posterior
   lo pisa. Sin esta línea, la pantalla de carga se quedaba ocupando una
   pantalla entera de negro encima de la página — el elemento «oculto» que
   tapa la página, otra vez. */
/* UNA regla, no una por clase. Había ocho —`.cargando`, `.seccion`,
   `.lupa`, `.flotante-wa`…— y así se escapó el paso «4 · Elija su hora»:
   lleva `class="campo"`, cuyo `display` pisaba su `hidden`, y el formulario
   enseñaba el paso cuatro con el dos y el tres ocultos. Un elemento nuevo no
   puede depender de que alguien se acuerde de añadirle su línea. */
[hidden] { display: none !important; }
.pulso {
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--acento-suave);
  animation: latir 1.1s var(--curva) infinite;
}
@keyframes latir { 0%,100% { transform: scale(.8); opacity: .5 } 50% { transform: scale(1.1); opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .pulso { animation: none; } }

/* ── Barra superior ─────────────────────────────────────────────────── */
.barra {
  position: sticky; top: 0; z-index: 30;
  background: rgb(var(--fondo-rgb) / .92);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgb(var(--acento-rgb) / .35);
  padding-top: var(--sa-arriba);
}
.barra-fila { display: flex; align-items: center; justify-content: space-between; height: 74px; gap: 18px; }
/* Es un enlace y se toca: lleva a la portada. 38px de logo dejaban la caja
   en 38 de alto. El relleno va hacia fuera con margen negativo para no
   empujar la barra. */
.marca {
  display: flex; align-items: center; gap: 11px; font-weight: 700; font-size: 1.08rem;
  min-width: 0; min-height: 44px;
}
.marca img { width: 38px; height: 38px; object-fit: contain; flex-shrink: 0; }
.marca span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.nav { display: flex; align-items: center; gap: 26px; font-weight: 600; }
/* 44px de alto aunque el texto mida 24. Un iPad en horizontal entra en las
   media queries de ESCRITORIO y aun así se toca con el dedo: el tamaño del
   puntero no se deduce del ancho de la pantalla. Solo en vertical, para no
   ensanchar la barra —la altura ya la fija la marca, así que el encabezado
   no crece. */
.nav a {
  font-size: .95rem; color: var(--gris); transition: color .18s;
  display: inline-flex; align-items: center; min-height: 44px;
}
.nav a:hover { color: var(--texto); }
/* `.nav a` (0,1,1) le gana a `.nav-cta` (0,1,0): sin repetir el color aquí,
   el botón de la barra queda con el gris del menú sobre el acento. */
.nav a.nav-cta {
  background: var(--acento); color: var(--sobre-acento);
  padding: 11px 20px; border-radius: var(--radio); letter-spacing: .4px;
}
.nav a.nav-cta:hover { background: var(--acento-hondo); color: var(--sobre-acento); }

/* La hamburguesa. Tres líneas que se cruzan al abrir: sin la transformación
   no se sabe si el menú está abierto o cerrado más que mirando el menú. */
.menu-boton {
  display: none; background: none; border: 0; cursor: pointer;
  width: 44px; height: 44px; padding: 10px; flex-shrink: 0;
}
.menu-boton span {
  display: block; height: 2px; background: var(--texto); border-radius: 2px;
  transition: transform .22s var(--curva), opacity .18s;
}
.menu-boton span + span { margin-top: 5px; }
.menu-boton[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-boton[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-boton[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 860px) {
  .menu-boton { display: block; }
  .nav {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--fondo-2);
    border-bottom: 1px solid var(--borde);
    padding: 8px 20px 18px;
    /* Cerrado NO es `display:none`: así la transición existe y el menú se
       desliza en vez de parpadear. */
    transform: translateY(-12px); opacity: 0; pointer-events: none;
    transition: transform .22s var(--curva), opacity .18s;
  }
  .nav.abierto { transform: none; opacity: 1; pointer-events: auto; }
  /* 44px táctiles de verdad: un enlace de menú se toca con el pulgar. */
  .nav a { padding: 14px 0; font-size: 1.02rem; }
  .nav a.nav-cta { margin-top: 10px; text-align: center; padding: 14px 20px; }
}

/* ── Encabezado ─────────────────────────────────────────────────────── */
.heroe {
  position: relative; overflow: hidden; isolation: isolate;
  border-bottom: 1px solid rgb(var(--acento-rgb) / .4);
}
/* Las dos diagonales del modelo. Decorativas: `aria-hidden` no hace falta en
   un pseudoelemento, que no entra en el árbol de accesibilidad. */
.heroe::before, .heroe::after {
  content: ''; position: absolute; z-index: -1;
  width: 45%; height: 4px; background: var(--acento);
  transform: skewX(-38deg); top: 14%; left: -5%;
}
.heroe::after { top: auto; bottom: 10%; left: auto; right: -5%; }
.heroe-trama {
  position: absolute; inset: 0; z-index: -2; opacity: .055;
  background-image:
    linear-gradient(135deg, transparent 25%, currentColor 25.5%, transparent 26%),
    linear-gradient(315deg, transparent 25%, currentColor 25.5%, transparent 26%);
  background-size: 100px 100px;
}
.heroe-rejilla {
  display: grid; grid-template-columns: 1.1fr .9fr; gap: 50px;
  align-items: center; padding: 72px 0 80px;
}
.heroe h1 { font-size: clamp(54px, 8vw, 100px); margin: 14px 0 18px; }
.heroe h1 strong { display: block; color: var(--acento); font-weight: 400; }
.heroe .lead { font-size: 1.18rem; color: var(--gris); max-width: 46ch; margin: 0 0 28px; }

/* Las insignias, separadas por una línea del color del negocio. */
.insignias {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0;
  list-style: none; margin: 32px 0 0; padding: 0;
  font-weight: 700; letter-spacing: 2px; font-size: 12.5px; text-transform: uppercase;
}
.insignias li { display: flex; align-items: center; color: var(--gris); }
.insignias li + li::before {
  content: ''; width: 2px; height: 15px; margin: 0 16px;
  background: var(--acento); flex-shrink: 0;
}

/* El video vertical del negocio, en su marco 9:16 con el resplandor detrás. */
.heroe-pieza { position: relative; display: grid; place-items: center; }
.heroe-pieza::before {
  content: ''; position: absolute; z-index: -1;
  inset: 8% 12%; border-radius: 50%;
  background: var(--acento); opacity: .22; filter: blur(70px);
}
.pieza-video {
  width: min(100%, 330px); aspect-ratio: 9 / 16;
  border-radius: 18px; overflow: hidden;
  border: 1px solid var(--borde);
  box-shadow: 0 28px 70px rgb(0 0 0 / .45);
  background: var(--fondo-2);
}
.pieza-video video, .pieza-video img { width: 100%; height: 100%; object-fit: cover; }
/* Sin video, el logo grande — nunca un hueco. */
.pieza-logo { width: min(74%, 330px); opacity: .95; }

@media (max-width: 860px) {
  /* En móvil manda la imagen: se ve primero y el texto debajo. */
  .heroe-rejilla { grid-template-columns: 1fr; gap: 34px; padding: 44px 0 54px; }
  .heroe-pieza { order: -1; }
  .pieza-video { width: min(100%, 260px); }
  .heroe .lead { font-size: 1.06rem; }
}

/* ── Barra de acción ────────────────────────────────────────────────── */
.barra-accion { display: grid; grid-template-columns: 1fr 1fr; }
.barra-accion a {
  display: flex; align-items: center; justify-content: center;
  min-height: 64px; padding: 18px 20px; text-align: center;
  font-weight: 700; font-size: .96rem; letter-spacing: 2px; text-transform: uppercase;
  transition: background .18s;
}
.barra-accion .principal { background: var(--acento); color: var(--sobre-acento); }
.barra-accion .principal:hover { background: var(--acento-hondo); }
.barra-accion .segunda {
  background: var(--fondo-2); color: var(--texto);
  border-left: 1px solid var(--borde);
}
.barra-accion .segunda:hover { background: var(--borde); }
/* ── En el teléfono, la barra vive abajo y no se va ──────────────────
   Pegada al héroe se queda arriba del todo: quien baja a leer los servicios
   y el equipo —que es para lo que están— ya no la tiene, y para agendar le
   toca volver a subir o seguir bajando hasta el formulario. Fija abajo está
   siempre a un dedo.

   `--alto-barra` existe para que el botón de WhatsApp, el aviso flotante y
   el relleno del `body` salgan todos del mismo número: con tres copias, una
   se queda atrás y algo acaba tapado. */
@media (max-width: 760px) {
  :root { --alto-barra: 56px; }

  .barra-accion {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    /* Dos columnas, no una: en vertical serían 112px de pantalla comidos de
       forma permanente, en el aparato que menos alto tiene. */
    grid-template-columns: 1.35fr 1fr;
    background: var(--fondo-2);
    border-top: 1px solid var(--borde);
    box-shadow: 0 -10px 28px rgb(0 0 0 / .3);
    /* El área segura se SUMA al alto; metida como `padding` del enlace con
       `box-sizing: border-box` se lo comería y la barra quedaría más baja
       que su zona táctil. */
    padding-bottom: var(--sa-abajo);
    transition: transform .22s var(--curva);
  }
  /* Con el formulario en pantalla la barra sobra: «Agendar una cita» lleva a
     donde ya se está, y tapa justo el sitio donde se escribe. */
  .barra-accion[data-oculta] { transform: translateY(100%); }

  .barra-accion a {
    min-height: var(--alto-barra); padding: 14px 10px;
    font-size: .82rem; letter-spacing: 1px;
  }
  .barra-accion .segunda { border-left: 1px solid var(--borde); border-top: 0; }

  /* El hueco para que la barra no tape el final de la página. */
  body { padding-bottom: calc(var(--alto-barra) + var(--sa-abajo)); }

  /* Y los flotantes, por encima de ella. */
  .flotante-wa { bottom: calc(var(--alto-barra) + 16px + var(--sa-abajo)); }
  .aviso-flotante { bottom: calc(var(--alto-barra) + 18px + var(--sa-abajo)); }
  /* El pie ya no necesita hueco extra por el botón: el del `body` lo cubre,
     y sumar los dos dejaba un vacío de 150px al final. */
  body.con-wa .pie { padding-bottom: 36px; }
}

/* ── Secciones ──────────────────────────────────────────────────────── */
.seccion { padding: 84px 0; }
.seccion:nth-of-type(even) { background: var(--fondo-2); }

.seccion-cabeza {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 30px; margin-bottom: 44px; flex-wrap: wrap;
}
.seccion-sub { color: var(--gris); margin: 0; max-width: 44ch; }

/* La sección de contraste: clara sobre página oscura y al revés. */
.contraste {
  background: var(--contra) !important;
  color: rgb(var(--contra-texto-rgb));
}
/* Esta sección va al contrario que el resto, así que el acento se mide
   contra el otro fondo: el que pasa sobre el tema oscuro es justo el que
   falla sobre el claro de aquí. */
.contraste .kicker { color: var(--acento-contra, var(--acento)); }
.contraste .dos-col-texto { color: rgb(var(--contra-gris-rgb)); }

.dos-col { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: start; }
.dos-col-texto p { margin: 0 0 16px; }
.dos-col-texto p:last-child { margin-bottom: 0; }
@media (max-width: 860px) { .dos-col { grid-template-columns: 1fr; gap: 26px; } }

/* ── Servicios ──────────────────────────────────────────────────────── */
.rejilla-servicios { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--borde); }
/* El hueco del número impar. La rejilla pinta su fondo entre las celdas para
   hacer la línea de un píxel, así que la celda que sobra no queda vacía: queda
   gris. Con tres servicios —que es lo normal en una barbería— media fila era
   un rectángulo de nada. El último ocupa el ancho entero. */
.tarjeta:last-child:nth-child(odd) { grid-column: 1 / -1; }
/* Y al doble de ancho, la foto no puede conservar su proporción: 16/10 sobre
   1180 px son 737 px de alto, una pantalla entera para un solo servicio. A lo
   ancho es una banda. */
.tarjeta:last-child:nth-child(odd) .mirilla { aspect-ratio: 32 / 9; }
@media (max-width: 760px) { .rejilla-servicios { grid-template-columns: 1fr; } }

/* Cada servicio es un BOTÓN, no un cartel: verlo y no poder tocarlo obliga a
   bajar al formulario y volver a elegirlo. Dos pasos de más. */
.tarjeta {
  position: relative; background: var(--fondo);
  padding: 28px 28px 24px 34px; text-align: left;
  border: 0; font: inherit; color: inherit; width: 100%; cursor: pointer;
  display: flex; flex-direction: column; gap: 8px;
  transition: background .18s;
}
.tarjeta::before {
  content: ''; position: absolute; left: 0; top: 28px; bottom: 24px;
  width: 3px; background: var(--acento);
}
.tarjeta:hover { background: var(--fondo-3); }
.tarjeta:focus-visible { outline: 2px solid var(--acento); outline-offset: -2px; }
/* El número de orden, como en el modelo. Lo pone el CSS y no el JS: es
   presentación, y numerarlo a mano se desordena al ocultar un servicio. */
.rejilla-servicios { counter-reset: srv; }
.tarjeta { counter-increment: srv; }
.tarjeta .orden {
  font-family: var(--display); font-size: 1.1rem; color: var(--acento-texto);
  letter-spacing: 1px;
}
.tarjeta .orden::before { content: counter(srv, decimal-leading-zero); }
.tarjeta h3 { font-size: 1.5rem; }
.tarjeta .precio {
  font-weight: 700; font-size: 1.15rem;
  font-variant-numeric: tabular-nums;
}
.tarjeta .duracion { color: var(--gris); font-weight: 400; font-size: .92rem; }
/* Lo que el dueño escribió del servicio. Dos líneas como mucho: en la
   rejilla lo que se compara es qué es y cuánto cuesta, y un párrafo largo
   desalinea las tarjetas de al lado. El texto completo vive en WhatsApp,
   que es donde alguien pregunta. */
.tarjeta .detalle {
  color: var(--gris); font-size: .95rem; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
/* `auto` y no un margen fijo: con descripciones de distinto largo, la
   llamada a la acción tiene que quedar a la misma altura en toda la fila o
   la rejilla se ve desordenada. */
.tarjeta .ir {
  margin-top: auto; padding-top: 6px;
  font-weight: 700; font-size: .9rem; letter-spacing: 1px;
  text-transform: uppercase; color: var(--acento-texto);
}
.tarjeta.elegible { cursor: pointer; }

/* La foto o el video del servicio. */
.mirilla {
  position: relative; aspect-ratio: 16 / 10; margin: -28px -28px 10px -34px;
  overflow: hidden; background: var(--fondo-2);
}
.medio { width: 100%; height: 100%; object-fit: cover; display: block; }
.mas-medios {
  position: absolute; right: 10px; bottom: 10px;
  background: rgb(0 0 0 / .66); color: #fff;
  padding: 3px 9px; border-radius: 999px; font-size: .78rem; font-weight: 600;
}

/* ── Galería ────────────────────────────────────────────────────────── */
/* Aquí NO va la línea de un píxel sobre fondo pintado que usan los servicios:
   `auto-fill` crea las pistas que quepan y las vacías enseñaban ese fondo:
   con dos fotos, tres rectángulos grises al lado. Las fotos piden aire, y un
   hueco con aire no se ve. */
.rejilla-galeria {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px;
}
.galeria-foto {
  position: relative; aspect-ratio: 1; overflow: hidden;
  border: 0; padding: 0; cursor: pointer; background: var(--fondo-2);
}
.galeria-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s var(--curva); }
.galeria-foto:hover img { transform: scale(1.05); }
.galeria-foto:focus-visible { outline: 2px solid var(--acento); outline-offset: -2px; }

/* La foto ampliada. Pantalla completa porque quien la abre vino a verla. */
.lupa {
  position: fixed; inset: 0; z-index: 90;
  background: rgb(0 0 0 / .93);
  display: grid; place-items: center; padding: 24px;
}
.lupa img { max-width: 100%; max-height: 90svh; object-fit: contain; }
.lupa-cerrar {
  position: absolute; top: calc(14px + var(--sa-arriba)); right: 14px;
  width: 46px; height: 46px; border-radius: 50%;
  background: rgb(255 255 255 / .12); color: #fff; border: 0;
  font-size: 30px; line-height: 1; cursor: pointer;
}
.lupa-cerrar:hover { background: rgb(255 255 255 / .22); }

/* ── Valores ────────────────────────────────────────────────────────── */
.rejilla-valores {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--borde);
}
@media (max-width: 860px) { .rejilla-valores { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .rejilla-valores { grid-template-columns: 1fr; } }
.valor { background: var(--fondo); padding: 30px 26px; counter-increment: val; }
.rejilla-valores { counter-reset: val; }
.valor .num {
  font-family: var(--display); font-size: 2rem; color: var(--acento); line-height: 1;
}
.valor .num::before { content: counter(val, decimal-leading-zero); }
.valor h3 {
  font-family: var(--cuerpo); font-size: .96rem; font-weight: 700;
  letter-spacing: 1.6px; text-transform: uppercase; margin: 14px 0 8px;
}
.valor p { margin: 0; color: var(--gris); font-size: .95rem; }

/* ── Equipo ─────────────────────────────────────────────────────────── */
.rejilla-equipo {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 26px;
}
.profesional { text-align: left; }
.profesional .retrato {
  aspect-ratio: 3 / 4; overflow: hidden; margin-bottom: 14px;
  background: var(--fondo-2); border: 1px solid var(--borde);
}
.profesional .retrato img { width: 100%; height: 100%; object-fit: cover; }
/* Sin foto, la inicial grande en el color del negocio: un hueco gris con el
   nombre debajo se lee como una ficha incompleta. */
.profesional .inicial {
  width: 100%; height: 100%; display: grid; place-items: center;
  font-family: var(--display); font-size: 3.4rem;
  color: var(--acento-texto); background: var(--acento-suave);
}
.profesional h3 { font-family: var(--cuerpo); font-size: 1.08rem; font-weight: 700; }
.profesional .cargo {
  color: var(--acento-texto); font-size: .8rem; font-weight: 700;
  letter-spacing: 1.4px; text-transform: uppercase; margin: 4px 0 0;
}
.profesional .bio { color: var(--gris); font-size: .92rem; margin: 8px 0 0; }

/* ── Horarios y ubicación ───────────────────────────────────────────── */
/* El corte diagonal del modelo. En móvil se quita: a 360px una diagonal se
   come la esquina del texto. */
.partida { position: relative; overflow: hidden; background: var(--fondo-2); }
.partida::before {
  content: ''; position: absolute; inset: 0 auto 0 -12%; width: 56%;
  background: var(--fondo-3); transform: skewX(-9deg);
}
.partida > * { position: relative; }
@media (max-width: 860px) { .partida::before { display: none; } }

.lista-horarios { list-style: none; margin: 24px 0 0; padding: 0; max-width: 380px; }
.lista-horarios li {
  display: flex; justify-content: space-between; gap: 18px;
  padding: 11px 0; border-bottom: 1px solid var(--borde);
  font-variant-numeric: tabular-nums;
}
.lista-horarios li:last-child { border-bottom: 0; }
.lista-horarios .dia { font-weight: 600; }
.lista-horarios .cerrado { color: var(--gris); }
/* Hoy, marcado: es el único renglón que casi todo el mundo viene a mirar. */
.lista-horarios li.hoy { color: var(--acento-texto); font-weight: 700; }

.ubicacion-dato { margin: 0 0 14px; }
.ubicacion-dato strong {
  display: block; font-size: .8rem; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--gris); margin-bottom: 3px; font-weight: 700;
}
.mapa {
  margin-top: 18px; aspect-ratio: 16 / 10; width: 100%;
  border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden;
}
.mapa iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ── Opiniones ──────────────────────────────────────────────────────── */
.rejilla-resenas { display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); gap: 22px; }
.resena {
  background: var(--fondo-3); border: 1px solid var(--borde);
  padding: 22px; display: flex; flex-direction: column; gap: 10px;
}
.resena-estrellas { color: var(--acento-texto); letter-spacing: 2px; }
.resena-estrellas .apagada { opacity: .25; }
.resena-texto { margin: 0; font-size: .97rem; line-height: 1.6; }
.resena-quien { margin: auto 0 0; font-size: .86rem; color: var(--gris); }
.resena-quien strong { color: var(--texto); font-weight: 700; }
.resena-respuesta {
  margin: 2px 0 0; padding: 10px 13px;
  background: var(--acento-suave); border-left: 2px solid var(--acento);
  font-size: .9rem; color: var(--gris);
}
.resenas-resumen { display: inline-flex; align-items: baseline; gap: 8px; font-variant-numeric: tabular-nums; }
.resenas-resumen .nota { font-size: 1.6rem; font-weight: 700; color: var(--texto); font-family: var(--display); }

/* ── Agendar ────────────────────────────────────────────────────────── */
.panel-agenda {
  background: var(--fondo-3); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 28px;
}
@media (max-width: 560px) { .panel-agenda { padding: 20px 16px; } }
.campo { display: block; margin-bottom: 18px; }
.campo > span {
  display: block; font-size: .78rem; font-weight: 700; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--gris); margin-bottom: 8px;
}
.campo select, .campo input {
  width: 100%; padding: 13px 14px;
  background: var(--fondo); color: var(--texto);
  border: 1px solid var(--borde); border-radius: var(--radio);
  /* 16px exactos: por debajo, iOS amplía la página al tocar el campo. */
  font: inherit; font-size: 16px; font-family: inherit;
}
.campo select:focus, .campo input:focus {
  outline: 2px solid rgb(var(--acento-rgb) / .35); outline-offset: 1px; border-color: var(--acento);
}
.fila-datos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .fila-datos { grid-template-columns: 1fr; gap: 0; } }

.cupos { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 9px; }
.cupo {
  padding: 13px 8px; text-align: center; cursor: pointer;
  background: var(--fondo); border: 1px solid var(--borde); border-radius: var(--radio);
  /* Un <button> NO hereda `color`: sin esto toma el negro del navegador y en
     tema oscuro queda negro sobre negro. Se midió en 1,08:1. */
  color: var(--texto); font: inherit; font-size: .95rem; font-weight: 600;
  font-variant-numeric: tabular-nums;
  transition: border-color .15s, background .15s;
}
.cupo:hover { border-color: var(--acento); }
.cupo.elegido { background: var(--acento); color: var(--sobre-acento); border-color: var(--acento); }
.cupo:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

.pista { color: var(--gris); font-size: .9rem; margin: 8px 0 0; }
.nota { color: var(--gris); font-size: .92rem; }
.elegido-aviso { color: var(--acento-texto); font-weight: 700; }
.listo { text-align: center; padding: 26px 10px; }
.listo-marca {
  width: 58px; height: 58px; margin: 0 auto 16px; border-radius: 50%;
  display: grid; place-items: center; font-size: 28px;
  background: var(--acento-suave); color: var(--acento-texto);
}

/* ── Botones ────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 24px; border-radius: var(--radio); border: 1px solid transparent;
  font-family: inherit; font-weight: 700; font-size: .95rem;
  letter-spacing: 1.4px; text-transform: uppercase;
  cursor: pointer; transition: background .18s, border-color .18s;
}
.btn-grande { padding: 16px 30px; font-size: 1rem; }
.btn-bloque { width: 100%; }
.btn-primario { background: var(--acento); color: var(--sobre-acento); }
.btn-primario:hover { background: var(--acento-hondo); }
.btn-primario:disabled { background: rgb(var(--texto-2-rgb) / .22); color: var(--gris); cursor: not-allowed; }
.btn-fantasma { border-color: var(--borde); color: var(--texto); background: transparent; }
.btn-fantasma:hover { background: var(--acento-suave); border-color: var(--acento); }

/* ── Franja final ───────────────────────────────────────────────────── */
.franja-cta { background: var(--acento); color: var(--sobre-acento); padding: 64px 0; }
.franja-fila { display: flex; align-items: center; justify-content: space-between; gap: 34px; flex-wrap: wrap; }
.franja-cta .kicker { color: var(--sobre-acento); opacity: .78; }
.franja-cta h2 { margin-bottom: 10px; }
.franja-cta p { margin: 0; opacity: .88; max-width: 48ch; }
.franja-acciones { display: flex; gap: 12px; flex-wrap: wrap; }
/* Sobre el acento, un botón del color del acento no se ve. Se invierten. */
.franja-acciones .btn-primario { background: var(--sobre-acento); color: var(--acento); }
.franja-acciones .btn-primario:hover { opacity: .88; background: var(--sobre-acento); }
.franja-acciones .btn-fantasma { border-color: currentColor; color: var(--sobre-acento); }
.franja-acciones .btn-fantasma:hover { background: rgb(0 0 0 / .12); }

/* ── Pie ────────────────────────────────────────────────────────────── */
.pie { background: var(--fondo-3); border-top: 1px solid var(--borde); padding: 36px 0 calc(36px + var(--sa-abajo)); }
/* `center` alineaba el logo de 42px contra una columna de cinco líneas: el
   logo quedaba flotando a media altura, sin relación con el nombre que
   acompaña. */
.pie-fila { display: flex; align-items: flex-start; justify-content: space-between; gap: 22px; flex-wrap: wrap; }
.pie-marca { display: flex; align-items: flex-start; gap: 13px; }
.pie-datos { margin-top: 10px; }
.pie-marca img { width: 42px; height: 42px; object-fit: contain; }
.pie-marca p { margin: 0; font-weight: 700; }
.pie-fino { font-size: .85rem; color: var(--gris); font-weight: 400 !important; }
/* 65×16 px. Un enlace dentro de una frase no se puede agrandar sin partir
   la línea: el relleno sale hacia fuera y el margen lo compensa. */
.pie-fino a {
  color: var(--acento-texto);
  /* Solo en vertical: el relleno horizontal con margen negativo sacaba el
     enlace 14px fuera de su párrafo y el auditor lo cazaba como desborde.
     Lo que faltaba era alto, no ancho. */
  display: inline-block; padding: 14px 0; margin: -14px 0;
}
/* El botón flotante tapa el final de la página: el pie necesita el hueco. */
body.con-wa .pie { padding-bottom: calc(96px + var(--sa-abajo)); }

/* El teléfono del pie es el único dato que se puede TOCAR. 44px con relleno
   hacia fuera y margen negativo, para no partir la línea. */
.dato-pie { display: flex; align-items: center; gap: 8px; margin: 4px 0; }
.dato-pie svg { width: 17px; height: 17px; flex-shrink: 0; color: var(--acento); }
.dato-pie a { color: var(--acento-texto); padding: 13px 14px; margin: -13px -14px; }
.dato-pie a:hover { text-decoration: underline; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ── Botón flotante de WhatsApp ─────────────────────────────────────── */
.flotante-wa {
  position: fixed; z-index: 50;
  right: 18px; bottom: calc(18px + var(--sa-abajo));
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  background: #25D366; color: #fff;
  box-shadow: 0 6px 20px rgb(0 0 0 / .3);
  transition: transform .18s var(--curva);
}
.flotante-wa:hover { transform: scale(1.07); }
.flotante-wa svg { width: 29px; height: 29px; }

/* ── Aviso flotante ─────────────────────────────────────────────────── */
.aviso-flotante {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(20px + var(--sa-abajo)); z-index: 80;
  background: var(--fondo-3); color: var(--texto);
  border: 1px solid var(--borde); border-left: 3px solid var(--acento);
  padding: 13px 18px; border-radius: var(--radio);
  box-shadow: 0 12px 34px rgb(0 0 0 / .3);
  max-width: min(92vw, 420px); font-size: .94rem;
}
.aviso-flotante.mal { border-left-color: #dc2626; }

/* ── Sitio inexistente ──────────────────────────────────────────────── */
.vacio-total { min-height: 100svh; display: grid; place-content: center; text-align: center; gap: 14px; padding: 26px; }
.vacio-total h1 { font-size: clamp(30px, 6vw, 48px); }
.vacio-total p { color: var(--gris); margin: 0; }

/* ── Secciones que crea el dueño ────────────────────────────────────── */
.seccion-propia { display: grid; gap: 28px; align-items: center; grid-template-columns: 1fr 1fr; }
.seccion-propia[data-disposicion="ancho"] { grid-template-columns: 1fr; }
/* El orden VISUAL cambia, el del DOM no: el tabulador y el lector de
   pantalla siguen encontrando el texto antes que la foto. */
.seccion-propia[data-disposicion="derecha"] .sp-imagen { order: 2; }
.seccion-propia .sp-imagen img { width: 100%; max-height: 420px; object-fit: cover; }
.seccion-propia .sp-texto h2 { margin-top: 0; }
.seccion-propia .sp-texto p { margin: 0 0 14px; line-height: 1.7; color: var(--gris); }
.seccion-propia[data-disposicion="ancho"] .sp-texto { max-width: 68ch; }
@media (max-width: 760px) {
  .seccion-propia { grid-template-columns: 1fr; gap: 20px; }
  .seccion-propia .sp-imagen { order: 0 !important; }
  .seccion-propia .sp-imagen img { max-height: 240px; }
}

/* ── La hoja de la opinión ──────────────────────────────────────────── */
.hoja-opinion {
  position: fixed; inset: 0; z-index: 95;
  background: var(--fondo); overflow-y: auto;
  padding: calc(28px + var(--sa-arriba)) 20px calc(28px + var(--sa-abajo));
  display: grid; place-items: center;
}
.opinion-caja { width: 100%; max-width: 440px; text-align: center; }
.opinion-caja h1 { font-size: clamp(30px, 6vw, 44px); margin: 0 0 10px; }
.op-sub { color: var(--gris); margin: 0 0 26px; }
.op-estrellas { display: flex; justify-content: center; gap: 6px; }
.op-estrellas button {
  /* 48px: es el control principal de la pantalla y se toca con el pulgar. */
  width: 48px; height: 48px; padding: 0; background: none; border: 0;
  font-size: 34px; line-height: 1; cursor: pointer; color: var(--borde);
  transition: color .14s, transform .14s;
}
.op-estrellas button:hover { transform: scale(1.12); }
.op-estrellas button.puesta { color: var(--acento); }
.op-estrellas button:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; border-radius: 8px; }
.op-nota { color: var(--gris); font-size: .88rem; margin: 10px 0 24px; min-height: 1.3em; }
.op-campo { display: block; text-align: left; margin-bottom: 16px; }
.op-campo > span { display: block; font-size: .88rem; font-weight: 700; margin-bottom: 7px; }
.op-campo em { font-style: normal; color: var(--gris); font-weight: 400; }
.op-campo textarea, .op-campo input {
  width: 100%; padding: 12px 14px;
  border: 1px solid var(--borde); border-radius: var(--radio);
  background: var(--fondo-3); color: var(--texto);
  font: inherit; font-size: 16px; font-family: inherit; resize: vertical;
}
.op-campo textarea:focus, .op-campo input:focus {
  outline: 2px solid rgb(var(--acento-rgb) / .35); outline-offset: 1px; border-color: var(--acento);
}
.hoja-opinion .btn-primario { width: 100%; }
.op-fino { color: var(--gris); font-size: .82rem; margin: 14px 0 0; line-height: 1.5; }

@media (max-width: 560px) { .seccion { padding: 58px 0; } }