/* ===========================================================
   Grupo Altiz - hoja de estilo del sitio
   Todas las variables llevan prefijo --az- para no chocar con
   las variables que Elementor inyecta en sus contenedores.

   Criterio visual: editorial-corporativo. Reticula visible con
   filetes, bloques de color solido, radios minimos y casi nada
   de sombra. La jerarquia la carga la tipografia, no las cajas.
   =========================================================== */

:root{
  /* corporativo */
  --az-ink:      #17140F;
  --az-ink-2:    #57503F;
  --az-ink-3:    #6E6558;
  --az-paper:    #FFFFFF;
  --az-bone:     #F5F2EC;
  --az-bone-2:   #EBE6DC;
  --az-gold:     #C49A5C;
  --az-gold-dp:  #8F6A2C;
  --az-line:     #DCD5C8;
  --az-line-sf:  #E9E4DA;

  /* marca activa: por defecto = corporativo */
  --az-brand:      var(--az-gold);
  --az-brand-dp:   var(--az-gold-dp);
  --az-brand-ink:  var(--az-ink);
  --az-brand-bg:   var(--az-bone);
  --az-brand-card: var(--az-paper);
  --az-brand-line: var(--az-line);
  --az-accent:     var(--az-gold);
  --az-on-brand:   #17140F;

  /* layout */
  --az-pad: 20px;
  --az-max: 1240px;
  --az-r: 3px;

  /* tipografia */
  --az-sans:  "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --az-serif: "Cormorant Garamond", "Times New Roman", serif;
}

/* paletas por marca ------------------------------------------------ */
[data-brand="galos"]{
  --az-brand:#944618; --az-brand-dp:#6E3210; --az-brand-ink:#2E1607;
  --az-brand-bg:#EFE7DE; --az-brand-card:#F7F2EB; --az-brand-line:#D9C9B7;
  --az-accent:#4F6A47; --az-on-brand:#FFFFFF;
}
[data-brand="lumiel"]{
  --az-brand:#855931; --az-brand-dp:#5E3C1D; --az-brand-ink:#33220F;
  --az-brand-bg:#F5EFE9; --az-brand-card:#FFFFFF; --az-brand-line:#DFD2C2;
  --az-accent:#55704C; --az-on-brand:#FFFFFF;
}
/* Entos invierte el sistema completo: la marca es de fondo negro,
   asi que aqui se redefinen tambien los tokens base, no solo --az-brand. */
[data-brand="entos"]{
  --az-ink:#EFE6D5; --az-ink-2:#9C9280; --az-ink-3:#8A8172;
  --az-paper:#100E0C; --az-bone:#0A0908; --az-bone-2:#151210;
  --az-line:#33291C; --az-line-sf:#241D14;
  --az-brand:#BD8946; --az-brand-dp:#D8A462; --az-brand-ink:#F5E8D0;
  --az-brand-bg:#0A0908; --az-brand-card:#141110; --az-brand-line:#33291C;
  --az-accent:#BD8946; --az-on-brand:#100E0C;
}

/* base ------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body.az{
  margin:0;
  background:var(--az-bone);
  color:var(--az-ink);
  font-family:var(--az-sans);
  font-size:16.5px;
  font-weight:400;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
/* Los reset de elemento van dentro de :where() para que pesen 0 en la cascada.
   Escritos como `body.az p{...}` valen (0,1,2) y le ganaban a cualquier clase
   `.az-*` (0,1,0): eso dejaba en cero el margin de .az-kicker y compania, y
   apretaba el espaciado en todo el sitio. */
:where(body.az) img{ max-width:100%; height:auto; display:block; }
:where(body.az) a{ color:inherit; text-decoration:none; }
:where(body.az) h1,:where(body.az) h2,:where(body.az) h3,:where(body.az) h4{
  font-family:var(--az-serif);
  font-weight:600;
  line-height:1.04;
  letter-spacing:-.005em;
  margin:0;
}
/* De todo lo anterior, lo unico que necesita pesar en la cascada es el color:
   el kit de Elementor declara `.elementor-kit-9 h2{color:...}` (0,1,1) y hay
   que empatarle. Va aparte para no pisar el margin ni el letter-spacing que
   fijan clases como .az-h1 o .az-panel__name. */
.az h1,.az h2,.az h3,.az h4{ color:var(--az-ink); }
/* ...y por eso mismo, lo que debe heredar el color de su contenedor
   necesita recuperarlo con mas especificidad */
body.az .az-panel__name{ color:inherit; }
:where(body.az) p{ margin:0; }
:where(body.az) ul{ margin:0; padding:0; list-style:none; }
::selection{ background:var(--az-brand); color:#fff; }

/* utilidades ------------------------------------------------------- */
.az-wrap{
  width:100%;
  max-width:var(--az-max);
  margin-inline:auto;
  padding-inline:var(--az-pad);
}
.az-sec{ padding-block:clamp(54px,7vw,96px); }
.az-sec--tight{ padding-block:clamp(38px,4.5vw,64px); }
.az-sec--paper{ background:var(--az-paper); }
.az-sec--bone{ background:var(--az-bone-2); }
.az-rule{ border-top:1px solid var(--az-line); }

/* etiqueta de seccion: numero + texto, alineada a la izquierda */
.az-kicker{
  display:flex; align-items:baseline; gap:14px;
  font-size:13px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--az-brand);
  margin:0 0 46px;
  padding-bottom:20px;
  border-bottom:1px solid var(--az-line);
}
.az-kicker span{ color:var(--az-ink-3); font-variant-numeric:tabular-nums; }

.az-h1{ font-size:clamp(2.9rem,6.4vw,4.9rem); letter-spacing:-.012em; }
.az-h2{ font-size:clamp(2.1rem,4vw,3.15rem); letter-spacing:-.01em; }
.az-h3{ font-size:clamp(1.3rem,1.9vw,1.6rem); letter-spacing:-.005em; }
.az-lead{
  font-size:clamp(1rem,1.25vw,1.14rem);
  line-height:1.6;
  color:var(--az-ink-2);
  max-width:60ch;
}
.az-mb-l{ margin-bottom:clamp(30px,3.5vw,46px); }
.az-mb-s{ margin-bottom:16px; }
.az-max-title{ max-width:20ch; }

.az-btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:16px 28px;
  border:1px solid var(--az-brand);
  border-radius:var(--az-r);
  background:var(--az-brand);
  color:var(--az-on-brand);
  font-family:var(--az-sans);
  font-size:14px; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  cursor:pointer;
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.az-btn:hover{ background:var(--az-brand-dp); border-color:var(--az-brand-dp); }
.az-btn--ghost{ background:transparent; color:var(--az-ink); border-color:var(--az-line); }
.az-btn--ghost:hover{ background:transparent; border-color:var(--az-ink); color:var(--az-ink); }
/* la regla de Entos sobre .az-btn pinta el texto oscuro; el fantasma la revierte */
[data-brand="entos"] .az-btn--ghost,
[data-brand="entos"] .az-btn--ghost:hover{ color:var(--az-ink); }
.az-btn__arrow{ display:inline-flex; transition:transform .2s ease; }
.az-btn:hover .az-btn__arrow{ transform:translateX(3px); }
.az-btns{ display:flex; flex-wrap:wrap; gap:12px; }

/* enlace de texto con filete */
.az-link{
  display:inline-flex; align-items:center; gap:9px;
  font-size:12.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--az-brand);
  padding-bottom:4px;
  border-bottom:1px solid currentColor;
  transition:gap .2s ease;
}
.az-link:hover{ gap:14px; }

/* ===================== barra superior ===================== */
.az-topbar{
  background:#0E0C09;
  color:#B6AC9A;
  font-size:12.5px;
  letter-spacing:.03em;
}
.az-topbar a{ color:var(--az-gold); }
[data-brand="entos"] .az-topbar{ background:#000; color:#8B8272; }
.az-topbar__in{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  min-height:44px;
}
.az-topbar a:hover{ color:#fff; }
.az-topbar__r{ display:flex; gap:24px; }
@media (max-width:700px){
  .az-topbar__r span:first-child{ display:none; }
  .az-topbar__in{ justify-content:center; }
  .az-topbar__l{ display:none; }
}

/* ===================== header ===================== */
.az-header{
  position:sticky; top:0; z-index:60;
  background:var(--az-paper);
  border-bottom:1px solid var(--az-line);
  box-shadow:0 8px 24px -18px rgba(23,20,15,.55);
}
.az-header__in{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  min-height:88px;
}
.az-logo{ display:flex; align-items:center; gap:14px; flex-shrink:0; }
.az-logo img{ height:50px; width:50px; object-fit:contain; }
.az-logo__txt{ display:flex; flex-direction:column; line-height:1; }
.az-logo__name{
  font-family:var(--az-serif);
  font-size:1.6rem; font-weight:600; letter-spacing:.045em; text-transform:uppercase;
}
.az-logo__sub{
  font-size:11px; letter-spacing:.34em; text-transform:uppercase;
  color:var(--az-gold-dp); margin-top:6px; font-weight:500;
}
/* sobre el header negro de Entos el dorado oscuro no alcanza contraste */
[data-brand="entos"] .az-header .az-logo__sub{ color:var(--az-gold); }

.az-nav{ display:flex; align-items:center; gap:4px; }
.az-nav a{
  font-size:14px; font-weight:500; letter-spacing:.005em;
  padding:10px 14px; position:relative; white-space:nowrap;
  color:var(--az-ink-2);
  transition:color .2s ease;
}
.az-nav a:hover{ color:var(--az-ink); }
.az-nav a[aria-current="page"]{ color:var(--az-ink); font-weight:600; }
.az-nav a[aria-current="page"]::after{
  content:""; position:absolute; left:14px; right:14px; bottom:-1px; height:3px;
  background:var(--az-brand);
}
/* .az-nav a gana en especificidad sobre .az-btn, hay que repetir el color aqui */
/* `.az-nav a` (0,2,1) le gana a `.az-btn` (0,1,0), asi que aqui hay que
   devolverle al boton del menu todo lo que el nav le pisa. */
.az-nav .az-btn,
.az-nav .az-btn:hover{
  margin-left:12px; color:var(--az-on-brand);
  padding:15px 26px; font-size:13.5px;
  font-weight:600; letter-spacing:.09em; text-transform:uppercase;
}
.az-nav .az-btn::after{ display:none; }

.az-burger{
  display:none; width:44px; height:44px; margin-right:-10px;
  border:0; background:transparent; cursor:pointer; padding:0;
  align-items:center; justify-content:center;
}
.az-burger span{
  display:block; width:20px; height:1.5px; background:var(--az-ink);
  position:relative; transition:background .2s;
}
.az-burger span::before,.az-burger span::after{
  content:""; position:absolute; left:0; width:20px; height:1.5px; background:var(--az-ink);
  transition:transform .25s ease, top .25s ease;
}
.az-burger span::before{ top:-6px; }
.az-burger span::after{ top:6px; }
.az-burger[aria-expanded="true"] span{ background:transparent; }
.az-burger[aria-expanded="true"] span::before{ top:0; transform:rotate(45deg); }
.az-burger[aria-expanded="true"] span::after{ top:0; transform:rotate(-45deg); }

@media (max-width:980px){
  .az-burger{ display:flex; }
  .az-nav{
    position:fixed; inset:88px 0 auto 0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--az-paper);
    border-bottom:1px solid var(--az-line);
    padding:4px var(--az-pad) 22px;
    transform:translateY(-10px); opacity:0; pointer-events:none;
    transition:opacity .2s ease, transform .2s ease;
    max-height:calc(100dvh - 88px); overflow-y:auto;
  }
  .az-nav[data-open="true"]{ transform:none; opacity:1; pointer-events:auto; }
  .az-nav a{ padding:15px 0; border-bottom:1px solid var(--az-line-sf); font-size:15px; }
  .az-nav a[aria-current="page"]::after{ left:0; right:auto; width:22px; bottom:-1px; }
  .az-nav .az-btn{ margin:18px 0 0; justify-content:center; border-bottom:0; }
}

/* ===================== hero corporativo ===================== */
.az-hero{ background:var(--az-bone); }
.az-hero__grid{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(28px,4vw,56px);
  padding-block:clamp(56px,7.5vw,104px) clamp(48px,6vw,84px);
  align-items:center;
}
.az-hero__title{ margin:0 0 24px; }
.az-hero .az-lead{ margin-bottom:32px; }
.az-hero__aside{
  border-left:1px solid var(--az-line);
  padding-left:clamp(20px,2.5vw,36px);
  align-self:stretch;
  display:flex; flex-direction:column; justify-content:flex-end; gap:20px;
}
.az-hero__aside img{ width:96px; height:96px; object-fit:contain; }
.az-hero__aside p{ font-size:.94rem; color:var(--az-ink-2); }
.az-hero__aside .az-hero__aside-t{
  font-size:12.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--az-ink-3); margin-bottom:-6px;
}

/* indice de marcas: cuadro de color + nombre + categoria */
.az-index li{
  display:grid; grid-template-columns:9px minmax(0,1fr) auto; gap:14px; align-items:center;
  padding:18px 0; border-top:1px solid var(--az-line-sf);
}
.az-index li:last-child{ border-bottom:1px solid var(--az-line-sf); }
.az-index li span{ width:9px; height:9px; background:var(--sw); }
.az-index a{ font-size:.98rem; font-weight:600; }
.az-index a:hover{ color:var(--az-brand); }
.az-index em{
  font-style:normal; font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--az-ink-3);
}

/* lista de datos clave/valor */
.az-dl{ margin:0; display:grid; grid-template-columns:auto minmax(0,1fr); gap:0 20px; }
.az-dl dt{
  font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--az-ink-3);
  padding:18px 0; border-top:1px solid var(--az-line-sf);
}
.az-dl dd{
  margin:0; font-size:.96rem; text-align:right;
  padding:18px 0; border-top:1px solid var(--az-line-sf);
}

/* mosaico de marcas: el bloque visual que sostiene el hero.
   Es lo que evita que la portada se lea como un documento. */
.az-mosaico{
  display:grid; grid-template-columns:repeat(2,1fr); gap:2px;
  background:var(--az-line);
  border:1px solid var(--az-line);
  box-shadow:0 32px 60px -34px rgba(23,20,15,.5);
}
.az-mos{
  position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  aspect-ratio:1; padding:clamp(16px,2vw,26px);
  background:var(--m-bg,#fff);
  transition:filter .25s ease;
  min-width:0; text-align:center;
}
.az-mos:hover{ filter:brightness(.96); }
.az-mos[style*="#100E0C"]:hover{ filter:brightness(1.35); }
.az-mos img{ width:clamp(96px,62%,150px); height:auto; object-fit:contain; }
body.az .az-mos span{
  font-size:12px; letter-spacing:.18em; text-transform:uppercase; font-weight:600;
  color:var(--m-ink,#17140F);
}
/* por debajo de 520 px el texto espaciado ya no cabe en dos columnas
   y estiraba la reticula fuera del contenedor */
@media (max-width:520px){
  .az-mos{ padding:14px 8px; gap:10px; }
  body.az .az-mos span{ font-size:10.5px; letter-spacing:.08em; }
}

/* franja de datos: a todo lo ancho y en oscuro, para cerrar el hero
   con peso en lugar de una linea mas */
.az-facts{ background:var(--az-ink); }
.az-facts__in{
  display:grid; grid-template-columns:repeat(4,1fr);
}
.az-fact{ padding:clamp(28px,3vw,40px) 24px clamp(30px,3.2vw,44px) 0; }
.az-fact + .az-fact{
  border-left:1px solid rgba(255,255,255,.12);
  padding-left:clamp(20px,2.5vw,40px);
}
.az-fact__n{
  font-family:var(--az-serif); font-size:clamp(2.6rem,4vw,3.6rem); line-height:1;
  color:var(--az-gold); font-weight:500;
}
.az-fact__l{
  font-size:13px; letter-spacing:.14em; text-transform:uppercase;
  color:#A79E8E; margin-top:14px;
}
@media (max-width:980px){
  .az-facts__in{ grid-template-columns:repeat(2,1fr); }
  .az-fact:nth-child(3){ border-left:0; }
  .az-fact:nth-child(n+3){ border-top:1px solid rgba(255,255,255,.12); }
}
@media (max-width:860px){
  .az-hero__grid{ grid-template-columns:minmax(0,1fr); align-items:start; }
  .az-hero__aside{ border-left:0; border-top:1px solid var(--az-line); padding-left:0; padding-top:24px; }
}
@media (max-width:560px){
  .az-facts__in{ grid-template-columns:minmax(0,1fr); }
  .az-fact + .az-fact{ border-left:0; border-top:1px solid rgba(255,255,255,.12); padding-left:0; }
  .az-fact{ padding-block:22px; padding-right:0; }
}

/* ===================== paneles de marca ===================== */
.az-brands{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--az-line); border:1px solid var(--az-line); }
.az-panel{
  position:relative; display:flex; flex-direction:column;
  min-height:370px; padding:clamp(28px,3.2vw,42px);
  background:var(--p-bg,#fff);
  transition:filter .25s ease;
}
/* body.az a{color:inherit} gana por especificidad, por eso el color va prefijado */
body.az .az-panel{ color:var(--p-ink,#17140F); }
.az-panel:hover{ filter:brightness(.97); }
[data-panel="entos"]:hover{ filter:brightness(1.25); }
.az-panel__top{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:auto; }
.az-panel__logo{ width:96px; height:96px; object-fit:contain; }
.az-panel__flag{
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  padding:6px 12px; border:1px solid currentColor; color:var(--p-accent,#C49A5C);
  border-radius:999px; white-space:nowrap;
}
.az-panel__kind{
  font-size:12.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--p-accent,#C49A5C); margin-top:30px;
}
.az-panel__name{ font-size:clamp(1.8rem,2.9vw,2.35rem); margin:10px 0 12px; }
.az-panel__desc{ font-size:.95rem; opacity:.8; max-width:40ch; margin-bottom:26px; }
.az-panel__link{
  display:inline-flex; align-items:center; gap:9px;
  font-size:13px; letter-spacing:.12em; text-transform:uppercase; font-weight:600;
  color:var(--p-accent,#C49A5C);
  padding-bottom:5px; border-bottom:1px solid currentColor; align-self:flex-start;
  transition:gap .2s ease;
}
.az-panel:hover .az-panel__link{ gap:14px; }
@media (max-width:760px){ .az-brands{ grid-template-columns:minmax(0,1fr); } }

/* ===================== lista numerada (sustituye tarjetas con icono) ===================== */
.az-list{ border-top:1px solid var(--az-line); }
.az-item{
  display:grid; grid-template-columns:108px minmax(0,17rem) minmax(0,1fr);
  gap:clamp(16px,3vw,44px); align-items:start;
  padding:clamp(30px,3.4vw,40px) 0;
  border-bottom:1px solid var(--az-line-sf);
}
.az-item__n{
  font-family:var(--az-serif); font-size:clamp(2.7rem,4vw,3.6rem); line-height:1.1; font-weight:400;
  color:var(--az-brand-dp); font-variant-numeric:tabular-nums;
}
.az-item h3{ font-size:1.38rem; }
.az-item__d{ font-size:1.02rem; color:var(--az-ink-2); }
@media (max-width:820px){
  .az-item{ grid-template-columns:74px 1fr; gap:10px 18px; }
  .az-item__d{ grid-column:2; }
}

/* dos columnas de texto */
.az-cols{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(24px,5vw,72px); align-items:start; }
@media (max-width:860px){ .az-cols{ grid-template-columns:minmax(0,1fr); } }

/* bloque con filete lateral */
.az-note-block{ border-left:2px solid var(--az-brand); padding-left:22px; }
.az-note-block + .az-note-block{ margin-top:26px; }
.az-note-block h3{ font-size:1.22rem; margin-bottom:7px; }
.az-note-block p{ font-size:.95rem; color:var(--az-ink-2); }

/* ===================== etiquetas de producto ===================== */
.az-labels{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,1.8vw,20px); }
@media (max-width:980px){ .az-labels{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .az-labels{ grid-template-columns:minmax(0,1fr); max-width:300px; margin-inline:auto; } }

.az-label{
  position:relative; display:flex; flex-direction:column;
  min-height:330px;
  background:var(--lb-bg,#EFE7DE);
  border:1px solid var(--lb-edge,#944618);
  transition:transform .25s ease;
}
.az-label:hover{ transform:translateY(-4px); }
.az-label__body{
  flex:1; display:flex; flex-direction:column; align-items:center;
  margin:7px; padding:22px 14px 16px; text-align:center;
  border:1px solid var(--lb-edge,#944618);
  border-bottom:0;
}
.az-label__brand{
  font-family:var(--az-serif); font-size:1.62rem; font-weight:500;
  letter-spacing:.05em; color:var(--lb-ink,#944618); line-height:1;
}
.az-label__icon{ display:block; width:82px; margin:18px auto 20px; color:var(--lb-ink,#944618); }
.az-label__icon svg{ width:100%; height:auto; display:block; }
.az-label__name{
  font-size:.92rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase;
  color:var(--lb-ink,#944618); line-height:1.5; margin-top:auto;
}
.az-label__seals{ display:flex; justify-content:center; gap:5px; margin-top:14px; min-height:45px; }
.az-seal{
  width:43px; height:45px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:#0A0A0A; color:#fff;
  font-size:5.6px; font-weight:700; line-height:1.3;
  text-transform:uppercase; text-align:center; padding:4px;
  clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%);
}
.az-label__soon{
  align-self:center;
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  padding:8px 15px; border:1px solid currentColor; border-radius:999px;
  color:var(--lb-ink,#944618); font-weight:600;
}
.az-label__net{
  margin:0 7px 7px; padding:11px;
  text-align:center;
  background:var(--lb-band,#944618); color:var(--lb-bandink,#F7EFE6);
  font-size:.8rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
}
.az-note{ font-size:.95rem; color:var(--az-ink-3); margin-top:24px; }

/* ===================== surtido (Lumiel): tabla tipografica ===================== */
.az-goods{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1px; background:var(--az-brand-line);
  border:1px solid var(--az-brand-line);
}
@media (max-width:860px){ .az-goods{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .az-goods{ grid-template-columns:minmax(0,1fr); } }
.az-good{
  display:flex; flex-direction:column; gap:12px;
  padding:clamp(24px,2.6vw,32px);
  background:var(--az-brand-card);
  transition:background .2s ease;
}
.az-good:hover{ background:var(--az-bone); }
/* el segundo color de la marca (verde salvia en Lumiel, pistache en
   Galo's) entra aqui para que no todo dependa del cafe principal */
.az-good__n{
  font-family:var(--az-serif); font-size:2.2rem; color:var(--az-accent);
  font-variant-numeric:tabular-nums; line-height:1;
}
.az-good h3{ font-size:1.4rem; }
.az-good__d{ font-size:1rem; color:var(--az-ink-2); }

/* ficha de datos */
.az-spec{ border-top:1px solid var(--az-line); }
.az-spec__i{
  display:flex; align-items:baseline; justify-content:space-between; gap:20px;
  padding:24px 0; border-bottom:1px solid var(--az-line-sf);
}
.az-spec__k{ font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--az-ink-3); }
.az-spec__v{ font-family:var(--az-serif); font-size:1.95rem; line-height:1; color:var(--az-ink); }

/* ===================== banda / cta ===================== */
.az-cta{
  background:var(--az-ink); color:#EDE6D9;
  border-top:3px solid var(--az-brand);
}
[data-brand="entos"] .az-cta{ background:#000; }
.az-cta__in{
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:32px; align-items:center;
  padding-block:clamp(38px,5vw,64px);
}
.az-cta h2{ color:#fff; margin-bottom:12px; }
.az-cta p{ color:#A9A091; max-width:52ch; font-size:1rem; }
.az-cta .az-btn{ background:var(--az-brand); border-color:var(--az-brand); color:var(--az-on-brand); }
.az-cta .az-btn:hover{ background:#fff; border-color:#fff; color:var(--az-ink); }
@media (max-width:800px){
  .az-cta__in{ grid-template-columns:minmax(0,1fr); }
}

/* ===================== hero de marca ===================== */
/* El doble filete inferior repite el marco que traen las etiquetas
   de Galo's y Ento's y la cartela de Lumiel: es el gesto que
   diferencia cada landing mas alla del color. */
.az-bhero{
  background:var(--az-brand-bg);
  border-bottom:1px solid var(--az-brand-line);
}
.az-bhero__grid{
  display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(28px,4vw,60px); align-items:center;
  padding-block:clamp(44px,6vw,80px);
}
.az-bhero__logo{ width:min(310px,80%); margin-inline:auto; }
.az-bhero h1{ color:var(--az-brand-ink); }
.az-bhero .az-lead{ color:var(--az-brand-ink); opacity:.72; }
/* franja de datos de la marca, a todo el ancho y en su color.
   Es el equivalente de .az-facts en la portada: cierra el hero con peso. */
.az-bmeta{ background:var(--az-brand); color:var(--az-on-brand); }
.az-bmeta__in{
  display:flex; flex-wrap:wrap; gap:10px clamp(24px,4vw,56px);
  padding-block:20px;
  font-size:13px; letter-spacing:.16em; text-transform:uppercase; font-weight:600;
}
.az-bmeta__in span{ position:relative; }
.az-bmeta__in span + span::before{
  content:""; position:absolute; left:clamp(-28px,-2vw,-12px); top:.15em; bottom:.15em;
  width:1px; background:currentColor; opacity:.4;
}
@media (max-width:860px){
  .az-bhero__grid{ grid-template-columns:minmax(0,1fr); }
  .az-bhero__logo{ order:-1; width:min(220px,60%); margin-bottom:8px; }
}

/* ===================== formulario ===================== */
.az-form{
  display:grid; grid-template-columns:repeat(2,1fr); gap:20px;
}
.az-field{ display:flex; flex-direction:column; gap:8px; }
.az-field--full{ grid-column:1/-1; }
.az-field label{
  font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--az-ink-3);
}
.az-field input,.az-field select,.az-field textarea{
  width:100%; padding:12px 0;
  border:0; border-bottom:1px solid var(--az-line); border-radius:0;
  background:transparent; color:var(--az-ink);
  font-family:var(--az-sans); font-size:15.5px;
  transition:border-color .2s ease;
}
.az-field select{ padding-right:20px; }
.az-field textarea{ min-height:120px; resize:vertical; }
.az-field input:focus,.az-field select:focus,.az-field textarea:focus{
  outline:none; border-bottom-color:var(--az-brand);
}
.az-field input::placeholder,.az-field textarea::placeholder{ color:var(--az-ink-3); }
.az-field .az-btn{ align-self:flex-start; margin-top:6px; }

/* trampa para bots: invisible pero no display:none, que algunos la detectan */
.az-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.az-aviso{
  margin-bottom:24px; padding:16px 18px;
  border-left:3px solid var(--az-brand);
  background:var(--az-paper); font-size:.96rem;
}
.az-aviso--error{ border-left-color:#B3261E; }
@media (max-width:640px){ .az-form{ grid-template-columns:minmax(0,1fr); } }

.az-info__row{
  display:grid; grid-template-columns:minmax(0,10rem) minmax(0,1fr); gap:16px;
  padding:26px 0; border-bottom:1px solid var(--az-line-sf);
}
.az-info__row:first-child{ border-top:1px solid var(--az-line); }
.az-info__k{ font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--az-ink-3); }
.az-info__v{ font-size:1.02rem; }
.az-info__v a:hover{ color:var(--az-brand); }
@media (max-width:520px){ .az-info__row{ grid-template-columns:minmax(0,1fr); gap:4px; } }

/* ===================== footer ===================== */
.az-footer{ background:var(--az-ink); color:#9B9282; }
[data-brand="entos"] .az-footer{ background:#000; }
.az-footer__grid{
  display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:clamp(24px,3vw,44px);
  padding-block:clamp(44px,5.5vw,66px) 40px;
}
.az-footer .az-logo__name{ color:#fff; }
.az-footer .az-logo__sub{ color:var(--az-gold); }
.az-footer p{ font-size:.92rem; margin-top:16px; max-width:36ch; }
.az-footer h4{
  font-family:var(--az-sans); font-size:12.5px; letter-spacing:.16em; text-transform:uppercase;
  color:#fff; margin:0 0 16px; font-weight:600;
}
.az-footer li{ margin-bottom:10px; font-size:.92rem; }
.az-footer li a:hover{ color:#fff; }
.az-footer__bottom{
  border-top:1px solid rgba(255,255,255,.09);
  padding-block:20px;
  display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between; align-items:center;
  font-size:.82rem; color:#9A9184;
}
@media (max-width:900px){ .az-footer__grid{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); } }
@media (max-width:520px){
  .az-footer__grid{ grid-template-columns:minmax(0,1fr); }
  .az-footer__bottom{ justify-content:flex-start; }
}

/* los anclas no deben quedar debajo del header pegajoso */
[id]{ scroll-margin-top:112px; }

/* accesibilidad */
body.az .az-skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:#17140F; color:#fff; padding:12px 18px;
}
body.az .az-skip:focus{ left:0; }
:focus-visible{ outline:2px solid var(--az-brand); outline-offset:3px; }

/* animacion de entrada.
   El estado oculto solo aplica si el JS alcanzo a marcar .az-js en <html>;
   asi, si el script falla o no corre, el contenido igual se ve. */
.az-js .az-rise{ opacity:0; transform:translateY(14px); }
.az-js .az-rise.az-in{ opacity:1; transform:none; transition:opacity .5s ease, transform .5s ease; }

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  .az-js .az-rise{ opacity:1; transform:none; }
}