/* ===== Mood-like Theme (tokens) ===== */
:root{
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  --font-serif: "Playfair Display", Georgia, serif;

  --bg: #ffffff;
  --text: #111827;
  --muted: #6b7280;
  --border: #e5e7eb;
  --brand: #2d5a27;
  --brand-ink: #0b2010;
  --accent: #cd7b3b;
  --pill: #f3f4f6;
  --shadow: 0 6px 24px rgba(0,0,0,.06);

  --radius: 16px;
  --container: 1200px;
  --gap: 24px;
}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{margin:0; background:var(--bg); color:var(--text); font-family:var(--font-sans); line-height:1.6; padding-top:72px}
img{max-width:70%; display:block}
a{text-decoration:none; color:inherit}
.container{max-width:var(--container); margin:0 auto; padding:0 20px}
.section{padding:20px 0}
.section__head{margin-bottom:28px; text-align:left}
.kicker{font-size:.85rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.h1{font-family:var(--font-serif); font-weight:800; font-size:clamp(2rem,5vw,3.5rem); line-height:1.05; margin:.25rem 0 1rem}
.h2{font-family:var(--font-serif); font-weight:800; font-size:clamp(1.6rem,3.5vw,2.4rem); margin:.25rem 0 .75rem}
.lead{color:var(--muted); font-size:clamp(1rem,2.5vw,1.15rem)}

/* Navbar fixed */
.navbar, header.navbar{
  position:fixed; top:0; left:0; right:0;
  background:#fff; z-index:1000;
  border-bottom:1px solid var(--border);
  box-shadow:0 2px 8px rgba(0,0,0,.06);
}
.navbar .nav-container{display:flex;align-items:center;justify-content:space-between;height:64px}

/* needs tiles */
.section--needs .section__head{text-align:center}
.need-tiles{display:grid; gap:16px; grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1024px){.need-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.need-tiles{grid-template-columns:1fr}}
.need-card{position:relative; overflow:hidden; border-radius:16px; height:320px; background:#0b2010; border:1px solid var(--border); box-shadow:var(--shadow); background-size:cover; background-position:center}
.need-card::after{content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,.15) 50%, rgba(0,0,0,0) 100%)}
.need-card__label{position:absolute; left:1px; right:16px; color:#fff; font-weight:800; font-size:1.4rem; line-height:1.1; z-index:1; text-shadow:0 6px 24px rgba(0,0,0,.35)}

/* hero carousel */
.hero-wrap{padding:24px 0; background:#fff}
.hero-carousel{position:relative; width:100%; aspect-ratio:21/9; border-radius:24px; overflow:hidden; background:#0a0a0a; box-shadow:var(--shadow)}
@media (max-width:768px){.hero-carousel{aspect-ratio:1/1}}
.hero-carousel__slide{position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transition:opacity 700ms ease-in-out}
.hero-carousel__slide[aria-current="true"]{opacity:1}
.hero-carousel__overlay{position:absolute; inset:0; background:linear-gradient(to bottom, rgba(0,0,0,.0) 15%, rgba(0,0,0,.55) 70%); pointer-events:none}
.hero-carousel__content{position:absolute; inset:0; display:grid; align-content:end; justify-items:start; padding:clamp(16px,4vw,40px); text-align:left}
.hero-carousel__headline{margin:0; font-family:var(--font-serif); font-weight:800; font-size:clamp(1.8rem,4.6vw,3.4rem); line-height:1.05; color:#fff; text-shadow:0 12px 32px rgba(0,0,0,.55); max-width:min(90%,980px)}
.hero-seals{display:flex; gap:clamp(8px,2vw,16px); align-items:center; margin-top:clamp(10px,2.5vw,18px)}
.hero-seals img{height:clamp(48px,10vw,100px); width:auto; filter:drop-shadow(0 6px 18px rgba(0,0,0,.35))}

/* CTA sections */
.section-cta{padding:clamp(28px,4vw,48px) clamp(20px,3vw,24px); border-radius:18px; background:#f6fdf7; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; border:1px solid var(--border); box-shadow:var(--shadow)}
.section-cta h2{margin:0; font-size:clamp(1.4rem,2.4vw,1.8rem)}
.section-cta p{margin:6px 0 0; color:var(--muted)}
.btn-cta{display:inline-flex; align-items:center; justify-content:center; padding:12px 24px; border-radius:999px; background:#ffffff; border:2px solid var(--brand); font-weight:700; color:var(--brand); text-decoration:none}
@media (max-width:768px){.section-cta{flex-direction:column; text-align:center}}


/* v1.0.3 — CTA with background image */
.section-cta.bg-image {
  background-size:cover; background-position:center;
  color:#fff; position:relative; overflow:hidden;
}
.section-cta.bg-image::after {
  content:""; position:absolute; inset:0;
  background:linear-gradient(to right, rgba(0,0,0,.55), rgba(0,0,0,.15));
}
.section-cta.bg-image > * { position:relative; z-index:1; }
.section-cta.bg-image .btn-cta { background:#fff; color:var(--brand); }

/* Centrar logos en desktop sin tocar la grilla */
@media (min-width: 768px) {
  .certifications .cert-logos {
    justify-items: center;   /* centra horizontalmente dentro de cada celda */
    align-items: center;     /* centra verticalmente dentro de cada celda */
  }
  .certifications .cert-logos > img {
    justify-self: center;    /* por si alguna regla previa pisa justify-items */
    align-self: center;
    display: block;          /* evita “alineación inline” rara */
    margin: 0 auto;          /* backup harmless */
  }
}


/* === Desktop: need-card layering & background hardening === */
@media (min-width: 1025px) {
  .need-card {
    position: relative;
    /* si definís el fondo en el contenedor: */
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    overflow: hidden;
  }

  /* Overlay por debajo del contenido */
  .need-card::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(
      to top,
      rgba(0,0,0,0.55),
      rgba(0,0,0,0.15) 50%,
      rgba(0,0,0,0)
    );
    z-index: 0;
    pointer-events: none;
  }

  /* Contenido siempre por encima del overlay */
  .need-card-inner {
    position: relative;
    z-index: 1;
    display: block;        /* evita conflictos con grid/flex/3D */
    text-align: left;      /* pedido explícito */
    height: 100%;
    padding: 16px;
    transform: none !important;
    -webkit-transform: none !important;
    backface-visibility: visible;
    -webkit-backface-visibility: visible;
  }

  /* Neutralizar caras del flip en desktop (solo mostramos una cara) */
  .need-card-front,
  .need-card-back {
    position: static;
    transform: none !important;
    -webkit-transform: none !important;
    backface-visibility: visible;
    -webkit-backface-visibility: visible;
  }
  .need-card-back { display: none; } /* mostrás solo el frente en desktop */

  /* Si tus imágenes están en .need-card-front, forzá también su render */
  .need-card-front {
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
  }
}


/* Perf: avoid fixed background on mobile to reduce paint cost */
@media (max-width: 1024px){
  .contact{ background-attachment: scroll !important; }
}