/*
  Instituto Johann Gutenberg – estilos principales
  Paleta: azul #203970; acentos: #e13e73 #f0841a #09b3b2 #ffe014 #8ebf22 #6ac9f3
  Mobile-first, accesible, performante. 
*/

:root{
  --blue:#203970;
  --bg:#ffffff;
  --magenta:#e13e73;
  --orange:#f0841a;
  --turquoise:#09b3b2;
  --yellow:#ffe014;
  --green:#8ebf22;
  --sky:#6ac9f3;
  --text:#1a2433;
  --muted:#6b7280;
  --radius:14px;
  --shadow:0 8px 24px rgba(0,0,0,.08);
  --container:1200px;
}

/* Base */
html{scroll-behavior:smooth}
*{box-sizing:border-box}
body{ margin:0; font-family:"Poppins","Inter",system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,sans-serif; color:var(--text); background:var(--bg); }
img{max-width:100%; height:auto; display:block}
a{color:var(--blue); text-decoration:none}
a:hover{ text-decoration:underline }
.container{width:min(100% - 2rem, var(--container)); margin-inline:auto}

/* Utilities */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* Skip link */
.skip-link{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden }
.skip-link:focus{ left:1rem; top:1rem; width:auto; height:auto; background:#fff; padding:.5rem .75rem; border-radius:8px; box-shadow:var(--shadow) }

/* Header / Navbar */
.site-header{ position:sticky; top:0; z-index:1000; background:var(--blue); box-shadow:0 1px 0 rgba(0,0,0,.06) }
.navbar{ display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding:.28rem 0; color:#fff; position:relative } /* padding reducido a la mitad */
.brand{ display:flex; align-items:center; gap:.5rem; font-weight:700; color:#fff }
.brand img{ width:200px !important; height:200px !important; object-fit:contain }
.nav-toggle{ background:transparent; color:#fff; border:1px solid rgba(255,255,255,.6); padding:.45rem .7rem; border-radius:12px; font-size:1rem }
.hamburger rect{ fill:#fff }

.menu{ list-style:none; margin:0; padding:.25rem .5rem .6rem; display:none; gap:.35rem; flex-direction:column; position:absolute; top:100%; left:0; right:0; background:var(--blue); z-index:1100; border-bottom:1px solid rgba(255,255,255,.15) }
.menu li{ width:100% }
.menu a{ display:block; padding:.6rem .75rem; border-radius:10px; color:#fff; font-size:1.1rem; line-height:1.2 }
.menu a.active{ color:#fff; background:rgba(255,255,255,.18) }
.menu.open{ display:flex; }

/* Hero */
.hero{ position:relative; overflow:hidden; padding:4.5rem 0 3.5rem; background:linear-gradient(180deg, rgba(32,57,112,.04), rgba(32,57,112,0)); }
.hero .hero-content{ position:relative; z-index:2 }
.hero-title{ font-size:clamp(1.6rem, 3.8vw, 3rem); line-height:1.2; font-weight:700; letter-spacing:-.01em }
.lead{ color:var(--muted); margin:.75rem 0 1.5rem; max-width:60ch }

/* Color helpers for hero text */
.turquoise{ color:var(--turquoise) }
.magenta{ color:var(--magenta) }
.orange{ color:var(--orange) }

.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.8rem 1.1rem; border-radius:999px; border:0; cursor:pointer; font-weight:600 }
.btn-primary{ background:var(--blue); color:#fff }
.btn-outline{ background:#fff; color:var(--blue); border:1px solid var(--blue) }
.btn:focus-visible{ outline:3px solid var(--sky); outline-offset:2px }








/* Background layers */
.hero-bg{ position:absolute; inset:0; pointer-events:none }
.layer img{ position:absolute; min-width:120%; min-height:120%; inset:auto; top:-10%; left:50%; transform:translateX(-50%); opacity:.35; will-change:transform }
.layer-top img{ opacity:.25 }

/* Floating shapes */
.floaters{ position:absolute; inset:0; margin:0; padding:0; list-style:none; z-index:1 }
.floater{ position:absolute; width:18vmin; aspect-ratio:1; border-radius:50%; opacity:.25; filter:blur(1px); transform:translate3d(0,0,0) }
.f1{ left:5%; top:10%; background:var(--sky) }
.f2{ right:8%; top:20%; background:var(--yellow) }
.f3{ left:15%; bottom:10%; background:var(--turquoise) }
.f4{ right:10%; bottom:5%; background:var(--magenta) }

/* Bounce animation */
@keyframes soft-bounce{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-6px) } }
.bounce-text span{ display:inline-block; animation:soft-bounce 1.8s ease-in-out infinite; }
.bounce-text span:nth-child(2){ animation-delay:.1s }
.bounce-text span:nth-child(3){ animation-delay:.2s }

/* Rotating badge */
.badge-rotating{ position:absolute; right:1rem; bottom:-2rem; animation:spin 6.7s linear infinite; will-change:transform } /* bajada ligera */
.badge-text{ font: 700 21px/1 "Poppins", sans-serif; letter-spacing:2px; text-transform:uppercase; fill:var(--blue) }
@keyframes spin{ to{ transform:rotate(360deg) } }

/* Sections */
.section{ padding:3.2rem 0 }
.section-alt{ background:linear-gradient(180deg, #fff, rgba(106,201,243,.08)) }
.section-header h2{ font-size:clamp(1.4rem, 2.6vw, 2.2rem); margin:0 0 .5rem }
.section-header p{ color:var(--muted); margin:0 }

/* Grid helpers */
.grid{ display:grid; gap:1rem }
.grid-2{ grid-template-columns:1fr }
.grid-4{ grid-template-columns:1fr 1fr }
@media(min-width:768px){
  .menu{ position:static; flex-direction:row; background:transparent; padding:0; gap:1rem; border:0; display:flex }
  .nav-toggle{ display:none }
  .grid-2{ grid-template-columns:1fr 1fr }
  .grid-4{ grid-template-columns:repeat(4,1fr) }
  .menu a{ font-size:.95rem; padding:.5rem .6rem }
  .navbar{ padding:.24rem 0; } /* aún más compacto en desktop */
}

/* Cards and features */
.card{ background:#fff; border:1px solid #eef2f7; border-radius:var(--radius); padding:1rem; box-shadow:var(--shadow) }
.features .feature{ background:#fff; border:1px solid #eef2f7; border-radius:var(--radius); padding:1rem; box-shadow:var(--shadow) }
.icon-svg{ width:28px; height:28px; fill:var(--blue) }

/* TALLERES – (sección aparte) — estilos inline en la página para simplificar */

/* Carousel (para carruseles secundarios si los usas) */
.carousel{ position:relative; margin-top:1rem }
.carousel-viewport{ overflow:hidden; border-radius:var(--radius); outline:none }
.carousel-track{ display:grid; grid-auto-flow:column; grid-auto-columns:100%; gap:1rem; will-change:transform }
.slide-card{ position:relative; overflow:hidden; border-radius:var(--radius); box-shadow:var(--shadow) }
.slide-card img{ width:100%; height:clamp(200px, 45vw, 480px); object-fit:cover; display:block }
.slide-card figcaption{ position:absolute; left:0; bottom:0; right:0; padding:.75rem 1rem; color:#fff; background:linear-gradient(180deg, transparent, rgba(0,0,0,.55)) }
.carousel-controls{ display:flex; gap:.5rem; justify-content:center; margin-top:.75rem }

/* Video embed */
.video-embed{ position:relative; width:100%; aspect-ratio:16/9; border-radius:16px; overflow:hidden; box-shadow:var(--shadow); margin-bottom:1rem }
.video-embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0 }

/* Facilities circles */
.facilities{ --size:140px; display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; margin-top:2rem; padding:0; list-style:none }
.facility{ text-align:center; opacity:1; transform:none }
.facility-img{ width:var(--size); height:var(--size); border-radius:50%; overflow:hidden; margin-inline:auto; box-shadow:var(--shadow); border:3px solid #fff; background:#eef2f7; transition: transform .25s ease }
.facility-img img{ width:100%; height:100%; object-fit:cover }
.facility-img:hover, .facility-img:focus-within{ transform: scale(1.08) }
.facility-text{ margin:.55rem 0 0; color:var(--text); font-weight:600 }
@media(min-width:768px){
  .facilities{ grid-template-columns:repeat(4,1fr) }
  .facilities{ --size:160px }
}

/* Contacto */
.contact-grid{ align-items:start }
.form-field{ display:grid; gap:.35rem; margin-bottom:.75rem }
input, textarea{ font:inherit; padding:.7rem .8rem; border-radius:10px; border:1px solid #d1d5db }
input:focus-visible, textarea:focus-visible{ outline:3px solid var(--sky); outline-offset:2px }
input[aria-invalid="true"], textarea[aria-invalid="true"]{ border-color:#dc2626 }

/* Mapa redondo */
.map-wrap{ display:grid; place-items:center }
.map-circle{ width:min(100%, 420px); aspect-ratio:1; border-radius:50%; overflow:hidden; box-shadow:var(--shadow); border:6px solid #fff }
.map-circle iframe{ width:100%; height:100%; border:0 }

/* Footer centrado y mejorado */
.site-footer{ 
    background: var(--blue); 
    color: #fff; 
    padding: 2rem 0; 
    margin-top: 0;
}

/* Contenedor principal del footer centrado */
.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* Grid del footer centrado */
.footer-grid{ 
    display: grid; 
    gap: 1rem; 
    align-items: center;
    text-align: center; /* Centra todo el contenido */
    
    /* Para desktop: 3 columnas */
    grid-template-columns: 1fr 2fr 1fr;
    justify-items: center;
}

.footer-brand {
    justify-self: center;
}

.footer-brand img{ 
    height: 72px; /* Solo fijamos la altura */
    width: auto; /* El ancho se ajusta automáticamente para mantener proporción */
    max-width: 200px; /* Límite máximo por si es muy ancho */
    display: block;
    margin: 0 auto;
    object-fit: contain; /* Mantiene la proporción sin deformar */
}

/* Navegación centrada */
.footer-nav {
    justify-self: center;
}

.footer-nav .menu-secondary{ 
    list-style: none; 
    display: flex; 
    flex-wrap: wrap; 
    gap: .75rem; 
    padding: 0; 
    margin: 0;
    justify-content: center; /* Centra los items del menú */
}

.footer-nav a{ 
    color: #cfe0ff;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-nav a:hover {
    color: #fff;
}

/* Meta información centrada */
.footer-meta{ 
    font-size: .9rem; 
    color: #e6edff;
    text-align: center;
    justify-self: center;
}

.privacy{ 
    color: #e6edff; 
    display: inline-block; 
    margin-bottom: .35rem;
}

/* Footer social centrado */
.footer-social{ 
    list-style: none; 
    display: flex; 
    gap: .75rem; 
    margin: 1rem 0 0; 
    padding: 0;
    justify-content: center; /* Centra los iconos sociales */
}

.footer-social a{ 
    display: inline-grid; 
    place-items: center; 
    width: 40px; 
    height: 40px; 
    background: #1a2a54; 
    border-radius: 10px;
    transition: all 0.3s ease;
}

.footer-social a:hover {
    background: #2a3a64;
    transform: translateY(-2px);
}

.footer-social svg{ 
    width: 20px; 
    height: 20px; 
    fill: #fff;
}

/* Responsive: En móviles, una sola columna centrada */
@media (max-width: 768px) {
    .footer-grid {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 1.5rem;
    }
    
    .footer-nav .menu-secondary {
        flex-direction: column;
        gap: 1rem;
    }
    
    .footer-container {
        padding: 0 1.5rem;
    }
}

/* WhatsApp floating (sin cambios, ya está bien) */
.whatsapp{ 
    position: fixed; 
    right: 1rem; 
    bottom: 1rem; 
    width: 56px; 
    height: 56px; 
    background: #25D366; 
    border-radius: 50%; 
    display: grid; 
    place-items: center; 
    box-shadow: 0 10px 20px rgba(0,0,0,.18); 
    z-index: 2000; 
    color: #fff;
    transition: transform 0.3s ease;
}

.whatsapp:hover {
    transform: scale(1.1);
}

.whatsapp .fa{ 
    font-size: 28px; 
    line-height: 1;
}

.wa-tooltip{ 
    position: absolute; 
    right: 68px; 
    bottom: 50%; 
    transform: translateY(50%); 
    background: #111827; 
    color: #fff; 
    padding: .35rem .5rem; 
    border-radius: 8px; 
    font-size: .8rem; 
    opacity: 0; 
    translate: 0 4px; 
    pointer-events: none; 
    white-space: nowrap;
}

.whatsapp:hover .wa-tooltip{ 
    opacity: 1; 
    translate: 0 0;
}

/* Waves */
.wave-section{ margin:0; padding:0; line-height:0 }
.wave-svg{ display:block; width:100%; height:auto }

/* --- Menú: visibilidad desktop + mobile toggle --- */
@media (max-width: 767px){
  .menu{ display:none !important; }
  .menu.open{ display:flex !important; }
}
.site-header{ position:sticky; top:0; z-index:9999 !important; }
.menu{ z-index:10000 !important; }

.menu[hidden]{ display:none !important; }
@media(min-width: 768px){
  .menu{ display:flex !important; }
  .menu[hidden]{ display:flex !important; } /* override hidden en desktop */
  .nav-toggle{ display:none !important; }
}

/* --- Swiper slider hero --- */
.slider-hero{
  width:100%; height:clamp(240px, 52vw, 560px);
  --overlay: linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.35));
}
.slide-cover{
  position:relative;
  background: var(--overlay), center/cover no-repeat var(--bg);
  background-image: var(--overlay), var(--bg);
  background-size: cover;
  background-repeat:no-repeat;
}
.slide-cover{ --bg: url('/img/intro-1.jpg'); }
.slide-cover[style]{ background-image: var(--overlay), var(--bg); }
.slide-caption{
  position:absolute; inset:auto 0 12% 0; text-align:center; color:#fff;
  padding-inline:1rem;
}
.slide-caption h3{
  font-size:clamp(1.2rem, 3.2vw, 2.4rem);
  font-weight:800; letter-spacing:-.02em; text-shadow:0 2px 16px rgba(0,0,0,.45);
}
.slider-hero .swiper-button-prev, .slider-hero .swiper-button-next{
  width:46px; height:46px; border-radius:50%;
  backdrop-filter: blur(6px);
  background:rgba(255,255,255,.22);
}
.slider-hero .swiper-button-prev:after, .slider-hero .swiper-button-next:after{ font-size:18px; color:#fff; }
.slider-hero .swiper-pagination-bullet{ width:8px; height:8px; background:#fff; opacity:.6 }
.slider-hero .swiper-pagination-bullet-active{ opacity:1 }

/* --- Hero CTA a la izquierda --- */
.hero .hero-cta{ display:flex; justify-content:flex-start; }

/* --- Misión / Visión layout --- */
.mv-grid{ align-items:stretch; gap:clamp(16px, 3vw, 24px); }
.mv-card{
  display:grid; grid-template-columns: 1fr; gap:1rem; align-items:center;
  border-radius:16px; padding:clamp(16px, 3vw, 24px);
}
.mv-blue{ background:#203970; color:#fff; }
.mv-illustration{ width:min(220px, 40vw); height:auto; justify-self:center }
.mv-content h3{ margin:.25rem 0 .5rem; }
@media(min-width: 900px){
  .mv-left{ grid-template-columns: 220px 1fr; }
  .mv-right{ grid-template-columns: 1fr 220px; }
  .mv-illustration{ justify-self:stretch; align-self:center; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .bounce-text span, .badge-rotating{ animation:none }
}
@media(min-width:1024px){
  .hero{ padding:5.5rem 0 4.5rem }
}