/* ==========================================================================
   Bredmart Solutions — hoja de estilos principal
   Paleta tomada del logo premium: dorado #C4902C, verde #1E6032 y negro.
   ========================================================================== */

:root {
  /* Color — dorado y verde muestreados del logo */
  --negro:        #0B120E;   /* negro con un punto de verde */
  --negro-2:      #121A15;
  --negro-3:      #1B241E;
  --dorado:       #C4902C;   /* dorado de marca */
  --dorado-claro: #DCA93C;   /* sobre fondo oscuro */
  --dorado-osc:   #8F6419;   /* sobre fondo claro (contraste AA) */
  --verde:        #1E6032;   /* verde de marca */
  --verde-claro:  #2E8B4E;
  --verde-luz:    #46A96A;   /* verde legible sobre oscuro */
  --blanco:       #FFFFFF;
  --crema:        #F7F6F1;
  --gris-borde:   #E3DFD5;
  --texto:        #16201A;
  --texto-suave:  #56605A;
  --texto-claro:  #B5BDB7;
  --wa:           #25D366;
  --wa-osc:       #1DA851;

  /* Tipografía fluida */
  --f-base: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --t-h1:   clamp(1.85rem, 1.3rem + 2.1vw, 2.9rem);
  --t-h2:   clamp(1.6rem, 1.15rem + 1.9vw, 2.5rem);
  --t-h3:   clamp(1.1rem, 1rem + 0.4vw, 1.3rem);
  --t-lead: clamp(1.05rem, 0.97rem + 0.4vw, 1.22rem);

  /* Espaciado y formas */
  --wrap:   1180px;
  --pad-y:  clamp(3.5rem, 2rem + 6vw, 6.5rem);
  --r-sm:   10px;
  --r-md:   16px;
  --r-lg:   24px;
  --sombra: 0 1px 2px rgba(13, 13, 13, .05), 0 12px 32px -12px rgba(13, 13, 13, .16);
  --sombra-alta: 0 20px 48px -16px rgba(13, 13, 13, .3);
  --header-h: 72px;
}

/* --------------------------------------------------------- Base --------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--f-base);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--texto);
  background: var(--blanco);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3 { line-height: 1.15; margin: 0 0 .6em; letter-spacing: -0.02em; font-weight: 800; }
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); font-weight: 700; letter-spacing: -0.01em; }
p  { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--dorado);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--negro);
  color: var(--blanco);
  padding: .8rem 1.2rem;
  z-index: 200;
  border-radius: 0 0 var(--r-sm) 0;
}
.skip:focus { left: 0; }

.wrap {
  width: min(100% - 2.5rem, var(--wrap));
  margin-inline: auto;
}
.wrap-narrow { width: min(100% - 2.5rem, 780px); }

/* --------------------------------------------------------- Botones ------ */

.btn {
  --btn-bg: transparent;
  --btn-fg: var(--texto);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .82rem 1.5rem;
  border: 2px solid transparent;
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font: inherit;
  font-weight: 700;
  line-height: 1.25;
  text-decoration: none;
  cursor: pointer;
  transition: transform .15s ease, background-color .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-lg { padding: 1.05rem 2rem; font-size: 1.05rem; }

.btn-primary {
  --btn-bg: var(--dorado);
  --btn-fg: var(--negro);
  box-shadow: 0 10px 24px -10px rgba(196, 144, 44, .85);
}
.btn-primary:hover { --btn-bg: var(--dorado-claro); }

.btn-outline {
  --btn-fg: var(--verde);
  border-color: var(--verde);
}
.btn-outline:hover { --btn-bg: var(--verde); --btn-fg: var(--blanco); }

.btn-ghost {
  --btn-fg: rgba(255, 255, 255, .88);
  border-color: rgba(255, 255, 255, .26);
}
.btn-ghost:hover { --btn-bg: rgba(255, 255, 255, .1); border-color: var(--blanco); }

.btn-wa {
  --btn-bg: var(--wa);
  --btn-fg: #06301A;
  padding: .62rem 1.15rem;
}
.btn-wa:hover { --btn-bg: var(--wa-osc); --btn-fg: #fff; }
.btn .ico { width: 20px; height: 20px; flex: none; }

/* --------------------------------------------------------- Header ------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--negro);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  transition: box-shadow .2s ease;
}
.site-header.is-scrolled { box-shadow: 0 8px 24px -12px rgba(0, 0, 0, .6); }

.header-inner {
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  text-decoration: none;
  flex: none;
}
.logo-mark { width: 52px; height: 52px; flex: none; margin: -6px 0; }
.logo-text { display: flex; flex-direction: column; line-height: 1; }
.logo-text strong {
  color: var(--blanco);
  white-space: nowrap;
  font-size: 1.06rem;
  font-weight: 800;
  letter-spacing: .11em;
}
.lg-oro { color: var(--dorado-claro); }
.lg-verde { color: var(--verde-luz); }

.logo-text em {
  color: var(--dorado);
  font-size: .58rem;
  font-style: normal;
  font-weight: 600;
  letter-spacing: .34em;
  margin-top: .28em;
}

.nav { display: flex; align-items: center; gap: 1.35rem; }
.nav > a {
  color: var(--texto-claro);
  text-decoration: none;
  font-size: .93rem;
  font-weight: 600;
  transition: color .15s ease;
}
.nav > a:hover, .nav > a.is-active { color: var(--blanco); }
.nav .nav-cta { color: #06301A; }

.nav-toggle {
  display: none;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--blanco);
  border-radius: 2px;
  transition: transform .22s ease, opacity .22s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ------------------------------------------------- Selector de idioma --- */

.lang {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  flex: none;
}
.lang-btn {
  padding: .3rem .35rem;
  border: 0;
  background: none;
  font: inherit;
  font-size: .84rem;
  font-weight: 700;
  letter-spacing: .07em;
  color: rgba(255, 255, 255, .5);
  cursor: pointer;
  border-radius: 5px;
  transition: color .15s ease;
}
.lang-btn:hover { color: var(--blanco); }
.lang-btn.is-active { color: var(--dorado-claro); }
.lang-sep {
  color: rgba(255, 255, 255, .22);
  font-size: .8rem;
  line-height: 1;
}

/* --------------------------------------------------------- Hero --------- */

.hero {
  position: relative;
  background: var(--negro);
  color: var(--blanco);
  padding: clamp(3rem, 1.5rem + 5vw, 5.5rem) 0 clamp(3.5rem, 2rem + 5vw, 6rem);
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: -30% 40% 30% -20%;
  background: radial-gradient(circle at 50% 50%, rgba(196, 144, 44, .17), transparent 62%);
  pointer-events: none;
}

.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(2rem, 1rem + 3vw, 4rem);
  align-items: center;
}

.eyebrow {
  display: inline-block;
  margin: 0 0 1rem;
  color: var(--dorado-osc);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.hero h1 { margin-bottom: .6em; line-height: 1.18; }
.hero .eyebrow { color: var(--dorado-claro); }
.hero h1 .hl { color: var(--dorado-claro); }

.lead {
  font-size: var(--t-lead);
  color: rgba(255, 255, 255, .82);
  max-width: 46ch;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
  margin: 2.2rem 0 2rem;
}

.hero-points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  font-size: .92rem;
  color: rgba(255, 255, 255, .68);
}
.hero-points li { position: relative; padding-left: 1.4rem; }
.hero-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .58em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--dorado);
}

.hero-media img { border-radius: var(--r-lg); }

/* --------------------------------------------------------- Strip -------- */

.strip {
  background: var(--negro-2);
  color: var(--texto-claro);
  padding: 1.9rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.strip-title {
  margin: 0 0 .9rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .45);
}
.chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin: 0;
  padding: 0;
}
.chips li {
  padding: .4rem .95rem;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  font-size: .88rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .8);
}

/* --- Cinta infinita de rubros --- */

/* Va a lo ancho de la pantalla, fuera del .wrap, y se difumina en los dos
   bordes para que las palabras entren y salgan sin cortarse en seco. */
.cinta {
  display: grid;
  gap: .6rem;
  overflow: hidden;
  padding: 3px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.cinta-pista {
  display: flex;
  width: max-content;
  will-change: transform;
}
/* Los tiempos acompañan el largo de cada fila: con diecinueve rubros la
   cinta es casi el doble de larga que antes, así que la vuelta tarda más
   para que la velocidad en pantalla siga siendo la misma. */
.cinta-izq { animation: cinta-izq 105s linear infinite; }
.cinta-der { animation: cinta-der 135s linear infinite; }

/* Cada pista lleva la misma lista tres veces; al correrse exactamente un
   tercio, lo que aparece es idéntico a lo que había y el giro no tiene
   costura. */
@keyframes cinta-izq {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-33.3333%, 0, 0); }
}
@keyframes cinta-der {
  from { transform: translate3d(-33.3333%, 0, 0); }
  to   { transform: translate3d(0, 0, 0); }
}

/* Para poder leer con calma. */
.cinta:hover .cinta-pista,
.cinta:focus-within .cinta-pista { animation-play-state: paused; }

.chips-cinta {
  flex-wrap: nowrap;
  gap: 2.2rem;
  padding-right: 2.2rem;
}
.chips-cinta li { position: relative; white-space: nowrap; }

/* Un rombo entre rubro y rubro, alternando dorado y verde. Va en todos,
   también en el último de cada copia, para que el empalme de la cinta se vea
   igual que cualquier otro tramo. */
.chips-cinta li::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -1.24rem;
  width: 5px;
  height: 5px;
  margin-top: -2.5px;
  transform: rotate(45deg);
  background: var(--dorado);
  opacity: .75;
}
.chips-cinta li:nth-child(even)::after { background: var(--verde-luz); }

/* Misma forma, sobre fondo claro (sección de alcance) */
.chips-claro li {
  border-color: var(--gris-borde);
  background: var(--blanco);
  color: var(--texto);
  padding: .5rem 1.1rem;
  font-size: .92rem;
}

/* --------------------------------------------------------- Secciones ---- */

.section { padding: var(--pad-y) 0; }
.section-alt { background: var(--crema); }

.section-head { max-width: 60ch; margin-bottom: clamp(2rem, 1rem + 2.5vw, 3.2rem); }
.section-head .eyebrow { color: var(--dorado-osc); }
.section-sub {
  font-size: var(--t-lead);
  color: var(--texto-suave);
  margin: 0;
}
/* Cuando la entradilla lleva más de un párrafo */
.section-sub + .section-sub { margin-top: .9em; }

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.35rem; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.35rem; }

.card {
  background: var(--blanco);
  border: 1px solid var(--gris-borde);
  border-radius: var(--r-md);
  padding: clamp(1.4rem, 1.1rem + 1vw, 2.1rem);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sombra);
  border-color: #D9D2C8;
}
.card p { color: var(--texto-suave); margin-bottom: 0; }
.card h3 { margin-bottom: .5em; }

.card.problem {
  border-left: 4px solid var(--dorado);
}

.card.service { position: relative; }
.card.service .num {
  display: block;
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .1em;
  color: var(--dorado-osc);
  margin-bottom: .7rem;
}
.card.service p { margin-bottom: 1.1em; }

.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.ticks li {
  position: relative;
  padding-left: 1.85rem;
  font-size: .95rem;
  color: var(--texto);
}
.ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .35em;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  background: var(--verde) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23FFFFFF' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round' d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E") center / 62% no-repeat;
}

/* --------------------------------------------------------- Feature ------ */

.feature-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 1rem + 3.5vw, 4.5rem);
  align-items: center;
}
.feature-media img {
  border-radius: var(--r-lg);
  box-shadow: var(--sombra);
}

/* La foto de "Quiénes somos" trae el fondo de la sección incorporado y se
   disuelve hacia abajo: sin marco ni sombra, para que sea parte de la página
   y no una foto pegada encima. */
#nosotros .feature-media img {
  border-radius: 0;
  box-shadow: none;
}
.feature-copy p { color: var(--texto-suave); }
.feature-copy .btn { margin-top: .6rem; }

.stars {
  color: var(--dorado);
  font-size: 1.5rem;
  letter-spacing: .18em;
  margin: .2rem 0 .9rem;
}

.feature-copy p.feature-note {
  border-left: 3px solid var(--dorado);
  padding-left: 1rem;
  font-weight: 600;
  color: var(--texto);
}

/* --------------------------------------------------------- Pasos -------- */

.steps {
  list-style: none;
  counter-reset: paso;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.steps-4 { grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
.steps li { position: relative; padding-top: .5rem; }
.step-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: 1.1rem;
  border-radius: 50%;
  background: var(--negro);
  color: var(--dorado-claro);
  font-size: 1.25rem;
  font-weight: 800;
}
.steps p { color: var(--texto-suave); margin: 0; }

/* --------------------------------------------------------- FAQ ---------- */

.faq { display: grid; gap: .7rem; }
.faq details {
  background: var(--blanco);
  border: 1px solid var(--gris-borde);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.faq details[open] { border-color: var(--dorado); }
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 1.05rem 3rem 1.05rem 1.25rem;
  font-weight: 700;
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  position: absolute;
  right: 1.25rem;
  top: 50%;
  width: 11px;
  height: 11px;
  margin-top: -6px;
  border-right: 2.5px solid var(--dorado-osc);
  border-bottom: 2.5px solid var(--dorado-osc);
  transform: rotate(45deg);
  transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq details > div { padding: 0 1.25rem 1.2rem; color: var(--texto-suave); }

/* --------------------------------------------------------- CTA final ---- */

.cta-final {
  position: relative;
  background: var(--negro);
  color: var(--blanco);
  text-align: center;
  padding: var(--pad-y) 0;
  overflow: hidden;
}
.cta-final::before {
  content: "";
  position: absolute;
  inset: 20% -10% -60% -10%;
  background: radial-gradient(circle at 50% 0%, rgba(196, 144, 44, .2), transparent 60%);
  pointer-events: none;
}
.cta-final .wrap { position: relative; }
.cta-final h2 { max-width: 18ch; margin-inline: auto; }
.cta-final > .wrap > p {
  color: rgba(255, 255, 255, .78);
  font-size: var(--t-lead);
  max-width: 48ch;
  margin: 0 auto 2rem;
}
.cta-note {
  margin-top: 1.2rem !important;
  font-size: .9rem;
  color: rgba(255, 255, 255, .55) !important;
}

/* ----------------------------------------------------------- Mapa ------- */

.mapa-marco {
  aspect-ratio: 16 / 7;
  min-height: 320px;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--gris-borde);
  box-shadow: var(--sombra);
  background: var(--gris-borde);
}
.mapa-marco iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.mapa-btn { margin-top: 1.5rem; }

@media (max-width: 720px) {
  .mapa-marco { aspect-ratio: 4 / 5; min-height: 0; border-radius: var(--r-md); }
  .mapa-btn { width: 100%; }
}

/* --------------------------------------------------------- Footer ------- */

.site-footer {
  background: var(--negro-2);
  color: var(--texto-claro);
  padding: clamp(2.5rem, 1.5rem + 3vw, 4rem) 0 1.5rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 2.5rem;
}
.footer-tag { margin-top: 1rem; max-width: 34ch; font-size: .95rem; }
.footer-col h3 {
  color: var(--blanco);
  font-size: .8rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.footer-col a {
  display: block;
  text-decoration: none;
  font-size: .95rem;
  padding: .28rem 0;
  transition: color .15s ease;
}
.footer-col a:hover { color: var(--dorado-claro); }
/* Contacto del pie: icono + dato, todos con la misma altura y separación. */
.footer-col a.con {
  display: flex;
  align-items: center;
  gap: .6rem;
  overflow-wrap: anywhere;
}
.con-ico {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--dorado);
  transition: color .15s ease;
}
.footer-col a.con:hover .con-ico { color: var(--dorado-claro); }

.footer-zone { margin-top: .8rem; font-size: .95rem; }
.footer-bottom {
  margin-top: 2.5rem;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(255, 255, 255, .09);
  font-size: .86rem;
  color: rgba(255, 255, 255, .42);
}
.footer-bottom p { margin: 0; }

/* --------------------------------------------------------- WhatsApp ----- */

.wa-float {
  position: fixed;
  right: clamp(.9rem, 2vw, 1.6rem);
  bottom: clamp(.9rem, 2vw, 1.6rem);
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .85rem 1.3rem;
  border-radius: 999px;
  background: var(--wa);
  color: #06301A;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 12px 28px -8px rgba(37, 211, 102, .65);
  transition: transform .18s ease, background-color .18s ease;
}
.wa-float:hover { transform: translateY(-3px); background: var(--wa-osc); color: #fff; }
.wa-float svg { width: 24px; height: 24px; flex: none; }

/* ------------------------------------------- Fotos sobre fondo oscuro ---- */

/* Las fotos del hero y de reseñas son escenas oscuras que antes se recortaban
   contra el fondo con un filete y una sombra negra que no se veía. Ahora se
   apoyan sobre un halo dorado —la luz de la propia página— y sus bordes se
   difuminan, para que se fundan con la sección en lugar de flotar encima. */

.hero-media,
#resenas .feature-media {
  position: relative;
  isolation: isolate;
}

.hero-media::before,
#resenas .feature-media::before {
  content: "";
  position: absolute;
  inset: -9% -7%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(196, 144, 44, .26), rgba(196, 144, 44, 0) 74%);
  filter: blur(26px);
  pointer-events: none;
}

.hero-media img,
#resenas .feature-media img {
  box-shadow: none;
  border: 0;
}

/* La foto del hero no es una tarjeta: no tiene marco, ni fondo, ni esquinas
   redondeadas, ni sombra. Se disuelve por los cuatro lados hasta desaparecer
   contra el negro de la sección.

   La máscara son tres capas que se cruzan (mask-composite: intersect):
     1. los laterales, con el lado del texto más difuminado que el otro;
     2. arriba y abajo, con el borde de abajo entregado desde la mitad;
     3. un óvalo que redondea el conjunto y borra las cuatro esquinas, que
        es lo que delataba el rectángulo.
   El centro —la cara, las manos, el celular— queda intacto: las tres capas
   son opacas ahí.

   El valor va más abajo, después del bloque @supports que arma la máscara:
   ese bloque define --difuminado sobre la propia imagen, así que uno puesto
   acá arriba no llegaría nunca. */

.hero-media img {
  border-radius: 0;
  border: 0;
  background: none;
  /* Misma temperatura que el resto de la página, sin apagar los rostros. */
  filter: saturate(1.06) contrast(1.04) brightness(.97) sepia(.07) hue-rotate(-6deg);
  /* Capa de color por dentro del propio borde: negro abajo y arriba, verde de
     un lado y dorado del otro. Al ser sombras interiores, la máscara también
     se las lleva, así que se funden igual que la imagen. */
  box-shadow:
    inset 0 -90px 70px -46px rgba(11, 18, 14, .92),
    inset 0  70px 60px -46px rgba(11, 18, 14, .7),
    inset  70px 0 60px -50px rgba(30, 96, 50, .5),
    inset -70px 0 60px -50px rgba(196, 144, 44, .38);
}

/* Las luces del fondo del hero siguen por detrás de la foto: dorada arriba a
   la derecha, verde abajo a la izquierda, bien desenfocadas y desbordando la
   imagen, para que fondo y foto compartan la misma atmósfera. */
.hero-media::before {
  inset: -20% -16% -26%;
  background:
    radial-gradient(closest-side, rgba(196, 144, 44, .3), rgba(196, 144, 44, 0) 76%),
    radial-gradient(42% 38% at 82% 14%, rgba(220, 169, 60, .26), transparent 72%),
    radial-gradient(50% 44% at 16% 86%, rgba(30, 96, 50, .34), transparent 74%);
  filter: blur(34px);
}

/* Difuminado de los cuatro bordes. Si el navegador no soporta máscaras
   compuestas, la imagen queda con las esquinas redondeadas de siempre. */
@supports ((mask-composite: intersect) or (-webkit-mask-composite: source-in)) {
  .hero-media img,
  #resenas .feature-media img {
    --difuminado:
      linear-gradient(to right,  rgba(0, 0, 0, 0), #000 4%, #000 96%, rgba(0, 0, 0, 0)),
      linear-gradient(to bottom, rgba(0, 0, 0, 0), #000 4%, #000 96%, rgba(0, 0, 0, 0));
    -webkit-mask-image: var(--difuminado);
            mask-image: var(--difuminado);
    -webkit-mask-composite: source-in;
            mask-composite: intersect;
  }

  /* La del hero se disuelve mucho más que la de reseñas. Va acá, y no en
     .hero-media, porque la regla de arriba fija la variable en la imagen. */
  .hero-media img {
    --difuminado:
      linear-gradient(to right,  rgba(0, 0, 0, 0), #000 22%, #000 86%, rgba(0, 0, 0, 0)),
      linear-gradient(to bottom, rgba(0, 0, 0, 0), #000 12%, #000 52%, rgba(0, 0, 0, .55) 82%, rgba(0, 0, 0, 0)),
      radial-gradient(116% 96% at 50% 40%, #000 42%, rgba(0, 0, 0, .6) 68%, rgba(0, 0, 0, 0) 92%);
  }
}

/* --------------------------------- Reseñas: banda oscura de la marca ----- */

/* La foto es una escena cálida y oscura; sobre blanco se leía como un recorte.
   La sección pasa al negro de marca para que la imagen le pertenezca, y de
   paso el bloque de reputación gana el peso que le corresponde. */

#resenas {
  background: var(--negro);
  color: var(--blanco);
  overflow: hidden;
}
#resenas h2 { color: var(--blanco); }
#resenas .feature-copy p { color: rgba(255, 255, 255, .78); }
#resenas .feature-copy p.eyebrow { color: var(--dorado-claro); }
#resenas .stars { color: var(--dorado-claro); }
#resenas .feature-copy p.feature-note {
  color: var(--blanco);
  border-left-color: var(--dorado-claro);
}

/* --------------------------------------------------------- Reveal ------- */

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal.is-visible { opacity: 1; transform: none; }

/* --------------------------------------------------------- Responsive --- */

@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-media { max-width: 560px; margin-top: .5rem; }
  .lead { max-width: none; }
  .feature-grid { grid-template-columns: 1fr; }
  .feature-media { order: -1; max-width: 620px; margin-inline: auto; }
  .grid-3, .steps { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 1040px) {
  .nav-toggle { display: flex; }
  .nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--negro);
    padding: .5rem 1.25rem 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    box-shadow: 0 18px 30px -18px rgba(0, 0, 0, .8);
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
  }
  .nav.is-open { opacity: 1; visibility: visible; transform: none; }
  .nav > a {
    padding: .9rem .25rem;
    font-size: 1.05rem;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
  }
  .nav .lang {
    padding: 1rem .25rem;
    gap: .5rem;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
  }
  .nav .lang-btn {
    font-size: 1rem;
    padding: .45rem .7rem;
    border: 1px solid rgba(255, 255, 255, .18);
  }
  .nav .lang-btn.is-active {
    border-color: var(--dorado-claro);
  }
  .nav .lang-sep { display: none; }
  .nav .nav-cta {
    margin-top: 1.1rem;
    border-bottom: 0;
    padding: .85rem 1.15rem;
    justify-content: center;
  }
}

@media (max-width: 720px) {
  .grid-2, .grid-3, .steps { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .hero-actions .btn { width: 100%; }
  .wa-float { padding: .85rem; }
  .wa-float-label { display: none; }
}

/* --------------------------------------------------- Nuestros trabajos -- */

/* Banda oscura entre "Quiénes somos" (crema) y "Cómo trabajamos" (blanco).
   Cada trabajo es una fila: logo, qué es en una línea y el botón que abre el
   sitio. Nada de capturas: el logo se reconoce de un vistazo. */

.trabajos {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(78% 60% at 10% 0%, rgba(30, 96, 50, .26), transparent 62%),
    radial-gradient(70% 55% at 92% 100%, rgba(196, 144, 44, .2), transparent 60%),
    var(--negro);
  color: var(--blanco);
}

/* Retícula tenue: da el aire técnico sin ensuciar el fondo. */
.trabajos::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(120% 92% at 50% 18%, #000 28%, transparent 76%);
          mask-image: radial-gradient(120% 92% at 50% 18%, #000 28%, transparent 76%);
  pointer-events: none;
}

.trabajos .wrap { position: relative; z-index: 1; }
.trabajos h2, .trabajos h3 { color: var(--blanco); }
.trabajos .eyebrow { color: var(--dorado-claro); }
.trabajos .section-sub { color: rgba(255, 255, 255, .78); }

/* Una lista angosta, alineada con el título: se lee de arriba abajo como un
   índice. */
.trabajos-lista {
  list-style: none;
  max-width: 880px;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .8rem;
}

.trabajo {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.3rem;
  padding: .85rem 1.1rem .85rem .85rem;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--r-lg);
  background: linear-gradient(158deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02));
  box-shadow: 0 18px 40px -28px rgba(0, 0, 0, .95);
  transition: transform .32s cubic-bezier(.2, .7, .3, 1), box-shadow .32s ease, border-color .32s ease;
}

/* El resplandor dorado y verde de la marca al pasar el cursor. También al
   llegar con el teclado, para que el foco no quede sin señal. */
.trabajo:hover,
.trabajo:focus-within {
  transform: translateY(-3px);
  border-color: rgba(220, 169, 60, .5);
  box-shadow:
    0 28px 50px -30px rgba(0, 0, 0, .95),
    0 0 30px -8px rgba(196, 144, 44, .4),
    0 0 50px -14px rgba(70, 169, 106, .35);
}

/* Todos los logos en una caja del mismo tamaño, así la columna queda pareja
   aunque unos sean redondos y otros apaisados. */
.trabajo-logo {
  --logo-h: 58px;
  display: grid;
  place-items: center;
  height: 80px;
  padding: 0 .6rem;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 12px;
  background: radial-gradient(120% 120% at 30% 0%, rgba(255, 255, 255, .07), rgba(0, 0, 0, .25));
}
/* Alto en píxeles y no en %: dentro de la grilla el porcentaje no tiene de
   dónde medirse y el logo redondo de Antojos se salía de la caja. */
.trabajo-logo img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: var(--logo-h);
  object-fit: contain;
}
/* Las letras del CeR pesan mucho más que un logo apaisado: va más bajo para
   que los cinco se vean del mismo tamaño. */
.trabajo-logo-cer { --logo-h: 36px; }
/* El de Antojos es un círculo: ocupa poco, así que puede llenar la caja. */
.trabajo-logo-redondo { --logo-h: 68px; }

.trabajo-texto h3 {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: 1.1rem;
  margin-bottom: .2em;
}
.trabajo-texto p {
  margin: 0;
  color: rgba(255, 255, 255, .72);
  font-size: .9rem;
  line-height: 1.5;
}
/* Bandera junto al nombre: dice de un vistazo para dónde se hizo el trabajo. */
.trabajo-texto .bandera {
  width: 20px;
  height: 14px;
  flex: none;
  border-radius: 2px;
}

.btn-ver {
  --btn-fg: var(--dorado-claro);
  border-color: rgba(220, 169, 60, .45);
  padding: .55rem 1.1rem;
  font-size: .88rem;
  white-space: nowrap;
}
.btn-ver:hover {
  --btn-bg: var(--dorado);
  --btn-fg: var(--negro);
  border-color: var(--dorado);
}
.ico-sale { width: 16px; height: 16px; flex: none; }

/* ------------------------------------------ Chinchetas de Google Maps ---- */

/* Refuerzan el servicio de posicionamiento en el mapa. Son decorativas: van
   detrás del contenido, no reciben el ratón y se apoyan en un halo y una
   sombra que se quedan quietas mientras la chincheta flota. */

.pin {
  position: absolute;
  z-index: 0;
  line-height: 0;
  pointer-events: none;
}
.pin svg {
  width: 100%;
  height: auto;
  overflow: visible;
  filter:
    drop-shadow(0 18px 20px rgba(0, 0, 0, .5))
    drop-shadow(0 0 24px rgba(196, 144, 44, .3));
  animation: pin-flota 12s ease-in-out infinite;
  will-change: transform;
}

/* Halo: la luz de la propia página, para que no parezca pegada encima. */
.pin::before {
  content: "";
  position: absolute;
  inset: -46% -52% -28%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side,
    rgba(196, 144, 44, .32), rgba(70, 169, 106, .12) 56%, transparent 78%);
  filter: blur(20px);
}

/* Sombra de apoyo: se queda en el piso y se achica cuando la chincheta sube. */
.pin::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 2%;
  width: 46%;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .65), transparent 74%);
  filter: blur(5px);
  animation: pin-sombra 12s ease-in-out infinite;
}

@keyframes pin-flota {
  0%, 100% { transform: perspective(700px) rotate3d(1, .3, 0,  0deg) translate3d(0,   0, 0); }
  50%      { transform: perspective(700px) rotate3d(1, .3, 0, 9deg) translate3d(0, -15px, 0); }
}
@keyframes pin-sombra {
  0%, 100% { opacity: .5; transform: translateX(-50%) scale(1); }
  50%      { opacity: .28; transform: translateX(-50%) scale(.8); }
}

/* Colocación: siempre sobre zonas vacías de la sección. */
/* Arriba a la derecha del hero, asomando por encima del borde superior de la
   foto —que ahí ya es transparente—, así queda dentro de la composición sin
   tapar nada. */
.pin-hero {
  left: auto;
  right: clamp(8px, 3.5vw, 62px);
  top: clamp(6px, 1.6vw, 26px);
  width: clamp(78px, 7.5vw, 116px);
  opacity: .92;
}
.pin-trabajos {
  right: clamp(-12px, 3vw, 68px);
  top: clamp(10px, 3.5vw, 62px);
  width: clamp(66px, 6.5vw, 104px);
  opacity: .85;
}
.pin-trabajos svg,
.pin-trabajos::after { animation-duration: 15s; animation-delay: -4.5s; }

/* ------------------------------- Nuestros trabajos: pantallas chicas ----- */

@media (max-width: 980px) {
  /* El hero pasa a una sola columna y la foto ya no deja pasillo: la
     chincheta se va al aire libre del ángulo inferior derecho, que queda
     vacío con la foto a la izquierda o centrada. */
  /* Una sola columna: el ángulo superior derecho queda libre porque el
     antetítulo y el titular no llegan hasta el borde. */
  .pin-hero {
    left: auto;
    right: clamp(8px, 2.5vw, 34px);
    top: clamp(2px, 1vw, 14px);
    bottom: auto;
    width: clamp(58px, 7.5vw, 84px);
  }

  /* La lista ocupa todo el ancho y abajo rozaba la última fila: la chincheta
     acompaña al título, en el aire que deja a su derecha. */
  .pin-trabajos { top: 30px; bottom: auto; right: 18px; width: 62px; opacity: .6; }
}

/* En celular el botón baja a su propia línea, a lo ancho: es el blanco más
   fácil de tocar y el logo y el texto conservan todo el ancho. */
@media (max-width: 560px) {
  .trabajo {
    grid-template-columns: 96px minmax(0, 1fr);
    gap: .8rem 1rem;
    padding: .8rem;
  }
  .trabajo-logo { --logo-h: 48px; height: 64px; padding: 0 .45rem; }
  .trabajo-logo-cer { --logo-h: 28px; }
  .trabajo-logo-redondo { --logo-h: 56px; }
  .trabajo-texto h3 { font-size: 1.02rem; }
  .trabajo-texto p { font-size: .86rem; }
  .trabajo .btn-ver { grid-column: 1 / -1; justify-content: center; }
}

@media (max-width: 720px) {
  /* En celular el antetítulo arranca recién a los 48 px del borde: la
     chincheta entra justo encima, chiquita, sin pisar una letra. */
  .pin-hero {
    left: auto;
    right: 10px;
    top: 2px;
    bottom: auto;
    width: 38px;
    margin-left: 0;
    opacity: .85;
  }

  /* La cinta, un poco más lenta. */
  .cinta-izq { animation-duration: 130s; }
  .cinta-der { animation-duration: 165s; }
  .chips-cinta { gap: 1.7rem; padding-right: 1.7rem; }
  .chips-cinta li::after { right: -.99rem; }
  /* Abajo no entra entera —la última tarjeta llega casi al borde—, así que
     en celular acompaña al título, en el aire libre de la derecha. */
  .pin-trabajos { width: 52px; top: 34px; bottom: auto; right: 12px; opacity: .55; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  /* Nada flota ni gira si el visitante pidió menos movimiento. */
  .pin svg, .pin::after { animation: none; }
  /* La cinta se detiene y las palabras se reparten en varias líneas, sin
     las copias que solo servían para el giro. */
  .cinta {
    -webkit-mask-image: none;
            mask-image: none;
    padding-inline: 1.25rem;
  }
  .cinta-pista { animation: none; width: auto; flex-wrap: wrap; justify-content: center; }
  .cinta-pista .chips-cinta[aria-hidden="true"] { display: none; }
  .chips-cinta { flex-wrap: wrap; justify-content: center; gap: .55rem; padding-right: 0; }
  .chips-cinta li::after { display: none; }
  .trabajo { transform: none; }
}

@media print {
  .site-header, .wa-float, .nav-toggle { display: none !important; }
  body { color: #000; }
}