/* =========================================================
   assets/styles.css
   Diseño base + paleta editable (bilingüe /es y /en)
   ========================================================= */

/* =========================================================
   🎨 PALETA / THEME (EDITA AQUÍ)
   Cambia estos valores y se actualiza toda la web.
   ========================================================= */
:root{
  /* 1) Fondos (base) */
  --bg: #2596be;          /* fondo general (body) */
  --surface: #2596be;     /* superficie (header/hero) */
  --panel: #2596be;       /* tarjetas/cajas */

  /* 2) Texto */
  --text: #005A75;        /* texto principal */
  --muted: rgba(255,255,255,0.9); /* texto secundario */

  /* 3) Marca (colores principales) */
  --primary: #326F99;     /* color principal (botones, links, detalles) */
  --primary2: #069CF9;    /* segundo para degradado */
  --accent: #fff;      /* acento (resaltados) */

  /* 4) Líneas y sombras */
  --border: rgba(255,255,255,.10);
  --shadow: 0 18px 40px rgba(0,0,0,.30);
  --shadow2: 0 10px 24px rgba(0,0,0,.20);

  /* 5) “Glows” (brillos del fondo/hero)
     TIP: Si quieres menos brillo, baja los valores alpha (0.xx) */
  --glow-primary: rgba(79,140,255,.22);
  --glow-accent: rgba(136,243,197,.14);

  /* 6) Layout */
  --radius: 16px;
  --max: 1120px;
}

/* =========================================================
   Base / Reset
   ========================================================= */
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:
    radial-gradient(1200px 700px at 15% -10%, var(--glow-primary), transparent 60%),
    radial-gradient(900px 600px at 100% 10%, var(--glow-accent), transparent 55%),
    linear-gradient(180deg, var(--surface), var(--bg));
  color: var(--text);
  overflow-x: hidden;
}
a{ color: inherit; text-decoration: none; }
img{ max-width:100%; height:auto; display:block; }
.container{ width: min(100% - 2rem, var(--max)); margin-inline:auto; }

.section{ padding: 2.8rem 0; }
.section--alt{
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border-block: 1px solid var(--border);
}

/* Tipografía */
.section-title{
  font-size: clamp(1.4rem, 2.3vw, 2rem);
  margin: 0 0 .8rem;
  letter-spacing: .2px;
}
.tituloscformato{
  font-size: clamp(1.25rem, 2.2vw, 1.8rem);
  margin: 0 0 1.2rem;
  text-align: center;
  letter-spacing: .35px;
}
.text-accent{ color: var(--accent); }
.h5{ margin: 1rem 0 .5rem; font-size: 1.05rem; }

.divider{
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  margin: 1.1rem 0;
}

blockquote.blockquote{
  margin: 0;
  padding: 1rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(255,255,255,.05);
  box-shadow: var(--shadow2);
}
blockquote.blockquote p{ margin: 0 0 .5rem; line-height: 1.7; }
blockquote.blockquote cite{ color: var(--muted); font-style: normal; }

/* =========================================================
   WhatsApp Floating Button
   ========================================================= */
.whatsapp{
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(0,0,0,.25);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  z-index: 99;
  backdrop-filter: blur(10px);
}
.whatsapp img{ width: 34px; height: 34px; object-fit: contain; }

/* =========================================================
   Header / Nav
   ========================================================= */
.site-header{
  position: sticky;
  top: 0;
  z-index: 80;
  background: rgba(11,18,32,.35);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: background .25s ease, border-color .25s ease;
}
.site-header.is-scrolled{
  background: rgba(11,18,32,.90);
  border-bottom: 1px solid var(--border);
}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 1rem;
  padding: .85rem 0;
}

.brand{
  display:flex;
  align-items:center;
  gap: .7rem;
}
.brand__logo{
  width: 44px;
  height: 44px;
  border-radius: 12px;
  object-fit: contain;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--border);
  padding: 6px;
}
.brand__text{
  font-weight: 700;
  letter-spacing: .2px;
}

.site-nav ul{
  list-style: none;
  margin: 0;
  padding: 0;
  display:flex;
  align-items:center;
  gap: .55rem;
}

.menu-text{
  display:inline-flex;
  padding: .55rem .75rem;
  border-radius: 999px;
  color: var(--muted);
  transition: background .18s ease, color .18s ease;
}
.menu-text:hover{ background: rgba(255,255,255,.08); color: var(--text); }
.menu-text.is-active{ background: rgba(255,255,255,.10); color: var(--text); }

.language-selector{
  font: inherit;
  color: var(--text);
  background: rgba(255,255,255,.08);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: .52rem .7rem;
  outline: none;
}

/* Mobile toggle */
.nav-toggle{
  display:none;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: rgba(255,255,255,.08);
  border: 1px solid var(--border);
  cursor:pointer;
  position:relative;
}
.nav-toggle span{
  position:absolute;
  left: 11px;
  right: 11px;
  height: 2px;
  background: var(--text);
  border-radius: 999px;
  transition: transform .22s ease, top .22s ease, opacity .22s ease;
}
.nav-toggle span:nth-child(1){ top: 14px; }
.nav-toggle span:nth-child(2){ top: 21px; }
.nav-toggle span:nth-child(3){ top: 28px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ top:21px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ top:21px; transform: rotate(-45deg); }

/* Responsive nav drawer */
@media (max-width: 980px){
  .nav-toggle{ display:inline-block; }
  .site-nav{
    position:absolute;
    top: 70px;
    right: 1rem;
    width: min(92vw, 420px);
    background: rgba(11,18,32,.95);
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: var(--shadow);
    padding: .8rem;
    display:none;
  }
  .site-nav.is-open{ display:block; }
  .site-nav ul{
    flex-direction:column;
    align-items:stretch;
    gap: .3rem;
  }
  .menu-text{ width:100%; justify-content:flex-start; }
}

/* =========================================================
   Buttons
   ========================================================= */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: .5rem;
  border-radius: 999px;
  padding: .78rem 1.05rem;
  font-weight: 700;
  border: 1px solid var(--border);
  cursor: pointer;
  transition: transform .12s ease, background .2s ease, border-color .2s ease;
}
.btn:active{ transform: translateY(1px); }

/* Botón principal usa variables de marca */
.btn--primary{
  background: linear-gradient(180deg, var(--primary), var(--primary2));
  border-color: transparent;
}
.btn--ghost{
  background: rgba(255,255,255,.07);
}
.btn--ghost:hover{ background: rgba(255,255,255,.10); }

/* =========================================================
   Hero
   ========================================================= */
.section--hero{
  padding: 3.5rem 0 2.6rem;
  position: relative;
  overflow: hidden;
}
.hero-media{
  position:absolute;
  inset:0;
  /* Usamos variables para que el brillo cambie con la paleta */
  background:
    radial-gradient(900px 500px at 20% 10%, var(--glow-primary), transparent 55%),
    radial-gradient(800px 520px at 90% 30%, var(--glow-accent), transparent 55%),
    linear-gradient(180deg, transparent, transparent);
  pointer-events:none;
}
.hero-media--static{
  background:
    radial-gradient(1000px 700px at 15% 15%, var(--glow-primary), transparent 60%),
    radial-gradient(900px 700px at 90% 20%, var(--glow-accent), transparent 60%),
    linear-gradient(180deg, transparent, transparent);
}

.hero-content{
  position: relative;
  z-index: 2;
  display:grid;
  gap: 1.2rem;
  max-width: 820px;
}
.hero-content--center{
  text-align: center;
  margin-inline: auto;
  justify-items: center;
}

.hero-title{
  margin: 0;
  font-size: clamp(2rem, 3.6vw, 3.05rem);
  line-height: 1.05;
  letter-spacing: .2px;
}
.hero-title span{
  background: linear-gradient(90deg, color-mix(in srgb, var(--primary) 65%, white), var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-subtitle{
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}
.hero-cta{ display:flex; gap:.8rem; flex-wrap:wrap; }

/* =========================================================
   Carousel
   ========================================================= */
.carousel{
  position: relative;
  width: min(100% - 2rem, var(--max));
  margin: 1.7rem auto 0;
  border-radius: var(--radius);
  overflow:hidden;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.05);
  box-shadow: var(--shadow);
}
.carousel-track{
  display:flex;
  transition: transform .55s ease;
  will-change: transform;
}
.carousel-slide{
  min-width: 100%;
  position: relative;
  aspect-ratio: 16 / 8;
  background: rgba(0,0,0,.2);
}
.carousel-slide img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
  filter: saturate(1.05) contrast(1.02);
}
.carousel-btn{
  position:absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,.35);
  color: var(--text);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  backdrop-filter: blur(10px);
}
.carousel-btn:hover{ background: rgba(0,0,0,.45); }
.carousel-btn.prev{ left: 12px; }
.carousel-btn.next{ right: 12px; }

@media (max-width: 720px){
  .carousel-slide{ aspect-ratio: 16 / 10; }
}

/* =========================================================
   Bloque “Quiénes somos”
   ========================================================= */
.contenedor-padre{
  margin-top: 2rem;
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 1.6rem;
  align-items:center;
}
.caja-izquierda{
  padding: 1.2rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(255,255,255,.05);
  box-shadow: var(--shadow2);
}
.caja-izquierda p{
  color: var(--muted);
  line-height: 1.75;
  margin: .65rem 0;
}
.caja-derecha .contenedor-imagen{
  border-radius: var(--radius);
  overflow:hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.imagen-miniatura{ width:100%; height:100%; object-fit:cover; display:block; }

@media (max-width: 980px){
  .contenedor-padre{ grid-template-columns: 1fr; }
}

/* =========================================================
   Video frame
   ========================================================= */
.video-frame{
  margin-top: 1.8rem;
  border-radius: var(--radius);
  overflow:hidden;
  border: 1px solid var(--border);
  background: rgba(0,0,0,.25);
  box-shadow: var(--shadow);
}
.video-frame video{ width:100%; height:auto; display:block; }

/* =========================================================
   Contact (map + info + form)
   ========================================================= */
.contact-wrapper{
  width: min(100% - 2rem, var(--max));
  margin: 2rem auto 0;
  display:grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 1.4rem;
}
.map-container{
  border-radius: var(--radius);
  overflow:hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow2);
  background: rgba(0,0,0,.2);
  min-height: 350px;
}
.map-container iframe{
  width:100%;
  height:100%;
  min-height: 350px;
  border:0;
  display:block;
}

.info-container{ display:grid; gap: 1rem; }
.info-box, .form-box{
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: rgba(255,255,255,.05);
  box-shadow: var(--shadow2);
  padding: 1.1rem;
}
.info-box h3, .form-box h2{ margin:0 0 .6rem; }
.info-box p{ margin:0; color: var(--muted); line-height: 1.6; }
.info-box a{
  text-decoration: underline;
  text-decoration-color: rgba(255,255,255,.25);
}
.info-box a:hover{ text-decoration-color: rgba(255,255,255,.55); }

.casa-icono{ width: 34px; height: 34px; margin-bottom: .6rem; opacity: .95; }

.form{
  display:grid;
  gap: .75rem;
  margin-top: .7rem;
}
.form input, .form textarea{
  width: 100%;
  font: inherit;
  color: var(--text);
  background: rgba(227,227,227,.72);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: .75rem .85rem;
  outline: none;
}
.form textarea{ min-height: 110px; resize: vertical; }
.form input:focus, .form textarea:focus{
  border-color: color-mix(in srgb, var(--primary) 80%, white);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 22%, transparent);
}

@media (max-width: 980px){
  .contact-wrapper{ grid-template-columns: 1fr; }
}

/* =========================================================
   Internas (media frame + historia + chips)
   ========================================================= */
.media-frame{
  width: 100%;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.media-frame img{ width:100%; height:auto; display:block; object-fit:cover; }

.historia{
  margin-top: 1.4rem;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.4rem;
  align-items:start;
}
.columna{
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: rgba(255,255,255,.05);
  box-shadow: var(--shadow2);
  padding: 1.2rem;
  color: var(--muted);
  line-height: 1.75;
}
.columna ul{ margin: .6rem 0 0; padding-left: 1.1rem; }
.columna li{ margin: .35rem 0; }

@media (max-width: 980px){
  .historia{ grid-template-columns: 1fr; }
}

.tituloscolumnas{
  font-weight: 800;
  letter-spacing: .8px;
  color: var(--text);
  margin-bottom: .6rem;
  display:inline-flex;
  padding: .35rem .65rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 28%, transparent);
}
.titulosvalores{
  font-weight: 800;
  letter-spacing: .7px;
  margin: .85rem 0 .35rem;
  color: var(--text);
}

/* =========================================================
   Gallery
   ========================================================= */
.gallery{
  width: min(100% - 2rem, var(--max));
  margin: 1.3rem auto 0;
  display:grid;
  gap: .7rem;
}
.gallery img{
  width:100%;
  height:100%;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.04);
}
.gallery--masonry{ grid-template-columns: repeat(4, 1fr); }
.gallery--masonry img{ aspect-ratio: 1 / 1; }
.gallery--grid3{ grid-template-columns: repeat(3, 1fr); }
.gallery--grid3 img{ aspect-ratio: 4 / 3; }

@media (max-width: 980px){
  .gallery--masonry{ grid-template-columns: repeat(2, 1fr); }
  .gallery--grid3{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px){
  .gallery--masonry{ grid-template-columns: 1fr; }
  .gallery--grid3{ grid-template-columns: 1fr; }
}

/* =========================================================
   Utilities (grid + cards)
   ========================================================= */
.grid{ display:grid; gap: 1.4rem; }
.grid--2{ grid-template-columns: 1fr 1fr; align-items:center; }
@media (max-width: 980px){
  .grid--2{ grid-template-columns: 1fr; }
}
.card{
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: rgba(255,255,255,.05);
  box-shadow: var(--shadow2);
  padding: 1.2rem;
}
.card--elevated{ box-shadow: var(--shadow); }

/* =========================================================
   Footer
   ========================================================= */
.site-footer{
  margin-top: 2.5rem;
  border-top: 1px solid var(--border);
  background: rgba(255,255,255,.03);
}
.footer-inner{
  padding: 1.4rem 0;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color: var(--muted);
}
.footer-logo{ width: 48px; height: 48px; margin-right: .7rem; }