/* css/styles.css */
:root{
  --accent:#FFD24D;
  --primary:#0B6FAF;
  --dark:rgba(3,18,35,0.85);
  --glass: rgba(255,255,255,0.06);
  --max-width:1200px;
  --bg-image: url('../assets/bg-hero.png');
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color:#042033;
  background:#f6f9fb;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  position: relative;
  overflow-x: hidden;
}

main{
  position: relative;
  z-index: 1;
}

/* Marca de agua de fondo sobre el banner */
body::before{
  display: none;
}

.hero{
  position: relative;
  z-index: 2;
  overflow: hidden;
}

.hero::after{
  display: none;
}

.floating-watermark{
  position: fixed;
  top: 50%;
  left: 1rem;
  width: min(300px, 22vw);
  height: auto;
  aspect-ratio: 1 / 1.05;
  transform: translateY(-50%);
  background-image: url('../assets/watermark.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 1;
  pointer-events: none;
  z-index: 99;
  filter: grayscale(40%) contrast(1.05) brightness(1.08);
  clip-path: ellipse(55% 70% at 50% 50%);
  border-radius: 50%;
  background-color: rgba(255,255,255,0.10);
  box-shadow: 0 22px 60px rgba(3,18,35,0.14), inset 0 0 120px rgba(255,255,255,0.16);
  backdrop-filter: blur(8px);
}

.floating-watermark-label{
  position: fixed;
  top: calc(50% + (min(300px, 22vw) / 1.05) / 2 + 0.45rem);
  left: calc(1rem + min(300px, 22vw) / 2);
  transform: translateX(-50%);
  display: inline-flex;
  width: auto;
  padding: 0.2rem 0.45rem;
  color: rgba(17,17,17,0.95);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-shadow: none;
  -webkit-text-stroke: 0.1px rgba(255,255,255,0.35);
  text-stroke: 0.1px rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.12);
  border-radius: 999px;
  backdrop-filter: blur(10px);
  border: none;
  box-shadow: none;
  pointer-events: none;
  z-index: 99;
}

@media (max-width: 900px){
  .floating-watermark{
    left: 0.5rem;
    width: min(220px, 40vw);
    top: 55%;
  }
  .floating-watermark-label{
    left: calc(0.5rem + min(220px, 40vw) / 2);
    top: calc(55% + (min(220px, 40vw) / 1.05) / 2 + 0.25rem);
    transform: translateX(-50%);
    width: auto;
    font-size: 0.76rem;
    padding: 0.16rem 0.35rem;
  }
}

/* Ocultar watermark extra en sección Contacto */
#contacto .section-watermark{
  display:none;
}

#contacto{position:relative;overflow:hidden}
#contacto .contact-grid{
  position:relative;
  z-index:2;
  margin-top: 1.5rem;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.5rem;
}

@media (max-width:900px){
  #contacto .section-watermark{width:min(280px, 60vw);height:min(360px, 50vh);top:40%;right:5%;opacity:0.10}
}


img{
  max-width:100%;
  height:auto;
  display:block;
}

/* HERO: banner responsivo con imagen de fondo */
.hero{
  min-height:70vh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:white;
  position:relative;
  overflow:hidden;
  padding:3rem 1rem;
  background-image: var(--bg-image);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
  background-attachment: scroll;
}

.hero::before{
  content: "";
  position:absolute;
  inset:0;
  background: rgba(3,18,35,0.22);
  pointer-events:none;
}

.hero > *{
  position:relative;
  z-index:1;
  width:100%;
}

/* Si prefieres que la imagen completa sea visible (puede dejar espacio vacío alrededor) */
/* Descomenta la siguiente regla y comenta la anterior background-size si quieres probar esta opción */

/*.hero{
  min-height:60vh;
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center center;
}*/

/* Ajustes para distintos tamaños de pantalla */
@media (min-width:1400px){
  .hero{ min-height:70vh; }            /* en pantallas muy grandes puedes aumentar un poco la altura */
}
@media (max-width:900px){
  .hero{
    min-height:58vh;                  /* en tablets mostrar un poco menos para equilibrar */
    background-position: center 35%;
  }
  .hero-inner{
    padding:4rem 1rem 3rem;
  }
}
@media (max-width:600px){
  .hero{
    min-height:52vh;                   /* en móviles reducir aún más para que el contenido principal sea visible */
    background-size: cover;
    background-position: center top;   /* en móviles evita recorte no deseado */
  }
  .hero-inner{
    padding:3rem 1rem 2.5rem;
  }
}
@media (max-width:480px){
  .hero{
    min-height:48vh;
    background-position: center top;
  }
}

/* Mantén la legibilidad del texto sin overlay: sombra sutil opcional */
.hero-inner h1,
.hero-inner .lead,
.hero-inner .eyebrow {
  text-shadow: 0 6px 18px rgba(3,18,35,0.28);
}


/* Header y logo */
.site-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
  position:relative;
  z-index:10;
  padding:1rem;
}

.logo{
  display:flex;
  align-items:center;
  gap:0.5rem;
  text-decoration:none;
  flex-wrap:wrap;
}

.logo img{
  height:56px;
  width:auto;
  max-width:100px;
}

/* Marca con fondo del color de acento */
.site-header .brand{
  color:#052033;
  background: var(--accent);
  padding:2px 6px;
  border-radius:8px;
  font-weight:600;
  font-size:0.82rem;
  box-shadow: 0 4px 10px rgba(3,18,35,0.08);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

/* Contraste cuando el header cambia al hacer scroll */
.site-header.scrolled .brand{
  color:#052033;
  background: var(--accent);
  box-shadow: 0 6px 20px rgba(3,18,35,0.08);
}

.brand{
  font-weight:800;
  letter-spacing:-0.02em;
}

.main-nav{
  display:flex;
  gap:1.5rem;
  align-items:center;
}

.main-nav a{
  color:white;
  text-decoration:none;
  font-weight:600;
  transition:opacity 150ms ease;
}

.main-nav a:hover{
  opacity:0.8;
}

.hero-inner{padding:6rem 1rem 4rem;max-width:var(--max-width);margin:0 auto;position:relative;z-index:2}
.eyebrow{display:inline-block;background:var(--accent);color:#052033;padding:8px 14px;border-radius:999px;font-weight:700;margin-bottom:1rem;font-size:0.95rem}
h1{font-size:clamp(2rem,5vw,3.2rem);margin:0.4rem 0 0.6rem;line-height:1.02;font-weight:800}
.lead{font-size:1.05rem;margin:0 auto 1.6rem;max-width:720px;color:rgba(255,255,255,0.95)}
.cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.btn{padding:12px 20px;border-radius:10px;font-weight:700;border:0;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:10px}
.btn-primary{background:var(--accent);color:#052033;box-shadow:0 8px 24px rgba(13,76,120,0.18)}
.btn-outline{background:transparent;color:white;border:1px solid rgba(255,255,255,0.18)}

/* SECCIONES */
.section{padding:4rem 1rem;background:white;position:relative;z-index:1}
.section.alt{background:#f4fbff;position:relative;z-index:1}
.container{max-width:var(--max-width);margin:0 auto;padding:0 1rem}
.center{text-align:center}
h2{margin:0 0 1.6rem;font-size:1.6rem;color:#052033;text-align:left}

/* Estilo del bloque Nosotros añadido */
/* Bloque Nosotros: extendido y resaltado */
.nosotros-quote{
  display:block;
  width: calc(100% + 4rem);        /* extiende más allá del contenedor */
  margin-left: -2rem;
  margin-right: -2rem;
  padding:1.4rem 2rem;
  border-radius:12px;
  background: linear-gradient(90deg, rgba(255,210,77,0.12), rgba(11,111,175,0.04));
  border: 1px solid rgba(11,111,175,0.12);
  box-shadow: 0 18px 40px rgba(3,18,35,0.06);
  color: #052033;
  font-weight:700;
  font-size:1.05rem;
  line-height:1.6;
  text-align:left;
  letter-spacing: -0.01em;
  position:relative;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

/* Énfasis adicional para <strong> dentro del bloque */
.nosotros-quote strong{
  color: var(--primary);
  background: rgba(11,111,175,0.06);
  padding:0.08rem 0.35rem;
  border-radius:6px;
  font-weight:800;
  box-decoration-break: clone;
}

/* Icono decorativo a la izquierda (opcional) */
.nosotros-quote::before{
  content: "“";
  font-size:3.2rem;
  color: rgba(11,111,175,0.14);
  position:absolute;
  left:1.2rem;
  top:0.6rem;
  pointer-events:none;
}

/* Hover/Focus ligero para interacción */
.nosotros-quote:hover,
.nosotros-quote:focus{
  transform: translateY(-4px);
  box-shadow: 0 26px 50px rgba(3,18,35,0.08);
}

/* Ajustes responsive para no romper el layout en pantallas pequeñas */
@media (max-width:900px){
  .nosotros-quote{
    width: calc(100% + 2rem);
    margin-left: -1rem;
    margin-right: -1rem;
    padding:1.2rem 1.2rem;
    font-size:1.02rem;
  }
  .nosotros-quote::before{ left:0.9rem; top:0.4rem; font-size:2.6rem; }
}
@media (max-width:600px){
  .nosotros-quote{
    width: calc(100% + 1rem);
    margin-left: -0.5rem;
    margin-right: -0.5rem;
    padding:1rem 0.9rem;
    font-size:1rem;
    border-radius:10px;
  }
  .nosotros-quote::before{ display:none; } /* oculta el icono en móviles si ocupa espacio */
}


/* Misión y Visión */
.mision-vision{
  display:flex;
  gap:1rem;
  justify-content:center;
  align-items:flex-start;
  margin-top:1.4rem;
  flex-wrap:wrap;
  max-width:1000px;
  margin-left:auto;
  margin-right:auto;
}
.mv-card{
  background:white;
  border-radius:10px;
  padding:1.1rem 1.2rem;
  box-shadow:0 8px 24px rgba(3,18,35,0.06);
  border:1px solid rgba(11,111,175,0.06);
  width:48%;
  min-width:260px;
}
.mv-card h3{
  margin:0 0 0.6rem;
  color:var(--primary);
  font-size:1.05rem;
  letter-spacing:0.02em;
}
.mv-card p{
  margin:0;
  color:#334e63;
  font-weight:600;
  line-height:1.45;
}

/* Plan Prepago - Resaltado con gradiente amarillo */
.prepaid-plan{
  width: 100%;
  background: linear-gradient(135deg, rgba(255,210,77,0.25) 0%, rgba(255,210,77,0.08) 100%);
  border: 2px solid rgba(255,210,77,0.4);
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(255,210,77,0.12), inset 0 1px 0 rgba(255,255,255,0.5);
  position: relative;
  transition: transform 200ms ease, box-shadow 200ms ease;
  padding: 2.5rem 2rem;
  margin-bottom: 2rem;
}

.prepaid-plan:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 36px rgba(255,210,77,0.16), inset 0 1px 0 rgba(255,255,255,0.5);
}

.prepaid-plan h3{
  margin: 0 0 1rem;
  color: #c68c00;
  font-size: 1.4rem;
  letter-spacing: 0.02em;
}

.prepaid-plan p{
  margin: 0;
  font-size: 1.02rem;
  color: #2d4a5f;
  line-height: 1.6;
}

/* GRID SERVICIOS */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.card{background:linear-gradient(180deg,#ffffff,#f7fbff);border-radius:12px;padding:1.6rem;box-shadow:0 6px 20px rgba(9,30,45,0.06);text-align:left}
.card h3{margin:0 0 0.6rem;font-size:1.05rem;color:var(--primary)}
.card p{margin:0;color:#334e63;font-size:0.95rem}

/* CONTACTO */
#contacto{position:relative;overflow:hidden}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:start;position:relative;z-index:2}
.contact-card{background:#052033;color:white;padding:1.6rem;border-radius:12px;position:relative;z-index:2}
.contact-form{background:white;padding:1.6rem;border-radius:12px;box-shadow:0 6px 20px rgba(9,30,45,0.06);display:flex;flex-direction:column;gap:10px;position:relative;z-index:2}
.contact-form label{font-weight:600;display:flex;flex-direction:column;gap:6px}
.contact-form input,.contact-form textarea{padding:10px;border-radius:8px;border:1px solid #e6eef6}
.form-actions{display:flex;gap:10px;justify-content:flex-end}

#contacto .section-watermark{
  position:absolute;
  top:45%;
  right:10%;
  transform:translateY(-50%);
  width:min(360px, 44vw);
  height:min(480px, 60vh);
  background-image:url('../assets/watermark.png');
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
  opacity:0.12;
  pointer-events:none;
  z-index:1;
}

/* FOOTER */
.site-footer{padding:1.6rem;text-align:center;color:#6b7f8f;font-size:0.95rem}

/* RESPONSIVE */
@media (max-width:1024px){
  .grid{grid-template-columns:repeat(2,1fr)}
  #contacto .contact-grid{grid-template-columns:1fr;grid-auto-flow:row;align-items:stretch;grid-auto-columns:minmax(0,1fr);}
  #contacto .contact-card{width:auto;max-width:100%;min-width:0;}
  .main-nav{display:none}
  .site-header{padding:0 1rem}
  .mv-card{width:100%}
  #contacto .section-watermark{width:min(260px, 70vw);height:min(340px, 50vh);opacity:0.08}
}
@media (max-width:600px){
  .grid{grid-template-columns:1fr}
  .hero-inner{padding:4rem 1rem 3rem}
  .logo img{height:40px}
  #contacto .contact-card{padding:1.4rem}
  #contacto .contact-grid{gap:1rem}
  .contact-whatsapp a{width:100%;justify-content:center}
}

/* Encabezado resaltado */
.site-header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:60;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 20px;
  backdrop-filter: blur(6px);
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border-bottom: 1px solid rgba(255,255,255,0.08);
  transition:transform 220ms ease, background-color 220ms ease, box-shadow 220ms ease;
}

/* Elevación al hacer scroll (usa la clase .scrolled si la añades con JS) */
/* Consolidada más abajo junto con otros ajustes scrolled */

/* Logo y marca */
.logo{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  color:var(--primary);
  -webkit-tap-highlight-color: transparent;
}
.logo img{
  height:56px;        /* más prominente */
  width:auto;
  object-fit:contain;
  border-radius:8px;
  background:transparent;
  padding:4px;
  transition:transform 180ms ease, box-shadow 180ms ease;
}
.logo:hover img,
.logo:focus img{
  transform:scale(1.03);
  box-shadow:0 8px 22px rgba(11,111,175,0.12);
}
.brand{
  font-weight:800;
  color:var(--primary);
  font-size:0.95rem;
  letter-spacing:-0.01em;
  display:inline-block;
  white-space:nowrap;
}

/* Navegación principal */
.main-nav{
  display:flex;
  align-items:center;
  gap:18px;
}
.main-nav a{
  color:rgba(255,255,255,0.95);
  text-decoration:none;
  font-weight:700;
  padding:8px 12px;
  border-radius:8px;
  transition:background 160ms ease, color 160ms ease, transform 160ms ease;
  font-size:0.95rem;
}
.main-nav a:hover,
.main-nav a:focus{
  background: rgba(255,255,255,0.12);
  color:white;
  transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(3,18,35,0.08);
}

/* CTA visual en navegación (opcional) */
.main-nav a.cta{
  background:var(--accent);
  color:#052033;
  font-weight:800;
  padding:10px 14px;
  box-shadow:0 8px 20px rgba(13,76,120,0.12);
}
.main-nav a.cta:hover{ filter:brightness(0.98); transform:translateY(-2px) }

/* Contraste cuando header sobre fondo claro (útil si aplicas .scrolled) */
.site-header.scrolled .main-nav a{ color:#052033 }
.site-header.scrolled .brand{ color:#052033 }

/* Responsive: colapsa la navegación en pantallas pequeñas */
@media (max-width:900px){
  .main-nav{ gap:12px }
  .logo{ gap:0.2rem; flex-wrap:nowrap; }
  .logo img{ height:40px }
  .brand{
    display:block;
    font-size:0.72rem;
    padding:1px 3px;
    line-height:1.05;
    box-shadow: 0 3px 8px rgba(3,18,35,0.06);
  }
}

/* Ajustes móviles */
@media (max-width:600px){
  .site-header{ padding:10px 14px }
  .logo img{ height:42px }
  .main-nav a{ font-size:0.9rem; padding:8px 10px }
}

/* Transición suave para colores en la navegación */
.site-header,
.site-header .main-nav a,
.site-header .brand {
  transition: background-color 220ms ease, color 220ms ease, box-shadow 220ms ease;
}

/* Estado scrolled: fondo claro y texto de navegación en negro */
.site-header.scrolled{
  background: rgba(255,255,255,0.96);
  box-shadow: 0 8px 30px rgba(3,18,35,0.08);
  transform: translateY(0);
  backdrop-filter: none;
}

/* Cuando el header tiene .scrolled, los enlaces pasan a color oscuro */
.site-header.scrolled .main-nav a{
  color: #052033;           /* negro/azulado para buen contraste */
  background: transparent;  /* elimina fondo semitransparente si existiera */
  box-shadow: none;
}

/* Marca también mantiene contraste sobre fondo claro */
.site-header.scrolled .brand{
  color: #052033;
  background: var(--accent); /* si quieres mantener acento; o usa transparent */
}

/* Asegurar foco visible accesible en estado scrolled */
.site-header.scrolled .main-nav a:focus{
  outline: 3px solid rgba(11,111,175,0.18);
  outline-offset: 3px;
}

/* Respetar preferencia de reducción de movimiento */
@media (prefers-reduced-motion: reduce){
  .site-header,
  .site-header .main-nav a,
  .site-header .brand { transition: none; }
}

/* Contenedor de ubicación y mapa */
.contact-location{
  display:flex;
  gap:1.25rem;
  align-items:flex-start;
  flex-wrap:wrap;
  margin-top:1rem;
}

/* Texto de dirección */
.contact-location .address{
  min-width:220px;
  max-width:360px;
  background:linear-gradient(180deg,#ffffff,#f7fbff);
  padding:0.9rem 1rem;
  border-radius:10px;
  box-shadow:0 8px 24px rgba(3,18,35,0.04);
  border:1px solid rgba(11,111,175,0.04);
  font-weight:600;
  color:#052033;
}
.contact-location .address strong{ display:block; margin-bottom:0.25rem; color:var(--primary) }
.contact-location .maps-link{
  display:inline-block;
  margin-top:0.6rem;
  color:var(--primary);
  text-decoration:none;
  font-weight:700;
  background:transparent;
  padding:6px 8px;
  border-radius:8px;
}
.contact-location .maps-link:hover{ text-decoration:underline; }

/* Mapa responsivo */
.map-wrap{
  flex:1 1 420px;
  min-width:260px;
  height:220px;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 12px 36px rgba(3,18,35,0.06);
  border:1px solid rgba(3,18,35,0.04);
}
.map-wrap iframe{
  width:100%;
  height:100%;
  border:0;
  display:block;
}

/* Ajustes para pantallas pequeñas */
@media (max-width:900px){
  .contact-location{ flex-direction:column; }
  .map-wrap{ height:260px; }
  .contact-location .address{ max-width:100%; }
}

/* Bloque WhatsApp */
.contact-whatsapp{
  margin-top:1rem;
}
.contact-whatsapp a{
  display:inline-flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:#25D366; /* color oficial de WhatsApp */
  font-weight:700;
  font-size:1rem;
  background:rgba(37,211,102,0.08);
  padding:8px 12px;
  border-radius:8px;
  transition:background 160ms ease, transform 160ms ease;
}
.contact-whatsapp a:hover{
  background:rgba(37,211,102,0.15);
  transform:translateY(-2px);
}
.whatsapp-icon{
  height:28px;
  width:28px;
  object-fit:contain;
}