/* =========================================
   ================ BASE ===================
   ========================================= */

/* ==== Reset / Base ==== */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--ink); background:var(--surface); line-height:1.5;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.visually-hidden{position:absolute!important;clip:rect(1px,1px,1px,1px);padding:0;border:0;height:1px;width:1px;overflow:hidden}

/* Comportamiento de scroll global */
html{
  scroll-behavior: smooth; /* opcional */
  scroll-padding-top: calc(var(--header-height, 64px) + 12px);
}

/* Cinturón de seguridad contra micro-desbordes horizontales */
html, body{ overflow-x: clip; }

/* Layout helpers */
.container{ max-width: var(--max); margin-inline: auto; padding-inline: var(--container-px); }
.section{padding:50px 0}
.section--light{background:#fff}
.section--dark{background:linear-gradient(180deg,var(--bg),var(--bg-2));color:#eef2ff}
.section__title{font-size:clamp(24px,3.6vw,34px);margin:0 0 22px}

/* Custom elements display */
app-hero,
app-services,
app-projects,
app-about{
  display: block;
}

/* =========================================
   ============== COMPONENTES ===============
   ========================================= */

/* ==== Botones ==== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-weight:800;letter-spacing:.2px;
  padding:.85rem 1.1rem;border-radius:12px;border:1px solid transparent;
  transition:transform .03s ease, filter .15s ease;
}
.btn:active{transform:translateY(1px)}
.btn--primary{background:linear-gradient(135deg,var(--brand),#ffd861);color:var(--brand-ink);box-shadow:var(--shadow)}
.btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.25)}

/* ==== Header ==== */
.site-header{
  position:fixed;top:0;left: 0;right:0;z-index:100; min-height: var(--header-height, 64px);
  background:#fff;border-bottom:1px solid #eef2f6;
  padding-left: 25px; padding-right: 25px;
}
.header__bar{height:var(--header-height);display:flex;align-items:center;justify-content:space-between; margin-left: 0px;margin-right: 0px;}
.brand{display:flex;align-items:center;gap:.8rem; margin-left: 0px;}
.brand__logo{height:var(--logo-height);width:auto;object-fit:contain;}

.nav-toggle{display:none;background:none;border:0;padding:10px;margin-left:8px}
.nav-toggle span{display:block;width:24px;height:2px;background:#0f172a;border-radius:2px;margin:5px 0}

.nav{display:flex;align-items:center;gap:28px}
.nav__list{display:flex;gap:50px;list-style:none;margin:0;padding:0;}
.nav__link{font-weight:700;color:#0f172a;opacity:.95;position:relative;}
.nav__link:hover{opacity:1}
.nav__link.is-active::after{
  content:"";position:absolute;left:0;right:0;bottom:-12px;height:3px;
  background:linear-gradient(135deg,var(--brand),#ffd861);border-radius:3px;
}

/* Idioma (1a definición) */
.lang{display:flex;align-items:center;gap:.45rem;color:#0f172a;font-weight:700}
.lang svg{width:18px;height:18px;fill:#0f172a}

/* Overlay detrás del menú colapsable (ocupa toda la pantalla) */
.nav-overlay{
  position: fixed;
  inset: 0;                 /* top:0; right:0; bottom:0; left:0 */
  background: rgba(0,0,0,.25);
  z-index: 59;              /* justo debajo del menú que tiene z-index mayor */
  display: none;
}
.nav-overlay.is-active{ display:block; }

/* móvil: menú colapsable */
@media (max-width:980px){
  .brand__logo{ height: var(--logo-height-sm); }
  .nav-toggle{ display:block; }

  .nav{
    position: fixed;
    top: var(--header-height);
    right: 0px;
    left: 0px;
    background: #fff;
    border: none;
    border-radius: 0px;
    padding: 0px;
    display: none;
    box-shadow: var(--shadow);
    z-index: 60;
  }
  .nav.is-open{ display:block; }

  .nav__list{
    flex-direction: column;
    gap: 5px;
  }

  /* === Usabilidad móvil === */
  .nav__list li{ width: 100%; }

  .nav__list .nav__link{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;               /* toda la fila es clicable */
    padding: 10px 14px;        /* área táctil cómoda */
    border-radius: 0px;
    -webkit-tap-highlight-color: transparent;
  }

  .nav__list .nav__link:hover,
  .nav__list .nav__link:focus-visible{
    background: #f3f6fb;
  }
  .nav__list .nav__link:active{
    background: #e9eef7;
  }

  /* En móvil, el activo se marca con fondo (no con la rayita) */
  .nav__list .nav__link.is-active{
    background: linear-gradient(135deg, var(--brand), #ffd861);
    color: var(--brand-ink);
  }
  .nav__list .nav__link.is-active::after{ display: none; }
}

/* === Header: harden móvil === */
@media (max-width: 980px){
  /* El header no aporta padding lateral; se lo pasamos a la barra interna */
  .site-header{ padding-inline: 0; }

  .header__bar{
    padding-inline: var(--container-px);        /* igual que .container */
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;              /* <- permite saltar a 2 líneas si falta espacio */
  }

  /* Evita anchos mínimos rígidos de los hijos del flex */
  .header__bar > *{ min-width: 0; }

  /* El logo puede ceder ancho sin deformarse */
  .brand{ flex: 1 1 auto; min-width: 0; }
  .brand__logo{
    height: var(--logo-height-sm);   /* ya lo usas en móvil */
    max-inline-size: 48vw;           /* <- tope para que jamás fuerce overflow */
  }

  /* Controles a tamaño fijo */
  .nav-toggle{ flex: 0 0 auto; }
  .lang{ flex: 0 0 auto; }

  .nav-toggle,
  .lang{
    transform: translateY(var(--header-nudge-y));
  }
}

/* Menú de idioma ya a prueba de desbordes (1a definición) */
.lang__menu{
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: calc(100% + 8px);
  inline-size: min(92vw, 280px);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 6px;
  display: none;
  z-index: 60;
}
.lang__menu.is-open{ display:block; }

/* Evita que el fondo haga scroll cuando el offcanvas (nav) está abierto */
body.no-scroll{ overflow: hidden; }

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

.hero{
  position: relative;
  color: #fff;
  background: linear-gradient(180deg, var(--bg), var(--bg-2));
  min-height: 80vh; /* fallback */
}
@supports (height: 1svh){
  .hero{ min-height: 85svh; }
}

.hero__bg{
  position:absolute;
  inset:0;
  z-index:0;
  background:
    /* capa lateral izquierda oscura */
    linear-gradient(90deg, rgba(11,18,38,.80) 0%, rgba(11,18,38,0) 70%),
    /* capa vertical existente */
    linear-gradient(180deg, rgba(11,18,38,.40), rgba(11,18,38,.55)),
    url('/assets/img/hero.jpg') center/cover no-repeat;
}
.hero__content{
  position: relative;
  z-index: 1;
  padding: 50px;
  padding-top: 70px;
  margin: 0;

  /* centrado vertical, pero alineado a la izquierda */
  display: flex;
  flex-direction: column;
  justify-content: center;   /* centra verticalmente el bloque */
  align-items: flex-start;   /* mantiene alineado a la izquierda */
  min-height: inherit;       /* asegura ocupar el alto del hero */
}

.hero .display{
  font-size: clamp(50px, 6vw, 70px);
  line-height: 1.05;
  margin: 0 0 20px;
}

.hero .lead{
  font-size: clamp(18px, 2vw, 25px);
  color: #fff;
  max-width: 680px;
  margin: 0 0 50px; /* margen con el boton cta*/
}

.hero__cta{
  display: flex;
  gap: 12px;
  margin-top: 40px; /* separación amplia extra con respecto al lead */
}

/* Hero en moviles */
@media (max-width:980px){
  .hero__content{
    padding-left: var(--container-px);
    padding-right: var(--container-px); /* por si lo necesitas simétrico */
  }
}

/* =========================================
   ================ SECCIONES ===============
   ========================================= */

/* ==== Servicios (cards) ==== */
.cards{display:grid;gap:18px;grid-template-columns:repeat(3,1fr)}
.card{background:#ffffff;border:1px solid var(--border);border-radius:var(--radius);padding:75px;box-shadow:var(--shadow)}
.card__icon{width:40px;height:40px;display:grid;place-items:center;border-radius:10px;background:rgba(242,201,76,.15);margin-bottom:8px}
.card__icon svg{width:26px;height:26px;fill:#d4a300}
.card__title{margin:.2rem 0 .3rem;font-size:1.05rem}
.card__text{color:var(--muted);margin:0}

/* ==== Proyectos ==== */
.projects{position:relative}
.projects::after{ /* techo decorativo arriba derecha */
  content:"";position:absolute;top:-28px;right:0px;width:180px;height:70px;
  background: no-repeat center/contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='90' viewBox='0 0 220 90'><path d='M10 60 L110 10 L210 60' fill='none' stroke='%23F2C94C' stroke-width='16' stroke-linecap='round' stroke-linejoin='round'/><path d='M190 50 v20' stroke='%23F2C94C' stroke-width='16' stroke-linecap='round'/></svg>");
  pointer-events:none;opacity:.95;
}
.gallery{display:grid;gap:25px;grid-template-columns:repeat(2,1fr)}
.tile{background:#0f1428;border:1px solid rgba(255,255,255,.12);border-radius:var(--radius);overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.tile__media{position:relative}
.tile__media img{width:100%;height:320px;object-fit:cover}
.tile__cta{position:absolute;left:12px;bottom:12px}
.tile__cta .btn{font-weight:700;border-color:rgba(255,255,255,.4);color:#fff}

/* ==== Nosotros ==== */
.about{display:grid;gap:28px;grid-template-columns:1.1fr .9fr;align-items:center}
.about p{color:var(--muted)}

/* ==== Contacto ==== */
.contact{
  display: grid;
  gap: 24px;
  grid-template-columns: .9fr 1.1fr;
  align-items: start;
}

/* Harden responsive base (evita desbordes por contenidos largos) */
.contact,
.contact *{
  min-width: 0;
}

.form{
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr 1fr;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
  overflow: hidden; /* neutraliza micro-overflows de bordes/sombras */
}

.form label{
  display: grid;
  gap: 6px;
  font-weight: 600;
  color: #111827;
}

.form input,
.form textarea{
  font: inherit;
  color: #0f172a;
  background: #f8fafc;
  border: 1px solid #dce2ea;
  border-radius: 12px;
  padding: .85rem .9rem;
  width: 100%; /* asegura ancho completo en columnas estrechas */
}

.form__full{ grid-column: 1 / -1; }

.form__submit{
  grid-column: 1 / -1;
  justify-self: start;
}

/* Opcional de robustez para textos muy largos dentro de la sección */
#contacto{ overflow-wrap: anywhere; }

/* ==== Contacto: Responsive ==== */
@media (max-width: 980px){
  .contact{
    grid-template-columns: 1fr; /* de 2 columnas a 1 */
    gap: 16px;
  }

  .form{
    grid-template-columns: 1fr; /* formulario a 1 columna */
    padding: 14px;              /* más compacto en móvil */
    border-radius: 12px;
  }

  .form__submit{
    width: 100%;  /* botón ancho completo en móvil */
    margin-top: 4px;
    justify-self: stretch; /* asegura ocupar todo el ancho */
  }
}

/* ==== Footer ==== */
.site-footer{background:#0b1226;color:#e6e8ef;border-top:1px solid rgba(255,255,255,.08)}
.footer{
  display:grid;
  gap:18px;
  padding:22px var(--container-px); /* ahora incluye lateral */
  grid-template-columns:1fr auto auto;
  align-items:center;
}
.footer__brand{display:flex;align-items:center;gap:.6rem}
.footer__links{display:flex;gap:14px;list-style:none;padding:0;margin:0}
.footer__meta{display:flex;flex-direction:column;gap:4px;align-items:flex-end}

/* ==== Responsive general de secciones ==== */
@media (max-width:980px){
  .cards{grid-template-columns:1fr}
  .gallery{grid-template-columns:1fr}
  .about{grid-template-columns:1fr}
  .contact{grid-template-columns:1fr}
  .footer{grid-template-columns:1fr;justify-items:start}
  .footer__meta{align-items:start}
}

/* =========================================
   ===== Selector de idioma (SEGUNDO BLOQUE)
   (Duplicado conservado a propósito)
   ========================================= */

/* Idioma (2a definición, complementa/override a la 1a) */
.lang{ position: relative; margin-left: 10px; flex: 0 0 auto; }
.lang__btn{
  display: inline-flex; align-items: center; gap: 8px;
  background: #ffffff; color: #0f172a; border: 1px solid var(--border);
  border-radius: 12px; padding: .45rem .65rem; font-weight: 800;
  box-shadow: var(--shadow); cursor: pointer;
}
.lang__icon{ width: 18px; height: 18px; object-fit: contain; display: block; }
.lang__chev{ width: 18px; height: 18px; fill: currentColor; opacity: .75; }

/* Menú de idioma (2a definición, duplicado funcionalmente) */
.lang__menu{
  position: absolute;
  inset-inline-end: 0;                 /* right:0; lógico */
  inset-block-start: calc(100% + 8px); /* top */
  inline-size: min(92vw, 280px);       /* cabe en pantallas estrechas y máx. 280px */
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 6px;
  display: none;
  z-index: 60;
}
.lang__menu.is-open{ display: block; }

.lang__item{
  width: 100%; text-align: left; background: transparent; border: 0;
  padding: .6rem .7rem; border-radius: 10px; cursor: pointer;
  font-weight: 700; color: #0f172a;
  opacity: 1 !important;

}
.lang__item:hover{ background: #f8fafc; }
.lang__item.is-active{
  background: linear-gradient(135deg,var(--brand),#ffd861); color: var(--brand-ink);
}

/* En móviles quepan mejor los controles del header */
@media (max-width: 980px){
  .lang{ order: 3; } /* cae debajo si el nav está abierto */
  .lang__btn{ padding: .45rem .6rem; }
}