:root {
  --bp-sm: 576px;
  --bp-md: 768px;
  --bp-lg: 992px;
  --color1: #e91e63; /* pink */
  --color2: #333; /* gris */
  --color3: #031624; /* azul oscuro  */
}

.text-center { text-align: center!important; }
.text-left { text-align: left!important; }
.text-light { color:#fff; }
.text-dark { color:#333; }
.text-color-1 { color: var(--color1); }
.text-color-2 { color: var(--color2); }
.text-color-blue-dark { color: #306ABF; }
.text-uppercase { text-transform: uppercase; }
.underline { text-decoration: underline; text-underline-offset: 10px; text-decoration-thickness: 4px; }
.underline-color1 { text-decoration: underline; text-decoration-color: var(--color1); text-underline-offset: 10px; text-decoration-thickness: 4px; }
.underline-color2 { text-decoration: underline; text-decoration-color: var(--color2); text-underline-offset: 10px; text-decoration-thickness: 4px; }
.d-block-center { display: block; margin:0 auto; }
.d-block-left { text-align: left; display: block; }
.d-grid-center { display:grid!important; place-items:center; }
.d-grid-start { display:grid!important; place-items:start; }
.d-grid-end { display:grid!important; place-items:end; }
.d-grid-place-self { place-self: center; display:grid!important; }
.fw-300 { font-weight: 300!important; }
.fw-400 { font-weight: 400!important; }
.fw-500 { font-weight: 500!important; }
.fw-600 { font-weight: 600!important; }
.fw-700 { font-weight: 700!important; }
.fw-800 { font-weight: 800!important; }

.btn-color-1 {
  background-color: var(--color1);
  text-decoration: none;
  color:#fff;
  padding:10px 40px;
}
.btn-color-2 {
  background-color: var(--color2);
  text-decoration: none;
  color:#fff;
  padding:10px 40px;
}

body { background: #fff; }
a { text-decoration: none; }
body,
p {
  font-family: "Onest", sans-serif;
  font-weight: 400; 
  font-size: 1.3rem; 
  line-height: 1.4;
  color: #222; 
  letter-spacing: -0.3px;
  overflow-x: hidden;
}

.w-100 { width:100%; margin:0 auto; }
@media(max-width:768px){
  .w-100 { width:95%; }
}
.w-80 { width:80%; margin:0 auto; }
@media(max-width:768px){
  .w-80 { width:95%; }
}
.w-75 { width:75%; margin:0 auto; }
@media(max-width:768px){
  .w-75 { width:95%; }
}
.w-75-start { width:75%; }
@media(max-width:768px){
  .w-75-start { width:95%; }
}
.w-50 { width:50%; margin:0 auto; }
@media(max-width:768px){
  .w-50 { width:95%; }
}

.bg-dark { background-color: #333; }
.bg-gray { background-color: #F1F1F1; }
.bg-purple { background-color: #8E78F4; }

#menu {
  position: fixed;
  top: 0;
  left: 0;
  background-color: var(--color3);
  width: 100%;
  z-index: 99;
  padding: 8px 0;
}
@media(max-width:768px){ #menu { display:block; padding: 8px 0; } #menu .menu-wrap { display:grid; grid-template-columns: 1fr auto; align-items:center; } }
#menu .menu-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
#menu .menu-links {
  justify-content: end;
  display: flex;
}
#menu a {
  text-decoration: none;
  color:#fff;
}
/* ===== Ajuste de espaciados en section-header ===== */
.section-header h1{
  padding-bottom: 0 !important;   
  margin-bottom: 12px;            
}

.section-header p{
  margin-bottom: 0 !important;    
}
.section-header {
  background-color: #ECEAEA;
 padding: 6vh 0 8vh 0;   /* antes 20vh 0 20vh 0 */
  margin-top: 0; 
  overflow: hidden;
  margin-bottom: 0;
  overflow-x: hidden;
}
.section-header h1 { font-size: clamp(3rem, 6vw + 1rem, 7rem); font-weight: 700; line-height: 1.2; }
.section-header p {
  font-size:2rem;
}
.section2 h2 { font-size: 128px; }
.section-curved { overflow: hidden; }
.section-curved h2 { font-size: 2.5rem; }
.curved { position: relative; background: #ECEAEA; height: min(50vh, 520px); border-bottom-left-radius: 50% 80%; border-bottom-right-radius: 50% 80%; margin-top:-5vh; }
.section-5 { position: relative; overflow: visible; }
.section-5 .section-5-wrap {
  background-color: var(--color3);
  padding:80px 40px 80px;
}

.section-5 .bg-img-man-web {  background-image: url("https://bri.cl/wp-content/uploads/2025/07/pantone-polaroids.jpg");  background-color: #cccccc;  background-repeat: no-repeat;  background-size: cover;  background-position: center;  min-height: 50vh;  background-attachment: scroll;}


.section-6 h2, .title-servicios { font-size: clamp(3rem, 6vw + 1rem, 9rem); line-height: .95; font-weight: 800; }
.section-6 h2 span, .title-servicios span { font-weight: 300; }
.bg-img-com-fid { 
  background-image: url("https://bri.cl/wp-content/uploads/2025/07/email-message-inbox-notification-laptop-screen-business-background.jpg"); 
  background-color: #fff; 
  background-repeat: no-repeat; 
  background-size: cover; 
  height: 400px; }
.bg-img-cibseg {
  background-image: url("https://bri.cl/wp-content/uploads/2025/07/programming-background-with-person-working-with-codes-computer.jpg");
  background-color: #fff;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 600px;
}
/* Quita el espacio superior de la sección (sobrescribe el pt-5) */
section#ciberseguridad{
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Asegura que el primer elemento no empuje hacia abajo */
#ciberseguridad .col-md-7 > .w-75 > :first-child{
  margin-top: 0;
}

/* Reduce el “colchón” del título que trae py-5 y evita margen extra */
#ciberseguridad .title-servicios{
  margin-top: 0;
  margin-bottom: 0.75rem;   /* ajusta a gusto */
  padding-top: 1rem;        /* antes tenía 3rem (py-5) */
  padding-bottom: 1rem;     /* antes tenía 3rem (py-5) */
}

/* Por si la fila trae gutter vertical que agrega espacio */
#ciberseguridad .row{
  --bs-gutter-y: 0;
}

/* Si ves una línea mínima por subpíxeles, solápala 1px */
.bg-img-com-fid + #ciberseguridad{
  margin-top: -1px;
}

.logos-clientes {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-column-gap: 20px;
  grid-row-gap: 20px;
}
.logos-clientes p { display: inline-grid; }

.img-pajarito,
.img-pajarito-animada {
  max-width: 100%;  
  width: 100%;      
  height: auto;     
}

@media(max-width: 768px) {
  .section-header {
    padding: 10vh 0;
    padding-top: 30px !important; /* ajusta el valor según lo que quieras */
  }
  .section-header h1 {
    font-size: 48px;
    line-height: 1.2;
  }
  .section-header p {
      font-size: 1.4rem !important;  /* sube el tamaño */
    line-height: 1.6 !important;   /* más aire entre líneas */
  }

  .img-pajarito {
  max-width: 100%;
  height: auto;
}
}

.img-pajarito-animada {
  max-width: 100%;
  width: 100%;
  height: auto;
  position: relative;
  top: -100px;
  opacity: 0;
  animation: drop-slow 3s ease-out forwards;
}
/* Imagen pajarito animada más pequeña en responsive */
@media (max-width: 991.98px){ /* tablets hacia abajo */
  .img-pajarito-animada{
    width: 70%;          
    max-width: 320px;    
    margin: 0 auto;     
    top: 60px !important;          
  }
}

@media (max-width: 575.98px){ /* móviles chicos */
  .img-pajarito-animada{
    width: 60%;
    max-width: 240px;
    top: 60px !important;
  }
}


@keyframes drop-slow {
  to {
    top: 0;
    opacity: 1;
  }
}


.titulo-principales { font-size: clamp(3rem, 6vw + 1rem, 9rem); font-weight: 300; line-height: 1.1; margin-bottom: 30px; }

.titulo-principales strong {
  font-weight: 800;
}

@media (max-width: 768px) {
  .titulo-principales { font-size: clamp(1.6rem, 3.5vw + .5rem, 3.75rem); font-weight: 300; line-height: 1.1; margin-bottom: 30px; }
}

.horizontal-accordion {
  display: flex;
  flex-wrap: nowrap;
  overflow: hidden;
  border: 1px solid #9C7BFF;
  border-radius: 20px;
  height: 300px;
}

.accordion-item {
  flex: 1;
  background-color: #1e1e1e;
  color: white;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.4s ease;
  display: flex;
  flex-direction: column;
  justify-content: left;
  align-items: left;
  padding: 1rem;
}

.accordion-item:not(.active) .accordion-content {
  display: none;
}

.accordion-item.active {
  flex: 3;
}

.accordion-header {
  text-align: left;
  pointer-events: none;
  transition: color 0.3s ease;
}

.accordion-header .step-num {
  font-size: 3rem;
  font-weight: bold;
  color: white;
  transition: color 0.3s ease;
}

.accordion-header .step-title {
  font-size: 1.5rem;
  font-weight: 500;
  color: white;
  transition: color 0.3s ease;
}

.accordion-item.active .step-num{
  color: #9C7BFF;
}

.accordion-content {
  margin-top: 1rem;
  text-align: left;
  font-size: 0.95rem;
  line-height: 1.4;
  pointer-events: none;
}
.accordion-item {
  border-right: 1px solid #9C7BFF;
}

/* Quitar la línea a la última tarjeta */
.accordion-item:last-child {
  border-right: none;
}
.logo-cliente {
  filter: grayscale(100%);
  opacity: 0.9;
  transition: filter 0.3s ease;
}
.logo-cliente { filter: grayscale(100%); opacity: 0.9; transition: filter 0.3s ease, opacity 0.3s ease; max-width: min(160px, 70%); width:100%; height:auto; object-fit:contain; margin: 5px auto; }

.logo-cliente:hover {
  filter: grayscale(0%);
  opacity: 1;
}



@media (max-width: 992px) {
  .logos-clientes {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 576px) {
  .logos-clientes {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* === Responsive Títulos === */
@media (max-width: 768px) {
  .title-servicios {
    font-size: 36px;
  }

  .section-5 .section-5-wrap h2 {
    font-size: 48px;
    left: 0;
    text-align: center;
    width: 100%;
  }

  .imagen-diagonal .img1,
  .imagen-diagonal .img2 {
    width: 180px;
  }
}

/* Apilar vertical ≤ 992px (tablet y móvil) */
@media (max-width: 991.98px){
  .horizontal-accordion{
    display: block !important;       /* saca el flex por completo */
    height: auto !important;         /* elimina altura fija */
    overflow: visible !important;    /* evita cortes */
  }

  /* Cada item a ancho completo, sin crecimiento */
  .horizontal-accordion .accordion-item,
  .horizontal-accordion .accordion-item.active{
    display: block !important;
    flex: initial !important;        /* anula flex:1 y flex:3 */
    width: 100% !important;
    border-right: none !important;   /* sin divisor vertical */
    border-bottom: 1px solid #9C7BFF;
  }

  .horizontal-accordion .accordion-item:last-child{
    border-bottom: none;
  }

  /* Contenidos ocupando el ancho */
  .horizontal-accordion .accordion-header,
  .horizontal-accordion .accordion-content{
    width: 100% !important;
  }
}



body {
  overflow-x: hidden !important;
}
#contacto .container{
  padding-bottom: 0 !important;
}

.formulario-contacto {
  background-color: #1d1c1c;
  color: white;
  padding: 0;
}

.formulario-contacto .container {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 40px;
}

.formulario-contacto h2 {
  flex: 1 1 300px;
  color: var(--color3);
  font-size: 4rem; 
  font-weight: 900;
  line-height: 1.1;
  text-align: right; 
  margin: 0;
  padding-top: 10px;
  text-transform: uppercase;
  letter-spacing: -1px;
}


.formulario-contacto h2 span {
  display: block;
}

.form-bri-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(14px, 2.5vw, 24px); max-width: 900px; margin: 0 auto; }

.form-bri-grid .full {
  grid-column: span 2;
}

.form-bri-grid label {
  display: block;
  color: white;
  margin-bottom: 5px;
  font-size: 0.9em;
}

.form-bri-grid input, .form-bri-grid textarea { background-color: transparent; border: none; border-bottom: 1px solid var(--color3); color: white; width: 100%; padding: 12px 8px; font-family: "Onest", sans-serif; resize: none; height: 40px; line-height: 1; font-size: clamp(1rem, 1.4vw, 1.125rem); }


.btn-enviar { background: transparent; border: 1px solid var(--color3); border-radius: 30px; padding: 12px 22px; color: white; transition: 0.3s; font-family: "Onest", sans-serif; }

.btn-enviar:hover {
  background-color: var(--color3);
  border-color: white;
  color: white;
}
.btn-enviar{
  display: inline-block;           /* o inline-flex si alineas iconos */
  line-height: normal;             /* evita recortes verticales */
  border: 1px solid var(--color3) !important;  /* asegura los 4 lados */
  box-sizing: border-box;          /* que el borde cuente en el tamaño */
}



#principales-servicios {
  overflow: hidden !important; 
}

#principales-servicios h2 {
  font-size: clamp(3rem, 6vw + 1rem, 9rem) !important;
  font-weight: 800 !important; 
  color: var(--color3) !important;
  margin-bottom: 20px !important;
}



#principales-servicios .row {
  display: flex;
  flex-wrap: wrap;
  min-height: 100%;
}

#principales-servicios .col-md-6 {
  display: flex;
  align-items: stretch;
}

#principales-servicios .col-md-6.p-0 {
  padding: 0;
}

.img-full-left.img-chica {
  width: 60%;
  height: auto;
  margin: 0 auto;
  object-fit: contain;
}

#principales-servicios .col-md-6:not(.p-0) {
  flex-direction: column;
  justify-content: center;
  padding: 60px;
}

/* Responsive */
@media (max-width: 768px) {
  #principales-servicios .row {
    flex-direction: column;
  }

  #principales-servicios .col-md-6 {
    height: auto;
  }

  #principales-servicios .col-md-6:not(.p-0) {
    padding: 30px 20px;
  }
}
/* === Mantención web & hosting: título protagonista === */
.section-5 .section-5-wrap h2 {
  position: relative;
  z-index: 5;
  font-size: clamp(3rem, 7vw, 12rem);
  line-height: .9;
  margin: 0 auto 1rem;
  text-align: center;
  color: #fff;
   line-height: 1.1;  
}
@media (max-width: 768px){
  .section-5 .section-5-wrap h2{
    font-size: clamp(2rem, 9vw, 5rem) !important;
    left: auto !important;
    width: auto !important;
  }
}

.section-5::before{
  z-index: 1;
}
.section-5 .section-5-wrap{ z-index: 2; }

.wrap-mantencion h2 .bold{
  font-weight: 800; 
  display: block;
}
.wrap-mantencion h2 .light { font-weight: 300 !important; }
/* Asegura que el wrap se centre dentro de la franja */
.wrap-mantencion{
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;   
  text-align: center;
  width: 100%;
}

/* El título no debe estirarse de más */
.mantencion-title{
  margin: 0 auto;
  max-width: 90%;            
  text-align: center;
}
/* Ajuste de altura para imágenes anchas en responsive */
@media (max-width: 991.98px){ 
  .img-fluid[alt="html css collage"],
  .img-fluid[alt="programación html"]{
    width: 100%;
    height: 220px;       
    object-fit: cover;   
    object-position: center;
  }
}

@media (max-width: 575.98px){ /* móviles chicos */
  .img-fluid[alt="html css collage"],
  .img-fluid[alt="programación html"]{
    height: 160px;       
  }
}
img { max-width: 100%; height: auto; }

/* anti overflow */
html { overflow-x: clip !important; }
[class^="col-"], [class*=" col-"] { min-width: 0; }
.container-fluid > .row { margin-left: 0; margin-right: 0; }
.container-fluid > .row { --bs-gutter-x: 0; } 
img, svg, video, canvas { display:block; max-width:100%; height:auto; }
.full-bleed{
  position: relative;
  left: auto; right: auto;                
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  max-width: 100vw;
  overflow-x: clip;                        
}

@media (max-width: 991.98px){
  .full-bleed{
    width: 100%;
    margin-left: 0;
    margin-right: 0;                        
    max-width: 100%;
  }
}
.section-header,
.horizontal-accordion,
#principales-servicios { overflow-x: clip; }


/* Tablet ↓: TODAS las filas apilan columnas y textos a ancho completo */
@media (max-width: 991.98px){
  .row { --bs-gutter-x: 0; }
  .row > [class^="col-"],
  .row > [class*=" col-"],
  .row > .col {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .row h1, .row h2, .row h3, .row p, .row ul, .row ol { width: 100%; }
}
/* Excepción: mantener 2 columnas en la sección Diseño y Desarrollo Web */
@media (max-width: 991.98px){
  #diseno-desarrollo-web .row > [class^="col-"],
  #diseno-desarrollo-web .row > [class*=" col-"],
  #diseno-desarrollo-web .row > .col {
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }
}

/* Excepciones (si necesitas mantener grillas específicas en horizontal) */
@media (max-width: 991.98px){
  .logos-clientes { display: grid; } 
}
/* Tablet ↓: limita altura de DIVs con background-image */
@media (max-width: 991.98px){
  .section-5 .bg-img-man-web,
  .bg-img-com-fid,
  .bg-img-cibseg{
    min-height: 0 !important;
    height: clamp(220px, 56vw, 420px) !important; 
    aspect-ratio: 16 / 9;                         
    background-size: cover;
    background-position: center;
  }
}

@media (max-width: 991.98px){
  .img-full-left{
    width: 100%;
    height: clamp(220px, 56vw, 420px) !important; 
    object-fit: cover;                            
  }
}

/* Cards compactas en responsive */
@media (max-width: 991.98px){

  /* 1) Altura auto: anulamos el aspect-ratio y el padding inferior grande */
  .cards-section .card{
    aspect-ratio: auto !important;    
    height: auto !important;
    min-height: 0 !important;
    padding: 14px 16px 16px !important; 
  }

  /* 2) Título y lista con márgenes cortos */
  .cards-section .card h4{
    padding-left: 0 !important;
    margin: 8px 0 10px !important;
    line-height: 1.2;
  }
  .cards-section .card ul{
    margin: 0 !important;
    padding-left: 1.1rem;
  }
  .cards-section .card li{ margin-bottom: .3rem; }
  .cards-section .card > :last-child{ margin-bottom: 0 !important; }

  /* 3) Icono más pequeño y sin truco de -40px */
  .card p:first-of-type{
    margin-top: 0 !important;
    padding-bottom: 8px !important;
  }
  .cards-section img{
    width: 56px !important;
    height: 56px !important;
    padding: 8px !important;
  }
}

@media (min-width: 992px){
  .cards-section .card{ aspect-ratio: 3/4; }
}
/* ===== Separación simple entre tarjetas solo en responsive ===== */
@media (max-width: 991.98px){
  .cards-section .card{
    margin-bottom: 16px !important;  
  }

  .cards-section .card:last-child{
    margin-bottom: 0;
  }
}


/* ===== Section curved: centrar texto y corregir sangrías en responsive ===== */
@media (max-width: 991.98px){
  .section-curved .container-fluid { padding-left: 0 !important; padding-right: 0 !important; }
  .section-curved .row { --bs-gutter-x: 0; margin-left: 0; margin-right: 0; }
  .section-curved .col-md-8 { padding-left: 0 !important; padding-right: 0 !important; }
  .section-curved .curved{
    display: flex;               
    align-items: center;        
    justify-content: center;      
    height: auto;                 
    padding: 40px 16px 48px;      
    margin-top: 0;                 
    border-bottom-left-radius: 50% 60%;
    border-bottom-right-radius: 50% 60%;
  }

  /* 3) El título: centrado y tamaño fluido (sin offset visual) */
  .section-curved h2{
    text-align: center !important;
    margin: 0 auto;                /* centra el bloque del h2 */
    max-width: 32ch;               /* ancho óptimo para lecturabilidad */
    font-size: clamp(1.25rem, 5.2vw, 1.8rem) !important;
    line-height: 1.25;
    padding: 0;                    /* quita py-5 de Bootstrap en móvil */
  }
}

/* Desktop se mantiene tu tamaño original */
@media (min-width: 992px){
  .section-curved h2{ font-size: 2.5rem; }
}
/* ===== Ajuste fino: centrar texto curved al 100% ===== */
@media (max-width: 991.98px){
  .section-curved .col-md-8{
    flex: 0 0 100% !important;   
    max-width: 100% !important;
    margin: 0 auto !important;   
  }

  .section-curved h2{
    display: block;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
}
/* ===== Compactar header + curva en responsive (≤ 992px) ===== */
@media (max-width: 991.98px){
  .section-header{ padding-top: 60px; padding-bottom: 12px; }
  .section-header .row{ align-items: flex-start !important; }
  .img-pajarito-animada{
    top: 0 !important;          
    width: 60% !important;
    max-width: 240px;
    margin: 0 auto 12px;       
  }
  /* Título y párrafo: sin colas de espacio */
  .section-header h1{ margin-bottom: 8px !important; padding-bottom: 0 !important; }
  .section-header p{ margin-bottom: 0 !important; }
  /* CURVA: menos altura y pegada al header */
  .section-curved .curved{
    height: auto !important;         
    padding: 20px 16px 28px !important; 
    margin-top: 0 !important;         
  }
  .section-curved{ margin-top: -12px; }   
}

/* === Comunicación y Fidelización: centrar todo el bloque === */
#comunicacion-fidelizacion .col-md-8.offset-md-2{
  margin-left: auto;               
  margin-right: auto;
}
#comunicacion-fidelizacion .d-grid-start{
  place-items: center !important;  
}
#comunicacion-fidelizacion .texto-destacado{
  width: min(700px, 95%) !important;
  margin-inline: auto !important;
  text-align: center;
}
#comunicacion-fidelizacion .texto-destacado > p{
  margin-left: auto;
  margin-right: auto;
}
#comunicacion-fidelizacion .texto-destacado ul{
  display: inline-block;
  text-align: left;
  padding-left: 1.1rem;
  margin: .75rem auto 0;
}
@media (max-width: 992px){
  #comunicacion-fidelizacion .texto-destacado{
    width: 100% !important;
    padding-inline: 16px;
  }
}

#footer {
  display: none !important;
}

@media (max-width: 991.98px){ /* tablets y móviles */
  img[alt="programación html"],
  img[alt="html css collage"] {
    display: none !important;
  }
}

/* Responsive: sección Diseño gráfico Producción 2D en blanco con texto negro */
@media (max-width: 991.98px){
  .section-6{
    background-color: #fff !important; /* fondo blanco */
  }
  .section-6 h2,
  .section-6 p,
  .section-6 li{
    color: #000 !important;            /* texto negro */
  }
  .section-6 .bg-gray,
  .section-6 .bg-dark{
    background-color: transparent !important; /* quitar fondos de columnas */
  }
}

@media (max-width: 768px){
  .section-header .contenido-aparece{
    padding-left: 1rem;   /* ≈16px de espacio lateral */
    padding-right: 1rem;  /* opcional para que no quede pegado a la derecha */
  }
}
/* Global: subir tamaño de texto en tablet y móvil (≤991.98px) */
@media (max-width: 991.98px){
  html body p,
  html body li,
  html body .contenido-texto-centrado p,
  html body #principales-servicios p,
  html body #principales-servicios li,
  html body .accordion-content,
  html body .section-header p {
    font-size: clamp(1.8rem, 2.2vw, 1.6rem) !important;
    line-height: 1.6 !important;
  }
}

/* Por defecto: mostrar multi-línea, ocultar 1-línea */
.formulario-contacto .titulo-responsive { display: none; }
.formulario-contacto .titulo-multilinea { display: block; }

/* Móvil / tablet: ocultar multi-línea y mostrar 1-línea */
@media (max-width: 768px){
  .formulario-contacto .titulo-multilinea { display: none !important; }

  .formulario-contacto .titulo-responsive{
    display: block !important;
    /* estilos móviles */
    text-align: center !important;
    color: #fff !important;
    white-space: nowrap;              /* fuerza una sola línea */
    font-size: clamp(1.6rem, 8vw, 2.2rem);
    margin: 0;
  }
}
/* Móvil y tablet: título de contacto en una sola línea */
@media (max-width: 991.98px){
  .formulario-contacto h2 br{ display:none !important; }   /* oculta los <br>   */
  .formulario-contacto h2 span{ display:inline !important; }/* spans en línea   */
  .formulario-contacto h2{ 
    white-space: nowrap;             /* fuerza una sola línea */
    text-align: center !important;   /* opcional: centrado */
    font-size: clamp(1.6rem, 8vw, 2.2rem);
  }
}
/* Sección de formulario como footer */
.formulario-contacto {
  padding-top: 3rem !important;      /* espacio arriba en desktop */
  padding-bottom: 0;      /* pegado abajo como footer */
}

/* En móvil/tablet puedes ajustar si quieres menos espacio */
@media (max-width: 991.98px){
  .formulario-contacto {
    padding-top: 2rem;    /* un poco más compacto en mobile */
    padding-bottom: 0;
  }
}

/* Responsive: imagen de Gestión contenidos ocupa todo el ancho */
@media (max-width: 991.98px){
  .col-md-6 img[alt="imagen gestión contenidos"]{
    width: 100% !important;       /* que use todo el ancho */
    height: auto;                 /* mantiene proporción */
    object-fit: cover;            /* rellena bien */
    display: block;
  }

  /* Si quieres que tenga altura fija tipo banner */
  .col-md-6 img[alt="imagen gestión contenidos"]{
    height: clamp(220px, 60vw, 400px) !important;
  }
}
/* Responsive: imagen de Gestión contenidos ocupa todo el ancho */
@media (max-width: 991.98px){
@media (max-width: 991.98px){
  .col-md-6 img[alt="imagen gestión contenidos"]{
    width: 100% !important;
    height: 500px !important;     /* ajusta según lo largo que quieras */
    object-fit: cover !important; /* recorta para llenar sin deformar */
    object-position: center;      /* centra el encuadre */
    display: block;
  }
}

  /* Si quieres que tenga altura fija tipo banner */
  .col-md-6 img[alt="imagen gestión contenidos"]{
    height: clamp(220px, 60vw, 400px) !important;
  }
}
@media (max-width: 991.98px){
  .col-md-6.p-5.d-flex img[alt="íconos de redes sociales"]{
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
}
/*+++++++++++++++++++++++++++++++++++++++++++++ SANGRIAS++++++++++++++++++++++++++++++++++++++++ */
#principales-servicios1 .contenido-texto-centrado{
  width: 50%;           /* “media columna”, como la imagen */
  margin-left: 10%;     /* 20% de la col = 10% del contenedor */
  padding-left: 0 !important;
  text-align: left !important;
}

/* En responsive: ocupar todo el ancho y un respiro lateral */
@media (max-width: 991.98px){
  #principales-servicios1 .contenido-texto-centrado{
    width: 100%;
    margin-left: 0;
    padding: 0 16px !important;
  }
}
/* Alinear el título con la imagen */
#diseno-desarrollo-web .title-servicios{
  margin-left: 20%;     /* igual que el párrafo anterior */
  padding-left: 0 !important;
  text-align: left !important;
}

/* Responsive: que quede centrado en móvil */
@media (max-width: 991.98px){
  #diseno-desarrollo-web .title-servicios{
    margin-left: 0;
    text-align: center !important;
    padding: 0 16px !important;
  }
}
/* Alinear el título de Producción 2D con 20% desde la izquierda */
.section-6 .title-produccion {
  margin-left: 15%;
  padding: 0 !important;
  text-align: left !important;
}

/* Responsive: centrar en móviles */
@media (max-width: 991.98px){
  .section-6 .title-produccion {
    margin-left: 0;
    text-align: center !important;
    padding: 0 16px !important;
  }
}

#menu .menu-wrap > div a {
  display: block;
  margin-left: 5%;      /* igual que los títulos anteriores */
  text-align: left; 
}

/* En responsive: centrado y sin sangría extra */
@media (max-width: 991.98px){
  #menu .menu-wrap > div a {
    margin-left: 0;
    text-align: center;
  }
}
/* Alinear bloque completo y título al 20% */
#ciberseguridad .col-md-7 > .w-75{
  width: auto;            /* deja que tome el ancho del contenedor */
  margin-left: 15%;       /* MISMA guía que el resto */
  margin-right: 0;        /* evita centrar */
}

#ciberseguridad .title-servicios{
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: 0 !important;     /* anula py-5 */
  padding-bottom: 0 !important;  /* anula py-5 */
  text-align: left !important;
}

/* Responsive: volver a ancho completo y centrado */
@media (max-width: 991.98px){
  #ciberseguridad .col-md-7 > .w-75{
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding: 0 16px;
  }
  #ciberseguridad .title-servicios{
    text-align: center !important;
  }
}
/* Alinear al 20% como los demás */
#sitios-web .titulo-sitios {
  margin-left: 8%;
  text-align: left !important;
  padding: 0 !important;
}

/* Responsive: centrado en móvil */
@media (max-width: 991.98px){
  #sitios-web .titulo-sitios {
    margin-left: 0;
    text-align: center !important;
    padding: 0 16px !important;
  }
}
/* Subtítulo h3 */
#sitios-web .subtitulo-sitios {
  margin-left: 8% !important; 
  text-align: left !important;
  max-width: 60ch; /* opcional: limitar ancho para mejor legibilidad */
}
.horizontal-accordion .accordion-content p {
  color: #fff !important;
}
#colophon, #footer, .site-footer, .site-info, .footer-widgets{
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
}
#menu .menu-links {
  display: flex;
  justify-content: flex-end; /* sigue a la derecha */
  align-items: center;       /* centra verticalmente */
}
hr {
  margin: 0 !important;
}
#comunicacion-fidelizacion { margin-bottom: 0 !important; /* elimina margen inferior */ padding-bottom: 0 !important; /* elimina padding inferior de py-5 */ }
/* Más padding arriba SOLO en móviles (≤575.98px) */

/* SOLO teléfonos */
@media (max-width: 575.98px){
  /* 1) Forzar padding del header con más especificidad */
  body .section-header.position-relative{
    padding-top: 88px !important;   /* ajusta a gusto */
  }

  /* 2) Dar un respiro a la columna de la imagen (opcional pero ayuda) */
  .section-header .col-md-4{
    padding-top: 60px !important;
  }

  /* 3) Evitar que la propia imagen se pegue arriba */
  .section-header .img-pajarito-animada{
    margin-top: 12px !important;
    top: auto !important;           /* anula el top: 60px / -100px previos */
  }
}

/* Tablets chicas 576–768 (si quieres un poquito menos) */
@media (min-width: 576px) and (max-width: 768px){
  body .section-header.position-relative{
    padding-top: 64px !important;
  }
}
/* FIX: subtítulo completo en responsive */
@media (max-width: 991.98px){
  #sitios-web .subtitulo-sitios{
    margin-left: 0 !important;          /* quita la sangría */
    max-width: 100% !important;          /* sin límite por ch */
    width: 100% !important;
    box-sizing: border-box;
    padding: 0 16px !important;          /* respiro lateral */
    text-align: center !important;
    white-space: normal !important;      /* por si hereda nowrap */
    overflow: visible !important;
    line-height: 1.45;                   /* mejora lectura */
  }

  /* por si algún contenedor recorta */
  #sitios-web .container-fluid.page-gutter,
  #sitios-web .row{
    overflow: visible !important;
  }
}

/* móvil chico: tamaño un poco más contenido */
@media (max-width: 575.98px){
  #sitios-web .subtitulo-sitios{
    font-size: clamp(1rem, 4.6vw, 1.2rem);
  }
}
/* ===== CIBERSEGURIDAD: sin espacio arriba + sangría alineada ===== */

/* Desktop (≥992px): sin márgenes/espacios y con sangría como el resto */
@media (min-width: 992px){
  section#ciberseguridad,
  section#ciberseguridad.pt-5{      /* pisa el pt-5 de Bootstrap si quedó en el HTML */
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* Sangría de contenido (ajusta 15% a 8% si tus otras secciones usan 8%) */
  #ciberseguridad .col-md-7 > .w-75{
    width: auto;
    margin-left: 15% !important;    /* ← sangría */
    margin-right: 0 !important;
    padding-left: 0 !important;
  }

  /* Título alineado y sin rellenos extra */
  #ciberseguridad .title-servicios{
    text-align: left !important;
    margin: 0 0 1rem !important;
    padding: 0 !important;
  }
}

/* Mobile/Tablet (≤991.98px): sin espacio arriba y ancho completo con respiro lateral */
@media (max-width: 991.98px){
  section#ciberseguridad,
  section#ciberseguridad.pt-5{
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  #ciberseguridad .col-md-7 > .w-75{
    width: 100% !important;
    margin: 0 !important;           /* sin sangría en mobile */
    padding: 0 16px !important;     /* respiro lateral coherente con el resto */
  }
}
/* ≥ móvil y tablet */
@media (max-width: 991.98px){
  #principales-servicios1 .contenido-texto-centrado p.fw-400{
    /* si ese inline te molesta en mobile, libéralo */
    max-width: none !important;        /* opcional: ocupa todo el ancho */
    width: 100%;
    margin-left: 0 !important;
    padding-left: clamp(20px, 7vw, 48px) !important;  /* ← sangría */
    padding-right: 16px;                                 /* respiro derecho */
    box-sizing: border-box;
  }
}
/* móvil chico: un poco más */
@media (max-width: 575.98px){
  #principales-servicios1 .contenido-texto-centrado p.fw-400{
    padding-left: clamp(24px, 9vw, 56px) !important;
  }
}
/* ===== Ciberseguridad: sangría en textos solo en responsive ===== */
@media (max-width: 991.98px){
  /* Párrafos dentro del bloque de texto */
  #ciberseguridad .col-md-7 > .w-75 > p{
    max-width: none !important;          /* evita tope por ancho */
    width: 100%;
    margin-left: 0 !important;
    padding-left: clamp(20px, 7vw, 48px) !important;  /* ← sangría */
    padding-right: 16px !important;                   /* respiro derecho */
    box-sizing: border-box;
  }
}

/* Móvil chico: un poco más de sangría */
@media (max-width: 575.98px){
  #ciberseguridad .col-md-7 > .w-75 > p{
    padding-left: clamp(24px, 9vw, 56px) !important;
  }
  #ciberseguridad .col-md-7 > .w-75 ul{
    padding-left: clamp(36px, 10vw, 64px) !important;
  }
}