/* =====================================================================
   Destapes y Plomeria - Rendimiento, navegacion movil y accesibilidad
   Marca: #004b77 | Acento: #f7931e | Texto: #293133
   Hero estatico, fachadas de video, menu movil y foco visible.
   ===================================================================== */

/* ---------- utilidades ---------- */
.gtm-oculto{display:none;visibility:hidden;}

.salto-contenido{
  position:absolute;left:-9999px;top:0;z-index:100000;
  padding:10px 18px;background:#004b77;color:#fff;
  font-weight:700;text-decoration:none;border-radius:0 0 8px 0;
}
.salto-contenido:focus{left:0;color:#fff;}

a:focus-visible,
button:focus-visible{
  outline:3px solid #f7931e;
  outline-offset:2px;
}

/* ---------- Hero estatico (reemplaza el slider) ---------- */
.hero{
  position:relative;
  background:#00263a;
  overflow:hidden;
}
.hero__img{
  display:block;
  width:100%;
  height:420px;
  object-fit:cover;
  opacity:.62;
}
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(0,32,50,.88) 0%,rgba(0,32,50,.72) 55%,rgba(0,32,50,.45) 100%);
}
@media (max-width:600px){
  .hero::after{background:linear-gradient(180deg,rgba(0,32,50,.72) 0%,rgba(0,32,50,.86) 45%,rgba(0,32,50,.92) 100%);}
}
.hero__caja{
  position:absolute;
  inset:0;
  z-index:2;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding-top:24px;
  padding-bottom:24px;
  color:#fff;
}
.hero h1{
  margin:0 0 12px;
  color:#fff;
  font-size:38px;
  font-weight:800;
  line-height:1.15;
  text-shadow:0 2px 10px rgba(0,0,0,.45);
}
.hero__texto{
  max-width:640px;
  margin:0 0 20px;
  color:#f2f7fa;
  font-size:17px;
  line-height:1.6;
  text-shadow:0 1px 8px rgba(0,0,0,.5);
}
.hero__botones{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-bottom:18px;
}
.hero__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:12px 22px;
  border-radius:999px;
  font-size:16px;
  font-weight:700;
  text-decoration:none;
}
.hero__btn:hover,
.hero__btn:focus{text-decoration:none;}
.hero__btn--tel{background:#f7931e;color:#1b1b1b;}
.hero__btn--tel:hover,
.hero__btn--tel:focus{background:#ffa733;color:#1b1b1b;}
.hero__btn--wa{background:#0f8a3d;color:#fff;}
.hero__btn--wa:hover,
.hero__btn--wa:focus{background:#0c7534;color:#fff;}
.hero__chips{
  display:flex;
  flex-wrap:wrap;
  gap:10px 22px;
  margin:0;
  padding:0;
  list-style:none;
  font-size:14px;
  color:#e6eef4;
}
.hero__chips li::before{
  content:"\2713";
  margin-right:6px;
  color:#8fd3a5;
  font-weight:700;
}

@media (max-width:991px){
  .hero__img{height:460px;}
  .hero h1{font-size:30px;}
  .hero__texto{font-size:16px;}
}
@media (max-width:600px){
  .hero__img{height:560px;opacity:.55;}
  .hero h1{font-size:26px;}
  .hero__texto{font-size:15px;margin-bottom:16px;}
  .hero__btn{width:100%;}
  .hero__chips{font-size:13px;gap:6px 16px;}
}

/* ---------- Fachada de videos de YouTube ---------- */
.yt-fachada{
  position:relative;
  width:100%;
  padding-top:56.25%;
  background:#000;
  border-radius:6px;
  overflow:hidden;
}
.yt-fachada__btn{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  padding:0;
  border:0;
  background:none;
  cursor:pointer;
}
.yt-fachada__img{
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.85;
  transition:opacity .2s ease, transform .3s ease;
}
.yt-fachada__btn:hover .yt-fachada__img,
.yt-fachada__btn:focus .yt-fachada__img{opacity:1;transform:scale(1.03);}
.yt-fachada__play{
  position:absolute;
  top:50%;left:50%;
  width:64px;height:44px;
  margin:-22px 0 0 -32px;
  border-radius:10px;
  background:#e02f2f;
}
.yt-fachada__play::after{
  content:"";
  position:absolute;
  top:50%;left:50%;
  margin:-9px 0 0 -6px;
  border-style:solid;
  border-width:9px 0 9px 15px;
  border-color:transparent transparent transparent #fff;
}
.yt-fachada__texto{
  position:absolute;
  left:0;right:0;bottom:0;
  padding:10px 12px;
  background:linear-gradient(transparent,rgba(0,0,0,.75));
  color:#fff;
  font-size:13px;
  line-height:1.35;
  text-align:left;
}
.yt-fachada iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}
/* Dentro de los contenedores del tema (que ya reservan la altura del video
   con padding), la fachada llena el hueco en vez de sumar su propia altura. */
.videoResponsive > .yt-fachada,
.videoResponsives > .yt-fachada,
.video-responsive > .yt-fachada{
  position:absolute;
  inset:0;
  height:100%;
  padding-top:0;
  border-radius:0;
}

/* ---------- Menu movil y submenus ---------- */
.submenu-toggle{
  position:absolute;
  top:0;right:0;
  width:52px;
  height:46px;
  padding:0;
  border:0;
  border-left:1px solid rgba(255,255,255,.18);
  background:transparent;
  color:inherit;
  font-size:18px;
  line-height:46px;
  cursor:pointer;
}
.submenu-toggle::before{content:"\25BC";display:inline-block;transition:transform .2s ease;}
.submenu-toggle[aria-expanded="true"]::before{transform:rotate(180deg);}

@media (max-width:991px){
  .navbar-nav .dropdown-menu li,
  .navbar-nav > li{position:relative;}
  .navbar-nav a{
    min-height:46px;
    padding-top:12px;
    padding-bottom:12px;
    padding-right:56px;
  }
  .navbar-nav .dropdown-menu ul{
    display:none;
    margin:0;
    padding-left:16px;
    list-style:none;
  }
  .navbar-nav li.submenu-abierto > ul{display:block;}
  .navbar-collapse{max-height:78vh;overflow-y:auto;}
  .navbar-toggle{min-height:44px;}
}

/* ---------- Escritorio: submenu sin zona fantasma ---------- */
@media (min-width:992px){
  .navbar-nav .dropdown-menu li{position:relative;}
  .navbar-nav .dropdown-menu li > ul{
    display:none;
    position:absolute;
    top:0;
    left:100%;
    min-width:250px;
    margin:0;
    padding:6px 0;
    list-style:none;
    background:#fff;
    box-shadow:0 8px 24px rgba(0,43,70,.18);
    z-index:1000;
  }
  .navbar-nav .dropdown-menu li:hover > ul,
  .navbar-nav .dropdown-menu li:focus-within > ul{display:block;}
  .navbar-nav .dropdown-menu li > ul a{
    display:block;
    padding:8px 16px;
    color:#293133;
    white-space:normal;
  }
  .navbar-nav .dropdown-menu li > ul a:hover,
  .navbar-nav .dropdown-menu li > ul a:focus{background:#eef4f8;color:#004b77;}
  .submenu-toggle{display:none;}
}

/* ---------- Mensajes del formulario ---------- */
.texto-error{color:#c0392b;}

/* ---------- Clases que sustituyen estilos en linea heredados ---------- */
.texto-negro{color:#000;}
.texto-20{font-size:20px;}
.bloque-destacado{padding:0 40px 20px;font-size:16px;}
.titulo-grupo{
  display:block;
  padding:6px 0;
  color:#004b77;
  font-weight:700;
}
.sin-enlace{display:inline-block;}

/* Titulos de tarjeta que antes eran enlaces sin destino (ahora div.postTitle) */
.blog .blogInner .postExcerpts .postExcerptInner div.postTitle h3,
.blog .blogInner .postExcerpts .postExcerptInner div.postTitle h4,
.blog.row .blogInner .postExcerpts .postExcerptInner div.postTitle h3,
.blog.row .blogInner .postExcerpts .postExcerptInner div.postTitle h4{
  margin-top:0;
  font-size:17px;
  font-weight:700;
  color:#000;
  transition:all .3s ease-in-out;
}
.blog .blogInner:hover .postExcerpts .postExcerptInner div.postTitle h3,
.blog .blogInner:hover .postExcerpts .postExcerptInner div.postTitle h4{
  color:#004b77;
}

/* ---------- Cabecera interna: menos repintado en movil ---------- */
@media (max-width:991px){
  #pageCover8{animation:none;}
}
@media (prefers-reduced-motion:reduce){
  #pageCover8{animation:none;}
  .yt-fachada__btn:hover .yt-fachada__img{transform:none;}
}

/* ---------- Seccion "Servicios especificos": texto corrido + tarjetas ---------- */
.sv-seccion{padding:48px 0 56px;}
.sv-seccion .sectionTitles{margin-bottom:28px;}
.sv-texto{
  max-width:880px;
  margin:0 auto 34px;
  color:#293133;
  font-size:16px;
  line-height:1.75;
}
.sv-texto h2,
.sv-texto h3,
.sv-texto h4{
  margin:0 0 14px;
  color:#004b77;
  font-weight:700;
  line-height:1.3;
}
.sv-texto h2{font-size:26px;}
.sv-texto h3{font-size:22px;}
.sv-texto h4{font-size:19px;margin-top:22px;}
.sv-texto h2 .fa,
.sv-texto h3 .fa,
.sv-texto h4 .fa{margin-left:8px;color:#f7931e;font-size:.85em;}
.sv-texto p{margin:0 0 16px;text-align:left;}
.sv-texto ul,
.sv-texto ol{margin:0 0 18px;padding-left:22px;}
.sv-texto li{margin-bottom:4px;}
.sv-texto ul.tagFeatures{
  display:flex;flex-wrap:wrap;gap:8px;padding:0;list-style:none;
}
.sv-texto ul.tagFeatures li{
  margin:0;padding:6px 12px;border-radius:999px;background:#eef4f8;color:#004b77;font-size:14px;
}
.sv-figura{margin:18px 0 22px;}
.sv-figura img{display:block;max-width:100%;height:auto;border-radius:10px;}

.sv-lista{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  max-width:1100px;
  margin:0 auto 36px;
}
.sv-lista .sv-item{
  margin:0;
  padding:18px 18px 14px;
  background:#fff;
  border:1px solid #dfe8ee;
  border-radius:10px;
}
.sv-lista .sv-item .media-left{padding-right:14px;}
.sv-lista .sv-item .media-left .fa{color:#f7931e;font-size:22px;}
.sv-lista .sv-item h3,
.sv-lista .sv-item h4,
.sv-lista .sv-item h5{margin:0 0 6px;color:#004b77;font-size:17px;font-weight:700;}
.sv-lista .sv-item p{margin:0;color:#535f65;font-size:14px;line-height:1.6;}

.sv-tarjetas{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  max-width:1100px;
  margin:0 auto;
}
.sv-tarjeta{
  padding:22px 24px;
  background:#f4f8fb;
  border-radius:12px;
  border-top:4px solid #004b77;
}
.sv-tarjeta h4,
.sv-tarjeta h5{margin:0 0 10px;color:#004b77;font-size:18px;font-weight:700;line-height:1.35;}
.sv-tarjeta p,
.sv-tarjeta li{color:#293133;font-size:15px;line-height:1.7;}
.sv-tarjeta ul{margin:0;padding:0;list-style:none;}
.sv-tarjeta .fa{width:20px;color:#004b77;}

@media (max-width:991px){
  .sv-lista,
  .sv-tarjetas{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:600px){
  .sv-seccion{padding:36px 0 44px;}
  .sv-texto{font-size:15px;}
  .sv-texto h2{font-size:23px;}
  .sv-texto h3{font-size:20px;}
  .sv-lista,
  .sv-tarjetas{grid-template-columns:1fr;gap:14px;}
}

/* ===== Accesibilidad 2026-09-20: contraste, enlaces en texto, areas tactiles ===== */
/* Texto gris #9c9c9c (contraste 2.7:1) -> #4f5b60 (7.3:1 sobre blanco) */
.widgetS,
#services .whyUs,
#services .whatOffer,
#services .serviceFeature .media .media-body p,
.blog .blogInner .postExcerpts .postExcerptInner p,
.blog.row .blogInner .postExcerpts .postExcerptInner p,
.blog.sinlge-blog .blogInner .postExcerpts .postExcerptInner p,
.blog .blogInner:hover .postExcerpts .postExcerptInner a.readMore,
.recentPostWidget .recentblogs .recentblog .media-body a h5,
#aboutus .member p,
.comments .commentDisplay .comment .media-body,
#contacts ul,
.videodescripcion,
.sv-texto, .sv-lista, .sv-tarjeta, .parrafos, .textsPart p, .fleft p{
  color:#4f5b60;
}
/* Enlaces azul claro sobre fondo gris de tarjeta (4.26:1) -> azul marca */
.sv-tarjeta a, .widgetS a{color:#0b5a8a;}
.sv-tarjeta a:hover, .sv-tarjeta a:focus, .widgetS a:hover, .widgetS a:focus{color:#004b77;}
/* Enlaces dentro de parrafos: no distinguirse solo por color */
main p a:not(.btn):not(.hero__btn):not(.pfw-inline-btn),
main li a:not(.btn):not(.list-group-item),
.sv-texto a:not(.btn), .textsPart a:not(.btn), .fleft a:not(.btn), .widgetS a:not(.btn), .sv-tarjeta a:not(.btn){
  text-decoration:underline;
  text-underline-offset:2px;
  text-decoration-thickness:1px;
}
/* Enlaces de icono: area tactil minima 44x44 */
.control-box a, a[href="#top"], #getInTouch_tab a, .projectIcons a.btn,
footer ul.list-inline li a, #contacts ul.list-inline li a, .socialIcons a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:44px;
  min-height:44px;
}
/* Hero sin imagen de fondo (version plana): la caja fluye y da la altura */
.hero--plano{min-height:420px;display:flex;align-items:center;}
.hero--plano .hero__caja{position:relative;inset:auto;}
@media (max-width:600px){
  .hero--plano{min-height:0;}
}
/* Gris claro rgba(156,156,156,.9) y #747474 en pestañas, acordeón y contacto -> gris oscuro */
.leftAlignedTap ul.nav-tabs li a,
.leftAlignedTap .tab-content .tab-pane,
#hAccordion .panel .panel-collapse .panel-body .texts,
#projects .filters,
#contacts p{
  color:#4f5b60;
}
/* Enlaces azul Bootstrap (#337ab7) sobre fondos claros del contenido -> azul marca 7:1 */
.sv-texto a:not(.btn), .sv-lista a:not(.btn), .parrafos a, #contacts .col-sm-6 a:not(.btn):not(.pfw-inline-btn),
#hAccordion .panel-body a:not(.btn), .leftAlignedTap .tab-pane a:not(.btn){color:#0b5a8a;}
.sv-texto a:not(.btn):hover, .sv-lista a:not(.btn):hover, .parrafos a:hover{color:#004b77;}
/* Enlaces del carrusel de servicios sobre fondo oscuro */
.twitterSlider .item span a{color:#cfe8ff;text-decoration:underline;text-underline-offset:2px;}
.twitterSlider .item span a:hover, .twitterSlider .item span a:focus{color:#fff;}
/* Fila de copyright cuando no va dentro de .container */
#nr_footer .copyrightRow{color:#fff;}
/* Enlaces sueltos dentro de secciones de contenido (paginas sin <main>) */
.parrafos a, .container > a:not(.btn), .container > strong > a, .container > p > a:not(.btn),
#hAccordion .panel-body a:not(.btn), .leftAlignedTap .tab-pane a:not(.btn){
  color:#0b5a8a;text-decoration:underline;text-underline-offset:2px;
}