:root {
  --negro: #111312;
  --negro-2: #191c1a;
  --blanco: #fff;
  --hueso: #f4f6f2;
  --gris: #68716b;
  --gris-claro: #e3e7e2;
  --verde: #4e9b62;
  --verde-2: #76b887;
  --sombra: 0 22px 60px rgba(17, 19, 18, .10);
  --radio: 24px;
  --max: 1180px;
}

* {
  box-sizing: border-box
}

html {
  scroll-behavior: smooth
}

body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--negro);
  background: var(--blanco);
  line-height: 1.6
}

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

a {
  color: inherit;
  text-decoration: none
}

.contenedor {
  width: min(var(--max), calc(100% - 40px));
  margin: auto
}

.cabecera {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(17, 19, 18, .08)
}

.cabecera-inner {
  height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px
}

.logo {
  width: 65px;
  height: auto;
}

.menu-principal {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .94rem;
  font-weight: 650
}

.menu-principal a {
  padding: 10px 13px;
  border-radius: 12px
}

.menu-principal a:hover,
.menu-principal .activo {
  background: var(--hueso)
}

.menu-principal .menu-cta {
  background: var(--negro);
  color: #fff;
  padding: 11px 18px
}

.menu-principal .menu-cta:hover {
  background: var(--verde)
}

.boton-menu {
  display: none;
  border: 0;
  background: var(--negro);
  color: #fff;
  border-radius: 12px;
  padding: 15px 22px;
  font-size: 1.2rem
}

.menu-movil {
  display: none
}

.hero {
  background: var(--negro);
  color: #fff;
  overflow: hidden;
  position: relative
}

.hero:before {
  content: "";
  position: absolute;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: rgba(78, 155, 98, .20);
  filter: blur(30px);
  right: -170px;
  top: -190px
}

.hero-grid {
  min-height: 680px;
  display: grid;
  grid-template-columns: 1.03fr .97fr;
  align-items: center;
  gap: 70px;
  position: relative
}

.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  padding: 7px 12px;
  color: #dbe5dc;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 750
}

.etiqueta:before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--verde)
}

.hero h1 {
  font-size: clamp(3.1rem, 6vw, 5.8rem);
  line-height: .98;
  letter-spacing: -.065em;
  margin: 24px 0
}

.hero h1 span {
  color: var(--verde-2)
}

.hero-texto {
  font-size: 1.18rem;
  color: #c7cdc8;
  max-width: 650px
}

.hero-botones {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 32px
}

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 14px;
  padding: 13px 19px;
  font-weight: 750;
  border: 1px solid transparent;
  transition: .22s ease
}

.boton:hover {
  transform: translateY(-2px)
}

.boton-verde {
  background: var(--verde);
  color: #fff
}

.boton-verde:hover {
  background: #63ac75
}

.boton-outline {
  border-color: rgba(255, 255, 255, .25);
  color: #fff
}

.boton-outline:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, .05)
}

.hero-visual {
  position: relative
}

.hero-card {
  background: #202421;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 32px;
  padding: 24px;
  box-shadow: 0 35px 80px rgba(0, 0, 0, .30);
  transform: rotate(1deg)
}

.hero-card img {
  border-radius: 22px;
  width: 100%
}

.hero-float {
  position: absolute;
  right: -25px;
  bottom: -25px;
  background: #fff;
  color: var(--negro);
  padding: 18px 20px;
  border-radius: 18px;
  box-shadow: var(--sombra);
  min-width: 210px
}

.hero-float strong {
  font-size: 1.5rem;
  display: block
}

.hero-float small {
  color: var(--gris)
}

.seccion {
  padding: 105px 0
}

.seccion-suave {
  background: var(--hueso)
}

.cabecera-seccion {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 35px;
  margin-bottom: 46px
}

.cabecera-seccion h2 {
  font-size: clamp(2.2rem, 4vw, 4rem);
  line-height: 1;
  letter-spacing: -.05em;
  margin: 12px 0 0;
  max-width: 760px
}

.cabecera-seccion p {
  color: var(--gris);
  max-width: 520px;
  margin: 0
}

.etiqueta-negra {
  display: inline-block;
  background: var(--negro);
  color: #fff;
  padding: 7px 11px;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase
}

.grid-soluciones {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px
}

.solucion {
  min-height: 270px;
  background: #fff;
  border: 1px solid var(--gris-claro);
  border-radius: var(--radio);
  padding: 28px;
  position: relative;
  overflow: hidden;
  transition: .25s ease
}

.solucion:hover {
  transform: translateY(-5px);
  box-shadow: var(--sombra);
  border-color: #cdd5ce
}

.solucion:nth-child(1),
.solucion:nth-child(2) {
  grid-column: span 6
}

.solucion:nth-child(n+3) {
  grid-column: span 3
}

.solucion-destacada {
  background: var(--negro);
  color: #fff;
  border-color: var(--negro)
}

.solucion-destacada .solucion-texto {
  color: #bac3bc
}

.solucion-tipo {
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--verde)
}

.solucion h3 {
  font-size: 1.75rem;
  letter-spacing: -.035em;
  margin: 42px 0 8px
}

.solucion-texto {
  color: var(--gris);
  max-width: 310px
}

.solucion-flecha {
  position: absolute;
  right: 22px;
  bottom: 20px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--hueso);
  font-size: 1.2rem
}

.solucion-destacada .solucion-flecha {
  background: var(--verde);
  color: #fff
}

.numero {
  font-size: .8rem;
  color: #8a928c;
  font-weight: 800
}

.mosaico {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 18px;
  align-items: stretch
}

.mosaico-card {
  border-radius: var(--radio);
  overflow: hidden;
  position: relative;
  min-height: 420px
}

.mosaico-card img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.mosaico-overlay {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 22px;
  background: rgba(17, 19, 18, .88);
  color: #fff;
  border-radius: 18px;
  padding: 20px
}

.mosaico-overlay h3 {
  margin: 0 0 5px;
  font-size: 1.55rem
}

.mosaico-overlay p {
  margin: 0;
  color: #c7cdc8
}

.lista-bloques {
  display: grid;
  gap: 14px
}

.bloque {
  background: #fff;
  border: 1px solid var(--gris-claro);
  border-radius: 20px;
  padding: 24px;
  display: flex;
  gap: 20px;
  align-items: flex-start
}

.bloque strong {
  display: block;
  font-size: 1.1rem
}

.bloque p {
  margin: 4px 0 0;
  color: var(--gris)
}

.bloque .icono {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--hueso);
  display: grid;
  place-items: center;
  font-weight: 900;
  color: var(--verde);
  flex: none
}

.areas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px
}

.area {
  padding: 34px;
  border-radius: var(--radio);
  background: var(--negro);
  color: #fff;
  min-height: 300px;
  position: relative
}

.area:nth-child(2) {
  background: #1f2721
}

.area:nth-child(3) {
  background: var(--verde)
}

.area .numero {
  color: #a9b3aa
}

.area h3 {
  font-size: 2rem;
  letter-spacing: -.04em;
  margin: 60px 0 10px
}

.area p {
  color: #cbd1cc
}

.area:nth-child(3) p {
  color: #edf7ef
}

.cta-final {
  padding: 90px 0;
  background: var(--negro);
  color: #fff
}

.cta-final-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px
}

.cta-final h2 {
  font-size: clamp(2.4rem, 5vw, 4.7rem);
  line-height: 1;
  letter-spacing: -.055em;
  margin: 0;
  max-width: 720px
}

.cta-final p {
  color: #bbc4bd;
  max-width: 580px
}

.pie {
  background: #0b0d0c;
  color: #fff;
  padding: 65px 0 25px
}

.pie-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr;
  gap: 45px
}

.logo-pie {
    display: block;
    width: 190px;
    height: auto;
    max-width: 100%;
    filter: none;
    opacity: 1;
}

.pie h4 {
  margin: 0 0 14px;
  color: #fff
}

.pie a,
.pie p {
  color: #aeb7b0;
  font-size: .92rem
}

.pie a:hover {
  color: #fff
}

.pie-links {
  display: grid;
  gap: 7px
}

.copyright {
  border-top: 1px solid rgba(255, 255, 255, .1);
  margin-top: 45px;
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  color: #7e8780;
  font-size: .82rem
}

.cookies {
  position: fixed;
  z-index: 9999;
  left: 18px;
  right: 18px;
  bottom: 18px;
  background: #111312;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 20px;
  padding: 18px 20px;
  box-shadow: 0 20px 70px rgba(0, 0, 0, .35);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  pointer-events: auto
}

.cookies.oculto {
  display: none !important;
  pointer-events: none !important
}

.cookies p {
  margin: 0;
  color: #c7cdc8;
  font-size: .88rem
}

.cookies a {
  color: #fff;
  text-decoration: underline
}

.cookies-botones {
  display: flex;
  gap: 8px;
  flex: none
}

.cookies button {
  border: 0;
  border-radius: 11px;
  padding: 10px 15px;
  font-weight: 750;
  cursor: pointer
}

.cookies .aceptar {
  background: var(--verde);
  color: #fff
}

.cookies .rechazar {
  background: #fff;
  color: #111
}

.hero-interior {
  padding: 100px 0 85px;
  background: var(--negro);
  color: #fff
}

.hero-interior h1 {
  font-size: clamp(2.8rem, 6vw, 5rem);
  line-height: 1;
  letter-spacing: -.06em;
  max-width: 850px;
  margin: 18px 0
}

.hero-interior p {
  color: #c4cbc5;
  font-size: 1.12rem;
  max-width: 720px
}

.producto-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 55px;
  align-items: center
}

.producto-imagen {
  background: var(--hueso);
  padding: 16px;
  border-radius: 28px
}

.producto-imagen img {
  border-radius: 20px;
  width: 100%
}

.producto-contenido h2 {
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 1.03;
  letter-spacing: -.05em
}

.producto-contenido p {
  color: var(--gris)
}

.etiquetas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px
}

.badge {
  padding: 7px 11px;
  border-radius: 999px;
  background: var(--hueso);
  font-size: .8rem;
  font-weight: 750
}

.ficha {
  background: #fff;
  border: 1px solid var(--gris-claro);
  border-radius: var(--radio);
  padding: 30px
}

.ficha h3 {
  margin-top: 0
}

.ficha ul {
  padding-left: 20px;
  color: var(--gris)
}

.fichas-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px
}

.tabla {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border-radius: 18px;
  overflow: hidden
}

.tabla th,
.tabla td {
  text-align: left;
  padding: 15px;
  border-bottom: 1px solid var(--gris-claro)
}

.tabla th {
  background: var(--hueso)
}

.formulario {
  display: grid;
  gap: 14px
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px
}

.campo {
  display: grid;
  gap: 7px
}

.campo label {
  font-weight: 700;
  font-size: .9rem
}

.campo input,
.campo textarea,
.campo select {
  font: inherit;
  border: 1px solid #d5dbd5;
  border-radius: 13px;
  padding: 12px 13px;
  outline: none;
  background: #fff
}

.campo input:focus,
.campo textarea:focus,
.campo select:focus {
  border-color: var(--verde);
  box-shadow: 0 0 0 3px rgba(78, 155, 98, .12)
}

.campo textarea {
  min-height: 160px;
  resize: vertical
}

.checkbox {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  color: var(--gris);
  font-size: .88rem
}

.estado {
  padding: 14px 16px;
  border-radius: 14px;
  background: #e9f5eb;
  color: #285e35;
  margin-bottom: 18px
}

.estado.error {
  background: #f8e9e9;
  color: #7a2929
}

.ancla {
  scroll-margin-top: 100px
}

.rejilla-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px
}

@media(max-width:900px) {
  .menu-principal {
    display: none
  }

  .boton-menu {
    display: block
  }

  .menu-movil {
    display: none;
    padding: 12px 0 20px
  }

  .menu-movil.menu-abierto {
    display: grid;
    gap: 6px
  }

  .menu-movil a {
    padding: 12px;
    border-radius: 12px
  }

  .menu-movil a:hover {
    background: var(--hueso)
  }

  .hero-grid,
  .producto-grid,
  .mosaico,
  .rejilla-2 {
    grid-template-columns: 1fr
  }

  .hero-grid {
    padding: 80px 0
  }

  .hero-visual {
    max-width: 700px;
    margin: auto
  }

  .solucion:nth-child(n) {
    grid-column: span 6
  }

  .areas {
    grid-template-columns: 1fr
  }

  .fichas-grid {
    grid-template-columns: 1fr
  }

  .pie-grid {
    grid-template-columns: 1fr 1fr
  }

  .cta-final-inner {
    flex-direction: column;
    align-items: flex-start
  }

  .cabecera-seccion {
    align-items: flex-start;
    flex-direction: column
  }
}

@media(max-width:600px) {
  .contenedor {
    width: min(var(--max), calc(100% - 28px))
  }

  .cabecera-inner {
    height: 70px
  }

  .logo {
    width: 125px
  }

  .hero h1 {
    font-size: 3rem
  }

  .hero-grid {
    min-height: auto;
    padding: 65px 0 85px
  }

  .solucion:nth-child(n) {
    grid-column: span 12
  }

  .seccion {
    padding: 75px 0
  }

  .areas {
    grid-template-columns: 1fr
  }

  .pie-grid {
    grid-template-columns: 1fr
  }

  .copyright {
    flex-direction: column
  }

  .cookies {
    left: 10px;
    right: 10px;
    bottom: 10px;
    align-items: stretch;
    flex-direction: column
  }

  .cookies-botones {
    justify-content: flex-end
  }

  .form-grid {
    grid-template-columns: 1fr
  }

  .hero-float {
    position: relative;
    right: auto;
    bottom: auto;
    margin: 15px 0 0
  }

  .producto-grid {
    gap: 30px
  }
}

.producto-real-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch
}

.producto-real-grid img {
  width: 100%;
  height: 300px;
  object-fit: contain;
  background: #fff;
  border-radius: 22px;
  padding: 18px;
  box-shadow: 0 12px 35px rgba(0, 0, 0, .08)
}

.producto-real-grid img:nth-child(3) {
  object-fit: cover;
  padding: 0
}

.producto-imagen>img {
  width: 100%;
  max-height: 560px;
  object-fit: contain;
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, .08)
}

@media(max-width:800px) {
  .producto-real-grid {
    grid-template-columns: 1fr
  }

  .producto-real-grid img {
    height: 260px
  }
}


/* ==========================================================
   CORRECCIÓN FINAL DEL LOGO DE CABECERA
   ========================================================== */

.cabecera .cabecera-inner {
  min-height: 78px;
  height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cabecera .logo {
  width: 135px;
  height: 58px;
  max-width: 135px;
  object-fit: contain;
  object-position: left center;
  margin: 0;
  padding: 0;
  flex: 0 0 135px;
}

/* ==========================================================
   ÁGORA — SELECTOR DE CATEGORÍAS
   ========================================================== */

.agora-categorias {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0 auto 34px;
  padding: 7px;
  width: fit-content;
  max-width: 100%;
  background: var(--hueso);
  border: 1px solid var(--gris-claro);
  border-radius: 18px;
}

.agora-categoria {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--gris);
  padding: 12px 20px;
  border-radius: 13px;
  font: inherit;
  font-size: .9rem;
  font-weight: 800;
  cursor: pointer;
  transition: .2s ease;
}

.agora-categoria:hover {
  color: var(--negro);
  background: #fff;
}

.agora-categoria.activa {
  color: #fff;
  background: var(--negro);
  box-shadow: 0 8px 22px rgba(0,0,0,.12);
}

/* ==========================================================
   ÁGORA — GALERÍA
   ========================================================== */

.agora-galeria {
  position: relative;
  width: 100%;
}

.agora-galeria-marco {
  position: relative;
  width: 100%;
  height: 530px;
  overflow: hidden;
  border-radius: 28px;
  background: #fff;
  border: 1px solid var(--gris-claro);
  box-shadow: 0 18px 50px rgba(0,0,0,.08);
}

.agora-galeria-imagen {
  width: 100%;
  height: 100%;
  padding: 24px;
  object-fit: contain;
  display: block;
  opacity: 1;
  transition: opacity .18s ease, transform .25s ease;
}

.agora-flecha {
  position: absolute;
  top: 50%;
  z-index: 5;
  width: 50px;
  height: 50px;
  margin: 0;
  padding: 0;
  transform: translateY(-50%);
  border: 0;
  border-radius: 50%;
  background: var(--negro);
  color: #fff;
  font: inherit;
  font-size: 24px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
  transition: .2s ease;
}

.agora-flecha:hover {
  background: var(--verde);
  transform: translateY(-50%) scale(1.07);
}

.agora-flecha.anterior {
  left: 18px;
}

.agora-flecha.siguiente {
  right: 18px;
}

.agora-contador {
  position: absolute;
  left: 50%;
  bottom: 17px;
  z-index: 6;
  transform: translateX(-50%);
  padding: 7px 13px;
  border-radius: 999px;
  background: rgba(17,19,18,.88);
  color: #fff;
  font-size: .78rem;
  font-weight: 800;
  line-height: 1;
  backdrop-filter: blur(8px);
}

/* ==========================================================
   ÁGORA — MINIATURAS
   ========================================================== */

.agora-miniaturas {
  display: flex;
  justify-content: center;
  gap: 10px;
  overflow-x: auto;
  padding: 14px 3px 4px;
  scrollbar-width: thin;
}

.agora-miniatura {
  flex: 0 0 82px;
  width: 82px;
  height: 62px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  cursor: pointer;
  opacity: .72;
  transition: .2s ease;
}

.agora-miniatura img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.agora-miniatura:hover {
  opacity: 1;
  transform: translateY(-2px);
}

.agora-miniatura.activa {
  opacity: 1;
  border-color: var(--verde);
}

/* ==========================================================
   ÁGORA — INFORMACIÓN DE LA CATEGORÍA
   ========================================================== */

.agora-info {
  margin-top: 28px;
}

.agora-info h3 {
  margin: 0 0 8px;
  font-size: 1.8rem;
  letter-spacing: -.04em;
}

.agora-info p {
  margin: 0;
  color: var(--gris);
  max-width: 720px;
}

/* ==========================================================
   RESPONSIVE GALERÍA
   ========================================================== */

@media (max-width: 900px) {

  .cabecera .logo {
    width: 125px;
    height: 54px;
    max-width: 125px;
    flex-basis: 125px;
  }

  .agora-galeria-marco {
    height: 450px;
  }

}

@media (max-width: 600px) {

  .cabecera .cabecera-inner {
    height: 70px;
    min-height: 70px;
  }

  .cabecera .logo {
    width: 115px;
    height: 50px;
    max-width: 115px;
    flex-basis: 115px;
  }

  .agora-categorias {
    width: 100%;
    justify-content: flex-start;
    overflow-x: auto;
    flex-wrap: nowrap;
    border-radius: 15px;
    scrollbar-width: none;
  }

  .agora-categoria {
    flex: 0 0 auto;
    padding: 10px 15px;
    font-size: .82rem;
  }

  .agora-galeria-marco {
    height: 330px;
    border-radius: 20px;
  }

  .agora-galeria-imagen {
    padding: 12px;
  }

  .agora-flecha {
    width: 42px;
    height: 42px;
    font-size: 20px;
  }

  .agora-flecha.anterior {
    left: 9px;
  }

  .agora-flecha.siguiente {
    right: 9px;
  }

  .agora-miniatura {
    flex-basis: 70px;
    width: 70px;
    height: 54px;
  }

}
:root{--ink:#0d1110;--ink2:#151b18;--paper:#fff;--soft:#f4f7f4;--line:#dfe6e1;--muted:#65716a;--accent:#63b878;--accent2:#9ee2ad;--max:1180px;--r:24px;--shadow:0 24px 70px rgba(13,17,16,.12)}
body{background:var(--paper);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:-.01em}
.contenedor{width:min(var(--max),calc(100% - 40px))}
.cabecera{background:rgba(255,255,255,.88);backdrop-filter:blur(18px);box-shadow:0 1px 0 rgba(13,17,16,.06)}
.cabecera-inner{height:82px}.cabecera .logo{width:142px;height:58px;object-fit:contain}.menu-principal{gap:3px}.menu-principal a{transition:.2s ease}.menu-principal .menu-cta{padding:12px 18px;background:var(--ink);box-shadow:0 8px 24px rgba(13,17,16,.12)}
.hero{background:radial-gradient(circle at 85% 15%,rgba(99,184,120,.18),transparent 30%),linear-gradient(135deg,#0b0f0d,#151b18 60%,#0d1110);}
.hero-grid{min-height:700px;gap:60px}.hero h1{font-size:clamp(3.2rem,6.2vw,6.1rem);max-width:760px}.hero-texto{font-size:1.2rem;line-height:1.7}.etiqueta{background:rgba(255,255,255,.04)}
.boton{padding:14px 20px;border-radius:14px}.boton-verde{background:var(--accent);box-shadow:0 12px 30px rgba(99,184,120,.25)}.boton-verde:hover{background:#78ca8b}
.hero-visual{min-height:500px;display:grid;place-items:center}.hero-card{width:min(560px,100%);padding:16px;background:linear-gradient(145deg,rgba(255,255,255,.12),rgba(255,255,255,.03));border-radius:34px;transform:rotate(1deg)}
.hero-showcase{position:relative;width:100%;height:500px}.hero-showcase .shot{position:absolute;background:#fff;border:8px solid rgba(255,255,255,.08);border-radius:24px;box-shadow:0 30px 70px rgba(0,0,0,.35);overflow:hidden}.hero-showcase .shot img{width:100%;height:100%;object-fit:contain;padding:12px}.hero-showcase .shot-main{width:72%;height:68%;right:0;top:6%;background:#f7faf7}.hero-showcase .shot-left{width:43%;height:46%;left:0;bottom:5%;background:#f7faf7;z-index:2}.hero-showcase .shot-right{width:37%;height:34%;right:8%;bottom:0;background:#f7faf7;z-index:3}.hero-float{right:-10px;bottom:18px;min-width:220px}
.seccion{padding:112px 0}.seccion-suave{background:linear-gradient(180deg,#f5f8f5,#eef3ef)}.cabecera-seccion{margin-bottom:48px}.cabecera-seccion h2{font-size:clamp(2.3rem,4.5vw,4.4rem);line-height:.98}.cabecera-seccion p{font-size:1.02rem;line-height:1.75}
.grid-soluciones{gap:18px}.solucion{min-height:285px;border-radius:var(--r);padding:30px;border:1px solid var(--line);box-shadow:0 1px 0 rgba(13,17,16,.02);transition:.25s ease}.solucion:hover{transform:translateY(-7px);box-shadow:var(--shadow);border-color:#cbd6ce}.solucion h3{font-size:2rem;margin-top:48px}.solucion-flecha{width:46px;height:46px}.solucion-destacada{background:linear-gradient(145deg,#101512,#1c261f)}
.mosaico-card{min-height:470px;box-shadow:var(--shadow)}.mosaico-overlay{background:linear-gradient(180deg,transparent,rgba(13,17,16,.9));inset:auto 0 0;padding:70px 28px 28px;border-radius:0}.bloque{border-radius:20px;padding:24px;transition:.2s ease}.bloque:hover{transform:translateX(4px);box-shadow:0 12px 30px rgba(13,17,16,.06)}
.areas{gap:18px}.area{border-radius:var(--r);min-height:330px;padding:34px;background:linear-gradient(145deg,#101512,#1d2820)}.area:nth-child(2){background:linear-gradient(145deg,#17221b,#27352b)}.area:nth-child(3){background:linear-gradient(145deg,#4c9c61,#72bf82)}
.cta-final{background:radial-gradient(circle at 80% 20%,rgba(99,184,120,.18),transparent 35%),#0d1110;padding:100px 0}.cta-final-inner{gap:55px}.cta-final h2{font-size:clamp(2.5rem,5vw,5rem)}
.pie{padding:72px 0 25px;background:#080b0a}.logo-pie{width:150px;filter:brightness(0) invert(1);opacity:.96}.pie-grid{gap:50px}.pie h4{font-size:.82rem;text-transform:uppercase;letter-spacing:.1em}.pie a,.pie p{line-height:1.7}.copyright{margin-top:55px}
.hero-interior{padding:112px 0 92px;background:radial-gradient(circle at 80% 0,rgba(99,184,120,.16),transparent 32%),linear-gradient(135deg,#0b0f0d,#151b18);}.hero-interior h1{font-size:clamp(3rem,6vw,5.7rem)}.hero-interior p{font-size:1.2rem;line-height:1.7}.producto-imagen{padding:18px;border:1px solid var(--line);box-shadow:var(--shadow)}.producto-contenido h2{font-size:clamp(2.3rem,4vw,4rem)}.ficha{border-radius:var(--r);padding:30px;transition:.2s ease}.ficha:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.campo input,.campo textarea,.campo select{padding:14px 15px;border-radius:14px;border-color:#ccd7cf;transition:.2s ease}.campo input:focus,.campo textarea:focus,.campo select:focus{border-color:var(--accent);box-shadow:0 0 0 4px rgba(99,184,120,.12)}.checkbox a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}.estado{border:1px solid #cfe7d4}
.contacto-extra{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:24px}.contacto-chip{padding:18px;border:1px solid var(--line);border-radius:18px;background:var(--soft)}.contacto-chip small{display:block;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin-bottom:4px}
.trust-strip{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line)}.trust-item{background:#fff;padding:25px}.trust-item strong{display:block;font-size:1.05rem}.trust-item span{display:block;color:var(--muted);font-size:.9rem;margin-top:3px}
.sectores-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}.sector{padding:25px;border:1px solid var(--line);border-radius:20px;background:#fff}.sector b{font-size:1.05rem}.sector p{color:var(--muted);font-size:.9rem;margin:7px 0 0}
.faq-grid{display:grid;gap:12px}.faq-grid details{border:1px solid var(--line);border-radius:18px;padding:18px 20px;background:#fff}.faq-grid summary{cursor:pointer;font-weight:800}.faq-grid p{color:var(--muted);margin:12px 0 0}
@media(max-width:900px){.hero-grid{min-height:auto;padding:80px 0 90px}.hero-showcase{height:430px}.trust-grid{grid-template-columns:repeat(2,1fr)}.sectores-grid{grid-template-columns:repeat(2,1fr)}.contacto-extra{grid-template-columns:1fr}.pie-grid{grid-template-columns:1fr 1fr}.producto-grid,.mosaico,.rejilla-2{grid-template-columns:1fr}}
@media(max-width:600px){.contenedor{width:calc(100% - 28px)}.cabecera-inner{height:72px}.cabecera .logo{width:125px}.hero h1{font-size:3rem}.hero-showcase{height:330px}.hero-showcase .shot-main{width:74%;height:65%}.hero-showcase .shot-left{width:46%;height:43%}.hero-showcase .shot-right{width:40%;height:30%}.hero-float{position:absolute;right:0;bottom:-5px;min-width:190px}.seccion{padding:78px 0}.trust-grid{grid-template-columns:1fr}.sectores-grid{grid-template-columns:1fr}.pie-grid{grid-template-columns:1fr}.cta-final-inner{align-items:flex-start}.hero-interior{padding:85px 0 70px}.hero-interior h1{font-size:3rem}}

/* ==========================================================
   HERO V2 — COMPOSICIÓN LIMPIA SIN SUPERPOSICIONES
   ========================================================== */
.hero-grid{grid-template-columns:minmax(0,1fr) minmax(470px,.92fr);gap:72px;overflow:visible}
.hero-contenido{position:relative;z-index:2;max-width:700px}
.hero-visual{position:relative;z-index:1;min-width:0}
.hero-showcase{position:relative;width:100%;height:auto;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;gap:14px;padding:18px;border:1px solid rgba(255,255,255,.12);border-radius:32px;background:linear-gradient(145deg,rgba(255,255,255,.10),rgba(255,255,255,.035));box-shadow:0 34px 90px rgba(0,0,0,.34);overflow:visible}
.hero-product-main{grid-column:1 / -1;position:relative;min-height:360px;border-radius:22px;overflow:hidden;background:#f4f7f4;border:1px solid rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center}
.hero-product-main img{width:100%;height:100%;min-height:360px;object-fit:contain;padding:28px}
.hero-product-label{position:absolute;left:18px;top:18px;z-index:2;display:flex;flex-direction:column;gap:2px;padding:10px 13px;border-radius:13px;background:rgba(13,17,16,.9);color:#fff;box-shadow:0 10px 28px rgba(0,0,0,.16)}
.hero-product-label span{font-size:.67rem;text-transform:uppercase;letter-spacing:.09em;color:#aeb8b1;font-weight:800}
.hero-product-label b{font-size:.82rem;font-weight:750}
.hero-product-secondary{grid-column:1 / -1;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.hero-mini-card{min-width:0;display:grid;grid-template-columns:92px 1fr;gap:14px;align-items:center;padding:12px;border-radius:20px;background:#fff;color:var(--ink);border:1px solid rgba(255,255,255,.12);box-shadow:0 16px 35px rgba(0,0,0,.16)}
.hero-mini-image{height:76px;border-radius:14px;background:#f4f7f4;display:grid;place-items:center;overflow:hidden}
.hero-mini-image img{width:100%;height:100%;object-fit:contain;padding:7px}
.hero-mini-card small{display:block;text-transform:uppercase;letter-spacing:.1em;color:var(--accent);font-size:.65rem;font-weight:850;margin-bottom:3px}
.hero-mini-card strong{display:block;font-size:.95rem;line-height:1.2}
.hero-mini-dark{background:#17201b;color:#fff;border-color:rgba(255,255,255,.08)}
.hero-mini-dark .hero-mini-image{background:#fff}
.hero-mini-dark small{color:#8ed49c}
.hero-proof{grid-column:1 / -1;display:flex;align-items:center;gap:11px;padding:4px 3px 0;color:#dce4de}
.hero-proof-dot{width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 5px rgba(99,184,120,.12);flex:none}
.hero-proof strong{display:block;font-size:.86rem;line-height:1.2}
.hero-proof small{display:block;margin-top:2px;color:#96a29a;font-size:.73rem}
.hero-float,.hero-card{display:none}

@media(max-width:1050px){
  .hero-grid{grid-template-columns:minmax(0,1fr) minmax(400px,.9fr);gap:45px}
  .hero-showcase{padding:14px}
  .hero-product-main,.hero-product-main img{min-height:330px}
}
@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:45px}
  .hero-contenido{max-width:760px}
  .hero-visual{width:min(720px,100%);margin:0 auto}
  .hero-showcase{width:100%}
}
@media(max-width:600px){
  .hero-showcase{grid-template-columns:1fr;padding:10px;border-radius:24px;gap:10px}
  .hero-product-main{grid-column:1;min-height:285px;border-radius:18px}
  .hero-product-main img{min-height:285px;padding:24px 16px 18px}
  .hero-product-label{left:12px;top:12px;padding:8px 10px}
  .hero-product-label span{font-size:.58rem}
  .hero-product-label b{font-size:.72rem}
  .hero-product-secondary{grid-column:1;grid-template-columns:1fr;gap:10px}
  .hero-mini-card{grid-template-columns:76px 1fr;padding:9px;border-radius:17px}
  .hero-mini-image{height:64px}
  .hero-proof{grid-column:1;padding:3px 2px 2px}
  .hero-proof strong{font-size:.78rem}
  .hero-proof small{font-size:.68rem}
}

/* =========================================================
   HERO - SLIDER DE SOLUCIONES
   ========================================================= */

#heroImagen {
  transition:
    opacity 0.45s ease,
    transform 0.45s ease;
}

#heroProductoTipo,
#heroProductoNombre,
#heroMiniImagen1,
#heroMiniImagen2,
#heroMiniTipo1,
#heroMiniNombre1,
#heroMiniTipo2,
#heroMiniNombre2 {
  transition: opacity 0.35s ease;
}


/* Efecto al cambiar */

.hero-product-main img.cambiando {
  opacity: 0;
  transform: scale(0.97);
}


/* Imágenes de las tarjetas */

.hero-mini-image img {
  transition:
    opacity 0.35s ease,
    transform 0.35s ease;
}

.hero-mini-image img.cambiando {
  opacity: 0;
  transform: scale(0.94);
}


/* Evita que imágenes SVG o PNG deformen las tarjetas */

.hero-mini-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}


/* La imagen principal siempre se adapta */

.hero-product-main > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}


/* En pantallas pequeñas */

@media (max-width: 768px) {

  .hero-product-main {
    min-height: 320px;
  }

  .hero-mini-card {
    min-height: 130px;
  }

}