:root {

  --main-gold: #e2c275;

  --main-gold-dark: #a88921;

  --white: #fff;

  --gray-bg: #f7f7f7;

  --dark: #1b1b1b;

}



/* Base */

html { scroll-behavior: smooth; }

* { box-sizing: border-box; }

body {

  background: #EFFFFA;

  font-family: 'Segoe UI', Arial, sans-serif;

  color: var(--dark);

  margin: 0;

  min-height: 100vh;

}



/* ========================= NAVBAR ========================= */

.navbar {

  width: 100vw;

  background: rgba(240, 255, 249, 0.48);

  box-shadow: 0 10px 30px 0 #e2c27545, 0 2px 10px 0 rgba(0,0,0,0.09);

  display: flex;

  align-items: center;

  justify-content: center;

  text-decoration: none;

  position: fixed;

  top: 0; left: 0;

  z-index: 100;

  padding: 0 5vw;

  min-height: 110px;

  backdrop-filter: blur(16px);

  -webkit-backdrop-filter: blur(16px);

  transition: background 0.24s, box-shadow 0.24s;

}



.navbar-logo {

  position: absolute;

  left: 3vw;

  display: flex;

  align-items: center;

  height: 60px;

}

.navbar-logo img { height: 150px; width: auto; display: block; }



.navbar a { text-decoration: none; color: #000; }

.navbar ul {

  list-style: none;

  display: flex;

  gap: 2.8rem;

  margin: 0 auto;

  font-weight: 600;

}

.navbar li {

  color: #000;

  font-weight: bold;

  font-size: 1.2rem;

  letter-spacing: 1.2px;

  position: relative;

  cursor: pointer;

  border-bottom: 2.5px solid transparent;

  transition: border .18s, color .18s;

}

.navbar li:hover, .navbar li.active {

  color: var(--main-gold);

  border-bottom: 2.5px solid var(--main-gold);

}



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

.banner {

  top: 110px;

  width: 100vw;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  min-height: 340px;

  position: relative;

}



/* Contenedor del carrusel */

.banner .carousel{

  position: relative;

  width: 100vw;

  overflow: hidden;

  background: #000;

  user-select: none;

  contain: layout style; /* importante: sin "size" */

}



/* Pista y slides */

.banner .carousel .slides{

  display: flex;

  width: 100%;

  transition: transform .6s cubic-bezier(.22,.61,.36,1);

  will-change: transform;

  transform: translate3d(0,0,0);

  touch-action: pan-y;

}



.banner .carousel .slide{

  min-width: 100%;     /* ✅ imprescindible si mueves en % */

  flex: 0 0 100%;      /* ✅ cada slide ocupa 100% del carril */

  height: clamp(260px, 48vw, 540px);

  display: grid;

  place-items: center;

  position: relative;

  background:#000;

}



/* Imagen del slide (estilo portada Facebook) */

.banner .carousel .slide > img{

  width: 100%;

  height: 100%;

  object-fit: cover;       /* llena el área recortando si hace falta */

  object-position: center; /* centra el recorte */

  display: block;

  margin: 0;

}



/* Logo overlay */

.banner .carousel .slide > img.logo-soft{

  position: absolute;

  right: 2.2vw;

  bottom: 2.2vh;

  width: clamp(110px, 16vw, 260px);

  height: auto;

  object-fit: contain;

  filter: drop-shadow(0 6px 14px rgba(0,0,0,.25));

  pointer-events: none;

}



/* Controles */

.banner .carousel .nav{

  position: absolute;

  top: 50%; transform: translateY(-50%);

  border: none;

  background: rgba(240,255,249,.55);

  backdrop-filter: blur(6px);

  -webkit-backdrop-filter: blur(6px);

  width: 44px; height: 44px;

  border-radius: 50%;

  cursor: pointer;

  box-shadow: 0 6px 18px #0003;

  font-size: 20px; line-height: 44px; text-align: center;

  color: #1b1b1b;

}

.banner .carousel .nav:hover{ background: rgba(240,255,249,.85); }

.banner .carousel .prev{ left: 14px; }

.banner .carousel .next{ right: 14px; }



/* Play/Pause */

.banner .carousel .play-pause{

  position: absolute;

  right: 14px; bottom: 14px;

  border: none;

  background: linear-gradient(90deg, var(--main-gold), var(--main-gold-dark));

  color: #fff;

  width: 42px; height: 42px; border-radius: 50%;

  cursor: pointer;

  box-shadow: 0 8px 20px #e2c27555;

  font-size: 18px;

}



/* Dots */

.banner .carousel .dots{

  position: absolute;

  left: 50%; bottom: 16px;

  transform: translateX(-50%);

  display: flex; gap: 8px;

}

.banner .carousel .dots button{

  width: 9px; height: 9px; border-radius: 50%;

  border: 0;

  background: #ffffff88;

  cursor: pointer;

  box-shadow: 0 2px 6px #0003;

}

.banner .carousel .dots button.active{

  background: var(--main-gold);

  width: 22px; border-radius: 999px;

}



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

.banner .contenedorImagenes{ position: relative; width: 100%; }

.banner .banner-fondo{ width: 100%; height: auto; display: block; object-fit: cover; }



/* Imagen soporte en "¿Quiénes somos?" */

#support{

  width: clamp(180px, 28vw, 360px);

  max-width: 100%;

  height: auto;

  float: right;

  margin: 6px 0 14px 18px;

  position: relative;

  bottom: 0;

  shape-outside: margin-box;

}

.presentacion::after{ content:""; display: table; clear: both; }

.presentacion img{ max-width: 100%; height: auto; }

@media (max-width: 950px){

  #support{

    float: none;

    display: block;

    margin: 8px auto 16px auto;

    width: clamp(200px, 60vw, 420px);

  }

}

@media (max-width: 400px){

  #support{ width: min(85vw, 360px); }

}



/* Facebook en contacto */

#fblogo {

  height: 32px;

  vertical-align: middle;

}



/* ========================= SERVICIOS ========================= */

#servicios {

  max-width: 1400px;

  margin: 110px auto 0 auto;

  border-radius: 21px;

  padding: 2.5rem 2vw 2.7rem 2vw;

  background: linear-gradient(98deg, #fff 75%, #f4e7c9 100%);

}

.servicios-titulo {

  color: #000;

  text-align: center;

  margin-bottom: 2.3rem;

  font-size: 1.55rem;

  letter-spacing: 2px;

  font-weight: bold;

}

.servicios-grid {

  display: flex;

  flex-direction: column;

  gap: 2.6rem;

  width: 100%;

  align-items: stretch;

}

.servicio-card {

  background: #fff;

  border-radius: 18px;

  box-shadow: 0 6px 24px #e2c27521, 0 1.5px 7px #e2c2751c;

  display: flex;

  flex-direction: row;

  align-items: center;

  justify-content: space-between;

  min-height: 220px;

  padding: 1.2rem 1.6rem;

  width: 100%;

  margin: 0 auto;

  border-left: 8px solid var(--main-gold);

  transition: box-shadow .17s, transform .13s;

  position: relative;

  overflow: hidden;

  gap: 2vw;

}

.servicio-card img {

  width: 200px;

  border-radius: 20px;

  object-fit: contain;

  flex-shrink: 0;

}

.servicio-card h3 {

  color: var(--main-gold-dark);

  font-size: 1.2rem;

  font-weight: 700;

  letter-spacing: 1px;

  margin: 0 0 0.32rem 0;

  text-align: left;

}

.servicio-card p {

  color: #444;

  font-size: 1.06rem;

  line-height: 1.68;

  text-align: left;

  margin: 0 0 0.4rem 0;

}

/* Alternar imagen */

.servicio-card:nth-child(even) {

  flex-direction: row-reverse;

  border-left: none;

  border-right: 8px solid var(--main-gold);

}

.servicio-card:nth-child(even) img { margin: 0 2vw 0 0; }



/* ========================= PRESENTACIÓN ========================= */

.cards-grid {

  max-width: 1300px;

  width: 98vw;

  margin: 0.7rem auto 0 auto;

  display: flex;

  flex-direction: column;

  gap: 2.2rem;

  margin-top: 150px;

}

.presentacion {

  width: 100%;

  background: var(--white);

  border-radius: 16px;

  box-shadow: 0 8px 40px #e2c27526, 0 1.5px 5px #fffbe6b3;

  padding: 2.2rem 1.3rem 1.5rem 1.3rem;

  border-left: 8px solid var(--main-gold);

  position: relative;

}

.double-cards { display: flex; gap: 2.2rem; }

.mision, .vision {

  flex: 1;

  background: var(--white);

  border-radius: 16px;

  box-shadow: 0 8px 40px #e2c27526, 0 1.5px 5px #fffbe6b3;

  padding: 2.2rem 1.3rem 1.5rem 1.3rem;

  border-left: 8px solid var(--main-gold);

  position: relative;

  margin: 20px;

  display: flex;

  flex-direction: column;

  height: 100%;

}

.presentacion p:first-child,

.mision p:first-child,

.vision p:first-child {

  color: var(--main-gold-dark);

  font-weight: 700;

  font-size: 1.34rem;

  margin-bottom: 1.15rem;

  letter-spacing: 2.2px;

}

.presentacion p:not(:first-child),

.mision p:not(:first-child),

.vision p:not(:first-child) {

  font-size: 1.11rem;

  color: #555;

  margin-bottom: 1.03rem;

  line-height: 1.75;

}

.presentacion p:last-child {

  color: var(--main-gold);

  font-weight: 600;

  font-style: italic;

  margin-bottom: 0;

}



/* ========================= CONTACTO ========================= */

.contacto {

  background: #fdfdfd;

  padding: 40px;

  border-radius: 12px;

  max-width: 1250px;

  margin: 40px auto;

  box-shadow: 0 4px 15px rgba(0,0,0,0.08);

  text-align: center;

}

.contacto h2 {

  color: #d4a017;

  font-size: 2rem;

  margin-bottom: 15px;

  font-weight: 700;

}

.contacto .intro {

  font-size: 1rem;

  color: #444;

  line-height: 1.6;

  margin-bottom: 25px;

}

.contact-info {

  display: flex;

  flex-direction: column;

  gap: 15px;

  align-items: center;

}

.contact-item {

  display: flex;

  align-items: center;

  gap: 10px;

  font-size: 1.05rem;

  color: #333;

}

.contact-item i {

  font-size: 1.3rem;

  color: #d4a017;

}

.contact-item a {

  color: #0077cc;

  text-decoration: none;

  transition: color 0.3s ease;

}

.contact-item a:hover { color: #005fa3; }



/* Responsive */

@media (max-width: 600px) {

  .contacto { padding: 20px; }

  .contacto h2 { font-size: 1.5rem; }

  .contact-item { font-size: 0.95rem; }

}



/* ====== FORMULARIO DE CONTACTO ====== */

.contacto-form {

  max-width: 1250px;

  margin: 28px auto 80px;

  background: #fff;

  border-radius: 16px;

  box-shadow: 0 10px 28px rgba(0,0,0,.06);

  padding: clamp(18px, 4vw, 40px);

  text-align: left;

}

.contacto-form h2{

  margin: 0 0 8px;

  font-size: clamp(1.4rem, 2.2vw, 2rem);

  letter-spacing: .5px;

  color: var(--main-gold-dark);

}

.contacto-form .subcopy{

  margin: 0 0 18px;

  color: #555;

  line-height: 1.6;

}

.contacto-form .grid{

  display: grid;

  grid-template-columns: repeat(2, minmax(0,1fr));

  gap: clamp(12px, 2vw, 20px);

}

.contacto-form .field{ display: flex; flex-direction: column; gap: 6px; }

.contacto-form .field.full{ grid-column: 1 / -1; }

.contacto-form label{ font-weight: 600; color: #333; }

.contacto-form input,

.contacto-form textarea{

  width: 100%;

  border: 1.5px solid #e8e8e8;

  border-radius: 10px;

  padding: 12px 14px;

  font-size: 1rem;

  background: #fff;

  color: #222;

  outline: none;

  transition: border .18s, box-shadow .18s, background .18s;

}

.contacto-form input::placeholder,

.contacto-form textarea::placeholder{ color:#9aa1a7; }

.contacto-form input:focus,

.contacto-form textarea:focus{

  border-color: var(--main-gold);

  box-shadow: 0 0 0 4px rgba(226,194,117,.20);

  background:#fffef8;

}

.contacto-form .error{

  min-height: 16px;

  color: #b00020;

  font-size: .85rem;

}

.contacto-form .btn-send{

  margin-top: 6px;

  background: linear-gradient(90deg, var(--main-gold), var(--main-gold-dark));

  color: #fff;

  border: 0;

  border-radius: 12px;

  padding: 12px 18px;

  font-weight: 700;

  letter-spacing: .4px;

  cursor: pointer;

  box-shadow: 0 8px 18px rgba(226,194,117,.35);

  transition: transform .08s ease, filter .18s ease;

}

.contacto-form .btn-send:hover{ filter: brightness(1.03); }

.contacto-form .btn-send:active{ transform: translateY(1px); }

.contacto-form .form-status{ margin-top: 12px; font-size: .98rem; color: #2f6b2f; }

.contacto-form .form-status.error{ color: #b00020; }

.contacto-form .hp{ position:absolute; left:-9999px; opacity:0; }

@media (max-width: 820px){

  .contacto-form .grid{ grid-template-columns: 1fr; }

}



/* ========================= ANIMACIONES ========================= */

@keyframes fadeinup {

  0% { opacity: 0; transform: translateY(40px);}

  100% { opacity: 1; transform: translateY(0);}

}



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

.footer {

  background: #fffbe6;

  color: var(--main-gold-dark);

  text-align: center;

  font-size: 1.05rem;

  padding: 1.5rem 0;

  margin-top: 3.5rem;

  letter-spacing: 1px;

  border-top: 1px solid #e2c27533;

}



/* ===== HAMBURGUESA & NAV RESPONSIVE ===== */

.hamburger{

  display:none;

  position:absolute;

  right: 3vw;

  top: 50%;

  transform: translateY(-50%);

  width: 42px; height: 42px;

  border: 0; background: transparent;

  cursor: pointer;

  z-index: 110;

}

.hamburger span{

  display:block;

  width: 26px; height: 3px;

  margin: 5px auto;

  background: #1b1b1b;

  border-radius: 3px;

  transition: transform .2s ease, opacity .2s ease;

}

.hamburger.is-open span:nth-child(1){ transform: translateY(8px) rotate(45deg); }

.hamburger.is-open span:nth-child(2){ opacity: 0; }

.hamburger.is-open span:nth-child(3){ transform: translateY(-8px) rotate(-45deg); }



.nav-links{

  display:flex;

  align-items:center;

  justify-content:center;

}

.nav-links ul{ }



@media (max-width: 960px){

  .hamburger{ display:block; }



  .nav-links{

    position: fixed;

    inset: 0 0 0 auto;

    width: min(78vw, 360px);

    height: 100vh;

    background: rgba(255,255,255,.96);

    box-shadow: -10px 0 30px rgba(0,0,0,.12);

    transform: translateX(100%);

    transition: transform .25s ease;

    padding-top: 120px;

    z-index: 105;

    backdrop-filter: blur(8px);

  }

  .nav-links.open{ transform: translateX(0); }



  .nav-links ul{

    flex-direction: column;

    gap: 1.6rem;

    margin: 0; padding: 0 24px;

  }

  .nav-links li{

    font-size: 1.15rem;

    border: 0;

  }



  body.no-scroll{

    overflow: hidden;

    touch-action: none;

  }



  .navbar{ justify-content: flex-end; padding-right: 72px; }

}



/* ========================= MEDIA QUERIES ========================= */

@media (min-width: 1600px) {

  .banner .carousel .slide{ height: min(540px, 48vw); }

}

@media (max-aspect-ratio: 1/1) {

  .banner .carousel .slide{ height: clamp(320px, 56vh, 560px); }

}

@media (max-width: 1400px) {

  .cards-grid { max-width: 99vw; width: 99vw; }

  #servicios { max-width: 99vw; }

}

@media (max-width: 1100px) {

  .cards-grid { max-width: 98vw; }

  .presentacion, .mision, .vision {

    padding: 1.5rem 0.7rem 1.1rem 0.7rem;

    font-size: 1rem;

  }

}

@media (max-width: 950px) {

  .double-cards { flex-direction: column; gap: 1.3rem; }

  .mision, .vision { width: 100%; }

  .servicio-card,

  .servicio-card:nth-child(even) {

    flex-direction: column !important;

    align-items: center;

    text-align: center;

    border-right: none !important;

    border-left: 8px solid var(--main-gold) !important;

    gap: 1.2rem;

    padding: 1rem 1.1rem;

  }

  .servicio-card img {

    width: min(92%, 520px);

    margin: 0 0 0.8rem 0 !important;

  }

}

@media (max-width: 768px){

  .navbar ul { gap: 1.6rem; }

  .banner .carousel .slide > img.logo-soft{

    right: 3.5vw; bottom: 2.8vh; width: clamp(90px, 28vw, 180px);

  }

  .banner .carousel .nav{

    width: 40px; height: 40px; font-size: 18px; line-height: 40px;

  }

  .banner .carousel .play-pause{

    width: 38px; height: 38px; font-size: 16px;

  }

}

@media (max-width: 650px) {

  .navbar ul { gap: 1rem; }

  .banner { min-height: 160px; padding: 2.5rem 0.2rem 1rem 0.2rem; }

  .presentacion, .mision, .vision { padding: 1.1rem 0.3rem 1rem 0.5rem; border-radius: 9px; }

  .servicios-titulo { font-size: 1.3rem; }

}

/* ===== HERO: controla altura como "portada" y evita que se alargue en móvil ===== */



/* 1) El contenedor del carrusel define la altura con aspect-ratio (ancho/alto) */

.banner .carousel{

  /* desktop/tablet: poco alto (21:9) */

  --hero-ar: 21/9;

  aspect-ratio: var(--hero-ar);

  max-height: 520px;

}



/* tablet chica / móvil grande */

@media (max-width: 900px){

  .banner .carousel{

    /* más panorámico (16:9) para que se vea más bajito */

    --hero-ar: 16/9;

    max-height: 420px;

  }

}



/* móvil chico */

@media (max-width: 600px){

  .banner .carousel{

    /* todavía más panorámico (18:9) = menos alto */

    --hero-ar: 18/9;

    max-height: 360px;

  }

}



/* 2) Forzamos que la pista y cada slide tomen el alto del contenedor */

.banner .carousel .slides{ height: 100% !important; }

.banner .carousel .slide{

  height: 100% !important;     /* pisa el clamp anterior */

  min-width: 100%;             /* cada slide ocupa todo el ancho */

  flex: 0 0 100%;

}



/* 3) La imagen se recorta como portada (cover) y llena 100% del alto */

.banner .carousel .slide > img{

  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: center;     /* si quieres mover el foco: center 30%, etc. */

  display: block;

}



/* 4) Opcional: en móviles con barras de navegador locas, limita un poco más */

@supports (height: 1dvh){

  @media (max-width: 600px){

    .banner .carousel{ max-height: min(38dvh, 360px); }

  }

}
/* === WhatsApp flotante — fijo, limpio y estable en TODAS === */
:root{
  /* offsets base en píxeles + tamaño */
  --wa-right: 22px;
  --wa-bottom: 18px;
  --wa-size: 72px;
}

/* el wrapper no pinta nada, solo es un hook */
.wa-fab{ pointer-events: none; }

.wa-fab .whatsapp-float{
  position: fixed;              /* anclado al viewport, sin heredar transform */
  right: var(--wa-right);
  bottom: var(--wa-bottom);
  z-index: 2147483647;
  display: block;
  line-height: 0;
  pointer-events: auto;         /* sí recibe clics */
}

/* solo tu PNG, sin fondo/borde/sombra */
.wa-fab .whatsapp-float img{
  width: var(--wa-size) !important;
  height: var(--wa-size) !important;
  display: block !important;
  max-width: none !important;   /* anula img{max-width:100%} global */
  object-fit: contain !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* === iPhone (gestos/notch): añade safe-area si existe (sin mover de más) === */
@supports (right: max(0px)){
  .wa-fab .whatsapp-float{
    right: max(var(--wa-right), calc(env(safe-area-inset-right, 0px) + var(--wa-right)));
    bottom: max(var(--wa-bottom), calc(env(safe-area-inset-bottom, 0px) + var(--wa-bottom)));
  }
}

/* ===== Cortes por ANCHO (cubren “todas” sin usar vw) ===== */
/* teléfonos mini / SE */
@media (max-width: 360px){
  :root{ --wa-right: 16px; --wa-bottom: 14px; --wa-size: 64px; }
}
/* iPhone 12/13/14/XR rango típico 375–430 */
@media (min-width: 361px) and (max-width: 430px){
  :root{ --wa-right: 18px; --wa-bottom: 16px; --wa-size: 70px; }
}
/* phablets y tablet chica (431–767) */
@media (min-width: 431px) and (max-width: 767px){
  :root{ --wa-right: 20px; --wa-bottom: 18px; --wa-size: 72px; }
}
/* tablet/desktop estándar */
@media (min-width: 768px) and (max-width: 1279px){
  :root{ --wa-right: 24px; --wa-bottom: 20px; --wa-size: 64px; }
}
/* desktop grande */
@media (min-width: 1280px) and (max-width: 1599px){
  :root{ --wa-right: 28px; --wa-bottom: 22px; --wa-size: 68px; }
}
/* 1600–1919 */
@media (min-width: 1600px) and (max-width: 1919px){
  :root{ --wa-right: 30px; --wa-bottom: 24px; --wa-size: 72px; }
}
/* 1920+ (1080p/2K/4K) */
@media (min-width: 1920px){
  :root{ --wa-right: 32px; --wa-bottom: 26px; --wa-size: 76px; }
}

/* ===== Cortes por ALTURA (landscape, barras, hubs) ===== */
/* alturas bajas (landscape móvil / smart displays) */
@media (max-height: 700px){
  :root{ --wa-bottom: 20px; }
}
/* Nest Hub aprox (1024×600) */
@media (min-width: 1000px) and (max-height: 700px){
  :root{ --wa-right: 34px; --wa-bottom: 22px; --wa-size: 68px; }
}
/* Nest Hub Max aprox (1280×800) */
@media (min-width: 1200px) and (max-height: 900px){
  :root{ --wa-right: 36px; --wa-bottom: 24px; --wa-size: 72px; }
}

/* ===== Densidad alta (evita que “se vea chico” en pantallas muy densas) ===== */
@media (min-resolution: 3dppx){
  :root{ --wa-size: calc(var(--wa-size) + 4px); }
}