/* =================== GOOGLE FONTS =================== */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;800&display=swap");

/* =================== TOKENS · PALETA =================== */
:root{
  --header-height: 3.5rem;

  /* Brand */
  --first-color: #F4B000;         /* dorado principal */
  --second-color: #FFC43A;        /* dorado claro (hover/accent) */
  --first-gradient: linear-gradient(90deg,#F4B000,#FFC43A);
  --hd-bg: #070709;
  --hd-text: #f4f4f6;
  --hd-sub: rgba(244,244,246,0.78);


  /* Texto / Neutros */
  --title-color: #111317;
  --text-color: #2B3138;
  --text-color-light: #9AA3AD;
  --white-color: #ffffff;
  --black-color: #0B0B0D;
  --mv-title-color:#D28C00;

  /* Fondos / Bordes */
  --body-color: #ffffff;
  --container-color: #ffffff;
  --gray-border: #E9EDF2;
  --black-border: #17181B;

  /* Tipografía fluida */
  --body-font: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --big-font-size: clamp(2.2rem, 1.2rem + 4vw, 4rem);
  --h1-font-size: clamp(1.8rem, 1rem + 3vw, 3rem);
  --h2-font-size: clamp(1.4rem, .9rem + 2vw, 2rem);
  --h3-font-size: clamp(1.2rem, .9rem + 1vw, 1.5rem);
  --normal-font-size: 1rem;
  --small-font-size: .875rem;

  /* Pesos */
  --font-regular: 400;
  --font-medium: 500;
  --font-semi-bold: 600;
  --font-bold: 800;

  /* UI */
  --radius: 16px;
  --shadow-1: 0 6px 24px rgba(0,0,0,.14);
  --shadow-2: 0 10px 40px rgba(0,0,0,.22);

  --z-tooltip: 10;
  --z-fixed: 100;

  /*--hero-h: clamp(520px, 78vh, 880px); /* AJUSTA aquí (p.ej. 70–80vh) */
  --hero-h: var(--about-row-h); 
  --nav-h: 80px;
  --padding-inline: 1.5rem;

  --about-vgap: clamp(18px, 2.0vw, 28px);  
  --about-row-h: clamp(340px, 38vh, 460px);
  --about-left-inset: 1.25rem;  /* ajusta 1.0–1.5rem a tu gusto */


  --bg:#0f1112;                 /* fondo principal */
  --bg-2:#0b0b0c;               /* fondo secundario */
  --panel:#101214;
  --accent:#F4B000;             /* amarillo */
  --muted:rgba(255,255,255,0.65);
  --muted-2:rgba(255,255,255,0.46);
  --glass: rgba(255,255,255,0.03);
  --radius: 14px;
  --radius-sm:10px;
  --container-max:1200px;
  --text-white: #ffffff;
  --shadow: 0 10px 30px rgba(2,2,2,0.6);
  --card-border: rgba(255,255,255,0.06);
  --font-sans: Inter, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  
}

/* =================== BASE =================== */
*{ box-sizing:border-box; margin:0; padding:0; }
html, body{ width:100%; height:100%; overflow-x:hidden; scroll-behavior:smooth; }
body{
  font-family:var(--body-font);
  font-size:var(--normal-font-size);
  background:var(--body-color);
  color:var(--text-color);
  line-height:1.6;
}
h1,h2,h3,h4{ color:var(--title-color); font-weight:var(--font-bold); line-height:1.2; letter-spacing:-.015em; }
ul{ list-style:none; }
a{ text-decoration:none; color:inherit; }
img,video{ display:block; max-width:100%; height:auto; }

/* Lazy placeholders */
img[data-src]{ opacity:0; transition:opacity .3s ease; }
img.loaded{ opacity:1; }
.img-placeholder{
  background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%);
  background-size:200% 100%; animation:loading 1.5s infinite;
}
@keyframes loading{ 0%{ background-position:200% 0; } 100%{ background-position:-200% 0; } }



/* =================== LAYOUT UTILS =================== */
.container{ width:min(1400px,92vw); margin-inline:auto; padding-inline: var(--padding-inline); }

.grid{ display:grid; gap:1.5rem; }
.section{ position:relative; z-index:1; scroll-margin-top:90px; padding-block:3rem 2rem; }
.section__title{ text-align:center; font-size:var(--h1-font-size); margin-bottom:1.5rem; }

/* ---- Subtítulos centrados y con presencia EN TODAS LAS SECCIONES ---- */
.section__subtitle{
  text-align:center !important;
  text-transform:uppercase;
  letter-spacing:.06em;
  font-weight:800;
  color: var(--first-color);
  display:block;
  margin-inline:auto;
  font-size: clamp(.95rem, .6rem + 1.2vw, 1.15rem);
}

/* Separador bajo subtítulo */
.section__subtitle::after{
  content:"";
  display:block; width:56px; height:2px; margin:.4rem auto 0;
  background: var(--second-color);
  border-radius:999px;
}

.main{ overflow:visible; padding-top:80px; }

.prose{ max-width:65ch; }

/* ===== títulos centrados + aire compacto global ===== */
.section__subtitle, .section__title{ text-align:center !important; }
.section{ padding-block: 2.5rem 1.75rem; }
.section__title{ margin-bottom:.75rem; }

/* =================== HEADER & NAV =================== */

/* Header fijo, negro, sin línea inferior */
.header{
  position:fixed; inset:0 0 auto 0;
  background:#0B0B0D;                 /* sólido y estable */
  border-bottom:none;                  /* ← sin línea */
  backdrop-filter: saturate(140%) blur(8px);
  z-index:var(--z-fixed);
  transition: background .25s ease, padding .25s ease;
  
}


.bg-header{ background: rgba(11,11,13,.98); }
.nav{ height:80px; display:flex; justify-content:space-between; align-items:center; padding-inline:var(--padding-inline); }

.nav__logo{ display:flex; align-items:center; gap:.5rem; }
.nav__logo img{ height:40px; width:auto; background:transparent; border-radius:0; padding:0; }

.nav__toggle, .nav__close{
  font-size:1.5rem; color:var(--white-color);
  cursor:pointer; background:none; border:none; transition: color .2s;
}
.nav__toggle:hover, .nav__close:hover{ color:var(--second-color); }

/* Menú móvil */
.nav__menu{
  position:fixed; top:80px; right:-100%;
  width:min(92%,420px); max-height:calc(100vh - 100px);
  background:rgba(0,0,0,.95); backdrop-filter:blur(10px);
  padding:1rem 1rem 1.25rem; border-radius:12px 0 0 12px;
  overflow-y:auto; transition:right .35s ease; z-index:calc(var(--z-fixed) + 1);
}
.show-menu{ right:0; }
.nav__list{ display:flex; flex-direction:column; gap:1rem; }
.nav__link{
  color:var(--second-color); font-weight:var(--font-semi-bold);
  padding:.75rem .75rem; border-radius:8px; transition: all .2s ease;
}
.nav__link:hover{ color:var(--first-color); }

/* Activo */
.nav__link.active-link{ color:var(--second-color); position:relative; }
.nav__link.active-link::after{
  content:""; position:absolute; bottom:-6px; left:0; width:100%; height:2px; background:var(--second-color);
}

/* Desktop */
@media (min-width:1150px){
  .nav__menu{ position:static; width:auto; height:auto; background:transparent; padding:0; border-radius:0; right:auto; top:auto; overflow:visible; }
  .nav__list{ flex-direction:row; align-items:center; gap:2rem; }
  .nav__toggle, .nav__close{ display:none; }
}


/* =====================================================
   HERO · Sección completa (estructura, estilo y responsive)
   Diseñado para integrarse con tus variables en :root
/* hero.css - estilos para tu sección hero */

/* Reset small */
.home.section { position: relative; width:100%; box-sizing: border-box; }

.container{ width:min(1400px,92vw); margin-inline:auto; padding-inline: var(--padding-inline); }

/* Layout grid */
.home__content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: center;
}

/* Make hero fill viewport minus header with JS helper; base min height */
.hero-dark { background:#070707; color:#fff; position:relative; overflow: visible; }


/* watermark layer (Logo Blanco y Centrado, más visible) */
.hero__watermark {
    position: absolute;
    inset: 0;
    pointer-events: none;

    background-image: url('../img/logosintitulo.svg'); 
    background-repeat: repeat;
    background-position: center;
    background-size: 10%; 

    opacity: .5; 
    filter: sepia(100%) saturate(0%) brightness(200%); 
    mix-blend-mode: soft-light; 
}

/* LEFT PANEL */
.home__panel.home__text { padding: 2rem 0; z-index: 2; }



/* Badge top */
.hero-badge .badge {
  display: inline-flex;
  gap: .5rem;
  align-items:center;
  background: linear-gradient(90deg,#F4B000,#FFC43A);
  color:#0b0b0b;
  font-weight:700;
  padding:.4rem .7rem;
  border-radius:999px;
  font-size:.75rem;
  letter-spacing: .04em;
}

/* Title & description */
.home__title { font-size: clamp(2rem, 4vw, 3.75rem); line-height:1.05; margin: .8rem 0 .2rem 0; color:#fff; font-weight:800; }
.home__title strong { font-weight:900; display:inline-block; background: linear-gradient(90deg,#F4B000,#FFC43A); -webkit-background-clip:text; background-clip:text; color:transparent; }
.home__description { color: rgba(255,255,255,0.9); margin: .2rem 0 .6rem 0; font-weight:600; }

/* lead */
.home__lead { color: rgba(255,255,255,0.72); max-width:56ch; margin-top:.6rem; }

/* CTAs */
.hero-ctas { margin-top:1rem; display:flex; gap:.75rem; flex-wrap:wrap; align-items:center; }
.button { display:inline-flex; align-items:center; justify-content:center; padding:.65rem 1rem; border-radius:28px; text-decoration:none; font-weight:700; cursor:pointer; }
.button--brand { background: linear-gradient(90deg,#F4B000,#FFC43A); color:#111; box-shadow: 0 6px 18px rgba(244,176,0,0.12); border:0; }
.button--ghost { background:transparent; color: #fff; border: 2px solid rgba(255,255,255,0.18); }
.button--ghost:hover { border-color: #fff; }

/* FEATURES (left cards) */
.hero-features { margin-top:1.6rem; }
.features-grid-left { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:.75rem; max-width: 28rem; }


.feature-card {
  background: rgba(255,255,255,0.03);
  border-radius: 12px;
  padding: 0.6rem 0.5rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.5rem;
  border: 1px solid rgba(255,255,255,0.04);
  min-height: 120px;
}


/* titulo sin borde superior tan marcado y con más padding abajo */
.feature-title {
  color: rgba(255,255,255,0.9);
  font-size: .92rem;
  text-align:center;
  border-top:none;
  padding-top: .35rem;
  margin-top: .2rem;
}





.feature-icon svg { width:28px; height:28px; color:#F4B000; fill:currentColor; }
.feature-title { color:#fff; font-size:.82rem; text-align:center; border-top: 1px solid rgba(255,255,255,0.06); padding-top:.5rem; margin-top:.25rem; width:100%; }
.feature-card .feature-icon {
    /* Si tienes algún estilo que añade background o padding, anúlalo aquí: */
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
    /* Esto asegura que solo el SVG amarillo se muestre */
}

.feature-card .feature-icon svg { color: var(--first-color); fill: currentColor; stroke: currentColor; }

.feature-icon svg { 
    color:#F4B000; 
    fill:currentColor;
}

.feature-card .feature-icon,
.feature-card .feature-icon svg {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  width: 36px;
  height: 36px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color: var(--first-color);
  fill: currentColor;
}


/* RIGHT PANEL: slider */
.home__panel.home__slider { position:relative; z-index:2; display:flex; align-items:center; justify-content:center; }

/* --- Forzar altura del hero-slider en desktop para que las .slide absolutas tengan referencia --- */
.hero-slider {
  position: relative;
  width: 100%;
  max-width: 720px;
  height: var(--hero-h);      /* ya definida en :root */
  min-height: 420px;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(2,6,23,0.6);
  background: #111;
  z-index: 1;
}

.hero-slider {
  background-color: #0b0b0d; /* color neutro de fondo mientras carga la img */
  height: var(--hero-h);     /* usar la variable nueva */
  min-height: 420px;
}


/* asegurar que las slides llenen el contenedor */
.hero-slider .slide { position:absolute; inset:0; display:block; opacity:0; transform:translateY(6px); transition:opacity .6s, transform .5s; pointer-events:none; }

.hero-slider .slide {
  background-color: #0b0b0d;   /* sombra oscura mientras carga */
  -webkit-backface-visibility: hidden; /* reducir flicker */
  backface-visibility: hidden;
}

.hero-slider .slide.active, .hero-slider .slide[aria-hidden="false"] { opacity:1; transform:translateY(0); pointer-events:auto; }


.hero-slider .slide[aria-hidden="false"], .hero-slider .slide.active { opacity:1; transform: translateY(0); pointer-events:auto; }


/* Asegura que las imágenes cubran el contenedor y no deformen */
.hero-slider img {
  display:block;
  width:100%;
  height:100%;
  object-fit: cover;    /* cover para que siempre llene */
  background-color: transparent;
  image-rendering: auto;
}

/* overlay gradient so text on images is readable */
.hero-slider::after { content:""; position:absolute; left:0; right:0; bottom:0; height:45%; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 100%); pointer-events:none; }

/* Slider controls (prev/next/dots) */
/* Dots / controles: ponerlos sobre el slider, centrados */
/* controls centrados sobre la base del slider */
.slider-controls { position:absolute; left:50%; transform:translateX(-50%); bottom:18px; display:flex; gap:.6rem; align-items:center; z-index:6; pointer-events:auto; }

.carousel-btn {
  background: rgba(0,0,0,0.45);
  color: #fff;
  border: 0;
  padding: .45rem .6rem;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,.4);
}

.carousel-btn:hover { transform: translateY(-2px); }

/* dots container directly under slider (centered) */
.carousel-dots { display:flex; gap:.5rem; align-items:center; }
.carousel-dots .dot { width:8px; height:8px; border-radius:999px; background: rgba(255,255,255,0.5); border:none; transition: all .28s; }
.carousel-dots .dot.active { width:28px; height:6px; background: var(--first-color); border-radius:999px; }

/* Asegura que la imagen ocupe todo el slide */
.hero-slider img { width:100%; height:100%; object-fit:cover; display:block; }

/* Floating badges (top-right and bottom-left) */
.badge--card, .floating-card { display:flex; gap:.75rem; align-items:flex-start; padding:.8rem; border-radius:12px; box-shadow: 0 10px 30px rgba(2,6,23,0.5); background: #111; color:#fff; min-width:200px; }
.floating-badge.top-right { position:absolute; top: -14px; right: -14px; transform: translate(0,0); }
.floating-card.bottom-left { position:absolute; bottom: -18px; left: -18px; transform: translate(0,0); }

/* z-index de badges para que floten sobre la imagen */
.floating-badge.top-right,
.floating-card.bottom-left {
  z-index: 8;
  box-shadow: 0 18px 40px rgba(2,6,23,0.55);
}

/* variations with gradient backgrounds */
.floating-badge .badge--card { background: #F4B000; color: #111; }
.floating-badge .badge--card .badge--icon svg { display:block; fill: #111; }
.floating-card { background: #111; color: #fff; border-left: 4px solid #F4B000;  }

/* float icons */
.float-icon svg, .badge--icon svg { width:28px; height:28px; display:block; }

/* small dots inside floating card */
.float-dots .dot.small { width:8px; height:8px; margin-right:.25rem; background:rgba(0,0,0,0.15); display:inline-block; border-radius:50%; }
.float-dots .dot.small.active { background:#F4B000; }



/* ===== Iconos: outline-only (sin relleno ni cajitas) =====
   Esto fuerza a los SVG de feature-card a mostrarse como trazo/stroke,
   anulando fills que puedan venir inline en los SVGs. */
.feature-card .feature-icon,
.feature-card .feature-icon svg {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  width: 36px;
  height: 36px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color: var(--first-color);
}

/* Forzar stroke-only: quita fills y aplicamos stroke */
.feature-card .feature-icon svg,
.feature-card .feature-icon svg * {
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.6 !important;
  vector-effect: non-scaling-stroke;
}

/* Si alguna icon wrapper añadía sombra / background, anular */
.feature-card { box-shadow: none !important; background: rgba(255,255,255,0.02) !important; }

/* Si quieres que el texto del título no tenga una línea que lo separe, quitar border-top */
.feature-card .feature-title { border-top: none !important; padding-top: .35rem; }


/* 1) MARTILLO (badge) — outline igual a otros iconos */
.hero-badge .badge svg,
.hero-badge .badge .icon-hammer,
.hero-badge .badge .icon-hammer * {
  /* tamaño y alineación */
  width: 18px !important;
  height: 18px !important;
  display: inline-block !important;
  vertical-align: middle !important;
  margin-right: .45rem !important;
  /* forzar trazo en lugar de relleno */
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.6px !important;
  vector-effect: non-scaling-stroke !important;
  /* el color seguirá el currentColor del badge (si el texto es oscuro se verá bien) */
  color: inherit !important;
}

.hero-badge .badge svg { color: #0b0b0d !important; } 

/* 4 cards en una fila en desktop */
@media (min-width: 991px) {
  .features-grid-left { grid-template-columns: repeat(4, 1fr); gap:1rem; max-width: none; }

  /* dejar ambos paneles con la misma altura visual */
  .home__content { align-items: stretch; grid-template-columns: 1.1fr .9fr; gap: 2rem; }
  .home__panel { display:flex; flex-direction:column; }
  .home__panel.home__text { justify-content:center; min-height: var(--hero-h); } /* hace la izquierda igual altura que el slider */
  .home__panel.home__slider { justify-content:center; align-items:center; }

  /* floating badges: disminuir ancho ~3cm (≈112px) comparado a base 200px */
  .floating-badge .badge--card { min-width: 200px; max-width: 260px; padding: .6rem .7rem; }
  .floating-card { min-width: 200px; max-width: 300px; padding: .6rem .8rem; border-left: 4px solid var(--first-color); }

  /* desplazar de forma más precisa sobre bordes redondeados */
  .floating-badge.top-right { top: -20px; right: -20px; }
  .floating-card.bottom-left { bottom: -20px; left: -20px; }

  /* reduce un poco el ancho visual para que "parezcan" 3cm menos */
  .floating-badge .badge--card,
  .floating-card { transform: translateZ(0); } /* forzar composición */
}


/* Floating badges: reducción visual de ancho (ya mencionada) */
@media (min-width: 991px) {
  .floating-badge .badge--card { min-width: 180px; max-width: 240px; padding: .5rem .65rem; }
  .floating-card { min-width: 180px; max-width: 280px; padding: .5rem .8rem; }
  .floating-badge.top-right { top: -18px; right: -18px; }
  .floating-card.bottom-left { bottom: -18px; left: -18px; }
}

.hero-slider, .hero-slider .slide, .hero-slider img { transform: translateZ(0); will-change: opacity, transform; }



/* mobile keep previous behavior */
@media (max-width: 990px) {
  .features-grid-left { grid-template-columns: repeat(2,1fr); gap:.5rem; max-width: 100%; }
  .floating-badge.top-right, .floating-card.bottom-left { display:none; }
  .hero-slider { height: 320px; min-height: 220px; }
}

/* Igualar altura del contenido a otras secciones (ej: about-us) */
.home.section {
  padding-block: 2.5rem 2.5rem;
  /* si quieres que ocupe exactamente la misma altura variable que about, usa la variable: */
  min-height: var(--about-row-h);
  display: block;
}


/* 2) SLIDER — hacerlo más alto en desktop y ajustar object-position
   para que el recorte muestre más del alto de la imagen (center top). */
@media (min-width: 1200px) {
  .hero-slider {
    max-width: 900px;                       /* ancho mayor para fotos grandes */
    height: calc(var(--hero-h) + 120px);    /* sube la altura en desktop (+120px) */
    min-height: 520px;                      /* tope mínimo cómodo */
  }

  /* Mantener la columna izquierda con la misma altura visual del slider */
  .home__panel.home__text {
    min-height: calc(var(--hero-h) + 120px);
  }

  /* Mostrar la parte superior/central de la imagen (menos recorte lateral) */
  .hero-slider img {
    object-fit: cover;
    object-position: center top; /* muestra más alto de la foto */
    width:100%;
    height:100%;
  }
}

/* Móvil / tablet: ligeros ajustes para no romper la responsividad */
@media (max-width: 1199px) {
  .hero-slider { height: calc(var(--hero-h) + 24px); } /* pequeño aumento */
}


/* 3) FEATURE CARDS — hacerlas más estrechas y correr su final hacia la izquierda.
   Uso columnas con tamaño máximo fijo para que no ocupen tanto ancho. */
@media (min-width: 991px) {
  /* controla el ancho total del grid de features (menor -> las cards terminan más a la izquierda) */
  .features-grid-left {
    max-width: 560px; /* ajusta este valor (560/520/480) según cuánto quieras moverlo */
    grid-template-columns: repeat(4, minmax(110px, 1fr)); /* columnas más "estrechas" */
    gap: 0.8rem;
  }

  /* compactar padding y alto de cada card para que ocupen menos espacio horizontal */
  .feature-card {
    padding: .5rem .45rem !important;
    min-height: 96px !important;
    border-radius: 12px;
  }

  .feature-card .feature-icon,
  .feature-card .feature-icon svg {
    width: 32px !important;
    height: 32px !important;
  }

  .feature-card .feature-title {
    font-size: .80rem !important;
    padding-top: .35rem !important;
  }
}

/* Ajuste fino opcional: si quieres que el bloque de features "empuje" aún más a la izquierda,
   reduce el max-width anterior (por ejemplo a 520px o 480px). */

/* ===== Forzar repintado suave para evitar flicker al cambiar tamaños ===== */
.hero-slider, .hero-slider .slide, .hero-slider img {
  transform: translateZ(0);
  will-change: opacity, transform, height;
}

/* ==========================
   MOBILE · HERO COMPACT (<=767px)
   Columna única, todo centrado y contenido pensado para caber en 1 vista
   ========================== */
/* ====== MOBILE: HERO LAYOUT POR FILAS (<=767px) ====== */
/* ====== MOBILE: reordenar filas + ocultar badge (≤767px) ====== */
@media (max-width: 767px) {
  /* 0) espacio útil: hero a altura viewport - header */
  .home.section { min-height: calc(100vh - var(--header-height)); padding-block: 0.3rem; }

  /* 1) convierto el grid en columna flexible */
  .home__content {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    width: 100%;
    height: 100%;
    overflow: hidden;
    padding: 6px 12px;
    box-sizing: border-box;
  }

  /* 2) hace que los hijos del panel izquierdo se comporten como hijos del .home__content
     (permite ordenar title / description / ctas / features con el slider entre medias) */
  .home__panel.home__text {
    display: contents !important;
  }

  /* 3) Oculta la badge "PROFESSIONAL CONSTRUCTION" (martillo) */
  .hero-badge, .hero-badge .badge { display: none !important; }

  /* 4) Oculta watermark y badges flotantes para recuperar altura */
  .hero__watermark,
  .floating-badge.top-right,
  .floating-card.bottom-left { display: none !important; }

  /* 5) Orden explícito de filas (1..5) */
  .home__title            { order: 1; width: 100%; text-align:center; margin: 6px 0 4px; }
  .home__description      { order: 2; width: 100%; text-align:center; margin: 0 0 6px; }
  .home__panel.home__slider { order: 3; width: 100%; max-width: 980px; display:block; }
  .hero-ctas              { order: 4; width: 100%; display:flex; justify-content:center; gap: 8px; margin-top:6px; }
  .hero-features          { order: 5; width: 100%; margin-top:8px; display:flex; justify-content:center; }

  /* 6) Slider: centrado y más alto para que las imágenes entren mejor */
  .hero-slider {
    width: 96% !important;
    height: 38vh !important;     /* ajusta 36–42vh si necesitas más/menos */
    min-height: 200px !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    margin: 6px auto !important;
    box-shadow: 0 16px 36px rgba(0,0,0,0.45);
    background-color: #0b0b0d;
  }
  .hero-slider .slide,
  .hero-slider img { height:100% !important; object-fit:cover !important; object-position:center top !important; display:block !important; }

  /* 7) CTAs: mismos en una fila, centrados, no muy anchos */
  .hero-ctas { gap: .5rem !important; padding-inline: 6px; }
  .hero-ctas .button {
    flex: 0 0 auto;
    min-width: 120px;
    max-width: 46%;
    padding: .5rem .75rem;
    font-size: .95rem;
    border-radius: 20px;
    text-align:center;
    box-sizing: border-box;
  }

  /* 8) Features: 2 columnas */
  .features-grid-left {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: .5rem !important;
    width: 96% !important;
    max-width: 760px !important;
    margin: 6px auto 12px;
  }
  .feature-card {
    min-height: 72px !important;
    padding: .5rem !important;
    border-radius: 10px !important;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    background: rgba(255,255,255,0.02) !important;
    border: 1px solid rgba(255,255,255,0.04) !important;
    box-shadow: none !important;
  }
  .feature-card .feature-icon,
  .feature-card .feature-icon svg { width: 28px !important; height: 28px !important; margin: 0; }
  .feature-card .feature-title { font-size: .82rem !important; padding-top:.28rem; text-align:center; }

  /* 9) Ajustes tipográficos para que no corten visualmente */
  .home__title { font-size: clamp(1.3rem, 5vw, 2rem) !important; line-height:1.02; }
  .home__description { font-size: .95rem !important; color: rgba(255,255,255,0.92); }

  /* 10) Si hay overflow vertical forzamos que la única zona scrolleable sea el body (si fuese necesario) */
  .home__container, .home__content { overflow: visible; }

  /* 11) Evitar que el header ocupe espacio extra en móvil (si aplica) */
  header.header { position: fixed; top:0; left:0; right:0; z-index: 1200; }

  /* 12) small tweak: esconder .home__lead (si lo quieres visible comenta/descomenta) */
  .home__lead { display: none !important; }
}





/* =================== BOTONES =================== */
.button{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.9rem 1.25rem; border-radius:calc(var(--radius) - 8px);
  font-weight:700; border:none; cursor:pointer;
  transition: transform .08s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.button--brand{ background:var(--first-color); color:#1a1200; box-shadow:0 10px 24px rgba(244,176,0,.22); }
.button--brand:hover{ background:var(--second-color); transform:translateY(-1px); }
.button--ghost{ background:transparent; color:#fff; border:1px solid rgba(255,255,255,.14); }
.button--ghost:hover{ border-color:#fff; }


/* ===== ABOUT · Refresh compacto y centrado ===== */

.about__container{
  display:grid;
  grid-template-columns: 1fr;       /* ya lo tienes */
  grid-auto-rows: min-content;
  row-gap: var(--about-vgap);
  align-content:start;
  justify-items:stretch;
}


/* Por esta versión limpia */
.about__data{ display:flex; flex-direction:column; text-align:center; align-self:center; justify-self:center; } 

.about__meta{
  display:grid;
  grid-template-rows: auto auto auto;
  row-gap: var(--about-vgap);
  justify-items:center;
  align-items:start;
  margin:0;                        
}

.about__meta .value-bullets{ margin-bottom: .25rem; }

.about .section__title{ margin-bottom: 0; }

.about.section{
  display:grid;
  place-items:center;
  padding-block: 1rem 1rem;
  min-height: unset;
  
}

.about__tagline{
  text-align:center;
  font-weight:600;                /* menos resaltado que antes */
  line-height:1.25;
  margin-bottom:.35rem;
}


/* Imagen ocupa el alto total de la fila */

.about__media{
  background:#fff;
  border:1px solid var(--gray-border);          /* antes tenía rgba(10,37,64,.10) */
  border-radius:18px;
  box-shadow:0 6px 18px rgba(0,0,0,.08);        /* misma sombra que MV */
  overflow:hidden;
  aspect-ratio:auto;
  height:100%;
  padding:0;
}


.about__media,
.mv-card{ height:100%; }    


.about__media img{
  width:100%;
  height:100%;
  object-fit: cover;               /* llena la tarjeta (sí puede recortar) */
  object-position:center;
  display:block;
  border:0;
  border-radius:0;                 /* el radio lo da el figure */
  box-shadow:none;
}


.about .section__subtitle{ display:none; }

/* Título principal compacto */
.about .section__title{
  font-size: clamp(1.7rem, 1rem + 2.2vw, 2.6rem);
  line-height: 1.15;
  max-width: 24ch;
  margin-bottom:.45rem;
  text-align:center;
}

.about__headline{
  text-align:center;
  text-transform:uppercase;
  color: var(--first-color);
  font-weight: 800;
  font-size: clamp(1.6rem, .9rem + 2.4vw, 2.4rem);
  line-height: 1.1;
  letter-spacing: .02em;
  margin: .25rem auto .35rem;
}

/* Mission / Vision: misma altura + títulos centrados y dorados */

.about__row{
  display: grid;
  grid-template-columns: minmax(0, 40vw) repeat(2, minmax(0, 28vw)); /* ← Solución mágica */
  grid-template-rows: var(--about-row-h);
  column-gap: clamp(24px, 3vw, 48px);
  row-gap: 0;
  align-items: stretch;
  margin: 0;
}


/* Cartas */
.mv-card{
  position: relative;
  display:flex; flex-direction:column; justify-content:center;
  background:#fff;                               /* fondo blanco */
  border:1px solid var(--gray-border);          /* borde sutil */
  border-radius:18px;
  box-shadow:0 6px 18px rgba(0,0,0,.08);         /* sombra suave */
  padding: clamp(12px, 1.1vw, 18px) clamp(14px, 1.4vw, 22px);
  gap:.5rem;
  transition: transform .2s ease, box-shadow .2s ease;
}


/* Hover un poco más “metálico” */
.mv-card:hover{
  transform: translateY(-2px);
  box-shadow:0 12px 26px rgba(0,0,0,.14);        /* hover coherente */
}

.mv-card h3{
  text-align:center;
  color: var(--title-color);
  font-weight: 800;
  font-size: clamp(1.3rem, 1rem + 1.1vw, 1.7rem);
  letter-spacing:.005em;
  margin:0 0 .25rem;
}

.mv-card p{
  margin:0; color:#4b5563; line-height:1.65; text-align:center;
}


/* CTA centrado debajo de todo */
.about__cta{
  display: inline-flex;
  justify-self: center;
  margin: 0;                          /* sube el botón */
}

/* How We Work: 4 pasos compactos */
.process {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px,1fr)); /* Desktop: 4 columnas (una sola fila) */
  gap: 1.1rem 1.2rem;
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
  justify-items: stretch;
}


.process__item{
  display:flex; align-items:center; 
  border:1px solid var(--gray-border);
  border-radius:18px; 
  box-shadow:0 6px 18px rgba(0,0,0,.08);
  padding: .8rem .8rem .8rem calc(.8rem + var(--about-left-inset));
  background:#fff;
  transition: transform .2s ease, box-shadow .2s ease;
  gap: .75rem; 
}

.process__item:hover{
  transform: translateY(-2px);
  box-shadow:0 12px 26px rgba(0,0,0,.14);        /* hover igual que MV */
}


.about__description{ margin-bottom:2rem; }

.process__icon{
  width:34px; height:34px; border-radius:8px;
  background: #0B0B0D; color:#fff;
  display:grid; place-items:center; font-size:1.2rem;
  flex: 0 0 34px;
}
.process__label{
  font-weight:700; letter-spacing:.005em;
}

.process__sub{
  display:block; font-weight:500; color:#6b7280; font-size:.92rem; line-height:1.35;
}

.process__item:hover{ transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0,0,0,.08); }

/* Value bullets: centrados, 2 columnas, extremos opuestos */
.value-bullets{ display:grid; grid-template-columns:1fr 1fr; gap:.5rem 1.25rem; max-width:480px; margin:0 auto; width:100%; justify-items: start; }

.value-bullets li:nth-child(odd){ justify-self:start; }
.value-bullets li:nth-child(even){ justify-self:end; }

.value-bullets i{
  color: var(--first-color);
  font-size: 1.15rem;
  width: 1.25rem;
  display: inline-grid;
  place-items: center;
  flex: 0 0 1.25rem;
}

.value-bullets li {
  text-align: left;
  justify-self: start;
  display: flex;
  align-items: center;
  gap: .5rem;
  font-weight: 600;
}

.value-bullets li{
  padding-left: var(--about-left-inset);
}

/* RESPONSIVO: stack en 1 columna y meta debajo */
/* ===== ABOUT · DESKTOP (≥1024px) ===== */
@media (min-width:1024px){

  /* 0) Asegura que el contenedor de ABOUT sea 1 columna real, de lado a lado */
  .about .container,
  .about__container{
    display: grid !important;
    grid-template-columns: 1fr !important;       /* ← una sola columna */
    grid-auto-flow: row !important;
    justify-items: stretch !important;
    width: min(1280px, 92vw) !important;
    margin-inline: auto !important;
    padding-inline: var(--padding-inline) !important;
  }

  /* 1) La fila (foto / misión / visión) debe ocupar TODA la columna del contenedor */
  .about__row{
    grid-column: 1 / -1 !important;              /* ← abarca todo el ancho del container */
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;

    display: grid !important;
    grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(0, 1fr)) !important;
    column-gap: clamp(24px, 3vw, 48px) !important;
    row-gap: 0 !important;
    align-items: stretch !important;
  }

  /* 2) IMPORTANTÍSIMO: que los hijos puedan encoger dentro de su celda */
  .about__row > *{
    min-width: 0 !important;                     /* ← evita “palabra por línea” */
    max-width: none !important;
  }

  /* 3) Nada de topes de ancho en las cards/foto en desktop */
  .about__row > .about__media,
  .about__row > .mv-card{
    width: 100% !important;
    max-width: none !important;                  /* ← por si quedó algún max-width móvil */
  }

  /* 4) Pasos (VISIT/ESTIMATE/BUILD/FINISH) con el MISMO ancho del container */
  .process{
    grid-column: 1 / -1 !important;
    display: grid !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding-inline: 0 !important;

    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    column-gap: clamp(24px, 3vw, 48px) !important;
    row-gap: 1.2rem !important;
    justify-items: stretch !important;
  }
  .process__item{ height: 100% !important; }

  /* 5) Bullets y CTA centrados, pero sin limitar el ancho de la grid */
  .value-bullets{ grid-column: 1 / -1 !important; margin-inline: auto !important; }
  .about__cta{ grid-column: 1 / -1 !important; justify-self: center !important; margin: 0 !important; }

  /* 6) Por si alguna utilidad .grid/.container mete columnas globales */
  .about__container > *{ justify-self: stretch !important; }
}


/* === ABOUT · Desktop: compáctalo sin cambiar tamaños ni columnas === */
@media (min-width:1024px){

  /* 1) Menos aire general en la sección */
  .about.section{
    padding-block: 0.75rem 1rem !important; /* antes era más alto */
  }

  /* 2) El contenedor apila las filas con menos separación */
  .about .container,
  .about__container{
    row-gap: clamp(14px, 1.4vw, 26px) !important; /* antes ~24–48px */
    align-content: start !important;
    justify-items: stretch !important;
  }

  /* 3) Título y tagline más compactos */
  .about__headline{           /* “ABOUT US” */
    margin: 0 0 .35rem 0 !important;
  }
  .about .section__title{     /* “Quality Work & Clear Communication” */
    margin: 0 0 .6rem 0 !important;
  }

  /* 4) Fila: Foto · Misión · Visión → sin márgenes extra */
  .about__row{
    margin: 0 !important;
    column-gap: clamp(20px, 2.6vw, 40px) !important; /* leve ajuste del gutter */
  }
  .about__media,
  .mv-card{
    margin: 0 !important; /* por si algún estilo les agrega margen */
  }
  .mv-card{
    padding: clamp(10px, .9vw, 16px) clamp(12px, 1vw, 18px) !important; /* un pelín menos */
  }

  /* 5) Fila de “Visit / Estimate / Build / Finish” más pegada a la fila superior */
  .process{
    margin-top: .5rem !important;       /* reduce hueco con la fila de arriba */
    row-gap: .8rem !important;           /* menos alto dentro de la propia fila */
    column-gap: clamp(20px, 2.6vw, 40px) !important; /* coherente con .about__row */
  }
  .process__item{
    padding: .7rem .9rem !important;     /* compacta cada card sin cambiar su tamaño visual */
  }

  /* 6) Bullets y CTA más cerca de los pasos */
  .value-bullets{
    margin-top: .4rem !important;
  }
  .about__cta{
    margin-top: .6rem !important;        /* botón “View Projects” ligeramente más arriba */
  }
}

/* =================== ABOUT US RESPONSIVE Y EFECTOS =================== */

/* ===== Misión/Vision: fondo suave y efecto dorado en mobile ===== */
@media (max-width: 768px) {
  .mv-card {
    background:
      linear-gradient(180deg, rgba(244,176,0,.08) 0%, rgba(255,196,58,.06) 40%, rgba(255,255,255,.92) 100%),
      radial-gradient(140% 120% at 0% 0%, rgba(244,176,0,.14) 0%, transparent 60%);
    /* Efecto clásico: dorado arriba-izq, blanco abajo */
    box-shadow: 0 6px 18px rgba(0,0,0,.08); /* sombra sutil */
    border-radius: 18px;
    border: 1px solid #fae59c33;
    /* paddings heredados */
  }
}

/* ===== Estructura móvil: columna, pero pasos en 2x2 ===== */
@media (max-width: 767px) {
  .about.section,
  .about__container {
    width: 100% !important;
    max-width: 98vw !important;
    padding-inline: 16px !important;
    margin-inline: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    row-gap: 1.2rem !important;
  }

  .about__row {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.3rem !important;
    align-items: center !important;
    margin: 0 auto !important;
    width: 100% !important;
    max-width: 440px !important;
  }

  .about__media, .mv-card {
    width: 100% !important;
    max-width: 420px !important;
    min-width: 0 !important;
    margin-inline: auto !important;
    align-items: center !important;
    text-align: center !important;
  }
  /* Cards: icono arriba, texto debajo y centrado */
  .mv-card {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    justify-content: center !important;
    gap: .7rem !important;
    min-height: 160px;
  }
  .mv-card h3, .mv-card p {
    text-align: center !important;
    margin: 0 auto;
  }
  /* Procesos (las 4 cards) apilados en columna por default */
  .process {
    grid-template-columns: 1fr !important;
    gap: .9rem !important;
    width: 100% !important;
    max-width: 420px !important;
    margin-inline: auto !important;
  }
  .process__item {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding: 1rem .7rem !important;
    gap: .35rem !important;
  }
  .process__icon {
    margin-bottom: .55rem !important;
  }
}

/* ====== 2x2 SOLO EN LOS PASOS EN MOBILE ====== */
@media (max-width: 767px) {
  .about__meta .process {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important; /* 2 columnas */
    gap: 1rem 1rem !important;
    width: 100%;
    max-width: 420px !important;
    margin: 0 auto 1.2rem auto !important;
  }
  .about__meta .process__item {
    min-width: 0 !important;
    width: 100% !important;
    justify-self: stretch !important;
    align-items: center !important;
  }
}

/* ===== Pantallas muy pequeñas: 1x1 ===== */
@media (max-width: 460px) {
  .process {
    grid-template-columns: 1fr !important;
  }
}

/* ===== Bullets: 1 columna en móvil ===== */
@media (max-width: 640px) {
  .value-bullets {
    grid-template-columns: 1fr;
    gap: .5rem 0;
    max-width: 96vw;
  }
  .value-bullets li {
    justify-self: center !important;
    text-align: center;
    padding-left: 0.5rem;
  }
}

/* ===== Imagen/foto altura móvil ===== */
@media (max-width: 600px) {
  .about__media {
    height: 220px !important;
    max-width: 98vw !important;
    margin-inline: auto;
    display: flex;
    align-items: stretch;
  }
  .about__media img {
    height: 100% !important;
    width: 100%;
    object-fit: cover !important;
    object-position: center;
    display: block;
  }
}

/* =================== SERVICES =================== */
/* =================== SERVICES =================== */
/* =================== SERVICES =================== */


.services.section{
  display:grid;
  place-items:center;
  padding-block: 1rem 1rem;
  min-height: unset;
  
}
.services__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.2rem 0 .5rem 0;
  gap: 0.5rem;
  width: 100%;
}

.services__container.container {
  max-width: 1220px;      /* antes seguro era 1400px */
  width: min(98vw, 1220px);
  padding-inline: 1.1rem; /* menos aire */
  margin-inline: auto;
}

.services__data {
  text-align: center;
  max-width: 600px;
  margin-inline: auto;
  margin-bottom: 0.5rem;
}

/* Igual que About Us */
.services__data .section__subtitle {
  font-size: clamp(1rem, 0.9rem + 1.2vw, 1.18rem);
  margin-bottom: 0.2rem;
  letter-spacing: .09em;
  font-weight: 800;
}


/* ---- Título principal igual que About Us ---- */
.services__data .section__subtitle {
  font-size: clamp(1.2rem, 1.1rem + 1.6vw, 2rem); /* Más grande */
  color: var(--first-color);
  letter-spacing: .09em;
  font-weight: 800;
  margin-bottom: .05em;
}

.services__data .section__title {
  font-size: clamp(1.1rem, .8rem + .7vw, 1.4rem) !important;
  font-weight: 700;
  color: var(--title-color);
  margin-bottom: .2em !important;
  line-height: 1.18;
  letter-spacing: -.01em;
}


.services__data .section__title {
  margin-bottom: .20rem !important; /* Menos aire */
}


.services__headline {
  display: block;
  text-align: center;
  text-transform: uppercase;
  color: var(--first-color);
  font-weight: 800;
  font-size: clamp(1.6rem, .9rem + 2.4vw, 2.4rem);
  line-height: 1.1;
  letter-spacing: .02em;
  margin: .25rem auto .35rem;
}

.services__title-main {
  text-align: center;
  font-size: clamp(1.7rem, 1rem + 2.2vw, 2.6rem);
  line-height: 1.15;
  max-width: 24ch;
  margin-bottom: .45rem;
  font-weight: 800;
  color: var(--title-color);
  letter-spacing: -0.015em;
  margin: 0 0 .6rem 0 !important;
}

/* Indoor Services / External Services: más grandes */
.services__subtitle {
  font-size: clamp(1.4rem, 1rem + 2vw, 2.15rem) !important;
  font-weight: 800;
  color: #111317 !important;  /* Negro puro */
  text-align: center;
  margin: 1.7rem 0 0.7rem 0;
  letter-spacing: .04em;
  text-shadow: 0 2px 8px rgba(80,80,80,0.09); /* Sombra elegante y discreta */
}


/* Services we offer: más pequeño, menos protagonista */
.services__data .section__title {
  font-size: 1rem !important;
  color: #626972;
  margin-top: .05rem;
  margin-bottom: .4rem;
  font-weight: 500;
}

.services__subtitle:hover {
  text-shadow: 0 5px 24px #ffeaaf, 0 1.5px 0 rgba(44,39,8,.13);
}

.services__description {
  margin-top: .09rem;
  margin-bottom: 0.25rem !important;   /* Era más grande, ahora mucho más compacto */
}

.services__subtitle {
  margin-top: 0.4rem !important; 
  margin-bottom: 0.6rem; 
}


.services__subtitle2 {
  text-align: center;
  font-size: clamp(1.02rem, .86rem + 1.2vw, 1.18rem);
  font-weight: 600;
  color: #4b5563;
  margin-bottom: 1.1rem;
  margin-top: .35rem;
  letter-spacing: .01em;
}


.services__grid {
  display: grid;
  gap: 1.15rem;
  width: 100%;
  justify-content: center;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  max-width: 1200px;
  margin-bottom: 1.3rem;
  margin-inline: auto;
}

@media (min-width:1100px) {
  .services__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (max-width: 900px) {
  .services__grid {
    max-width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 600px) {
  .services__grid {
    grid-template-columns: 1fr !important;
    max-width: 98vw !important;
  }
}

.services__card {
  background: #fff;
  border: 1px solid var(--gray-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: transform .15s ease, box-shadow .2s ease;
}
.services__card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-2);
}
.services__icon {
  width: 100%;
  aspect-ratio: 16/9;
  background: #0e0f11;
  overflow: hidden;
}
.services__icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.services__title {
  margin: 1rem 1.25rem .25rem;
  color: var(--title-color);
  font-size: clamp(1rem, .9rem + .6vw, 1.15rem);
}
.services__card p {
  padding: 0 1.25rem 1.1rem;
  color: #4b5563;
  line-height: 1.35;
}

/* Botón CTA igual al resto, siempre centrado y con aire */
.services__cta {
  display: inline-block;
  margin: 0 auto 2rem auto;
  padding: .72em 1.5em;
  font-size: 1em;
  border-radius: 8px;
  font-weight: 700;
  min-width: 160px;  /* ya no tan ancho */
  max-width: 220px;
  box-shadow: 0 6px 24px rgba(244,176,0,.13);
  margin-bottom: 1.2rem; 
}

@media (max-width: 700px) {
  .services__container.container {
    padding-inline: 1rem;   /* o 14-18px para más aire */
    width: 100vw;
    max-width: 100vw;
  }
}


/* =================== PROJECTS =================== */
/* =================== PROJECTS (layout final) =================== */

/* Menos espacio antes del título/subtítulo */
#projects.section{ padding-top: 1.1rem !important; }

/* =================== PROJECTS (solo CSS de la sección) =================== */

/* Título y separación compacta */
#projects .section__subtitle{
  text-align:center;
  display:block;
  margin: .25rem auto .4rem;
}
#projects .section__title{
  text-align:center;
  margin: 0 auto .4rem;
}

/* ---- Layout base: 2 columnas (lista + media) y chips arriba ---- */
.projects__container{
  display:grid;
  grid-template-columns: minmax(280px, clamp(26%, 30vw, 34%)) 1fr;
  grid-template-areas:
    "chips  chips"
    "list   media";
  gap: 18px 20px;
  align-items:start;
}

/* ================= CHIPS (centrados, una sola fila) ================= */
.projects__chips{
  grid-area: chips;
  display:flex;
  justify-content:center;        /* centrados como el título */
  align-items:center;
  gap:.55rem;
  padding:.2rem 0;
  margin:.35rem auto 1rem;       /* espacio con la lista */
  max-width:min(1080px, 90vw);
  overflow-x:auto;               /* si no caben, deslizan horizontal */
  scrollbar-width:none;
}
.projects__chips::-webkit-scrollbar{ display:none; }

/* Píldora (chip) con icono dorado a la izquierda */
.project-chip{
  position:relative;
  border:1px solid #E6EAF2;
  background:#fff;
  color:#39424e;
  font-weight:700;
  font-size:.95rem;
  padding:.55rem 1rem .55rem 2.2rem; /* espacio para el icono */
  border-radius:999px;
  cursor:pointer;
  white-space:nowrap;
  transition: transform .12s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.project-chip::before{
  content:"";
  position:absolute; left:.75rem; top:50%; transform:translateY(-50%);
  inline-size:16px; block-size:16px; border-radius:50%;
  background: radial-gradient(circle at 35% 35%, #F7C948 0 55%, #FFD766 60% 100%);
  box-shadow: 0 0 0 2px #fff;
}
.project-chip:hover{ transform: translateY(-1px); border-color:#FFD766; }
.project-chip.is-active{
  background:#FFF1C2;
  border-color:#FFD766;
  box-shadow:0 8px 18px rgba(197,138,0,.18);
}

/* ================= LISTA (izquierda) ================= */
/* Contenedor sutil para que no se vea solo texto */
.projects__list{
  grid-area: list;
  position: sticky; top:120px;                 /* se mantiene visible al hacer scroll */
  max-height: calc(100vh - 140px);
  overflow-y: auto;                             /* scroll SOLO en la lista en desktop */
  background:#fff;
  border: 1px solid #EDEFF3;
  border-radius: 14px;
  padding: 10px;                                /* padding del contenedor */
  box-shadow: 0 6px 18px rgba(0,0,0,.05);
}

/* Tarjetas de la lista (SIN viñetas) */
.projects__card::before{ content:none !important; }
.projects__card{
  background:#fff;
  border:1px solid #E7EBF1;
  border-radius:12px;
  padding:12px 14px;
  margin:8px 0;
  box-shadow:0 3px 10px rgba(0,0,0,.05);
  cursor:pointer;
  transition: transform .12s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.projects__card:hover{ transform: translateY(-1px); box-shadow: 0 8px 18px rgba(0,0,0,.10); }
.projects__card.is-active{
  border-color:#FFD766;
  background: linear-gradient(0deg, rgba(255,193,7,.09), rgba(255,193,7,0));
}

.projects__title{
  margin:0 0 .15rem;
  color:#111317;
  font-size: clamp(.98rem, .9rem + .25vw, 1.15rem);
  line-height:1.2;
}
.projects__date{
  display:block;
  font-size:.86rem;
  color:#7a8492;
}

/* ================= GALERÍA (derecha) ================= */
/* Sin scroll interno y con tope de 3 columnas en desktop */
.projects__media-container{
  grid-area: media;
  display:grid;
  gap:14px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  max-height:none !important;
  overflow:visible !important;
}
@media (min-width:1200px){
  .projects__media-container{ grid-template-columns: repeat(3, 1fr); } /* tope 3 columnas */
}
.projects__media-container img,
.projects__media-container video{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  border-radius:12px;
  box-shadow:0 6px 18px rgba(0,0,0,.12);
  display:block;
  transition: transform .25s ease;
}
.projects__media-container img:hover,
.projects__media-container video:hover{ transform: scale(1.02); }

/* =================== Responsive =================== */
/* Tablet & móvil: lista 2×2, tipografía compacta y galería debajo */
@media (max-width: 768px){
  .projects__container{
    grid-template-columns: 1fr;
    grid-template-areas:
      "chips"
      "list"
      "media";
    gap: 12px;
  }

  .projects__list{
    position: static; max-height: none; overflow: visible;
    display: grid; gap: 8px; padding: 8px;
    grid-template-columns: repeat(2, minmax(0, 1fr));  /* 2×2 */
  }
  .projects__card{
    margin:0; padding:.55rem .6rem; min-height:64px;
  }
  .projects__title{
    font-size:.98rem !important; line-height:1.15; margin:0 0 .12rem;
  }
  .projects__date{ font-size:.82rem; }

  .projects__media-container{
    grid-template-columns: repeat(2, minmax(0,1fr));  /* galería debajo en 2 columnas */
    gap:8px;
  }
}

/* Teléfonos estrechos */
@media (max-width:420px){
  .projects__list{ grid-template-columns: 1fr; }
  .projects__media-container{ grid-template-columns: 1fr; }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .projects__card, .project-chip,
  .projects__media-container img, .projects__media-container video{
    transition:none !important;
  }
}

/* ===== Projects · Móvil 2x2 para chips y listado ===== */
@media (max-width: 768px){
  /* Chips en 2 columnas */
  .projects__chips{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    justify-items: stretch !important;
    align-items: center !important;
    padding: 6px 8px !important;
    overflow: visible !important;   /* sin scroll horizontal */
  }
  .projects__chips .project-chip{
    width: 100% !important;
    text-align: center !important;
    font-size: .9rem !important;
    padding: .5rem .7rem .5rem 2rem !important; /* deja espacio al icono */
  }

  /* Listado en 2 columnas (compacto) */
  .projects__list{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    padding: 8px !important;
    position: static !important;
    max-height: none !important;
    overflow: visible !important;
    /* si el contenedor tenía borde/sombra, los mantiene */
  }
  .projects__card{
    margin: 0 !important;
    min-height: 64px !important;
    padding: .55rem .6rem !important;
  }
  .projects__title{ font-size: .98rem !important; }
  .projects__date{  font-size: .82rem !important; }

  /* Galería debajo en 2 columnas */
  .projects__media-container{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin-top: 4px !important;
  }
}

/* Fuerza 2 columnas también en teléfonos muy estrechos */
@media (max-width: 420px){
  .projects__chips{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .projects__list{  grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .projects__media-container{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}


/* =================== CONTACT =================== */


/* Contenedor de la sección */
.contact.section {
  padding-block: 2.25rem 1.75rem;
}

/* Grid principal: tarjetas (izq) + formulario (der) en desktop, stack en móvil */
.contact__container {
  display: grid;
  gap: 1.25rem;
}

/* Desktop: dos columnas (info cards | form) */
@media (min-width: 1024px) {
  .contact__container {
    grid-template-columns: 1fr minmax(420px, 520px);
    align-items: start;
    gap: 1.75rem;
  }
}

/* ---- Contact info column (las 3 tarjetas) ---- */
.contact__info {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Tarjeta base (se usa en todos los tamaños) */
.contact__card {
  display: flex;
  align-items: center;          /* centra verticalmente el contenido */
  gap: 1rem;
  padding: 1.05rem 1.15rem;
  background: var(--container-color, #fff);
  border: 1px solid var(--gray-border, #E9EDF2);
  border-radius: 14px;
  box-shadow: 0 10px 26px rgba(10,18,24,0.04);
  min-height: 72px;
  overflow: hidden;
  flex-wrap: nowrap;            /* evita saltos de línea */
}

/* Ícono (cuadro redondeado) — caja fija para que la tarjeta no cambie */
.contact__icon{
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  border-radius: 12px;
  display:grid;
  place-items:center;
  background: radial-gradient(120% 100% at 20% 10%, rgba(255,238,210,.55), rgba(255,246,230,.32));
  border: 1px solid rgba(250,225,160,0.25);
  box-shadow: 0 10px 30px rgba(15,15,15,0.03), inset 0 1px 0 rgba(255,255,255,0.6);
  margin-left: -4px; /* leve desplazamiento a la izquierda */
}

/* Icono interior más grande pero contenido en la caja */
.contact__icon i,
.contact__icon svg {
  font-size: 26px;     /* mayor presencia sin cambiar la caja */
  line-height:1;
  color: var(--first-color);
  transform: translateX(-1px); /* leve ajuste visual a la izquierda */
}

/* Contenido textual (título + info) — inline y sin wrap */
.contact__card > .contact__title,
.contact__card > .contact__info,
.contact__card > p.contact__info,
.contact__card > address.contact__info {
  display: inline-block;
  vertical-align: middle;
  white-space: nowrap;   /* forzar una línea */
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Estilos de texto */
.contact__card > .contact__title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: var(--font-bold, 800);
  color: var(--title-color, #111317);
  min-width: 0; /* necesario para ellipsis */
}
.contact__card > .contact__info,
.contact__card > p.contact__info,
.contact__card > address.contact__info {
  margin: 0 0 0 .6rem;
  font-size: .98rem;
  color: var(--text-color, #2B3138);
  opacity: .95;
  min-width: 0;
}

/* ===========================
   Card: Follow Me (mismo comportamiento en todos los tamaños)
   =========================== */
.contact__card.contact__card--follow {
  /* mantener en una línea */
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 1rem;
  min-height: 72px;
}

/* Texto titulo en follow me: ocupar espacio y truncar si es necesario */
.contact__card--follow > .contact__title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: var(--font-bold, 800);
  max-width: 48%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Social grid (pills) — fijo tamaño, no se salen, se colocan a la derecha */
.contact__card--follow .contact__social-grid {
  display: flex;
  gap: .75rem;
  align-items: center;
  justify-content: flex-end;
  margin-left: auto;        /* empuja los iconos al final de la tarjeta */
  flex-shrink: 0;
  white-space: nowrap;
}

/* Social pills: slightly bigger but contained */
.social-pill {
  display:inline-grid;
  place-items:center;
  width:48px;
  height:48px;
  border-radius:999px;
  background: var(--white-color, #fff);
  border: 1px solid rgba(16,22,28,0.06);
  box-shadow: 0 8px 18px rgba(10,18,24,0.04);
  transition: transform .12s ease, box-shadow .14s ease;
  flex: 0 0 48px;
}
.social-pill i,
.social-pill svg {
  font-size: 18px; /* mayor tamaño del icono interno */
  color: var(--text-color, #2B3138);
  line-height: 1;
  transform: translateX(-0.5px);
}

/* Hover ligero */
.social-pill:hover { transform: translateY(-4px); box-shadow: 0 16px 30px rgba(10,18,24,0.06); }

/* Desktop tweaks: más espacio y ligeramente mayor icon box */
@media (min-width: 1024px) {
  .contact__card { padding: 1.15rem 1.4rem; min-height: 84px; }
  .contact__icon { width:72px; height:72px; border-radius:14px; margin-left: -6px; }
  .contact__icon i, .contact__icon svg { font-size: 28px; transform: translateX(-1.5px); }
  .social-pill { width:50px; height:50px; flex:0 0 50px; }
  .social-pill i, .social-pill svg { font-size: 19px; }
  .contact__card--follow > .contact__title { max-width: 38%; }
}

/* ===========================
   Contact Form: estructura y estilo
   =========================== */
.contact__form {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  padding: 1rem;
  background: var(--container-color, #fff);
  border: 1px solid var(--gray-border, #E9EDF2);
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(10,18,24,0.04);
  align-items: stretch;
}

/* Título del formulario — centrado (móvil 100% / desktop 50%) */
.contact__form-title {
  width: 100%;
  margin: 0 0 .6rem 0;
  font-size: clamp(1.02rem, 1.8vw, 1.35rem);
  font-weight: 800;
  letter-spacing: -.02em;
  text-align: center;
  color: var(--mv-title-color, #D28C00);
  display: inline-block;
  position: relative;
  -webkit-background-clip: text;
}

/* Decorador dorado pequeño */
.contact__form-title::after {
  content: "";
  display:block;
  width:56px;
  height:4px;
  margin: 8px auto 0;
  border-radius:999px;
  background: var(--first-gradient, linear-gradient(90deg,#F4B000,#FFC43A));
  box-shadow: 0 8px 18px rgba(244,176,0,.12);
  opacity:.98;
}

/* Desktop: título ocupa la mitad del ancho del form y centrado */
@media (min-width: 1024px) {
  .contact__form-title {
    width: 50%;
    max-width: 520px;
    min-width: 340px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
}

/* Grupos de campos más compactos */
.form__group {
  display: block;
  width: 100%;
}
.form__group input[type="text"],
.form__group input[type="email"],
.form__group input[type="tel"],
.form__group select,
.form__group textarea {
  width: 100%;
  padding: .62rem .75rem;
  border-radius: 10px;
  border: 1px solid rgba(16,22,28,0.06);
  font-size: .98rem;
  line-height:1.25;
  background: #fff;
  transition: box-shadow .12s ease, border-color .12s ease;
}

/* Textarea: altura reducida (~2 líneas), pero resizable */
.form__group textarea,
.contact__form textarea,
#message {
  width: 100%;
  resize: vertical;
  min-height: 4.8rem;    /* ≈ 2 líneas */
  height: 4.8rem;
  max-height: 10rem;
  padding: .8rem;
  border-radius: 10px;
  border: 1px solid rgba(16,20,24,0.06);
  box-shadow: 0 6px 18px rgba(0,0,0,0.04) inset;
  line-height: 1.25;
  font-size: .95rem;
}

/* Desktop: un poquito más alto por confort (pero sigue compacto) */
@media (min-width: 1024px) {
  .form__group textarea,
  .contact__form textarea,
  #message {
    min-height: 5.6rem;
    height: 5.6rem;
  }
}

/* Inputs focus */
.contact__form input:focus,
.contact__form textarea:focus,
.contact__form select:focus {
  outline: none;
  box-shadow: 0 6px 22px rgba(244,176,0,.12);
  border-color: rgba(244,176,0,.45);
}

/* Alineación y tamaño del teléfono (intl-tel-input) — pequeño ajuste */
.contact__form .iti { margin-left: -2px; }

/* ===========================
   Botón Send: centrado en todos los tamaños
   =========================== */
#btnSend,
.contact__form button[type="submit"] {
  align-self: center;
  display: inline-flex;
  justify-content:center;
  padding: .72rem 1.2rem;
  min-width: 150px;
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(244,176,0,0.16);
  transition: transform .08s ease, box-shadow .16s ease, background .12s ease;
  background: var(--first-color);
  color:#1a1200;
  font-weight:700;
  border: none;
  cursor: pointer;
}
#btnSend:hover { transform: translateY(-2px); background: var(--second-color); }

/* Mensajes de ayuda (small) */
.help { color: #e06b00; font-size:.85rem; display:none; }

/* ===========================
   Responsive: móvil — mantener UNA sola línea y truncar el texto (según petición)
   =========================== */
@media (max-width: 1023px) {
  .contact__container { grid-template-columns: 1fr; }

  /* Mantener tarjetas en single-line: si no cabe, el texto se truncará con ellipsis */
  .contact__card,
  .contact__card.contact__card--follow {
    flex-wrap: nowrap;
    align-items: center;
    min-height: 64px;
    padding: .85rem;
  }

  /* Icon box algo más pequeño en móvil para ahorrar espacio */
  .contact__icon { width:56px; height:56px; border-radius:12px; margin-left: -2px; }
  .contact__icon i, .contact__icon svg { font-size: 22px; transform: translateX(-0.5px); }

  /* Social pills: mantener tamaño (pero un poco más compacto) */
  .social-pill { width:44px; height:44px; flex:0 0 44px; }
  .social-pill i, .social-pill svg { font-size: 16px; }

  /* Títulos e info pueden truncarse pero no romper layout */
  .contact__card > .contact__title,
  .contact__card > .contact__info,
  .contact__card > p.contact__info,
  .contact__card > address.contact__info {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Form adjustments for mobile */
  .contact__form { padding: .95rem; gap: .75rem; }
  .form__group textarea { min-height: 4.8rem; }
  .contact__form-title { width:100%; text-align:center; }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  .social-pill, #btnSend, .contact__card, .contact__form-title { transition: none !important; }
}

/* MÓVIL: ocultar el título "Follow Me" pero mantener los iconos visibles */
@media (max-width: 1023px) {
  /* Oculta solo el título dentro de la tarjeta Follow Me */
  .contact__card.contact__card--follow .contact__title {
    display: none;
  }

  /* Ajustes finos: que los iconos queden alineados a la izquierda cuando el título ya no ocupa espacio */
  .contact__card.contact__card--follow .contact__social-grid {
    margin-left: 0;
    justify-content: flex-start;
  }

  /* Opcional: centrar verticalmente los iconos si quieres (descomenta si prefieres) */
  /*
  .contact__card.contact__card--follow {
    align-items: center;
  }
  */
}

/* Desktop: desplaza visualmente la tarjeta del form ligeramente a la derecha */
@media (min-width: 1024px) {
  .contact__form {
    transform: translateX( clamp(12px, 2.2vw, 36px) );
    /* sombra/transition para que se vea suave */
    transition: transform .28s cubic-bezier(.2,.9,.3,1);
  }
}



/* =================== FOOTER =================== */
/* ===========================
   FOOTER — Classic Split (FORZADO A NEGRO)
   =========================== */
.footer {
  background: #0B0B0D;                        /* negro corporativo */
  color: #F7F7F8;                             /* texto blanco suave */
  padding-block: 2.25rem 1.25rem;
  position: relative;
  border-top: 1px solid rgba(255,255,255,0.03);
  overflow: hidden;
  font-family: var(--body-font);
}

/* decorador superior dorado */
.footer::before{
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 8px;
  width: 120px;
  height: 4px;
  border-radius: 999px;
  background: var(--first-gradient, linear-gradient(90deg,#F4B000,#FFC43A));
  box-shadow: 0 6px 18px rgba(244,176,0,.12);
  opacity: .95;
}

/* contenedor principal */
.footer__container {
  width: min(1280px, 92vw);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  align-items: start;
}

/* left: logo + tagline + email */
.footer__logo {
  display: flex;
  align-items: center;
  gap: .65rem;
  color: #fff;
  text-decoration: none;
  font-weight: 800;
}
.footer__logo img {
  height: 50px;
  width: auto;
  display:block;
  /* Si tu SVG ya tiene versión blanca, borra el filter.
     Si no tienes logo blanco, esta regla ayuda a que se vea blanco */
  filter: brightness(0) invert(1) drop-shadow(0 6px 18px rgba(0,0,0,.6));
}

/* marca textual */
.brand-chip {
  display:inline-block;
  font-weight:700;
  font-size:.95rem;
  color: #fff;
  opacity: .98;
}

/* descripción y email */
.footer__description {
  margin-top: .55rem;
  color: rgba(247,247,248,.92);
  font-size: .95rem;
  max-width: 46ch;
}
.footer__email {
  margin-top: .6rem;
  font-size: .95rem;
  color: rgba(247,247,248,.86);
}
.footer__email a {
  color: var(--second-color, #FFC43A);
  text-decoration: none;
  font-weight:600;
}
.footer__email a:hover,
.footer__email a:focus {
  color: var(--first-color, #F4B000);
  text-decoration: underline;
}

/* right grid: columnas con títulos y listas */
.footer__content {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: 0.25rem;
}
.footer__title {
  color: #fff;
  font-weight: 800;
  font-size: 1.02rem;
  margin-bottom: .6rem;
  letter-spacing: -0.01em;
}
.footer__links,
.footer__list { display: grid; gap: .45rem; margin:0; padding:0; }
.footer__link {
  color: rgba(247,247,248,.92);
  text-decoration: none;
  font-weight: 600;
  font-size: .98rem;
  transition: color .16s ease, transform .12s ease;
}
.footer__link:hover,
.footer__link:focus { color: var(--second-color, #FFC43A); transform: translateX(4px); }

/* info y horarios */
.footer__info { color: rgba(247,247,248,.82); font-size:.96rem; }

/* redes sociales */
.footer__social {
  display:flex;
  gap:.6rem;
  align-items:center;
}
.footer__social-link{
  display:inline-grid;
  place-items:center;
  width:48px;
  height:48px;
  border-radius:10px;
  background: rgba(255,255,255,0.03);
  color: #FFF;
  text-decoration:none;
  font-size: 1.25rem;
  transition: transform .14s ease, box-shadow .18s ease, background .12s ease;
  border: 1px solid rgba(255,255,255,0.04);
}
.footer__social-link:hover,
.footer__social-link:focus{
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 14px 32px rgba(0,0,0,.45);
  background: linear-gradient(180deg, rgba(244,176,0,0.12), rgba(255,196,58,0.06));
  color: #0B0B0D; /* icono oscuro sobre fondo dorado */
}

/* copy / pie */
.footer__copy {
  display:block;
  text-align:center;
  font-size:.9rem;
  color: rgba(247,247,248,.66);
  padding-top: 1rem;
  margin-top: .75rem;
  border-top: 1px solid rgba(255,255,255,0.03);
}

/* -------------------------
   Desktop layout
   ------------------------- */
@media (min-width: 1024px) {
  .footer__container {
    grid-template-columns: 1fr minmax(420px, 520px);
    gap: 2.25rem;
    align-items: start;
  }
  .footer__content {
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 1.25rem;
    align-items: start;
  }
  .footer__description { max-width: 46ch; }
  .footer__logo img { height: 52px; }

  /* social links un pelín más grandes pero contenidos */
  .footer__social-link { width:52px; height:52px; font-size:1.35rem; border-radius:12px; }
}

/* -------------------------
   Mobile adjustments
   ------------------------- */
@media (max-width: 1023px) {
  .footer { padding-block: 1.6rem 1rem; }
  .footer__container { grid-template-columns: 1fr; gap: 1rem; }
  .footer__content { grid-template-columns: 1fr; row-gap: .85rem; }
  .brand-chip { display:block; font-size: .98rem; }
  .footer__social { justify-content:flex-start; }
  .footer__social-link { width:46px; height:46px; font-size:1.15rem; border-radius:10px; }
  .footer__logo img { height: 44px; }
  .footer__description { max-width: none; }
}

/* -------------------------
   Accessible focus states
   ------------------------- */
.footer a:focus {
  outline: 3px solid rgba(244,176,0,0.18);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .footer__social-link, .footer__link { transition: none !important; transform: none !important; box-shadow:none !important; }
}

/* Si prefieres forzar un logo blanco más "limpio", reemplaza el <img> por una versión SVG en blanco.
   La regla filter anterior es útil como fallback, pero los SVG blancos dan mejor resultado. */



/* =================== SCROLL UP =================== */
.scrollup{
  position:fixed; right:1rem; bottom:-50%;
  background:#fff; color:var(--title-color);
  border-radius:8px; padding:8px; font-size:1.25rem;
  box-shadow:0 4px 16px hsla(255,90%,8%,.15);
  z-index:var(--z-tooltip); transition: all .25s ease;
}
.scrollup:hover{ transform:translateY(-4px); background:var(--second-color); color:#fff; }
.show-scroll{ bottom:3rem; }

/* =================== WHATSAPP =================== */
.whatsapp-container{ position:fixed; bottom:20px; right:20px; z-index:9999; text-align:center; }
.whatsapp-text{
  position:absolute; bottom:80px; left:50%; transform:translateX(-50%);
  background:rgba(0,0,0,.9); color:#FFDD00; padding:12px 15px; border-radius:8px;
  font-size:12px; font-weight:var(--font-semi-bold); width:120px; line-height:1.4;
  box-shadow:0 4px 15px rgba(0,0,0,.2); opacity:0; transition:opacity .25s; pointer-events:none;
}
.whatsapp-button{ display:block; width:90px; height:70px; transition: transform .2s; }
.whatsapp-button:hover{ transform:scale(1.07); }
.whatsapp-button:hover + .whatsapp-text{ opacity:1; }
.whatsapp-button img{ width:100%; height:auto; border-radius:50%; box-shadow:0 4px 20px rgba(37,211,102,.4); }

/* =================== Aparición sutil (scroll-reveal lite) =================== */
.reveal{ opacity:0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1 !important; transform:none !important; }
}

/* =================== ACCESIBILIDAD =================== */
a:focus-visible, button:focus-visible, .nav__link:focus-visible{
  outline:3px solid rgba(255,196,58,.6); outline-offset:2px; border-radius:8px;
}

/* =================== BREAKPOINTS =================== */
@media (max-width:340px){
  .container{ padding-inline:.75rem; }
  .section__title{ font-size:1.35rem; }
  .home__title{ font-size:1.8rem; }
  .footer__container{ grid-template-columns:1fr; }
}

@media (min-width:576px){
  .home__data{ text-align:left; }
  .home__buttons{ justify-content:flex-start; }
  .contact__container{ grid-template-columns: 1fr 1fr; align-items:start; }
}



@media (max-height: 800px){
  .home__title{ font-size: clamp(1.8rem, 0.8rem + 3.2vw, 3rem); }
  .home__description{ margin-bottom: 1.2rem; }
}



@media (min-width:1100px){
  .services__grid{ grid-template-columns: repeat(4, 1fr); }
}

@media (min-width:1150px){
  .container{ width:min(1280px, 92vw); }
  .section{ padding-block:7rem 2rem; }
  .nav{ height: calc(var(--header-height) + 2rem); }
  .home__content{ row-gap:4.5rem; }
  .home__description{ margin-bottom:3rem; }
  .about__container{ grid-template-columns:480px 480px; gap:9rem; }
  .contact__container{ grid-template-columns: 530px 515px; gap:3.5rem; }
  .scrollup{ right:3rem; }
}

/* ======= Ajustes móviles específicos ======= */
@media (max-width:768px){
  .home__data{ text-align:center; }
  .home__buttons{ justify-content:center; }
  .about__list{ grid-template-columns:1fr; }

  /* Projects layout compacto en móvil */
  .projects__container{ grid-template-columns: 1fr; }
  .footer{ text-align:center; }
  .footer__social{ justify-content:center; }
  .whatsapp-container{ bottom:12px; right:12px; transform:none; }
  .whatsapp-text{ font-size:10px; bottom:65px; width:100px; }
}

/* =================== GARANTÍAS RESPONSIVE =================== */
html, body{ max-width:100%; }
.grid, .container, .home__container, .about__container, .services__grid,
.projects__container, .contact__container, .contact__info{ min-width:0; }
img, video, canvas{ max-width:100%; height:auto; }
h1,h2,h3,.section__title,.services__title,.projects__title,.contact__title,
.footer__email,.footer__link,.nav__link,.contact__card p,.services__card p{
  overflow-wrap:anywhere; word-break:break-word; hyphens:auto;
}



/* === Marca visible en el header (blanca y con leve glow) === */
.nav__brand-name{
  color:#fff;
  font-weight:700;
  margin-left:.35rem;
  white-space:nowrap;
  text-shadow: 0 0 12px rgba(255,255,255,.14);
}


@media (max-width:576px){
  .nav__brand-name{ display:none; } /* oculta en móvil si no entra */
}

/* === Footer: iconos libres y en dorado === */
.footer__social .footer__social-link{
  font-size:1.6rem;
  line-height:1;
  color: var(--first-color);
  display:inline-flex;
  transition: transform .15s ease, color .2s ease;
}
.footer__social .footer__social-link:hover{
  transform: translateY(-2px);
  color: var(--second-color);
}

/* === Servicios en 2 columnas en móvil (ya lo tenías, refuerzo) === */
@media (max-width:768px){
  .services__grid{
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 12px !important;
  }
}

/* === Ajuste de jerarquía bajo cada subtítulo (párrafos más sobrios) === */
.section__subtitle + .section__title{ margin-top:.25rem; }
.section__title + p{
  color:#4b5563;
  font-size:.95rem;
  max-width:68ch;
  margin-inline:auto;
}

/* === Header: cuando hace scroll, que la marca mantenga contraste === */
.bg-header .nav__brand-name{ color:#fff; text-shadow: 0 0 10px rgba(255,255,255,.1); }

/* Contenedor del nav */
.nav{
  height:80px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-inline:1.5rem;
}

/* Logo + nombre */
.nav__logo{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  min-width:0;
}
.nav__logo-img{
  height: calc(var(--header-height) - .5rem); /* ~40px si --header-height=3.5rem */
  width:auto;
  display:block;
}


/* Menú desktop sin caja oscura */
@media (min-width:1150px){
  .nav__menu{
    background:transparent !important;
    border-radius:0 !important;
    box-shadow:none !important;
    backdrop-filter:none !important;
    padding:0 !important;
  }
}

.nav--wide {
  max-width: 1680px;                    /* O el ancho que prefieras */
  width: min(98vw, 1680px);
  margin-inline: auto;
  padding-inline: 2.3rem;               /* ≈2cm de aire a cada lado */
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px;                         /* O el alto de tu nav */
  /* Opcional: 
  box-sizing: border-box; 
  */
}

/* Opcional: asegúrate que tu logo y menu estén alineados igual que antes */
.nav__logo { flex-shrink: 0; }
.nav__menu { flex-shrink: 1; }


/* Fuerza visibles los pasos del ABOUT aunque falle el JS */
.process .reveal {
  opacity: 1 !important;
  transform: none !important;
}

/* Fuerza visibles los REVEAL dentro de HOME */
#home .reveal {
  opacity: 1 !important;
  transform: none !important;
}