/* ============================================================
   Barbería Lastarria · componentes
   Botones y piezas reutilizables. Depende de tokens.css.
   Se amplía en la etapa 2 con tarjetas, acordeón, migas y
   los estados A/B de imagen.
   ============================================================ */

/* ---------- Botones ------------------------------------------------------
   El Ámbar es el ÚNICO color de acción. La jerarquía se marca con tamaño
   y posición, nunca con un segundo color. Sin sombras: solo borde de 1px.
   ------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  min-height: var(--boton-alto-movil);      /* 48px, nunca menos */
  padding: 13px 22px;
  border: 1px solid transparent;
  border-radius: var(--radio);
  font-family: var(--sans);
  font-size: 14.5px;
  font-weight: var(--p-medio);
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

/* Primario · Ámbar. Texto SIEMPRE en #412402 */
.btn-primario {
  background: var(--ambar);
  border-color: var(--ambar);
  color: var(--sobre-ambar);
}
.btn-primario:hover {
  background: var(--ambar-hover);
  border-color: var(--ambar-hover);
  color: var(--sobre-ambar);
}

/* Secundario · outline */
.btn-secundario {
  background: transparent;
  border-color: var(--linea);
  color: var(--hueso);
}
.btn-secundario:hover {
  background: rgba(244, 242, 237, .06);
  border-color: var(--linea);
  color: var(--hueso);
}

/* WhatsApp · también en Ámbar. No hay un segundo color de acción. */
.btn-whatsapp {
  background: var(--ambar);
  border-color: var(--ambar);
  color: var(--sobre-ambar);
}
.btn-whatsapp:hover {
  background: var(--ambar-hover);
  border-color: var(--ambar-hover);
  color: var(--sobre-ambar);
}

/* Reservado · fase futura. Mismo alto y ancho que el activo, para que
   al habilitarlo no cambie el layout.                                  */
.btn-reservado,
.btn:disabled,
.btn[aria-disabled="true"] {
  background: transparent;
  border: 1px dashed var(--linea-fuerte);
  color: var(--humo);
  cursor: not-allowed;
}
.btn-reservado:hover { background: transparent; }

/* Etiqueta "Próximamente" dentro del botón reservado */
.btn-badge {
  font-family: var(--condensada);
  font-weight: var(--p-etiqueta);
  font-size: 11px;              /* piso de legibilidad; el diseño pedía 10,5 */
  text-transform: uppercase;
  letter-spacing: .14em;
  border: 1px solid var(--linea-fuerte);
  padding: 2px 6px;
  color: var(--humo);
}

.btn-ancho { width: 100%; }


/* ---------- Botón de ícono ------------------------------------------------
   Área táctil de 44×44 como mínimo, aunque el ícono se vea más pequeño.
   ------------------------------------------------------------------------- */

.btn-icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tactil-min);
  min-width: var(--tactil-min);
  height: var(--tactil-min);
  padding: 0;
  background: transparent;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  color: var(--hueso);
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.btn-icono:hover { border-color: var(--hueso); }

.btn-icono-ambar {
  background: var(--ambar);
  border-color: var(--ambar);
  color: var(--sobre-ambar);
}
.btn-icono-ambar:hover {
  background: var(--ambar-hover);
  border-color: var(--ambar-hover);
  color: var(--sobre-ambar);
}


/* ---------- Enlace con flecha --------------------------------------------- */

.enlace-flecha {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  font-size: 14.5px;
  font-weight: var(--p-medio);
  color: var(--ambar);
}
.enlace-flecha:hover { color: var(--hueso); }
.enlace-flecha svg { flex-shrink: 0; }


/* ============================================================
   FOCO DE TECLADO
   Sobre fondo oscuro el foco por defecto del navegador casi no
   se ve. Anillo Ámbar de 2px con 2px de separación: el hueco
   deja pasar el fondo oscuro y separa el anillo del botón,
   incluso cuando el botón también es Ámbar.
   Nunca se usa outline:none sin reemplazo. El auditor lo revisa.
   ============================================================ */

.btn:focus-visible,
.btn-icono:focus-visible,
.nav-item:focus-visible,
.menu-enlace:focus-visible,
.acordeon-boton:focus-visible,
.chat-opcion:focus-visible,
.card-agregar:focus-visible,
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: var(--foco);
  outline-offset: var(--foco-offset);
}

/* En elementos pegados al borde de su contenedor, el anillo se
   dibuja hacia adentro para que no lo recorte el overflow. */
.foco-interior:focus-visible { outline-offset: -3px; }


/* ============================================================
   BADGES
   ============================================================ */

.badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--condensada);
  font-weight: var(--p-etiqueta);
  font-size: var(--t-badge);
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: .12em;
  padding: 2px 5px;
  white-space: nowrap;
}
/* Texto en Negro humo, no en Hueso: el diseño ponía Hueso sobre Humo
   y eso da 2,36:1, muy bajo el mínimo de 4,5:1. Negro humo sobre Humo
   da 7,26:1 y el badge sigue leyéndose como gris apagado. */
.badge-agotado { background: var(--humo);  color: var(--negro-humo); }
.badge-oferta  { background: var(--ambar); color: var(--sobre-ambar); }
.badge-promo   { background: transparent;  color: var(--ambar); border: 1px solid var(--ambar); }


/* ============================================================
   ESTADOS DE IMAGEN · A sin foto, B con foto
   Cada espacio es la MISMA caja en los dos estados: misma
   proporción y mismas medidas. Cuando llegue la foto entra el
   estado B y no se mueve nada más.
   ============================================================ */

.medio {
  position: relative;
  width: 100%;
  border: var(--borde);
  background: var(--grafito);
  overflow: hidden;
}
.medio > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Proporciones */
.medio-1-1  { aspect-ratio: 1 / 1; }
.medio-4-5  { aspect-ratio: 4 / 5; }
.medio-4-3  { aspect-ratio: 4 / 3; }
.medio-16-9 { aspect-ratio: 16 / 9; }
.medio-16-10{ aspect-ratio: 16 / 10; }

/* --- Estado A · retrato de equipo: iniciales centradas --- */
.medio-iniciales {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-weight: var(--p-h1);
  letter-spacing: -.04em;
  font-size: clamp(28px, 22cqw, 56px);
  color: var(--humo);
  line-height: 1;
  container-type: inline-size;
}

/* --- Estado A · tarjeta de producto: la marca tipografiada.
       Abajo a la izquierda, para que repetida en la grilla de
       tres columnas se lea como un patrón y no como error.

       El tamaño escala con el ancho de la caja, no es fijo: a 320px
       la tarjeta baja a 93px y una marca larga se cortaba contra el
       borde. El piso de 11px se respeta igual.
       `overflow-wrap: anywhere` es la última red: una sola palabra
       más larga que la caja se parte en vez de desbordar. --- */
.medio-marca {
  display: flex;
  align-items: flex-end;
  padding: 9px;
  font-family: var(--serif);
  font-weight: var(--p-h2);
  font-size: 13px;
  line-height: 1.15;
  color: var(--humo);
  letter-spacing: -.02em;
  /* Última red: una palabra más larga que la caja se parte en vez
     de desbordar. Pasa con marcas largas en tarjetas angostas. */
  overflow-wrap: anywhere;
  hyphens: auto;
}

/* Bajo 375px la tarjeta cae a 93px y 13px ya no entra cómodo.
   NO se usa una container query acá: un elemento no puede consultar
   su propio tamaño con cqw —`container-type` sirve para sus
   descendientes— así que el valor caía al viewport y daba 13px en
   todos los anchos. Media query, que es determinista. */
@media (max-width: 374px) {
  .medio-marca { font-size: 11px; padding: 8px; }
}

/* En la columna ancha de escritorio la marca puede crecer. */
@media (min-width: 1024px) {
  .medio-marca { padding: 12px; font-size: 16px; }
}

/* --- Estado A · bloque editorial: el texto del mural --- */
.medio-editorial {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 14px;
  padding: 30px;
}
.medio-editorial .antetitulo { letter-spacing: .2em; }
.medio-editorial .mural {
  font-family: var(--serif);
  font-weight: var(--p-h1);
  letter-spacing: -.04em;
  line-height: 1;
  font-size: clamp(24px, 11cqw, 44px);
  color: var(--humo);
}

/* --- Estado A · miniatura de carrito 64×64 --- */
.medio-mini {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-weight: var(--p-h2);
  font-size: 18px;
  color: var(--humo);
}

/* --- Estado A · hero: los tags cargan el peso visual --- */
.medio-hero {
  border: 0;
  background: var(--negro-humo);
}
.medio-hero .hero-tags { opacity: var(--tag-opacidad-hero); }

/* --- Estado B · velo sobre la foto del hero, para que el texto
       no tenga que moverse cuando entre la imagen --- */
.medio-hero.con-foto::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--velo-hero);
}

/* Producto agotado: foto desaturada */
.medio.agotado > img { filter: grayscale(1); opacity: .55; }

/* Los badges se posan sobre la caja */
.medio > .badge { position: absolute; top: 5px; z-index: 2; }
.medio > .badge-agotado { left: 5px; }
.medio > .badge-oferta  { right: 5px; }


/* ============================================================
   TARJETA DE PRODUCTO
   Móvil y tablet: 3 columnas. Escritorio: 4.
   A 375px la tarjeta mide 111,7px y esa es la medida que manda:
   375 − 24 de padding lateral − 16 de separación = 111,7
   ============================================================ */

.grilla-catalogo {
  display: grid;
  grid-template-columns: repeat(3, 1fr);   /* móvil y tablet */
  gap: 16px 8px;
}
@media (min-width: 1024px) {
  .grilla-catalogo { grid-template-columns: repeat(4, 1fr); gap: 28px 20px; }
}

.card-producto {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;              /* deja que el texto se recorte */
}

.card-marca {
  font-family: var(--condensada);
  font-weight: var(--p-etiqueta);
  font-size: var(--t-card-marca);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--humo);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-nombre {
  /* Inter, no la serif: es un <h2> y heredaría Fraunces de base.css */
  font-family: var(--sans);
  font-size: 12px;
  font-weight: var(--p-cuerpo);
  letter-spacing: 0;
  line-height: 1.3;
  color: var(--hueso);

  /* Recorte a dos líneas con elipsis.
     Solo las tres propiedades de webkit. NO agregar el `line-clamp`
     estándar al lado: en Chrome hace que `display` compute a
     flow-root y el recorte deja de funcionar — el texto se corta
     sin elipsis y desborda la caja. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* Formato y descripción corta: solo en escritorio.
   A 111,7px no caben. */
.card-formato,
.card-corta { display: none; }
@media (min-width: 1024px) {
  .card-formato { display: block; font-size: 12.5px; color: var(--humo); }
  .card-corta   { display: block; font-size: 13px; line-height: 1.5; color: var(--humo); }
  .card-nombre  { font-size: 15px; font-weight: var(--p-medio); line-height: 1.35; }
}

.card-pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-1);
  min-width: 0;
}

/* El precio de la tarjeta va en Hueso, no en Ámbar: en una grilla
   de 12 precios el Ámbar repetido deja de ser color de acción. */
.card-precio {
  font-size: 13px;
  font-weight: var(--p-medio);
  color: var(--hueso);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* El precio anterior tachado NO se muestra en móvil ni en tablet.
   Medido a 375px: "$12.900" tachado + "$9.900" + el área táctil de
   44px piden ~138px en una tarjeta de 111,66px, y el botón "+" se
   salía sobre la columna vecina. En móvil la señal de descuento la
   carga el badge "Oferta". El precio anterior vuelve en escritorio. */
.card-precio .antes { display: none; }

@media (min-width: 1024px) {
  .card-precio .antes {
    display: inline;
    color: var(--humo);
    text-decoration: line-through;
    font-weight: var(--p-cuerpo);
    margin-right: 4px;
  }
}

/* Agregar: círculo de 30px dentro de un área táctil de 44×44.
   Nunca texto: "Agregar al carrito" no cabe en 111,7px.
   Los márgenes negativos recuperan el espacio que el área táctil
   le quita a la tarjeta, sin bajar de 44×44 reales.            */
.card-agregar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--tactil-min);
  height: var(--tactil-min);
  min-width: var(--tactil-min);
  /* -7px y no los -10px del diseño: con -10 el área táctil terminaba
     2px DENTRO de la tarjeta vecina (separación de 8px), y el círculo
     quedaba a medio camino entre dos precios, sin saber a cuál pertenece.
     Con -7 el círculo queda al ras del borde de la tarjeta y el área
     táctil se queda entera dentro de la separación. */
  margin: -8px -7px -8px 0;
  padding: 0;
  background: none;
  border: 0;
  flex-shrink: 0;
  cursor: pointer;
}
.card-agregar span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radio-circulo);
  background: var(--ambar);
  color: var(--sobre-ambar);
  font-size: 18px;
  line-height: 1;
  transition: background-color .15s ease;
}
.card-agregar:hover span { background: var(--ambar-hover); }
.card-agregar:disabled { cursor: not-allowed; }
.card-agregar:disabled span { background: var(--linea-fuerte); color: var(--humo); }


/* ============================================================
   ACORDEÓN · usado en las FAQ
   Las preguntas van VISIBLES: FAQPage solo se marca si se ven.
   ============================================================ */

.acordeon { border-top: var(--borde); }
.acordeon-item { border-bottom: var(--borde); }

.acordeon-boton {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  width: 100%;
  min-height: var(--boton-alto-movil);
  padding: var(--e-4) 0;
  background: none;
  border: 0;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: var(--p-medio);
  line-height: 1.5;
  color: var(--hueso);
  text-align: left;
  cursor: pointer;
}
.acordeon-boton:hover { color: var(--ambar); }
.acordeon-signo {
  flex-shrink: 0;
  font-size: 20px;
  line-height: 1;
  color: var(--ambar);
}
.acordeon-panel {
  padding: 0 0 var(--e-4);
  max-width: 68ch;
  font-size: 15px;
  line-height: 1.7;
  color: var(--humo);
}
.acordeon-panel[hidden] { display: none; }


/* ============================================================
   MIGAS DE PAN
   ============================================================ */

.migas {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--e-2);
  font-size: 12.5px;
  color: var(--humo);
}
.migas a { color: var(--humo); }
.migas a:hover { color: var(--ambar); }
.migas li { display: flex; align-items: center; gap: var(--e-2); }
.migas .sep { color: var(--linea-fuerte); }
.migas [aria-current="page"] { color: var(--hueso); }


/* ============================================================
   FILA DE PRECIO · la carta de servicios
   Fila de menú, no tarjeta cuadrada.
   ============================================================ */

.servicio {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: baseline;
  gap: var(--e-4) var(--e-5);
  padding: var(--e-5) 0;
  border-bottom: var(--borde);
}
.servicio-nombre {
  font-size: 16px;
  font-weight: var(--p-medio);
  line-height: 1.4;
  color: var(--hueso);
}
.servicio-desc {
  grid-column: 1 / -1;
  margin-top: calc(-1 * var(--e-2));
  font-size: 14px;
  line-height: 1.6;
  color: var(--humo);
  max-width: 62ch;
}
.servicio-duracion {
  font-size: 13.5px;
  color: var(--humo);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.servicio-precio {
  font-size: 17px;
  font-weight: var(--p-precio);
  color: var(--ambar);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.servicio-aviso {
  grid-column: 1 / -1;
  margin-top: var(--e-2);
  padding: var(--e-3);
  border-left: 2px solid var(--ambar);
  background: var(--grafito);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--hueso);
}

/* Extras: lista compacta de añadidos, no filas completas */
.servicio-extra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  padding: var(--e-3) 0;
  border-bottom: var(--borde);
  font-size: 15px;
}
.servicio-extra .servicio-precio { font-size: 15px; }

@media (max-width: 767px) {
  .servicio { grid-template-columns: 1fr auto; gap: var(--e-2) var(--e-4); }
  .servicio-duracion { grid-column: 1; }
  .servicio-precio { grid-column: 2; grid-row: 1; }
}


/* ============================================================
   TARJETA GENÉRICA
   Superficie elevada. Se separa por borde de 1px, nunca sombra.
   ============================================================ */

.card {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  padding: var(--e-5);
  background: var(--grafito);
  border: var(--borde);
}
.card-enlace:hover { border-color: var(--hueso); }
.card-titulo {
  font-family: var(--serif);
  font-weight: var(--p-h2);
  font-size: 22px;
  letter-spacing: var(--t-h2-track);
  color: var(--hueso);
}
.card-texto { font-size: 14.5px; line-height: 1.65; color: var(--humo); }