/* RESET GENERAL */
*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial, sans-serif;
}

/* ESTILO GENERAL */
body{
line-height:1.6;
}

/* COLORES POR PÁGINA */

body.home{ color:navy; }
body.servicios{ color:black; }
body.nosotros{ color:black; }
body.contacto{ color:black; }


/* CONTENEDOR GENERAL */

.container{
width:90%;
max-width:1100px;
margin:auto;
}

/* HEADER */

.page-header {
  background: none; /* nada de color */
  color: white;
  text-align: center;
  padding: 20px 0;
  position: absolute; /* se coloca sobre el hero */
  width: 100%;
  top: 150px; /* o la posición que quieras */
  left: 0;
  z-index: 10; /* asegurarse de que esté encima de la imagen */
}

/* NAVBAR */

.navbar{
position:sticky;
top:0;
background:white;
z-index:1000;
box-shadow:0 3px 10px rgba(0,0,0,0.08);
}

.nav{
display:flex;
align-items:center;
justify-content:space-between;
padding:8px 0;
}

/* MENU */

.menu{
display:flex;
align-items:center;
gap:30px;
}

/* LINKS MENU */

.menu a{
text-decoration:none;
color:#222;
font-weight:500;
position:relative;
}

.menu a::after{
content:"";
position:absolute;
bottom:-5px;
left:0;
width:0;
height:2px;
background:#ff6600;
transition:0.3s;
}

.menu a:hover::after{
width:100%;
}
/* LOGO */

.logo img{
height:75px;
width:auto;
display:block;
}



/* BOTÓN NAV */

.btn-nav{
background:#ff6600;
color:white !important;
padding:10px 20px;
border-radius:6px;
transition:0.3s;
}

.btn-nav:hover{
background:#203a43;
}

/* HERO */

.hero{

position:relative;

background-image:
linear-gradient(rgba(15,32,39,0.75), rgba(44,83,100,0.75)),
url("img/oficina.jfif");

background-size:cover;
background-position:center;

padding:300px 0;

color:white;
text-align:center;

overflow:hidden;

animation:zoomHero 18s ease-in-out infinite alternate;

}

/* CONTENEDORES DE CARDS */
.cards-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  padding: 20px 0;
background: transparent;
background-image:
linear-gradient(rgba(15,32,39,0.75), rgba(44,83,100,0.75)),
url("img/oficina2.jfif");

background-size:cover;
background-position:center;

padding:180px 0;

color:white;
text-align:center;

overflow:hidden;

animation:zoomHero 18s ease-in-out infinite alternate;

}

/* CARDS COMPACTAS */
.card {
  background: white;
  border-radius: 15px;
  padding: 20px;
  width: 1050px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
  transition: all 0.3s ease;
  border: 1px solid rgba(0,0,0,0.04);
}

.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.12);
}

.card-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

/* CONTENIDO CARD */
.contenido {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.texto {
  flex: 4;
  font-size: 14px;
}

.imagen {
  flex: 2;
  text-align: center;
  transition: transform 0.3s ease;
}

.imagen img {
  width: 100%;
  max-width: 150px;
  border-radius: 50%;
}

.imagen img:hover {
  transform: scale(1.05);
}

/* BOTON VER MAS */
.ver-mas {
  display: block;
  margin: 15px auto 0 auto;
  font-weight: 600;
  color: #ff6600;
  opacity: 0;
  transform: translateY(8px);
  text-align: center;
  transition: all 0.3s ease;
}

.card:hover .ver-mas {
  opacity: 1;
  transform: translateY(0);
}

/* NOSOTROS */
.contenido-nosotros {
  display: flex;
  align-items: center;
  gap: 1px;
  padding: 30px;
  flex-wrap: wrap;
color: white;
background:linear-gradient(to right,#2c5364,#203a43,#2c5364);
}

.texto-nosotros {
  flex: 1;
  font-size: 14px;
}

.imagen-nosotros {
  flex: 1;
  text-align: center;
}

.imagen-nosotros img {
  width: 100%;
  max-width: 350px;
  border-radius: 5px;
}

/* BOTON NOSOTROS */
.btn-vermas {
  display: inline-block;
  margin-top: 10px;
  padding: 8px 15px;
  background-color: #ff6600;
  color: white;
  text-decoration: none;
  border-radius: 8px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.btn-vermas:hover {
  background-color: #e65500;
}

/* TITULOS */
.servicios h2, .nosotros h2 {
  text-align: center;
  margin-bottom: 15px;
  font-size: 28px;
  color: #222;
}

/* RESPONSIVE */
@media (max-width: 1024px) {
  .card {
    width: 200px;
    padding: 15px;
  }
  .imagen img {
    max-width: 120px;
  }
  .imagen-nosotros img {
    max-width: 200px;
  }
}

@media (max-width: 600px) {
  .card {
    width: 100%;
  }
  .contenido {
    flex-direction: column;
    gap: 10px;
  }
  .contenido-nosotros {
    flex-direction: column;
    gap: 15px;
  }
  .imagen img, .imagen-nosotros img {
    max-width: 150px;
  }
}

/* EFECTO ZOOM LENTO */

@keyframes zoomHero{

from{
background-size:100%;
}

to{
background-size:110%;
}

}

.hero h1{
font-size:52px;
margin-bottom:25px;
opacity:0;
transform:translateY(30px);
animation:fadeUp 1.2s ease forwards;
}

.hero p{
max-width:650px;
margin:auto;
font-size:20px;
opacity:0;
transform:translateY(30px);
animation:fadeUp 1.2s ease forwards;
animation-delay:.4s;
}

.hero .btn-primary{
opacity:0;
transform:translateY(30px);
animation:fadeUp 1.2s ease forwards;
animation-delay:.8s;
}

/* ANIMACION */

@keyframes fadeUp{

to{
opacity:1;
transform:translateY(0);
}

}

/* BOTÓN PRINCIPAL */

.btn-primary{
display:inline-block;
background:#ff6600;
color:white;
padding:14px 28px;
margin-top:25px;
border-radius:8px;
text-decoration:none;
font-weight:600;

box-shadow:0 10px 25px rgba(0,0,0,0.25);

transition:all .3s ease;
}

.btn-primary:hover{

transform:translateY(-3px);

box-shadow:0 15px 35px rgba(0,0,0,0.35);

background:#ff7a1a;

}

/* SECCIÓN SERVICIOS */

.services{
padding:190px 0;
background-image:
linear-gradient(rgba(15,32,39,0.75), rgba(44,83,100,0.75)),
url("img/oficina2.jfif");

background-size:cover;
background-position:center;
}

/* TARJETAS COMPACTAS */

.card {
  background: none;
  border-radius: 145px;      /* menos redondeo */
  padding: 5px;            /* menos espacio interno */
  margin-bottom: 5px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  border: 1px solid rgba(0, 0, 0, 0.04);
  width: 1050px;             /* tamaño base más pequeño */
}

/* Hover de la card */
.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
}

/* Enlace que envuelve la card */
.card-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

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

/* BOTON VER MAS */
.ver-mas {
  margin: 15px auto 0 auto; /* margen superior y centrado */
  font-weight: 600;
  color: #ff6600;
  opacity: 0;               /* oculto inicialmente */
  transform: translateY(8px); /* desplazamiento inicial */
  transition: all 0.3s ease;
  display: block;           /* necesario para centrar con margin auto */
  text-align: center;
}

/* Hover de la card: el botón aparece */
.card:hover .ver-mas {
  opacity: 1;
  transform: translateY(0); /* sube a su posición */
}
/* TITULO TARJETA */
.card h3 {
  text-align: center;
  margin-bottom: 15px;
  font-size: 44px;  /* reducido de 54px a 24px */
  color: white;
}

/* CONTENIDO TARJETA */
.contenido {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;  /* más compacto */
}

/* TEXTO */
.texto {
  flex: 4;
  font-size: 14px; /* tamaño de texto más pequeño */
}

/* IMAGEN */
.imagen {
  flex: 2;
  text-align: center;
  transition: transform 0.4s ease;
}

.imagen img {
  width: 100%;
  max-width: 350px;    /* reducido de 320px */
  border-radius: 10%;  /* para que siga circular */
}

.imagen img:hover {
  transform: scale(1.05); /* efecto hover más sutil */
}

/* RESPONSIVE */
@media (max-width: 1024px) {
  .card {
    width: 200px;
    padding: 15px;
  }
  .card h3 {
    font-size: 20px;
  }
  .imagen img {
    max-width: 120px;
  }
}

@media (max-width: 600px) {
  .card {
    width: 100%;
    padding: 15px;
  }
  .contenido {
    flex-direction: column;
    gap: 10px;
  }
  .imagen img {
    max-width: 100px;
  }
  .card h3 {
    font-size: 18px;
  }
}


/* GALERIA */

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

.galeria img{
width:100%;
height:300px;
object-fit:cover;
border-radius:6px;
}

/* ABOUT */

.about{
padding:80px 20px;
background:#f8f9fc;
}

.about-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:60px;
align-items:center;
max-width:1100px;
margin:auto;
}

.about-text h2{
font-size:32px;
margin-bottom:20px;
color:#222;
}

.about-text p{
font-size:16px;
line-height:1.7;
color:#555;
margin-bottom:15px;
}

.about-image img{
width:100%;
border-radius:12px;
box-shadow:0 10px 30px rgba(0,0,0,0.15);
}

.enfoque{
padding:70px 20px;
background:white;
text-align:center;
}

.enfoque h2{
font-size:30px;
margin-bottom:20px;
}

.enfoque p{
max-width:800px;
margin:auto;
margin-bottom:15px;
line-height:1.7;
color:#555;
}

/* VALORES */

.valores{
color:white;
background:linear-gradient(to right,#0f2027,#203a43,#2c5364);
padding:80px 0;
text-align:center;
}

.valores-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:30px;
margin-top:40px;
}

.valor{
background:white;
padding:30px;
border-radius:10px;
box-shadow:0 10px 20px rgba(0,0,0,0.08);
color:black;
}

@media (max-width:900px){

.about-grid{
grid-template-columns:1fr;
text-align:center;
}

.about-image{
margin-top:30px;
}

}
/* TRAYECTORIA */

.trayectoria{
padding:80px 0;
text-align:center;
color: white;
background:linear-gradient(to right,#0f2027,#203a43,#2c5364);
}

/* ESTADISTICAS */

.estadisticas{
background:linear-gradient(to right,#0f2027,#203a43,#2c5364);
padding:10px 0;
color:white;
text-align:center;
}

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

.stats-grid h3{
font-size:40px;
color:#ff6600;
}

/* CTA */

.cta{
background:linear-gradient(to right,#0f2027,#203a43,#2c5364);
color:white;
padding:20px 0;
text-align:center;
}

/* CAROUSEL LOGOS */
.carousel {
  width: 100%;
  overflow: hidden;
  padding: 20px 0;
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.track {
  display: flex;
  width: max-content;
  gap: 40px;
  animation: scroll 20s linear infinite;
}

/* LOGOS */
.track img {
  width: 120px;
  height: auto;
  object-fit: contain;
  opacity: 0.8;
  transition: 0.3s;
}

.track img:hover {
  opacity: 1;
  transform: scale(1.1);
}

/* ANIMACIÓN INFINITA */
@keyframes scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* PAUSA AL HOVER */
.carousel:hover .track {
  animation-play-state: paused;
}

/* CONTACTO */

.contact{
background:linear-gradient(to right,#0f2027,#203a43,#2c5364);
padding:150px 0;
text-align:center;
color:white;
}

/* FORMULARIO */

form{
display:flex;
flex-direction:column;
gap:15px;
margin-top:30px;
}

input,textarea{
padding:15px;
border:1px solid #ccc;
border-radius:6px;
}

/* FOOTER */

footer{
  background:#111;
  color:#fff;
  text-align:center;
  padding:20px 10px;
}

.footer-content{
  max-width:1200px;
  margin:auto;
}

.social-footer{
  margin-top:10px;
  display:flex;
  justify-content:center;
  gap:15px;
}

.social-footer a{
  width:60px;
  height:60px;
  display:flex;
  justify-content:center;
  align-items:center;
  border-radius:50%;
  background:#222;
  transition: all 0.3s ease;
}

.social-footer img{
  width:20px;
  height:20px;
}

.footer-grid{
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  gap:20px;
}

/* alineaciones */
.left{
  text-align:left;
}

.center{
  text-align:center;
}

.right{
  text-align:right;
}

@media (max-width:768px){
  .footer-grid{
    grid-template-columns:1fr;
    text-align:center;
    gap:15px;
  }

  .left, .right{
    text-align:center;
  }
}

.left h3{
  margin-bottom:8px;
}

.left p{
  font-size:14px;
}

.right p{
  font-size:10px;
  opacity:0.7;
}

/* Hover bonito */
.social-footer a:hover{
  transform:translateY(-5px);
  background:#444;
}

/* IMÁGENES */

.mi-imagen{
width:300px;
height:auto;
}

/* RESPONSIVE */

@media (max-width:768px){

.contenido{
flex-direction:column;
text-align:center;
}

.texto{ order:2; }
.imagen{ order:1; }

}

/* SCROLL */

.reveal{
opacity:0;
transform:translateY(40px);
transition:all 0.6s ease;
}

.reveal.active{
opacity:1;
transform:translateY(0);
}

/* =========== SUBPAGINAS ================*/

/* ANALISIS COMERCIAL */

.analisis-comercial{
max-width:900px;
margin:auto;
padding:60px 20px;
font-family:Arial, sans-serif;
}

/* INTRO TEXTO */

.intro{
max-width:700px;
margin:auto;
text-align:center;
margin-top:5px;
margin-bottom:5px;
color:gray;
line-height:1;
}

/* CONTENEDOR ACORDEÓN */

.accordion{
display:flex;
flex-direction:column;
gap:15px;
}

/* TARJETAS */

.accordion-item{
background:white;
border-radius:10px;
box-shadow:0 4px 12px rgba(0,0,0,0.08);
overflow:hidden;
transition:all 0.3s ease;
}

/* ENCABEZADO */

.accordion-header{
width:100%;
background:white;
border:none;
padding:20px;
font-size:17px;
display:flex;
justify-content:space-between;
align-items:center;
cursor:pointer;
font-weight:600;
color:#2c3e50;
}

/* HOVER */

.accordion-header:hover{
background:#f7f7f7;
}

/* ICONO */

.icono{
font-size:22px;
transition:transform 0.3s ease;
}

/* ROTACIÓN CUANDO SE ABRE */

.accordion-item.active .icono{
transform:rotate(45deg);
}

/* CONTENIDO */

.accordion-content{
max-height:0;
overflow:hidden;
transition:max-height 0.35s ease;
}

/* TEXTO */

.accordion-content p{
padding:0 20px 20px 20px;
color:#555;
line-height:1.6;
}


/* ============================== FORMATOS EDITORIALES ============================== */

/* SECCION FORMATOS EDITORIALES */

.formatos-editoriales{
padding:60px 20px;
color: white;
background:linear-gradient(to right,#0f2027,#203a43,#2c5364);
}

.titulo-formatos{
text-align:center;
font-size:28px;
margin-bottom:40px;
color:white;
}

.formatos-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:30px;
max-width:1100px;
margin: 80px auto 0 auto;
background:transparent;
}

.formato-card{
background:white;
padding:30px;
border-radius:10px;
box-shadow:0 4px 15px rgba(0,0,0,0.08);
transition:0.3s;
text-align:center;
}

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

.formato-icono{
font-size:40px;
color:#0077ff;
margin-bottom:15px;
}

.formato-card h4{
margin-bottom:10px;
font-size:20px;
color:#222;
}

.formato-card p{
font-size:15px;
color:#555;
line-height:1.6;
}

/* FONDO DE SECCION */

.about{
background:linear-gradient(to right,#0f2027,#203a43,#2c5364);
padding:80px 20px;
}


/* TARJETA */

.card-about{
background:white;
border-radius:12px;
padding:40px;
margin-bottom:40px;
box-shadow:0 10px 30px rgba(0,0,0,0.1);
margin: 80px auto 0 auto;
}


/* GRID INTERNO */

.about-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:50px;
align-items:center;
}


/* IMAGEN */

.about-image img{
width:80%;
border-radius:10px;
}


/* TEXTO */

.about-text h2{
font-size:20px;
margin-bottom:20px;
}

.about-text p{
line-height:1.7;
color:#555;
margin-bottom:5px;
}
@media (max-width:900px){

.about-grid{
grid-template-columns:1fr;
text-align:center;
}
}


/* ================= CHAT PROFESIONAL ================= */

/* CHATBOT */

.chat-widget{
position:fixed;
bottom:25px;
right:25px;
z-index:9999;
}

.chat-button{
width:65px;
height:65px;
border-radius:50%;
background:#25D366;
border:none;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
box-shadow:0 10px 25px rgba(0,0,0,0.3);
}

.chat-button img{
width:35px;
}

.chat-window{
display:none;
flex-direction:column;
position:absolute;
bottom:80px;
right:0;
width:300px;
background:white;
border-radius:12px;
box-shadow:0 15px 40px rgba(0,0,0,0.3);
overflow:hidden;
}

.chat-header{
background:#25D366;
color:white;
padding:12px;
text-align:center;
font-weight:bold;
}

.chat-body{
padding:15px;
height:220px;
overflow-y:auto;
background:#f9f9f9;
}

.bot-message{
background:white;
padding:10px;
border-radius:8px;
margin-bottom:10px;
font-size:14px;
}

.user-message{
background:#dcf8c6;
padding:10px;
border-radius:8px;
margin-bottom:10px;
font-size:14px;
text-align:right;
}

.chat-options{
display:flex;
flex-direction:column;
padding:10px;
gap:6px;
}

.chat-options button{
border:none;
background:#f1f1f1;
padding:10px;
border-radius:6px;
cursor:pointer;
}

.chat-options button:hover{
background:#e5e5e5;
}

/* ================= SOCIAL MEDIA ================= */

/* SOCIAL */

.social-float{
  position: fixed;
  bottom: 25px;
  right: 25px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 999;
}

.social-btn{
  width: 65px;
  height: 65px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 10px 25px rgba(0,0,0,0.3);
  transition: transform 0.3s;
}

.social-btn img{
  width: 28px;
  height: 28px;
}

/* Colores personalizados */
.instagram{
  background: linear-gradient(45deg, #f58529, #dd2a7b, #8134af, #515bd4);
}

.facebook{
  background: #1877f2;
}

/* Efecto hover */
.social-btn:hover{
  transform: scale(1.1);
}

.social-float{
  bottom: 100px; /* para que no se encimen con el chat */
}