/* ==========================================================================
   Botones (Guía de Estilo: primarios / secundarios, S / M / L)
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  font-weight:600; letter-spacing:.02em; border-radius: var(--radius);
  border:2px solid transparent; white-space:nowrap;
  transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition);
}
.btn:active{ transform: translateY(1px); }
.btn-s{ font-size:1rem; padding:.5rem 1.1rem; }
.btn-m{ font-size:1.125rem; padding:.7rem 1.4rem; }
.btn-l{ font-size:1.25rem; padding:.9rem 1.8rem; }

.btn-primary{ background: var(--c-yellow); color: var(--c-black); }
.btn-primary:hover{ background: var(--c-yellow-dark); }
.btn-outline{ background: transparent; color: var(--c-black); border-color: var(--c-black); }
.btn-outline:hover{ background: var(--c-black); color: var(--c-white); }
.bg-dark .btn-outline, .hero .btn-outline{ color: var(--c-white); border-color: var(--c-white); }
.bg-dark .btn-outline:hover, .hero .btn-outline:hover{ background: var(--c-white); color: var(--c-black); }
.btn-dark{ background: var(--c-black); color: var(--c-white); }
.btn-dark:hover{ background:#000; }
.btn-link{
  display:inline-flex; align-items:center; gap:.4rem; font-weight:700; color: var(--c-black);
  border-bottom:2px solid var(--c-yellow); padding-bottom:2px;
}
.btn-link:hover{ color: var(--c-yellow-dark); }
.bg-dark .btn-link{ color: var(--c-white); }
.btn svg{ width:1em; height:1em; flex:none; }
.btn-icon{ display:inline-flex; align-items:center; justify-content:center; width:2.75rem;height:2.75rem;border-radius:50%; border:2px solid var(--c-black); background:transparent; }
.btn-icon:hover{ background:var(--c-black); color:var(--c-white); }

/* ==========================================================================
   Header / Navegación
   ========================================================================== */
.site-header{
  position: sticky; top:0; z-index:100;
  height: var(--header-h);
  background: transparent;
  border-bottom: 1px solid transparent;
  color: var(--c-white);
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
/* Transparente sobre el hero; sólido en cuanto se hace scroll (mantiene sticky siempre). */
.site-header.is-scrolled{
  background: var(--c-white); border-color: var(--c-gray-200); color: var(--c-black);
}
/* El hero que abre la página se superpone al header (que ocupa su propio
   alto en el flujo) en vez de quedar empujado debajo: así el header queda
   realmente transparente sobre la fotografía, y sigue siendo sticky sin
   trucos de margen negativo sobre el propio elemento sticky (rompe su
   comportamiento en algunos motores). Solo aplica al hero inicial de cada
   página (primer hijo de <main>), no a heros usados más abajo en la página. */
main > .hero:first-child{ margin-top: calc(-1 * var(--header-h)); }
.nav{
  height:100%;
  display:flex; align-items:center; justify-content:space-between;
  gap: var(--space-3);
}
.nav__logo img{ height:38px; width:auto; }
.nav__menu{ display:flex; align-items:center; gap: var(--space-4); }
.nav__menu a{ font-weight:600; font-size:.98rem; padding:.4rem 0; position:relative; color:inherit; }
.nav__menu a.is-active{ color: var(--c-yellow); }
.site-header.is-scrolled .nav__menu a.is-active{ color:var(--c-yellow-dark); }
.nav__menu a::after{
  content:""; position:absolute; left:0; right:0; bottom:-4px; height:2px; background:var(--c-yellow);
  transform:scaleX(0); transition:transform var(--transition);
}
.nav__menu a:hover::after, .nav__menu a.is-active::after{ transform:scaleX(1); }
.nav__actions{ display:flex; align-items:center; gap: var(--space-2); color:inherit; }
.nav__search{ background:none; border:none; display:flex; padding:.4rem; color:inherit; }
.nav__burger{ display:none; background:none; border:none; padding:.4rem; color:inherit; }
/* Swap por CSS (no por [hidden]/.hidden en JS): algunos motores no reflejan
   de forma fiable la propiedad "hidden" en elementos <svg>. */
.nav__burger-icon--close{ display:none; }
.nav__burger.is-open .nav__burger-icon--open{ display:none; }
.nav__burger.is-open .nav__burger-icon--close{ display:block; }

.has-dropdown{ position:relative; }
.dropdown{
  position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(8px);
  background:var(--c-white); color:var(--c-black); min-width:260px; border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md); padding: var(--space-2); opacity:0; visibility:hidden;
  transition: opacity var(--transition), transform var(--transition); z-index:50;
}
.has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown{
  opacity:1; visibility:visible; transform:translateX(-50%) translateY(0);
}
.dropdown a{ display:block; padding:.55rem .6rem; border-radius: var(--radius); font-weight:500; }
.dropdown a:hover{ background: var(--c-gray-100); }

@media (max-width: 960px){
  /* El botón de hamburguesa/cerrar debe quedar SIEMPRE por encima del panel
     fijo del menú (que se pinta por encima de elementos no posicionados sin
     importar el orden en el DOM), o de lo contrario queda tapado y no se
     puede volver a tocar para cerrar el menú. */
  .nav__actions{ position:relative; z-index:210; }
  .nav__menu{
    position:fixed; inset: 0 0 0 auto; width:min(320px,85vw); height:100vh;
    background: var(--c-white); color:var(--c-black); flex-direction:column; align-items:flex-start;
    padding: calc(var(--header-h) + var(--space-2)) var(--space-3) var(--space-3); gap: var(--space-2);
    transform: translateX(100%); transition: transform var(--transition); overflow-y:auto;
    z-index:200; visibility:hidden;
  }
  .nav__menu.is-open{ transform: translateX(0); box-shadow: var(--shadow-md); visibility:visible; }
  .nav__burger{ display:flex; }
  .has-dropdown .dropdown{ position:static; transform:none; box-shadow:none; opacity:1; visibility:visible; display:none; width:100%; }
  .has-dropdown.is-open .dropdown{ display:block; }

  /* Fondo oscuro detrás del menú: toca fuera para cerrarlo */
  .nav__scrim{
    position:fixed; inset:0; background:rgba(35,31,32,.5); z-index:150;
    opacity:0; visibility:hidden; transition: opacity var(--transition);
  }
  .nav__scrim.is-open{ opacity:1; visibility:visible; }

  body.nav-locked{ overflow:hidden; }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{ background: var(--c-black); color: var(--c-white); padding-block: var(--space-6) var(--space-3); }
.footer__grid{ display:grid; grid-template-columns: repeat(4,1fr); gap: var(--space-4); margin-bottom: var(--space-5); }
.footer__grid h6{ color:var(--c-yellow); font-size:1.05rem; margin-bottom:var(--space-2); }
.footer__grid a{ display:block; padding:.35rem 0; color:#d8d5d3; }
.footer__grid a:hover{ color:var(--c-yellow); }
.footer__social{ display:flex; gap:.75rem; justify-content:center; margin-bottom: var(--space-4); }
.footer__social a{
  width:44px; height:44px; border-radius:50%; background:var(--c-yellow); color:var(--c-black);
  display:flex; align-items:center; justify-content:center; transition: background var(--transition);
}
.footer__social a:hover{ background:var(--c-white); }
.footer__bottom{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap: var(--space-2);
  border-top:1px solid #3a3635; padding-top: var(--space-3); font-size:.85rem; color:#b9b5b3;
}
.footer__legal{ display:flex; gap: var(--space-3); flex-wrap:wrap; }
.footer__legal a:hover{ color:var(--c-yellow); }
.back-to-top{ background:var(--c-yellow); color:var(--c-black); font-weight:700; padding:.6rem 1rem; border-radius:var(--radius); display:inline-flex; gap:.4rem; align-items:center; }
@media (max-width: 900px){
  .footer__grid{ grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 520px){
  .footer__grid{ grid-template-columns: 1fr; }
}

/* ==========================================================================
   Hero / banners
   ========================================================================== */
.hero{
  position:relative; color:var(--c-white); display:flex; align-items:center;
  min-height: 620px; background-size:cover; background-position:center;
}
.hero::before{
  content:""; position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(20,18,18,.88) 10%, rgba(20,18,18,.35) 60%, rgba(20,18,18,.15) 100%);
}
.hero__content{ position:relative; z-index:1; max-width:640px; }
.hero__content h1{ margin-bottom: var(--space-2); }
.hero__content p{ font-size: var(--fs-p-01); color:#eae7e5; max-width:520px; }
.hero__actions{ display:flex; gap: var(--space-2); flex-wrap:wrap; margin-top: var(--space-3); }
.hero--sm{ min-height:420px; }
/* Hero de Inicio: más alto y con más aire debajo del texto (el padding-bottom
   extra, mayor al del top, desplaza el contenido centrado hacia arriba). */
.hero--home{ min-height: 760px; padding-block: calc(var(--header-h) + var(--space-4)) 7rem; }
/* Envoltura con la misma medida que .container: así la flecha queda
   exactamente alineada con el borde izquierdo del texto/los botones,
   sin importar el ancho de pantalla. */
.hero__arrow-wrap{ position:absolute; inset: auto 0 var(--space-4) 0; z-index:1; pointer-events:none; }
.hero__arrow-down{
  pointer-events:auto;
  width:44px; height:44px; display:flex; align-items:center; justify-content:center;
  color:var(--c-yellow); animation: bob 1.8s ease-in-out infinite;
}
@keyframes bob{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(8px);} }

.hero-slider__dots, .slider__dots{ display:flex; gap:.5rem; }
.hero-slider__dots button, .slider__dots button{
  width:10px; height:10px; border-radius:50%; border:none; background:rgba(255,255,255,.4); padding:0;
}
.hero-slider__dots button.is-active, .slider__dots button.is-active{ background:var(--c-yellow); }
.hero__nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:48px; height:48px; border-radius:50%; border:none; background:rgba(252,250,249,.15); color:var(--c-white);
  display:flex; align-items:center; justify-content:center; backdrop-filter: blur(2px);
}
.hero__nav:hover{ background:rgba(252,250,249,.3); }
.hero__nav--prev{ left: var(--space-3); }
/* En móvil el texto del hero ocupa varias líneas y queda centrado
   verticalmente: las flechas prev/next (centradas al 50%) terminan
   tapando el párrafo. Los puntos del slider ya permiten navegar, así
   que en pantallas chicas se ocultan las flechas redondas. */
@media (max-width: 640px){
  .hero__nav{ display:none; }
}
.hero__nav--next{ right: var(--space-3); }

.hero--split{ min-height:auto; background:none; color:var(--c-text); padding-block: var(--space-6); }
.hero--split::before{ content:none; }
.hero--split .container{ display:grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); align-items:center; }
.hero--split img{ border-radius: var(--radius-lg); width:100%; height:100%; object-fit:cover; aspect-ratio: 4/3; }
@media (max-width: 860px){
  .hero--split .container{ grid-template-columns:1fr; }
}

/* ==========================================================================
   Tarjetas
   ========================================================================== */
.card{
  background:var(--c-white); border:1px solid var(--c-gray-200); border-radius:var(--radius-lg);
  overflow:hidden; display:flex; flex-direction:column; height:100%;
  transition: box-shadow var(--transition), transform var(--transition);
}
.card:hover{ box-shadow: var(--shadow-md); transform: translateY(-3px); }
.card__img{ aspect-ratio: 1/1; object-fit:contain; background:var(--c-gray-100); padding: var(--space-3); }
.card__body{ padding: var(--space-3); display:flex; flex-direction:column; gap:.5rem; flex:1; }
.card__body h5, .card__body h6{ margin-bottom:.25rem; }
.card__body p{ color: var(--c-text-muted); font-size:.98rem; flex:1; }

.card--dark{
  position:relative; border-radius: var(--radius-lg); overflow:hidden; aspect-ratio: 4/5;
  background-size:cover; background-position:center; color:var(--c-white); display:flex; align-items:flex-end;
}
.card--dark::before{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.85) 100%); }
.card--dark .card__body{ position:relative; z-index:1; padding: var(--space-3); }
.card--dark h5{ font-size:1.4rem; margin-bottom:.35rem; }

.card-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap: var(--space-3); }
.card-grid--4{ grid-template-columns:repeat(4,1fr); }
@media (max-width: 1080px){ .card-grid--4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width: 900px){ .card-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width: 560px){ .card-grid{ grid-template-columns:1fr; } .card-grid--4{ grid-template-columns:1fr; } }

.icon-badge{
  width:64px; height:64px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background: var(--c-gray-100); color:var(--c-black); margin-bottom: var(--space-2);
}
.icon-badge svg{ width:30px; height:30px; }
.icon-badge--dark{ background:var(--c-black); color:var(--c-yellow); }
.icon-badge--yellow{ background:var(--c-yellow); color:var(--c-black); }

/* Tarjeta de producto (sección "Productos" del home): ícono + título + texto */
.card--product .card__body{ padding: var(--space-4); gap:.6rem; }
.product-icon{ width:48px; height:48px; color:var(--c-black); }

/* ==========================================================================
   Nuestras soluciones (carrusel vertical: pestañas + imagen)
   ========================================================================== */
.solutions__grid{ display:grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); align-items:center; }
.solutions__tabs{ display:flex; flex-direction:column; align-items:flex-start; gap:.65rem; margin: var(--space-3) 0; }
.solutions__tab{
  background:none; border:none; text-align:left; font-family:inherit; cursor:pointer;
  font-size:1.4rem; font-weight:700; color:#726c69; padding:.2rem 0; transition: color var(--transition);
}
.solutions__tab:hover{ color:#fff; }
.solutions__tab.is-active{ color: var(--c-yellow); }
.solutions__desc{ max-width: 460px; margin-bottom: var(--space-2); min-height:3.2em; }
.solutions__media{ position:relative; }
.solutions__media img{ width:100%; border-radius: var(--radius-lg); aspect-ratio: 1/1; object-fit:cover; }
.solutions__dots{
  position:absolute; top:50%; right:-2.25rem; transform:translateY(-50%);
  display:flex; flex-direction:column; gap:.6rem;
}
.solutions__dots button{ width:10px; height:10px; border-radius:50%; border:none; background:rgba(255,255,255,.35); padding:0; }
.solutions__dots button.is-active{ background:var(--c-yellow); }
@media (max-width: 860px){
  .solutions__grid{ grid-template-columns:1fr; }
  .solutions__dots{ position:static; flex-direction:row; margin-top:1rem; transform:none; justify-content:center; }
}

/* ==========================================================================
   Ayuda / búsqueda dual CTA
   ========================================================================== */
.help-cards{
  display:grid; grid-template-columns:1fr auto 1fr; border:1px solid var(--c-gray-200); border-radius: var(--radius-lg); overflow:hidden;
}
.help-cards__item{ padding: var(--space-4); display:flex; flex-direction:column; gap:.5rem; justify-content:center; }
.help-cards__icon{ background:var(--c-yellow); display:flex; align-items:center; justify-content:center; padding: 0 var(--space-4); }
.help-cards__icon svg{ width:44px; height:44px; }
@media (max-width: 640px){
  .help-cards{ grid-template-columns:1fr; }
  .help-cards__icon{ padding: var(--space-2); }
}

/* ==========================================================================
   CTA band
   ========================================================================== */
.cta-band{ background: var(--c-yellow); color:var(--c-black); }
.cta-band__inner{ display:flex; align-items:center; justify-content:space-between; gap: var(--space-3); padding-block: var(--space-5); }
.cta-band h3{ margin-bottom:0; }
.cta-band .eyebrow{ color:#5b4600; }
.cta-band__arrow{ width:64px; height:64px; border-radius:50%; border:2px solid var(--c-black); display:flex; align-items:center; justify-content:center; flex:none; }

/* ==========================================================================
   Filtros / tabs / búsqueda
   ========================================================================== */
.filters-bar{
  background: var(--c-black); color:var(--c-white); border-radius: var(--radius-lg);
  padding: var(--space-3); display:grid; grid-template-columns:repeat(3,1fr) 1.3fr auto auto; gap: var(--space-2); align-items:center;
  margin-top: calc(var(--space-6) * -1.15); position:relative; z-index:2;
}
.filters-bar select, .filters-bar input{
  width:100%; padding:.75rem .9rem; border-radius: var(--radius); border:1px solid #4a4544; background:#2c2828; color:var(--c-white);
}
.filters-bar .search-field{ position:relative; }
.filters-bar .search-field svg{ position:absolute; right:.8rem; top:50%; transform:translateY(-50%); width:18px;height:18px; opacity:.7; }
@media (max-width: 980px){
  .filters-bar{ grid-template-columns:1fr 1fr; margin-top: var(--space-3); }
}

.tabs{ display:flex; flex-wrap:wrap; gap: var(--space-2); margin-bottom: var(--space-4); }
.tabs button{
  padding:.7rem 1.4rem; border-radius:999px; border:1px solid var(--c-gray-300); background:var(--c-white); font-weight:600;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.tabs button.is-active{ background: var(--c-yellow); border-color: var(--c-yellow); color:var(--c-black); }
.tabs button:hover:not(.is-active){ border-color: var(--c-black); }

.results-bar{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:var(--space-2); margin-bottom: var(--space-3); color:var(--c-text-muted); font-weight:600; }

.load-more{ display:flex; justify-content:center; margin-top: var(--space-4); }
.pagination{ display:flex; justify-content:center; gap:.4rem; margin-top: var(--space-4); }
.pagination button{ width:40px;height:40px;border-radius:var(--radius); border:1px solid var(--c-gray-300); background:var(--c-white); font-weight:600; }
.pagination button.is-active{ background:var(--c-black); color:var(--c-white); border-color:var(--c-black); }

/* ==========================================================================
   Formularios
   ========================================================================== */
.form-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap: var(--space-2); }
.form-grid--2{ grid-template-columns:repeat(2,1fr); }
@media (max-width: 720px){ .form-grid, .form-grid--2{ grid-template-columns:1fr; } }
.field{ display:flex; flex-direction:column; gap:.35rem; }
.field label{ font-size:.85rem; font-weight:600; }
.field input, .field select, .field textarea{
  padding:.85rem 1rem; border:1px solid var(--c-gray-300); border-radius:var(--radius); background:var(--c-white); color:var(--c-text);
  width:100%;
}
.bg-dark .field input, .bg-dark .field select, .bg-dark .field textarea{ background:#2c2828; border-color:#4a4544; color:var(--c-white); }
.field input:focus, .field select:focus, .field textarea:focus{ outline:2px solid var(--c-yellow); border-color:var(--c-yellow); }
.field textarea{ min-height:130px; resize:vertical; }
.field.has-error input, .field.has-error textarea{ border-color:#c0392b; }
.field__error{ display:none; color:#c0392b; font-size:.8rem; }
.field.has-error .field__error{ display:block; }
.checkbox-field{ display:flex; align-items:flex-start; gap:.6rem; font-size:.9rem; }
.checkbox-field input{ margin-top:.3rem; }
.radio-group{ display:flex; gap: var(--space-3); }
.radio-field{ display:flex; align-items:center; gap:.5rem; }
.form-note{ font-size:.8rem; color:var(--c-text-muted); }
.bg-dark .form-note{ color:#bdb9b7; }
.recaptcha-fake{
  display:flex; align-items:center; gap:.6rem; border:1px solid var(--c-gray-300); border-radius:var(--radius);
  padding:.7rem 1rem; font-size:.85rem; color:var(--c-text-muted); max-width:260px;
}
.form-success{
  display:none; background:#e7f6ec; border:1px solid #2f9e56; color:#1c6b39; padding: var(--space-2) var(--space-3);
  border-radius:var(--radius); margin-bottom: var(--space-2); font-weight:600;
}
.form-success.is-visible{ display:block; }

/* ==========================================================================
   Historia / timeline slider, valores, stats
   ========================================================================== */
.stats-row{ display:grid; grid-template-columns:repeat(3,1fr); gap: var(--space-3); text-align:center; }
.stats-row .stat{ border:1px solid var(--c-gray-200); border-radius:var(--radius-lg); padding: var(--space-3); }
.stats-row .stat strong{ display:block; font-size:2.5rem; font-weight:900; }
@media (max-width:640px){ .stats-row{ grid-template-columns:1fr; } }

.values-grid{ display:grid; grid-template-columns:1fr 1fr; gap: var(--space-5); }
@media (max-width:768px){ .values-grid{ grid-template-columns:1fr; gap: var(--space-3); } }
.checklist li{ display:flex; gap:.6rem; padding:.4rem 0; align-items:flex-start; }
.checklist svg{ flex:none; width:20px; height:20px; color:var(--c-yellow); margin-top:.2rem; }

/* ==========================================================================
   Sidebar (Industrias - Detalle)
   ========================================================================== */
.layout-sidebar{ display:grid; grid-template-columns: 300px 1fr; gap: var(--space-5); align-items:start; }
@media (max-width: 880px){ .layout-sidebar{ grid-template-columns:1fr; } }
.side-nav{ border:1px solid var(--c-gray-200); border-radius:var(--radius-lg); overflow:hidden; }
.side-nav a{ display:block; padding:.9rem 1.1rem; border-bottom:1px solid var(--c-gray-200); font-weight:600; }
.side-nav a:last-child{ border-bottom:none; }
.side-nav a.is-active{ background:var(--c-yellow); }
.side-nav a:hover:not(.is-active){ background:var(--c-gray-100); }
.side-box{ background:var(--c-yellow); border-radius:var(--radius-lg); padding: var(--space-3); margin-top: var(--space-3); }
.side-box h6{ margin-bottom: var(--space-2); }
.side-box .btn-dark{ width:100%; justify-content:space-between; margin-bottom:.6rem; }
.side-box--form{ background:var(--c-black); color:var(--c-white); }
.side-box--form input{ background:var(--c-white); color:var(--c-black); border:none; padding:.7rem .9rem; border-radius:var(--radius); width:100%; margin-bottom:.6rem; }

/* ==========================================================================
   Utilidades varias
   ========================================================================== */
.flex-between{ display:flex; align-items:center; justify-content:space-between; gap: var(--space-2); }
.mt-0{ margin-top:0; }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap: var(--space-5); align-items:center; }
@media (max-width: 860px){ .grid-2{ grid-template-columns:1fr; } }
.map-embed{ border-radius: var(--radius-lg); overflow:hidden; border:1px solid var(--c-gray-200); }
.map-embed iframe{ width:100%; height:420px; border:0; display:block; }
.breadcrumbs{ font-size:.85rem; color:var(--c-text-muted); margin-bottom: var(--space-2); }
.breadcrumbs a:hover{ color:var(--c-yellow-dark); }

/* Esto hace que cualquier enlace que actúe como pestaña luzca como un botón */
a[data-tab-target], button[data-tab-target] {
  /* Aquí pegas las propiedades visuales de tu botón original */
  display: inline-block;
  padding: 10px 20px;
  background-color: #ffcc01; /* Color de ejemplo */
  color: #0c0101;
  border-radius: 32px;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  border: none;
}

/* Estado activo o hover opcional */
a[data-tab-target].is-active, button[data-tab-target].is-active {
  background-color: #1f1901;
  color: #ffffff;
}