/* ==========================================================================
   TEMPLATE: Custom Template — main.css
   Versión:   1.1.0
   Fuente:    Avenir Next (local)
   Orden:     Fuentes → Variables → Base → Header → Hero → Contenido → Footer
              Cada componente incluye su propio @media inmediatamente después
              de sus reglas de escritorio.
   ========================================================================== */
 
/* --------------------------------------------------------------------------
   1. FUENTES LOCALES — Avenir Next
   -------------------------------------------------------------------------- */
@font-face {
    font-family: 'Avenir Next Regular';
    src: url('fuentes/AvenirNext-Regular.woff2') format('woff2'),
         url('fuentes/AvenirNext-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Avenir Next Demi';
    src: url('fuentes/AvenirNext-DemiBold.woff2') format('woff2'),
         url('fuentes/AvenirNext-DemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Avenir Next Bold';
    src: url('fuentes/AvenirNext-Bold.woff2') format('woff2'),
         url('fuentes/AvenirNext-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}


/* --------------------------------------------------------------------------
   2. VARIABLES CSS — Paleta de marca
   -------------------------------------------------------------------------- */
:root {
    /* Colores */
    --negro-rgb:        0, 0, 0;
    --color-primario:   #464646;   /* dark-gray */
    --color-secundario: #f9f9f9;   /* off-white */
    --color-azul:       #091542;   /* navy */
    --color-amarillo:   #e2ba41;   /* gold */
    --color-gris:       #cccccc;   /* silver */
    --color-gris-claro: #f2f2f2;   /* light-gray */
    --color-blanco:     #ffffff;

    /* Tipografía */
    --font-regular:  'Avenir Next Regular', sans-serif;
    --font-demi:     'Avenir Next Demi', sans-serif;
    --font-bold:     'Avenir Next Bold', sans-serif;
}


/* --------------------------------------------------------------------------
   3. RESET / BASE
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-regular);
    color: var(--color-primario);
    background-color: var(--color-blanco);
    margin: 0;
    padding: 0;
    line-height: 1.6;
}

a {
    color: var(--color-azul);
    text-decoration: none;
    transition: color 0.2s ease;
}

strong {
    font-family: var(--font-demi);
}
a:hover {
    color: var(--color-amarillo);
}

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


/* --------------------------------------------------------------------------
   4. TIPOGRAFÍA — Escalado fluido
   -------------------------------------------------------------------------- */
h1 { font-size: clamp(24px, 5vw, 32px);   line-height: 1.2; font-family: var(--font-demi); font-weight: 600; }
h2 { font-size: clamp(22px, 3.5vw, 30px); line-height: 1.2; font-family: var(--font-demi); font-weight: 600; }
h3 { font-size: clamp(20px, 2.5vw, 24px); line-height: 1.2; font-family: var(--font-demi); font-weight: 600; }
h4 { font-size: clamp(16px, 2vw, 20px);   line-height: 1.2; font-family: var(--font-demi); font-weight: 600; }
h5 { font-size: clamp(14px, 1.8vw, 18px); line-height: 1.2; font-family: var(--font-demi); font-weight: 600; }
h6 { font-size: clamp(13px, 1.5vw, 16px); line-height: 1.2; font-family: var(--font-demi); font-weight: 600; }

.fs12 { font-size: clamp(10px, 1vw + 8px, 12px); }
.fs14 { font-size: clamp(12px, 1vw + 9px, 14px); }
.fs16 { font-size: clamp(14px, 1vw + 10px, 16px); }
.fs18 { font-size: clamp(16px, 1vw + 11px, 18px); }
.fs20 { font-size: clamp(16px, 1vw + 12px, 20px); }
.fs22 { font-size: clamp(20px, 1vw + 13px, 22px); }
.fs24 { font-size: clamp(22px, 1vw + 14px, 24px); }
.fs28 { font-size: clamp(26px, 1vw + 16px, 28px); }
.fs32 { font-size: clamp(28px, 1vw + 18px, 32px); }
.fs36 { font-size: clamp(34px, 1vw + 20px, 36px); }
.fs40 { font-size: clamp(36px, 1vw + 22px, 40px); }
.fs48 { font-size: clamp(46px, 1vw + 26px, 48px); }

p { font-size: clamp(16px, 1.6vw, 18px); line-height: 1.3; margin-bottom: 1rem; }
li  { font-size: clamp(16px, 1.6vw, 18px); line-height: 1.3; margin-bottom: 5px; }
small { font-size: 0.85rem; }


/* --------------------------------------------------------------------------
   5. CLASES DE COLOR — Fondos
   -------------------------------------------------------------------------- */
.bg-dark-gray   { background-color: var(--color-primario);   }
.bg-off-white   { background-color: var(--color-secundario); }
.bg-navy,
.bg-azul        { background-color: var(--color-azul);       }
.bg-gold        { background-color: var(--color-amarillo);   }
.bg-silver      { background-color: var(--color-gris);       }
.bg-light-gray  { background-color: var(--color-gris-claro); }

.bg-ciclo {
  position: relative;
  background: url("https://www.cristel.com.mx/images/software/software-de-automatizacion-de-procesos-fondo.jpg") center / cover no-repeat;
}
.bg-ciclo::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(10, 20, 50, 0.75);
}
.bg-ciclo > * {
  position: relative;
  z-index: 1;
}

.ciclo-steps {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ciclo-step {
  position: relative;
  display: flex;
  gap: 24px;
  padding-bottom: 40px;
}
.ciclo-step:last-child {
  padding-bottom: 0;
}
.ciclo-step__num {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: transparent;
  color: #fff;
  font-size: 24px;
 font-family: var(--font-demi);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}
.ciclo-step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 27px;
  top: 56px;
  bottom: -40px;
  width: 2px;
  background: rgba(255, 255, 255, 0.5);
}
.ciclo-step__body h4 {
  margin-bottom: 8px;
}


/* --------------------------------------------------------------------------
   6. CLASES DE COLOR — Textos
   -------------------------------------------------------------------------- */
.text-dark-gray  { color: var(--color-primario);   }
.text-off-white  { color: var(--color-secundario); }
.text-navy       { color: var(--color-azul);       }
.text-gold       { color: var(--color-amarillo);   }
.text-silver     { color: var(--color-gris);       }
.text-light-gray { color: var(--color-gris-claro); }


/* --------------------------------------------------------------------------
   7. CLASES DE COLOR — Bordes
   -------------------------------------------------------------------------- */
.borde-dark-gray  { border-color: var(--color-primario)   !important; }
.borde-off-white  { border-color: var(--color-secundario) !important; }
.borde-navy       { border-color: var(--color-azul)       !important; }
.borde-gold       { border-color: var(--color-amarillo)   !important; }
.borde-silver     { border-color: var(--color-gris)       !important; }
.borde-light-gray { border-color: var(--color-gris-claro) !important; }
.borde-white      { border-color: var(--color-blanco)     !important; }
.borde-black      { border-color: rgb(var(--negro-rgb))   !important; }


/* --------------------------------------------------------------------------
   8. UTILIDADES ADICIONALES
   -------------------------------------------------------------------------- */
.font-regular { font-family: var(--font-regular) !important; }
.font-demi    { font-family: var(--font-demi)    !important; }
.font-bold    { font-family: var(--font-bold)    !important; }

.shadow-soft { box-shadow: 0 2px 12px rgba(var(--negro-rgb), 0.08); }
.shadow-md   { box-shadow: 0 4px 24px rgba(var(--negro-rgb), 0.12); }

.divider {
    border: none;
    border-top: 1px solid var(--color-gris);
    margin: 2rem 0;
}

.divider-gold {
    border: none;
    border-top: 2px solid var(--color-amarillo);
    margin: 2rem 0;
}

/* Overlay oscuro para secciones con fondo imagen */
.overlay-dark {
    position: relative;
}

.overlay-dark::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgba(var(--negro-rgb), 0.45);
    z-index: 1;
}

.overlay-dark > * {
    position: relative;
    z-index: 2;
}

/* Lista con viñeta dorada */
.bullet-gold {
    list-style: disc;
    padding-left: 1.25rem;
}

.bullet-gold li::marker {
    color: var(--color-amarillo);
}


/* --------------------------------------------------------------------------
   9. BOTONES
   -------------------------------------------------------------------------- */

/* Botón primario */
.btn-primario {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: var(--font-demi);
    font-size: 1rem;
    color: var(--color-blanco);
    background-color: var(--color-azul);
    border: 2px solid var(--color-azul);
    border-radius: 4px;
    padding: 0.625rem 1.5rem;
    min-width: 160px;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.btn-primario:hover,
.btn-primario:focus-visible {
    background-color: var(--color-amarillo);
    border-color: var(--color-amarillo);
    color: var(--color-azul);
    outline: none;
}

/* Botón secundario */
.btn-secundario {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: var(--font-demi);
    font-size: 1rem;
    color: var(--color-azul);
    background-color: transparent;
    border: 2px solid var(--color-azul);
    border-radius: 4px;
    padding: 0.625rem 1.5rem;
    min-width: 160px;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.25s ease, color 0.25s ease;
}

.btn-secundario:hover,
.btn-secundario:focus-visible {
    background-color: var(--color-azul);
    color: var(--color-blanco);
    outline: none;
}

/* Botón gold / CTA */
.btn-gold {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: var(--font-demi);
    font-size: clamp(16px, 1vw + 12px, 18px); 
    color: var(--color-azul);
    background-color: var(--color-amarillo);
    border: 2px solid var(--color-amarillo);
    padding: 0.625rem 1.5rem;
    min-width: 160px;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.btn-gold:hover,
.btn-gold:focus-visible {
    background-color: var(--color-azul);
    border-color: var(--color-azul);
    color: var(--color-blanco);
    outline: none;
}

/* Botón amarillo compacto con flecha (estilo CTA "Cotiza tu proyecto>") */
.btn-flecha {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-family: var(--font-demi);
    font-size: 18px;
    color: var(--color-primario);
    background-color: var(--color-amarillo);
    border: none;
    border-radius: 4px;
    padding: 0.5rem 1rem;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.25s ease, color 0.25s ease;
}

.btn-flecha::after {
    content: '>';
    font-family: var(--font-bold);
    line-height: 1;
}

.btn-flecha:hover,
.btn-flecha:focus-visible {
    background-color: var(--color-azul);
    color: var(--color-blanco);
    outline: none;
}

/* Botón amarillo con ícono de teléfono (CTA móvil) */
.btn-tel {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--font-demi);
    font-size: 18px;
    color: var(--color-primario);
    background-color: var(--color-amarillo);
    border: none;
    border-radius: 4px;
    padding: 0.5rem 1rem;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.25s ease, color 0.25s ease;
}

.btn-tel:hover,
.btn-tel:focus-visible {
    background-color: var(--color-azul);
    color: var(--color-blanco);
    outline: none;
}

/* --------------------------------------------------------------------------
   10. TOP HEADER — franja superior (teléfono, idioma, CTA)
   -------------------------------------------------------------------------- */
.top-header {
    background-color: var(--color-gris-claro);
}

.top-header-nav {
    height: 38px;
    padding: 0;
    margin: 0;
    gap: 0;
}

.top-header-nav li { margin: 0; }


.top-header-item {
    padding: 0 1rem;
    display: flex;
    align-items: center;
}

.top-header-sep {
    color: var(--color-gris);
    user-select: none;
    padding: 0;
    line-height: 1;
}

.top-header-flag {
    font-size: 1.1rem;
    line-height: 1;
}

.top-header-link {
    font-family: var(--font-demi);
    font-size: 0.875rem;
    color: var(--color-primario);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    transition: color 0.2s ease;
}

.top-header-link:hover {
    color: var(--color-azul);
}

.top-header-link .bi {
    font-size: 0.9rem;
}

.top-header-cta {
    display: flex;
    align-items: stretch;
}

.btn-cta-top {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    padding: 0 1.5rem;
    font-family: var(--font-demi);
    font-size: 0.875rem;
    letter-spacing: 0.03em;
    color: var(--color-azul);
    background-color: var(--color-amarillo);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.btn-cta-top:hover {
    background-color: var(--color-azul);
    color: var(--color-blanco);
}


/* --------------------------------------------------------------------------
   11. HEADER — logo, navegación principal, menú móvil
   -------------------------------------------------------------------------- */
header {
    background-color: var(--color-blanco);
}

header .navbar {
    background-color: var(--color-blanco) !important;
}

header .bg-cafe {
    background-color: var(--color-azul);
}

/* Logo */
.logo-movil img {
    max-height: 56px;
    width: auto;
}

/* Nav links */
header .nav-link,
header .navbar-nav .nav-link {
    font-size: 16px;
    color: var(--color-primario);
    padding: 0.5rem 0.75rem;
    transition: color 0.2s ease;
}

header .nav-link:hover,
header .navbar-nav .nav-link:hover,
header .navbar-nav .nav-link.active {
    color: var(--color-amarillo);
}

/* Menú principal — hover en azul navy + bold */
.main-nav-bar .menu li a {
    color: var(--color-primario);
    text-decoration: none;
    transition: color 0.2s ease;
}

.main-nav-bar .menu li a:hover,
.main-nav-bar .menu li.active > a,
.main-nav-bar .menu li.current > a {
    color: var(--color-azul) !important;
    font-family: var(--font-demi);
}

li.nav-link {
    max-width: 130px;
    margin: 0;
    padding: 0;
    line-height: 120%;
}

a.nav-link:hover {
    color: var(--color-amarillo);
}


/* Offcanvas mobile */
.offcanvas {
    max-width: 300px;
}

.offcanvas-header {
    background-color: var(--color-azul);
    color: var(--color-blanco);
}

.offcanvas-header .btn-close {
    filter: invert(1);
}

.offcanvas-title {
    font-family: var(--font-demi);
    color: var(--color-blanco);
}

#burger-movil {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: transparent;
}

#burger-movil .navbar-toggler-icon {
    width: 26px;
    height: 2px;
    position: relative;
    background-color: var(--color-azul);
    background-image: none !important;
    display: inline-block;
}

#burger-movil .navbar-toggler-icon::before,
#burger-movil .navbar-toggler-icon::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--color-azul);
}

#burger-movil .navbar-toggler-icon::before {
    top: -7px;
}

#burger-movil .navbar-toggler-icon::after {
    top: 7px;
}

/* --------------------------------------------------------------------------
   12. HERO
   -------------------------------------------------------------------------- */
.hero {
    position: relative;
    overflow: hidden;
}

.hero img {
    width: 100%;
    object-fit: cover;
}


/* --------------------------------------------------------------------------
   13. HERO VIDEO — banner con overlay y título sobre video/imagen
   -------------------------------------------------------------------------- */
.hero-video {
    position: relative;
    width: 1400px;
    margin: auto;
    min-height: 460px;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.hero-video__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
}

/* Overlay oscuro semitransparente */
.hero-video__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.52);
    z-index: 1;
}

/* Contenedor de contenido sobre el video */
.hero-video__content {
    position: relative;
    z-index: 2;
    width: 100%;
}

/* Título principal */
.hero-video__titulo {
    color: #ffffff;
    font-size: 26px;
    line-height: 1.25;
    max-width: 600px;
    width: 100%;
    text-shadow: 0 2px 8px rgba(0, 0, 0, .45);
    padding: 25px 35px 25px 7%;
    background-color: rgba(9, 21, 66, 0.75);
}

.video-yt {
    cursor: pointer;
}


/* --------------------------------------------------------------------------
   14. BREADCRUMBS
   -------------------------------------------------------------------------- */
.breadcrumb {
    font-family: var(--font-regular);
    font-size: 0.875rem;
    margin: 0;
    padding: 0.75rem 0;
}

.breadcrumb-item a {
    color: var(--color-primario);
}

.breadcrumb-item.active {
    color: var(--color-azul);
    font-family: var(--font-demi);
}


.breadcrumb-item+.breadcrumb-item::before {
    content: "-";
    padding: 0 10px 0 0px;
    color: var(--color-primario);
}

/* --------------------------------------------------------------------------
   15. MAIN / CONTENEDORES
   -------------------------------------------------------------------------- */
main {
    min-height: 60vh;
}

.container { max-width: 1400px; margin: auto; }
.container-wrapper { max-width: 1200px; margin: auto; }


/* --------------------------------------------------------------------------
   16. FEATURES BAR / ALIADOS
   -------------------------------------------------------------------------- */
.features-bar,
.clientes-bar {
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}

/* Icono de valor — círculo con borde blanco + badge dorado */
.ico-valor {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    border: 2px solid var(--color-blanco);
    border-radius: 50%;
    font-size: 1.6rem;
    color: var(--color-blanco);
}

.ico-valor__badge {
    position: absolute;
    right: -4px;
    bottom: -4px;
    font-size: 1rem;
    color: var(--color-amarillo);
    background-color: var(--color-azul);
    border-radius: 50%;
}


/* --------------------------------------------------------------------------
   17. SECCIÓN BLOG
   -------------------------------------------------------------------------- */
.blog-card {
    border: 1px solid var(--color-gris);
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.blog-card__img {
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.blog-card:hover .blog-card__img {
    transform: scale(1.04);
}

.blog-card__body {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.blog-card__title {
    font-family: var(--font-demi);
    font-size: clamp(18px, 1.6vw, 20px);
    line-height: 1.3;
    margin-bottom: 0.75rem;
}

.blog-card__title a {
    color: inherit;
    text-decoration: none;
}

.blog-card__title a:hover {
    color: var(--color-amarillo);
}

.blog-card__excerpt {
    font-size: 1rem;
    color: var(--color-azul);
    line-height: 1.4;
    flex: 1;
}

.blog-card__link {
    display: inline-block;
    margin-top: 1rem;
    font-family: var(--font-demi);
    color: var(--color-azul);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.blog-card__link:hover {
    color: var(--color-amarillo);
}


/* --------------------------------------------------------------------------
   18. SECCIÓN SERVICIOS
   -------------------------------------------------------------------------- */
.servicios-section {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.row-servicio {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    text-decoration: none;
}

.row-servicio .img-servicio {
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 450px;
    transition: transform 0.4s ease;
}

.row-servicio:hover .img-servicio {
    transform: scale(1.04);
}

/* Overlay oscuro sobre la imagen */
.row-servicio::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.row-servicio .servicio-body {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
    padding: 1.5rem 1.25rem 1.5rem;
}

/* Líneas decorativas amarillas a los lados del bloque de texto */
.row-servicio .servicio-body::before,
.row-servicio .servicio-body::after {
    content: '';
    display: block;
    width: 30px;
    height: 3px;
    background-color: var(--color-amarillo);
    margin-bottom: 0.75rem;
}

.row-servicio .servicio-body::before {
    float: right;
    margin-bottom: 0;
    position: absolute;
    left: 0;
    bottom: calc(100% - 1.5rem - 30px);
}

.row-servicio .servicio-body::after {
    float: right;
    margin-bottom: 0;
    position: absolute;
    right: 0;
    bottom: calc(100% - 1.5rem - 30px);
}

/* Tarjeta horizontal (col-6) */
.row-servicio.middle .img-servicio {
    height: 320px;
}

.row-servicio.middle .servicio-body {
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.25rem 2.5rem;
}

.row-servicio.middle .servicio-body::before {
    position: absolute;
    left: 0px;
    bottom: calc(100% - 1.5rem);
    float: none;
    margin-bottom: -30px;
}

.row-servicio.middle .servicio-body::after {
    display: none;
}

.row-servicio p {
    color: var(--color-blanco);
    font-family: var(--font-demi);
    font-size: clamp(18px, 2vw, 22px);
    line-height: 1.2;
    text-transform: uppercase;
    margin-bottom: 0;
}

.btn-borde-blanco {
    display: inline-block;
    flex-shrink: 0;
    font-family: var(--font-demi);
    font-size: 0.875rem;
    text-transform: uppercase;
    color: var(--color-blanco);
    border: 2px solid var(--color-blanco);
    border-radius: 4px;
    padding: 0.4rem 1.25rem;
    transition: background-color 0.2s ease, color 0.2s ease;
    white-space: nowrap;
}

.row-servicio:hover .btn-borde-blanco {
    background-color: var(--color-blanco);
    color: var(--color-azul);
}

.btn-outline-right:before {
    content: '';
    background: var(--color-amarillo);
    width: 33px;
    height: 2px;
    display: block;
    position: absolute;
    right: 0;
    top: 52%;
}


/* --------------------------------------------------------------------------
   19. SECCIÓN PROYECTOS
   -------------------------------------------------------------------------- */
.proyectos-section img {
    border-radius: 4px;
}


/* --------------------------------------------------------------------------
   20. ALIADOS — Sprite logos
   -------------------------------------------------------------------------- */
.icos-aliados span.ico {
    display: inline-block;
    background: url("https://www.cristel.com.mx/images/general/fachada-de-cristal-y-canceleria-de-aluminio-sprite-logos-Cristel-Sep21.jpg") no-repeat;
    height: 77px;
}

.icos-aliados.icos-aliados-b span.ico {
    background: url("https://www.cristel.com.mx/images/sistemas-de-cristal-templado/sprite-logos-fondo-blanco-Cristel-Sep21.jpg") no-repeat;
}

.icos-aliados span.ico.ico1  { width: 135px; background-position: 0 0; }
.icos-aliados span.ico.ico2  { width: 125px; background-position: -1247px 0; }
.icos-aliados span.ico.ico3  { width: 125px; background-position: -260px 0; }
.icos-aliados span.ico.ico4  { width: 72px;  background-position: -384px 0; }
.icos-aliados span.ico.ico5  { width: 172px; background-position: -455px 0; }
.icos-aliados span.ico.ico6  { width: 145px; background-position: -630px 0; }
.icos-aliados span.ico.ico7  { width: 135px; background-position: -778px 0; }
.icos-aliados span.ico.ico8  { width: 105px; background-position: -915px 0; }
.icos-aliados span.ico.ico9  { width: 65px;  background-position: -1015px 0; }
.icos-aliados span.ico.ico10 { width: 160px; background-position: -1080px 0; }


/* --------------------------------------------------------------------------
   21. CLIENTES — Sprite logos
   -------------------------------------------------------------------------- */
.icos-clientes,
.icos-clientes-g,
.icos-aliados {
    max-width: 900px;
    width: 100%;
    margin: auto;
}

.icos-clientes li,
.icos-clientes-g li,
.icos-aliados li {
    padding: 15px;
    width: auto;
    margin: auto;
    text-align: center;
}

.icos-clientes span.ico {
    display: inline-block;
    background: url("https://www.cristel.com.mx/images/general/sprite-logos-fondo-blanco-Cristel-Oct21.jpg") no-repeat;
    height: 77px;
}

.icos-clientes-g span.ico {
    display: inline-block;
    background: url("https://www.cristel.com.mx/images/general/sprite-logos-fondo-gris-Cristel-Oct21.jpg") no-repeat;
    height: 77px;
}

.icos-clientes span.ico.ico1,  .icos-clientes-g span.ico.ico1  { width: 45px;  background-position: 0 0; }
.icos-clientes span.ico.ico2,  .icos-clientes-g span.ico.ico2  { width: 125px; background-position: -1680px 0; }
.icos-clientes span.ico.ico3,  .icos-clientes-g span.ico.ico3  { width: 85px;  background-position: -500px 0; }
.icos-clientes span.ico.ico4,  .icos-clientes-g span.ico.ico4  { width: 125px; background-position: -385px 0; }
.icos-clientes span.ico.ico5,  .icos-clientes-g span.ico.ico5  { width: 160px; background-position: -48px 0; }
.icos-clientes span.ico.ico6,  .icos-clientes-g span.ico.ico6  { width: 152px; background-position: -1815px 0; height: 55px; }
.icos-clientes span.ico.ico7,  .icos-clientes-g span.ico.ico7  { width: 136px; background-position: -1178px 0; }
.icos-clientes span.ico.ico8,  .icos-clientes-g span.ico.ico8  { width: 125px; background-position: -685px 0; }
.icos-clientes span.ico.ico9,  .icos-clientes-g span.ico.ico9  { width: 185px; background-position: -805px 0; }
.icos-clientes span.ico.ico10, .icos-clientes-g span.ico.ico10 { width: 185px; background-position: -1484px 0; }


/* --------------------------------------------------------------------------
   22. MINIATURA DE VIDEO — ícono de play centrado
   -------------------------------------------------------------------------- */
.video-thumb {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 4px;
    cursor: pointer;
}

.video-thumb img {
    transition: transform 0.4s ease;
}

.video-thumb:hover img {
    transform: scale(1.04);
}

.video-thumb__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 3rem;
    color: var(--color-blanco);
    text-shadow: 0 2px 8px rgba(var(--negro-rgb), 0.5);
    pointer-events: none;
}


/* --------------------------------------------------------------------------
   23. MODAL DE VIDEO — borde blanco + botón de cierre navy
   -------------------------------------------------------------------------- */
.modal-content-video {
    position: relative;
    border: 5px solid var(--color-blanco);
    border-radius: 4px;
    overflow: hidden;
}

.btn-close-video {
    position: absolute;
    top: 0px;
    right: 0px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 0 4px 0 4px;
    background-color: var(--color-azul);
    color: var(--color-blanco);
    font-size: 1.1rem;
    cursor: pointer;
}

.btn-close-video:hover {
    background-color: var(--color-amarillo);
    color: var(--color-azul);
}


.proyecto-card__hover:before {
    content: "";
    background: transparent;
    width: 335px;
    height: 289px;
    position: absolute;
    border: solid 1px #fff;
}

.pleca-proy {
    background: #091542ab;
    position: absolute;
    top: 20%;
    left: 0;
    padding: 2rem;
    transform: translateY(20%);
    color: white;
}

.proyecto-card span {
    max-width: 80%;
}


/* --------------------------------------------------------------------------
   24. FOOTER
   -------------------------------------------------------------------------- */
footer {
    background-color: var(--color-azul);
    color: var(--color-blanco);
}

footer a {
    color: var(--color-blanco);
    text-decoration: none;
    transition: color 0.2s ease;
}

footer a:hover {
    color: var(--color-amarillo);
}

footer p,
footer li {
    color: var(--color-blanco);
    font-size: 0.9rem;
}

footer h5,
footer h6 {
    font-family: var(--font-demi);
    color: var(--color-amarillo);
    margin-bottom: 1rem;
}

/* Línea divisoria interna del footer */
footer .border-top {
    border-color: rgba(255, 255, 255, 0.15) !important;
}

.footer-main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2.5rem 1rem;
}

.footer-logo img {
    max-width: 260px;
    width: 100%;
    height: auto;
}

.footer-social {
    display: flex;
    gap: 0.75rem;
    margin-top: 1rem;
}

.footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 1.4rem;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.footer-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-menu li {
    margin-bottom: 0.6rem;
    font-size: 0.95rem;
}

.footer-map img {
    max-width: 300px;
    width: 100%;
    height: auto;
    border-radius: 4px;
}

.footer-address {
    font-size: 0.85rem;
    line-height: 1.5;
    margin-top: 0.75rem;
    color: rgba(255,255,255,.85);
}

.footer-copyright {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem;
    border-top: 1px solid rgba(255,255,255,.15);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: rgba(255,255,255,.7);
}

.footer-copyright a {
    color: rgba(255,255,255,.7);
}

.footer-copyright a:hover {
    color: var(--color-amarillo);
}




/* --------------------------------------------------------------------------
   FORMULARIO DE COTIZACIÓN — fondo azul, estilo lp-cotizacion-proyectos
   -------------------------------------------------------------------------- */
.form-cotiza {
    background: var(--color-azul);
    padding: 40px;
    border-radius: 4px;
}

.form-cotiza label {
    color: var(--color-blanco);
    font-family: var(--font-demi);
    display: block;
    margin-bottom: 8px;
}

.form-cotiza .form-control {
    border: none;
    border-radius: 0;
    padding: 12px 15px;
    width: 100%;
    margin-bottom: 20px;
}

.form-cotiza textarea.form-control {
    min-height: 140px;
    resize: vertical;
}

.form-cotiza .form-control.requerido {
    outline: 2px solid #e2604a;
}

.form-cotiza .form-cotiza__nota {
    color: var(--color-blanco);
    text-align: center;
}

.form-cotiza .form-cotiza__nota a {
    color: var(--color-blanco);
    text-decoration: underline;
}


/* --------------------------------------------------------------------------
   19. SECCIÓN FUNCIONALIDAD (grid de iconos)
   -------------------------------------------------------------------------- */
.funcionalidad__titulo img {
    display: inline-block;
    vertical-align: middle;
}

.icos-lavista .ico {
    background: url(https://www.cristel.com.mx/img/proyectos/lavista/canceleria-de-aluminio-la-vista-sprite-iconos.png) no-repeat;
    display: inline-block;
    height: 40px;
    width: 48px;
}

.icos-lavista .ico1 { background-position: 5px center; }
.icos-lavista .ico2 { background-position: -58px center; }
.icos-lavista .ico3 { background-position: -122px center; }
.icos-lavista .ico4 { background-position: -188px center; }
.icos-lavista .ico5 { background-position: -256px center; }
.icos-lavista .ico6 { background-position: -324px center; }

.icos-funcionalidad .ico {
    background: url(https://www.cristel.com.mx/img/proyectos/residence/fachada-cristal-templado-iconos-cristel-May22.png) no-repeat;
    display: inline-block;
    height: 40px;
    width: 48px;
}

.icos-funcionalidad .ico1 { background-position: 5px center; }
.icos-funcionalidad .ico2 { background-position: -50px center; }
.icos-funcionalidad .ico3 { background-position: -104px center; }
.icos-funcionalidad .ico4 { background-position: -153px center; }
.icos-funcionalidad .ico5 { background-position: -202px center; }
.icos-funcionalidad .ico6 { background-position: -257px center; }
.icos-funcionalidad .ico7 { background-position: -310px center; }
.icos-funcionalidad .ico8 { background-position: -361px center; }
.icos-funcionalidad .ico9 { background-position: -414px center; }


/* --------------------------------------------------------------------------
   25. RESPONSIVE — todos los @media, de header a footer
   -------------------------------------------------------------------------- */

@media (max-width: 767.98px) {

    section {
            padding: 0 15px;
      }    
    /* Botones — se centran cuando ocupan todo el ancho */
    .btn-primario,
    .btn-secundario,
    .btn-gold {
        justify-content: center;
    }

    /* Header — menú del offcanvas pasa a lista con separadores */
    li.nav-link {
        max-width: 100%;
        margin: 0;
        padding: 5px 0px;
        line-height: 120%;
        border-bottom: solid 1px #f2f2f2;
    }

    .pleca-proy {
        background: transparent;
        position: relative;
        top: 0;
        left: 0;
        padding: 0;
        transform: 0;
        color: var(--color-azul);
        text-align: c;
    } 

    /* Footer — centrado en móvil */
    footer {
        text-align: center;
    }

    .form-cotiza {
        background: var(--color-azul);
        padding: 15px;
        border-radius: 4px;
    }    
}

@media (max-width: 575px) {
    /* Hero video — reduce altura y centra el título */
    .hero-video {
        height: 70vh;
        min-height: 420px;
    }

    .hero-video__titulo {
        font-size: 1.35rem;
        text-align: center;
    }

    .hero-video__titulo::after {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-stat {
        padding: 0.85rem 0.5rem;
    }

    .hero-stat__text {
        font-size: 0.78rem;
    }

    /* Servicios — reduce altura de imagen */
    .row-servicio .img-servicio {
        height: 320px;
    }

    .form-cotiza label {
        color: var(--color-blanco);
        font-family: var(--font-demi);
        display: block;
        margin-bottom: 5px;
        text-align: left;
    }    
}

/* --------------------------------------------------------------------------
   26. VALIDACIÓN DE FORMULARIOS — clase .error agregada por main.js
   -------------------------------------------------------------------------- */
.form-control.error,
.form-select.error {
    border-color: #dc3545;
    background-color: rgba(220, 53, 69, 0.06);
}

.form-control.error:focus,
.form-select.error:focus {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
}



.back-next .btn-gris {
    background: #f2f2f2;
    padding: 15px 30px;
    display: inline-flex;
    font-family: var(--font-demi);
    cursor: pointer;
    
}

.back-next .btn-azul {
    background: #091542;
    padding: 15px 30px;
    display: inline-flex;
    font-family: var(--font-demi);
    cursor: pointer;
}

.ptit {
    background: #f2f2f2;
    display: block;
    width: 100%;
    height: 10px;
    border-radius: 10px;
    margin-bottom: 50px;
    position: relative;
}

.ptit.active {
    background: #091542;
}

.ptit.active:after {
    content: "";
    width: 0px;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 20px solid #091542;
    position: absolute;
    bottom: -20px;
    left: 47%;
}
.box-proyecto {
    background: #F4EFEF;
    display: inline-flex;
    width: 290px;
    height: 115px;
    align-items: center;
    justify-content: center;
    padding: 0 25px;
    margin: 10px;
    line-height: 150%;
    font-weight: bold;
    align-items: center;
    border: solid 2px #F4EFEF;
    position: relative;
    cursor: pointer;
}

.box-proyecto.active {
    border: solid 2px var(--azul);
    background: white;
}

.box-servicio .bgprimario {
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: 290px;
    align-items: center;
    height: 75px;
    line-height: 100%;
}

.box-servicio {
    position: relative;
    cursor: pointer;
}


.box-servicio:after {
    content: "";
    display: block;
    width: 35px;
    height: 35px;
    background: white;
    position: absolute;
    top: 0;
    right: 0;
    border: solid 2px;
}

.box-servicio.active:after {
    background-image: url(https://www.cristel.com.mx/images/cotiza/ic_check_24px.png);
    background-repeat: no-repeat;
    top: 0px;
    padding: -4px 0;
    background-position: center;
}

.box-proyecto.active:after {
    content: "";
    background-image: url(https://www.cristel.com.mx/images/cotiza/check-icon.png);
    size: bo;
    width: 36px;
    height: 36px;
    position: absolute;
    right: -13px;
    top: -17px;
}


select#monto {
    width: 240px;
    padding: 10px 5px;
}

.tablas table {
    width: 95%;
    margin: 35px auto 50px;
}

.tablas table td {
    border: solid 1px;
    padding: 15px 15px;
    vertical-align: middle;
    font-size: 18px;
   font-family: var(--font-demi);
}
.label-inv {
    display: block;
    text-align: left;
    max-width: 233px;
    margin: 14px auto;
   font-family: var(--font-demi);
}

.require.error::placeholder {
    color: red;
}
.require.error {
    border: solid 2px red;
}

div#paso-2 .hoja-900 {
    box-shadow: 0px 0px 11px 4px #e2e2e2;
    padding: 45px 10px;
    box-sizing: border-box;
}

.fieldset label.btncheck {
    border: solid 3px #E2BA41;
    text-align: center;
    padding: 10px 0;
    max-width: 100%;
    background: #F0DC9F;
    color: var(--azul);
    font-weight: 800;
    cursor: pointer;
}

.fieldset label.btncheck.active {
    /*background: white;*/
    color: #091542;
    border: solid 3px #E2BA41;
    position: relative;
  }

  .fieldset label.btncheck.active:after {
      content: url(https://www.cristel.com.mx/images/cotiza/palomita.png);
      position: absolute;
      right: -9px;
      top: -11px;
  }

  .rates-error {
      border: solid 1px red;
      padding: 10px 0 3px;
  }

.galeria-proyecto .slick-next {
    right: 10px;
}

.galeria-proyecto .slick-prev {
    left: 10px;
    z-index: 1;
}

.pleca-h1 {
    color: white;
    background: var(--azul);
    display: inline-block;
    padding: 8px 25px 5px;
}  

li.nav-item.item-hover {
    position: relative;
}




li.nav-item.item-hover ul li {
    margin-bottom: 10px;
}


.nav-item.item-hover:hover ul {
  display: block;
}

.nav-item.item-hover ul {
    display: none;
    position: absolute;
    background: #ffffff;
    z-index: 1;
    padding: 0;
    box-shadow: 1px 2px 5px #a5a5a5;
    max-width: 260px;
    width: 100%;
}

li.nav-item.item-hover {  
  background-repeat: no-repeat;
  background-position: 193px 1px;
  background-size: 16px 16px;
  padding-right: 19px;
}

li.nav-item.item-hover:before {
 content: "";
 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%238b8b8b' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E"); 
}

li.nav-item.item-hover:before {
    content: "";
    background-image: url(data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%238b8b8b' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E);
    width: 17px;
    height: 13px;
    z-index: 10;
    position: absolute;
    right: 15px;
    top: 15px;
}


.arq {
      background: url(https://www.cristel.com.mx/images/ventanas-de-lujo-para-casas/ventaneria-de-lujo-para-casas-arquitectos-Cristel-Oct21.png);
      display: block;
      width: 189px;
      height: 49px;
      margin: auto;
}

.arq.logo2 {
      background-position: -198px 0px;
      width: 180px;
      height: 65px;
}

.arq.logo3 {
      background-position: -386px 0px;
      width: 194px;
}

.arq.logo4 {
    background-position: -589px 0;
    width: 186px;
    height: 52px;
}


form#fmcotiza-pasos input, form#fmcotiza-pasos select {
    border-radius: 0px;
}

/* --------------------------------------------------------------------------
   GRILLA DE PROYECTOS (override com_content/category/blog.php)
   -------------------------------------------------------------------------- */
.proyectos-filtros .nav-link {
    color: var(--color-primario);
    font-family: var(--font-demi);
    border-radius: 25px;
    padding: 8px 20px;
    margin: 4px;
    background: transparent;
}

.proyectos-filtros .nav-link.active {
    background: transparent;
    color: var(--color-amarillo);
    text-decoration: underline;
}
.proyecto-card {
    border: 1px solid var(--color-gris);
    display: flex;
    flex-direction: column;
}

.proyecto-card__media {
    overflow: hidden;
    position: relative;
}

.proyecto-card__media img {
    display: block;
    transition: transform .35s ease;
}

.proyecto-card__hover {
    position: absolute;
    inset: 0;
   background: rgb(0 0 0 / 73%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .3s ease;
    text-align: center;
    gap: 6px;
}

.proyecto-card__media:hover .proyecto-card__hover,
.proyecto-card__media.is-hover .proyecto-card__hover {
    opacity: 1;
}

.proyecto-card__media:hover img,
.proyecto-card__media.is-hover img {
    transform: scale(1.05);
}

.proyecto-card__info .separador {
    width: 60px;
    height: 2px;
    background: var(--color-amarillo);
}

.proyecto-card__info .categoria {
    color: var(--color-primario);
}

span.circle-num {
    background: var(--color-azul);
    color: white;
    width: 28px;
    display: block;
    float: left;
    margin: 3px 9px 18px 0px;
    text-align: center;
    border-radius: 25px;
    font-size: 16px;
    padding: 2px 0;
    font-weight: bold;
}

.proyectos-filtros li.nav-item::marker {
    content: "";
}


.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    color: var(--bs-nav-pills-link-active-color);
    background-color: var(--color-azul);
    color: #fff;
}

ul.nav.nav-pills.filtros.justify-content-center.flex-wrap.gap-2.mb-5 a.nav-link {
    color: var(--color-azul);
}

a.nav-link.active {
    color: white !important;
}

@media(max-width: 700px){

  div[role='navigation'] {
    display: none;
  }  
  
  .loading-mask img {
    min-width: 200px;
  }

  .num-paso.flex {
      display: flex;
  }

  .box-servicio .bgprimario {
      margin: 0 auto 35px;
  }

  .box-servicio.active:after, .box-servicio:after {
      right: 12px;
  }

  img#img-proy {
      margin-top: 30px;
  }

  .tablas table {

      display: none;
  }

  .post-content iframe {
    width: 100%;
    height: 203px;
  }
  
   .nav-item.item-hover ul {
        position: relative;
        background: #ffffff;
        z-index: 1;
        padding: 0;
        box-shadow: 1px 2px 5px #a5a5a5;
        max-width: 100%;
        margin: auto;
    }

  li.nav-item.item-hover {
    background-image: none;
    
  } 
  
  li.nav-item.item-hover ul li a {
      font-size: 16px;
  }

  ul.nav.nav-pills.filtros li {
      padding-bottom: 10px;
  }

.form-cotiza label {
        margin-bottom: 5px;
        text-align: left;
 }  

}