/* ========================================
   FEDERAL GAS - ESTILOS GLOBALES
======================================== */

/* PALETA DE COLORES */
:root {
  --gold-primary: #D4AF37;
  --gold-dark: #B8860B;
  --gold-light: #E6C46A;

  --black: #0B0B0B;
  --gray-dark: #1A1A1A;
  --gray-medium: #2E2E2E;

  --beige: #F5F2E9;
  --white: #FFFFFF;

  --container-width: 1400px;
}

/* RESET */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}


body {
  background-color: var(--black);
  color: var(--white);
  font-family: 'Manrope', sans-serif;
  line-height: 1.5;
}


img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  cursor: pointer;
}


/* ========================================
   FLECHAS DE ENLACES - SVG
======================================== */

.link-arrow {
  display: block;
  width: 17px;
  height: 17px;
  flex-shrink: 0;

  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;

  transition: transform 0.3s ease;
}

/* Movimiento sutil */

.services-whatsapp:hover .link-arrow,
.drain-promo__cta:hover .link-arrow {
  transform: translate(2px, -2px);
}

@media (prefers-reduced-motion: reduce) {
  .link-arrow {
    transition: none;
  }
}


/* CONTENEDOR GENERAL */
.container {
  width: min(90%, var(--container-width));
  margin-inline: auto;
}

/* SECCIONES */
.section {
  padding: 100px 0;
}

/* Evitar que la navegación por anclas quede oculta bajo el navbar fijo. */
main section[id] {
  scroll-margin-top: 94px;
}

@media (max-width: 768px) {
  .section {
    padding: 70px 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}


/* ========================================
   COLOR DE ICONOS SVG
======================================== */

.highlight-icon img,
.experience-feature__icon img,
.service-card__icon img {
  filter:
    brightness(0)
    saturate(100%)
    invert(81%)
    sepia(25%)
    saturate(837%)
    hue-rotate(350deg)
    brightness(96%)
    contrast(89%);
}


/* ========================================
   DEGRADADO GENERAL - FEDERAL GAS
======================================== */

.site-flow-gradient {
  position: relative;
  isolation: isolate;

  background: linear-gradient(
    180deg,
    #0B0B0B 0%,
    #101010 8%,
    #171717 20%,
    #222221 35%,
    #302F2C 50%,
    #45423D 68%,
    #777169 83%,
    #C8C2B7 94%,
    #F5F2E9 100%
  );
}

/* Eliminamos las capas decorativas anteriores */

.site-flow-gradient::before,
.site-flow-gradient::after {
  content: none;
}


.services,
.works,
.experience,
.contact {
  position: relative;
  z-index: 1;
  background: transparent !important;
}


/* ========================================
   HEADER
======================================== */


/* ========================================
   NAVBAR INTELIGENTE
======================================== */

.header {
  --header-height: 82px;
  --scroll-progress: 0;

  position: sticky;
  top: calc(-1 * var(--header-height));
  z-index: 100;

  height: var(--header-height);
  background: var(--black);

  transition:
    top 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    background-color 0.3s ease,
    box-shadow 0.3s ease;
}

/* Navbar visible después del Hero */

.header.is-pinned {
  top: 0;

  background: rgba(11, 11, 11, 0.94);

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* Línea de progreso */

.header::after {
  content: "";

  position: absolute;
  bottom: 0;
  left: 0;

  width: 100%;
  height: 2px;

  background: var(--gold-primary);

  transform: scaleX(var(--scroll-progress));
  transform-origin: left;

  opacity: 0;
  pointer-events: none;

  transition: opacity 0.3s ease;
}

.header.is-pinned::after {
  opacity: 0.85;
}

/* Responsive */

@media (max-width: 850px) {
  .header {
    --header-height: 104px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .header {
    transition: none;
  }
}


.header-container {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

/* Logo */
.header-logo {
  width: 290px;
  flex-shrink: 0;
  align-self: flex-start;
  margin-top: 8px;
  position: relative;
  z-index: 5;
}

.header-logo img {
  display: block;
  width: 100%;
  height: auto;
}

/* Navegación */
.header-nav {
  display: flex;
  align-items: center;
  gap: 30px;
}

.nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;

  font-size: 14px;
  font-weight: 600;
  color: var(--white);
  transition: color 0.25s ease;
}

.nav-link::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -9px;
  width: 0;
  height: 2px;
  background: var(--gold-primary);
  border-radius: 999px;
  transform: translateX(-50%);
  transition: width 0.25s ease;
}

.nav-link:hover {
  color: var(--gold-light);
}
.nav-link.active {
  color: var(--gold-light);
}
.nav-link:hover::after {
  width: 100%;
}

.nav-link.active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -9px;
  width: 100%;
  height: 2px;
  background: var(--gold-primary);
}

/* Botón del Header */
.header-cta {
  padding: 12px 20px;
  border: 1px solid var(--gold-primary);
  border-radius: 6px;
  color: var(--gold-light);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  transition: 0.3s ease;
}

.header-cta:hover {
  background: var(--gold-primary);
  color: var(--black);
}

/* Menú móvil */
.menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  border: 0;
  background: none;
  padding: 10px;
}

.menu-toggle span {
  width: 26px;
  height: 2px;
  background: var(--gold-primary);
}


/* ========================================
   HEADER - RESOLUCIONES INTERMEDIAS Y MÓVILES
======================================== */

@media (max-width: 1024px) and (min-width: 851px) {
  .header-nav { gap: 15px; }
  .header-logo { width: 245px; }
  .nav-link { font-size: 12px; }
  .header-cta { font-size: 12px; padding: 10px; }
}

@media (max-width: 850px) {
  .header-container { gap: 16px; }
  .header-logo {
    width: clamp(195px, 55vw, 220px);
    flex-shrink: 0;
    align-self: center;
    margin-top: 0;
    transform: none;
  }
  .header-logo img { max-height: 88px; object-fit: contain; }
  .header.is-pinned .header-logo { transform: none; }
  .header-cta { display: none; }
  .menu-toggle { display: flex; flex-shrink: 0; }
  .header-nav {
    display: none;
    position: absolute;
    top: var(--header-height);
    left: 0;
    width: 100%;
    padding: 25px 5%;
    background: var(--gray-dark);
    flex-direction: column;
    align-items: stretch;
    gap: 22px;
  }
  .header-nav.is-open { display: flex; }
  .nav-link.active::after { display: none; }
  .nav-link { font-size: 15px; }
  main section[id] { scroll-margin-top: 120px; }
}

/* ========================================
   HERO - FEDERAL GAS
======================================== */

.hero {
  position: relative;
  min-height: 580px;
  isolation: isolate;
  background: var(--black);
  overflow: hidden;
}

/* ========================================
   IMAGEN DE FONDO
======================================== */

.hero::before {
  content: "";

  position: absolute;
  z-index: -2;

  inset: 0 0 0 40%;

  background-image: url("hero.webp");
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* ========================================
   CONTENEDOR PRINCIPAL
======================================== */

.hero-container {
  min-height: 900px;

  display: flex;
  align-items: center;

  padding-top: 75px;
  padding-bottom: 75px;
}

.hero-content {
  width: 100%;
  max-width: 900px;
}

.hero-intro h1 {
  margin-bottom: 30px;
}

/* ========================================
   ETIQUETA SUPERIOR
======================================== */

.hero-eyebrow {
  margin-bottom: 18px;

  color: var(--gold-light);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 3px;
  text-transform: uppercase;

  text-shadow:
    0 2px 8px rgba(0, 0, 0, .90);
}

/* ========================================
   TITULO PRINCIPAL
======================================== */

.hero h1 {
  max-width: 850px;

  color: #FFFFFF;
  font-size: clamp(48px, 5.2vw, 72px);
  font-weight: 400;
  letter-spacing: -1.8px;
  line-height: 1.15;

  text-shadow:
    0 2px 3px rgba(0, 0, 0, .90),
    0 7px 20px rgba(0, 0, 0, .55);
}

.hero h1 span {
  color: var(--gold-light);
  font-weight: 800;

  text-shadow:
    0 1px 2px rgba(0, 0, 0, .95),
    0 4px 14px rgba(0, 0, 0, .80),
    0 0 16px rgba(230, 196, 106, .15);
}

/* ========================================
   ACCIONES
======================================== */

.hero-actions {
  width: 100%;
}

.hero-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;

  margin-bottom: 30px;
}

/* ========================================
   BOTONES
======================================== */

.btn {
  min-height: 58px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;

  padding: 14px 28px;

  border-radius: 8px;

  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;

  transition:
    transform .25s ease,
    box-shadow .25s ease,
    filter .25s ease,
    background-color .25s ease,
    border-color .25s ease,
    color .25s ease;
}

/* BOTÓN PRINCIPAL */

.btn-primary {
  color: #111111;

  border: 1px solid rgba(255, 230, 140, .35);

  background: linear-gradient(
    180deg,
    #EFD47A 0%,
    #D9B84E 55%,
    #C9A63A 100%
  );

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .28),
    0 8px 22px rgba(212, 175, 55, .12);
}

.btn-primary:hover {
  transform: translateY(-2px);
  filter: brightness(1.04);

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .34),
    0 12px 26px rgba(212, 175, 55, .18);
}

/* BOTÓN SECUNDARIO */

.btn-secondary {
  color: var(--white);

  border: 1px solid var(--gold-primary);
  background-color: transparent;
}

.btn-secondary:hover {
  transform: translateY(-3px);

  color: var(--gold-light);
  background-color: rgba(212, 175, 55, .10);
}

.btn:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: 4px;
}

/* ========================================
   PROMOCIÓN DESTAPACIONES
======================================== */

.hero-promo {
  position: relative;

  display: flex;
  align-items: center;
  gap: 17px;

  width: 100%;
  max-width: 570px;

  min-height: 88px;
  padding: 17px 20px;

  overflow: hidden;
  isolation: isolate;

  color: #FFFFFF;

  background: linear-gradient(
    110deg,
    rgba(29, 27, 22, .94),
    rgba(16, 15, 14, .91)
  );

  border: 1px solid rgba(230, 196, 106, .48);
  border-radius: 9px;

  text-decoration: none;

  box-shadow:
    0 8px 28px rgba(0, 0, 0, .18),
    inset 0 1px 0 rgba(255, 255, 255, .04);

  transition:
    border-color .3s ease,
    transform .3s ease,
    box-shadow .3s ease;
}

/* Brillo dorado periódico */

.hero-promo::after {
  content: "";

  position: absolute;
  z-index: -1;

  top: -30%;
  left: -80%;

  width: 45%;
  height: 160%;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 224, 129, .12),
    rgba(255, 244, 201, .24),
    rgba(255, 224, 129, .12),
    transparent
  );

  transform: skewX(-20deg) translateX(-100%);

  pointer-events: none;

  animation: heroPromoShine 6.5s ease-in-out infinite;
}

@keyframes heroPromoShine {

  0%, 30% {
    transform: skewX(-20deg) translateX(-100%);
  }

  55%, 100% {
    transform: skewX(-20deg) translateX(600%);
  }

}

/* ========================================
   INDICADOR 24/7
======================================== */

.hero-promo__status {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  flex-shrink: 0;

  padding: 8px 10px;

  color: #E6C46A;

  background: rgba(230, 196, 106, .09);

  border: 1px solid rgba(230, 196, 106, .25);
  border-radius: 6px;

  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
}

/* Punto animado */

.hero-promo__dot {
  display: block;

  width: 8px;
  height: 8px;

  flex-shrink: 0;

  background: #E6C46A;
  border-radius: 50%;

  box-shadow:
    0 0 0 0 rgba(230, 196, 106, .35);

  animation: heroPromoPulse 2.5s ease-out infinite;
}

@keyframes heroPromoPulse {

  0% {
    box-shadow:
      0 0 0 0 rgba(230, 196, 106, .40);
  }

  65%, 100% {
    box-shadow:
      0 0 0 8px rgba(230, 196, 106, 0);
  }

}

/* ========================================
   TEXTOS PROMOCIÓN
======================================== */

.hero-promo__copy {
  display: flex;
  flex-direction: column;
  gap: 5px;

  flex: 1;
  min-width: 0;
}

.hero-promo__copy strong {
  display: block;

  color: #FFFFFF;

  font-size: 16px;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: -.2px;
}

.hero-promo__copy > span {
  display: block;

  color: #D7C6A4;

  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
}

/* FLECHA */

.hero-promo__arrow {
  width: 20px;
  height: 20px;

  flex-shrink: 0;

  color: #E6C46A;

  transition: transform .3s ease;
}

/* INTERACCIÓN */

.hero-promo:hover {
  transform: translateY(-2px);

  border-color: #E6C46A;

  box-shadow:
    0 12px 30px rgba(0, 0, 0, .24),
    0 0 16px rgba(230, 196, 106, .10);
}

.hero-promo:hover .hero-promo__arrow {
  transform: translate(3px, -3px);
}

.hero-promo:focus-visible {
  outline: 2px solid #E6C46A;
  outline-offset: 4px;
}

/* ========================================
   ETIQUETAS DE SECCIÓN - GLOBAL
======================================== */

.section-label {
  display: inline-flex;
  align-items: center;
  gap: 14px;

  margin-bottom: 18px;

  color: var(--gold-light);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.section-label::before {
  content: "";

  width: 42px;
  height: 2px;

  flex-shrink: 0;

  background: var(--gold-primary);
  border-radius: 999px;
}

/* ========================================
   DESKTOP - FONDO
======================================== */

/* 1601px a 2000px */

@media (min-width: 1601px) and (max-width: 2000px) {

  .hero::before {
    background-position: right center;
  }

}

/* Fusión con fondo negro */

@media (min-width: 1101px) {

  .hero::before {
    -webkit-mask-image: linear-gradient(
      to right,
      transparent 0%,
      #000 32%,
      #000 100%
    );

    mask-image: linear-gradient(
      to right,
      transparent 0%,
      #000 32%,
      #000 100%
    );
  }

}

/* Notebooks pequeñas */

@media (min-width: 851px) and (max-width: 1100px) {

  .hero::before {
    -webkit-mask-image: linear-gradient(
      to right,
      transparent 0%,
      #000 22%,
      #000 100%
    );

    mask-image: linear-gradient(
      to right,
      transparent 0%,
      #000 22%,
      #000 100%
    );
  }

}

/* 851px a 1600px */

@media (min-width: 851px) and (max-width: 1600px) {

  .hero::before {
    inset: 0 0 0 25%;

    background-position: right center;
    background-size: cover;
  }

  .hero-content {
    max-width: min(760px, 64vw);
  }

  .hero h1 {
    max-width: 100%;

    font-size: clamp(46px, 4.4vw, 64px);
  }

}

/* ========================================
   TABLET
======================================== */

@media (max-width: 850px) {

  .hero,
  .hero-container {
    min-height: auto;
  }

  .hero-container {
    padding-top: 100px;
    padding-bottom: 80px;
  }

  .hero-content {
    max-width: 100%;
  }

  .hero::before {
    inset: 0;

    background-image: url("hero.webp");
    background-position: right center;
    background-size: cover;
    background-repeat: no-repeat;

    opacity: 1;
  }

  .hero h1 {
    text-shadow:
      0 2px 3px rgba(0, 0, 0, .95),
      0 5px 16px rgba(0, 0, 0, .85);
  }

  .hero h1 span {
    text-shadow:
      0 2px 3px rgba(0, 0, 0, .95),
      0 5px 14px rgba(0, 0, 0, .85),
      0 0 12px rgba(230, 196, 106, .12);
  }

}

/* ========================================
   MOBILE - NUEVA DISTRIBUCIÓN
======================================== */

@media (max-width: 480px) {

  .hero {
    min-height: 0;
    background: #0B0B0B;
  }

  /* La imagen ocupa solamente
     la primera parte del Hero */

  .hero::before {
    inset: 0 0 auto;

    height: clamp(600px, 148vw, 720px);

    background-image: url("hero-cel.webp");
    background-size: cover;
    background-position: center 60%;
    background-repeat: no-repeat;

    opacity: 1;

    /* Se fusiona suavemente con el
       fondo negro de los botones */

    -webkit-mask-image: linear-gradient(
      to bottom,
      #000 0%,
      #000 85%,
      transparent 100%
    );

    mask-image: linear-gradient(
      to bottom,
      #000 0%,
      #000 85%,
      transparent 100%
    );
  }

  .hero-container {
    display: block;

    min-height: 0;

    padding-top: 0;
    padding-bottom: 60px;
  }

  .hero-content {
    width: 100%;
    max-width: none;
  }

  /* Reservamos un espacio propio
     para apreciar la fotografía */

  .hero-intro {
    min-height: clamp(600px, 148vw, 720px);

    display: flex;
    flex-direction: column;
    align-items: flex-start;

    padding-top: 110px;
  }

  .hero-intro h1 {
    margin-bottom: 0;
  }

  /* Texto superior */

  .hero-eyebrow {
    font-size: 10px;
    letter-spacing: 2px;
    line-height: 1.5;
  }

  /* Título */

  .hero h1 {
    max-width: 100%;

    font-size: clamp(32px, 9vw, 37px);
    letter-spacing: -1px;
    line-height: 1.18;
  }

  .hero h1 span {
    font-weight: 800;
  }

  /* =====================================
     BOTONES DEBAJO DE LA IMAGEN
  ===================================== */

  .hero-actions {
    position: relative;
    z-index: 2;

    padding-top: 22px;
  }

  .hero-buttons {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;

    margin-bottom: 25px;
  }

  .hero-buttons .btn-primary {
    width: 100%;
    min-height: 58px;

    padding: 15px 12px;

    font-size: 13px;
    text-align: center;
  }

  /* Ver servicios pasa a ser
     un enlace secundario compacto */

  .hero-buttons .btn-secondary {
    width: fit-content;
    min-height: 36px;

    padding: 6px 2px;

    border: none;
    border-radius: 0;

    color: #E6C46A;

    font-size: 14px;
    font-weight: 700;
  }

  .hero-buttons .btn-secondary::after {
    content: "↗";

    margin-left: 3px;
  }

  .hero-buttons .btn-secondary:hover {
    background: transparent;
  }

  /* =====================================
     PROMOCIÓN EN MOBILE
  ===================================== */

  .hero-promo {
    width: 100%;
    max-width: none;

    min-height: 110px;
    gap: 12px;

    padding: 17px 14px;

    border-radius: 9px;
  }

  .hero-promo__status {
    align-self: flex-start;

    gap: 6px;
    padding: 7px 8px;

    font-size: 10px;
  }

  .hero-promo__copy {
    gap: 7px;
  }

  .hero-promo__copy strong {
    font-size: 16px;
    line-height: 1.35;
  }

  .hero-promo__copy > span {
    font-size: 12px;
    line-height: 1.55;
  }

  .hero-promo__arrow {
    width: 18px;
    height: 18px;
  }

}

/* ========================================
   MOVIMIENTO REDUCIDO
======================================== */

@media (prefers-reduced-motion: reduce) {

  .btn,
  .hero-promo,
  .hero-promo__arrow {
    transition: none;
  }

  .btn:hover,
  .hero-promo:hover,
  .hero-promo:hover .hero-promo__arrow {
    transform: none;
  }

  .hero-promo::after,
  .hero-promo__dot {
    animation: none;
  }

}


/* ========================================
   HERO MOBILE - AJUSTE FINAL DE ALTURA
======================================== */

@media (max-width: 480px) {

  /* Reducimos el alto de la fotografía */

  .hero::before {
    height: clamp(515px, 128vw, 565px);

    background-position: center 60%;
  }

  /* Subimos el contenido principal */

  .hero-intro {
    min-height: clamp(515px, 128vw, 565px);

    padding-top: 65px;
  }

  /* Acercamos las acciones */

  .hero-actions {
    padding-top: 12px;
  }

  .hero-buttons {
    gap: 9px;
    margin-bottom: 18px;
  }

  /* Botón principal compacto */

  .hero-buttons .btn-primary {
    min-height: 54px;
  }

  /* Enlace secundario */

  .hero-buttons .btn-secondary {
    min-height: 30px;
    padding: 3px 2px;
  }

  /* Promoción más compacta */

  .hero-promo {
    min-height: 96px;
    padding: 13px 14px;
  }

  .hero-promo__copy strong {
    font-size: 15px;
  }

  .hero-promo__copy > span {
    font-size: 12px;
  }

  /* Reducimos el espacio inferior */

  .hero-container {
    padding-bottom: 45px;
  }

}


/* ========================================
   NUESTROS SERVICIOS
======================================== */

.services {
  background-color: var(--black);
}

/* ========================================
   ENCABEZADO
======================================== */


.services-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 50px;
  margin-bottom: 40px;
}

.services-heading h2 {
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 700;
  letter-spacing: -1.5px;
  line-height: 1.2;
}

.services-intro {
  max-width: 390px;
  color: #B9B9B9;
  font-size: 14px;
  line-height: 1.7;
}

/* ========================================
   CONTENEDOR DE TARJETAS
======================================== */


.services-list {
  display: flex;
  gap: 16px;
  width: 100%;
  height: 510px;
}


/* ========================================
   TARJETAS EXPANSIBLES
======================================== */

.service-card {
  position: relative;
  flex: 1;
  min-width: 0;
  overflow: hidden;

  display: block;
  text-align: left;
  padding: 0;

  /* El borde se dibuja sobre la propia tarjeta.
     No depende de tener un span .service-card__border en el HTML. */
  border: 2px solid transparent;
  border-radius: 4px;
  background:
    linear-gradient(#191919, #191919) padding-box,
    linear-gradient(
      rgba(212, 175, 55, 0.23),
      rgba(212, 175, 55, 0.23)
    ) border-box;
  color: var(--white);

  cursor: pointer;

  transition:
  flex-grow 0.95s cubic-bezier(0.22, 1, 0.36, 1),
  border-color 0.4s ease,
  opacity 1.05s cubic-bezier(0.22, 1, 0.36, 1),
  transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);


}

.service-card.is-active {
  flex-grow: 2.8;

  /* Fondo interno opaco y brillo dorado recorriendo TODO el borde,
     incluida la primera tarjeta Gas que abre automáticamente. */
  background:
    linear-gradient(#191919, #191919) padding-box,
    conic-gradient(
      from var(--service-border-angle),
      rgba(212, 175, 55, 0.55) 0deg,
      rgba(212, 175, 55, 0.28) 220deg,
      rgba(230, 196, 106, 0.65) 265deg,
      #FFF2BE 300deg,
      #F5D780 315deg,
      rgba(230, 196, 106, 0.75) 335deg,
      rgba(212, 175, 55, 0.55) 360deg
    ) border-box;

  box-shadow:
    0 0 0 1px rgba(230, 196, 106, 0.16),
    0 0 17px rgba(230, 196, 106, 0.13);

  animation: service-border-rotate 5s linear infinite;
}

/* ========================================
   IMAGEN DE FONDO
======================================== */

.service-card::before {
  content: "";
  position: absolute;
  inset: 0;

  background-image: var(--service-image);
  background-size: cover;
  background-position: center;

  filter: brightness(0.98);

  transition:
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.65s ease;
}

.service-card.is-active::before {
  transform: scale(1.045);
  filter: brightness(1);
}

/* Degradado para mejorar la lectura */

.service-card::after {
  content: "";
  position: absolute;
  inset: 0;

  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.12) 0%,
    rgba(0, 0, 0, 0.18) 40%,
    rgba(0, 0, 0, 0.9) 100%
  );

  pointer-events: none;
}


/* ========================================
   IMÁGENES - NUESTROS SERVICIOS
======================================== */

.service-card--gas {
  --service-image: url("gas.webp");
}

.service-card--plomeria {
  --service-image: url("plomeria.webp");
}

.service-card--calefaccion {
  --service-image: url("calefaccion.webp");
}

.service-card--pintura {
  --service-image: url("pintura.webp");
}

.service-card--refrigeracion {
  --service-image: url("refrigeracion.webp");
}

.service-card--destapaciones {
  --service-image: url("destapaciones.webp");
}


/* ========================================
   GAS - INFORMACIÓN EXPANDIDA
======================================== */

/* Oculto cuando la tarjeta está cerrada */

.service-card--gas .service-card__gas-details {
  display: none;
}

/* ========================================
   TARJETA ABIERTA
======================================== */

.service-card--gas.is-active
.service-card__content {
  height: auto;
  bottom: 22px;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;

  gap: 8px;
}

/* Quitamos el icono solamente cuando Gas
   está expandido para evitar superposiciones */

.service-card--gas.is-active
.service-card__icon {
  display: none;
}

/* Título */

.service-card--gas.is-active
.service-card__title {
  flex: none;
  margin: 0;
  font-size: 25px;
  line-height: 1.2;
}

/* Descripción sin altura fija */

.service-card--gas.is-active
.service-card__description {
  flex: none;

  height: auto;
  max-height: none;
  margin: 0;

  overflow: visible;

  color: #EAE5D8;
  font-size: 13px;
  line-height: 1.5;
}

/* ========================================
   LISTA DE SERVICIOS
======================================== */

.service-card--gas.is-active
.service-card__gas-details {
  display: grid;
  gap: 7px;

  width: 100%;
  margin-top: 6px;

  color: #FFFFFF;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;

  text-shadow:
    0 2px 8px rgba(0, 0, 0, .65);

  animation: gasDetailsIn .45s ease both;
}

/* Viñetas doradas */

.service-card__gas-details > span {
  position: relative;

  display: block;
  padding-left: 14px;

  overflow-wrap: break-word;
}

.service-card__gas-details > span::before {
  content: "";

  position: absolute;
  left: 0;
  top: .55em;

  width: 5px;
  height: 5px;

  border-radius: 50%;
  background: #E6C46A;
}

/* Gradiente exclusivo de Gas para
   mantener legible el texto */

.service-card--gas.is-active::after {
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, .04) 0%,
    rgba(0, 0, 0, .10) 30%,
    rgba(0, 0, 0, .72) 65%,
    rgba(0, 0, 0, .95) 100%
  );
}

/* Entrada de la información */

@keyframes gasDetailsIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ========================================
   TABLET Y CELULARES
======================================== */

@media (max-width: 850px) {

  /* Altura suficiente para el contenido
     sin afectar las otras tarjetas */

  .service-card--gas.is-active {
    height: 500px;
    min-height: 500px;
  }

  .service-card--gas.is-active
  .service-card__content {
    left: 18px;
    right: 18px;
    bottom: 20px;

    height: auto;
    gap: 9px;
  }

  .service-card--gas.is-active
  .service-card__title {
    font-size: 25px;
  }

  .service-card--gas.is-active
  .service-card__description {
    height: auto;
    font-size: 14px;
    line-height: 1.5;
  }

  .service-card--gas.is-active
  .service-card__gas-details {
    gap: 9px;
    margin-top: 7px;

    font-size: 13px;
    line-height: 1.5;
  }

}

/* Pantallas especialmente angostas */

@media (max-width: 380px) {

  .service-card--gas.is-active {
    height: 545px;
    min-height: 545px;
  }

}

/* Accesibilidad */

@media (prefers-reduced-motion: reduce) {

  .service-card--gas.is-active
  .service-card__gas-details {
    animation: none;
  }

}



/* ========================================
   NUMERACIÓN DE TARJETAS
======================================== */

.service-card__number {
  position: absolute;
  z-index: 2;

  top: 20px;
  left: 18px;

  color: rgba(255, 255, 255, 0.7);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
}

/* ========================================
   CONTENIDO DE TARJETAS
======================================== */

.service-card__content {
  position: absolute;
  z-index: 2;

  left: 18px;
  right: 18px;
  bottom: 22px;

  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;

  height: 220px;
  gap: 8px;

  pointer-events: none;
}

/* ========================================
   TÍTULO VERTICAL - TARJETA CERRADA
======================================== */

.service-card__content::after {
  content: attr(data-title);

  position: absolute;
  left: 0;
  bottom: 0;

  writing-mode: vertical-rl;
  transform: rotate(180deg);

  color: var(--white);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;

  opacity: 1;

  transition: opacity 0.25s ease 0.1s;
}

/* Desaparece al expandir la tarjeta */

.service-card.is-active .service-card__content::after {
  opacity: 0;
  transition-delay: 0s;
}

/* ========================================
   ICONOS
======================================== */

.service-card__icon {
  position: absolute;
  left: 0;
  bottom: 178px;

  display: block;
  width: 32px;
  height: 32px;

  color: var(--gold-light);
  flex-shrink: 0;
  opacity: 0.96;

  filter: drop-shadow(
    0 0 10px rgba(212, 175, 55, 0.10)
  );

  transform: translateY(0);

  transition:
    transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

.service-card__icon svg {
  width: 100%;
  height: 100%;
}

/* Icono de tarjeta cerrada */

.service-card:not(.is-active) .service-card__icon {
  width: 28px;
  height: 28px;
  opacity: 0.88;
}

/* Desplazamiento suave al expandir */

.service-card.is-active .service-card__icon {
  transform: translateY(38px);
}

/* ========================================
   TÍTULO HORIZONTAL - TARJETA ABIERTA
======================================== */

.service-card__title {
  display: block;
  width: 100%;

  color: var(--white);

  writing-mode: horizontal-tb;
  transform: translateY(8px);

  font-size: 25px;
  font-weight: 700;
  letter-spacing: -0.5px;
  text-transform: none;

  opacity: 0;
  visibility: hidden;

  transition:
    opacity 0.25s ease,
    transform 0.45s ease,
    visibility 0s linear 0.3s;
}

/* Aparición progresiva */

.service-card.is-active .service-card__title {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);

  transition:
    opacity 0.4s ease 0.2s,
    transform 0.55s ease 0.12s,
    visibility 0s;
}

/* ========================================
   DESCRIPCIÓN DEL SERVICIO
======================================== */

.service-card__description {
  display: block;
  width: 100%;
  height: 82px;
  max-height: none;

  overflow: hidden;

  color: #E4E4E4;
  font-size: 13px;
  line-height: 1.6;

  opacity: 0;
  visibility: hidden;

  transition:
    opacity 0.3s ease,
    visibility 0s linear 0.3s;
}

/* Aparece después del título */

.service-card.is-active .service-card__description {
  opacity: 1;
  visibility: visible;

  transition:
    opacity 0.45s ease 0.25s,
    visibility 0s;
}

/* ========================================
   ACCESIBILIDAD
======================================== */

.service-card:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: 3px;
}

/* ========================================
   CONTACTO INFERIOR
======================================== */

.services-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  margin-top: 28px;
}

.services-footer p {
  color: #AFAFAF;
  font-size: 13px;
}

.services-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 12px;

  color: var(--gold-light);
  font-size: 13px;
  font-weight: 700;

  transition:
    color 0.25s ease,
    gap 0.25s ease;
}

.services-whatsapp:hover {
  color: var(--white);
  gap: 18px;
}


/* ========================================
   SERVICIOS - BORDE DORADO ANIMADO
======================================== */

/* La propiedad registrada permite animar el ángulo del degradado
   directamente en el borde de .service-card.is-active. */

@property --service-border-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@keyframes service-border-rotate {
  to {
    --service-border-angle: 360deg;
  }
}

/* Compatibilidad con el HTML anterior:
   ocultamos la capa extra si existiera para que no se duplique el brillo. */
.service-card__border {
  display: none;
}

/* Respetamos la accesibilidad sin quitar el borde luminoso estático. */
@media (prefers-reduced-motion: reduce) {
  .service-card.is-active {
    animation: none;
  }
}


/* ========================================
   RESPONSIVE - SERVICIOS
======================================== */

@media (max-width: 850px) {

  /* Encabezado */

  .services-heading {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 30px;
  }

  /* Tarjetas en columna */

  .services-list {
    flex-direction: column;
    height: auto;
    gap: 10px;
  }

  .service-card,
  .service-card.is-active {
    flex: none;
    width: 100%;
  }

  .service-card {
    height: 108px;

    transition:
  height 0.7s cubic-bezier(0.22, 1, 0.36, 1),
  border-color 0.4s ease,
  opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
  transform 1.05s cubic-bezier(0.22, 1, 0.36, 1);

  }

  
  .service-card.is-active {
    height: 360px;
  }

  /* Contenido */

  .service-card__content {
    height: 190px;
    bottom: 16px;
    flex-direction: column;
    align-items: flex-start;
  }

  /* Título horizontal en tarjetas cerradas */

  .service-card__content::after {
    writing-mode: horizontal-tb;
    transform: none;

    left: 35px;
    bottom: 5px;

    font-size: 20px;
    letter-spacing: 0;
    text-transform: none;
  }

  /* Iconos */

  .service-card__icon {
    bottom: 4px;
    transform: translateY(0);
  
  }

  .service-card:not(.is-active) .service-card__icon {
    width: 22px;
    height: 22px;
  }

  .service-card.is-active .service-card__icon {
    transform: translateY(-134px);
  }

  /* Título expandido */

  .service-card.is-active .service-card__title {
    font-size: 23px;
  }

  /* Número */

  .service-card__number {
    top: 12px;
    right: 16px;
    left: auto;
  }

  /* Contacto inferior */

  .services-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

}

/* ========================================
   ACCESIBILIDAD - MOVIMIENTO REDUCIDO
======================================== */

@media (prefers-reduced-motion: reduce) {

  .service-card,
  .service-card::before,
  .service-card__icon,
  .service-card__title,
  .service-card__description,
  .service-card__content::after,
  .services-whatsapp {
    transition: none;
  }

}


/* ========================================
   SERVICIOS - APARICIÓN POR SCROLL
   Desktop: escalonadas / móvil: una al ingresar
======================================== */

.services-motion-ready .services-list .service-card {
  opacity: 0;
  transform: translate3d(0, 70px, 0);
}

@media (min-width: 851px) {
  .services-motion-ready .services-list.is-visible .service-card {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: 0s, 0s, var(--enter-delay, 0ms), var(--enter-delay, 0ms);
  }
  .service-card:nth-child(1) { --enter-delay: 0ms; }
  .service-card:nth-child(2) { --enter-delay: 210ms; }
  .service-card:nth-child(3) { --enter-delay: 420ms; }
  .service-card:nth-child(4) { --enter-delay: 630ms; }
  .service-card:nth-child(5) { --enter-delay: 840ms; }
  .service-card:nth-child(6) { --enter-delay: 1050ms; }
}

@media (max-width: 850px) {
  .services-motion-ready .services-list .service-card {
    transform: translate3d(0, 55px, 0);
  }
  .services-motion-ready .services-list .service-card.is-revealed {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@media (max-width: 600px) {
  .service-card.is-active { height: 320px; }
  .service-card__content { height: 220px; }
  .service-card.is-active .service-card__title { font-size: 25px; }
  .service-card__description { font-size: 16px; line-height: 1.65; height: 100px; }
  .services-intro { font-size: 16px; line-height: 1.65; }
  .services-footer p, .services-whatsapp { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .services-motion-ready .services-list .service-card {
    opacity: 1;
    transform: none;
    transition: none;
  }
}


/* ========================================
   SERVICIO DESTACADO - DESTAPACIONES
======================================== */

.drain-promo {
  background: transparent !important;
  padding: 45px 0 75px;
}

/* Contenedor principal */

.drain-promo__inner {
  position: relative;
  isolation: isolate;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 45px;

  padding: 43px 45px;

  background: linear-gradient(
    135deg,
    #f5f2e9 0%,
    #f1ede2 45%,
    #ebe5d9 100%
  );

  border: 1px solid rgba(212, 175, 55, 0.45);

  box-shadow:
    0 18px 48px rgba(0, 0, 0, 0.18),
    0 0 0 1px rgba(212, 175, 55, 0.18),
    0 0 18px rgba(212, 175, 55, 0.08),
    0 0 34px rgba(212, 175, 55, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.65);
  border-radius: 8px;

  overflow: hidden;
}

/* Asegura que el contenido quede arriba */
.drain-promo__inner > * {
  position: relative;
  z-index: 3;
}

/* ========================================
   EFECTO DE BRILLO
======================================== */

.drain-promo__inner::before {
  content: "";

  position: absolute;
  z-index: 0;

  top: -40%;
  left: 0;

  width: 24%;
  height: 180%;

  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(230, 197, 106, 0.74) 55%,
    rgba(230, 197, 106, 0.5) 80%,
    rgba(230, 197, 106, 0.384) 95%,
    transparent 100%
  );

  transform: translateX(-180%) skewX(-18deg);

  pointer-events: none;
}

/* Borde brillante animado */
.drain-promo__inner::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  z-index: 2;
  pointer-events: none;

  background:
    linear-gradient(
      115deg,
      rgba(212, 175, 55, 0.15) 0%,
      rgba(212, 175, 55, 0.3) 10%,
      rgba(255, 236, 160, 0.95) 18%,
      rgba(255, 255, 255, 0.9) 22%,
      rgba(255, 217, 102, 0.95) 28%,
      rgba(212, 175, 55, 0.45) 36%,
      rgba(212, 175, 55, 0.18) 46%,
      rgba(212, 175, 55, 0.15) 100%
    );

  background-size: 240% 240%;
  background-position: -180% 0;

  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;

  animation: drainPromoBorderGlow 5.5s linear infinite;
}

@keyframes drainPromoBorderGlow {
  0% {
    background-position: -180% 0;
  }
  100% {
    background-position: 220% 0;
  }
}

/* Inicia al aparecer la franja en pantalla */

.drain-promo__inner.is-visible::before {
  animation: drain-sheen 10s ease-in-out infinite;
}

@keyframes drain-sheen {

  0% {
    transform: translateX(-180%) skewX(-18deg);
    opacity: 0;
  }

  8% {
    opacity: 1;
  }

  42% {
    transform: translateX(550%) skewX(-18deg);
    opacity: 1;
  }

  50% {
    transform: translateX(550%) skewX(-18deg);
    opacity: 0;
  }

  100% {
    transform: translateX(550%) skewX(-18deg);
    opacity: 0;
  }

}


/* ========================================
   CONTENIDO
======================================== */

.drain-promo__content {
  position: relative;
  z-index: 1;

  flex: 1;
  min-width: 0;
}

/* Encabezado y distintivo */

.drain-promo__top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;

  margin-bottom: 15px;
}

.drain-promo__top .section-label {
  margin-bottom: 0;
  color: var(--gold-dark)
}

/* Distintivo 24 horas */

.drain-promo__badge {
  display: inline-flex;
  align-items: center;

  padding: 7px 12px;

  border: 1px solid rgba(230,196,106,0.22);
  border-radius: 30px;

  background: rgba(230,196,106,0.075);

  color: var(--gold-dark);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

/* Título */

.drain-promo__content h2 {
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 700;
  letter-spacing: -1px;
  line-height: 1.2;
  margin-bottom: 14px;
  
  color: var(--gray-dark);
}

.drain-promo__content h2 span {
  color: var(--gold-dark);
}

/* Descripción */

.drain-promo__description {
  max-width: 600px;

  color: #0B0B0B;
  font-size: 16px;
  line-height: 1.7;
}

/* Información adicional */

.drain-promo__detail {
  margin-top: 12px;

  color: #0B0B0B;
  font-size: 15px;
  line-height: 1.6;
}

/* ========================================
   BOTÓN WHATSAPP
======================================== */

.drain-promo__cta {
  position: relative;
  z-index: 1;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;

  flex-shrink: 0;

  padding: 17px 23px;

  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 7px;

  color: #111;

  background: linear-gradient(
    135deg,
    #E6C46A,
    #C8A648
  );

  font-size: 17px;
  font-weight: 800;
  text-align: center;

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

/* Flecha */

.drain-promo__cta span {
  display: inline-block;
  font-size: 17px;
  font-weight: 700;
}

/* Hover */

.drain-promo__cta:hover {
  transform: translateY(-3px);

  box-shadow:
    0 8px 25px rgba(212,175,55,0.18);
}

/* Accesibilidad */

.drain-promo__cta:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: 4px;
}


.drain-promo__inner .drain-promo__content,
.drain-promo__inner .drain-promo__cta {
  position: relative;
  z-index: 3;
}

.drain-promo__inner .drain-promo__surface {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(
      circle at top left,
      rgba(255, 255, 255, 0.42),
      transparent 35%
    ),
    radial-gradient(
      circle at bottom right,
      rgba(212, 175, 55, 0.08),
      transparent 30%
    );
}

/* ========================================
   RESPONSIVE - TABLET
======================================== */

@media (max-width: 850px) {

  .drain-promo__inner {
    flex-direction: column;
    align-items: flex-start;

    padding: 32px 28px;
    gap: 26px;
  }

  .drain-promo__cta {
    align-self: flex-start;
  }

}

/* ========================================
   RESPONSIVE - CELULAR
======================================== */

@media (max-width: 480px) {

  .drain-promo {
    padding: 35px 0 65px;
  }

  .drain-promo__inner {
    padding: 28px 22px;
    gap: 25px;
  }

  .drain-promo__top {
    align-items: flex-start;
    gap: 12px;
  }

  .drain-promo__badge {
    font-size: 19px;
  }

  .drain-promo__description {
    font-size: 16px;
  }


    .drain-promo__content > p:not(.section-label) {
    font-size: 16px;
    line-height: 1.75;
    color: #0b0b0b;
  }

  .drain-promo__cta {
    font-size: 15px;
    min-height: 56px;
  }

}

/* ========================================
   MOVIMIENTO REDUCIDO
======================================== */

@media (prefers-reduced-motion: reduce) {

  .drain-promo__inner::before {
    animation: none !important;
  }

  .drain-promo__cta {
    transition: none;
  }

}


/* ========================================
   TRABAJOS REALIZADOS - FEDERAL GAS
======================================== */

.works {
  position: relative;
  background: transparent;
}

/* ========================================
   ENCABEZADO
======================================== */

.works-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;

  gap: 50px;
  margin-bottom: 42px;
}

.works-heading h2 {
  font-size: clamp(30px, 3vw, 44px);
  font-weight: 700;
  letter-spacing: -1.5px;
  line-height: 1.2;
}

.works-intro {
  max-width: 390px;

  color: #D1CFCC;
  font-size: 15px;
  line-height: 1.7;
}

/* ========================================
   DISTRIBUCIÓN PRINCIPAL
======================================== */

.works-layout {
  display: grid;

  grid-template-columns:
    290px minmax(0, 1fr);

  align-items: stretch;

  gap: 30px;

  width: 100%;
  min-width: 0;
}

/* ========================================
   NAVEGACIÓN DE CATEGORÍAS
======================================== */

.works-navigation {
  min-width: 0;
}

.works-list {
  display: flex;
  flex-direction: column;
  gap: 11px;

  width: 100%;
  height: 490px;
  min-width: 0;
}

/* ========================================
   TARJETAS DE TRABAJOS - PREMIUM
======================================== */

.work-option {
  position: relative;
  isolation: isolate;

  display: flex;
  align-items: center;
  gap: 15px;

  flex: 1 1 0;
  min-height: 0;
  width: 100%;

  padding: 14px 16px;

  color: #25221C;
  text-align: left;
  cursor: pointer;

  /* Beige con profundidad */

  background: linear-gradient(
    155deg,
    #FFFFFF 0%,
    #F8F5EA 38%,
    #EBE4D3 100%
  );

  border: 1px solid #D8CFB8;
  border-radius: 8px;

  box-shadow:
    0 5px 12px rgba(0,0,0,.16),
    0 2px 3px rgba(0,0,0,.10),
    inset 0 2px 1px rgba(255,255,255,.95),
    inset 0 -3px 5px rgba(95,75,32,.10);

  transition:
    transform .3s ease,
    background .3s ease,
    border-color .3s ease,
    box-shadow .3s ease;

  -webkit-tap-highlight-color: transparent;
}

/* ========================================
   REFLEJO SUPERIOR
======================================== */

.work-option::before {
  content: "";

  position: absolute;
  inset: 0;
  z-index: 0;

  border-radius: inherit;

  background: linear-gradient(
    165deg,
    rgba(255,255,255,.55) 0%,
    rgba(255,255,255,.08) 45%,
    transparent 70%
  );

  pointer-events: none;
}

/* Detalle lateral metálico */

.work-option::after {
  content: "";

  position: absolute;

  top: 12px;
  bottom: 12px;
  left: 0;

  width: 3px;

  border-radius: 0 3px 3px 0;

  background: #C69D37;

  opacity: 0;

  transition: opacity .3s ease;
}

/* ========================================
   NUMERACIÓN
======================================== */

.work-number {
  position: relative;
  z-index: 1;

  flex-shrink: 0;

  color: #98701D;

  font-size: 12px;
  font-weight: 800;
  letter-spacing: .4px;
}

/* ========================================
   NOMBRE
======================================== */

.work-name {
  position: relative;
  z-index: 1;

  flex: 1;
  min-width: 0;

  color: #24201A;

  font-size: 15px;
  font-weight: 750;
  line-height: 1.35;
  letter-spacing: -.2px;
}

/* ========================================
   FLECHA METÁLICA
======================================== */

.work-arrow {
  position: relative;
  z-index: 1;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 31px;
  height: 31px;
  flex-shrink: 0;

  color: #8B6619;

  background: linear-gradient(
    145deg,
    #FFF9E9,
    #E3D2A9
  );

  border: 1px solid #C8AE69;
  border-radius: 50%;

  opacity: 1;

  box-shadow:
    0 2px 5px rgba(0,0,0,.12),
    inset 0 1px 1px rgba(255,255,255,.85);

  transition:
    transform .3s ease,
    background .3s ease,
    box-shadow .3s ease;
}

.work-arrow svg {
  width: 16px;
  height: 16px;
}

/* ========================================
   HOVER - BRILLO ELEVADO
======================================== */

@media (hover: hover) and (pointer: fine) {

  .work-option:hover {
    transform: translate(5px, -2px);

    background: linear-gradient(
      145deg,
      #FFFFFF 0%,
      #FFF8E2 48%,
      #F1DEA5 100%
    );

    border-color: #F0C65D;

    box-shadow:
      0 9px 24px rgba(0,0,0,.24),
      0 0 18px rgba(246,200,82,.26),
      0 0 3px rgba(255,227,134,.65),
      inset 0 2px 1px rgba(255,255,255,1),
      inset 0 -3px 7px rgba(172,125,27,.15);
  }

  .work-option:hover::after {
    opacity: 1;
  }

  .work-option:hover .work-arrow {
    transform: translate(2px,-2px);

    background: #F2D477;

    box-shadow:
      0 0 12px rgba(230,196,106,.45),
      inset 0 1px 1px rgba(255,255,255,.65);
  }
}

/* ========================================
   TARJETA SELECCIONADA
======================================== */

.work-option.is-active {
  color: #171717;

  background: linear-gradient(
    145deg,
    #FFF0AE 0%,
    #F2D47B 30%,
    #E6BE58 67%,
    #C99B34 100%
  );

  border: 1px solid #FFE49A;

  box-shadow:
    0 7px 20px rgba(0,0,0,.22),
    0 0 17px rgba(230,196,106,.30),
    0 0 3px rgba(255,228,145,.75),
    inset 0 2px 1px rgba(255,255,255,.55),
    inset 0 -3px 6px rgba(139,91,12,.22);
}

.work-option.is-active::after {
  opacity: 1;
  background: #FFF0A5;
}

.work-option.is-active .work-number {
  color: #74500D;
}

.work-option.is-active .work-name {
  color: #1C170D;
  font-weight: 800;
}

.work-option.is-active .work-arrow {
  color: #241905;

  background: linear-gradient(
    145deg,
    #FFEDAE,
    #D9AF46
  );

  border-color: #9D7929;

  box-shadow:
    0 2px 6px rgba(107,70,8,.22),
    inset 0 1px 1px rgba(255,255,255,.70);
}

/* ========================================
   INTERACCIONES
======================================== */

.work-option:active {
  transform: translateY(1px);
}

.work-option:focus-visible {
  outline: 3px solid #FFE18A;
  outline-offset: 3px;
}

/* ========================================
   PISTA DE SCROLL - OCULTA DESKTOP
======================================== */

.works-scroll-hint {
  display: none;
}

/* ========================================
   GALERÍA DE TRABAJOS
======================================== */

.works-gallery {
  display: grid;

  grid-template-columns:
    minmax(0, 1.55fr)
    minmax(0, .95fr);

  grid-template-rows:
    repeat(2, minmax(0, 1fr));

  gap: 12px;

  width: 100%;
  height: 490px;
  min-width: 0;
}

/* ========================================
   FOTOGRAFÍAS
======================================== */

.work-photo {
  position: relative;
  isolation: isolate;

  min-width: 0;
  min-height: 0;

  overflow: hidden;

  border: 1px solid rgba(212,175,55,.32);
  border-radius: 4px;

  background-color: #242424;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  transition:
    transform .55s cubic-bezier(.22,1,.36,1),
    opacity .45s ease,
    filter .45s ease;
}

/* FOTO PRINCIPAL */

.work-photo--main {
  grid-column: 1;
  grid-row: 1 / 3;

  border-color: rgba(212,175,55,.40);
}

/* FOTOS SECUNDARIAS */

.work-photo--second {
  grid-column: 2;
  grid-row: 1;
}

.work-photo--third {
  grid-column: 2;
  grid-row: 2;
}

/* ========================================
   CONTRASTE DE FOTOGRAFÍAS
======================================== */

.work-photo::after {
  content: "";

  position: absolute;
  inset: 0;
  z-index: 1;

  pointer-events: none;

  background: linear-gradient(
    180deg,
    transparent 30%,
    rgba(0,0,0,.08) 60%,
    rgba(0,0,0,.28) 100%
  );
}

/* IDENTIFICACIÓN EDITORIAL */

.work-photo--main::before {
  content: "FEDERAL GAS / TRABAJOS";

  position: absolute;
  z-index: 3;

  top: 18px;
  left: 18px;

  padding: 8px 11px;

  color: #F1D38A;
  background: rgba(10,10,10,.46);

  border-left: 2px solid #D4AF37;
  border-radius: 2px;

  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.3px;

  pointer-events: none;
}

/* ========================================
   CONTENIDO FOTO PRINCIPAL
======================================== */

.work-photo__content {
  position: absolute;
  z-index: 3;

  left: 18px;
  right: 18px;
  bottom: 18px;

  padding: 16px 18px;

  color: #FFFFFF;

  background: rgba(8,8,8,.38);

  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);

  border-left: 2px solid #E6C46A;
  border-radius: 3px;
}

.work-photo__content h3 {
  margin-bottom: 10px;

  color: #FFFFFF;

  font-size: clamp(23px, 2.2vw, 30px);
  font-weight: 800;
  letter-spacing: -.8px;
  line-height: 1.2;
}

.work-photo__content p {
  max-width: 450px;

  color: #F0F0F0;

  font-size: 14px;
  line-height: 1.6;
}

/* ========================================
   ETIQUETAS SECUNDARIAS
======================================== */

.work-photo__label {
  position: absolute;
  z-index: 3;

  left: 14px;
  bottom: 14px;

  padding: 7px 10px;

  color: #FFFFFF;
  background: rgba(8,8,8,.39);

  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);

  border-left: 2px solid #E6C46A;
  border-radius: 3px;

  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;

  text-shadow:
    0 1px 3px rgba(0,0,0,.7);
}

/* ========================================
   BORDE DORADO ANIMADO
======================================== */

@property --work-border-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.work-photo__border {
  position: absolute;
  inset: 0;
  z-index: 5;

  padding: 2px;

  border-radius: inherit;
  pointer-events: none;

  background: conic-gradient(
    from var(--work-border-angle),
    rgba(212,175,55,.12) 0deg,
    rgba(212,175,55,.12) 230deg,
    rgba(230,196,106,.40) 263deg,
    #F5D780 295deg,
    rgba(230,196,106,.78) 326deg,
    rgba(212,175,55,.12) 360deg
  );

  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);

  -webkit-mask-composite: xor;

  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);

  mask-composite: exclude;

  animation:
    work-border-rotate 5s linear infinite;
}

@keyframes work-border-rotate {
  to {
    --work-border-angle: 360deg;
  }
}

/* ========================================
   IMÁGENES SEGÚN CATEGORÍA
======================================== */

/* GAS */

.works-gallery[data-work="gas"] .work-photo--main {
  background-image: url("trabajo-gas-2.webp");
  background-position: center 45%;
}

.works-gallery[data-work="gas"] .work-photo--second {
  background-image: url("trabajo-gas-1.webp");
}

.works-gallery[data-work="gas"] .work-photo--third {
  background-image: url("trabajo-gas-3.webp");
}

/* PLOMERÍA */

.works-gallery[data-work="plomeria"] .work-photo--main {
  background-image: url("foto-plomeria.webp");
}

.works-gallery[data-work="plomeria"] .work-photo--second {
  background-image: url("foto-union-cobre.webp");
}

.works-gallery[data-work="plomeria"] .work-photo--third {
  background-image: url("foto-plomeria-canerias.webp");
}

/* CALEFACCIÓN */

.works-gallery[data-work="calefaccion"] .work-photo--main {
  background-image: url("foto-calefaccion-colector.webp");
}

.works-gallery[data-work="calefaccion"] .work-photo--second {
  background-image: url("foto-calefaccion-piso-radiante.webp");
}

.works-gallery[data-work="calefaccion"] .work-photo--third {
  background-image: url("foto-calefaccion-piso-radiante-2.webp");
}

/* REFRIGERACIÓN */

.works-gallery[data-work="refrigeracion"] .work-photo--main {
  background-image: url("foto-refrigeracion-1.webp");
}

.works-gallery[data-work="refrigeracion"] .work-photo--second {
  background-image: url("foto-refrigeracion-2.webp");
}

.works-gallery[data-work="refrigeracion"] .work-photo--third {
  background-image: url("foto-refrigeracion-3.webp");
}

/* PINTURA */

.works-gallery[data-work="pintura"] .work-photo--main {
  background-image: url("foto-pintura-1.webp");
}

.works-gallery[data-work="pintura"] .work-photo--second {
  background-image: url("foto-pintura-2.webp");
}

.works-gallery[data-work="pintura"] .work-photo--third {
  background-image: url("foto-pintura-3.webp");
}

/* DESTAPACIONES */

.works-gallery[data-work="destapaciones"] .work-photo--main {
  background-image: url("foto-destapaciones-3.webp");
}

.works-gallery[data-work="destapaciones"] .work-photo--second {
  background-image: url("foto-destapaciones-1.webp");
}

.works-gallery[data-work="destapaciones"] .work-photo--third {
  background-image: url("foto-destapaciones-2.webp");
}

/* ========================================
   TRANSICIÓN ENTRE TRABAJOS
======================================== */

/* SALIDA */

.works-gallery.is-transition-out
.work-photo--main {
  opacity: 0;
  transform: translateX(-55px);
  filter: blur(2px);
}

.works-gallery.is-transition-out
.work-photo--second {
  opacity: 0;
  transform: translateX(-45px);
  filter: blur(2px);
}

.works-gallery.is-transition-out
.work-photo--third {
  opacity: 0;
  transform: translateX(-35px);
  filter: blur(2px);
}

/* ENTRADA */

.works-gallery.is-transition-in
.work-photo--main {
  animation:
    work-slide-in-main .58s
    cubic-bezier(.22,1,.36,1) both;
}

.works-gallery.is-transition-in
.work-photo--second {
  animation:
    work-slide-in-small .54s
    cubic-bezier(.22,1,.36,1) both;

  animation-delay: .05s;
}

.works-gallery.is-transition-in
.work-photo--third {
  animation:
    work-slide-in-small .54s
    cubic-bezier(.22,1,.36,1) both;

  animation-delay: .1s;
}

@keyframes work-slide-in-main {

  from {
    opacity: 0;
    transform: translateX(65px);
    filter: blur(2px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
    filter: blur(0);
  }

}

@keyframes work-slide-in-small {

  from {
    opacity: 0;
    transform: translateX(50px);
    filter: blur(2px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
    filter: blur(0);
  }

}

/* ========================================
   TABLETS - NAVEGACIÓN HORIZONTAL
======================================== */

@media (max-width: 850px) {

  .works-heading {
    flex-direction: column;
    align-items: flex-start;

    gap: 20px;
    margin-bottom: 25px;
  }

  .works-layout {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .works-navigation {
    width: 100%;
    min-width: 0;
  }

  /* Pista de desplazamiento */

  .works-scroll-hint {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;

    margin-bottom: 13px;
    padding-right: 3px;

    color: #E6C46A;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: .4px;
  }

  .works-scroll-hint svg {
    width: 18px;
    height: 18px;

    animation:
      worksHintArrow 1.8s ease-in-out infinite;
  }

  @keyframes worksHintArrow {

    0%, 100% {
      transform: translateX(0);
    }

    50% {
      transform: translateX(5px);
    }

  }

  /* Contenedor horizontal */

  .works-list {
    display: flex;
    flex-direction: row;
    align-items: stretch;

    gap: 12px;

    height: auto;
    min-height: 0;

    overflow-x: auto;
    overflow-y: hidden;

    padding: 3px 3px 13px;

    scroll-snap-type: x mandatory;
    scroll-padding-inline: 3px;

    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;

    scrollbar-width: none;
  }

  .works-list::-webkit-scrollbar {
    display: none;
  }

  /* Tarjetas horizontales */

  .work-option {
    flex: 0 0 auto;

    width: auto;
    min-width: 172px;
    min-height: 62px;

    gap: 13px;

    padding: 14px 18px;

    border-radius: 7px;

    scroll-snap-align: start;
  }

  .work-name {
    flex: 0 0 auto;

    white-space: nowrap;

    font-size: 14px;
  }

  .work-number {
    font-size: 12px;
  }

  /* Flecha dentro de la tarjeta */

  .work-arrow {
    display: none;
  }

  .works-gallery {
    height: 430px;
  }

}

/* ========================================
   CELULARES
======================================== */

@media (max-width: 600px) {

  .works-heading h2 {
    font-size: clamp(30px, 8vw, 35px);
    line-height: 1.15;
    letter-spacing: -1px;
  }

  .works-intro {
    font-size: 16px;
    line-height: 1.7;
  }

  /* Categorías */

  .works-scroll-hint {
    font-size: 11px;
  }

  .works-list {
    gap: 10px;
  }

  .work-option {
    min-width: 166px;
    min-height: 58px;

    padding: 12px 15px;
  }

  .work-name {
    font-size: 14px;
  }

  /* =====================================
     GALERÍA VERTICAL
  ===================================== */

  .works-gallery {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    grid-template-rows:
      350px 145px;

    height: auto;
    gap: 10px;
  }

  .work-photo--main {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .work-photo--second {
    grid-column: 1;
    grid-row: 2;
  }

  .work-photo--third {
    grid-column: 2;
    grid-row: 2;
  }

  /* Contenido */

  .work-photo__content {
    left: 12px;
    right: 12px;
    bottom: 12px;

    padding: 13px 14px;
  }

  .work-photo__content h3 {
    font-size: 24px;
    margin-bottom: 7px;
  }

  .work-photo__content p {
    font-size: 15px;
    line-height: 1.55;
  }

  /* Etiquetas */

  .work-photo__label {
    left: 8px;
    bottom: 8px;

    padding: 6px 8px;

    font-size: 12px;
  }

  .work-photo--main::before {
    top: 12px;
    left: 12px;

    font-size: 9px;
  }

}

/* ========================================
   PANTALLAS MUY ANGOSTAS
======================================== */

@media (max-width: 380px) {

  .works-gallery {
    grid-template-rows:
      330px 130px;
  }

  .work-photo__content h3 {
    font-size: 21px;
  }

  .work-photo__content p {
    font-size: 13px;
  }

  .work-option {
    min-width: 155px;
    padding: 12px 13px;
  }

  .work-name {
    font-size: 13px;
  }

}

/* ========================================
   MOVIMIENTO REDUCIDO
======================================== */

@media (prefers-reduced-motion: reduce) {

  .work-option,
  .work-arrow,
  .work-photo {
    transition: none;
    animation: none !important;
  }

  .work-photo__border,
  .works-scroll-hint svg {
    animation: none;
  }

  .works-list {
    scroll-behavior: auto;
  }

}/* ========================================
   FEDERAL GAS — NUESTRA EXPERIENCIA
   CSS unificado | 24/10/2026

   Reemplazar TODO el CSS anterior de esta
   sección. No agregarlo como parche.

   Incluye:
   - Tarjeta principal glass + borde animado
   - Indicadores de confianza
   - Video internacional + banderas originales
   - Certificaciones beige + grilla compacta
   - Carrusel móvil con scroll-snap

   No incluye el antiguo visor de credenciales.
======================================== */

/* ========================================
   01. SECCIÓN Y TARJETA PRINCIPAL
======================================== */

.experience {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 110px 0 95px;
  background: transparent !important; /* Continúa el degradado de la web */
}

.experience-container {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.experience-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 58px 48px 55px;
  text-align: center;
  border: 1px solid rgba(230, 196, 106, 0.25);
  border-radius: 22px;
  background: linear-gradient(
    145deg,
    rgba(15, 15, 15, 0.72) 0%,
    rgba(37, 35, 32, 0.58) 55%,
    rgba(65, 60, 51, 0.42) 100%
  );
  box-shadow:
    0 22px 65px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* Iluminación interior suave */
.experience-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    125deg,
    rgba(255, 255, 255, 0.09) 0%,
    rgba(230, 196, 106, 0.04) 25%,
    transparent 50%
  );
}

/* Brillo dorado que recorre el marco externo */
@property --experience-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.experience-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  padding: 1.5px;
  border-radius: inherit;
  pointer-events: none;
  background: conic-gradient(
    from var(--experience-angle),
    rgba(230, 196, 106, 0.20) 0deg,
    rgba(230, 196, 106, 0.20) 280deg,
    rgba(255, 220, 125, 0.48) 300deg,
    rgba(255, 247, 200, 1) 320deg,
    rgba(255, 220, 125, 0.75) 335deg,
    rgba(230, 196, 106, 0.20) 360deg
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: experienceBorderGlow 8s linear infinite;
}

@keyframes experienceBorderGlow {
  to { --experience-angle: 360deg; }
}

.experience-card > * {
  position: relative;
  z-index: 2;
}

/* ========================================
   02. ENCABEZADO
======================================== */

.experience-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.experience-heading h2 {
  max-width: 850px;
  font-size: clamp(30px, 3.4vw, 48px);
  font-weight: 700;
  letter-spacing: -1.6px;
  line-height: 1.2;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.16);
}

.experience-heading h2 span {
  color: var(--gold-light);
}

.experience-description {
  max-width: 1050px;
  margin-top: 24px;
  color: #E5E2DC;
  font-size: 15px;
  line-height: 1.7;
}

/* ========================================
   03. INDICADORES (SVG ORIGINALES)
======================================== */

.experience-features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 30px;
  width: 100%;
  max-width: 900px;
  margin: 60px auto 0;
}

.experience-feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  min-height: 140px;
  padding: 10px 8px;
  text-align: center;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.experience-counter {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 78px;
  color: var(--gold-light);
  font-size: 66px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -2px;
  font-variant-numeric: tabular-nums;
}

.experience-feature__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 78px;
  height: 78px;
}

.experience-feature__icon img {
  display: block;
  width: 68px;
  height: 68px;
  object-fit: contain;
}

.experience-feature p {
  color: #FFFFFF;
  font-size: 13px;
  line-height: 1.6;
}

.experience-feature strong {
  display: block;
  margin-bottom: 5px;
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 700;
}

/* ========================================
   04. EXPERIENCIA INTERNACIONAL / VIDEO
   Sin modificar su distribución aprobada.
======================================== */

.experience-video-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  align-items: center;
  gap: clamp(18px, 2.8vw, 36px);
  width: 100%;
  min-width: 0;
  margin-top: 48px;
  padding: 24px;
  overflow: hidden;
  text-align: left;
  background: rgba(20, 20, 20, .25);
  border: 1px solid rgba(230, 196, 106, .25);
  border-radius: 12px;
}

.experience-video-card .experience-video {
  display: block;
  width: 100%;
  max-width: 320px;
  height: auto;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  object-position: center;
  justify-self: center;
  background: #111111;
  border-radius: 10px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, .20);
}

.experience-video-card__overlay {
  min-width: 0;
  text-align: left;
}

.experience-video-card__label {
  margin-bottom: 14px;
  color: #E6C46A;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.5px;
}

.experience-video-card__overlay h3 {
  margin-bottom: 15px;
  color: #FFFFFF;
  font-size: clamp(24px, 2.5vw, 36px);
  font-weight: 700;
  line-height: 1.2;
}

.experience-video-card__description {
  color: #DAD6CF;
  font-size: 14px;
  line-height: 1.7;
}

/* Banderas originales dentro de la tarjeta internacional */
.experience-countries {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 14px;
  width: 100%;
  margin: 26px auto 0;
  padding-top: 22px;
  border-top: 1px solid rgba(230, 196, 106, .18);
}

.country {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 0;
  text-align: center;
}

.country img {
  display: block;
  width: min(105px, 100%);
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
  transition: transform 0.35s ease, border-color 0.35s ease;
}

.country:hover img {
  transform: translateY(-4px);
  border-color: rgba(212, 175, 55, 0.5);
}

.country h4 {
  margin-top: 5px;
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 700;
}

.country p {
  color: #FFFFFF;
  font-size: 12px;
  line-height: 1.5;
}

/* ========================================
   05. CERTIFICACIONES — BEIGE + GRILLA
======================================== */

.experience-certifications {
  width: 100%;
  margin-top: 24px;
  padding: 46px 36px 50px;
  text-align: center;
  background: linear-gradient(
    145deg,
    #F5F2E9 0%,
    #F2EEE4 55%,
    #E9E3D7 100%
  );
  border: 1px solid rgba(184, 134, 11, 0.32);
  border-radius: 16px;
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.experience-certifications__heading {
  max-width: 680px;
  margin: 0 auto 34px;
}

.experience-certifications__label {
  margin-bottom: 14px;
  color: #A67C22;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.experience-certifications h3 {
  margin-bottom: 14px;
  color: #1A1A1A;
  font-size: clamp(26px, 2.6vw, 36px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.8px;
}

.experience-certifications__heading > p:last-child {
  color: #5D584E;
  font-size: 15px;
  line-height: 1.7;
}

/* 3 columnas centradas; credenciales compactas en desktop */
.experience-certifications__gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
}

.experience-certifications__gallery:empty {
  display: none;
}

/* Imagen directa, sin recuadro oscuro ni lightbox */
.credential-card {
  display: block;
  min-width: 0;
  margin: 0;
  border: 0;
  background: transparent;
}

.credential-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1.55 / 1;
  object-fit: contain;
  border: 0;
  border-radius: 7px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  transition:
    transform 0.35s cubic-bezier(.22, 1, .36, 1),
    box-shadow 0.35s ease,
    filter 0.35s ease;
}

/* Indicador exclusivo del carrusel móvil */
.credentials-navigation {
  display: none;
}

/* ========================================
   06. RESPONSIVE — ORDEN DESCENDENTE
======================================== */

/* TABLETS GRANDES */
@media (max-width: 991px) {
  .experience-card {
    padding: 45px 30px;
    border-radius: 20px;
  }

  .experience-certifications {
    padding: 38px 25px;
  }

  .experience-certifications__gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 580px;
    gap: 18px;
  }
}

/* TABLETS / NOTEBOOKS ESTRECHAS */
@media (max-width: 850px) {
  .experience {
    padding: 95px 0 85px;
  }

  .experience-description {
    max-width: 650px;
  }

  .experience-features {
    gap: 18px;
    margin-top: 55px;
  }

  .experience-feature {
    min-height: 130px;
    padding: 10px 4px;
  }

  .experience-video-card {
    grid-template-columns: minmax(0, .8fr) minmax(0, 1fr);
    gap: 20px;
  }

  .experience-video-card .experience-video {
    max-width: 260px;
  }

  .country img {
    width: min(80px, 100%);
  }

  .country h4 {
    font-size: 12px;
  }

  .country p {
    font-size: 11px;
  }
}

/* MOBILE: VIDEO ORIGINAL SUPERPUESTO + CARRUSEL */
@media (max-width: 700px) {
  .experience-video-card {
    position: relative;
    display: block;
    min-height: 600px;
    aspect-ratio: 9 / 16;
    padding: 0;
    overflow: hidden;
    border-radius: 14px;
  }

  .experience-video-card .experience-video {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    max-width: none;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
    object-position: center;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .experience-video-card__overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 25px 20px 20px;
    text-align: left;
    background: linear-gradient(
      180deg,
      rgba(0, 0, 0, .66) 0%,
      rgba(0, 0, 0, .38) 42%,
      rgba(0, 0, 0, .12) 66%,
      rgba(0, 0, 0, .56) 100%
    );
    text-shadow: 0 2px 9px rgba(0, 0, 0, .65);
    pointer-events: none;
  }

  .experience-video-card__label {
    margin-bottom: 10px;
    font-size: 10px;
    letter-spacing: 1.3px;
  }

  .experience-video-card__overlay h3 {
    margin-bottom: 10px;
    font-size: clamp(22px, 5.5vw, 28px);
  }

  .experience-video-card__description {
    color: #F5F5F5;
    font-size: 13px;
    line-height: 1.6;
  }

  .experience-countries {
    margin-top: auto;
    padding-top: 18px;
    gap: 7px;
  }

  .country img {
    width: min(66px, 100%);
  }

  .country h4 {
    font-size: 12px;
  }

  .country p {
    font-size: 10px;
  }

  /* Texto de ayuda y contador */
  .credentials-navigation {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
  }

  .credentials-navigation__hint {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #8B6928;
    font-size: 12px;
    font-weight: 700;
  }

  .credentials-navigation__hint span {
    font-size: 19px;
  }

  .credentials-navigation__counter {
    color: #8B6928;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;
    white-space: nowrap;
  }

  /* Una credencial + parte de la siguiente; sin scroll vertical adicional */
  .experience-certifications__gallery {
    display: flex;
    gap: 14px;
    max-width: none;
    margin: 0 auto;
    padding: 5px 2px 18px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 2px;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .experience-certifications__gallery::-webkit-scrollbar {
    display: none;
  }

  .credential-card {
    flex: 0 0 86%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
}

/* CELULARES */
@media (max-width: 600px) {
  .experience {
    padding: 95px 0 100px;
  }

  .experience-card {
    padding: 36px 18px 32px;
    border-radius: 16px;
  }

  .experience-heading h2 {
    font-size: 31px;
    letter-spacing: -1px;
  }

  .experience-description {
    font-size: 16px;
    line-height: 1.7;
  }

  .experience-features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px 18px;
    margin-top: 55px;
  }

  .experience-feature {
    min-height: 150px;
    padding: 10px 5px;
  }

  .experience-feature:first-child {
    grid-column: 1 / -1;
  }

  .experience-counter {
    height: 78px;
    font-size: 62px;
  }

  .experience-feature__icon {
    width: 60px;
    height: 60px;
  }

  .experience-feature__icon img {
    width: 60px;
    height: 60px;
  }

  .experience-feature strong {
    font-size: 15px;
  }

  .experience-feature p {
    font-size: 14px;
    line-height: 1.6;
  }

  .experience-video-card {
    margin-top: 35px;
  }

  .experience-certifications {
    padding: 30px 18px 32px;
    border-radius: 14px;
  }

  .experience-certifications__heading {
    margin-bottom: 26px;
  }

  .experience-certifications h3 {
    font-size: clamp(25px, 6.5vw, 30px);
  }

  .experience-certifications__heading > p:last-child {
    font-size: 15px;
  }
}

/* TELÉFONOS ANGOSTOS */
@media (max-width: 360px) {
  .experience-video-card {
    min-height: 680px;
  }

  .experience-video-card__overlay {
    padding: 20px 14px 16px;
  }

  .experience-video-card__description {
    font-size: 12px;
  }

  .country img {
    width: min(53px, 100%);
  }
}

/* ========================================
   07. INTERACCIONES Y ACCESIBILIDAD
======================================== */

@media (hover: hover) and (pointer: fine) {
  .credential-card:hover img {
    transform: translateY(-4px) scale(1.025);
    filter: brightness(1.025);
    box-shadow:
      0 14px 28px rgba(0, 0, 0, 0.19),
      0 0 16px rgba(184, 134, 11, 0.10);
  }
}

.experience-certifications__gallery:focus-visible {
  outline: 2px solid #A67C22;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .experience-card {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .experience-card::after {
    animation: none;
  }

  .country img,
  .credential-card img {
    transition: none;
  }

  .country:hover img,
  .credential-card:hover img {
    transform: none;
  }

  .experience-certifications__gallery {
    scroll-behavior: auto;
  }
}



/* ========================================
   CONTACTO - REDISEÑO
======================================== */

.contact {
  position: relative;
  padding: 145px 0 130px;
  background: transparent;
  scroll-margin-top: 100px;
}

/* DISTRIBUCIÓN PRINCIPAL */

.contact-layout {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1.08fr);

  align-items: center;
  gap: clamp(45px, 6vw, 100px);

  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
}

/* ========================================
   CONTENIDO IZQUIERDO
======================================== */

.contact-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  text-align: left;
}

/* LABEL */

.contact .section-label {
  color: var(--gold-light);
  margin-bottom: 22px;
  font-size: 16px;
}

/* TÍTULO */

.contact-content h2 {
  max-width: 650px;

  color: #181818;
  font-size: clamp(34px, 3.8vw, 56px);
  font-weight: 700;
  letter-spacing: -1.8px;
  line-height: 1.12;
    text-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

.contact-content h2 span {
  display: block;
  color: var(--gold-light);
    text-shadow:
    0 4px 14px rgba(212, 175, 55, 0.16),
    0 1px 0 rgba(255, 255, 255, 0.18);
}

/* DESCRIPCIÓN */

.contact-description {
  max-width: 510px;
  margin-top: 26px;

    color: #302B26;

  font-size: 16px;
  line-height: 1.8;
}

/* ========================================
   MEDIOS DE CONTACTO
======================================== */

.contact-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;

  width: 100%;
  margin-top: 36px;
}

/* BOTÓN WHATSAPP */

.contact-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;

  min-height: 60px;
  padding: 17px 25px;

  color: #111111;
  background: linear-gradient(
    135deg,
    #E6C46A 0%,
    #D4AF37 100%
  );

  border: 1px solid rgba(145, 105, 24, 0.25);
  border-radius: 8px;

  font-size: 16px;
  font-weight: 800;
  text-decoration: none;

  box-shadow:
    0 8px 24px rgba(100, 75, 25, 0.15);

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    filter 0.3s ease;
}

.contact-cta img {
  width: 30px;
  height: 30px;
  object-fit: contain;
  filter: brightness(0);
}

.contact-cta svg {
  width: 19px;
  height: 19px;
  flex-shrink: 0;

  transition: transform 0.3s ease;
}

.contact-cta:hover {
  transform: translateY(-3px);
  filter: brightness(1.06);

  box-shadow:
    0 12px 32px rgba(100, 75, 25, 0.22);
}

.contact-cta:hover svg {
  transform: translate(3px, -3px);
}

/* CORREO */

.contact-email {
  display: inline-flex;
  align-items: center;
  gap: 12px;

color: #3A342E;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  overflow-wrap: anywhere;

  transition: color 0.3s ease;
}
.contact-email:hover {
  color: #946E20;
}

.contact-email svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: #946E20;
}

.contact-email:hover {
  color: #946E20;
}

/* ========================================
   HORARIOS
======================================== */

.contact-details {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;

  margin-top: 35px;
  padding-top: 24px;

  width: 100%;

  border-top: 1px solid rgba(40, 35, 25, 0.18);
}

.contact-details p {
  color: #514C44;
  font-size: 12px;
  line-height: 1.7;
}

.contact-details strong {
  display: block;
  margin-bottom: 3px;

  color: #24211D;
  font-size: 13px;
  font-weight: 700;
}

/* ========================================
   IMAGEN DERECHA
======================================== */

.contact-visual {
  position: relative;
  width: 100%;
  min-width: 0;
  margin: 0;
}

.contact-visual__image {
  position: relative;
  overflow: hidden;

  width: 100%;
  aspect-ratio: 1.35;

  border-radius: 16px;
  border: 1px solid rgba(140, 109, 40, 0.40);

  background: #D8D3C8;

  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.14),
    0 0 0 1px rgba(255, 255, 255, 0.14);
}

.contact-visual__image img {
  display: block;
  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;

  transition: transform 0.7s ease;
}

@media (hover: hover) and (pointer: fine) {
  .contact-visual:hover img {
    transform: scale(1.035);
  }
}

/* PIE DE IMAGEN */

.contact-visual figcaption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;

  margin-top: 14px;

  color: #6D5426;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.4px;
}

.contact-visual figcaption span {
  color: #565048;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
}

/* ========================================
   RESPONSIVE - TABLET
======================================== */

@media (max-width: 991px) {

  .contact {
    padding: 110px 0 95px;
  }

  .contact-layout {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .contact-content h2 {
    max-width: 700px;
    font-size: clamp(34px, 5vw, 48px);
  }

  .contact-description {
    max-width: 650px;
  }

  .contact-visual__image {
    aspect-ratio: 1.6;
  }

}

/* ========================================
   RESPONSIVE - MOBILE
======================================== */

@media (max-width: 600px) {

  .contact {
    padding: 90px 0 75px;
  }

  .contact-layout {
    gap: 42px;
  }

  .contact-content h2 {
    font-size: clamp(34px, 9vw, 43px);
    letter-spacing: -1.2px;
  }

  .contact-description {
    margin-top: 22px;
    font-size: 15px;
    line-height: 1.75;
  }

  .contact-actions {
    gap: 22px;
    margin-top: 30px;
  }

  .contact-cta {
    width: 100%;
    padding: 17px 14px;
    gap: 10px;
    font-size: 15px;
  }

  .contact-email {
    font-size: 15px;
  }

  .contact-details {
    gap: 18px;
    margin-top: 30px;
  }

  .contact-details p,
  .contact-details strong {
    
    font-size: 15px;
  }

  .contact-visual__image {
    aspect-ratio: 1.4;
    border-radius: 12px;
  }

  .contact-visual figcaption {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
    font-size: 15px;
  }
  .contact-visual figcaption span {
    font-size: 14px;
  }

}

/* ========================================
   ACCESIBILIDAD
======================================== */

.contact-cta:focus-visible,
.contact-email:focus-visible {
  outline: 2px solid #946E20;
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {

  .contact-cta,
  .contact-cta svg,
  .contact-email,
  .contact-visual__image img {
    transition: none;
  }

}

/* ========================================
   FOOTER
======================================== */

.footer {
  padding: 45px 0 25px;

  background: var(--black);

  border-top: 1px solid rgba(255,255,255,0.09);
}

/* ========================================
   LOGO Y NAVEGACIÓN
======================================== */

.footer-main {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 40px;
  padding-bottom: 35px;
}

/* Logo */

.footer-logo {
  display: block;
  width: 300px;
  flex-shrink: 0;
}

.footer-logo img {
  display: block;
  width: 100%;
  height: auto;
}

/* Navegación */

.footer-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;

  gap: 26px;
}

.footer-nav a {
  position: relative;

  color: #C0C0C0;
  font-size: 16px;
  font-weight: 600;

  transition: color 0.25s ease;
}

.footer-nav a:hover,
.footer-nav a:focus-visible {
  color: var(--gold-light);
}

/* ========================================
   CONTACTO
======================================== */

.footer-contact {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;

  gap: 25px 65px;

  padding: 30px 0;

  border-top: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* WhatsApp y correo */

.footer-whatsapp,
.footer-email {
  display: inline-flex;
  align-items: center;
  gap: 11px;

  color: #E5E5E5;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
}

.footer-whatsapp {
  transition: color 0.25s ease;
}

.footer-whatsapp:hover,
.footer-whatsapp:focus-visible {
  color: var(--gold-light);
}

/* Iconos */

.footer-contact__icon {
  display: block;

  width: 32px;
  height: 32px;

  flex-shrink: 0;
  color: var(--gold-light);
}

/* WhatsApp - SVG original */

.footer-contact__icon--whatsapp {
  background-color: var(--gold-light);

  -webkit-mask:
    url("icon-whatsapp.svg") center / contain no-repeat;

  mask:
    url("icon-whatsapp.svg") center / contain no-repeat;
}

/* Correo */

.footer-email span {
  overflow-wrap: anywhere;
}

/* ========================================
   COPYRIGHT
======================================== */

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;
  padding-top: 23px;
}

.footer-bottom p {
  color: #929292;
  font-size: 13px;
  line-height: 1.6;
}

.footer-bottom a {
  color: var(--gold-light);

  transition: color 0.25s ease;
}

.footer-bottom a:hover,
.footer-bottom a:focus-visible {
  color: var(--white);
}

/* ========================================
   RESPONSIVE - TABLETS
======================================== */

@media (max-width: 850px) {

  .footer-main {
    flex-direction: column;
    gap: 28px;
  }

  .footer-nav {
    justify-content: center;
    gap: 15px 24px;
  }

  .footer-contact {
    gap: 22px 35px;
  }

}

/* ========================================
   RESPONSIVE - CELULARES
======================================== */

@media (max-width: 600px) {

  .footer {
    padding: 40px 0 25px;
  }

  .footer-main {
    gap: 25px;
    padding-bottom: 30px;
  }

  .footer-logo {
    width: 285px;
  }

  .footer-nav {
    gap: 14px 20px;
  }

  .footer-nav a {
    font-size: 14px;
  }

  .footer-contact {
    flex-direction: column;
    align-items: center;

    gap: 20px;
    padding: 28px 0;
  }

  .footer-whatsapp,
  .footer-email {
    font-size: 15px;
  }

  .footer-contact__icon {
    width: 28px;
    height: 28px;
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;

    gap: 10px;
    padding-top: 22px;
  }

  .footer-bottom p {
    font-size: 11px;
  }

}

/* ========================================
   MOVIMIENTO REDUCIDO
======================================== */

@media (prefers-reduced-motion: reduce) {

  .footer-nav a,
  .footer-whatsapp,
  .footer-bottom a {
    transition: none;
  }

}


/* ========================================
   ANIMACIONES GENERALES CON SCROLL
======================================== */

.reveal-enabled [data-reveal] {
  opacity: 0;
  transform: translateY(38px);

  transition:
    opacity 0.9s ease,
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);

  transition-delay: var(--reveal-delay, 0ms);
}

.reveal-enabled [data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Mantener elevación del CTA después de aparecer. */
.reveal-enabled .contact-whatsapp.is-visible:hover {
  transform: translateY(-3px);
}

@media (prefers-reduced-motion: reduce) {
  .reveal-enabled [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}



/* ========================================
   WHATSAPP FLOTANTE - FEDERAL GAS
======================================== */

.wa-floating {
  position: fixed;
  z-index: 9999;

  right: 24px;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));

  display: flex;
  align-items: center;
  justify-content: center;

  width: 64px;
  height: 64px;

  text-decoration: none;

  opacity: 0;
  visibility: hidden;

  transform: translateY(22px);

  transition:
    opacity .4s ease,
    transform .4s ease,
    visibility .4s ease;
}

/* Aparece al salir del Hero */

.wa-floating.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* ========================================
   BOTÓN CIRCULAR
======================================== */

.wa-floating__circle {
  position: relative;
  isolation: isolate;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 64px;
  height: 64px;

  border: 2px solid #F5D780;
  border-radius: 50%;

  background: linear-gradient(
    145deg,
    #FFE18B 0%,
    #E6C46A 40%,
    #C9A13E 100%
  );

  box-shadow:
    0 8px 28px rgba(0,0,0,.32),
    0 0 18px rgba(230,196,106,.20),
    inset 0 2px 2px rgba(255,255,255,.50),
    inset 0 -3px 6px rgba(100,65,5,.20);

  transition:
    transform .3s ease,
    box-shadow .3s ease,
    filter .3s ease;
}

/* Icono */

.wa-floating__circle img {
  position: relative;
  z-index: 2;

  display: block;

  width: 31px;
  height: 31px;

  object-fit: contain;
}

/* ========================================
   ANILLO DORADO ANIMADO
======================================== */

.wa-floating__circle::before {
  content: "";

  position: absolute;
  z-index: -1;

  inset: -3px;

  border: 2px solid rgba(230,196,106,.65);
  border-radius: 50%;

  animation:
    waFloatingPulse 3s ease-out infinite;
}

@keyframes waFloatingPulse {

  0% {
    opacity: .75;
    transform: scale(1);
  }

  65%, 100% {
    opacity: 0;
    transform: scale(1.48);
  }

}

/* ========================================
   MENSAJE EMERGENTE
======================================== */

.wa-floating__bubble {
  position: absolute;

  right: 0;
  bottom: calc(100% + 18px);

  display: flex;
  flex-direction: column;
  gap: 5px;

  width: max-content;
  max-width: min(260px, calc(100vw - 36px));

  padding: 15px 19px;

  color: #FFFFFF;

  background: linear-gradient(
    145deg,
    rgba(38,35,29,.98),
    rgba(17,17,17,.98)
  );

  border: 1px solid rgba(230,196,106,.55);
  border-radius: 10px;

  box-shadow:
    0 10px 35px rgba(0,0,0,.32),
    0 0 15px rgba(230,196,106,.08);

  opacity: 0;
  visibility: hidden;

  transform: translateY(10px) scale(.96);

  transform-origin: bottom right;

  transition:
    opacity .35s ease,
    transform .35s ease,
    visibility .35s ease;

  pointer-events: none;
}

/* Triángulo del mensaje */

.wa-floating__bubble::after {
  content: "";

  position: absolute;

  right: 22px;
  bottom: -7px;

  width: 12px;
  height: 12px;

  background: #171717;

  border-right: 1px solid rgba(230,196,106,.55);
  border-bottom: 1px solid rgba(230,196,106,.55);

  transform: rotate(45deg);
}

/* Textos */

.wa-floating__bubble strong {
  color: #FFFFFF;

  font-size: 14px;
  font-weight: 800;
  line-height: 1.4;
}

.wa-floating__bubble > span {
  color: #E6C46A;

  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
}

/* Mensaje visible */

.wa-floating.is-hint-open .wa-floating__bubble,
.wa-floating:hover .wa-floating__bubble,
.wa-floating:focus-visible .wa-floating__bubble {
  opacity: 1;
  visibility: visible;

  transform: translateY(0) scale(1);
}

/* ========================================
   HOVER
======================================== */

@media (hover: hover) and (pointer: fine) {

  .wa-floating:hover .wa-floating__circle {
    transform: translateY(-4px) scale(1.06);

    filter: brightness(1.08);

    box-shadow:
      0 12px 32px rgba(0,0,0,.38),
      0 0 25px rgba(230,196,106,.40),
      inset 0 2px 2px rgba(255,255,255,.55);
  }

}

/* Accesibilidad */

.wa-floating:focus-visible {
  outline: 3px solid #E6C46A;
  outline-offset: 6px;
  border-radius: 50%;
}

/* ========================================
   TABLETS
======================================== */

@media (max-width: 850px) {

  .wa-floating {
    right: 20px;
    bottom: calc(
      20px + env(safe-area-inset-bottom, 0px)
    );
  }

}

/* ========================================
   CELULARES
======================================== */

@media (max-width: 480px) {

  .wa-floating {
    right: 17px;

    bottom: calc(
      18px + env(safe-area-inset-bottom, 0px)
    );

    width: 59px;
    height: 59px;
  }

  .wa-floating__circle {
    width: 59px;
    height: 59px;
  }

  .wa-floating__circle img {
    width: 29px;
    height: 29px;
  }

  .wa-floating__bubble {
    bottom: calc(100% + 15px);
    padding: 13px 15px;
  }

  .wa-floating__bubble strong {
    font-size: 13px;
  }

  .wa-floating__bubble > span {
    font-size: 12px;
  }

}

/* ========================================
   MOVIMIENTO REDUCIDO
======================================== */

@media (prefers-reduced-motion: reduce) {

  .wa-floating,
  .wa-floating__circle,
  .wa-floating__bubble {
    transition: none;
  }

  .wa-floating__circle::before {
    animation: none;
  }

}