/* ---------- VARIABLES ---------- */
:root{
  --primary:#154D42;
  --secondary:#447168;
  --light:#fff;
  --bg:#f5f6f5;
  --social-size: clamp(56px, 6vw, 80px);
  --icon-size: clamp(28px, 3vw, 36px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;}
body{
  font-family:'Montserrat',sans-serif;
  background:var(--bg);
  color:var(--primary);
  line-height:1.6;
  overflow-x:hidden;
}
/* NAV */
nav{
  background:rgba(21,77,66,.95);
  position:sticky;top:0;z-index:1000;
  padding:1rem 3rem;
  display:flex;justify-content:space-between;align-items:center;
  box-shadow:0 4px 12px rgba(0,0,0,.15)
}
nav img{max-height:50px;width:auto;display:block}
nav ul{display:flex;gap:2rem;list-style:none}
nav ul li a{
  color:var(--light);text-decoration:none;font-weight:600;transition:.3s;
  display:flex;align-items:center;gap:.5rem
}
nav ul li a:hover{color:var(--secondary);transform:scale(1.05)}
/* HERO */
.hero{
  background:linear-gradient(135deg,rgba(21,77,66,.88),rgba(68,113,104,.88));
  color:var(--light);text-align:center;position:relative;
  padding:8rem 2rem;min-height:90vh;
  display:flex;flex-direction:column;justify-content:center;align-items:center
}
.hero::before{
  content:'';position:absolute;inset:0;
  background:url('https://images.unsplash.com/photo-1655896479936-a93af4b46087?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=1974') center/cover no-repeat;
  opacity:.7;z-index:-1; filter: grayscale(75%);animation:zoomInOut 20s infinite alternate ease-in-out
}
@keyframes moveBg {
  0% { background-position: left center; }
  100% { background-position: right center; }
}
.hero h1{font-size:3rem;font-weight:700;margin-bottom:1rem;text-shadow:2px 2px 6px rgba(0,0,0,.4)}
.hero p{max-width:800px;font-size:1.3rem;margin-bottom:2rem}
.btn{
  background:rgba(68,113,104,.9);color:var(--light);
  padding:1rem 2rem;border-radius:8px;text-decoration:none;font-weight:700;Transition:.3s
}
.btn:hover{background:rgba(47,79,79,.9);transform:translateY(-3px);box-shadow:0 6px 15px rgba(68,113,104,.4)}
/* LAYOUT BASE */
.container{max-width:1200px;margin:auto;padding:4rem 2rem}
section{text-align:center;margin-bottom:4rem}
section h2{font-size:2.5rem;margin-bottom:1rem;color:var(--primary)}
/* SERVICIOS */
.services{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem
}
.service-block{
  background:rgba(255,255,255,.95);padding:2rem;border-radius:12px;
  box-shadow:0 4px 12px rgba(0,0,0,.1);transition:.4s
}
.service-block:hover{transform:translateY(-10px);box-shadow:0 8px 20px rgba(0,0,0,.2)}
.service-block h3{margin-bottom:1rem;color:var(--secondary)}
.icon-animated{color:var(--primary);animation:pulse 1.5s infinite}
.portal-icon{color:inherit !important}
/* CONTACTO */
.contact{
  background:rgba(21,77,66,.9);color:var(--light);padding:3rem;border-radius:15px
}
.contact-blocks{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2rem;margin-top:2rem
}
.contact-block{
  background:var(--light);color:var(--primary);padding:2rem;border-radius:10px;
  transition:.3s;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center
}
@media(max-width:600px){
  .contact-blocks{grid-template-columns:1fr}
  .contact-block{text-align:center;align-items:center}
  .contact-block p,.contact-block a{font-size:1rem;word-break:break-word}
}
.contact-block:hover{transform:translateY(-5px)}
.whatsapp-icon{color:#25D366;animation:pulse 1.5s infinite}
.clock-icon{color:#FFD700;animation:pulse 1.5s infinite}
.email-icon{color:var(--primary);animation:pulse 1.5s infinite}
.location-icon{color:#FF5733;animation:pulse 1.5s infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}
/* LOGO */
.logo-animated{animation:fadeSlideIn 1.2s ease-out,logoPulse 6s infinite ease-in-out;transform-origin:center}
@keyframes fadeSlideIn{from{opacity:0;transform:translateY(-20px) scale(0.9)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes logoPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
/* Redes */
.social-animated{display:inline-block;transition:transform .3s ease;animation:pulseSocial 1.5s infinite}
.social-animated:hover{transform:scale(1.2) rotate(10deg)}
@keyframes pulseSocial{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}
.facebook{color:#1877F2}
.instagram{color:#E4405F}
.social-title{font-size:1.3rem;font-weight:600;margin-top:1.5rem;margin-bottom:.5rem;display:inline-block}
.social-icons{margin-top:1rem;display:flex;gap:1rem;justify-content:center;align-items:center;flex-wrap:wrap}
.social-icons a{width:var(--social-size);height:var(--social-size);display:inline-flex;align-items:center;justify-content:center;border-radius:50%;font-size:var(--icon-size);background:radial-gradient(ellipse at top, rgba(255,255,255,.85), rgba(255,255,255,.65));border:2px solid rgba(255,255,255,.6);box-shadow:0 6px 18px rgba(0,0,0,.25);transition:transform .25s ease, box-shadow .25s ease, background-color .25s ease, filter .25s ease;text-decoration:none}
.social-icons a.facebook{color:#1877F2;background:linear-gradient(135deg, rgba(24,119,242,.14), rgba(24,119,242,.06))}
.social-icons a.instagram{color:#E4405F;background:linear-gradient(135deg, rgba(228,64,95,.14), rgba(228,64,95,.06))}
.social-icons a:hover{transform:scale(1.12);box-shadow:0 10px 28px rgba(0,0,0,.32);filter:saturate(1.1)}
.social-icons a:focus-visible{outline:3px dashed currentColor;outline-offset:4px}
/* FOOTER ORIGINAL */
footer{background:var(--primary);color:var(--light);padding:1.5rem;text-align:center}
/* MENU móvil */
@media(max-width:768px){
  nav ul{flex-direction:column;background:rgba(21,77,66,.95);position:absolute;top:70px;right:0;width:200px;padding:1rem;display:none}
  nav ul.show{display:flex}
  .menu-toggle{display:block;cursor:pointer;color:var(--light);font-size:1.5rem}
}
@media(min-width:769px){.menu-toggle{display:none}}
/* Logo transparente */
.transparent-logo {
  background: transparent;
  max-height: 120px;
  width: auto;
  filter: drop-shadow(0 0 6px rgba(0,0,0,0.4));
  transition: transform 0.6s ease, opacity 0.6s ease;
}
.transparent-logo:hover { transform: scale(1.08) rotate(2deg); opacity: 0.9; }
/* Etiqueta bot */
.botpress-label {
  position: fixed;
  bottom: 100px;
  right: 20px;
  background: rgba(21,77,66,0.95);
  color: #fff;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  animation: typing 3s steps(25) infinite;
  white-space: nowrap; overflow: hidden;
  border: 2px solid #fff;
  z-index: 9999;
}
@keyframes typing { 0% { width: 0 } 50% { width: 180px } 100% { width: 0 } }
/* ---------- FIX ICONO PORTAL ---------- */
nav ul li a .icon-animated {
  color: currentColor;   /* hereda el blanco del enlace */
}
/* ---------- HAMBURGUESA ---------- */
.hamburger {
  display: none;            /* se oculta en escritorio */
  background: none;
  border: none;
  color: var(--light);
  font-size: 1.6rem;
  cursor: pointer;
  margin-left: auto;        /* pegado al switcher */
  padding: .25rem .5rem;
  border-radius: 4px;
  transition: background .3s;
  touch-action: manipulation;
}
.hamburger:hover,
.hamburger:focus-visible {
  background: rgba(255,255,255,.15);
  outline: 2px solid var(--secondary);
}
/* ---------- MENÚ MÓVIL ---------- */
@media (max-width: 768px) {
  .hamburger { display: block; }
  nav {
    flex-wrap: wrap;
    padding: .75rem 1rem;
  }
  /* mantenemos el switcher al extremo derecho */
  .switcher-wrapper {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: .5rem;
  }
  /* menú desplegable */
  nav ul {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(21,77,66,.98);
    flex-direction: column;
    gap: 0;
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s ease;
  }
  nav ul.show {
    max-height: 80vh;          /* suficiente para todos los items */
    padding: 1rem 0;
  }
  nav ul li {
    width: 100%;
    text-align: center;
  }
  nav ul li a {
    padding: .9rem 1rem;
    display: block;
  }
}
/* ---------- RESET ESCRITORIO ---------- */
@media (min-width: 769px) {
  nav ul {
    position: static;
    max-height: none !important;
    overflow: visible !important;
    flex-direction: row;
    background: transparent;
    padding: 0;
  }
}