/* ==================================================
   RESET BÁSICO
================================================== */

*{
box-sizing:border-box;
margin:0;
padding:0;
}

html{
scroll-behavior:smooth;
}

body{
font-family:Arial, Helvetica, sans-serif;
line-height:1.6;
color:#e6e6e6;
background:#121212;
}

/* ==================================================
   ENLACES
================================================== */

a{
color:#4ea1ff;
text-decoration:none;
}

a:hover{
text-decoration:underline;
}

/* ==================================================
   HEADER / NAV
================================================== */

header{
width:100%;
border-bottom:1px solid #2a2a2a;
background:#1a1a1a;
}

/* CONTENEDOR PRINCIPAL */

.nav-main{
max-width:1200px;
margin:0 auto;
padding:12px 16px;
display:flex;
justify-content:space-between;
align-items:flex-start;
gap:20px;
}

/* LOGO */

.nav-left img{
max-width:175px;
height:auto;
}

/* BLOQUE DERECHO */

.nav-right{
display:flex;
flex-direction:column;
align-items:flex-end;
gap:6px;
}

/* TELÉFONO */

.nav-phone{
font-weight:bold;
font-size:16px;
white-space:nowrap;
color:#e6e6e6;
}

/* BOTÓN HAMBURGUESA */

.nav-toggle{
display:none;
font-size:28px;
background:none;
border:none;
cursor:pointer;
color:#e6e6e6;
}

/* MENÚ PC */

.nav-menu ul{
list-style:none;
display:flex;
gap:20px;
}

.nav-menu li{
white-space:nowrap;
}

.nav-menu a{
color:#e6e6e6;
}

.nav-menu a:hover{
color:#4ea1ff;
}

/* ==================================================
   HERO
================================================== */

#hero{
padding:60px 20px;
background:linear-gradient(135deg,#1b1b1b,#101010);
border-bottom:1px solid #2a2a2a;
text-align:center;
}

#hero h1{
font-size:2.4rem;
margin-bottom:10px;
}

#hero h2{
font-size:1.3rem;
font-weight:normal;
margin-bottom:20px;
color:#bdbdbd;
}

#hero p{
max-width:900px;
margin:0 auto 15px;
}

#hero ul{
list-style:none;
margin:20px 0;
}

#hero li{
margin-bottom:6px;
}

/* CTA */

#hero a[href^="tel"]{
display:inline-block;
background:#4ea1ff;
color:#fff;
padding:12px 22px;
margin-right:10px;
border-radius:6px;
font-weight:bold;
}

#hero a[href^="tel"]:hover{
background:#2e83e6;
text-decoration:none;
}

#hero a[href^="#"]{
display:inline-block;
border:2px solid #4ea1ff;
padding:10px 20px;
border-radius:6px;
font-weight:bold;
}

#hero a[href^="#"]:hover{
background:#4ea1ff;
color:#fff;
text-decoration:none;
}

/* ==================================================
   CONTENIDO GENERAL
================================================== */

main{
max-width:1200px;
margin:0 auto;
padding:20px;
}

main section{
padding:40px 0;
border-bottom:1px solid #2a2a2a;
}

main section:last-child{
border-bottom:none;
}

main h2{
font-size:1.6rem;
margin-bottom:15px;
text-align:center;
}

main h3{
font-size:1.2rem;
margin:20px 0 8px;
}

main p,
main ul{
max-width:900px;
margin:0 auto 12px;
}

/* ==================================================
   VIDEO
================================================== */

.section-video{
max-width:900px;
margin:0 auto 60px;
padding:0 20px;
text-align:center;
}

.section-video .video-title{
margin-bottom:20px;
font-size:1.8rem;
}

.section-video .video-title a{
text-decoration:none;
color:#4ea1ff;
}

.section-video video{
width:100%;
max-width:520px;
display:block;
margin:0 auto;
border-radius:8px;
}

/* ==================================================
   FORMULARIO
================================================== */

#formulario{
max-width:700px;
margin:0 auto;
}

#formulario input,
#formulario textarea{
width:100%;
padding:10px;
margin-bottom:10px;
border:1px solid #333;
background:#1a1a1a;
color:#e6e6e6;
font-size:1rem;
border-radius:4px;
}

#formulario input:focus,
#formulario textarea:focus{
outline:none;
border-color:#4ea1ff;
}

#formulario button{
padding:10px 20px;
background:#4ea1ff;
color:#fff;
border:none;
cursor:pointer;
border-radius:4px;
}

#formulario button:hover{
background:#2e83e6;
}

/* ==================================================
   MODELOS SALVAESCALERAS
================================================== */

#modelos h2{
text-align:center;
margin-bottom:40px;
}

.modelos-grid{
max-width:1100px;
margin:0 auto;
display:grid;
grid-template-columns:repeat(3,1fr);
gap:40px;
}

.modelo{
text-align:center;
background:#1c1c1c;
padding:25px;
border-radius:10px;
box-shadow:0 6px 20px rgba(0,0,0,0.6);
transition:transform .25s, box-shadow .25s;
}

.modelo:hover{
transform:translateY(-5px);
box-shadow:0 10px 30px rgba(0,0,0,0.8);
}

.modelo h3{
font-size:1.2rem;
margin-bottom:5px;
}

.modelo p{
margin-bottom:15px;
color:#bdbdbd;
}

.modelo img{
width:100%;
max-width:260px;
height:auto;
margin:auto;
display:block;
}

/* ==================================================
   FOOTER
================================================== */

footer{
background:#161616;
padding:30px 20px;
font-size:0.9rem;
border-top:1px solid #2a2a2a;
}

footer section{
margin-bottom:20px;
}

footer ul{
list-style:none;
}

footer li{
margin-bottom:6px;
}

/* ==================================================
   WHATSAPP FLOTANTE
================================================== */

#whatsapp-fijo{
position:fixed;
bottom:3%;
left:20px;
z-index:2147483647;
display:block;
}

#whatsapp-fijo img{
width:56px;
height:auto;
display:block;
}


.btn-enviar{
background:#25D366;
color:#fff;
border:none;
padding:14px;
font-weight:bold;
border-radius:8px;
cursor:pointer;
width:100%;
font-size:18px;
box-shadow:0 5px 15px rgba(0,0,0,.4);
}

.btn-enviar:hover{
background:#1ebe5d;
}
/* ==================================================
   RESPONSIVE
================================================== */

@media (max-width:900px){

.modelos-grid{
grid-template-columns:1fr 1fr;
}

}

@media (max-width:768px){

.nav-main{
flex-direction:column;
align-items:flex-start;
}

.nav-right{
width:100%;
align-items:flex-start;
}

.nav-toggle{
display:block;
}

.nav-menu{
display:none;
width:100%;
}

.nav-menu.open{
display:block;
}

.nav-menu ul{
flex-direction:column;
width:100%;
}

.nav-menu li{
padding:12px 0;
border-top:1px solid #2a2a2a;
}

#hero h1{
font-size:1.8rem;
}

#hero h2{
font-size:1.1rem;
}

#hero a{
display:block;
margin-bottom:10px;
}

.section-video .video-title{
font-size:1.5rem;
}

}

@media (max-width:600px){

.modelos-grid{
grid-template-columns:1fr;
}

}
.oferta-mes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem 1rem;
  max-width: 760px;
  margin: 1.25rem auto;
  padding: 1rem 1.25rem;
  color: #172033;
  background: linear-gradient(135deg, #fff8d6, #ffe082);
  border: 2px solid #d99b00;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(105, 72, 0, 0.2);
}

.oferta-mes__etiqueta {
  padding: 0.3rem 0.7rem;
  color: #fff;
  background: #9b1c1c;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.oferta-mes__texto {
  flex: 1 1 260px;
  font-size: clamp(1.1rem, 2.4vw, 1.45rem);
  line-height: 1.25;
}

.oferta-mes__cta {
  display: inline-block;
  padding: 0.65rem 1rem;
  color: #fff;
  background: #8a1717;
  border-radius: 8px;
  font-weight: 800;
  text-decoration: none;
}

.oferta-mes__cta:hover,
.oferta-mes__cta:focus {
  color: #fff;
  background: #651010;
}

.form-oferta {
  margin: 0 0 1rem;
  padding: 0.75rem;
  color: #5c2600;
  background: #fff4c2;
  border-left: 5px solid #d99b00;
  border-radius: 6px;
}

.form-oferta span,
.form-oferta strong {
  display: block;
}

.migas-seo {
  max-width: 1180px;
  margin: 1rem auto;
  padding: 0 1rem;
  font-size: 0.95rem;
}

.migas-seo ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.migas-seo li:not(:last-child)::after {
  margin-left: 0.35rem;
  color: #777;
  content: "›";
}

.migas-seo [aria-current="page"] {
  color: #444;
  font-weight: 700;
}

.faq-local {
  max-width: 980px;
  margin: 2.5rem auto;
  padding: 0 1rem;
}

.faq-local h2 {
  margin-bottom: 1.25rem;
  text-align: center;
}

.faq-local details {
  margin-bottom: 0.75rem;
  padding: 1rem 1.15rem;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}

.faq-local summary {
  color: #222;
  cursor: pointer;
  font-size: 1.08rem;
  font-weight: 800;
}

.faq-local details p {
  margin: 0.8rem 0 0;
  line-height: 1.65;
}