/* =====================================================================
   PÁGINA CARTA (carta.html)
   ---------------------------------------------------------------------
   Igual a la carta de la versión 2 (oscura).
   Las letras coinciden con los comentarios del HTML:
     A · Portada con encabezado encima de la foto
     B · Pestañas + leyenda + buscador (franja carbón)
     C · Productos (los dibuja js/carta.js)
     D · Aviso final
     E · Footer (css/secciones/17-footer.css)
   ===================================================================== */


/* Texto solo para lectores de pantalla (no se ve) */
.visualmente-oculto {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* Colores de los íconos */
.icono-favorito { color: var(--cobre); }
.icono-frio     { color: #9EC3D6; }


/* =====================================================================
   A · PORTADA CON ENCABEZADO
   ===================================================================== */
.carta-portada {
  position: relative;
  height: 560px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.carta-portada__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.carta-portada__capa { position: absolute; inset: 0; background: rgba(8, 6, 5, .66); }

/* Encabezado: volver · logo · botón (encima de la foto) */
.carta-encabezado {
  position: relative;
  height: 110px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
}
.carta-encabezado__volver { color: var(--texto); text-decoration: none; font-size: 16px; }
.carta-encabezado__volver:hover { color: var(--cobre); }
.carta-encabezado__logo { justify-self: center; display: block; line-height: 0; text-decoration: none; }
/* Alto del logo (img/logo.png). El ancho se ajusta solo */
.carta-encabezado__logo img { height: 78px; width: auto; }
.carta-encabezado__boton {
  justify-self: end;
  padding: 14px 28px;
  border: 1px solid var(--texto);
  color: var(--texto);
  text-decoration: none;
  font-size: 16px;
  letter-spacing: 1px;
  white-space: nowrap;
  transition: background var(--transicion), color var(--transicion);
}
.carta-encabezado__boton:hover { background: var(--texto); color: var(--negro); }

/* Título centrado */
.carta-portada__texto {
  position: relative;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  text-align: center;
  padding-bottom: 40px;
  animation: subir 1s ease both;
}
.carta-portada__etiqueta { font-size: 18px; letter-spacing: 6px; }
.carta-portada__titulo {
  font-size: clamp(40px, 6.4vw, 92px);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.02em;
  max-width: 1100px;
}


/* =====================================================================
   B · PESTAÑAS + LEYENDA + BUSCADOR
   ===================================================================== */
.carta-menu { background: var(--carbon); padding: 56px 0 8px; }

.carta-menu__columna { display: flex; flex-direction: column; align-items: center; gap: 22px; }

/* Grupo de pestañas unidas, con borde */
.carta-menu__pestanas { display: flex; border: 1px solid #6E6660; }

.pestana {
  min-height: 48px;
  padding: 0 34px;
  border: 0;
  background: transparent;
  color: var(--texto);
  font-family: var(--fuente);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--transicion), color var(--transicion);
}
.pestana:hover { background: rgba(242, 237, 231, .08); }
.pestana--activa,
.pestana--activa:hover { background: var(--texto); color: var(--negro); }

/* Leyenda */
.carta-menu__leyenda { display: flex; gap: 24px; font-size: 14px; color: var(--texto-suave); }
.carta-menu__leyenda b { font-weight: 400; }

/* Buscador (línea simple, sin fondo) */
.carta-buscador {
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(460px, 100%);
  min-height: 46px;
  padding: 0 4px;
  border-bottom: 1px solid #6E6660;
  color: var(--texto-suave);
  transition: border-color var(--transicion);
}
.carta-buscador:focus-within { border-color: var(--cobre); }

/* Botón "Descargar carta (PDF)" (debajo del buscador) */
.carta-descargar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: transparent;
  border: 1px solid #6E6660;
  color: var(--texto);
  font-family: var(--fuente);
  font-size: 14px;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: border-color var(--transicion), color var(--transicion);
}
.carta-descargar:hover { border-color: var(--cobre); color: var(--cobre); }
.carta-descargar:disabled { opacity: .6; cursor: wait; }
.carta-buscador input {
  flex-grow: 1;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--texto);
  font-family: var(--fuente);
  font-size: 16px;
}
.carta-buscador input::placeholder { color: var(--texto-apagado); }


/* =====================================================================
   C · PRODUCTOS
   ===================================================================== */
.carta-productos { min-height: 60vh; padding-top: 72px; }

/* Una categoría */
.categoria-carta { margin-bottom: clamp(64px, 7vw, 96px); animation: subir .5s ease both; }
.categoria-carta:last-child { margin-bottom: 0; }

.categoria-carta__cabecera { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; margin-bottom: 40px; }
.categoria-carta__titulo { font-size: clamp(38px, 4vw, 56px); font-weight: 300; letter-spacing: -0.02em; line-height: 1.05; }
.categoria-carta__cabecera .linea { width: 70px; }
/* Nota de la categoría (ej. "No aplican otros descuentos."): en rojo y negrita para que se vea sí o sí */
.categoria-carta__nota { font-size: 16px; font-weight: 700; color: #FF0000; letter-spacing: .01em; }

/* Grilla de productos: 3 columnas */
.categoria-carta__productos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 36px 40px;
}

/* Un producto: nombre ····· precio / descripción */
.producto-carta { display: flex; flex-direction: column; gap: 6px; }
.producto-carta__fila { display: flex; align-items: baseline; gap: 10px; }
.producto-carta__nombre { font-size: 22px; font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; }
.producto-carta__icono { font-weight: 400; }
.producto-carta__icono--favorito { color: var(--cobre); }
.producto-carta__icono--frio { color: #9EC3D6; }
.producto-carta__puntos { flex-grow: 1; min-width: 16px; border-bottom: 1px dotted #6E6660; transform: translateY(-5px); }
.producto-carta__precio { font-size: 17px; letter-spacing: 1px; color: var(--cobre-instagram);   /* PRUEBA: antes var(--cobre) */ white-space: nowrap; }
.producto-carta__descripcion { font-size: 16px; line-height: 1.55; color: var(--texto-suave); }

/* Mensaje del buscador */
.carta-resultados { margin-bottom: 48px; text-align: center; color: var(--texto-suave); font-size: 16px; }
.carta-resultados--vacio { padding: 48px 0; font-size: 18px; }


/* =====================================================================
   D · AVISO FINAL
   ===================================================================== */
.carta-aviso { background: var(--negro); padding: 36px 0; }
.carta-aviso__fila { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 16px; }
.carta-aviso__link { color: var(--cobre); font-weight: 700; }


/* =====================================================================
   TABLET Y CELULAR
   ===================================================================== */
@media (max-width: 1024px) {
  .carta-portada { height: 460px; }
  .carta-encabezado { height: 90px; }
  .carta-encabezado__logo img { height: 62px; }
  .carta-encabezado__volver span { display: none; }
  .carta-encabezado__boton { padding: 12px 20px; font-size: 14px; }
  .categoria-carta__productos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 36px; }
  .pestana { padding: 0 24px; font-size: 14px; }
}

@media (max-width: 700px) {
  .carta-portada { height: 400px; }
  .carta-encabezado { height: 70px; grid-template-columns: 1fr auto 1fr; gap: 8px; }
  .carta-encabezado__logo img { height: 50px; }
  .carta-encabezado__boton { padding: 9px 14px; font-size: 13px; }
  .carta-portada__etiqueta { font-size: 13px; letter-spacing: 5px; }
  .carta-menu { padding-top: 32px; }
  /* Pestañas en 2 filas de 2 */
  .carta-menu__pestanas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .pestana { padding: 0 8px; font-size: 13px; letter-spacing: 1.5px; }
  .categoria-carta__productos { grid-template-columns: 1fr; gap: 26px; }
  .producto-carta__nombre { font-size: 19px; }
  .producto-carta__descripcion { font-size: 15px; }
  .carta-aviso__fila { flex-direction: column; text-align: center; }
}