body {
    font-family: Poppins, sans-serif;
    margin: 0;
    padding: 0
}

header {
    background-image: url(img/carpinteria-de-aluminio-imagen-de-casa-con-balcones-de-vidrio.webp);
    height: 100vh;
    background-size: cover;
    background-attachment: fixed;
    background-color: rgba(0, 0, 0, 0.6);
}

.listado>li {
    position: relative;
    display: inline-block
}

.listado>li>a {
    display: block;
    padding: 15px 20px
}

.listado li a:hover {
    color: #0389ff;
    transition: all .3s
}

.submenu {
    position: absolute;
    background: #fff;
    width: 120%;
    text-decoration: none;
    visibility: hidden;
    opacity: 0;
    transition: opacity 1.5s;
    padding: 15px 0
}

.submenu li a {
    display: block;
    padding: 15px;
    color: gray;
    font-family: Poppins, sans-serif
}

.listado li:hover .submenu {
    visibility: visible;
    opacity: 1
}

p {
    font-size: 20px
}

a {
    color: #fff;
    text-decoration: none
}

li {
    list-style: none;
    margin-right: 25px
}

.menu {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 10px
}

.listado {
    display: flex
}

.titular {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 80vh;
}

.titular h1 {
    font-size: 50px;
    margin-bottom: 20px;
    color: #fff;
}
h1 {
  color: #fff;
  text-shadow: 0 2px 6px rgba(0,0,0,0.6);
}


.titular h2.carpinteria {
    font-size: 50px;
    margin-bottom: 20px;
    color: #fff;
}

.titular a.ver {
    font-size: 14px;
    background: #5cb8ff;
    padding: 20px 30px;
    color: #fff;
    text-decoration: none;
}

.titular p {
    font-size: 18px;
    color: #fff;
    margin: 20px 0;
    max-width: 80%;
    text-align: center;
}

a.ver {
    font-size: 14px;
    background: #5cb8ff;
    padding: 20px 30px 20px 30px;
    color: #fff
}

.contenedor {
    max-width: 1280px;
    width: 90%;
    margin: auto
}

h2 {
    text-align: center;
    font-size: 50px;
    font-weight: 600;
    color: #919191
}

h3, h4 {
    text-align: center;
    font-weight: 400;
    font-size: 25px;
    margin: 0;
    color: #919191
}

h4 {
    text-align: center;
    font-weight: 400;
    font-size: 16px;
    font-weight: 600
}

#vidrio-laminado .after::after {
    content: '';
    display: block;
    margin: auto;
    margin-top: 10px;
    width: 100px;
    height: 2px;
    background: #0389ff;
    margin-bottom: 45px
}

#dvh .after::after {
    content: '';
    display: block;
    margin: auto;
    margin-top: 10px;
    width: 100px;
    height: 2px;
    background: #0389ff;
    margin-bottom: 45px
}

#vidrio-templado .after::after {
    content: '';
    display: block;
    margin: auto;
    margin-top: 10px;
    width: 100px;
    height: 2px;
    background: #0389ff;
    margin-bottom: 45px
}

.contenedor-nosotros {
    display: flex;
    justify-content: space-around;
    align-items: center
}

.contenedor-parrafo {
    width: 40%
}

.contenedor-nosotros p {
    color: #8b8b8b
}

#trabajo h4 {
    color: #8b8b8b
}

#trabajo .contenedor {
    display: block;
    width: 90%
}

#trabajo .after::after {
    content: '';
    display: block;
    margin: auto;
    margin-top: 10px;
    width: 100px;
    height: 2px;
    background: #0389ff;
    margin-bottom: 45px
}

#trabajo .botones-work li:hover {
    color: gray
}

#trabajo.card {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap
}

#trabajo .content-card {
    width: 31%;
    box-shadow: 0 0 6px 0 rgba(0, 0, 0, .5);
    overflow: hidden;
    height: 400px
}

.people {
    height: 80%
}

#trabajo .content-card img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

#trabajo .botones-work {
    overflow: hidden
}

#trabajo .botones-work li {
    display: inline-block;
    text-align: center;
    margin-left: 10px;
    margin-bottom: 45px;
    padding: 6px 60px;
    border: 1px solid #0389ff;
    list-style: none;
    color: #0389ff
}

#trabajo .botones-work li:hover {
    background: #0389ff;
    color: #fff;
    cursor: pointer
}

#trabajo .botones-work .active {
    background: #0389ff;
    color: #fff
}

#trabajo .galeria-work {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around
}

#trabajo .cont-work {
    width: 31%;
    box-shadow: 0 0 6px 0 rgba(0, 0, 0, .5);
    height: 300px;
    overflow: hidden;
    margin-bottom: 45px
}

#trabajo .img-work {
    height: 90%;
    width: 100%
}

#trabajo .img-work img {
    height: 100%;
    width: 100%;
    object-fit: cover
}

#trabajo .textos-work {
    height: 10%
}

#trabajo .textos-work h4 {
    line-height: 30px;
    font-weight: 300;
    color: #000;
    margin: 0
}

p.after {
    padding-top: 15px;
    font-size: 20px
}

#contacto {
    text-align: center;
    padding: 50px 0 50px 0
}

.contenedor-contactanos {
    display: flex;
    justify-content: space-around
}

.contactanos {
    width: 25%;
    padding: 38px;
    border-radius: 10px;
    margin-bottom: 40px;
    box-shadow: 0 0 6px 0 rgba(0, 0, 0, .5)
}

.contactanos h4 {
    font-size: 30px;
    color: #40a8fa;
    font-weight: 600;
    margin: 0
}

#contacto .contactanos p {
    color: #8b8b8b;
    justify-content: center;
    font-size: 18px
}

.contactanos img {
    float: right
}

.contactanos a {
    cursor: pointer
}

#contacto .after::after {
    content: '';
    display: block;
    margin: auto;
    margin-top: 10px;
    width: 100px;
    height: 2px;
    background: #0389ff;
    margin-bottom: 45px
}

footer {
    height: 120px
}

#footer .contenedor {
    display: flex;
    width: 90%;
    margin: auto
}

footer img {
    padding-top: 20px
}

#whatsapp a {
    background: 0 0;
    position: fixed;
    top: 85%;
    right: 1%;
    z-index: 999
}

.menu-icon {
    display: none
}
/* ============================================
   SECCIÓN NUESTROS TRABAJOS
   ============================================ */

.trabajos-section {
  padding: 4rem 0;
  background-color: #f8f9fa; /* Fondo claro para diferenciar */
}

.trabajos-section h2 {
  text-align: center;
  font-size: 2.5rem;
  color: #333;
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.section-subtitle {
  text-align: center;
  color: #666;
  font-size: 1.1rem;
  margin-bottom: 3rem;
}

.section-subtitle a {
  color: #46B6FC; /* Tu color de marca */
  text-decoration: none;
  font-weight: 500;
}

.section-subtitle a:hover {
  text-decoration: underline;
}

/* Grid de trabajos */
.trabajos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* Tarjeta individual */
.trabajo-card {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.trabajo-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 20px rgba(0,0,0,0.15);
}

.trabajo-card img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  display: block;
}

/* Información del trabajo */
.trabajo-info {
  padding: 1.5rem;
}

.trabajo-info h3 {
  font-size: 1.25rem;
  color: #333;
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.trabajo-detalle {
  color: #555;
  font-size: 0.95rem;
  line-height: 1.5;
  margin-bottom: 0.5rem;
}

.trabajo-fecha {
  color: #888;
  font-size: 0.85rem;
  margin-bottom: 1rem;
}

/* Etiqueta de tipo de trabajo */
.trabajo-tag {
  display: inline-block;
  background-color: #46B6FC;
  color: #fff;
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Tarjeta especial para equipo/taller */
.equipo-card .trabajo-tag {
  background-color: #333;
}

/* CTA final */
.trabajos-cta {
  text-align: center;
  margin-top: 3rem;
}

.btn-presupuesto {
  display: inline-block;
  background-color: #46B6FC;
  color: #fff;
  padding: 1rem 2rem;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 600;
  font-size: 1.1rem;
  transition: background-color 0.3s ease;
}

.btn-presupuesto:hover {
  background-color: #3a9fd9;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
  .trabajos-section h2 {
    font-size: 2rem;
  }
  
  .trabajos-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .trabajo-card img {
    height: 200px;
  }
}

@media (max-width: 480px) {
  .trabajos-section {
    padding: 2rem 0;
  }
  
  .trabajo-info {
    padding: 1rem;
  }
  
  .btn-presupuesto {
    width: 90%;
    padding: 0.875rem 1.5rem;
  }
}
@media(max-width: 800px) {
    nav {
        position: absolute;
        top: 70px;
        left: 0;
        width: 100%;
        display: none;
    }

    nav .listado {
        flex-direction: column;
        display: flex;
        background: #5cb8ff
    }

    .menu-icon {
        display: block;
        width: 25px
    }

    .submenu {
        width: 100%
    }

    .contenedor-nosotros {
        flex-direction: column;
        width: 90%;
        margin: auto
    }

    .contenedor-nosotros img {
        width: 100%
    }

    .contenedor-parrafo {
        width: 90%
    }

    .contenedor-contactanos {
        flex-direction: column
    }

    .contactanos {
        width: 72%;
        margin: auto;
        margin-bottom: 15px
    }

    h2 {
        font-size: 38px
    }

    h3 {
        font-size: 22px
    }

    #trabajo .galeria-work {
        flex-direction: column
    }

    #trabajo .cont-work {
        width: 100%
    }

    #trabajo .botones-work ul {
        padding: 0;
        margin: 0
    }

    #trabajo .botones-work li {
        padding: 5px 20px
    }

    .contenedor-publicaciones {
        flex-direction: column
    }

    .publicacion {
        width: 85%;
        margin: auto
    }
}

@media(min-width: 700px)and (max-width:900px) {
    header {
        height: 53vh
    }

    .contenedor-nosotros img {
        width: 90%
    }
}

.gallery {
    background: #f2f2f2;
}

a.contacto {
    color: #46B4FB;
}

a.templado {
    color: #46B4FB;
}

#whatsapp a {
    background: 0 0;
    position: fixed;
    top: 78%;
    right: 1%;
    z-index: 999 !important
}

.no-submenu a {
    padding: 0;
}

.submenu {
    padding: 0px 0px 40px 0px;
}

/* ===== Enlaces base (visibles y accesibles) ===== */
/* ===== Enlaces dentro de textos descriptivos ===== */
/* ---- Enlaces internos dentro de las secciones ---- */
.contenedor-parrafo a {
    color: #0077b6;
    /* azul profesional */
    text-decoration: none;
    /* sin subrayado */
    font-weight: 500;
    /* un poco más marcado */
    transition: color 0.3s ease;
    /* efecto suave al pasar el mouse */
}

.contenedor-parrafo a:hover {
    color: #005f8a;
    /* tono más oscuro al pasar */
    text-decoration: underline;
    /* aparece subrayado solo al hover */
}

/* Accesible helper */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    clip: rect(0,0,1px,1px);
    overflow: hidden;
    white-space: nowrap
}

/* Botón hamburguesa */
.menu-toggle {
    background: transparent;
    border: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px
}

.menu-toggle img {
    width: 28px;
    height: 28px;
    display: block
}

#site-nav {
    display: none
}

@media (min-width: 992px) {
    .menu-toggle {
        display:none
    }

    #site-nav {
        display: block !important
    }
}

/* Móvil: nav oculto por defecto */
#site-nav {
    display: none
}

/* Desktop: mostrar nav SIEMPRE y ocultar botón */
@media (min-width: 992px) {
    .menu-toggle {
        display:none
    }

    #site-nav {
        display: block !important
    }

    /* fuerza visibilidad en desktop */
}

/* (opcional) Submenú básico en desktop al pasar el mouse */
@media (min-width: 992px) {
    .submenu {
        display:none;
        position: absolute;
        z-index: 10
    }

    .listado > li {
        position: relative
    }

    .listado > li:hover > .submenu {
        display: block
    }
}/* ===== Footer tipo "laminados" ===== */
footer{
  height: auto;             /* importante: en tu CSS tenías height:120px */
  padding: 30px 0;
}

.contenedor-footer{
  max-width: 1280px;
  width: 90%;
  margin: auto;
  text-align: center;
}

.contenedor-footer h4{
  font-size: 20px;
  color: #919191;
  margin: 0 0 8px;
  font-weight: 600;
}

.contenedor-footer p{
  margin: 8px 0;
  color: #8b8b8b;
  font-size: 16px;
}

.contenedor-footer a{
  color: #0077b6;
  text-decoration: none;
  font-weight: 500;
}

.contenedor-footer a:hover{
  text-decoration: underline;
}

.footer-links,
.footer-redes{
  margin-top: 12px;
}

.footer-copy{
  margin-top: 15px;
  font-size: 14px;
  color: #8b8b8b;
}

/* =========================
   QUIÉNES SOMOS (OVERRIDE SEGURO)
   Solo afecta esta página
   ========================= */

.page-quienes header{
  height: 55vh;                 /* NO 100vh */
  background-attachment: scroll;/* evita efecto raro en móvil */
  background-position: center;
}

.page-quienes .titular{
  height: 55vh;                 /* acompaña el header */
  justify-content: center;
}

.page-quienes .titular h1{
  font-size: 44px;              /* más armónico */
}

.page-quienes .titular p{
  font-size: 18px;
  max-width: 900px;
}

/* El global p=20px es demasiado para internas */
.page-quienes main p{
  font-size: 16px;
  line-height: 1.75;
  color: #333;
}

/* El global h2=50px y gris queda feo en internas */
.page-quienes main h2{
  font-size: 34px;
  color: #333;
  margin: 0 0 18px;
}

/* Secciones con aire razonable */
.page-quienes main section{
  padding: 56px 0;
}

/* Evitar que el flex global te “desarme” el diseño */
.page-quienes main .contenedor-nosotros{
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 28px;
  align-items: center;
}

/* Texto no tan angosto */
.page-quienes main .contenedor-parrafo{
  width: auto;                  /* anula el width:40% global */
}

/* Imágenes mejor presentadas */
.page-quienes main .contenedor-nosotros img{
  width: 100%;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(0,0,0,.10);
}

/* Links dentro de texto (vos ya lo tenés, lo mantengo bien) */
.page-quienes main .contenedor-parrafo a{
  color: #0077b6;
}

/* Botón dentro del main (sin tocar el del hero) */
.page-quienes main a.ver{
  padding: 14px 20px;
  border-radius: 999px;
}

/* Responsive */
@media (max-width: 800px){
  .page-quienes header{ height: 48vh; }
  .page-quienes .titular{ height: 48vh; }
  .page-quienes main .contenedor-nosotros{
    grid-template-columns: 1fr;
  }
}
/* Solo para la home: CTA dentro de Nosotros */
#nosotros .nosotros-cta{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  justify-content:flex-start;
  margin-top:14px;
}

/* Botón secundario */
#nosotros .ver.ver-sec{
  background: transparent;
  border: 1px solid #5cb8ff;
  color: #5cb8ff;
}
#nosotros .ver.ver-sec:hover{
  background:#5cb8ff;
  color:#fff;
}
/* ===== Fix botones sección Nosotros HOME ===== */
#nosotros .ver {
  background: #0389ff;   /* color real de tu marca */
  color: #fff;
  text-decoration: none !important;
  border: 1px solid #0389ff;
  transition: all .3s ease;
}

#nosotros .ver:hover {
  background: #0276d8;
  color: #fff !important;
  text-decoration: none !important;
}

/* Botón secundario */
#nosotros .ver-sec {
  background: transparent;
  color: #0389ff;
  border: 1px solid #0389ff;
}

#nosotros .ver-sec:hover {
  background: #0389ff;
  color: #fff !important;
}