:root{
      --ff:'Nunito Sans', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
      --fw-regular: 400;
      --fw-medium: 600;
      --fw-bold: 700;
      --header-h: 90px;
      --header-bg: #fff;
      --header-border:#ddd;
    }
    html,body{ margin:0; font-family:var(--ff); font-weight:var(--fw-regular); background:#111; color:#fff; line-height:1.55; }
    h1,h2,h3,h4{ font-weight:var(--fw-bold); }
    .btn,.chip,.cta,.filter,.header-left,.hero-text,.pipe, nav a { font-weight:var(--fw-medium); }
    a{ color:inherit; text-decoration:none }

    /* HEADER */
    header{ position:fixed; inset:0 0 auto 0; z-index:10; display:flex; align-items:center; padding:16px 20px; background:var(--header-bg); border-bottom:1px solid var(--header-border); backdrop-filter:blur(6px); transition: background .35s ease,border-color .35s ease,box-shadow .35s ease,padding .25s ease; will-change:background,border-color,padding; }
    .header-inner{ width:100%; display:flex; align-items:center; gap:16px; }
    .header-left{ display:flex; align-items:center; gap:10px; flex:1 1 auto; color:#222; font-size:14px; white-space:nowrap; }
    .header-left a{ color:#222; opacity:.95 }
    .header-left a:hover{ opacity:1 }
    .pipe{ opacity:.5; padding:0 4px; }
    .icon{ width:18px; height:18px; display:inline-block; color:#222; }
    .header-right{ margin-left:auto; display:flex; align-items:center; }
    .logo img{ height: clamp(44px, 7vw, 88px); width:auto; display:block; transition:height .25s ease; }
    header.transparent{ background:transparent; border-color:transparent; box-shadow:none; }
    header.transparent .header-left, header.transparent .header-left a, header.transparent .icon{ color:#fff; }
    header.shrink{ padding:8px 20px; }
    header.shrink .logo img{ height: clamp(32px, 5vw, 64px); }
    @media (max-width:720px){ .header-left{ font-size:13px; gap:8px; } .icon{ width:17px; height:17px; } }
    @media (max-width:420px){ header{ padding:8px 12px; } header.shrink{ padding:6px 10px; } .header-left{ font-size:12px; gap:6px; } .icon{ width:16px; height:16px; } }

    /* HEROs apilados */
    .hero{ margin-top: var(--header-h); position:relative; height:80vh; overflow:hidden; }
    .hero + .hero{ margin-top:0; }

    /* FADE SLIDER */
    .slides{ position:relative; height:100%; }
    .slide{ position:absolute; inset:0; opacity:0; transition: opacity .8s ease; }
    .slide picture{ display:block; width:100%; height:100%; }
    .slide img{ width:100%; height:100%; object-fit:cover; display:block; }
    .slide.active{ opacity:1; z-index:1; }

    .hero-text{ position:absolute; bottom:40px; left:40px; right:40px; font-size:clamp(22px, 4.8vw, 38px); text-shadow:0 8px 30px rgba(0,0,0,.45); }

    footer{ text-align:center; padding:24px 0; color:#aaa; font-size:14px; border-top:1px solid #1f1f1f; }
	
	
	
	/* ===== FIX: que el texto del HERO quede fijo y siempre visible ===== */

/* Aseguramos que cada HERO sea su propio contexto y soporte superposiciones. */
.hero{
  position: relative;       /* si no lo tenías, lo forzamos aquí */
  isolation: isolate;       /* aísla el stacking de cada hero */
  z-index: 0;
}

/* La capa de las slides (foto visible) debe quedar por debajo del texto. */
.slides{
  display: grid;            /* layering sano para el fade */
  height: 100%;
}
.slide{
  grid-area: 1 / 1;
  opacity: 0;
  transition: opacity .8s ease;
}
.slide.active{
  opacity: 1;
  z-index: 1;               /* Capa 1: foto activa */
}

/* Overlay superior para contraste del header (si lo estás usando). */
.hero::before{
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 160px;
  background: linear-gradient(to bottom, rgba(0,0,0,.66), rgba(0,0,0,0));
  z-index: 2;               /* Capa 2: overlay de contraste */
  pointer-events: none;
}

/* Texto del HERO: SIEMPRE por encima de overlay y fotos. */
.hero-text{
  position: absolute;       /* garantizar posicionamiento */
  left: 40px; right: 40px; bottom: 40px;
  z-index: 3;               /* Capa 3: texto visible desde el inicio */
  pointer-events: none;     /* evita interferir con gestos/clicks */
  text-shadow: 0 2px 18px rgba(0,0,0,.55); /* refuerzo de contraste (opcional) */
}