/* ============================================================
   maQcaffé — CSS GLOBAL · Diseño 1B (Anton/Archivo/Newsreader)
============================================================ */

/* ============================================================
   FUENTES AUTOALOJADAS — Anton v27 + Archivo v25 (ambas OFL).
   Antes iban por @import a fonts.googleapis.com, lo que creaba una
   cadena de 3 saltos (style.css -> css2 -> woff2) Y, por la regla de
   "style-sheet-blocking scripts", retrasaba la ejecucion de
   components.js. Ahora viajan en este mismo CSS, asi que el blog
   (cuyos <head> genera /admin/ y no se pueden editar) las sigue
   recibiendo igual, pero sin cross-origin ni peticion intermedia.
   Archivo es VARIABLE (eje wght): un solo fichero cubre 400/600/700/800.
   latin-ext solo se descarga si aparece un caracter fuera de latin
   (el espanol no lo necesita): coste 0 en la practica.
============================================================ */
@font-face {
  font-family: 'Anton';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('/assets/fonts/anton-v27-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Anton';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('/assets/fonts/anton-v27-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal; font-weight: 100 900; font-stretch: 100%; font-display: swap;
  src: url('/assets/fonts/archivo-v25-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal; font-weight: 100 900; font-stretch: 100%; font-display: swap;
  src: url('/assets/fonts/archivo-v25-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── Fallbacks con metricas calcadas (matan el reflow del FOUT) ──────
   Medido: sin esto, el intercambio de fuente reflowea 249 px de
   documento (90,8 px por encima del pliegue) porque Anton es un 30%
   mas estrecha que Arial en mayusculas. Con size-adjust el salto
   above-the-fold es 0 px. Ratios medidos con canvas sobre el corpus
   real de titulares: Anton/Arial (mayusculas) = 0,695 · Archivo/Arial
   = 0,98. Vive en el CSS a proposito: asi tambien aplica al blog. */
@font-face {
  font-family: 'Anton Fallback';
  src: local('Arial'), local('Helvetica'), local('Liberation Sans'), local('Arimo'), local('Roboto');
  font-style: normal;
  size-adjust: 69.5%;
  ascent-override: 169.8%;
  descent-override: 47.5%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Archivo Fallback';
  src: local('Arial'), local('Helvetica'), local('Liberation Sans'), local('Arimo'), local('Roboto');
  font-style: normal;
  size-adjust: 98%;
  ascent-override: 89.8%;
  descent-override: 21.4%;
  line-gap-override: 0%;
}

:root {
  --espresso:  #111010;
  --ink:       #1a1414;
  --red:       #d81f1f;
  --caramel:   #d81f1f;   /* alias histórico: acento → rojo 1B */
  --gold:      #d81f1f;   /* alias histórico: acento dorado → rojo 1B */
  --taupe:     #6a5f59;
  --taupe-dark:#4a403b;
  --cream:     #f4efe9;
  --latte:     #e8ded6;
  --border-soft: #e0d6cd;
  --white:     #FFFFFF;

  /* Variantes accesibles del rojo para TEXTO (WCAG AA).
     --red queda reservado para superficies: botones, bandas, filetes.
     Sobre cream el --red daba 4.44:1 (falla el 4.5:1 de texto normal). */
  --red-text:    #c01919;   /* 5.41:1 sobre cream · 6.19:1 sobre blanco */
  --red-on-dark: #ff5c5c;   /* 6.28:1 sobre espresso · 6.49:1 sobre el footer */

  --font-display: 'Anton', 'Anton Fallback', 'Arial Narrow', sans-serif;
  --font-body:    'Archivo', 'Archivo Fallback', system-ui, sans-serif;
  --font-mono:    'Archivo', 'Archivo Fallback', system-ui, sans-serif; /* alias histórico */

  --radius-sm: 0;
  --radius-md: 0;
  --radius-lg: 16px;   /* solo fotografías */

  --max-w: 1280px;
  --section-py: 84px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: var(--cream);
  color: var(--ink);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  max-width: 100%;
}
::selection { background: var(--red); color: var(--white); }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

.container {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: 40px;
}

/* ============================================================
   BOTONES — cuadrados, uppercase (1B)
============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 16px 28px;
  border-radius: 0;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: opacity .18s, transform .15s, background .18s, color .18s;
  white-space: nowrap;
}
.btn:hover { opacity: .9; }
.btn:active { transform: scale(.98); }

.cta-band { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

.btn-primary { background: var(--red); color: var(--white); border-color: var(--red); }
.btn-primary:hover { background: #b81a1a; border-color: #b81a1a; opacity: 1; }
.btn-secondary { background: transparent; color: var(--ink); border-color: rgba(17,16,16,.35); }
.btn-secondary:hover { background: var(--espresso); color: var(--white); border-color: var(--espresso); opacity: 1; }
.btn-ghost-white { background: transparent; color: var(--white); border-color: rgba(255,255,255,.28); }
.btn-ghost-white:hover { background: rgba(255,255,255,.1); }
.btn-dark { background: var(--espresso); color: var(--white); border-color: var(--espresso); }
.btn-dark:hover { background: #000; opacity: 1; }

/* Botón outline sobre fondos oscuros (heros y secciones espresso) */
.hero .btn-secondary,
.section--espresso .btn-secondary,
.cta-final .btn-secondary {
  color: var(--white); border-color: rgba(255,255,255,.28);
}
.hero .btn-secondary:hover,
.section--espresso .btn-secondary:hover,
.cta-final .btn-secondary:hover { background: rgba(255,255,255,.1); color: var(--white); border-color: rgba(255,255,255,.4); }

.tag {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--red);
}
.tag--dark { background: transparent; color: var(--red); }
/* Eyebrows rojos ocultos en todo el sitio (peticion cliente) */
.tag, .hero-eyebrow { display: none !important; }

/* ============================================================
   PLACEHOLDERS DE IMAGEN
============================================================ */
.img-placeholder {
  background: var(--latte);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(26,20,20,.45);
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
  padding: 16px;
  border-radius: var(--radius-lg);
  border: 1px dashed rgba(26,20,20,.15);
  width: 100%;
}
.img-placeholder::before { content: attr(data-descripcion); }

/* ============================================================
   HEADER — barra oscura sticky (1B)
============================================================ */
/* Reserva la altura del header ANTES de que components.js lo inyecte
   por fetch(). Sin esto, la pagina entera salta 72px hacia abajo tras
   el primer pintado (era el segundo causante de CLS: 0.141).
   .header-inner mide 72px fijos en todos los breakpoints. */
#site-header { min-height: 72px; background: var(--espresso); }

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(17,16,16,.96);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: none;
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  gap: 24px;
}
.logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; transition: opacity .15s; }
.logo:hover { opacity: .8; }
.logo-mark { width: 36px; height: 36px; }

/* Wordmark tipográfico 1B */
.logo-word { display: flex; flex-direction: column; line-height: 1; }
.logo-word-name { font-family: var(--font-display); font-size: 26px; color: var(--white); letter-spacing: .02em; text-transform: uppercase; }
.logo-word-name span { color: var(--red); }
.logo-word-tag { font-size: 8px; letter-spacing: .3em; color: rgba(255,255,255,.45); margin-top: 3px; text-transform: uppercase; }

.logo-text { font-family: var(--font-display); font-size: 22px; font-weight: 400; color: var(--white); letter-spacing: .02em; text-transform: uppercase; }
.logo-text span { color: var(--red); }
.logo-tagline { font-size: 9px; color: rgba(255,255,255,.45); letter-spacing: .3em; display: block; margin-top: 2px; text-transform: uppercase; }

/* aspect-ratio reserva la caja exacta del logo antes de que el SVG
   decodifique. Sin esto la caja la marcaba el texto alt (277px en vez
   de los 132px reales) y empujaba el nav (causante de CLS 0.001).
   Va en el CSS y no solo en el HTML porque asi cubre tambien al blog.
   viewBox del SVG: 0 0 310.19 112.32 -> ratio 2.7617 */
.logo-img { height: 48px; width: auto; aspect-ratio: 201.39 / 71.22; display: block; }
.footer-logo { background: transparent; display: inline-flex; padding: 0; border-radius: 0; }
.footer-logo .logo-img { height: 44px; }

.nav-primary { display: flex; align-items: center; gap: 6px; }
.nav-primary a {
  font-size: 13px; font-weight: 600; color: rgba(255,255,255,.72);
  text-transform: uppercase; letter-spacing: .08em;
  padding: 8px 12px; border-radius: 0;
  transition: color .15s;
}
.nav-primary a:hover { background: transparent; color: var(--white); }

.header-right { display: flex; align-items: center; gap: 18px; }
.header-phone {
  font-family: var(--font-body); font-size: 13px; font-weight: 600;
  color: var(--white); display: flex; align-items: center; gap: 8px;
  letter-spacing: .04em;
}
.header-phone svg { display: block; width: 15px; height: 15px; color: var(--red); flex-shrink: 0; }
.header-phone:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.header-cta { padding: 10px 18px; font-size: 13px; letter-spacing: .06em; }

.burger {
  display: none; background: none; border: none; cursor: pointer;
  padding: 6px; flex-direction: column; gap: 5px;
}
.burger span { display: block; width: 22px; height: 2px; background: var(--white); border-radius: 2px; transition: transform .2s, opacity .2s; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav { display: none; flex-direction: column; background: var(--espresso); border-top: 1px solid rgba(255,255,255,.1); padding: 16px 24px 24px; gap: 4px; }
.mobile-nav.open { display: flex; }
.mobile-nav a { font-size: 15px; font-weight: 600; padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,.08); color: rgba(255,255,255,.85); text-transform: uppercase; letter-spacing: .06em; }
.mobile-nav a:last-of-type { border-bottom: none; }
.mobile-nav a:hover { color: var(--white); }
.mobile-nav .btn { margin-top: 12px; width: 100%; justify-content: center; }
.mobile-tel { display: flex; align-items: center; gap: 8px; font-family: var(--font-body); font-size: 15px; font-weight: 700; padding: 14px 0 0; color: var(--white); }
.mobile-tel svg { color: var(--red); }
.header-phone-mobile { display: none; }

/* El teléfono y el botón de la cabecera nunca se parten en varias líneas */
.header-phone, .header-cta { white-space: nowrap; flex-shrink: 0; }

/* Por debajo de ~1180px no caben logo + 6 enlaces + teléfono + botón:
   se pasa al menú hamburguesa (el teléfono queda como icono). */
@media (max-width: 1180px) {
  .nav-primary { display: none; }
  .header-phone { display: none; }
  .burger { display: flex; }
  .header-phone-mobile { display: flex; padding: 12px; margin: -12px -6px -12px 0; }
}

/* ============================================================
   HERO genérico (home + landings) — negro plano, Anton (1B)
============================================================ */
.hero {
  background: var(--espresso); color: var(--white);
  position: relative; overflow: hidden;
}
.hero::after { content: none; }
.hero-inner {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1.02fr .98fr; gap: 48px; align-items: end;
  min-height: 520px; padding-block: 72px 0;
}
.hero-content { padding-bottom: 64px; }
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-body); font-size: 13px; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--red); margin-bottom: 22px;
}
.hero-eyebrow::before { content: none; }
.hero h1 {
  font-family: var(--font-display); font-size: clamp(40px, 6vw, 76px); font-weight: 400;
  line-height: .96; letter-spacing: -.01em; text-transform: uppercase;
  color: var(--white); margin-bottom: 40px;
}
.hero h1 em { font-style: normal; color: var(--red); }
.hero-sub {
  font-family: var(--font-body); font-style: normal;
  font-size: 18px; line-height: 1.6; color: rgba(255,255,255,.78);
  max-width: 520px; margin-bottom: 32px;
}
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-visual { position: relative; align-self: stretch; display: flex; align-items: flex-end; }
.hero-visual img { width: 100%; height: 460px; object-fit: cover; border-radius: var(--radius-lg); margin-bottom: 48px; }
.hero-img-badge {
  position: absolute; bottom: 0; left: -16px; background: var(--red); color: var(--white);
  padding: 16px 20px; border-radius: 0; font-family: var(--font-body); font-size: 12px; line-height: 1.4;
}
.hero-img-badge strong { display: block; font-family: var(--font-display); font-size: 24px; font-weight: 400; }

.hero-metrics { position: relative; z-index: 2; border-top: none; background: var(--red); overflow-x: hidden; }
.hero-metrics-inner { display: grid; grid-template-columns: 1fr 1fr 1.5fr; width: 100%; max-width: 100%; }
.metric-item {
  padding: 28px 40px; text-align: left;
  display: flex; align-items: baseline; gap: 14px;
  border-right: 1px solid rgba(255,255,255,.2); min-width: 0;
}
.metric-item:last-child { border-right: none; }
.metric-num { font-family: var(--font-display); font-size: 40px; font-weight: 400; color: var(--white); line-height: 1; }
.metric-label { font-size: 14px; color: rgba(255,255,255,.9); font-weight: 600; letter-spacing: .01em; }

/* Banda de métricas (home tras hero) — banda roja 1B */
.metrics-band { background: var(--red); overflow-x: hidden; max-width: 100%; width: 100%; }
.metrics-band .hero-metrics-inner { overflow-x: hidden; }
.metrics-band .metric-item { border-right: none; min-width: 0; overflow: hidden; }
/* Sin filete en el ultimo: ".metric-item:last-child" de arriba tiene la
   misma especificidad (0,2,0) que ".metrics-band .metric-item" y pierde
   por ir antes, asi que reaparecia una rayita suelta a la derecha. */
.metrics-band .metric-item:last-child { border-right: none; }
.metrics-band .metric-num { color: var(--white); }
.metrics-band .metric-label { color: rgba(255,255,255,.9); word-break: break-word; overflow-wrap: anywhere; }
.metric-label { word-break: break-word; overflow-wrap: anywhere; }

/* ============================================================
   SECCIÓN genérica
============================================================ */
.section { padding-block: var(--section-py); }
.section--white { background: var(--white); }
.section--cream { background: var(--cream); }
.section--latte { background: var(--cream); }
.section--espresso { background: var(--espresso); color: var(--white); }

.section-header { margin-bottom: 44px; }
.section-header .tag { margin-bottom: 14px; }
.section-title {
  font-family: var(--font-display); font-size: clamp(32px, 4.4vw, 52px); font-weight: 400;
  line-height: .98; letter-spacing: 0; text-transform: uppercase;
  color: #111; max-width: 720px;
}
.section--espresso .section-title { color: var(--white); }
.section-sub { margin-top: 12px; font-size: 17px; line-height: 1.6; color: #5a4f4a; max-width: 620px; }
.section--espresso .section-sub { color: rgba(255,255,255,.65); }

/* ============================================================
   PROPUESTA DE VALOR / FEATURE GRID — tarjetas numeradas (1B)
============================================================ */
.vp-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
  background: transparent; border-radius: 0; overflow: visible;
  counter-reset: vp;
}
.vp-grid.vp-grid--3 { grid-template-columns: repeat(3, 1fr); }
.vp-card {
  background: var(--white); padding: 28px 24px;
  border-bottom: 4px solid var(--red);
  counter-increment: vp;
}
/* Sin :hover: es una tarjeta informativa, no es clicable */
.vp-card::before { display: none; }
.vp-icon { display: none; }
.vp-card h3 { font-family: var(--font-body); font-size: 18px; font-weight: 800; color: #111; margin-bottom: 10px; line-height: 1.25; }
.vp-card p { font-size: 14px; line-height: 1.6; color: var(--taupe); }

/* Variante numerada: solo para el listado que la lleve explícitamente
   (evita que una misma página tenga dos rejillas numeradas) */
.vp-grid--numbered .vp-card::before {
  content: '0' counter(vp);
  display: block;
  font-family: var(--font-display); font-size: 34px; color: var(--latte);
  line-height: 1; margin-bottom: 16px;
}

/* Lista de características (alternativa al grid de tarjetas: sin numerar) */
.feature-list { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 32px; list-style: none; padding: 0; margin: 0; }
.feature-list li { padding-left: 18px; border-left: 3px solid var(--red); }
.feature-list li strong { display: block; font-family: var(--font-body); font-weight: 800; font-size: 16px; color: #111; margin-bottom: 4px; }
.feature-list li span { font-size: 14px; line-height: 1.6; color: var(--taupe); }

/* ============================================================
   SERVICIOS / TARJETAS — blancas, cuadradas (1B)
============================================================ */
.services-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px; margin-bottom: 18px; }
.services-grid--2 { grid-template-columns: 1fr 1fr; }
.services-grid--2 .service-card-img { height: 280px; }
.service-card {
  background: var(--white); border-radius: 0; overflow: hidden;
  border: none; display: flex; flex-direction: column;
  position: relative;
  transition: box-shadow .2s, transform .2s;
}
/* Solo las tarjetas con enlace son clicables y reaccionan al hover
   (las de /cafe/ "Nuestros productos" son informativas) */
.service-card:has(.service-link) { cursor: pointer; }
.service-card:has(.service-link):hover { box-shadow: 0 10px 32px rgba(17,16,16,.1); transform: translateY(-2px); }
/* Toda la tarjeta clicable: el enlace se estira sobre ella */
.service-card .service-link::after { content: ''; position: absolute; inset: 0; }
.service-card-img { height: 190px; aspect-ratio: auto; width: 100%; object-fit: cover; display: block; }
.service-card-img.img-placeholder { border-radius: 0; border: none; aspect-ratio: 16/9; height: auto; }
.service-card-body { padding: 22px; flex: 1; display: flex; flex-direction: column; gap: 8px; }
.service-tag { margin-bottom: 4px; font-size: 11px; letter-spacing: .18em; }
.service-card h3 { font-family: var(--font-body); font-size: 19px; font-weight: 800; color: #111; margin-bottom: 0; line-height: 1.25; }
.service-card p { font-size: 14px; color: var(--taupe); line-height: 1.6; flex: 1; margin-bottom: 8px; }
.service-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 700; color: var(--red);
  text-transform: uppercase; letter-spacing: .06em;
  transition: gap .15s;
}
.service-link:hover { gap: 10px; }
.service-link svg { flex-shrink: 0; }

.services-secondary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.service-card--sm .service-card-img.img-placeholder { aspect-ratio: 16/7; }
.service-card--sm .service-card-body { padding: 20px 22px; }
.service-card--sm h3 { font-size: 17px; }
.service-card--sm p { font-size: 14px; margin-bottom: 6px; }
.service-tag--alt { background: transparent; }

/* Franja tienda oscura (1B) */
.tienda-strip {
  margin-top: 18px; background: var(--espresso);
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding: 28px 32px;
}
.tienda-strip-left { display: flex; align-items: center; gap: 24px; min-width: 0; }
.tienda-strip img { width: 96px; height: 72px; object-fit: cover; border-radius: 8px; flex-shrink: 0; }
.tienda-strip h4 { margin: 0 0 4px; font-size: 19px; font-weight: 800; color: var(--white); }
.tienda-strip p { margin: 0; font-size: 14px; color: rgba(255,255,255,.65); }
.tienda-strip .btn { flex-shrink: 0; }

/* Tarjeta CTA de tienda (home): contenido + panel visual.
   Reticula identica a .services-grid (3 col / gap 18px) para que
   las columnas encajen con las tarjetas de arriba. */
.tienda-cta {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px;
  margin-top: 52px;
}
.tienda-cta-content {
  grid-column: span 2;
  background: var(--white);
  padding: 48px 44px;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 14px;
}
.tienda-cta-content h3 {
  font-family: var(--font-display); font-size: 30px; font-weight: 400;
  text-transform: uppercase; letter-spacing: .01em; color: var(--ink); line-height: 1;
}
.tienda-cta-content p { font-size: 15px; line-height: 1.65; color: var(--taupe-dark); max-width: 480px; margin: 0; }
.tienda-cta-content .btn { margin-top: 10px; }
.tienda-cta-visual { min-height: 240px; }
.tienda-cta-visual img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 1024px) {
  .tienda-cta { grid-template-columns: 1fr 1fr; }
  .tienda-cta-content { grid-column: span 1; }
}
@media (max-width: 768px) {
  .tienda-cta { grid-template-columns: 1fr; }
  .tienda-cta-content { grid-column: auto; padding: 28px 24px; }
  .tienda-cta-visual { min-height: 160px; }
}

/* ============================================================
   BLOQUE CAFÉ (2 columnas, fondo espresso)
============================================================ */
.coffee-inner { display: grid; grid-template-columns: .95fr 1.05fr; gap: 56px; align-items: center; position: relative; z-index: 2; }
.coffee-visual { height: 460px; aspect-ratio: auto; width: 100%; object-fit: cover; display: block; border-radius: var(--radius-lg); }
.coffee-visual.img-placeholder { background: rgba(216,31,31,.08); border-color: rgba(216,31,31,.2); color: rgba(255,255,255,.4); }
.coffee-content .tag--dark { margin-bottom: 16px; display: inline-block; }
.coffee-content h2 {
  font-family: var(--font-display); font-size: clamp(32px, 4.4vw, 54px); font-weight: 400;
  line-height: .98; letter-spacing: 0; text-transform: uppercase; margin-bottom: 22px; color: var(--white);
}
.coffee-content h2 em { font-style: normal; color: var(--red); }
.coffee-content p { font-size: 16px; line-height: 1.75; color: rgba(255,255,255,.72); margin-bottom: 16px; }
.coffee-badges { display: flex; gap: 10px; flex-wrap: wrap; margin: 28px 0; }
.coffee-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; border: 1.5px solid rgba(255,255,255,.25); color: var(--white);
  font-size: 13px; font-weight: 600; letter-spacing: .04em;
  padding: 8px 16px; border-radius: 0;
}

/* ============================================================
   BLOQUE CAFÉ — variante clara (página /cafe/)
============================================================ */
.coffee-inner--light { color: var(--ink); }
.coffee-inner--light .tag { margin-bottom: 16px; display: inline-block; }
.coffee-inner--light h2 {
  font-family: var(--font-display); font-size: clamp(30px, 4vw, 48px); font-weight: 400;
  line-height: .98; text-transform: uppercase; letter-spacing: 0; margin-bottom: 20px; color: #111;
}
.coffee-inner--light h2 em { font-style: normal; color: var(--red); }
.coffee-inner--light p { font-size: 16px; line-height: 1.7; color: #5a4f4a; margin-bottom: 16px; }
.coffee-inner--light .coffee-badge { border-color: rgba(17,16,16,.25); color: #111; }
.coffee-inner--light p strong { color: #111; }

/* Tabla comparativa (Arábica vs Robusta en /cafe/) */
.compare-table-wrap { overflow-x: auto; margin: 4px 0 20px; }
.compare-table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.5; }
.compare-table th, .compare-table td { padding: 11px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid rgba(17,16,16,.1); }
.compare-table thead th { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #8a7f74; border-bottom: 2px solid #111; }
.compare-table thead th:nth-child(2) { color: var(--red); }
.compare-table tbody th { font-weight: 700; color: #111; white-space: nowrap; }
.compare-table td { color: #5a4f4a; }
.compare-table td:nth-child(2) { color: #111; font-weight: 500; }
.compare-table th:first-child, .compare-table td:first-child { padding-left: 0; }
/* Sin esto la tabla ensancha la columna de la rejilla y el bloque se sale del margen en móvil */
.coffee-inner > * { min-width: 0; }
@media (max-width: 768px) {
  .compare-table { font-size: 13px; }
  .compare-table th, .compare-table td { padding: 9px 8px; }
  .compare-table thead th { font-size: 10px; letter-spacing: .04em; }
}

.section-header--center { text-align: center; margin-inline: auto; max-width: 680px; }
.section-header--center .section-title { margin-inline: auto; }
.section-header--center .section-sub { margin-inline: auto; }
.coffee-badges--center { justify-content: center; text-align: center; }

.cafe-tienda-block { text-align: center; max-width: 640px; }
.cafe-tienda-block h2 { font-family: var(--font-display); font-size: clamp(26px, 3.4vw, 40px); font-weight: 400; text-transform: uppercase; line-height: 1; margin-bottom: 16px; color: #111; }
.cafe-tienda-block p { font-size: 16px; color: var(--taupe); margin-bottom: 28px; }

/* ============================================================
   COBERTURA / ZONAS — lista con filetes (1B)
============================================================ */
.coverage-inner { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.coverage-map { height: 440px; aspect-ratio: auto; width: 100%; object-fit: cover; display: block; border-radius: var(--radius-lg); }
.coverage-content h2 {
  font-family: var(--font-display); font-size: clamp(28px, 3.8vw, 48px); font-weight: 400;
  letter-spacing: 0; text-transform: uppercase; line-height: .98; margin-bottom: 22px; color: #111;
}
.coverage-content p { font-size: 16px; line-height: 1.7; color: #5a4f4a; margin-bottom: 32px; max-width: 520px; }
.province-list { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--border-soft); }
.province-item {
  display: flex; align-items: baseline; gap: 16px;
  background: transparent; padding: 16px 0; border-radius: 0;
  border: none; border-bottom: 1px solid var(--border-soft); flex-wrap: wrap;
}
.province-dot { display: none; }
.province-name { font-family: var(--font-display); font-size: 22px; font-weight: 400; color: var(--red-text); text-transform: uppercase; min-width: 100px; }
.province-sub { font-size: 15px; color: var(--taupe-dark); margin-left: 0; font-family: var(--font-body); text-align: left; }

@media (max-width: 480px) {
  .province-sub { margin-left: 0; width: 100%; text-align: left; }
}

/* ============================================================
   CONFIANZA / LOGOS / TESTIMONIALES
============================================================ */
.trust-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 64px; align-items: start; }
.subhead-mono { font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: rgba(26,20,20,.4); margin-bottom: 24px; }
.logos-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.logo-slot.img-placeholder { aspect-ratio: 2/1; border-style: dashed; font-size: 10px; }

.google-rating-slot {
  background: var(--white); border-radius: 0; padding: 24px; border: 1px dashed var(--border-soft);
  margin-top: 24px; font-family: var(--font-body); font-size: 13px; color: rgba(26,20,20,.45); text-align: center;
}

.testimonial-card { background: var(--white); border-radius: 0; padding: 28px; border: none; border-bottom: 4px solid var(--red); margin-bottom: 12px; position: relative; }
.testimonial-card::before { content: '\201C'; position: absolute; top: 16px; right: 20px; font-family: var(--font-display); font-size: 64px; color: var(--latte); line-height: 1; }
.testimonial-text { font-size: 15px; line-height: 1.65; color: var(--ink); margin-bottom: 16px; position: relative; z-index: 1; }
.testimonial-author { display: flex; align-items: center; gap: 10px; }
.testimonial-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--red); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; color: var(--white); flex-shrink: 0; }
.testimonial-name { font-size: 14px; font-weight: 700; color: var(--ink); }
.testimonial-role { font-size: 12px; color: var(--taupe); }
.testimonial-stars { display: flex; gap: 2px; color: #FBBC04; font-size: 13px; margin-left: auto; }

/* ============================================================
   CTA FINAL — banda roja (1B)
============================================================ */
.cta-final { background: var(--red); color: var(--white); padding-block: 68px; text-align: left; position: relative; overflow: hidden; }
.cta-final::before { content: none; }
.cta-final-inner {
  position: relative; z-index: 2; max-width: none; margin-inline: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap;
}
.cta-final-text { max-width: 560px; }
.cta-final h2 {
  font-family: var(--font-display); font-size: clamp(32px, 4vw, 48px); font-weight: 400;
  line-height: .96; letter-spacing: 0; text-transform: uppercase; margin-bottom: 12px; color: var(--white);
}
.cta-final h2 em { font-style: normal; color: var(--espresso); }
.cta-final p { font-size: 16px; color: rgba(255,255,255,.9); margin-bottom: 0; max-width: 460px; }
.cta-final-actions { display: flex; flex-direction: column; gap: 12px; align-items: flex-end; }
.cta-final-buttons { display: flex; gap: 12px; justify-content: flex-end; flex-wrap: wrap; margin-bottom: 0; }
.cta-phone-big {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-size: 26px; font-weight: 400;
  color: var(--white); transition: opacity .15s;
}
.cta-phone-big:hover { color: var(--white); opacity: .85; }

/* ============================================================
   FOOTER — negro profundo (1B)
============================================================ */
footer { background: #0c0b0b; color: rgba(255,255,255,.6); padding-block: 56px 32px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,.1); margin-bottom: 24px; }
.footer-brand .logo-text { color: var(--white); }
.footer-brand .logo-text span { color: var(--red); }
.footer-brand p { font-size: 14px; line-height: 1.6; margin-top: 18px; color: rgba(255,255,255,.6); max-width: 280px; }
.footer-phone { display: flex; align-items: center; gap: 8px; font-family: var(--font-body); font-size: 15px; font-weight: 700; color: var(--white); margin-top: 16px; }
.footer-phone:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
/* h3 y h4 juntos: el footer paso de h4 a h3 (el salto h2->h4 rompia el
   orden secuencial de encabezados). Se mantiene h4 durante la
   transicion porque el blog cachea components.js sin cache-buster y
   puede servir el footer viejo un tiempo. */
.footer-col h3, .footer-col h4 { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--white); margin-bottom: 16px; font-family: var(--font-body); }
.footer-col ul { display: flex; flex-direction: column; gap: 10px; }
.footer-col a { font-size: 14px; color: rgba(255,255,255,.6); transition: color .15s; }
.footer-col a:hover { color: var(--white); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: rgba(255,255,255,.62); gap: 16px; flex-wrap: wrap; }
.footer-bottom a { color: rgba(255,255,255,.62); }
.footer-bottom a:hover { color: var(--white); }

/* ============================================================
   FAQ
============================================================ */
.faq-list { display: flex; flex-direction: column; gap: 12px; max-width: 760px; }
.faq-item { background: var(--white); border: none; border-bottom: 2px solid var(--latte); border-radius: 0; padding: 0 24px; }
.faq-item summary { font-family: var(--font-body); font-weight: 700; font-size: 16px; color: var(--ink); cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 20px 0; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; font-size: 22px; color: var(--red); flex-shrink: 0; transition: transform .2s; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { margin-top: 0; padding-bottom: 20px; font-size: 15px; color: rgba(26,20,20,.65); line-height: 1.65; }

/* ============================================================
   PASOS / PROCESO
============================================================ */
.steps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.steps-grid--3 { grid-template-columns: repeat(3, 1fr); }
.step-card { position: relative; padding-top: 16px; }
.step-num { font-family: var(--font-display); font-size: 40px; font-weight: 400; color: var(--latte); display: block; margin-bottom: 8px; }
.step-card h3 { font-family: var(--font-body); font-size: 18px; font-weight: 800; margin-bottom: 8px; color: #111; }
.step-card p { font-size: 14px; color: var(--taupe); line-height: 1.6; }

/* ============================================================
   HERO DE CONTACTO (variante compacta, sin visual)
============================================================ */
.hero--contact { padding-block: 0; }
.hero--contact .hero-inner { min-height: auto; padding-block: 56px; align-items: center; }
.hero--contact .hero-content { padding-bottom: 0; }
.hero--contact h1 { margin-bottom: 28px; }

.contact-form-heading { font-family: var(--font-display); font-size: 26px; font-weight: 400; text-transform: uppercase; line-height: 1; margin-bottom: 20px; color: #111; }
.contact-review-btn { display: flex; width: 100%; margin-top: 16px; }

/* ============================================================
   FORMULARIO DE CONTACTO
============================================================ */
.contact-layout { display: grid; grid-template-columns: 1fr 1.2fr; gap: 56px; align-items: start; }
.contact-info-card { background: var(--white); border: none; border-top: 4px solid var(--red); border-radius: 0; padding: 32px; }
.contact-info-card h3 { font-family: var(--font-display); font-size: 26px; font-weight: 400; text-transform: uppercase; line-height: 1; margin-bottom: 20px; color: #111; }
.contact-info-item { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 18px; }
.contact-info-item svg { color: var(--red); flex-shrink: 0; margin-top: 2px; }
.contact-info-item a, .contact-info-item span { font-size: 15px; line-height: 1.5; }
.contact-info-item a:hover { color: var(--red); }

.contact-form { background: var(--white); border: none; border-top: 4px solid var(--red); border-radius: 0; padding: 32px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.form-group { margin-bottom: 16px; display: flex; flex-direction: column; gap: 6px; }
.form-group label { font-size: 13px; font-weight: 700; color: var(--ink); }
.form-group input, .form-group select, .form-group textarea {
  font-family: var(--font-body); font-size: 16px; padding: 12px 14px;
  border: 1px solid var(--border-soft); border-radius: 0; background: var(--cream);
  color: var(--ink); width: 100%;
}
.form-row .form-group { margin-bottom: 0; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: 2px solid var(--red); outline-offset: 1px; }
.form-group textarea { resize: vertical; min-height: 100px; }
.form-submit { margin-top: 8px; width: 100%; justify-content: center; }
/* Campo trampa antispam del formulario: fuera de la vista, sin display:none (algunos bots lo detectan) */
.form-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-legal { margin-top: 12px; font-size: 12px; line-height: 1.5; color: var(--taupe); }
.form-legal a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.form-message { margin-top: 16px; padding: 14px 16px; border-radius: 0; font-size: 14px; display: none; }
.form-message.success { display: block; background: rgba(99,153,34,.12); color: #3b6d11; border: 1px solid rgba(99,153,34,.3); }
.form-message.error { display: block; background: rgba(216,31,31,.08); color: #a32d2d; border: 1px solid rgba(216,31,31,.3); }

/* ============================================================
   GRID DE MÁQUINAS (venta reacondicionadas)
============================================================ */
.machines-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.machine-card { background: var(--white); border: none; border-bottom: 4px solid var(--red); border-radius: 0; overflow: hidden; }
.machine-card .img-placeholder { aspect-ratio: 3/4; border-radius: 0; border: none; }
.machine-card-body { padding: 16px; }
.machine-card-body h4 { font-family: var(--font-body); font-size: 15px; font-weight: 800; margin-bottom: 4px; color: #111; }
.machine-card-body p { font-size: 13px; color: var(--taupe); }

/* ============================================================
   BREADCRUMB
============================================================ */
.breadcrumb { font-size: 13px; color: rgba(26,20,20,.62); margin-bottom: 24px; }
.breadcrumb a { color: rgba(26,20,20,.72); }
.breadcrumb a:hover { color: var(--red); }

/* ============================================================
   BANNER DE COOKIES
============================================================ */
.cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
  background: var(--espresso); color: var(--cream);
  padding: 20px 24px; box-shadow: 0 -4px 24px rgba(0,0,0,.3);
}
.cookie-banner-inner {
  max-width: var(--max-w); margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.cookie-banner-text { font-size: 14px; line-height: 1.6; color: rgba(244,239,233,.85); max-width: 680px; }
.cookie-banner-text a { color: var(--white); text-decoration: underline; }
.cookie-banner-actions { display: flex; gap: 10px; flex-shrink: 0; flex-wrap: wrap; }
.cookie-banner-actions .btn-secondary { color: var(--white); border-color: rgba(255,255,255,.35); }
.cookie-banner-actions .btn-secondary:hover { background: rgba(255,255,255,.12); color: var(--white); }

@media (max-width: 768px) {
  .cookie-banner-inner { flex-direction: column; align-items: stretch; }
  .cookie-banner-actions { justify-content: stretch; }
  .cookie-banner-actions .btn { flex: 1; justify-content: center; }
}

/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width: 1024px) {
  .container { padding-inline: 24px; }
  .vp-grid { grid-template-columns: repeat(2, 1fr); }
  .vp-grid.vp-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .services-grid { grid-template-columns: 1fr 1fr; }
  .services-grid--2 { grid-template-columns: 1fr; }
  .services-secondary { grid-template-columns: 1fr 1fr; }
  .coverage-inner { grid-template-columns: 1fr; gap: 40px; }
  .trust-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .steps-grid { grid-template-columns: 1fr 1fr; }
  .steps-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .contact-layout { grid-template-columns: 1fr; }
  .machines-grid { grid-template-columns: repeat(2, 1fr); }
  .tienda-strip { flex-wrap: wrap; }
}

@media (max-width: 768px) {
  :root { --section-py: 64px; }
  .nav-primary { display: none; }
  .header-phone { display: none; }
  .header-cta { display: none; }
  .burger { display: flex; }
  .hero-inner { grid-template-columns: 1fr; min-height: auto; padding-block: 56px; align-items: start; gap: 24px; }
  .hero-content { padding-bottom: 0; }
  .hero-visual { display: flex; margin-top: 4px; }
  .hero-visual img { height: auto; max-height: 240px; width: 100%; object-fit: cover; margin-bottom: 0; border-radius: 12px; }
  .hero h1 { font-size: clamp(32px, 10vw, 54px); margin-bottom: 18px; overflow-wrap: break-word; }
  .header-phone-mobile { display: flex; padding: 12px; margin: -12px -6px -12px 0; }
  .hero-metrics-inner { grid-template-columns: repeat(3, 1fr); }
  .metric-item { padding: 22px 16px; flex-direction: column; gap: 4px; }
  .metric-num { font-size: 30px; }
  .vp-grid { grid-template-columns: 1fr; gap: 12px; }
  .vp-grid.vp-grid--3 { grid-template-columns: 1fr; }
  .services-grid { grid-template-columns: 1fr; }
  .services-secondary { grid-template-columns: 1fr; }
  .coffee-inner { grid-template-columns: 1fr; gap: 40px; }
  .coffee-visual { display: none; }
  .trust-grid { grid-template-columns: 1fr; }
  .logos-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .form-row { grid-template-columns: 1fr; }
  .machines-grid { grid-template-columns: 1fr 1fr; }
  .steps-grid { grid-template-columns: 1fr; }
  .cta-final-inner { flex-direction: column; align-items: flex-start; }
  .cta-final-actions { align-items: flex-start; }
  .cta-final-buttons { justify-content: flex-start; }
  .tienda-strip { flex-direction: column; align-items: flex-start; padding: 24px; }
  .tienda-strip-left { flex-direction: column; align-items: flex-start; gap: 14px; }

  /* ── Contacto: el formulario primero en móvil, ya desplegado ── */
  .contact-layout .contact-info-card { order: 2; }
  .hero[aria-label="Contacto"] .hero-visual { display: none; }
  .contact-review-btn { display: none; }

  /* ── Home: fuera la banda de métricas; ya se ve la foto del hero (regla general arriba) ── */
  .metrics-band { display: none; }

  /* ── Texto compacto en móvil: subtexto oculto tras "Ver más" (sigue en el DOM: SEO intacto) ── */
  .m-clamp { display: none; }
  .m-clamp.is-open { display: block; }
  .m-hidden { display: none; }
  .m-hidden.is-open { display: block; }
  .m-more {
    background: none; border: none; padding: 12px 16px 12px 0; margin: -8px 0 4px;
    min-height: 44px; display: inline-flex; align-items: center; gap: 6px;
    color: var(--red-text); font-family: var(--font-body); font-size: 13px;
    font-weight: 700; text-transform: uppercase; letter-spacing: .06em; cursor: pointer;
  }
  .m-more-icon { font-size: 16px; line-height: 1; }
  /* Sobre fondos oscuros hace falta el rojo aclarado: el boton lo
     inyecta components.js y no puede llevar clase propia por contexto. */
  .hero .m-more { color: #ff9478; }
  .section--espresso .m-more,
  .cta-final .m-more { color: var(--red-on-dark); }
  /* Footer acordeón (Servicios / Empresa plegadas) */
  .footer-col.m-acc ul { display: none; }
  .footer-col.m-acc.is-open ul { display: flex; }
  .footer-col.m-acc h3,
  .footer-col.m-acc h4 {
    display: flex; justify-content: space-between; align-items: center;
    cursor: pointer; padding-block: 12px; margin-bottom: 0;
  }
  .footer-col.m-acc h3::after,
  .footer-col.m-acc h4::after { content: '+'; color: var(--red-on-dark); font-size: 18px; }
  .footer-col.m-acc.is-open h3::after,
  .footer-col.m-acc.is-open h4::after { content: '\00d7'; }
  .footer-col a { display: block; padding-block: 9px; }
  .footer-col ul { gap: 0; }

  /* Número decorativo del proceso (única enumeración de la página) */
  .step-num { font-size: 22px; margin-bottom: 4px; color: var(--red-text); }
  .steps-grid { gap: 20px; }
  .vp-grid--numbered .vp-card::before { font-size: 16px; margin-bottom: 6px; }
  .feature-list { grid-template-columns: 1fr; gap: 20px; }
  .service-card p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .section-header { margin-bottom: 28px; }
  .service-link { padding-block: 12px; margin-block: -6px; }

  /* Bandas de botones (máquinas / provincias): sin desbordar a 375px */
  .btn { white-space: normal; text-align: center; }
  .cta-band { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

  /* Home: Granada | Jaén | Málaga en una sola línea */
  .province-list--inline { gap: 8px !important; flex-wrap: nowrap !important; }
  .province-list--inline .province-name { font-size: 17px !important; min-width: 0 !important; }
  .province-list--inline span[aria-hidden] { font-size: 15px !important; }

  /* El "Solicita tu máquina" del hero vive ahora en el botón flotante de Contacto */
  .hero-ctas .btn-primary[href^="/contacto"] { display: none; }

  /* Oculta bloques redundantes en móvil (el contenido sigue en el DOM: SEO intacto) */
  .m-skip { display: none; }
}

@media (max-width: 480px) {
  :root { --section-py: 48px; }
  .cta-band { flex-direction: column; align-items: stretch; }
  .cta-band .btn { width: 100%; }
}

@media (max-width: 480px) {
  .hero-metrics-inner { grid-template-columns: 1fr; }
  .metric-item { border-right: none; border-bottom: 1px solid rgba(255,255,255,.2); flex-direction: row; align-items: baseline; }
  .metric-item:last-child { border-bottom: none; }
  .metrics-band .metric-item { border-bottom: none; }
  .cta-final-buttons { flex-direction: column; align-items: stretch; }
  .hero-ctas { flex-direction: column; }
  .hero-ctas .btn { text-align: center; justify-content: center; }
}

/* ── BLOG ── */
.hero--blog .hero-eyebrow {
  display: block !important;
  font-family: var(--font-display); font-size: clamp(40px, 6vw, 76px); font-weight: 400;
  line-height: .96; letter-spacing: -.01em; text-transform: uppercase;
  color: var(--white); margin-bottom: 0;
}
.hero--blog .hero-eyebrow::before { content: none; }
.hero--blog h1 { color: var(--white); }
/* Fondo cálido para el listado de artículos (el HTML del blog lo genera el admin) */
.section--white:has(.blog-grid) { background: #F4EFE9; }

.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 48px; }

.blog-card { background: var(--white); border: none; border-radius: 0; overflow: hidden; display: flex; flex-direction: column; position: relative; cursor: pointer; transition: box-shadow .2s, transform .2s; }
.blog-card:hover { box-shadow: 0 10px 32px rgba(17,16,16,.1); transform: translateY(-2px); }
/* Toda la tarjeta clicable: el enlace "Leer artículo" se estira sobre ella */
.blog-card .blog-card-link::after { content: ''; position: absolute; inset: 0; }
.blog-card-thumb { background: var(--latte); height: 170px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; }
.blog-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-card-thumb-date { font-family: var(--font-display); font-size: 15px; color: var(--red-text); letter-spacing: .04em; text-transform: uppercase; text-align: center; line-height: 1.5; }
.blog-card-body { padding: 20px 24px 24px; flex: 1; display: flex; flex-direction: column; }
.blog-card-date { font-family: var(--font-body); font-size: 12px; font-weight: 700; color: var(--red); letter-spacing: .12em; text-transform: uppercase; display: block; margin-bottom: 8px; }
.blog-card-title { font-family: var(--font-body); font-size: 18px; font-weight: 800; color: var(--ink); line-height: 1.3; margin-bottom: 10px; }
.blog-card-title a { color: inherit; text-decoration: none; }
.blog-card-title a:hover { color: var(--red); }
.blog-card-excerpt { font-size: 14px; color: var(--taupe); line-height: 1.6; flex: 1; margin-bottom: 16px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.blog-card-link { font-size: 13px; font-weight: 700; color: var(--red); text-transform: uppercase; letter-spacing: .06em; text-decoration: none; }
.blog-card-link:hover { text-decoration: underline; }

.blog-pagination { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 48px; }
.blog-pagination-info { font-family: var(--font-body); font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: rgba(26,20,20,.5); }

.blog-post { padding-block: var(--section-py); }
.blog-post-inner { max-width: 720px; margin-inline: auto; }
.blog-back { font-family: var(--font-body); font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--red-text); text-decoration: none; display: inline-block; margin-bottom: 32px; }
.blog-back:hover { text-decoration: underline; }
.blog-post-date { font-family: var(--font-body); font-size: 12px; font-weight: 700; color: var(--red); letter-spacing: .12em; text-transform: uppercase; display: block; margin-bottom: 16px; }
/* Contenido evergreen: ocultamos la fecha visible del blog. Se conserva en el
   atributo datetime y en el JSON-LD (Google la sigue leyendo; no engañamos). */
.blog-card-date, .blog-post-date { display: none; }
.blog-post-title { font-family: var(--font-display); font-size: clamp(32px, 5vw, 54px); font-weight: 400; text-transform: uppercase; color: var(--ink); line-height: .98; margin-bottom: 40px; padding-bottom: 32px; border-bottom: 4px solid var(--red); }
.blog-post-image { width: 100%; height: auto; border-radius: var(--radius-lg); margin-bottom: 40px; display: block; }
.blog-post-content { font-size: 17px; line-height: 1.85; color: rgba(26,20,20,.82); }
.blog-post-content h2 { font-family: var(--font-body); font-size: clamp(20px, 2.5vw, 26px); font-weight: 800; color: var(--ink); margin-top: 56px; margin-bottom: 20px; line-height: 1.2; }
.blog-post-content h3 { font-family: var(--font-body); font-size: clamp(17px, 2vw, 21px); font-weight: 800; color: var(--ink); margin-top: 40px; margin-bottom: 16px; line-height: 1.25; }
.blog-post-content h4 { font-family: var(--font-body); font-size: 17px; font-weight: 800; color: var(--ink); margin-top: 40px; margin-bottom: 16px; line-height: 1.25; }
.blog-post-content p { margin-bottom: 24px; }
.blog-post-content ul, .blog-post-content ol { margin-bottom: 24px; padding-left: 24px; }
.blog-post-content ul { list-style: disc; }
.blog-post-content li { margin-bottom: 8px; }
.blog-post-content img { max-width: 100%; height: auto; border-radius: 8px; margin-block: 32px; display: block; min-height: 40px; background: var(--latte); }
.blog-post-content a { color: var(--red-text); text-decoration: underline; }
.blog-post-content strong { color: var(--ink); font-weight: 700; }

@media (max-width: 1024px) {
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .blog-grid { grid-template-columns: 1fr; }
  .blog-post-inner { max-width: 100%; padding-inline: 4px; }
}

/* ============================================================
   Botón flotante de WhatsApp
============================================================ */
.wa-float {
  position: fixed; right: 22px; bottom: 22px; z-index: 190;
  display: inline-flex; align-items: center; justify-content: center;
  width: 60px; height: 60px; border-radius: 50%;
  background: #25D366; color: #fff;
  text-decoration: none; cursor: pointer;
  box-shadow: 0 8px 24px rgba(0,0,0,.22);
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, bottom .2s ease;
}
.wa-float:hover { background: #1ebe5b; transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0,0,0,.28); }
.wa-float:active { transform: translateY(0); }
.wa-float svg { width: 32px; height: 32px; flex: 0 0 auto; }
.wa-float-label { display: none; }

/* ── Botón flotante de Contacto (móvil, site-wide) + hoja desplegable ── */
.contact-float-btn {
  position: fixed; left: 16px; bottom: 22px; z-index: 190;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 18px; border: none; border-radius: 999px;
  background: var(--red); color: #fff; cursor: pointer;
  font-family: var(--font-body); font-weight: 700; font-size: 13px;
  text-transform: uppercase; letter-spacing: .04em;
  box-shadow: 0 8px 24px rgba(0,0,0,.22);
  transition: transform .2s ease, box-shadow .2s ease;
}
.contact-float-btn:active { transform: translateY(0); }
.contact-float-btn svg { width: 20px; height: 20px; flex: 0 0 auto; }
.contact-sheet-overlay {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(17,16,16,.55);
  display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; visibility: hidden; transition: opacity .2s ease;
}
.contact-sheet-overlay.is-open { opacity: 1; visibility: visible; }
.contact-sheet {
  width: 100%; max-width: 560px; max-height: 85vh; overflow-y: auto;
  background: var(--white); border-radius: 20px 20px 0 0;
  padding: 24px 24px 28px; transform: translateY(100%);
  transition: transform .25s ease;
}
.contact-sheet-overlay.is-open .contact-sheet { transform: translateY(0); }
.contact-sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.contact-sheet-head h3 { font-family: var(--font-display); font-size: 22px; font-weight: 400; text-transform: uppercase; color: var(--ink); }
.contact-sheet-close {
  background: none; border: none; font-size: 28px; line-height: 1; color: var(--ink);
  cursor: pointer; padding: 4px 8px; margin: -4px -8px;
}
.contact-sheet .contact-form { padding: 0; border: none; }
body.contact-sheet-locked { overflow: hidden; }
/* Mientras el banner de cookies esté visible, los botones flotantes se
   colocan justo encima usando la ALTURA REAL del banner (--cookie-h, la
   calcula el JS), en vez de un valor fijo que quedaba demasiado alto. */
body.cookies-banner-visible .wa-float,
body.cookies-banner-visible .contact-float-btn { bottom: calc(var(--cookie-h, 96px) + 16px); }
@media (max-width: 480px) {
  .wa-float { right: 16px; bottom: 16px; width: 56px; height: 56px; }
}