*{ box-sizing:border-box }
body{ font-family:"Roboto",Sans-Serif; margin:0 }
a{ display:inline-block; text-decoration:none }

.moving-banner{
  position:fixed; top:140px; left:0; width:892px;
  background:#f0eded; color:#5889A9; text-align:center;
  border-radius:20px; padding:10px 0; font-size:15px; z-index:1000;
  white-space:nowrap; animation:moveBanner 30s linear infinite;
}
header.shrink .moving-banner {
  bottom: -40px; top: 106px;
}

@media (prefers-reduced-motion: reduce){
  .moving-banner{ animation:none }
}
@keyframes moveBanner{ 0%{transform:translateX(100%)} 100%{transform:translateX(-100%)} }
@media (max-width:1048px){ .moving-banner{ display:none } }

header {
  padding: 0 0; position: fixed; top: 0; left: 0; z-index: 10;
  background: rgba(240, 237, 237, 1); width: 100%;
  transition: all 0.4s ease;display: flex;
  justify-content: space-between; align-items: center;
}

/* Por defecto oculto en móviles */
header .main-nav {
  position: fixed;
  top: 0;
  right: -100%; /* escondido */
  width: 70%;
  height: 100vh;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 4rem 2rem;
  transition: right 0.3s ease-in-out;
  z-index: 999;
}

/* Cuando está abierto */
header nav.open {
  right: 0; /* se muestra */
}


header nav a {
  color: #5889A9;
  font-size: 1.2rem;
  text-decoration: none;
  font-weight: 500;
  margin: 0 8px;
  padding: 14px 4px;
  transition: all 0.3s ease;

}

header.shrink .main-nav a {
  color: #074E9C;         /* puedes oscurecerlos un poco */
  font-size: 0.95rem;  /* se reduce el tamaño */
  opacity: 0.9;        /* se baja la opacidad */
}

header.shrink {padding: 0 0;background: rgba(240, 237, 237, 0.8); backdrop-filter: blur(6px); height: 110px;}

header .container{ display:flex; justify-content:space-between; align-items:center }

.logo{ height:140px; transition:transform .2s ease }
header.shrink .logo{ transform:scale(.7); filter: drop-shadow(0 0 8px rgba(0,128,255,0.6))
          drop-shadow(0 0 15px rgba(0,128,255,0.6)); }

/* Hamburguesa solo en móvil */
.hamb {
  display: none;
  font-size: 2rem;
  color: #ff0000;
  cursor: pointer;
  z-index: 1000;
}

main{ width:100% }


/* footer*/

footer.seccion {
	background-color: #002b5c;
	color: white;
	padding-bottom: 0px;
}



footer .logo-footer {
 	width: 100%;
}


footer ul {
 	padding-left: 0;
 	list-style: none;
 	margin-left: auto;
}

footer ul li {
 	margin-bottom: 10px;

}

footer p {
 	color: white;
 	margin-bottom: 30px;
}

footer a {
 	color: white;
 }
footer .redes {
 	font-size: 30px;
 	display: flex;
  margin-left: auto;
 }

footer .redes a {
	margin: 0 7.5px;
}

footer .barra-footer {
 background: #074E9C;
  text-align: center;
  padding: 15px;
  font-size: 0.9rem;
  margin-top: 30px;
  border-radius: 6px;
}


/* Botones */
.boton{ text-align:center; padding:10px 15px; border:none; text-shadow:0 1px 5px rgba(0,0,0,.5) }
.boton-rojo{ background:#901003; color:#fff; font-size:20px; font-weight:700; border-radius:30px }
.boton-rojo:hover{ background:#fff; color:#901003 }
.boton-blanco{ background:#fff; color:#901003; font-size:16px; font-weight:700; border:1px solid #901003 }
.boton-blanco:hover{ background:#901003; color:#fff }
.boton-negro{ background:#000; color:#fff; font-size:20px; font-weight:700 }
.boton-negro:hover{ background:#fff; color:#000 }

/* Utilidades */
.seccion{ padding:60px 0 }
.cuadrado-perfecto{ width:100%; padding-bottom:100%; position:relative }
.cuadrado-perfecto img{ width:100%; height:100%; object-fit:cover; position:absolute; top: 0; right: 0; bottom: 0; left: 0; }
.container{ width: 956px; margin:0 auto; padding:0 15px; position:relative }
.container-fluid{ width:100%; padding:0 15px; position:relative }
.row{ display:flex; flex-wrap:wrap; margin:0 -15px; row-gap: 2em }
.columna{ padding:0 21px }
.columna-25{ width:25% }
.columna-33{ width:33.33% }
.columna-41{ width:41.66% }
.columna-50{ width:50% }
.empujar-68{ margin-left:68.33% }

/* CTA ticket */
.cta-ticket{ position:relative }
.bg-ticket{
  background:url(../img/cerraduras-securemme-mul-t-lock-hogar-casa.jpg) fixed no-repeat;
  background-size:cover; background-position:center
}
.overlay-dark:before{
  content:''; background:linear-gradient(-45deg,#5889A9 0%,#5889A9 100%); opacity:.5;
  position:absolute; top: 0; right: 0; bottom: 0; left: 0;
}
.cta-ticket .content-block{ padding:100px 0; text-align:center; color:#fff }
.btn-main-md{ padding:15px 40px; border-radius:25px; background:#ff0000; color:#fff; font-size:22px; box-shadow:0 7px 10px rgba(0,0,0,.3) }
.btn-main-md:hover{ color:#901003; background:#fff }
.img-fluid{ width:100%; margin-left:25% }
.cta-ticket .image-block{ position:absolute; right:25%; bottom:0 }

/* HERO */
.hero{ position:relative }
.hero img{ width:100%; display:block; height: 87vh; }
.bloque-inicio{
  position:absolute; top:36%; left:50%; width:421px; text-align:center; margin-left:-219px
}
.bloque-inicio h1{ color:#fff; font-size:29px; text-shadow:0 5px 10px rgba(0,0,0,1) }
.bloque-inicio p{ color:#fff; text-shadow:0 8px 20px rgba(0,0,0,1); font-size:18px }
.hero-phone a{ color:#fff; text-decoration:underline }

/* Intro (price) */
.price{ width:100%; background:#5889A9; padding:10px }
.price .subtitle{ color:#fff; text-align:center }
.price__container{ display:grid; grid-template-columns:1fr 1fr; gap:2em; align-items:center }
.price__picture{ max-width:100%; margin-bottom:10% }
.price__texts{ align-content:center }
.price__paragraph{ line-height:1.4; margin-bottom:15px; text-align:justify }


/* Servicios destacados */
#servicios {
  background-color: #e0d7d7;  /* gris claro */
  padding: 60px 20px;
  border-radius: 12px;
}

#servicios h2 {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 30px;
  color: #002b5c; /* azul corporativo */
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}

.card {
  background: #002b5c;                 
  border: none;
  padding: 35px 20px;
  border-radius: 16px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
  text-align: center;
  color: #fff;                         
  font-weight: 600;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  transform-style: preserve-3d;
  perspective: 1000px;
  cursor: pointer;
}

/* Icono dentro de la card */
.card-icon {
  font-size: 3rem;                     
  color: #1e90ff;                      
  margin-bottom: 15px;
  transition: transform 0.3s ease, color 0.3s ease;
}

/* Hover con efecto */
.card:hover {
  transform: translateY(-10px) rotateX(6deg) rotateY(6deg);
  box-shadow: 0 15px 30px rgba(0,0,0,0.35);
}

.card:hover .card-icon {
  transform: scale(1.2);
  color: #63b3ff;                      
}

.card h3 {
  font-size: 1.2rem;
  margin: 0;
  color: #fff;
}

/* ==== Modal ==== */
.modal {
  display: flex;            /* ya no usamos display:none */
  opacity: 0;
  visibility: hidden;       /* se oculta visualmente */
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.7);
  z-index: 2000;
  justify-content: center;
  align-items: center;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Modal visible */
.modal.show {
  opacity: 1;
  visibility: visible;
}

/* Contenido del modal */
.modal-content {
  background: #fff;
  padding: 30px;
  border-radius: 12px;
  max-width: 600px;
  width: 90%;
  text-align: center;
  box-shadow: 0 8px 25px rgba(0,0,0,0.3);
  animation: fadeIn 0.4s ease;
  position: relative;
}

/* Botón de cerrar */
.modal .close {
  position: absolute;
  top: 15px; right: 25px;
  font-size: 28px;
  color: #333;
  cursor: pointer;
}

/* Animación */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* === Banner Empresarial === */
.zona-norte-empresarial {background: linear-gradient(to bottom, #f8fafc, #e0f2fe); padding:32px 20px 46px 20px; text-align: center; color: #003366; font-family: 'Poppins', sans-serif;}
.zona-norte-empresarial .titulo-zona { font-size: 2rem; color: #004080; margin-bottom: 15px; font-weight: 700;}
.zona-norte-empresarial .intro-zona { max-width: 800px; margin: 0 auto 40px; font-size: 1.1rem; line-height: 1.7;}
.servicios-zona { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 25px; margin-bottom: 40px;}

.card-servicio { background: #ffffff; border-radius: 12px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); padding: 20px; transition: transform 0.3s ease, box-shadow 0.3s ease;}
.card-servicio:hover { transform: translateY(-8px); box-shadow: 0 8px 16px rgba(0,0,0,0.15);}
.card-servicio img { width: 100%; height: 160px; object-fit: cover; border-radius: 10px; margin-bottom: 15px;}
.card-servicio h3 { font-size: 1.2rem; margin-bottom: 10px; color: #003366;}
.card-servicio p { font-size: 0.95rem; line-height: 1.6;}

.cta-zona { margin-top: 30px;}

.btn-llamar { display: inline-block; background-color: #0077cc; color: #fff; padding: 12px 25px; border-radius: 30px; text-decoration: none; font-weight: 600; transition: background 0.3s ease;}
.btn-llamar:hover { background-color: #005fa3;}


/* === Sección Servicios Empresariales === */
#servicios-empresariales {
  background: #f5f5f5;
  padding: 60px 20px;
  border-radius: 12px;
}

#servicios-empresariales h2 {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 40px;
  color: #002b5c; /* azul corporativo */
}

.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 25px;
}

/* Card estilo con imagen de fondo */
.service-card {
  position: relative;
  display: block;
  height: 280px;
  border-radius: 15px;
  overflow: hidden;
  text-decoration: none;
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  background: #000;
}

.service-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 15px 35px rgba(0,0,0,0.4);
}

.card-image {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  filter: brightness(65%);
  transition: transform 0.5s ease, filter 0.3s ease;
}

.service-card:hover .card-image {
  transform: scale(1.1);
  filter: brightness(80%);
}

/* Texto encima del fondo */
.card-overlay {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
  text-align: center;
  padding: 20px;
  background: rgba(0, 43, 92, 0.35); /* overlay azul semitransparente */
  transition: background 0.3s ease;
}

.service-card:hover .card-overlay {
  background: rgba(0, 43, 92, 0.55);
}

.card-overlay h3 {
  font-size: 1.6rem;
  margin-bottom: 10px;
  font-weight: 700;
  text-shadow: 0 3px 8px rgba(0,0,0,0.5);
}

.card-overlay p {
  font-size: 1rem;
  font-weight: 400;
  text-shadow: 0 2px 6px rgba(0,0,0,0.5);
}

/* Zonas */
#suministros{ margin-top:50px; background:rgba(128,128,128,.55); color:#fff; text-align:center }
#suministros p{ color:#fff; text-align:center; font-size:16px }

/* === FAQ Section === */
.faq-section {
  background: #f5f5f5;
  padding: 60px 20px;
  border-radius: 12px;
}

.faq-section h2 {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 40px;
  color: #002b5c;
}

.faq-grid {
  max-width: 800px;
  margin: 0 auto;
}

.faq-item {
  border-bottom: 1px solid #ddd;
  margin-bottom: 15px;
}

.faq-question {
  width: 100%;
  background: #002b5c;
  color: #fff;
  padding: 15px 20px;
  font-size: 1.1rem;
  font-weight: 600;
  text-align: left;
  border: none;
  outline: none;
  cursor: pointer;
  border-radius: 8px;
  position: relative;
  transition: background 0.3s ease;
}

.faq-question:hover {
  background: #074E9C;
}

.faq-question .icon {
  position: absolute;
  right: 20px;
  font-size: 1.3rem;
  transition: transform 0.3s ease;
}

.faq-answer {
  display: none;
  padding: 15px 20px;
  background: #fff;
  border-radius: 0 0 8px 8px;
  box-shadow: inset 0 4px 6px rgba(0,0,0,0.05);
  font-size: 1rem;
  color: #333;
}

.faq-item.active .faq-answer {
  display: block;
}

.faq-item.active .faq-question .icon {
  transform: rotate(45deg); /* El "+" se convierte en "x" */
}

/* === Sección de contacto === */
.contacto {
  position: relative;
  padding: 60px 20px;
  text-align: center;
  overflow: hidden;
}

.contacto .bg-img {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -1;
  opacity: 0.55;
}

.contacto h2 {
  font-size: 28px;
  margin-bottom: 20px;
  color: #fffdfd;
}

/* === Contenedor del formulario === */
.contacto-contenedor {
  max-width: 700px;
  margin: 0 auto;
  background:#6094b6d7;
  padding: 60px;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}

/* === Formulario === */
.contacto-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  
}


.contacto-form .form-block {
  display: flex;
  flex-direction: column;
  text-align: left;
  
}
.contacto-form label {
  font-size: 14px;
  margin-bottom: 6px;
  font-weight: 400;
  color: #000000;
}


.contacto-form select,
.contacto-form textarea {
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 15px;
  width: 100%;
}

.contacto-form textarea {
  resize: vertical;
}

/* === Checkbox === */
.contacto-form .checkbox-block {
  display: flex;
  align-items: center;
  font-size: 14px;
  text-align: left;
}

.contacto-form .checkbox-block input {
  margin-right: 8px;
  cursor: pointer;
}

.contacto-form .checkbox-block label {
  margin: 0;
}

.contacto-form .checkbox-block a {
  color: #0c457e;
  text-decoration: underline;
}

.contacto-form .checkbox-block a:hover {
  color: #000000;
  text-decoration: none;
}

/* === Botón === */
.contacto-form button {
  padding: 14px;
  background: #0066cc;
  border: none;
  border-radius: 6px;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.contacto-form button:hover {
  background: #004999;
}
#form-mensaje2 {
  text-align: center;
  font-weight: bold;
  margin: 15px 0;
  padding: 10px;
  border-radius: 6px;
  display: none;
  font-size: 15px;
}

#form-mensaje2.exito {
  color: #155724;
  background-color: #d4edda;
  border: 1px solid #c3e6cb;
}

#form-mensaje2.error {
  color: #721c24;
  background-color: #f8d7da;
  border: 1px solid #f5c6cb;
}


/* Botones flotantes */
.btn-wsp,.btn-wsp2{
  position:fixed; width:55px; height:55px; line-height:50px; bottom:30px; right:20px;
  background:#0df053; border-radius:50px; text-align:center; font-size:30px;
  box-shadow:0 1px 10px rgba(0,0,0,.3);
  z-index: 2000;
}
.btn-wsp2{ right:90px; background:#f50202 }
.btn-wsp:hover,.btn-wsp2:hover{ text-decoration:none; filter:brightness(.9) }
.icon-whatsapp{ margin-top:7px; width:40px; }

/* Responsive */

 /* ===== Media Queries ===== */

@media (min-width:900px){
  
  header .main-nav{
    position: static;
    height: auto;
    display: flex;
    flex-direction: row;      
    align-items: center;
    gap: 0 rem;            
    background: none;
    padding: 0;
    text-align: center;
  }

  /* Texto más pequeño y horizontal */
  header .main-nav a{
    font-size: .95rem;        /* letras más pequeñas */
    color: #5889A9;
    font-weight: 500;
    padding: .25rem 0;
    transition: color .25s ease;
  }

  /* Hover rojo en escritorio */
  header .main-nav a:hover{ color: #d40000; }

  /* === ESTADO CON SCROLL (clase .shrink añadida por tu JS) === */
  header.shrink{ 
    background: rgba(240,237,237,.8);
    backdrop-filter: blur(6px);
    height: 110px;
  }
  header .logo{ height:140px; transition: transform .25s ease; }
  header.shrink .logo{ transform: scale(.7); }

  /* Color de enlaces cuando el header está "shrink" */
  header.shrink .main-nav a{ color:#074E9C; }
  header.shrink .main-nav a:hover{ color:#d40000; } /* mantiene hover rojo */
}

.contacto h2 {
    font-size: 22px;
  }



@media(max-width:1048px){

  header .logo{ width:90%; margin-left: 88px; }
  .container{ width:100% }
  .columna-mobile-100{ width:100% }
  .columna-mobile-50{ width:50% }
  .empujar-mobile-0{ margin-left:0 }
  .sinpadding-mobile{ padding:0 }
  .hero{ height:70vh }
  .hero img{ height:100%; object-fit:cover; object-position:center }
  .price__container{ grid-template-columns:1fr; text-align:center }
  .img-fluid{ width:86%; margin-left:80%; margin-bottom:18% }
  .hamb {
    display: block;
  }
  header nav {
    position: fixed;
  }

footer{
	text-align: center;
}
footer h3 {
    text-align: center;
}

footer .logo-footer {
	width: 50%;
}
footer .redes {
	justify-content: center;
  margin-left: auto;
}

footer ul{
  margin-left: auto;
}
}


@media (max-width: 768px) {


  .banner-empresarial .video-fondo {
    display: none;
  }

}

@media(max-width:670px){
  .bloque-inicio{ width:292px; margin-left:-146px }
  .bloque-inicio h1{ font-size:32px }
  .hero{ height:100vh }
  .price__container{ grid-template-columns:1fr }
  .img-fluid{ position:relative; display:none }
  #contacto>img{ position:relative; height:auto }
}


/* --- CONTENEDORES GENERALES --- */

.seccion {
  padding: 4rem 0;
}
.seccion h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
  text-align: center;
}
.seccion h3 {
  font-size: 1.1rem;
  margin-top: 2rem;
  color: #5889A9;
 
  
}


/* === SLIDER MÚLTIPLE === */
.slider-multiple {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 2rem auto;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.2);
}

.slides-multiple {
  display: flex;
  width: calc(100% * 2); /* se duplica para efecto infinito */
  animation: scrollSlider 20s linear infinite;
}

.slides-multiple img {
  width: calc(100% / 6); /* 3 imágenes visibles */
  flex-shrink: 0;
  object-fit: cover;
  height: 300px;
  border-radius: 12px;
  margin: 0 5px;
}

/* Animación infinita */
@keyframes scrollSlider {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@media (max-width: 900px) {
  .slides-multiple img {
    width: 50%; /* 2 imágenes visibles */
  }
}

@media (max-width: 600px) {
  .slides-multiple img {
  width: calc(100% / 5);
  }
}

/* GRID general */
.grid {
  display: grid;
  gap: 1.5rem;
  margin-top: 2rem;
  grid-template-columns: 1fr; /* por defecto una columna en móvil */
}

/* Tablet: 2 columnas */
@media (min-width: 600px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Escritorio: 3 columnas */
@media (min-width: 992px) {
  .grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.card {
  background: #074E9C;
  padding: 2rem 1.5rem;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}
.card-icon {
  font-size: 4rem;
  color: #5889A9;
  margin-bottom: 1rem;
  transition: transform 0.3s ease, color 0.3s ease;
}


.card h4 {
  margin-bottom: 0.5rem;
  font-size: 1.2rem;
  color: #5889A9;
}

/* --- CTA --- */
.cta-ticket {
  text-align: center;
  margin-top: 3rem;
  margin-bottom: 50px;
}
.btn-main-md {
  display: inline-block;
  padding: 0.9rem 1.8rem;
  background: #d40000 ;
  color: #fff;
  font-weight: bold;
  border-radius: 8px;
  transition: background 0.3s ease;
}
.btn-main-md:hover {
  background: #ffffff;
}

/* Card SEO oculta */
.card-hidden {
  display: none;
  background: #000;
  color: #fff;
  padding: 1.5rem;
  border-radius: 12px;
  grid-column: span 1;
  animation: fadeIn 0.4s ease;
  text-align: left;
}
.card-hidden h4 {
  color: #ff4444;
  margin-bottom: 1rem;
}
.card-hidden p {
  font-size: 0.95rem;
  line-height: 1.5;
}

/* En pantallas grandes, las cards negras ocupan todo el ancho */
@media (min-width: 992px) {
  .card-hidden {
    grid-column: span 3;
  }
}

/* Animación */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* cerraduras digitales */

.presentacion {
  background: linear-gradient(135deg, #f0f4f9, #e6ebf2);
  padding: 60px 20px;
  border-radius: 16px;
  margin-top: 40px;
}
.presentacion-contenido {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: center;
}
.presentacion-texto h2 {
  color: #002b5c;
  font-size: 2rem;
  margin-bottom: 1rem;
}
.presentacion-texto p {
  font-size: 1.1rem;
  line-height: 1.6;
  color: #333;
  margin-bottom: 1rem;
  text-align: justify;
}
.presentacion-imagen img {
  width: 100%;
  max-width: 420px;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.2);
}
@media (max-width: 900px) {
  .presentacion-contenido {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .presentacion-imagen img {
    margin: 20px auto 0;
  }

}
/*cajas fuertes*/


/* Presentación */
.presentacion { padding: 60px 20px; background: #f9f9f9; text-align: justify; line-height: 1.5; }
.presentacion h2 { text-align: center; margin-bottom: 1rem; color: #002b5c; }

/* Servicios */
.servicios .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-top: 2rem; }
.card { background: #002b5c; color: white; padding: 25px; border-radius: 12px; text-align: center; transition: transform 0.3s ease; }
.card:hover { transform: translateY(-8px); }

/* FAQ */
.faq { padding: 60px 20px; }
.faq-item { margin-bottom: 20px; }
.faq-item h3 { color: #002b5c; margin-bottom: 5px; }

/* CTA */
.cta { background: #5889A9; color: white; text-align: center; padding: 50px 20px; border-radius: 16px; }
.cta .boton-rojo { background: red; color: white; padding: 14px 28px; border-radius: 30px; display: inline-block; margin-top: 1rem; }
.cta .boton-rojo:hover { background: white; color: red; }


/* Responsive */
@media (max-width: 768px) {
  .hero h1 { font-size: 2rem; }
  .hero p { font-size: 1rem; }
}


/*puertas de seguridad*/

/* --- CONTENEDOR GENERAL --- */
.seo-extra {
    background: #f8f9fa;
    padding: 40px 30px;
    border-radius: 12px;
    margin-top: 40px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    border-left: 6px solid #b80000; /* Rojo elegante tipo seguridad */
}

/* --- TÍTULO --- */
.seo-extra h2 {
    text-align: center;
    margin-bottom: 25px;
    font-size: 1.9rem;
    font-weight: 700;
    color: #222;
}

/* --- LISTA ESTÉTICA --- */
.seo-extra ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 25px;
}

.seo-extra ul li {
    text-align: left;
    font-size: 1.05rem;
    color: #333;
    margin-bottom: 12px;
    padding-left: 32px;
    line-height: 1.6;
    position: relative;
    font-weight: 500;
}

/* Icono tipo check */
.seo-extra ul li::before {
    content: "\f058"; /* icono check FontAwesome */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 2px;
    font-size: 1.2rem;
    color: #b80000; /* rojo de marca */
}

/* --- PÁRRAFO --- */
.seo-extra p {
    text-align: justify;
    font-size: 1.05rem;
    line-height: 1.7;
    color: #444;
    margin-top: 10px;
}

/* -- RESPONSIVE -- */
@media (max-width: 768px) {
    .seo-extra {
        padding: 25px 20px;
    }

    .seo-extra h2 {
        font-size: 1.6rem;
    }

    .seo-extra ul li {
        font-size: 1rem;
    }
}