/* ==========================================================================
   DELARTE CAFÉ ESPECIAL · TIPOGRAFÍA WEB
   delartecafe.co
   Fuente: DELARTE_Manual_Estilo_Web.pdf, página 03

   UNA SOLA FAMILIA: Inter · pesos 300, 400 y 600
   Licencia SIL Open Font License: uso comercial libre, sin costo.

   Retiradas: Bebas Neue, Montserrat, Cormorant Garamond, Helvetica Neue.
   Segoe UI queda solo como fallback local si Inter no ha cargado.

   Para cambiar la fuente de TODO el sitio, edite --dl-fuente.
   ========================================================================== */

:root {
  --dl-fuente: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* pesos: solo estos tres se cargan */
  --dl-light: 300;
  --dl-regular: 400;
  --dl-semibold: 600;

  /* escala (escritorio) */
  --dl-display: 48px;
  --dl-h1: 36px;
  --dl-h2: 28px;
  --dl-h3: 20px;
  --dl-cuerpo: 17px;
  --dl-etiqueta: 12px;
  --dl-minimo: 14px;          /* ningún texto por debajo de esto */

  --dl-interlinea-texto: 1.6;
  --dl-interlinea-titulos: 1.15;
}

/* Forzamos la familia en TODO el árbol para vencer estilos heredados
   antiguos (Cormorant, Bebas, Montserrat, Helvetica Neue) y atributos
   style="font-family:…" inline en elementos concretos. */
*, *::before, *::after {
  font-family: var(--dl-fuente) !important;
}

body {
  font-size: var(--dl-cuerpo);
  font-weight: var(--dl-regular);
  line-height: var(--dl-interlinea-texto);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Ancho de línea cómodo: 60–72 caracteres */
p { max-width: 68ch; }

.dl-display {
  font-size: var(--dl-display) !important;
  font-weight: var(--dl-light) !important;
  letter-spacing: -0.01em !important;
  line-height: var(--dl-interlinea-titulos) !important;
}

h1, .hero-title, .page-hero h1, .blog-header h1 {
  font-weight: var(--dl-light) !important;
  letter-spacing: -0.01em !important;
  line-height: var(--dl-interlinea-titulos) !important;
}

h2, .section-title {
  font-weight: var(--dl-semibold) !important;
  letter-spacing: 0 !important;
  line-height: var(--dl-interlinea-titulos) !important;
}

h3 {
  font-weight: var(--dl-semibold) !important;
  letter-spacing: 0 !important;
  line-height: var(--dl-interlinea-titulos) !important;
}

/* Solo cuando el elemento no tiene tamaño específico ya asignado, aplicamos
   la escala del manual. Los tamaños "hero grande" del sitio se conservan. */
h1:not([class]) { font-size: var(--dl-h1); }
h2:not([class]) { font-size: var(--dl-h2); }
h3:not([class]) { font-size: var(--dl-h3); }

/* Etiquetas, antetítulos y texto de botones: SCA +84, RESERVAR, VER LA CARTA */
.dl-etiqueta,
.dl-boton {
  font-size: var(--dl-etiqueta);
  font-weight: var(--dl-semibold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

small, .dl-nota { font-size: var(--dl-minimo); }

/* Móvil: el manual fija los tamaños de escritorio; en pantallas pequeñas se
   reducen solo los tres titulares grandes para que no partan palabras. */
@media (max-width: 767px) {
  :root {
    --dl-display: 36px;
    --dl-h1: 30px;
    --dl-h2: 24px;
  }
}

/* ==========================================================================
   ESTILO "A + C" — Solo para /menu.html
   Fraunces en títulos, nombres e inglés. Inter en precios, descripciones,
   navegación y botones. Verde pino #102F2A como tinta principal, verde medio
   #4F7152 para el título de cada hoja. No cambia fondos, fotos, cajas verdes
   ni estructura HTML.
   ========================================================================== */
:root{
  --serif: "Fraunces", Georgia, serif;
  --tinta: #102F2A;
  --tinta-suave: rgba(16,47,42,.72);
  --acento: #C7353F;
  --verde: #4F7152;
}
body{ font-optical-sizing: auto; }

.cursive-lg{
  font-family: var(--serif) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  letter-spacing: -.01em !important;
}
.page-title{
  font-family: var(--serif) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: -.01em !important;
  font-size: 54px !important;
  line-height: 1 !important;
  color: var(--verde) !important;
  text-align: center !important;
}
.page-title-en{
  font: 600 10.5px/1 Inter, system-ui, sans-serif !important;
  letter-spacing: .3em !important;
  text-transform: uppercase !important;
  color: var(--tinta-suave) !important;
  text-align: center !important;
  margin-top: 14px !important;
}
.page-title-en::before,
.page-title-en::after{
  content: "\2014";
  color: var(--acento);
  margin: 0 9px;
  letter-spacing: 0;
}
.sec-title{
  font-family: var(--serif) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: -.01em !important;
  font-size: 28px !important;
  color: var(--tinta) !important;
  text-align: center !important;
  margin-top: 30px !important;
}
/* h3.sec-title que actúa como nombre de plato con precio inline: a la izquierda */
.sec-title.sec-title-inline{
  text-align: left !important;
  font-size: 19px !important;
  margin-top: 14px !important;
}

/* Dentro de las cajas verdes/adiciones, el contenido va alineado a la izquierda
   (misma estética que el resto de la carta). El centrado que se quería era
   vertical (padding simétrico arriba/abajo), no horizontal. */
.box > .sec-title,
.box > .sec-title-en,
.box > .item-desc,
.box > .item-desc em,
.box-dark > .sec-title,
.box-dark > .sec-title-en,
.box-dark > .item-desc,
.box-dark > .item-desc em {
  text-align: left !important;
}
.sec-title-en{
  font-family: var(--serif) !important;
  font-style: italic !important;
  font-size: 14.5px !important;
  color: var(--tinta-suave) !important;
  text-align: center !important;
}
.item-name{
  font-family: var(--serif) !important;
  font-weight: 600 !important;
  font-size: 19px !important;
  color: var(--tinta) !important;
}
.item-name-en{
  font-family: var(--serif) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: 15px !important;
  color: var(--tinta-suave) !important;
}
.item-price{
  font: 600 15.5px/1 Inter, system-ui, sans-serif !important;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--tinta) !important;
}
.item-desc{
  font-family: Inter, system-ui, sans-serif !important;
  font-weight: 300 !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
  color: var(--tinta-suave) !important;
}
.item-desc em{
  display: block;
  margin-top: 4px;
  font-family: var(--serif) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: 14.5px !important;
  color: var(--tinta-suave) !important;
}
/* En la carta la hoja es ancha: deja que descripciones, títulos y traducciones
   usen todo el ancho disponible y evita cortes de línea innecesarios. */
.sheet .item-desc,
.sheet .item-desc em,
.sheet .item-name,
.sheet .item-name-en,
.sheet .sec-title,
.sheet .sec-title-en,
.sheet .page-title,
.sheet .page-title-en,
.sheet p, .sheet span, .sheet strong, .sheet em {
  max-width: none !important;
}
@media (max-width: 767px){
  .page-title{ font-size: 42px !important; }
  .sec-title{ font-size: 25px !important; }
  .item-name{ font-size: 17.5px !important; }
}

/* ==========================================================================
   ESTILO "A + C" EXTENDIDO — Aplica Fraunces a los titulares del RESTO del
   sitio (landing, about, tienda, privacy, pricing, resenas, blog, 404).
   El cuerpo/navegación queda en Inter — coherencia con el manual.
   ========================================================================== */
h1, h2, h3,
.hero-title, .section-title,
.page-hero h1, .page-body h2, .page-body h3,
.price-body h2, .price-body h3,
.blog-header h1, .blog-card h2,
.err-wrap .code, .err-wrap h1,
.sedes-mini strong,
.sede-card h3, .footer h4 {
  font-family: var(--serif) !important;
}
h1, .hero-title, .page-hero h1, .blog-header h1, .err-wrap .code, .err-wrap h1 {
  font-style: italic !important;
  font-weight: 400 !important;
  letter-spacing: -.01em !important;
}
h2, .section-title, .page-body h2, .price-body h2, .blog-card h2 {
  font-style: normal !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}
h3, .sede-card h3, .page-body h3, .price-body h3 {
  font-style: normal !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}

/* --------------------------------------------------------------------------
   Adiciones (.box-dark): la caja tiene fondo casi negro. Anula el color pino
   heredado del bloque A+C para que la letra se lea. Blanco puro para máximo
   contraste con el fondo casi-negro.
   -------------------------------------------------------------------------- */
.box-dark,
.box-dark *,
.box-dark .item-name,
.box-dark .item-price,
.box-dark .sec-title,
.box-dark h1, .box-dark h2, .box-dark h3,
.box-dark p, .box-dark span, .box-dark em, .box-dark strong,
.box-dark .item-name-en,
.box-dark .sec-title-en,
.box-dark .item-desc,
.box-dark .item-desc em {
  color: #ffffff !important;
}
.box-dark .item-name-en,
.box-dark .sec-title-en,
.box-dark .item-desc,
.box-dark .item-desc em {
  color: rgba(255, 255, 255, .78) !important;
}