/* =========================================================
   ALYRA GROUP — custom.css (LIMPIO)
   - Header negro + blanco + acento cian
   - Fix “VER CATALOGO” alineado
   - Sección #quienes (2 secciones centradas + tipografía unificada)
   ========================================================= */

:root{
  --alyra-accent: #00B1EB;     /* cian marca */
  --alyra-accent-2: #4FD6E3;   /* cian claro */
}

/* =========================================================
   HEADER (DESKTOP + MOBILE)
   ========================================================= */

#header{
  background: #0B0F14 !important;
  border-bottom: 1px solid rgba(255,255,255,.10);
}

#header .header-body{
  background: #0b0f14a0 !important;  /* opaco real */
  box-shadow: none !important;
}

/* Links del menú: blanco + hover/active cian */
#header .header-nav-main nav > ul > li > a{
  color: rgba(255,255,255,.92) !important;
  font-weight: 600;
}

#header .header-nav-main nav > ul > li > a:hover,
#header .header-nav-main nav > ul > li.active > a{
  color: var(--alyra-accent) !important;
}

/* CTA “Ver catálogo” */
#header .btn.btn-primary{
  background: linear-gradient(135deg, var(--alyra-accent), var(--alyra-accent-2)) !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: 0 10px 30px rgba(0,177,235,.30);
}

/* Hover / Focus / Active */
#header .btn.btn-primary:hover,
#header .btn.btn-primary:focus,
#header .btn.btn-primary:active{
  background: #ffffff !important; /* cian un poco más oscuro */
  color: var(--alyra-accent) !important;
  border-color: #0099cc !important;
}

/* Fix: botón dentro del menú alineado verticalmente
   (IMPORTANTE: top 15px era demasiado. Usá 0 y, si hace falta, 1–2px) */
#header #mainNav a.btn{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  padding: 10px 14px !important;
  margin: 0 !important;
  vertical-align: middle !important;
  position: relative;
  top: 15px !important; /* si lo ves apenas alto: probá 1px o 2px */
}

/* Mobile header dropdown */
@media (max-width: 991px){
  #header .header-btn-collapse-nav{
    background: rgba(255,255,255,.12) !important;
    border: 1px solid rgba(255,255,255,.35);
  }

  #header .header-btn-collapse-nav i{
    color: #fff !important;
  }

  #header .header-nav-main{
    background: #0B0F14 !important;
    border-top: 1px solid rgba(255,255,255,.10);
  }

  #header .header-nav-main nav > ul > li > a{
    border-bottom: 1px solid rgba(255,255,255,.10);
  }

  #header .header-nav-main nav > ul > li > a:hover{
    background: rgba(0,177,235,.14) !important;
  }
}

/* =========================================================
   SECCIÓN #quienes — clásico, centrado + tipografía unificada
   ========================================================= */

#quienes{
  padding-top: 10px;

  /* Sistema tipográfico SOLO para esta sección */
  --alyra-text-color: rgba(26,31,36,.82);
  --alyra-title-color: rgba(16,20,24,.92);
}

/* Títulos */
#quienes h2,
#quienes h3{
  color: var(--alyra-title-color);
  font-weight: 700;
  letter-spacing: .2px;
}

/* Texto general */
#quienes p{
  color: var(--alyra-text-color);
  font-size: 16px;
  line-height: 1.7;
}

/* Texto principal */
#quienes .alyra-text-main{
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}

/* Texto misión */
#quienes .alyra-text-mission{
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  color: rgba(26,31,36,.75);
}

/* Separador mínimo centrado */
#quienes .alyra-divider-center{
  width: 60%;
  max-width: 400px;
  height: 3px;
  background: var(--alyra-accent);
  margin: 24px auto;
  border-radius: 99px;
}

/* Neutralizar .lead heredado de Porto dentro de #quienes */
#quienes .lead{
  font-size: inherit !important;
  font-weight: inherit !important;
  color: inherit !important;
}

/* Mobile */
@media (max-width: 767px){
  #quienes p{ font-size: 16px; }
  #quienes .alyra-text-mission{ font-size: 15px; }
}


/* =========================================================
   FIX OVERLAY: que cubra 100% (solo #soluciones)
   ========================================================= */

#soluciones .thumb-info,
#soluciones .thumb-info-wrapper{
  border-radius: 16px;
  overflow: hidden;
}

/* El wrapper debe ser el "contenedor" real */
#soluciones .thumb-info-wrapper{
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: 500px;                 /* desktop (tu valor) */
  background: #0b0f14;
}

/* Imagen cover real */
#soluciones .thumb-info-wrapper > img{
  display: block !important;
  width: 100% !important;
  height: 100% !important;       /* pisa img-responsive */
  object-fit: cover !important;
  max-width: none !important;
}

/* Overlay que cubre todo SI o SI */
#soluciones .thumb-info-title{
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;

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

  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;

  z-index: 2 !important;

  background: rgba(0,0,0,.40);   /* negro transparente */
}

/* Texto centrado */
#soluciones .alyra-tile-title{
  position: relative;
  z-index: 3;
  color: #fff;
  font-weight: 800;
  letter-spacing: .06em;
  font-size: 22px;
  text-transform: uppercase;
  text-align: center;
  padding: 10px 14px;
}

#soluciones .alyra-tile-title:hover{
  background: rgb(255, 255, 255);
  color: #00B1EB;
}

/* Hover sutil (opcional, lo dejo porque suma) */
#soluciones .thumb-info-wrapper > img{
  transform: scale(1.02);
  transition: transform .35s ease, filter .35s ease;
  filter: contrast(1.05) saturate(1.05);
}

#soluciones .thumb-info:hover .thumb-info-wrapper > img{
  transform: scale(1.06);
}

#soluciones .thumb-info:hover .thumb-info-title{
  background: rgba(0,0,0,.50);
}

/* Tablet */
@media (max-width: 1199px) and (min-width: 768px){
  #soluciones .thumb-info-wrapper{
    height: 320px !important;
  }

  #soluciones .alyra-tile-title{
    font-size: 21px;
  }
}


/* Mobile */
@media (max-width: 767px){
  #soluciones .thumb-info-wrapper{ height: 200px !important; }
  #soluciones .col-md-4{ margin-bottom: 16px; }
  #soluciones .alyra-tile-title{ font-size: 20px; }
}


/* =========================================================
   VALORES — centrar ícono + texto juntos
   ========================================================= */

#valores ul.list-icons{
  list-style: none;
  padding: 0;
  margin: 0;
  
}

/* Cada item centrado como bloque */
#valores ul.list-icons li{
  position: relative;
  display: inline-flex;          /* clave */
  align-items: center;
  gap: 12px;
  text-align: center;

  margin: 10px auto;             /* centra el bloque */
  padding-left: 0;               /* anulamos el espacio del icono de Porto */
}

/* Ícono check */
#valores ul.list-icons li i{
  position: static !important;   /* mata el absolute de Porto */
  margin: 0;
  color: #00b1eb;                /* tu cian */
  font-size: 18px;
  margin-bottom: 25px;
}

/* Texto */
#valores ul.list-icons li{
  color: rgba(26,31,36,.78);
  font-size: 16px;
  line-height: 1.6;
  max-width: 700px;              /* evita líneas eternas */
}

/* =========================================================
   FOOTER ALYRA — limpio, sin redundancias
   ========================================================= */

.alyra-footer{
  background: #0B0F14;
  color: rgba(255,255,255,.74);
  border-top: 1px solid rgba(255,255,255,.08);
}

.alyra-footer-top{
  padding: 0px 0 26px 0;
}

.alyra-footer-logo{
  max-height: 42px;
  opacity: .95;
  margin-bottom: 12px;
}

.alyra-footer-tagline{
  color: rgba(255,255,255,.80);
  line-height: 1.7;
  max-width: 62ch;
}


/* Título columna */
.alyra-footer-title{
  color: var(--alyra-accent);
  font-weight: 800;
  letter-spacing: .04em;
  margin: 4px 0 12px 0;
}

/* Contacto */
.alyra-footer-contact{
  list-style: none;
  padding: 0;
  margin: 0;
}

.alyra-footer-contact li{
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 12px;
  line-height: 1.6;
}

.alyra-footer-contact i{
  color: #00B1EB;
  margin-top: 3px;
  min-width: 16px;
}

.alyra-footer a{
  color: rgba(255,255,255,.92);
  text-decoration: none;
}

.alyra-footer a:hover{
  color: #00B1EB !important;
}

/* Barra inferior */
.alyra-footer-bottom{
  background: rgba(0,0,0,.35);
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 14px 0;
}

.alyra-footer-copy{
  color: rgba(255,255,255,.58);
  font-size: 13px;
  text-align: center;
}



/* Mobile: TODO centrado */
@media (max-width: 767px){

  .alyra-footer-top{
    text-align: center;
  }


  .alyra-footer-logo-link{
    display: inline-block;
  }


  .alyra-footer-tagline{
    margin-left: auto;
    margin-right: auto;
  }


  .alyra-footer-contact{
    display: inline-block;
    text-align: center;
    margin-top: 10px;
  }


  .alyra-footer-title{
    text-align: center;
  }
}

/* =========================================================
   WhatsApp Floating Button
   ========================================================= */

.whatsapp-float{
  position: fixed;
  right: 48px;
  bottom: 48px;
  z-index: 9999;

  width: 54px;
  height: 54px;
  border-radius: 999px;

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

  background: #25D366;
  color: #ffffff;

  box-shadow: 0 10px 25px rgba(0,0,0,.25);
  text-decoration: none;

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

.whatsapp-float i{
  font-size: 28px;
  line-height: 1;
}

/* Hover desktop */
.whatsapp-float:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(0,0,0,.30);
  color: #ffffff;
}

/* Mobile: un poco más chico */
@media (max-width: 767px){
  .whatsapp-float{
    width: 50px;
    height: 50px;
    right: 14px;
    bottom: 14px;
  }

  .whatsapp-float i{
    font-size: 26px;
  }
}

@keyframes whatsapp-pulse{
  0%{ box-shadow: 0 0 0 0 rgba(37,211,102,.45); }
  70%{ box-shadow: 0 0 0 12px rgba(37,211,102,0); }
  100%{ box-shadow: 0 0 0 0 rgba(37,211,102,0); }
}

.whatsapp-float{
  animation: whatsapp-pulse 3s infinite;
}

/* Quitar subrayado SOLO del botón WhatsApp */
.whatsapp-float,
.whatsapp-float:hover,
.whatsapp-float:focus,
.whatsapp-float:active{
  text-decoration: none !important;
}




section{
  scroll-margin-top: 120px; /* altura del header */
}

#quienes{
  scroll-margin-top: 120px; /* ajustá según altura real del header */
}


.alyra-map-section {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column; /* Por defecto uno abajo del otro */
}

#map-canvas {
    width: 100%;
    height: 600px;
}

.alyra-map-info-box {
    background: #ffffff;
    color: #333;
    padding: 30px;
    border-left: 5px solid var(--alyra-accent);
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    z-index: 10;
}

/* --- COMPUTADORAS --- */
@media (min-width: 992px) {
    .alyra-map-info-box {
        position: absolute;
        top: 50px;
        left: 80px;
        max-width: 350px;
        text-align: left; /* Alineado a la izquierda en PC */
    }
}

/* --- MÓVILES --- */
@media (max-width: 991px) {
    .alyra-map-section {
        flex-direction: column; /* Info primero, mapa después */
    }
    
    .alyra-map-info-box {
        text-align: center; /* TODO CENTRADO EN MÓVIL */
        border-left: none;
        border-bottom: 5px solid var(--alyra-accent); /* El detalle dorado pasa abajo */
        padding: 40px 20px;
    }

    .alyra-contact-data p {
        display: block;
        margin: 10px 0;
    }

    #map-canvas {
        height: 300px; /* Mapa más compacto para no scrollear tanto */
    }
}


/* Solo para este pack (NO toca rev-slidebg) */
.rev_slider_wrapper .alyra-pack img{
  width: 100% !important;
  max-width: 92vw !important;
  height: auto !important;
}

@keyframes alyraBreathe {
  0%   { transform: translateY(0) scale(1); }
  50%  { transform: translateY(-6px) scale(1.02); }
  100% { transform: translateY(0) scale(1); }
}

/* Animamos el wrapper interno (no el img que RevSlider manipula) */
#alyraPack .alyra-pack-inner{
  animation: alyraBreathe 4s ease-in-out infinite !important;
  transform-origin: center center;
  will-change: transform;
}


.row-centered {
    display: flex;
    align-items: center;
    flex-wrap: wrap; /* Importante para que en celular se sigan viendo uno abajo del otro */
    margin: 30px;
}

/* Clase para aplicar a las imágenes */
.img-breathe {
    /* Nombre de la animación | duración | tipo de movimiento | repetición */
    animation: alyraBreathe 4s ease-in-out infinite;
    transform-origin: center center; /* Asegura que crezca desde el centro */
}

@media (max-width: 991px) {
    /* Estado ACTIVO en el menú móvil */
    #header .header-nav-main nav > ul > li.active > a {
        background-color: #ffffff !important; /* Fondo blanco para que resalte */
        color: #0088cc !important; /* Texto azul (el color de tu marca) */
        font-weight: 800 !important;
        border-radius: 5px;
        margin: 5px 0;
    }

    /* Ajuste de los iconos dentro del link activo */
    #header .header-nav-main nav > ul > li.active > a i {
        color: #0088cc !important;
    }
}

@media (max-width: 767px) {
    section.section {
        padding: 40px 0 !important; /* Da un poco más de aire entre secciones */
    }
}

@media (max-width: 991px) {
    /* Forzamos que el fondo del ítem activo sea blanco y el texto azul */
    #header .header-nav-main nav > ul > li.active > a,
    #header .header-nav-main nav > ul > li.active > a:hover,
    #header .header-nav-main nav > ul > li.active > a:focus {
        background-color: #ffffff !important;
        color: #0088cc !important;
        fill: #0088cc !important; /* Por si usas iconos SVG */
    }

    /* Aseguramos que el resto de los items sean legibles (Blanco sobre Azul) */
    #header .header-nav-main nav > ul > li > a {
        color: #ffffff !important;
    }
}



/* Contenedor de la cuadrícula */
.films-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

/* La Tarjeta Blanca */
.film-card {
    background: #ffffff;
    border: 1px solid #e1e1e1;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    padding: 35px;
    text-align: center;
    width: 100%;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease;
}

.film-card:hover {
    transform: translateY(-5px);
}

/* Iconos */
.film-icon {
    color: #00B1EB;
    font-size: 50px;
    margin-bottom: 25px;
}

/* Títulos y subtítulos */
.film-title-container {
    margin-bottom: 15px;
    margin-top: 15px;
    min-height: 80px;
}

.film-main-title {
    font-weight: 800;
    font-size: 22px;
    color: #222;
    margin-bottom: 5px;
    text-transform: uppercase;
}

.film-subtitle {
    font-weight: 600;
    font-size: 16px;
    color: #444;
    text-transform: uppercase;
   margin-bottom: 5px;
}

/* Cuerpo de texto (el que estira la caja) */
.film-description {
    font-size: 14px;
    color: #666;
    line-height: 1.7;
    flex-grow: 1; 
}

/* Sección inferior de Recomendados */
.film-footer {
    border-top: 1px solid #eee;
    padding-top: 20px;
}

.recommended-label {
    font-weight: 700;
    font-size: 12px;
    color: #333;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Etiquetas (Badges) */
.film-badges-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.film-badge {
    background: #777;
    color: #fff;
    font-size: 11px;
    padding: 6px 12px;
    border-radius: 20px;
    white-space: normal; /* Permite que el texto largo salte de línea si es necesario */
    display: inline-block;
}

.film-card .badge {
    border-radius: 15px;
    font-size: 10px;
    letter-spacing: 0.5px;
    background-color: var(--alyra-accent) !important;
}

/* Forzar que las columnas de la fila midan lo mismo */
.force-equal-height {
    display: flex !important;
    flex-wrap: wrap !important;
}

.force-equal-height > [class*='col-'] {
    display: flex !important;
}

/* Asegurar que la tarjeta ocupe el 100% de la altura de la columna */
.film-card {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    width: 100% !important;
    margin-top: 20px;
}

/* La descripción se estira para empujar el footer al fondo */
.film-description {
    flex-grow: 1 !important;
}

/* Mejor distribución del texto en Valores */
#valores ul.list li p {
    max-width: 480px;      /* controla el corte de línea */
    margin: 0 auto !important;
    line-height: 1.6;      /* más aire entre líneas */
    text-align: left;    /* mantiene look institucional */
}

@media (max-width: 767px) {
    #valores ul.list li p {
        max-width: 100%;
        padding: 0 14px;    /* aire lateral */
        font-size: 14px;   /* más cómodo en móvil */
        line-height: 1.55;
    }
}

/* Quitar fondo blanco en heading con línea */
.heading-middle-border .heading-tag,
.heading-middle-border .heading-tag strong {
    background: #f4f4f4 !important;
}



/* Micro-ficha integrada al bloque de texto (no “pie de página”) */
.mini-ficha{
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid rgba(0,0,0,.10);
  display: flex;
  align-items: baseline;
  gap: 12px;
  max-width: 520px;          /* CLAVE: no cruza toda la pantalla */
}

.mini-ficha__label{
  font-size: 11px;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: rgba(0,0,0,.55);
  white-space: nowrap;
}

.mini-ficha__value{
  font-size: 13px;
  color: rgba(0,0,0,.70);
}

/* Mobile */
@media (max-width: 767px){
  .mini-ficha{
    max-width: 100%;
    flex-direction: column;
    gap: 6px;
  }
}

.section .feature-box.feature-box-style-2 h4{
    font-size: 16px;
    line-height: 1.3;
    letter-spacing: .02em;
    font-weight: bold;
}

.section .feature-box.feature-box-style-2 p{
    line-height: 1.3;   
    margin-bottom: 0px;
}

.section .feature-box.feature-box-style-2 {
  background-color: rgb(248, 248, 248);
  padding: 10px;
  border-radius: 10px;
}

.col-pad-8{
padding: 8px;
}

/* ===== TIPOS DE FILM (B2B) ===== */
.title-b2b{
  display:inline-block;
  background: transparent !important;
  color:#00B1EB;
  font-size: 20pt;
}

.b2b-lines{
  margin-top: 10px;
}

.b2b-line{
  padding: 22px 0;
  border-bottom: 1px solid rgba(0,0,0,.08);
}

.b2b-line-last{
  border-bottom: 0;
}

.b2b-line-img{
  width: 140px;
  height: auto;
  border-radius: 6px;
}

.b2b-line-title{
  margin: 0 0 6px 0;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 16px;
}

.b2b-line-subtitle{
  margin-bottom: 10px;
  opacity: .7;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 12px;
}

.b2b-line-desc{
  margin: 0 0 12px 0;
  opacity: .85;
  line-height: 1.55;
}

.b2b-line-use{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.b2b-label{
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .6;
  margin-right: 6px;
}

.b2b-badge{
  font-size: 10px;
  padding: 6px 8px;
}

/* Tooltip IR (para que no te rompa línea y sea legible) */
.ir-info{
  display: inline-block;
  position: relative;
  margin-left: 4px;
  cursor: help;
  color: #00B1EB;
  font-weight: 700;
  line-height: 1;
}



/* Tooltip IR */
.ir-info {
    position: relative;
    display: inline-block;
    margin-left: 4px;
    cursor: pointer;
    color: #00B1EB; /* color marca */
    font-weight: 600;
}

.ir-tooltip {
    position: absolute;
    bottom: 130%;
    left: 50%;
    transform: translateX(-50%);
    background: #111;
    color: #fff;
    padding: 8px 10px;
    font-size: 12px;
    line-height: 1.4;
    border-radius: 4px;
    white-space: normal;
    width: 240px;
    text-align: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 10;
}

.ir-info:hover .ir-tooltip {
    opacity: 1;
    display:block;
}

/* Mobile */
@media (max-width: 767px){
  .b2b-line-img{ width: 110px; }
  .b2b-line-title{ font-size: 15px; }
  .ir-tooltip{ width: 220px; }
}



/* Imagen encabezado Quienes Somos */
.alyra-about-hero{
    width: 100%;
    border-radius: 12px;
    box-shadow: 0 10px 24px rgba(0,0,0,.10);
    max-width: 600px;

}