/* ================================================================
   akumal.css — Overrides de marca Akumal Sport Nutrition
   Carga después del template CSS, por lo que tiene prioridad
   en cascada. Usar body .selector para ganar especificidad
   en lugar de !important siempre que sea posible.
================================================================ */

/* ── Preloader ───────────────────────────────────────────────── */
.preloader .site-name img.preloader-logo {
  width: clamp(220px, 38vw, 420px);
  height: auto;
  object-fit: contain;
}

/* ── Hero logo ───────────────────────────────────────────────── */
.section-hero-v1 .davies-large img.hero-logo {
  width: clamp(280px, 50vw, 700px);
  height: auto;
  object-fit: contain;
  filter: brightness(0) invert(1)
          drop-shadow(1px  0   0 #000)
          drop-shadow(-1px 0   0 #000)
          drop-shadow(0    1px 0 #000)
          drop-shadow(0   -1px 0 #000)
          drop-shadow(0    2px 6px rgba(0,0,0,0.7));
  display: block;
}

@media (max-width: 767px) {
  .section-hero-v1 .davies-large img.hero-logo {
    width: clamp(160px, 60vw, 300px);
  }
}

/* ── Hero: layout de columnas ────────────────────────────────── */

/* Columna izquierda: badges arriba, logo abajo — sin cambios */

/* Columna derecha: todo el bloque anclado al fondo del hero */
body .section-hero-v1 .col-right {
  justify-content: flex-end;
  padding-bottom: 48px;
}

/* "CREA TU MARCA AQUÍ" pasa a ser intro del bloque, no flotante */
body .section-hero-v1 .col-right .top {
  margin-bottom: 20px;
}

/* ── Hero: texto descripción ─────────────────────────────────── */
body .section-hero-v1 .bot .desc {
  color: #ffffff !important;
  text-shadow:
    0 1px 4px rgba(0, 0, 0, 0.9),
    0 2px 12px rgba(0, 0, 0, 0.7);
  line-height: 1.75;
}

@media (max-width: 1599px) {
  body .section-hero-v1 .col-right .top {
    margin-bottom: 20px;
  }
}

@media (max-width: 767px) {
  body .section-hero-v1 .col-right {
    padding-bottom: 32px;
  }
  body .section-hero-v1 .col-right .top {
    margin-bottom: 16px;
  }
}

/* ── Hero: contacto rápido (bajo el CTA) ─────────────────────── */
.hero-contact-strip {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.hero-contact-strip a,
.hero-contact-strip p {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.80);
  text-decoration: none;
  margin: 0;
  transition: color 0.2s;
}

.hero-contact-strip a:hover {
  color: #ffffff;
}

/* ── Layout de secciones ─────────────────────────────────────── */
.section-feature {
  position: relative;
  z-index: 10;
  background-color: var(--black);
}

.section-feature-hero {
  background: linear-gradient(180deg, #607561 0%, #2a3328 30%, var(--black) 80%);
}

body .section-selected-work {
  background: linear-gradient(
    180deg,
    #0d100d   0%,
    #1a2a1a  18%,
    #b8d0b8  44%,
    #e5f0e5  62%,
    #f2f7f2  80%,
    #ffffff 100%
  );
}


/* Ocultar cursor del template (puede ser sobreescrito por JS,
   de ahí los !important — son intencionales en este bloque) */
.tf-mouse,
.tf-mouse * {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.section-service-2 {
  position: relative;
  z-index: 9;
  min-height: 100vh;
}

/* Ocultar items 2+ antes de que GSAP arranque, evita el flash */
@media (min-width: 1200px) {
  .section-service-2 .wg-service-2:not(:first-child) {
    opacity: 0;
    transform: scale(0.95);
  }
}


/* ── Service section text color ──────────────────────────────── */
body .section-service-2 .s-header h2,
body .section-service-2 .wg-service-2 .title {
  color: #212529;
}

body .section-service-2 .wg-service-2 .desc,
body .section-service-2 .wg-service-2 .tf-list li {
  color: rgba(33, 37, 41, 0.75);
}

body .section-service-2 .wg-service-2 .tf-btn {
  color: #212529;
  border-color: #212529;
}

body .section-service-2 .wg-service-2 .tf-btn::before {
  background-color: #212529;
}

body .section-service-2 .wg-service-2 .tf-btn:hover {
  color: #ffffff;
}

/* ── Transitions ─────────────────────────────────────────────── */
.transition-light-to-dark {
  width: 100%;
  height: 160px;
  background: linear-gradient(180deg, #dce8dc 0%, #0c110c 100%);
  margin-top: -1px;
}


/* ── Imagen panorámica "Por qué elegirnos" ───────────────────── */
.feature-wide-img {
  width: 100%;
  height: 420px;
  overflow: hidden;
  border-radius: 16px;
}

.feature-wide-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

@media (max-width: 767px) {
  .feature-wide-img { height: 260px; }
}

/* ── Cards "Por qué elegirnos" ───────────────────────────────── */
.section-feature-hero .feature-image {
  display: block;
  height: 420px;
  overflow: hidden;
  border-radius: 16px;
}

.section-feature-hero .feature-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ── Garantías ───────────────────────────────────────────────── */
body .section-award {
  background: #0c110c !important;
}

.section-feature-hero .wg-feature-v01 .feature-content::before {
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.92) 100%);
  backdrop-filter: none;
  border-radius: 0 0 16px 16px;
}

/* Especificidad suficiente sin !important al añadir body */
body .section-feature-hero .wg-feature-v01 .feature-content .tag,
body .section-feature-hero .wg-feature-v01 .feature-content .name,
body .section-feature-hero .wg-feature-v01 .feature-content .name a,
body .section-feature-hero .wg-feature-v01 .feature-content .price {
  color: #ffffff;
  text-shadow: 0 1px 6px rgba(0,0,0,0.8);
}

/* ── Botón MENÚ ──────────────────────────────────────────────── */
/* ── Hamburger button ─────────────────────────────────────────── */
.btn-mobile-menu.hamburger-btn {
  background: none;
  border: none;
  padding: 6px;
  cursor: pointer;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 36px;
  height: 36px;
}

.ham-line {
  display: block;
  width: 24px;
  height: 2px;
  background-color: currentColor;
  border-radius: 2px;
  transition: transform 0.35s cubic-bezier(0.23, 1, 0.32, 1),
              opacity 0.25s ease,
              width 0.35s ease;
  transform-origin: center;
}

.hamburger-btn:hover .ham-line:nth-child(1) { width: 18px; }
.hamburger-btn:hover .ham-line:nth-child(3) { width: 18px; }

.hamburger-btn.is-open .ham-line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.hamburger-btn.is-open .ham-line:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.hamburger-btn.is-open .ham-line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
  width: 24px;
}

/* ── Header ──────────────────────────────────────────────────── */
.tf-header .header-inner .row {
  position: relative;
  align-items: center;
}
/* Nav: solo visible en desktop (≥992px) */
.tf-header .header-inner .header-nav-col {
  display: none !important;
}
@media (min-width: 992px) {
  .tf-header .header-inner .header-nav-col {
    display: flex !important;
    align-items: center;
    justify-content: center;
  }
}

/* Hamburger: solo en <992px */
@media (min-width: 992px) {
  .tf-header .btn-mobile-menu {
    display: none !important;
  }
}

/* JOIN THE TEAM: solo en desktop */
@media (max-width: 991px) {
  .tf-header .header-login-btn:not(.login-icon-only) {
    display: none !important;
  }
}

/* Tablet (768–991px): logo expands, controls al extremo derecho */
@media (min-width: 768px) and (max-width: 991px) {
  .tf-header .header-inner .row > [class*="col-md-3"]:first-child {
    flex: 1 1 auto;
    max-width: none;
    width: auto;
  }
  .tf-header .header-inner .row > [class*="col-md-3"]:last-child {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
  }
}

.tf-header .header-inner .box-navigation {
  position: static;
  display: flex;
  align-items: center;
}
.tf-header .nav-menu-main .nav-icon {
  display: none;
}

body .tf-header .logo-site img {
  height: 35px;
  width: auto;
}

body .tf-header .nav-menu-main .item-link {
  font-size: 16px;
  line-height: 20px;
  letter-spacing: 0.02em;
  font-weight: 800;
  align-items: center;
}

body .tf-header .nav-menu-main .item-link span {
  font-size: 10px;
  line-height: 14px;
}

body .tf-header .header-contact .text-caption,
body .tf-header .header-contact a {
  font-size: 11px;
  line-height: 18px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body .tf-header .btn-mobile-menu {
  font-size: 14px;
}

/* ── Language Selector ───────────────────────────────────────── */
.lang-selector {
  position: relative;
}

.lang-toggle {
  display: flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  color: #ffffff;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.02em;
  cursor: pointer;
  padding: 4px 0;
  opacity: 0.85;
  transition: opacity 0.2s;
  white-space: nowrap;
}

.lang-toggle:hover {
  opacity: 1;
}

.lang-toggle .lang-flag {
  font-size: 15px;
  line-height: 1;
}
.lang-flag-img {
  border-radius: 2px;
  vertical-align: middle;
  display: inline-block;
  object-fit: cover;
}
.lang-option .lang-flag-img {
  border-radius: 2px;
  vertical-align: middle;
}

.lang-toggle svg {
  transition: transform 0.2s;
  opacity: 0.7;
}

.lang-selector:hover .lang-toggle svg,
.lang-selector.open .lang-toggle svg {
  transform: rotate(180deg);
}

.lang-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  background: rgba(15, 20, 16, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 6px;
  min-width: 90px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
  backdrop-filter: blur(10px);
  z-index: 9999;
}

.lang-selector:hover .lang-dropdown,
.lang-selector.open .lang-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.lang-option {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border-radius: 5px;
  color: rgba(255, 255, 255, 0.65);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}

.lang-option:hover,
.lang-option.active {
  background: rgba(96, 117, 97, 0.35);
  color: #ffffff;
}

/* ── Botón marquee (hero CTA) ────────────────────────────────── */
.btn-23,
.btn-23 *,
.btn-23 :after,
.btn-23 :before,
.btn-23:after,
.btn-23:before {
  border: 0 solid;
  box-sizing: border-box;
}

.btn-23 {
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: button;
  appearance: button;
  background-color: #0d1a0e;
  background-image: none;
  color: #fff;
  border: 2px solid rgba(255,255,255,0.6);
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  margin: 0;
  -webkit-mask-image: -webkit-radial-gradient(#000, #fff);
  mask-image: radial-gradient(#000, #fff);
  padding: 0.8rem 2.5rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-decoration: none;
  display: inline-block;
  border-radius: 99rem;
  overflow: hidden;
  position: relative;
  min-width: 220px;
}

.btn-23:disabled {
  cursor: default;
}

.btn-23 span {
  display: grid;
  inset: 0;
  place-items: center;
  position: absolute;
  transition: opacity 0.2s ease;
}

.btn-23 .marquee {
  --spacing: 22em;
  --start: 0em;
  --end: 22em;
  animation: marquee 2s linear infinite;
  animation-play-state: paused;
  opacity: 0;
  position: relative;
  text-shadow: #fff var(--spacing) 0, #fff calc(var(--spacing) * -1) 0, #fff calc(var(--spacing) * -2) 0;
}

.btn-23:hover .marquee {
  animation-play-state: running;
  opacity: 1;
}

.btn-23:hover .text {
  opacity: 0;
}

@keyframes marquee {
  0% { transform: translateX(var(--start)); }
  to { transform: translateX(var(--end)); }
}

/* ── Header Login Button ─────────────────────────────────────── */
.header-login-btn.login-icon-only {
  padding: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  justify-content: center;
  flex-shrink: 0;
}
.header-login-btn.login-icon-only span { display: none; }
.header-login-btn.login-icon-only svg { width: 20px; height: 20px; }

.header-login-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  background: rgba(96,117,97,0.18);
  border: 1px solid rgba(96,117,97,0.5);
  border-radius: 99px;
  font-size: 16px;
  letter-spacing: 0.02em;
  font-weight: 800;
  color: #fff;
  text-decoration: none;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.2s ease;
  white-space: nowrap;
}

.header-login-btn:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff !important;
  transform: translateY(-1px);
}

.header-login-btn svg {
  flex-shrink: 0;
  opacity: 0.9;
}


/* ── Botón lupa — envases ────────────────────────────────────── */
.envase-zoom-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px 9px 12px;
  border-radius: 99px;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 2px 12px rgba(0,0,0,0.12);
  cursor: pointer;
  color: #212529;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  transform: scale(1);
  transition: background 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease, color 0.25s ease;
  z-index: 10;
  white-space: nowrap;
}

.envase-zoom-btn::after {
  content: 'VIEW';
}

html[lang="es"] .envase-zoom-btn::after {
  content: 'VER';
}

.envase-zoom-btn:hover {
  background: #607561;
  color: #ffffff;
  border-color: transparent;
  box-shadow: 0 4px 20px rgba(96,117,97,0.40);
  transform: scale(1.04);
}

/* ── Modal envase ────────────────────────────────────────────── */
.envase-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.30s ease;
}

.envase-modal.is-open {
  pointer-events: auto;
  opacity: 1;
}

.envase-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5,9,5,0.90);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.envase-modal-card {
  position: relative;
  z-index: 1;
  background: transparent;
  border-radius: 16px;
  padding: 48px 40px 40px;
  max-width: 480px;
  width: calc(100% - 40px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  transform: translateY(24px) scale(0.97);
  transition: transform 0.32s cubic-bezier(0.22,1,0.36,1);
}

.envase-modal.is-open .envase-modal-card {
  transform: translateY(0) scale(1);
}

.envase-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.20);
  background: rgba(255,255,255,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: rgba(255,255,255,0.75);
  transition: background 0.2s ease, color 0.2s ease;
}

.envase-modal-close:hover {
  background: rgba(255,255,255,0.14);
  color: #ffffff;
}

.envase-modal-tag {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #A2B3A3;
}

.envase-modal-label {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: #ffffff;
  margin: 0;
  font-family: 'Syne', sans-serif;
}

.envase-modal-img-wrap {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 0 12px;
}

.envase-modal-img {
  max-width: 100%;
  max-height: 420px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 24px 60px rgba(0,0,0,0.70));
}

@media (max-width: 575px) {
  .envase-modal-card  { padding: 40px 24px 32px; }
  .envase-modal-img   { max-height: 300px; }
  .envase-modal-label { font-size: 22px; }
}

/* ── Tortuga logo — círculo glassmorphism ────────────────────── */
body .section-selected-work .image-award {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

body .section-selected-work .image-award img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ── Formatos Disponibles: tamaño reducido ───────────────────── */
/* Nombre del formato (Doypack / Stick / Botes) — más pequeño */
body .section-selected-work .text-slide.text-display-2 {
  font-size: clamp(36px, 5.5vw, 82px);
  line-height: clamp(42px, 6vw, 90px);
}

/* Contenedor de imagen — menos alto */
body .section-selected-work .slick-for .image {
  height: 480px;
  padding-top: 28px;
}

/* Imagen del producto — tamaño ajustado */
body .section-selected-work .slick-for .image img {
  max-height: 480px;
  margin-bottom: 24px;
}

/* Ajuste proporcional del efecto 3D del slider de nombres */
body .section-selected-work .slick-nav .slick-slide:not(.slick-current) {
  transform: rotateX(45deg) translateY(-80px) translateZ(-80px);
}
body .section-selected-work .slick-nav .slick-current ~ .slick-slide:last-child {
  transform: rotateX(-45deg) translateY(80px) translateZ(-80px);
}

/* ── Footer inner row — top alignment ──────────────────── */
.footer-inner .row {
  align-items: flex-start;
}

/* ── Footer — desktop (≥768px) ──────────────────────────────────── */
@media (min-width: 768px) {
  /* Más aire vertical */
  .tf-footer .footer-inner {
    padding-top: 96px;
    padding-bottom: 96px;
  }

  /* Columna logo: separador derecho + padding generoso */
  .tf-footer .footer-inner .col-md-3 {
    padding-right: 56px;
    border-right: 1px solid rgba(255,255,255,0.07);
  }

  /* Columnas nav: padding izquierdo simétrico */
  .tf-footer .footer-inner .col-md-4,
  .tf-footer .footer-inner .col-md-5 {
    padding-left: 56px;
  }

  /* Logo más grande en desktop */
  .tf-footer .footer-logo img { max-width: 210px !important; }

  /* Tagline: más espaciado */
  .tf-footer .footer-inner .col-md-3 .title {
    font-size: 10px !important;
    letter-spacing: 0.18em;
    color: rgba(255,255,255,0.40) !important;
    margin-top: 32px !important;
  }

  /* Descripción: texto completo, color suave */
  .tf-footer .footer-inner .col-md-3 .text-body-2 {
    font-size: 13.5px;
    line-height: 1.75;
    color: rgba(255,255,255,0.48);
    margin-top: 14px !important;
  }
}

/* Heading de sección: acento verde debajo (todas las pantallas) */
.tf-footer .footer-heading {
  position: relative;
  padding-bottom: 14px;
  margin-bottom: 20px;
}
.tf-footer .footer-heading::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 20px;
  height: 2px;
  background: #607561;
  border-radius: 2px;
}

@media (min-width: 768px) {
  /* Links: gap ajustado y tamaño más legible */
  .tf-footer .footer-menu-list { gap: 6px; }

  .tf-footer .footer-menu-list a.h5 {
    font-size: 1.15rem;
    transition: color 0.2s ease, transform 0.2s ease;
    display: inline-flex;
    align-items: center;
  }
  .tf-footer .footer-menu-list a.h5:hover {
    color: #607561 !important;
    transform: translateX(5px);
  }

  /* Email y teléfono: sin letter-spacing excesivo para que quepan */
  .tf-footer .footer-menu-list a.d-flex {
    letter-spacing: 0.02em !important;
    font-size: 0.92rem;
  }

  /* Iconos sociales: un poco más grandes */
  .tf-footer .social-icon-circle {
    width: 40px;
    height: 40px;
  }
  .tf-footer .social-icon-circle svg {
    width: 18px;
    height: 18px;
  }

  /* Footer bottom: barra limpia */
  .tf-footer .footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.06);
  }
  .tf-footer .footer-bottom .bottom {
    padding-top: 28px;
    padding-bottom: 40px;
    align-items: center;
  }

  /* Copyright: peso visual correcto */
  .tf-footer .text-nocopy {
    font-size: 11px;
    letter-spacing: 0.12em;
    color: rgba(255,255,255,0.30) !important;
  }

  /* Links legales: discretos pero legibles, con hover verde */
  .footer-bottom .bottom > div a {
    font-size: 11px;
    letter-spacing: 0.1em;
    color: rgba(255,255,255,0.35) !important;
    transition: color 0.2s ease;
  }
  .footer-bottom .bottom > div a:hover,
  .tf-footer .action-go-top:hover {
    color: #607561 !important;
  }
}

/* ── Header sticky on scroll ────────────────────────────── */
.tf-header.header-sticky {
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 24px rgba(0, 0, 0, 0.07);
  padding-top: 22px;
  padding-bottom: 22px;
  margin-bottom: 0;
}

/* Logo y elementos del header siempre visibles sobre fondo blanco sticky */
.tf-header.header-sticky .logo-site img {
  filter: brightness(0);
}

.tf-header.header-sticky .lang-toggle {
  color: #212529;
}

.tf-header.header-sticky .lang-dropdown {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(26, 26, 26, 0.10);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.10);
}

.tf-header.header-sticky .lang-option {
  color: rgba(26, 26, 26, 0.65);
}

.tf-header.header-sticky .lang-option:hover,
.tf-header.header-sticky .lang-option.active {
  background: rgba(96, 117, 97, 0.12);
  color: #212529;
}

.tf-header.header-sticky .header-login-btn {
  color: #212529;
  border-color: rgba(96, 117, 97, 0.45);
  background: rgba(96, 117, 97, 0.1);
}

.tf-header.header-sticky .header-login-btn:hover {
  color: #ffffff !important;
  background: var(--primary);
  border-color: var(--primary);
}

.tf-header.header-sticky .ham-line {
  background-color: #212529;
}

.tf-header.header-sticky .nav-menu-main .item-link,
.tf-header.header-sticky .nav-menu-main .item-link span,
.tf-header.header-sticky .nav-menu-main .item-link svg {
  color: #212529;
  stroke: #212529;
}

/* ── Strip CTA "Personalizar envase" (sección formatos) ─────────── */
.cfg-cta-strip {
  background: var(--primary);
  padding: 28px 0;
  position: relative;
  z-index: 10;
}

.cfg-cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.cfg-cta-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cfg-cta-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.55);
  text-transform: uppercase;
  margin: 0;
}

.cfg-cta-desc {
  font-size: 0.95rem;
  color: #fff;
  margin: 0;
  line-height: 1.4;
}

.cfg-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  background: #fff;
  color: var(--primary);
  border-radius: 8px;
  font-family: 'Syne', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: opacity 0.2s, transform 0.15s;
  white-space: nowrap;
  flex-shrink: 0;
}

.cfg-cta-btn:hover {
  opacity: 0.88;
  color: var(--primary);
  transform: translateY(-1px);
}

@media (max-width: 575px) {
  .cfg-cta-inner {
    flex-direction: column;
    align-items: flex-start;
  }
  .cfg-cta-btn { width: 100%; justify-content: center; }
}


/* ── Formatos: hover de pills en content-wrap-2 ──────────────────
   sections.css fuerza color:#fff !important en todos los <a>
   de .content-wrap-2; esto restaura el color oscuro en hover
   para que el texto sea legible al rellenar el botón.          */
body .section-selected-work .content-wrap-2 a.tf-btn:hover {
  color: #0d100d !important;
}

/* ══════════════════════════════════════════════════════════════════
   MOBILE FIXES — sesión de diseño responsive
   ══════════════════════════════════════════════════════════════════ */

/* ── HERO — Móvil (≤767px) ──────────────────────────────────────── */
@media (max-width: 767px) {
  body .section-hero-v1 {
    min-height: 100vh;
    min-height: 100svh;
  }
  body .section-hero-v1 .col-left {
    height: unset;
    margin-bottom: 0;
    padding-bottom: 36px;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
  }
  body .section-hero-v1 .col-right { padding-bottom: 28px; }
  .header-login-btn span { display: none; }
  .header-login-btn {
    padding: 0; width: 34px; height: 34px;
    border-radius: 50%; justify-content: center; flex-shrink: 0;
  }
  .header-login-btn svg { width: 16px; height: 16px; }
  body .section-hero-v1 .col-right .top > span { display: none; }
  body .section-hero-v1 .col-right .top { margin-bottom: 12px; }
  body .section-hero-v1 .bot .desc {
    font-size: 13px !important;
    line-height: 1.6 !important;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 18px;
  }
  body .section-hero-v1 .col-right .bot .tf-btn {
    width: 100%; justify-content: center;
  }
  .hero-contact-strip { display: none; }

  /* Vídeo: encuadre y overlay */
  .section-hero-v1 .bg-video video { object-position: center 20%; }
  .section-hero-v1 .bg-video .hero-overlay-gradient {
    background: linear-gradient(to top, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.35) 50%, rgba(0,0,0,0.10) 100%);
  }

  /* "Por qué elegirnos" — centrar título + botón */
  .section-feature-hero .s-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-bottom: 28px;
    gap: 20px;
  }
}

/* ── FORMATOS — Móvil (≤767px) ───────────────────────────────────── */
@media (max-width: 767px) {
  body .section-selected-work {
    background: linear-gradient(180deg, #0d100d 0%, #1a2a1a 50%, #263326 100%);
  }
  .section-selected-work .bg-img { display: none; }
  /* Tortuga: decorativa solo en desktop, en móvil estorba */
  .section-selected-work .image-award { display: none; }
  .section-selected-work .slick-for .image { height: 360px; padding-top: 16px; }
  .section-selected-work .slick-for .image img { max-height: 280px; margin-bottom: 20px; }
  .section-selected-work .content-wrap-2 { margin-top: 0; padding-bottom: 28px; }
  .envase-zoom-btn { top: auto; bottom: 48px; right: 16px; }
}

/* ── OUR SPECIALTIES — Móvil (≤767px) ───────────────────────────── */
@media (max-width: 767px) {
  .wg-tech:not(.active) > .tech_text {
    opacity: 1; visibility: visible;
    color: var(--white);
    justify-content: space-between;
    align-items: center;
    gap: 12px;
  }
  .wg-tech:not(.active) > .tech_text p.h1 {
    font-size: clamp(1.4rem, 6vw, 2rem);
    margin-bottom: 0;
    white-space: nowrap;
  }
  .wg-tech:not(.active) > .tech_text h6 {
    font-size: 11px; text-align: right;
    color: var(--primary); flex-shrink: 0;
    margin-bottom: 0; line-height: 1.4;
  }
  .wg-tech .infiniteSlide_tech .tech_text p.h1 {
    font-size: clamp(1.1rem, 4.5vw, 1.5rem);
    margin-bottom: 0; white-space: nowrap;
  }
  .wg-tech .infiniteSlide_tech .tech_text .process { font-size: 10px; }
  .wg-tech .app_icon img { width: 90px; height: 46px; }
}

/* ── GARANTÍAS — Móvil (≤767px) ─────────────────────────────────── */
@media (max-width: 767px) {
  .section-award { padding-top: 48px !important; padding-bottom: 48px !important; }
  .section-award .award-img-wrap img { height: 220px; }
  .section-award .col-right { padding-bottom: 16px; }
}


/* ── FOOTER — Móvil (≤575px) ─────────────────────────────────────── */
@media (max-width: 575px) {
  .tf-footer .footer-inner { padding-top: 40px; padding-bottom: 40px; }

  /* Headings col-6 y listas col-6 → full width, apilados */
  .tf-footer .footer-inner .col-6 { width: 100%; }

  /* Separación visual entre bloques */
  .tf-footer .footer-heading { margin-bottom: 10px; margin-top: 28px; }

  /* Logo más compacto */
  .tf-footer .footer-logo img { max-width: 160px !important; }

  /* Descripción: fuente ligeramente menor */
  .tf-footer .footer-inner .text-body-2 { font-size: 13px; }

  /* Footer bottom: copyright y links apilados y centrados */
  .footer-bottom .bottom {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
  }
  .footer-bottom .bottom > div {
    justify-content: center !important;
    gap: 12px !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   HERO — Rediseño estilo Alma (tipografía grande, overlay limpio)
   ══════════════════════════════════════════════════════════════════ */

/* Pantalla completa en todos los dispositivos */
body .section-hero-v1 {
  height: 100svh;
  min-height: 600px;
}

/* Gradiente lateral: texto legible a la izquierda, vídeo visible a la derecha */
.section-hero-v1 .bg-video .hero-overlay-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.72) 0%,
    rgba(0, 0, 0, 0.50) 38%,
    rgba(0, 0, 0, 0.20) 65%,
    rgba(0, 0, 0, 0.06) 100%
  );
  pointer-events: none;
}

/* Titular hero grande — tipografía via text-display-2 + fw-bold + letter-space--3 */
.hero-headline {
  color: #ffffff;
  margin: 0 0 20px 0;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.40);
}

.hero-headline em {
  font-style: italic;
}

/* Tagline bajo el titular — pill glassmorphism */
.hero-tagline {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.90);
  margin: 0 0 36px 0;
  display: block;
  width: fit-content;
  padding: 6px 14px;
  background: rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

/* col-left: ancla todo el bloque al fondo del hero */
body .section-hero-v1 .col-left {
  justify-content: flex-end;
  padding-bottom: 64px;
  height: 100%;
}

/* Botón CTA dentro del hero */
.hero-cta-btn {
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.75) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  background: rgba(255, 255, 255, 0.08) !important;
}
.hero-cta-btn::before {
  background-color: #ffffff !important;
}
.hero-cta-btn:hover {
  color: #212529 !important;
}

@media (max-width: 991px) {
  .hero-headline {
    font-size: clamp(38px, 8vw, 62px);
  }
}

/* ══════════════════════════════════════════════════════════════════
   FORMATOS — pantalla completa en todos los dispositivos
   ══════════════════════════════════════════════════════════════════ */

body .section-selected-work {
  height: 100svh;
  min-height: 700px;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* content-wrap-1: contenido centrado-alto, no pegado al fondo */
body .section-selected-work .content-wrap-1 {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-top: clamp(40px, 8vh, 80px);
}

/* Imagen del carrusel: más alta */
body .section-selected-work .slick-for .image {
  height: clamp(320px, calc(100svh - 280px), 720px);
}

/* Montaña: imagen extendida hacia arriba para que picos lleguen a los botes */
body .section-selected-work .bg-img {
  inset: 0;
  align-items: flex-end;
  overflow: hidden;
}
body .section-selected-work .bg-img img {
  width: 100%;
  height: 115%;
  object-fit: cover;
  object-position: top center;
  flex-shrink: 0;
}