:root {
    --gris-claro: #BDDBDD;
    --gris-medio: #755775;
    --turquesa: #5FCBC6;
    --gris-oscuro: #424242;
    --casi-negro: #212121;
    --blanco: #ffffff;
    --casi-blanco: #eeeeed;

    /* mías (apuntando a las tuyas) */
  --teal: var(--turquesa);
  --teal-700: #36a6a1;
  --bg: #f4f6f6;
  --dark: var(--casi-negro);
  --muted: #5b6670;
  --radius: 18px;
  --salmon: #e38b81;
}

body {}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Bebas Neue', sans-serif;
    font-weight: 100;
}

h2 {
    font-size: 3rem;
    text-align: center;
}

body nav ul a {
    color: #333;
}

body nav ul a:hover {
    color: #333;
}

nav {
    background-color: transparent !important;
    box-shadow: none;
    /* Opcional: elimina la sombra si existe */
}

nav .brand-logo {
    padding-left: 1rem;
}

body.bodyHome {
    background-image: url('/Imagenes/fondo-1-1.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
    background-attachment: fixed;
}

/* Homme */
.seccion-demos {
    padding: 0;
}

.fila-demos {
    margin: 0;
}

.columna-1 {
    padding: 0;
}

.columna-imagen {
    padding: 0;
}

.columna-imagen img {
    display: block;
    height: auto;
    max-height: 548px;
    margin: 0 auto;
}

.columna-audio {
    padding: 2rem 1rem;
}

.columna-formulario {
    padding: 2rem 1rem;
}

.alto {
    height: 25px;
}

/* Audios */
.div_audio {
    width: 100%;
    max-width: 350px;
    margin: 1rem auto;
    font-family: 'Segoe UI', sans-serif;
}

.div_audio_titulo {
    font-size: 1.2rem;
    font-weight: 100;
    margin-bottom: 0.5rem;
    color: var(--casi-negro);
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    padding-left: 2rem;
    /* ✅ nuevo */
}

.div_audio_contenedor {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.div_audio_play {
    min-width: 45px;
    min-height: 45px;
    background-color: var(--salmon);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.div_audio.activo .div_audio_play {
    background-color: #333;
}

.boton_audio {
    width: 35px;
    /* ✅ más grande */
    height: 35px;
    cursor: pointer;
}

.div_audio_barra_progresion {
    flex-grow: 1;
    height: 13px;
    background-color: var(--gris-oscuro);
    border-radius: 3px;
    overflow: hidden;
}

.progresion {
    width: 0%;
    height: 100%;
    background-color: var(--turquesa);
    transition: width 0.2s ease;
}

.div_audio_descarga {
    min-width: 40px;
    /* ✅ más grande */
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.div_audio_descarga img {
    width: 24px;
    /* ✅ más grande */
    height: 24px;
    cursor: pointer;
}

/* Formulario */
#form_div_nuevo {
    width: 100%;
    max-width: 35rem;
    border-radius: 2rem;
    background-color: var(--gris-claro);
    padding: 2rem;
    color: var(--casi-negro);
    /* 🔥 texto por defecto */
}

.form_rojo_div_input {
    padding: 1rem .8rem;
    width: 100%;
    background-color: var(--blanco);
    border: none;
    border-radius: 1rem;
    font-size: 1rem;
    color: var(--casi-negro);
    /* ✅ visible */
    box-sizing: border-box;
}

select.form_rojo_div_input {
    padding: .8rem 2.5rem 0.8rem 1rem;
    /* top right bottom left */
    background-color: var(--blanco);
    color: var(--casi-negro);
    border: none;
    border-radius: 1rem;
    font-size: 1rem;
}



.form_rojo_div_input::placeholder {
    color: var(--gris-oscuro);
    opacity: 0.8;
}

.form_rojo_div_input:focus {
    outline: 2px solid var(--turquesa);
}

.form_rojo_div_boton_enviar {
    background-color: var(--turquesa);
    padding: 1.2rem 2rem;
    margin-top: 1rem;
    text-align: center;
    color: var(--casi-negro);
    font-weight: bold;
    border-radius: 1rem;
    cursor: pointer;
}

.form_rojo_div_boton_enviar:hover {
    background-color: var(--gris-medio);
    color: var(--blanco);
}

.form_check_texto {
    color: var(--casi-negro);
    font-size: 1rem;
    padding: 1.5rem 0;
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.form_rojo_div_boton_check {
    border: 1px solid var(--gris-oscuro);
    border-radius: 0.3rem;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--blanco);
    cursor: pointer;
}

.form_rojo_div_boton_check img {
    width: 1.2rem;
    display: block;
}

/* Ajustes visuales en mobile */
@media (max-width: 599px) {
    form .row {
        margin-bottom: 0;
    }

    form .row>div {
        margin-bottom: 2rem;
    }
}

/* Formulario fin */

/* Inicio home  casi-blanco */
.inicio_home {
    background-color: var(--casi-blanco);
    padding: 3rem 0;
}

.inicio_home h1 {}

.inicio_home h1 small {
    display: block;
}

/* Inicio home  casi-blanco fin */
/* home inicio 4 */
.inicio_home_img img {
    width: 100%;
    max-width: 150px;
    margin: 0 auto;
    display: block;
}

/* footer */
.footer_custom {
    background-color: var(--turquesa);
    /* Cambiado para armonizar */
    color: var(--blanco);
    padding: 3rem 0 0 0;
}

.footer_custom h5,
.footer_custom .footer_title {
    color: var(--blanco);
    font-size: 1.4rem;
    font-weight: 100;
    margin-top: 1rem;
}

.footer_custom ul {
    list-style: none;
    padding-left: 0;
}

.footer_custom a {
    color: ffffff;
    text-decoration: none;
    font-size: 1rem;
    display: block;
    margin-bottom: 0.5rem;
}

.footer_custom a:hover {
    color: var(--casi-negro);
}

.footer_logo {
    max-width: 80px;
    margin-top: 1rem;
    opacity: 0.8;
}

.footer_copy {
    background-color: var(--casi-negro);
    /* más limpio y elegante */
    padding: 1rem 0;
    font-size: 0.9rem;
    color: var(--gris-claro);
}

/* footer fin */











.div_abajo_whatsapp {
    color: #fff;
    width: 230px;
    height: 32px;
    padding: 0px;
    /*/ position:absolute; El div será ubicado con relación a la pantalla*/
    position: fixed;
    left: 5px;
    /*A la derecha deje un espacio de 0px*/
    right: 0px;
    /*A la izquierda deje un espacio de 0px*/
    bottom: 15px;
    /*Abajo deje un espacio de 0px*/
    z-index: 5;
}

.div_abajo_whatsapp_boton {
    margin: 0px auto;
    height: 70px;
}

.div_abajo_whatsapp_boton img {
    height: 60px;
    vertical-align: -webkit-baseline-middle;
}

.div_abajo_whatsapp-m {
    width: 168px;
    height: 66px;
    position: fixed;
    right: -10px;
    /*A la izquierda deje un espacio de 0px*/
    bottom: 50%;
    /*Abajo deje un espacio de 0px*/
    z-index: 5;
}

.div_abajo_whatsapp-m:hover {
    right: 0px;
}

.page-footer .footer-copyright {
    background-color: #162E2F;
}

.img-home {
    width: 100%;
    max-width: 10rem;
    margin: 0 auto;
    display: block;
}

footer a {
    color: #fff;
}

footer a:hover {
    color: #333;
}

footer h5 {
    font-size: 1.4rem;
    margin-bottom: 0px;
}

footer ul {
    margin-top: 05px;
}


.blue.darken-2.menu {
    background-color: #91816d !important;
}

.div_titulo {
    background-color: #3f3220;
}

.div_titulo .row {
    margin-bottom: 0;
}

    {
    color: #fff;
    font-size: 2rem;
    text-align: center;
}

.div_titulo h1 {
    color: #fff;
    font-size: 2rem;
    text-align: center;
    margin-bottom: 0;
}

.div_titulo p {
    color: #fff;
    font-size: 1.3rem;
    text-align: center;
    width: 100%;
    max-width: 80rem;
    display: block;
    margin: .3rem auto 2rem auto;
}

.cuerpo h2 {
    width: 100%;
    max-width: 60rem;
    margin-left: auto;
    margin-right: auto;
}

.cuerpo p {
    font-size: 1.25rem;
    line-height: 2rem;
    text-align: justify;
}

i.left {
    margin-right: 8px;
}

/* quienes somos */
.integrantes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.integrante {
    background-color: #ffffff;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    text-align: center;
}

@media (max-width: 600px) {
    .integrante {
        margin-bottom: 30px;
    }
}

.sidenav-trigger .menuPersonalizado {
    font-size: 3rem;
}

.menuPersonalizado {
    color: #424242;

}

/* Nuevos estilos */
.titulo-hero {
    margin: .2rem 0 0 0;
    line-height: 1.2;
    font-weight: 800;
    font-size: 2rem;
    /* tamaño base en móvil */
}

.titulo-hero small.subtitulo-hero {
    display: block;
    font-weight: 100;
    font-size: 1.6rem;
    /* subtítulo más notorio */
    opacity: .85;
    margin: 0;
}
.inicio_home h2 {
    font-size: 1.8rem;
    text-align: left;
    margin: 0;
    color: var(--turquesa);
}
.lead-hero {
    font-size: 1.2rem;
    /* sube el cuerpo del texto */
    line-height: 1.6;
    /* espacio cómodo entre líneas */
    margin: .8rem 0 1.2rem;
    color: #333;
    /* más contraste si usas gris claro */
}

.inicio_home_img p {
    margin-top: .6rem;
    font-size: 1.05rem;
    line-height: 1.4;
}

@media (min-width: 992px) {
    .titulo-hero {
        font-size: 2.4rem;
        margin-bottom: 0;
        /* más grande en escritorio */
    }

    .titulo-hero small.subtitulo-hero {
        font-size: 1.3rem;
        margin: 0;
    }

    .lead-hero {
        font-size: 1.25rem;
        /* ~20px en escritorio */
    }
}

.mt-3 {
    margin-top: 3rem;
}

.p-3 {
    padding-top: 3rem;
    padding-bottom: 5rem;
}

.py-3 {
    padding-top: 3rem;
}

.mt-5 {
    margin-top: 5rem;
}

.py-5 {
    padding-top: 5rem;
}

.ventaja-item h2 {
    font-size: 1.85rem;
    color: #5fcbc6;
    font-weight: lighter;
}

.ventaja-texto {
    margin: 0;
    font-size: 1.2rem;
    line-height: 1.8rem;
    color: #424242;
}

.container .row_0 {
    margin-bottom: 0;
}

.icono-servicio {
    width: 130px;
    height: 130px;
}

.servicio-titulo {
    margin-top: 1rem;
    margin-bottom: 1rem;
    font-size: 1.85rem;
    text-align: center;
}

.servicio-texto {
    font-size: 1.2rem;
    line-height: 2rem;
    margin-top: 0;
}
.servicios-lead {
  font-size: 1.2rem;
}
.pastel {
    background: #fff;
  padding: 60px 0;
}
.pastel h2 {
    padding: 0;
    margin: 0;
}
.pastel p {
    font-size: 1.2rem;
}
/* ====== TESTIMONIOS: tipografía y espaciado más grande y legible ====== */
.testimonios-section{
  background: var(--salmon);
  padding: 60px 0;
}
.testimonios-h2{
  font-weight: 800;
  letter-spacing: .08em;
  color: #fff;
}

.testimonios-lead{
  color: rgba(255,255,255,.9);
  max-width: 760px;
  margin: 0 auto 12px;
}

.carousel{
  height: 420px;
}

.carousel-item{
  width: 100%;
}

.testimonio-card{
  background: #fff;
  border-radius: 18px;
  padding: 26px 22px;
  max-width: 520px;
  margin: 0 auto;
  box-shadow: 0 18px 40px rgba(0,0,0,.18);
}

.testimonio-card img{
  width: 96px;
  height: 96px;
  object-fit: contain;
  margin-bottom: 14px;
}

.testimonio-card blockquote{
  font-style: italic;
  color: #555;
  margin: 14px 0;
}

.testimonio-card strong{
  display: block;
  margin-top: 10px;
  color: #222;
}

.testimonio-card small{
  color: #777;
}

.rating{
  margin-top: 6px;
  color: #f4b400;
}

/* Mobile */
@media (max-width: 600px){
  .carousel{
    height: 460px;
  }
}
/* ===== FIX Materialize Carousel Slider ===== */
#testimoniosSlider.carousel.carousel-slider{
  height: auto !important; /* deja que el contenido mande */
  min-height: 460px;       /* ajusta según tu card */
  overflow: visible;       /* evita recortes feos */
}

/* Cada slide debe tener alto consistente */
#testimoniosSlider .carousel-item{
  height: 100% !important;
  min-height: 460px;
  display: flex !important;
  align-items: center;        /* centra vertical */
  justify-content: center;    /* centra horizontal */
  padding: 10px 0;            /* respira arriba/abajo */
  box-sizing: border-box;
}

/* Card centrada y sin “brincos” */
#testimoniosSlider .testimonio-card{
  width: min(520px, 92vw);
  margin: 0 auto;
}

/* Indicadores (puntitos) más visibles sobre salmón */
#testimoniosSlider .indicators{
  bottom: -14px;  /* baja los puntitos para que no estorben */
}
#testimoniosSlider .indicators .indicator-item{
  background-color: rgba(255,255,255,.45);
}
#testimoniosSlider .indicators .indicator-item.active{
  background-color: #fff;
}

/* Mobile: un poco más alto si el texto crece */
@media (max-width: 600px){
  #testimoniosSlider.carousel.carousel-slider{
    min-height: 520px;
  }
  #testimoniosSlider .carousel-item{
    min-height: 520px;
    padding: 18px 0;
  }
}
.testimonios-lead{
  font-size: 1.2rem;
  line-height: 1.7;
}

blockquote {
    border-left: 5px solid #5fcbc6;
}
.btn-turquesa {
    background-color: var(--turquesa);
    color: #ffffff;
    border-radius: 999px;
}
.btn-gris {
    background-color: #dddddd;
    border-radius: 999px;
}
.btn-oscuro {
    background-color: #333;
    border-radius: 999px;
}
.hero-cta .btn-large {
    margin-right: .5rem;
    margin-bottom: .5rem;
    font-size: 1.1rem;
    /* botones más legibles */
    padding: 0 2rem;
}

.btn-salmon {
    background-color: var(--salmon);
    color: #ffffff;
    border-radius: 999px;
    font-size: 1.2rem;
}
.btn-salmon:hover {
    background-color: var(--casi-negro);
}
.hero-cta{
  display: flex;
  justify-content: center; /* ← centra en horizontal */
  align-items: center;
  gap: 18px;               /* separación entre botones */
  flex-wrap: wrap;         /* que bajen en móvil si hace falta */
  margin-top: 16px;
}

/* opcional: en móvil que cada botón ocupe todo el ancho */
@media (max-width: 600px){
  .hero-cta a{
    width: 100%;
    text-align: center;
  }
}

.ventajas-section{
  position: relative;
  overflow: hidden;
}

.ventajas-section::before{
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);          /* centrado vertical real */
  width: min(42vw, 520px);
  height: min(42vw, 520px);
 /* background: url("/Imagenes/fondo-pluma.png") no-repeat left center / contain; */
  opacity: .9;                           /* ajusta si la quieres más tenue */
  pointer-events: none;
  z-index: 0;
}

.ventajas-section .container{ position: relative; z-index: 1; }

@media (max-width: 600px){
  .ventajas-section::before{
    width: 60vw;
    left: -10vw;                         /* la “saca” un poco para no tapar texto */
    opacity: .5;                         /* o hazla display:none; si prefieres */
  }
}

.servicios-section-pagina .icono-servicio {
    width: 100px;
}
.servicios-section-pagina .servicio-titulo {
    font-size: 1.6rem;
}


/* ================================
   Sección Conmutadores
   ================================ */

   /* fondo como ya lo tenías */
.fondo-conmutadores{
  position: relative;
  overflow: hidden;
  background-image:
    url("/Imagenes/fondo-conmutadores.jpg"),
    radial-gradient(1000px 500px at -10% -20%, #ffffff 0%, rgba(255,255,255,0) 60%),
    radial-gradient(900px 500px at 120% 10%, #ffffff 0%, rgba(255,255,255,0) 60%),
    radial-gradient(600px 300px at 50% 120%, #ffffff 0%, rgba(255,255,255,0) 60%);
  background-size: cover, auto, auto, auto;
  background-position: center center;
  background-repeat: no-repeat;
  background-color: #f4f6f6;
  min-height: 400px;
}
.fondo-conmutadores.fondo-contacto {
    background-image: url("/Imagenes/fondo-contacto.jpg");
}
/* fondo igual que antes */
/* === fondo === */
/* fondo como ya lo tenías */



/* ====== COLUMNA IZQUIERDA ====== */
.bloque-izq{
  max-width: 400px;
  text-align: center;              /* ← centramos todo */
  margin-bottom: 2rem;
}
.titulo-conmutadores{
  /* un poco más chica y delgada */
  font-size: clamp(38px, 3.4vw, 50px);
  font-weight: 700;                 /* antes 800 */
  letter-spacing: .02em;
  margin-bottom: 1.2rem;
  line-height: 1;
}
.logo-hero{
  max-width: 230px;                 /* ← más grande */
  height: auto;
  margin: 0 auto;
  display: block;
}

/* ====== COLUMNA DERECHA ====== */
.bloque-der{
  max-width: 460px;                 /* un pelín más ancha */
  padding-left: 1.5rem;             /* separación de la chica */
}
.subtitulo-conmutadores{
  font-weight: 700;
  color: #707782;
  letter-spacing: .04em;
  font-size: 1.4rem;
}
.boton-conmutadores{
  background: #5FCBC6;
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 12px 34px;
  font-weight: 800;
  box-shadow: 0 8px 24px rgba(95,203,198,.35);
  transition: .15s;
  display: inline-block;
}
.boton-conmutadores:hover{ background: #36a6a1; }

.texto-chico{
  color: #2b2b2b;
  font-weight: 700;
}

/* contenedor de las dos tarjetas: una abajo de otra */
.contenedor-contacto{
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* ====== TARJETAS TEL / MAIL ====== */
.fondo-conmutadores .icono{
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  padding: 14px 22px;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(0,0,0,.05);
  font-weight: 600;
  color: #2b2b2b;
  width: 100%;
  box-sizing: border-box;
}
.fondo-conmutadores .icono::before{
  content: "";
  inline-size: 38px;
  block-size: 38px;
  border-radius: 999px;
  background: #5FCBC6;
  display: inline-block;
  -webkit-mask-size: 60%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-size: 60%;
          mask-repeat: no-repeat;
          mask-position: center;
}
/* tel */
.fondo-conmutadores .telefono::before{
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23000' d='M6.62 10.79a15.05 15.05 0 006.59 6.59l2.2-2.2a1 1 0 011.01-.24c1.1.37 2.28.57 3.58.57a1 1 0 011 1V21a1 1 0 01-1 1C10.07 22 2 13.93 2 3a1 1 0 011-1h3.5a1 1 0 011 1c0 1.3.2 2.48.57 3.58a1 1 0 01-.24 1.01l-2.2 2.2z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23000' d='M6.62 10.79a15.05 15.05 0 006.59 6.59l2.2-2.2a1 1 0 011.01-.24c1.1.37 2.28.57 3.58.57a1 1 0 011 1V21a1 1 0 01-1 1C10.07 22 2 13.93 2 3a1 1 0 011-1h3.5a1 1 0 011 1c0 1.3.2 2.48.57 3.58a1 1 0 01-.24 1.01l-2.2 2.2z'/></svg>");
}
/* mail */
.fondo-conmutadores .correo::before{
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23000' d='M20 4H4a2 2 0 00-2 2v12a2 2 0 002 2h16a2 2 0 002-2V6a2 2 0 00-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23000' d='M20 4H4a2 2 0 00-2 2v12a2 2 0 002 2h16a2 2 0 002-2V6a2 2 0 00-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z'/></svg>");
}
.fondo-conmutadores .correo_link{
  color: inherit;
  text-decoration: none;
}

/* ====== RESPONSIVE ====== */
@media (max-width: 767.98px){
  .bloque-izq,
  .bloque-der{
    text-align: center;
    max-width: 100%;
    padding-left: 0;
  }
  .fondo-conmutadores .icono{
    margin-left: auto;
    margin-right: auto;
  }
  .contenedor-contacto{
    align-items: center;
  }
}

/* fondo muy sutil */
/* ===== Sección texto conmutadores ===== */
.sub_gris{
  background: #f3f7f6;
  padding: clamp(48px, 6vw, 80px) 0;
}

.sub_gris .contenedor{
  max-width: 920px;
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* título principal */
.sub_gris .titulo-sec{
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(2.35rem, 1.5rem + 1.5vw, 2.75rem);
  text-align: center;
  letter-spacing: .04em;
  margin-bottom: 1.4rem;
  color: #101010;
}

/* párrafo intro – más delgado y legible */
.sub_gris .texto-conmutadores p{
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1.3rem;
  line-height: 1.7;
  color: #3c3c3c;
  text-align: justify;
  max-width: 760px;
  margin: 0 auto 2.3rem;
  font-weight: 400;
}

/* subtítulo largo */
.sub_gris .titulo-sec.delgado{
  font-size: clamp(1.7rem, 1.2rem + 1vw, 2.15rem);
  font-weight: 500;              /* menos pesado que el h3 de arriba */
  text-transform: uppercase;
  line-height: 1.1;
  margin-bottom: 1.6rem;
}

/* tarjeta de lista */
.lista-conmutadores{
  background: #fff;

  border-radius: 18px;
  padding: 1.35rem 1.5rem 1.3rem 2.1rem;
  margin: 0 auto 2.6rem;
  max-width: 720px;
  box-shadow: 0 10px 30px rgba(0,0,0,.04);
    list-style: none; /* quitamos la viñeta default */
}
.lista-conmutadores li{
      position: relative;
    margin-bottom: .55rem;
    font-size: 1.2rem;
    line-height: 1.6;
    color: #2b2b2b;
    font-weight: 400;
    padding-left: 3rem;
}

.lista-conmutadores li::before{
  content: "";
  position: absolute;
  left: 1.5rem;
  top: .8rem;              /* centra vertical la bolita */
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--turquesa);  /* tu color */
  /*box-shadow: 0 0 0 3px rgba(95,203,198,.22);  aro suave opcional */
}

.lista-conmutadores li:last-child{
  margin-bottom: 0;
}

/* llamado a cotización */
.sub_gris .llamado{
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.75rem;
  text-align: center;
  letter-spacing: .01em;
  margin-bottom: 1.6rem;
  color: #101010;
}

/* cinta final */
.cinta-experiencia{
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  background: #ff4f7b;
  color: #fff;
  padding: 10px 26px 9px;
  border-radius: 999px;
  font-size: 1.02rem;
  font-weight: 500;
  letter-spacing: .01em;
}
.cinta-experiencia strong{
  background: #000;
  padding: 3px 12px 3px;
  border-radius: 999px;
  font-size: .95rem;
  line-height: 1;
}

/* para centrar la cinta */
.texto-conmutadores .cinta-experiencia{
  margin: 0 auto !important;
    color: #fff !important;
    display: block;
    width: 100%;
    max-width: 30rem !important;
    text-align: center !important;
}

/* responsive */
@media (max-width: 600px){
  .lista-conmutadores{
    padding: 1.05rem 1.1rem 1rem 1.4rem;
  }
  .sub_gris .texto-conmutadores p{
    text-align: justify;
  }
  .sub_gris .titulo-sec,
  .sub_gris .titulo-sec.delgado,
  .sub_gris .llamado{
    text-align: left;
  }
  .texto-conmutadores .cinta-experiencia{
    margin-left: 0;
  }
}


.demos-audio{
  position: relative;
  padding: clamp(50px, 6vw, 90px) 0;
  background: url("/Imagenes/fondo-conmutadores-demos.jpg") center/cover no-repeat;
}

.contenedor-demos{
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 clamp(16px, 3vw, 32px);
}

.row-demos{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: clamp(18px, 2.5vw, 28px);
  align-items: start;
}

/* Col info */
.col-info h2{
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(34px, 4vw, 48px);
  line-height: .95;
  margin-bottom: 14px;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.col-info p{
  font-size: 1.2rem;
  line-height: 1.6;
  color: #fff;
  margin-bottom: 12px;
}
.col-info .nota{
  background: #fff;
  border-left: 4px solid var(--turquesa);
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 1.25rem;
  color: #2b2b2b;
  box-shadow: 0 10px 30px rgba(0,0,0,.05);
}

/* columnas de demos */
.col-demos .card-demo{
  background: #fff;
  border-radius: 18px;
  padding: 14px 14px 4px;
  box-shadow: 0 12px 35px rgba(0,0,0,.06);
  margin-bottom: 16px;
  backdrop-filter: blur(3px);
}

.col-demos h3{
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.4rem;
  letter-spacing: .02em;
  margin-bottom: 6px;
  color: #424242;
}

/* iframes */
.col-demos iframe{
  border-radius: 14px;
  overflow: hidden;
}

/* responsivo */
@media (max-width: 991px){
  .row-demos{
    grid-template-columns: 1fr 1fr;
  }
  .col-info{
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px){
  .row-demos{
    grid-template-columns: 1fr;
  }
  .col-demos .card-demo{
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
  }
}


/* contacto */
.cotizacion-ligera {
  background: #f4f6f6; /* mismo fondo que arriba */
  padding: clamp(42px, 5vw, 70px) 0 70px;
}

.cotizacion-ligera .row {
  margin-bottom: 0;
  align-items: flex-start;
}

.bloque-texto {
  padding-right: clamp(10px, 2vw, 30px);
}

.mini-label {
  display: inline-block;
  background: rgba(95,203,198, .12);
  color: #2b2b2b;
  padding: 6px 16px 5px;
  border-radius: 999px;
  font-size: .8rem;
  letter-spacing: .04em;
  margin-bottom: .6rem;
}

.titulo-cotizacion {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(2.4rem, 2rem + 1vw, 3rem);
  line-height: 1;
  margin: 0 0 .6rem;
  color: #212121;
}

.lead-cotizacion {
  font-size: 1.04rem;
  line-height: 1.6;
  color: #555;
  margin-bottom: 1.5rem;
}

.lista-cotizacion {
  list-style: none;
  padding: 0;
  margin: 0 0 1.8rem;
}
.lista-cotizacion li {
  position: relative;
  padding-left: 1.4rem;
  margin-bottom: .5rem;
  color: #2b2b2b;
  line-height: 1.45;
}
.lista-cotizacion li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55rem;
  width: 6px;
  height: 6px;
  background: var(--turquesa);
  border-radius: 999px;
}
.lista-cotizacion a {
  color: #ef2b70;
  text-decoration: none;
  font-weight: 600;
}

.accent {
  color: #ef2b70;
  font-weight: 600;
}

.pago-ligero {
  background: rgba(255,255,255,.35);
  border: 1px solid rgba(95,203,198,.28);
  border-radius: 16px;
  padding: 1rem 1.25rem .8rem;
  backdrop-filter: blur(1px);
  max-width: 380px;
}
.pago-ligero p {
  margin-bottom: .4rem;
  color: #2b2b2b;
}
.pago-titulo {
  font-weight: 600;
  margin-bottom: .5rem;
  color: #212121;
}

/* derecha */
.bloque-form {
  background: #fff;
  border-radius: 20px;
  padding: 1.6rem 1.5rem 2rem;
  border: 1px solid rgba(0,0,0,.03);
}

.nota-form {
  background: rgba(239,43,112,.12);
  border-left: 4px solid #ef2b70;
  border-radius: 12px;
  padding: .65rem .9rem;
  margin-bottom: 1.1rem;
  font-size: .88rem;
  color: #2b2b2b;
}

/* que el form de materialize no se vea pegado */
.bloque-form .row {
  margin-bottom: .8rem;
}

/* móvil */
@media (max-width: 992px) {
  .bloque-texto {
    padding-right: 0;
    margin-bottom: 2rem;
  }
  .bloque-form {
    max-width: 540px;
    margin: 0 auto;
  }
}
@media (max-width: 600px) {
  .cotizacion-ligera {
    padding-top: 2.8rem;
  }
  .titulo-cotizacion {
    font-size: 2.3rem;
  }
  .pago-ligero {
    max-width: 100%;
  }
}


/* Contenedor general del botón */
.whatsapp-fixed {
  position: fixed;
  z-index: 5;
}

/* Por defecto (escritorio) → lado derecho a media altura */
.whatsapp-fixed {
  right: -109px;
  bottom: 50%;
  width: 168px;
  height: 66px;
}

.whatsapp-fixed:hover {
  right: -20px;
}

/* Imagen que se ve en escritorio */
.whatsapp-img-desktop {
  display: block;
  height: 60px;
}

.whatsapp-img-mobile {
  display: none;
}

/* ======= VISTA MÓVIL ======= */
@media (max-width: 768px) {

  /* Barra inferior izquierda en móvil */
  .whatsapp-fixed {
    left: 5px;
    right: auto;
    bottom: 25px;
    width: 230px;
    height: 32px;
  }

  .whatsapp-img-mobile {
    display: block;
    height: 60px;
  }

  .whatsapp-img-desktop {
    display: none;
  }
}

/* =========================
   AVISO PRIVACIDAD (look premium)
========================= */
.privacy-section{
  padding: 50px 0;
}

.privacy-head{ margin-bottom: 22px; }
.chip-priv{
  background:#e8f6f4;
  color:#1e6b66;
  font-weight:600;
}
.privacy-title{
  font-size: 3rem;
  letter-spacing: .02em;
  margin: 10px 0 8px;
}
.privacy-subtitle{
  max-width: 860px;
  margin: 0 auto;
  color: rgba(0,0,0,.70);
  font-size: 1.05rem;
  line-height: 1.7rem;
}

/* Caja blanca principal */
.privacy-box{
  background:#fff;
  border-radius: 22px;
  padding: 28px 28px;
  box-shadow: 0 12px 30px rgba(0,0,0,.06);
  border: 1px solid rgba(0,0,0,.06);
}

.privacy-block{ padding: 6px 6px; }

.privacy-h2{
  font-size: 1.55rem;
  margin: 0 0 10px;
  letter-spacing: .01em;
}
.privacy-h3{
  font-size: 1.2rem;
  margin: 18px 0 8px;
  font-weight: 700;
}
.privacy-divider{
  height: 1px;
  background: rgba(0,0,0,.08);
  margin: 18px 0;
}

.privacy-contact p{ margin: 6px 0; }
.privacy-contact a{ color:#ff2b70; font-weight:700; }

.privacy-list{
  margin: 12px 0 0 0;
  padding-left: 20px;
}
.privacy-list li{
  margin: 8px 0;
  line-height: 1.6rem;
}

.privacy-note{
  margin-top: 12px;
  padding: 12px 14px;
  border-left: 4px solid #7cd7cf;
  background: rgba(124,215,207,.12);
  border-radius: 14px;
}

/* Mini ventajas al final */
.privacy-icons{
  margin-top: 28px;
}

/* Responsive */
@media (max-width: 600px){
  .privacy-title{ font-size: 2.1rem; }
  .privacy-box{ padding: 18px 14px; border-radius: 18px; }
}


/* =========================
   TÉRMINOS Y CONDICIONES
========================= */
.terms-section{
  padding: 50px 0;
}

.terms-head{ margin-bottom: 22px; }
.chip-terms{
  background:#e8f6f4;
  color:#1e6b66;
  font-weight:600;
}
.terms-title{
  font-size: 3rem;
  letter-spacing: .02em;
  margin: 10px 0 8px;
}
.terms-subtitle{
  max-width: 860px;
  margin: 0 auto;
  color: rgba(0,0,0,.70);
  font-size: 1.05rem;
  line-height: 1.7rem;
}

.terms-box{
  background:#fff;
  border-radius: 22px;
  padding: 28px;
  box-shadow: 0 12px 30px rgba(0,0,0,.06);
  border: 1px solid rgba(0,0,0,.06);
}

.terms-block{ padding: 6px; }

.terms-h2{
  font-size: 1.55rem;
  margin-bottom: 10px;
}

.terms-divider{
  height:1px;
  background: rgba(0,0,0,.08);
  eqmargin:18px 0;
}

.terms-list{
  padding-left: 20px;
}
.terms-list li{
  margin: 8px 0;
  line-height: 1.6rem;
}

.terms-note{
  margin-top: 12px;
  padding: 12px 14px;
  border-left: 4px solid #7cd7cf;
  background: rgba(124,215,207,.12);
  border-radius: 14px;
}

@media (max-width:600px){
  .terms-title{ font-size:2.1rem; }
  .terms-box{ padding:18px 14px; }
}

/* HERO-PARALLAX */
.hero-parallax-x{
  position: relative;
  min-height: 70vh;
  overflow: hidden;
  display: flex;              /* ✅ */
  align-items: center;        /* ✅ centra vertical */
}

.hero-parallax-x .hero-content{
  width: 100%;                /* ✅ para que center-align funcione bien */
  position: relative;
  z-index: 2;
  color: #fff;
  padding: 48px 16px;
  margin: 0 auto;
}

.hero-parallax-x .hero-bg{
  position: absolute;

  /* ⬅️ CLAVE: más ancho que la pantalla */
  width: calc(100% + 300px);
  height: calc(100% + 80px);

  left: -150px; /* mitad del extra */
  top: -40px;

  background-image: url("/Imagenes/fondo-paty-4.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  will-change: transform;
  transform: translate3d(0,0,0);
}


/* overlay oscuro */
.hero-parallax-x .hero-overlay{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.58);
}

/* contenido arriba de todo */
.hero-parallax-x .hero-content{
  position: relative;
  z-index: 2;
  color: #fff;
  padding: 48px 16px;
}

.hero-title{
  font-weight: 800;
  letter-spacing: .5px;
  text-transform: uppercase;
  line-height: 1.1;
  margin: 0 0 14px;
  font-size: clamp(1.7rem, 3.2vw, 2.8rem);
}

.hero-subtitle{
  margin: 0 auto 26px;
  max-width: 820px;
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  opacity: .95;
}

.hero-actions{
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

.hero-btn{
  border-radius: 999px;
  padding-left: 22px;
  padding-right: 22px;
}

.hero-btn-outline{
  border-radius: 999px;
  padding-left: 22px;
  padding-right: 22px;
  border: 2px solid rgba(255,255,255,.75);
  background: rgba(255,255,255,.92);
}

/* Respeta reduce motion */
@media (prefers-reduced-motion: reduce){
  .hero-parallax-x .hero-bg{ transform: none !important; }
}
/* Videos */
.posters-section{
  padding-top: 30px;
  padding-bottom: 30px;
}

.poster-card{
  position: relative;
  display: block;
  border-radius: 18px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  box-shadow: 0 18px 50px rgba(0,0,0,.18);
}

.poster-media{
  position: absolute;
  inset: 0;
}

.poster-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform .55s ease;
  will-change: transform;
}

/* overlay */
.poster-overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,.12) 55%, rgba(0,0,0,.10));
  opacity: .85;
  transition: opacity .55s ease;
}

/* caption */
.poster-caption{
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  color: #fff;
  z-index: 2;
}

.poster-title{
  font-weight: 800;
  letter-spacing: .4px;
  text-transform: uppercase;
  font-size: 1.05rem;

  /* animación de entrada */
  transform: translateY(14px);
  opacity: 0;
  transition: transform .45s ease, opacity .45s ease;
}

.poster-subtitle{
  margin-top: 6px;
  font-size: .95rem;
  opacity: 0;

  transform: translateY(10px);
  transition: transform .55s ease .05s, opacity .55s ease .05s;
}

/* hover: zoom + overlay + títulos aparecen */
.poster-card:hover .poster-media img{
  transform: scale(1.12);
}

.poster-card:hover .poster-overlay{
  opacity: 1;
}

.poster-card:hover .poster-title,
.poster-card:hover .poster-subtitle{
  transform: translateY(0);
  opacity: 1;
}

/* opcional: un borde sutil */
.poster-card::after{
  content:"";
  position:absolute;
  inset:0;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  pointer-events:none;
}
.posters-section{
  padding-top: 40px;
  padding-bottom: 30px;
}

.posters-head{
  margin: 0 auto 28px;
  max-width: 920px;
}

.posters-title{
  font-size: clamp(1.9rem, 3vw, 2.8rem);
  font-weight: 800;
  letter-spacing: .08em;
  margin: 0 0 10px;
}

.posters-subtitle{
  font-size: clamp(1rem, 1.25vw, 1.2rem);
  line-height: 1.65;
  color: rgba(0,0,0,.7);
  margin: 0;
}

@media (max-width: 600px){

  /* cards más altas, estilo Netflix */
  .poster-card{
    aspect-ratio: 4 / 3;
    border-radius: 16px;
  }

  /* menos overlay oscuro */
  .poster-overlay{
    opacity: .9;
  }

  /* texto más arriba */
  .poster-caption{
    bottom: 14px;
    left: 14px;
    right: 14px;
  }

  .poster-title{
    font-size: 1.1rem;
  }

  .poster-subtitle{
    font-size: .95rem;
  }

}

/* Móvil */
@media (max-width: 600px){
  /* en touch no hay hover, dejamos títulos visibles */
  .poster-title,
  .poster-subtitle{
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 600px){
  #portafolio .row{
    margin-left: 0;
    margin-right: 0;
  }

  #portafolio .col{
    padding-left: 0;
    padding-right: 0;
    margin-bottom: 16px;
  }
}
@media (max-width: 600px){
  #portafolio .col{
    margin-bottom: 32px;
  }
}

/* Overlay más oscuro */
.modal-overlay{
  background: rgba(0,0,0,.78) !important;
}

/* Caja del modal */
.modal.modal-video-pro{
  width: min(980px, 92vw) !important;
  max-height: 86vh !important;
  border-radius: 18px;
  overflow: hidden;
  background: #0b0b0b;
  box-shadow: 0 30px 90px rgba(0,0,0,.55);
}

/* QUITA padding default de Materialize */
.modal.modal-video-pro .modal-content.modal-content-video{
  padding: 0 !important;
}

/* Frame 16:9 real */
.modal.modal-video-pro .video-frame{
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  position: relative;
  overflow: hidden;
}

/* Contenedor del iframe ocupa todo */
#videoContainer{
  position: absolute;
  inset: 0;
}

/* iframe ocupa todo */
#videoContainer iframe{
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Botón X */
.modal-x{
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 5;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 18px;
  color: #fff;
  background: rgba(255,255,255,.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform .15s ease, background .2s ease;
}
.modal-x:hover{
  transform: scale(1.05);
  background: rgba(255,255,255,.18);
}

@media (max-width: 600px){
  .modal.modal-video-pro{
    width: 96vw !important;
    max-height: 80vh !important;
    border-radius: 14px;
  }
}

.modal.modal-fixed-footer .modal-footer {
    background-color: #000;
}
.circulo{
  display: block;
  width: 220px;          /* ajusta según tu diseño */
  height: 220px;         /* igual al width para círculo perfecto */
  border-radius: 50%;
  object-fit: cover;

  border: 3px solid rgba(0,0,0,.12);   /* gris claro elegante */

  box-shadow:
    0 8px 22px rgba(0,0,0,.12),        /* sombra principal */
    0 2px 6px rgba(0,0,0,.06);         /* refuerzo suave */

  background: #fff;     /* evita bordes raros en PNG/JPG */
}
.footer_avatar.circulo {
    width: 200px;
    height: 200px;
}
#testimonios img {
    border-radius: 50%;
    border: 3px solid rgba(0,0,0,.12);   /* gris claro elegante */

  box-shadow:
    0 8px 22px rgba(0,0,0,.12),        /* sombra principal */
    0 2px 6px rgba(0,0,0,.06);         /* refuerzo suave */
}
/* ================= CTA FINAL PARALLAX ================= */
.cta-final-section{
  position: relative;
  padding: 90px 0;
  background-image: url("/Imagenes/fondo-pie.jpg");
  background-repeat: no-repeat;
  background-position: left center; /* ← alineado a la izquierda */
  background-size: cover;
  background-attachment: fixed;     /* ← parallax */
  overflow: hidden;
}

/* Overlay para legibilidad */
.cta-final-section::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(
    to right,
    rgba(255,255,255,.85) 0%,
    rgba(255,255,255,.75) 40%,
    rgba(255,255,255,.65) 60%,
    rgba(255,255,255,.55) 100%
  );
  z-index: 0;
}

/* Elevar contenido sobre overlay */
.cta-final-section .container{
  position: relative;
  z-index: 1;
}


.pleca{
  width: 100%;
  height: 120px;                 /* el contenedor sigue alto */
  
  background-image: url("/Imagenes/pleca.svg?v=1");
  background-repeat: repeat-x;
  background-position: center;
  background-size: auto 70px;    /* ← ANTES 120px, ahora más fina */

  display: block;
  background-color: #e29289;
}
.img-pleca{
  width: 100%;
  display: flex;
  justify-content: center;   /* centra horizontal */
  align-items: center;       /* centra vertical */
  padding: 20px 0;           /* aire arriba y abajo */
  background-color: #fff;
}

.img-pleca img{
  height: 50px;              /* altura solicitada */
  width: auto;               /* mantiene proporción */
  max-width: 100%;
  display: block;
}

/* ===== FIX móvil: no desbordes / no ancho extra ===== */
html, body{
  overflow-x: hidden;
}

.testimonios-section{
  overflow: hidden; /* clave: recorta lo que se salga del slider */
}

/* El slider no debe crecer al ancho del track */
#testimoniosSlider{
  width: 100% !important;
  overflow: hidden !important;
}

/* En slider fullWidth, cada item debe ocupar el ancho completo */
#testimoniosSlider.carousel.carousel-slider .carousel-item{
  width: 100% !important;
}

/* Centrado real del contenido (tu card) */
#testimoniosSlider .carousel-item{
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

/* Card responsiva: nunca más ancha que la pantalla */
#testimoniosSlider .testimonio-card{
  width: min(520px, 88vw) !important;
  margin: 0 auto !important;
  box-sizing: border-box;
}

/* Evita que la sombra “empuje” visualmente fuera en móvil */
@media (max-width: 600px){
  #testimoniosSlider .testimonio-card{
    width: 90vw !important;
    border-radius: 18px;
  }
}

/* Puntitos centrados y sin mover layout */
#testimoniosSlider .indicators{
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
}
/* ===== Separación en móvil (aire alrededor de la tarjeta) ===== */
@media (max-width: 600px){

  /* cada slide tiene “margen” interno */
  #testimoniosSlider.carousel.carousel-slider .carousel-item{
    padding: 18px 16px 34px !important; /* top | lados | bottom */
    box-sizing: border-box;
  }

  /* la tarjeta ya no toca los bordes */
  #testimoniosSlider .testimonio-card{
    width: 100% !important;      /* ocupa el espacio útil del slide */
    max-width: 520px !important; /* por si crece */
    margin: 0 auto !important;
  }

  /* opcional: un poco más de aire arriba del bloque */
  .testimonios-section{
    padding-top: 70px;
    padding-bottom: 70px;
  }

  /* puntitos un poco más abajo para que no se encimen */
  #testimoniosSlider .indicators{
    bottom: -6px;
  }
}

/* para quitar el tipo botón para realizar la parte visual" */

.etiqueta_medios .btn-salmon {
 cursor: none;
 margin: 1rem;
}


/* =========================================
CLIENTES
=========================================*/

.clientes{
  padding: 80px 0;
  background: #fff;
}

.clientes_img{
  padding: 20px;
}

.clientes_img img{
  width: 100%;
  height: auto;
  border-radius: 10px;

  filter: grayscale(100%);
  opacity: .85;

  transition: all .3s ease;
}

.clientes_img img:hover{
  filter: grayscale(0%);
  opacity: 1;
  transform: scale(1.02);
}