:root {
      --verde:       #AFCB07;
      --verde-hover: #94AC06;
      --gris-verde:  #97A180;
      --oscuro:      #36403B;
      --oscuro2:     #1a1f1c;
      --claro:       #E8EBE3;
      --blanco:      #FFFFFF;
      --texto:       #2a2a2a;
      --texto-suave: #5a5a5a;
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }

    body {
      font-family: 'Inter', sans-serif;
      color: var(--texto);
      background: var(--blanco);
      overflow-x: hidden;
    }

    h1,h2,h3,h4,h5 {
      font-family: 'Montserrat', sans-serif;
      font-weight: 700;
    }

    /* ============================
       NAVBAR — transparente sobre hero
    ============================ */
    /* Navbar flotante (ajuste 10/07): siempre visible, fondo oscuro
       semitransparente con desenfoque — no se pierde al hacer scroll */
    .navbar {
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 100;
      background: rgba(26,31,28,0.78); /* transparencia ligera (ajuste 12/07) */
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(8px);
      padding: 1rem 0;
      border-bottom: 1px solid rgba(255,255,255,0.08);
    }

    .navbar-brand {
      display: flex;
      align-items: center;
      gap: 10px;
      text-decoration: none;
    }

    .logo-cuadro {
      width: 40px; height: 40px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      border-radius: 3px;
      overflow: hidden;
    }

    .logo-cuadro .q1 { background: var(--verde); }
    .logo-cuadro .q2 { background: var(--gris-verde); }
    .logo-cuadro .q3 { background: var(--gris-verde); }
    .logo-cuadro .q4 { background: var(--verde); }

    .brand-nombre {
      font-family: 'Montserrat', sans-serif;
      font-weight: 800;
      font-size: 1.2rem;
      color: var(--blanco);
      letter-spacing: -0.3px;
      line-height: 1.1;
    }

    .brand-nombre span { color: var(--verde); }
    .brand-sub { font-size: 0.58rem; color: rgba(255,255,255,0.4); text-transform: uppercase; letter-spacing: 1px; font-weight: 600; }

    .nav-link {
      font-family: 'Montserrat', sans-serif;
      font-weight: 600;
      font-size: 0.78rem;
      color: rgba(255,255,255,0.7) !important;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      padding: 0.5rem 0.85rem !important;
      transition: color 0.2s;
    }

    .nav-link:hover { color: var(--verde) !important; }

    .btn-nav {
      background: var(--verde);
      color: var(--oscuro) !important;
      font-family: 'Montserrat', sans-serif;
      font-weight: 800;
      font-size: 0.78rem;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      padding: 0.6rem 1.5rem !important;
      border-radius: 2px;
    }

    .btn-nav:hover { background: var(--verde-hover); }

    /* NOTA: el bloque del hero antiguo (fotografía oscura + carrusel) se retiró
       el 13/07 al rediseñar la cabecera con fondo orgánico de marca.
       Las reglas vigentes están al final de este archivo. */

    /* ============================
       SECCIONES
    ============================ */
    .seccion { padding: 5.5rem 0; }
    .bg-claro { background: var(--claro); }
    .bg-oscuro { background: var(--oscuro); }
    .bg-oscuro2 { background: var(--oscuro2); }

    .eyebrow {
      font-family: 'Montserrat', sans-serif;
      font-weight: 700;
      font-size: 0.68rem;
      text-transform: uppercase;
      letter-spacing: 3px;
      color: var(--verde);
      margin-bottom: 0.6rem;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .eyebrow::before {
      content: '';
      display: inline-block;
      width: 24px; height: 2px;
      background: var(--verde);
      flex-shrink: 0;
    }

    .titulo {
      font-size: clamp(1.6rem, 3.5vw, 2.4rem);
      font-weight: 900;
      color: var(--oscuro);
      line-height: 1.1;
      margin-bottom: 0.4rem;
    }

    .titulo.claro { color: var(--blanco); }
    .titulo span { color: var(--verde); }

    .linea { width: 40px; height: 3px; background: var(--verde); margin: 0.8rem 0 1.2rem; }
    .linea.centrada { margin: 0.8rem auto 1.2rem; }

    .subtxt { font-size: 0.95rem; color: var(--texto-suave); line-height: 1.7; max-width: 560px; }
    .subtxt.claro { color: rgba(255,255,255,0.55); }

    /* ============================
       SERVICIOS — layout asimétrico
    ============================ */
    .srv-grid {
      display: grid;
      grid-template-columns: 1.4fr 1fr 1fr;
      grid-template-rows: auto auto;
      gap: 1.2rem;
    }

    .srv-item {
      position: relative;
      border-radius: 4px;
      overflow: hidden;
      min-height: 260px;
      cursor: pointer;
    }

    .srv-item.grande { grid-row: span 2; min-height: 540px; }

    .srv-bg {
      position: absolute;
      inset: 0;
      transition: transform 0.4s;
      display: flex; align-items: center; justify-content: center;
    }

    .srv-item:hover .srv-bg { transform: scale(1.05); }
    .srv-bg i { font-size: 4rem; color: rgba(255,255,255,0.05); }

    .srv-capa {
      position: absolute;
      inset: 0;
      /* Ajuste 10/07: transparente arriba (foto visible) → oscuro abajo (texto legible) */
      background: linear-gradient(to top, rgba(26,31,28,0.96) 0%, rgba(26,31,28,0.68) 34%, rgba(26,31,28,0) 68%);
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding: 1.8rem;
      transition: background 0.3s;
    }

    .srv-item:hover .srv-capa {
      background: linear-gradient(to top, rgba(26,31,28,0.96) 0%, rgba(26,31,28,0.6) 34%, rgba(175,203,7,0.12) 100%);
    }

    .srv-tag {
      display: inline-flex;
      align-items: center;
      gap: 0.45rem;
      font-family: 'Montserrat', sans-serif;
      font-weight: 700;
      font-size: 0.62rem;
      text-transform: uppercase;
      letter-spacing: 2px;
      color: var(--verde);
      margin-bottom: 0.4rem;
    }

    .srv-item h4 {
      font-size: 1.05rem;
      color: var(--blanco);
      margin-bottom: 0.4rem;
    }

    .srv-item.grande h4 { font-size: 1.3rem; }

    .srv-item p {
      font-size: 0.82rem;
      color: rgba(255,255,255,0.5);
      line-height: 1.5;
      margin-bottom: 0.8rem;
    }

    /* CTA como botón fantasma, SIEMPRE visible (ajuste 10/07) */
    .srv-link {
      font-family: 'Montserrat', sans-serif;
      font-weight: 700;
      font-size: 0.7rem;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: var(--verde);
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      align-self: flex-start;
      margin-top: 0.9rem;
      padding: 0.5rem 0.95rem;
      border: 1px solid var(--verde);
      border-radius: 3px;
      background: rgba(175, 203, 7, 0.14);
      transition: background 0.25s, color 0.25s;
    }

    .srv-item:hover .srv-link,
    .srv-link:hover {
      background: var(--verde);
      color: var(--oscuro);
    }

    /* ============================
       PRODUCTOS — grid compacto
    ============================ */
    .prod-item {
      background: var(--blanco);
      border-radius: 4px;
      overflow: hidden;
      border: 1px solid rgba(0,0,0,0.07);
      display: flex;
      flex-direction: column;
      transition: box-shadow 0.25s, transform 0.25s;
    }

    .prod-item:hover {
      box-shadow: 0 8px 30px rgba(54,64,59,0.12);
      transform: translateY(-3px);
    }

    .prod-img {
      height: 180px;
      background-color: var(--oscuro);
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      display: flex; align-items: center; justify-content: center;
      position: relative;
    }

    .prod-img i { font-size: 2.8rem; color: rgba(255,255,255,0.06); }

    .prod-badge {
      position: absolute;
      top: 8px; left: 8px;
      background: var(--verde);
      color: var(--oscuro);
      font-family: 'Montserrat', sans-serif;
      font-weight: 700;
      font-size: 0.58rem;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      padding: 2px 7px;
      border-radius: 2px;
    }

    .prod-body { padding: 1rem 1.2rem 1.3rem; flex: 1; display: flex; flex-direction: column; }
    .prod-body h5 { font-size: 0.88rem; color: var(--oscuro); margin-bottom: 0.3rem; }
    .prod-body p { font-size: 0.78rem; color: var(--texto-suave); line-height: 1.5; flex: 1; margin-bottom: 0.8rem; }

    .prod-link {
      font-family: 'Montserrat', sans-serif;
      font-weight: 700;
      font-size: 0.72rem;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: var(--oscuro);
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      transition: color 0.2s, gap 0.2s;
    }

    .prod-link:hover { color: var(--verde); gap: 9px; }

    /* ============================
       INDUSTRIAS — fila horizontal
    ============================ */
    .industrias-fila {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 0.6rem;
    }

    .ind-item {
      position: relative;
      border-radius: 3px;
      overflow: hidden;
      aspect-ratio: 2/3;
    }

    .ind-bg {
      width: 100%; height: 100%;
      display: flex; align-items: center; justify-content: center;
      transition: transform 0.35s;
      /* Comportamiento fotográfico: la imagen se define inline por sector.
         Si la imagen falla, queda el color de respaldo + ícono (el diseño nunca se rompe). */
      background-size: cover !important;
      background-position: center !important;
    }

    /* El zoom al pasar el mouse se retiró: el volteo es ahora el efecto del sector */

    .ind-bg i { font-size: 2rem; color: rgba(255,255,255,0.25); text-shadow: 0 2px 10px rgba(0,0,0,0.5); }

    .ind-capa {
      position: absolute;
      inset: 0;
      /* Ajuste 10/07: solo el pie oscuro para el nombre; la foto se ve limpia */
      background: linear-gradient(to top, rgba(26,31,28,0.9) 0%, rgba(26,31,28,0) 55%);
      display: flex;
      align-items: flex-end;
      justify-content: center;
      padding: 0.7rem 0.5rem;
      text-align: center;
    }

    .ind-nombre {
      font-family: 'Montserrat', sans-serif;
      font-weight: 800;
      font-size: 0.7rem;
      color: var(--blanco);
      text-transform: uppercase;
      letter-spacing: 1px;
    }

    .ind-item:hover .ind-capa { /* el volteo reemplaza al efecto anterior */
      background: linear-gradient(to top, rgba(26,31,28,0.9) 0%, rgba(26,31,28,0) 55%);
    }

    /* ============================
       ALTERNANCIA CLARO / OSCURO
    ============================ */

    /* POR QUÉ — fondo claro */
    .porque-row {
      display: flex;
      gap: 0;
    }

    .porque-col {
      flex: 1;
      padding: 2rem;
      border-right: 1px solid rgba(54,64,59,0.1);
      text-align: center;
      transition: background 0.2s;
    }

    .porque-col:last-child { border-right: none; }
    /* Hover más notorio (ajuste 10/07): fondo oscuro perceptible */
    .porque-col:hover { background: rgba(54, 64, 59, 0.16); border-radius: 4px; }

    .porque-num {
      font-family: 'Montserrat', sans-serif;
      font-weight: 900;
      font-size: 2.5rem;
      color: var(--verde);
      line-height: 1;
      margin-bottom: 0.2rem;
    }

    .porque-num-label {
      font-family: 'Montserrat', sans-serif;
      font-weight: 700;
      font-size: 0.65rem;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      color: var(--gris-verde);
    }

    .porque-icono {
      width: 52px; height: 52px;
      background: var(--verde);
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 1.2rem;
      color: var(--oscuro);
      margin: 1rem auto 0.8rem;
    }

    .porque-col h5 { font-size: 0.92rem; color: var(--oscuro); margin-bottom: 0.4rem; }
    .porque-col p { font-size: 0.82rem; color: var(--texto-suave); line-height: 1.5; margin: 0; }

    /* ============================
       CASOS DE ÉXITO
    ============================ */
    .casos-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1.5rem;
    }

    .caso-item {
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.07);
      border-radius: 4px;
      overflow: hidden;
      display: flex;
      gap: 0;
    }

    .caso-barra {
      width: 4px;
      background: var(--verde);
      flex-shrink: 0;
    }

    /* Fotografía lateral del caso — placeholder Unsplash, con color de respaldo si falla */
    .caso-foto {
      width: 130px;
      flex-shrink: 0;
      background-size: cover;
      background-position: center;
      background-color: var(--oscuro);
    }

    @media (max-width: 575px) {
      .caso-foto { display: none; } /* En móvil priorizamos el contenido y los KPIs */
    }

    .caso-contenido { padding: 1.5rem; flex: 1; }

    .caso-sector {
      font-family: 'Montserrat', sans-serif;
      font-weight: 700;
      font-size: 0.65rem;
      text-transform: uppercase;
      letter-spacing: 2px;
      color: var(--verde);
      margin-bottom: 0.3rem;
    }

    .caso-item h5 { font-size: 0.92rem; color: var(--blanco); margin-bottom: 0.5rem; }

    .caso-stats {
      display: flex;
      gap: 1.5rem;
      margin-top: 1rem;
    }

    .caso-stat .cs-num {
      font-family: 'Montserrat', sans-serif;
      font-weight: 900;
      font-size: 1.4rem;
      color: var(--verde);
      line-height: 1;
    }

    .caso-stat .cs-label {
      font-size: 0.7rem;
      color: rgba(255,255,255,0.35);
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    /* Casos de éxito sobre fondo claro */
    .casos-claro .caso-item {
      background: var(--blanco);
      border: 1px solid rgba(54,64,59,0.1);
      box-shadow: 0 2px 14px rgba(0,0,0,0.04);
    }
    .casos-claro .caso-item h5 { color: var(--oscuro); }
    .casos-claro .caso-contenido p { color: var(--texto-suave) !important; }
    .casos-claro .caso-stat .cs-label { color: var(--gris-verde); }

    /* ============================
       TESTIMONIOS
    ============================ */
    .test-card {
      background: var(--blanco);
      border-radius: 4px;
      padding: 2rem;
      height: 100%;
      border-bottom: 3px solid var(--verde);
      box-shadow: 0 2px 20px rgba(0,0,0,0.06);
    }

    .test-card p {
      font-size: 0.9rem;
      color: var(--texto-suave);
      line-height: 1.7;
      font-style: italic;
      margin-bottom: 1.5rem;
      position: relative;
      padding-top: 1.5rem;
    }

    .test-card p::before {
      content: '\201C';
      font-family: Georgia, serif;
      font-size: 3.5rem;
      color: var(--verde);
      opacity: 0.25;
      position: absolute;
      top: -10px; left: -5px;
      line-height: 1;
    }

    .test-autor { display: flex; align-items: center; gap: 0.8rem; }

    .test-av {
      width: 38px; height: 38px;
      background: var(--claro);
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      color: var(--gris-verde); font-size: 1rem;
    }

    .test-nombre { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 0.82rem; color: var(--oscuro); }
    .test-empresa { font-size: 0.75rem; color: var(--verde); }

    /* ============================
       CTA FINAL — verde sólido
    ============================ */
    .cta-final {
      background: var(--verde);
      padding: 5rem 0;
      position: relative;
      overflow: hidden;
    }

    .cta-final::before {
      content: '';
      position: absolute;
      left: -80px; top: -80px;
      width: 360px; height: 360px;
      border-radius: 50%;
      border: 70px solid rgba(54,64,59,0.1);
    }

    .cta-final::after {
      content: '';
      position: absolute;
      right: 5%; bottom: -40px;
      width: 200px; height: 200px;
      border-radius: 50%;
      border: 40px solid rgba(54,64,59,0.08);
    }

    .cta-final h2 {
      font-size: clamp(1.8rem, 4vw, 3rem);
      font-weight: 900;
      color: var(--oscuro);
      text-transform: uppercase;
      letter-spacing: -1px;
      line-height: 1.05;
    }

    .cta-final p { color: rgba(54,64,59,0.65); font-size: 1rem; margin-top: 0.5rem; }

    .btn-cta-oscuro {
      background: var(--oscuro);
      color: var(--verde);
      font-family: 'Montserrat', sans-serif;
      font-weight: 800;
      font-size: 0.85rem;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      padding: 1.1rem 2.5rem;
      border-radius: 2px;
      border: none;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      transition: background 0.2s;
    }

    .btn-cta-oscuro:hover { background: var(--oscuro2); color: var(--verde); }

    .btn-cta-ghost {
      background: transparent;
      color: var(--oscuro);
      font-family: 'Montserrat', sans-serif;
      font-weight: 700;
      font-size: 0.85rem;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      padding: 1.1rem 2.5rem;
      border-radius: 2px;
      border: 2px solid rgba(54,64,59,0.35);
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      transition: border-color 0.2s;
    }

    .btn-cta-ghost:hover { border-color: var(--oscuro); color: var(--oscuro); }

    /* ============================
       CONTACTO
    ============================ */
    .form-control, .form-select {
      border: 1px solid var(--claro);
      border-radius: 2px;
      padding: 0.8rem 1rem;
      font-size: 0.88rem;
      background: #fafafa;
      color: var(--texto);
      transition: border-color 0.2s, background 0.2s;
    }

    .form-control:focus, .form-select:focus {
      border-color: var(--verde);
      background: var(--blanco);
      box-shadow: 0 0 0 3px rgba(175, 203, 7,0.12);
      outline: none;
    }

    .form-label {
      font-family: 'Montserrat', sans-serif;
      font-weight: 700;
      font-size: 0.75rem;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: var(--oscuro);
      margin-bottom: 0.35rem;
    }

    .btn-enviar {
      background: var(--verde);
      color: var(--oscuro);
      font-family: 'Montserrat', sans-serif;
      font-weight: 800;
      font-size: 0.82rem;
      text-transform: uppercase;
      letter-spacing: 1px;
      padding: 0.9rem;
      border-radius: 2px;
      border: none;
      width: 100%;
      display: flex; align-items: center; justify-content: center;
      gap: 8px;
      cursor: pointer;
      transition: background 0.2s;
    }

    .btn-enviar:hover { background: var(--verde-hover); }

    .btn-wa {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: #25D366;
      color: var(--blanco);
      font-family: 'Montserrat', sans-serif;
      font-weight: 700;
      font-size: 0.82rem;
      text-transform: uppercase;
      padding: 0.85rem 1.8rem;
      border-radius: 2px;
      text-decoration: none;
      transition: background 0.2s;
    }

    .btn-wa:hover { background: #1fba58; color: var(--blanco); }

    .dato-contacto {
      display: flex;
      align-items: flex-start;
      gap: 0.8rem;
      margin-bottom: 1.1rem;
    }

    .dato-icono {
      width: 34px; height: 34px;
      background: var(--claro);
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      color: var(--oscuro);
      font-size: 0.85rem;
      flex-shrink: 0;
      margin-top: 2px;
    }

    .dato-label {
      font-family: 'Montserrat', sans-serif;
      font-weight: 700;
      font-size: 0.7rem;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: var(--verde);
      margin-bottom: 1px;
    }

    .dato-valor { font-size: 0.88rem; color: var(--texto-suave); }

    .mapa-ph {
      height: 220px;
      background: var(--claro);
      border-radius: 4px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: var(--gris-verde);
      gap: 0.4rem;
      margin-top: 1.5rem;
    }

    .mapa-ph i { font-size: 2.2rem; }
    .mapa-ph span { font-size: 0.8rem; }

    /* ============================
       FOOTER
    ============================ */
    footer {
      background: var(--oscuro2);
      color: rgba(255,255,255,0.4);
      padding: 4rem 0 0;
    }

    .footer-nombre {
      font-family: 'Montserrat', sans-serif;
      font-weight: 800;
      font-size: 1.3rem;
      color: var(--blanco);
    }

    .footer-nombre span { color: var(--verde); }

    footer p { font-size: 0.82rem; line-height: 1.6; max-width: 210px; margin-top: 0.5rem; }

    .footer-h {
      font-family: 'Montserrat', sans-serif;
      font-size: 0.68rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 2px;
      color: var(--verde);
      margin-bottom: 1.2rem;
    }

    footer ul { list-style: none; padding: 0; margin: 0; }
    footer ul li { margin-bottom: 0.5rem; }
    footer ul li a { color: rgba(255,255,255,0.35); text-decoration: none; font-size: 0.83rem; transition: color 0.2s; }
    footer ul li a:hover { color: var(--verde); }

    .rrss {
      width: 34px; height: 34px;
      background: rgba(255,255,255,0.05);
      border-radius: 50%;
      display: inline-flex; align-items: center; justify-content: center;
      color: rgba(255,255,255,0.35);
      font-size: 0.9rem;
      text-decoration: none;
      margin-right: 5px;
      transition: background 0.2s, color 0.2s;
    }

    .rrss:hover { background: var(--verde); color: var(--oscuro); }

    .valores-bar {
      background: var(--oscuro);
      padding: 0.7rem 0;
      margin-top: 3.5rem;
    }

    .valor-tag {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-family: 'Montserrat', sans-serif;
      font-weight: 600;
      font-size: 0.68rem;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      color: rgba(255,255,255,0.3);
    }

    .valor-tag i { color: var(--verde); }

    .footer-bottom {
      border-top: 1px solid rgba(255,255,255,0.05);
      padding: 1.2rem 0;
      font-size: 0.75rem;
      color: rgba(255,255,255,0.2);
    }

    .btn-ver-todo {
      font-family: 'Montserrat', sans-serif;
      font-weight: 700;
      font-size: 0.78rem;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: var(--oscuro);
      border: 2px solid var(--oscuro);
      padding: 0.65rem 1.8rem;
      border-radius: 2px;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: background 0.2s, color 0.2s;
      margin-top: 2.5rem;
    }

    .btn-ver-todo:hover { background: var(--oscuro); color: var(--verde); }

    @media (max-width: 992px) {
      .srv-grid { grid-template-columns: 1fr 1fr; }
      .srv-item.grande { grid-row: span 1; min-height: 260px; }
      .industrias-fila { grid-template-columns: repeat(3, 1fr); }
      .casos-grid { grid-template-columns: 1fr; }
    }

    @media (max-width: 768px) {
      .hero { min-height: auto; }
      .hero-inner { padding: 7rem 0 4rem; }
      .seccion { padding: 4rem 0; }
      .srv-grid { grid-template-columns: 1fr; }
      .porque-row { flex-wrap: wrap; }
      .porque-col { flex: 1 1 45%; border-right: none; border-bottom: 1px solid rgba(54,64,59,0.1); }
      .industrias-fila { grid-template-columns: repeat(3, 1fr); }
    }

/* ============================================
   Navbar sólida al hacer scroll (main.js agrega
   la clase .navbar-solida pasados los 60px)
   ============================================ */
.navbar {
  transition: background-color .3s ease, box-shadow .3s ease;
}
.navbar.navbar-solida {
  box-shadow: 0 2px 16px rgba(0,0,0,.35);
}


/* ============================================================
   Hero en pantallas medianas/pequeñas: el layout de dos columnas
   no cabe — la foto pasa a fondo completo atenuado y el texto
   recupera todo el ancho (esquema original de la Propuesta C)
   ============================================================ */
/* (media query del hero antiguo retirado el 13/07) */


/* ============================================================
   Sección de cotización en fondo oscuro (ajuste 10/07)
   ============================================================ */
.seccion-oscura { background: var(--oscuro2); }
.seccion-oscura .titulo { color: #fff; }
.seccion-oscura .subtxt { color: rgba(255,255,255,0.75); }
.seccion-oscura .dato-valor { color: #fff; }
.seccion-oscura .dato-label { color: var(--verde); }
.seccion-oscura .dato-contacto { color: rgba(255,255,255,0.85); }

/* Tarjeta blanca del formulario: destaca sobre el fondo oscuro */
.form-card {
  background: #fff;
  padding: 2rem;
  border-radius: 6px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.35);
}

/* Mapa embebido: banda ancha bajo el bloque de cotización */
.mapa-embed {
  margin-top: 3rem;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0,0,0,0.35);
  line-height: 0; /* elimina el espacio fantasma bajo el iframe */
}


/* ============================================================
   Fichas flip de Sectores (ajuste 10/07)
   Escritorio: se voltean al pasar el mouse.
   Táctil: se voltean al tocar (clase .volteada desde main.js).
   ============================================================ */
.ind-flip { perspective: 900px; overflow: visible; }
.ind-flip-inner {
  position: relative;
  width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1);
}
@media (hover: hover) {
  .ind-flip:hover .ind-flip-inner { transform: rotateY(180deg); }
}
.ind-flip.volteada .ind-flip-inner { transform: rotateY(180deg); }

.ind-cara {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 3px;
  overflow: hidden;
}
.ind-dorso {
  transform: rotateY(180deg);
  background: linear-gradient(160deg, var(--oscuro2), #222b24);
  border: 1px solid rgba(175, 203, 7, 0.4);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.6rem;
  padding: 1.1rem 0.9rem;
}
.ind-dorso i { font-size: 1.6rem; color: var(--verde); text-shadow: none; }
.ind-dorso .ind-nombre { color: var(--verde); }
.ind-dorso p {
  margin: 0;
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.72rem;
  line-height: 1.55;
}


/* Ícono de los subtítulos de servicio (ajuste 10/07) */
.srv-tag i { font-size: 0.95rem; line-height: 1; }
/* Refuerzo de legibilidad del texto sobre fotografía */
.srv-capa h4, .srv-capa p, .srv-tag { text-shadow: 0 1px 8px rgba(0,0,0,0.65); }


/* ============================================================
   Productos estrella superpuestos en el hero (ajuste 10/07)
   Grilla 2x2 de tarjetas sobre el carrusel, a la derecha.
   ============================================================ */
.hero-productos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.9rem;
  position: relative;
  z-index: 5;
  margin-top: 5.5rem;
}
.hero-pcard {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  box-shadow: 0 10px 30px rgba(0,0,0,0.45);
  border: 1px solid rgba(255,255,255,0.12);
  cursor: pointer;
  transition: transform 0.3s, box-shadow 0.3s;
}
.hero-pcard:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.6);
}
.hero-pcard-img {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transition: transform 0.4s;
}
.hero-pcard:hover .hero-pcard-img { transform: scale(1.08); }
.hero-pcard::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(26,31,28,0.92) 0%, rgba(26,31,28,0.2) 55%, transparent 100%);
}
.hero-pcard-txt {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 0.85rem 0.95rem; z-index: 2;
}
.hero-pcard-cat {
  font-family: 'Montserrat', sans-serif; font-weight: 700;
  font-size: 0.56rem; text-transform: uppercase; letter-spacing: 1.5px;
  color: var(--verde);
}
.hero-pcard-txt h4 {
  font-family: 'Montserrat', sans-serif; font-weight: 700;
  font-size: 0.92rem; color: #fff; margin: 0.15rem 0 0;
  text-shadow: 0 1px 6px rgba(0,0,0,0.7);
}
.hero-pcard.destacado { border-color: var(--verde); }
.hero-pcard-badge {
  position: absolute; top: 0.6rem; right: 0.6rem; z-index: 3;
  background: var(--verde); color: var(--oscuro);
  font-family: 'Montserrat', sans-serif; font-weight: 700;
  font-size: 0.55rem; text-transform: uppercase; letter-spacing: 1px;
  padding: 0.2rem 0.5rem; border-radius: 3px;
}

/* En pantallas medianas/pequeñas las tarjetas pasan debajo del texto */
@media (max-width: 991.98px) {
  .hero-productos { margin-top: 2rem; }
  .hero-pcard { aspect-ratio: 16 / 9; }
}

/* ============================================================
   PÁGINA NOSOTROS (nosotros.php) — ajuste 10/07
   ============================================================ */
/* Encabezado de página interna */
.pagina-hero {
  position: relative;
  min-height: 52vh;
  display: flex;
  align-items: flex-end;
  padding: 8rem 0 3.5rem;
  overflow: hidden;
}
.pagina-hero-foto {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
}
.pagina-hero-capa {
  position: absolute; inset: 0;
  background: linear-gradient(to top, var(--oscuro2) 8%, rgba(26,31,28,0.72) 55%, rgba(26,31,28,0.5));
}
.pagina-hero-inner { position: relative; z-index: 2; }
.pagina-hero h1 {
  font-family: 'Montserrat', sans-serif; font-weight: 900;
  font-size: clamp(2rem, 5vw, 3.4rem); color: #fff;
  line-height: 1.05; margin: 0.5rem 0 0; text-transform: uppercase;
}

/* Párrafos de contenido */
.parrafo {
  color: var(--texto-suave); font-size: 0.96rem;
  line-height: 1.8; margin-bottom: 1.1rem;
}
.nosotros-img {
  width: 100%; aspect-ratio: 4 / 3;
  background-size: cover; background-position: center;
  border-radius: 6px; box-shadow: 0 14px 40px rgba(0,0,0,0.25);
}

/* Tarjetas de Misión / Visión */
.mv-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(175,203,7,0.25);
  border-radius: 8px; padding: 2.2rem; height: 100%;
}
.mv-icono {
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--verde); color: var(--oscuro);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; margin-bottom: 1.2rem;
}
.mv-card h3 {
  font-family: 'Montserrat', sans-serif; font-weight: 800;
  color: #fff; font-size: 1.4rem; margin-bottom: 0.8rem;
}
.mv-card p { color: rgba(255,255,255,0.75); font-size: 0.92rem; line-height: 1.75; margin: 0; }

/* Tarjetas de Objetivos */
.obj-card {
  background: #fff; border-radius: 8px; padding: 1.8rem 1.5rem; height: 100%;
  border: 1px solid rgba(54,64,59,0.08);
  box-shadow: 0 6px 24px rgba(0,0,0,0.06);
  position: relative; transition: transform 0.3s, box-shadow 0.3s;
}
.obj-card:hover { transform: translateY(-6px); box-shadow: 0 14px 36px rgba(0,0,0,0.12); }
.obj-num {
  font-family: 'Montserrat', sans-serif; font-weight: 900;
  font-size: 2.4rem; color: rgba(175,203,7,0.35); line-height: 1;
}
.obj-icono { color: var(--verde); font-size: 1.6rem; margin: 0.6rem 0 1rem; }
.obj-card p { color: var(--texto-suave); font-size: 0.88rem; line-height: 1.7; margin: 0; }

/* Franja de valores */
.valores-row {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 2.5rem;
}
.valor-item {
  display: flex; flex-direction: column; align-items: center; gap: 0.8rem;
  min-width: 140px;
}
.valor-item i {
  font-size: 2.4rem; color: var(--verde);
  width: 82px; height: 82px; border-radius: 50%;
  background: rgba(175,203,7,0.1);
  display: flex; align-items: center; justify-content: center;
}
.valor-item span {
  font-family: 'Montserrat', sans-serif; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1px;
  font-size: 0.82rem; color: var(--oscuro);
}

/* ============================================================
   VITRINA DE PRODUCTOS — layout asimétrico (rediseño 11/07)
   Izquierda: héroe a toda altura. Derecha: 1 ancho + 2 abajo.
   Hereda el lenguaje inmersivo de la sección Servicios.
   ============================================================ */
.prod-vitrina {
  display: grid;
  grid-template-columns: 1.25fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 1.2rem;
  min-height: 560px;
}
/* Héroe: columna izquierda completa, ambas filas */
.prod-v-item.heroe { grid-column: 1; grid-row: 1 / span 2; }
/* Ancho: fila superior derecha, ocupa las dos columnas */
.prod-v-item.ancho { grid-column: 2 / span 2; grid-row: 1; }
/* Los dos de abajo caen automáticamente en fila 2, columnas 2 y 3 */

.prod-v-item {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  min-height: 260px;
  box-shadow: 0 8px 26px rgba(0,0,0,0.12);
}
.prod-v-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transition: transform 0.5s ease;
}
.prod-v-item:hover .prod-v-bg { transform: scale(1.07); }

/* Degradado inferior — como en Servicios: foto visible arriba, texto legible abajo */
.prod-v-item::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(26,31,28,0.94) 0%, rgba(26,31,28,0.55) 32%, rgba(26,31,28,0) 65%);
  transition: background 0.3s;
}
.prod-v-item:hover::after {
  background: linear-gradient(to top, rgba(26,31,28,0.96) 0%, rgba(26,31,28,0.6) 38%, rgba(175,203,7,0.12) 100%);
}

.prod-v-capa {
  position: absolute; left: 0; right: 0; bottom: 0;
  z-index: 2; padding: 1.5rem;
}
.prod-v-cat {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: 'Montserrat', sans-serif; font-weight: 700;
  font-size: 0.6rem; text-transform: uppercase; letter-spacing: 1.5px;
  color: var(--verde); margin-bottom: 0.5rem;
}
.prod-v-capa h3 {
  font-family: 'Montserrat', sans-serif; font-weight: 800;
  color: #fff; margin: 0; line-height: 1.15;
  text-shadow: 0 1px 8px rgba(0,0,0,0.6);
  font-size: 1.15rem;
}
/* El héroe y el ancho tienen más espacio → tipografía y descripción mayores */
.prod-v-item.heroe .prod-v-capa h3 { font-size: 2rem; }
.prod-v-item.ancho .prod-v-capa h3 { font-size: 1.5rem; }
.prod-v-capa p {
  color: rgba(255,255,255,0.82);
  font-size: 0.85rem; line-height: 1.6;
  margin: 0.6rem 0 0; max-width: 42ch;
}
.prod-v-link {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 0.9rem;
  font-family: 'Montserrat', sans-serif; font-weight: 700;
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--verde); text-decoration: none;
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--verde); border-radius: 3px;
  background: rgba(175,203,7,0.12);
  transition: background 0.25s, color 0.25s;
}
.prod-v-item:hover .prod-v-link, .prod-v-link:hover {
  background: var(--verde); color: var(--oscuro);
}
.prod-v-badge.destacado {
  position: absolute; top: 1rem; right: 1rem; z-index: 3;
  background: var(--verde); color: var(--oscuro);
  font-family: 'Montserrat', sans-serif; font-weight: 700;
  font-size: 0.6rem; text-transform: uppercase; letter-spacing: 1px;
  padding: 0.3rem 0.7rem; border-radius: 3px;
}

/* Responsive: tablet → héroe arriba a todo el ancho, luego el resto */
@media (max-width: 991.98px) {
  .prod-vitrina {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    min-height: 0;
  }
  .prod-v-item.heroe { grid-column: 1 / span 2; grid-row: auto; min-height: 340px; }
  .prod-v-item.ancho { grid-column: 1 / span 2; grid-row: auto; }
}
@media (max-width: 575.98px) {
  .prod-vitrina { grid-template-columns: 1fr; }
  .prod-v-item.heroe, .prod-v-item.ancho { grid-column: 1; }
}

/* ============================================================
   ACTIVOS INTANGIBLES (nosotros.php) — pedido de J. Maraví 12/07
   Know-how, cultura empresarial y marca como diferenciadores.
   ============================================================ */
.intangible-card {
  background: #fff;
  border-radius: 8px;
  padding: 2.2rem 1.9rem;
  height: 100%;
  border: 1px solid rgba(54,64,59,0.08);
  border-top: 3px solid var(--verde);
  box-shadow: 0 8px 28px rgba(0,0,0,0.07);
  transition: transform 0.3s, box-shadow 0.3s;
}
.intangible-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.13);
}
.intangible-icono {
  width: 58px; height: 58px;
  border-radius: 10px;
  background: rgba(175,203,7,0.14);
  color: var(--verde);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem;
  margin-bottom: 1.3rem;
}
.intangible-card h3 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--oscuro);
  margin-bottom: 0.8rem;
}
.intangible-card p {
  color: var(--texto-suave);
  font-size: 0.9rem;
  line-height: 1.75;
  margin: 0;
}


/* Desplazamiento de anclas: evita que el navbar fijo tape el inicio de la sección */
section[id] { scroll-margin-top: 86px; }

/* Logo del Libro de Reclamaciones en el pie */
.libro-reclamaciones {
  display: inline-flex;
  align-items: center;
  margin-top: 0.9rem;
  padding: 0.35rem 0.5rem;
  background: #fff;
  border-radius: 4px;
  transition: transform 0.25s, box-shadow 0.25s;
}
.libro-reclamaciones:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.3);
}
.libro-reclamaciones img { height: 26px; width: auto; display: block; } /* reducido a ~1/3 (12/07) */

/* Enlaces de la barra inferior del pie */
.footer-bottom a { color: inherit; text-decoration: none; transition: color .25s; }
.footer-bottom a:hover { color: var(--verde); }

/* ============================================================
   PÁGINAS LEGALES (politica.php, terminos.php)
   ============================================================ */
.titulo-legal {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--oscuro);
  margin: 2rem 0 0.8rem;
  padding-left: 0.9rem;
  border-left: 3px solid var(--verde);
}
.aviso-borrador {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  background: #FFF9E6;
  border: 1px solid #F0D97A;
  border-radius: 6px;
  padding: 1rem 1.2rem;
  margin-bottom: 2rem;
  font-size: 0.88rem;
  color: #6B5600;
  line-height: 1.6;
}
.aviso-borrador i { color: #C99A00; font-size: 1.2rem; margin-top: 2px; }

/* ============================================================
   LIBRO DE RECLAMACIONES + CONTÁCTENOS (12/07)
   ============================================================ */
.aviso-legal-lr {
  display: flex; gap: 1rem; align-items: flex-start;
  background: rgba(175,203,7,0.10);
  border-left: 4px solid var(--verde);
  border-radius: 6px; padding: 1.2rem 1.4rem; margin-bottom: 2rem;
  font-size: 0.9rem; line-height: 1.7; color: var(--texto-suave);
}
.aviso-legal-lr i { color: var(--verde); font-size: 1.3rem; margin-top: 2px; }

.def-card {
  background: var(--claro); border-radius: 6px; padding: 1.2rem 1.4rem; height: 100%;
  border: 1px solid rgba(54,64,59,0.08);
}
.def-tipo {
  font-family: 'Montserrat', sans-serif; font-weight: 800; text-transform: uppercase;
  letter-spacing: 1px; font-size: 0.75rem; color: var(--verde); margin-bottom: 0.4rem;
}
.def-card p { margin: 0; font-size: 0.86rem; line-height: 1.6; color: var(--texto-suave); }

.bloque-lr {
  display: flex; align-items: center; gap: 0.8rem;
  font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 1.05rem;
  color: var(--oscuro); margin: 2.5rem 0 1.2rem;
  padding-bottom: 0.7rem; border-bottom: 1px solid rgba(54,64,59,0.12);
}
.bloque-lr span {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--verde); color: var(--oscuro);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem; font-weight: 800; flex-shrink: 0;
}
.form-lr .form-label em, .form-card .form-label em, .ayuda em { color: #C0392B; font-style: normal; }
.ayuda { font-size: 0.76rem; color: var(--gris-verde); margin-top: 0.3rem; display: block; }
.sub-bloque {
  background: var(--claro); border-radius: 6px; padding: 1rem; margin-top: 0.5rem;
}

.tipo-radios { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.radio-pill {
  flex: 1 1 260px; display: flex; align-items: center; gap: 0.6rem;
  border: 1px solid rgba(54,64,59,0.18); border-radius: 6px;
  padding: 0.8rem 1rem; cursor: pointer;
  font-size: 0.84rem; color: var(--texto-suave);
  transition: border-color .25s, background .25s;
}
.radio-pill:hover { border-color: var(--verde); background: rgba(175,203,7,0.06); }
.radio-pill input:checked ~ span { color: var(--oscuro); }
.radio-pill:has(input:checked) { border-color: var(--verde); background: rgba(175,203,7,0.12); }

.conformidad-box {
  background: var(--claro); border-radius: 6px; padding: 1.3rem;
  font-size: 0.85rem; line-height: 1.6;
}
.conformidad-box a { color: var(--verde); }
.nota-plazo {
  display: flex; align-items: center; gap: 0.7rem;
  margin-top: 1.5rem; padding: 0.9rem 1.2rem;
  background: #FFF9E6; border: 1px solid #F0D97A; border-radius: 6px;
  font-size: 0.85rem; color: #6B5600;
}
.nota-plazo i { color: #C99A00; font-size: 1.1rem; }

/* Contáctenos */
.contacto-lista { list-style: none; padding: 0; margin: 2rem 0; }
.contacto-lista li {
  display: flex; gap: 1rem; align-items: flex-start;
  padding: 0.9rem 0; border-bottom: 1px solid rgba(54,64,59,0.08);
}
.contacto-lista i {
  color: var(--verde); font-size: 1.1rem; width: 34px; height: 34px;
  background: rgba(175,203,7,0.12); border-radius: 8px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.c-label {
  display: block; font-family: 'Montserrat', sans-serif; font-weight: 700;
  font-size: 0.64rem; text-transform: uppercase; letter-spacing: 1px;
  color: var(--gris-verde); margin-bottom: 0.15rem;
}
.c-valor { display: block; font-size: 0.92rem; color: var(--oscuro); text-decoration: none; }
a.c-valor:hover { color: var(--verde); }

.btn-whatsapp {
  display: inline-flex; align-items: center; gap: 0.6rem;
  background: #25D366; color: #fff; text-decoration: none;
  font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 0.82rem;
  padding: 0.85rem 1.5rem; border-radius: 4px;
  transition: transform .25s, box-shadow .25s;
}
.btn-whatsapp:hover {
  color: #fff; transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(37,211,102,0.35);
}
.form-card-titulo {
  font-family: 'Montserrat', sans-serif; font-weight: 700;
  font-size: 1.1rem; color: var(--oscuro); margin-bottom: 1.5rem;
}


/* ============================================================================
   HERO — Rediseño 13/07: fondo orgánico de marca (verde protagonista)
   Reemplaza el carrusel fotográfico anterior. Las reglas antiguas
   (.hero-slides, .hero-grad, .hero-bloque-verde) quedan sin uso.
   ============================================================================ */
.hero {
  position: relative;
  min-height: 100vh;
  background: var(--claro);   /* empalma con la sección siguiente: sin franja blanca */
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  padding: 7rem 0 0;
}

/* --- Fondo orgánico SVG --- */
.hero-organico { position: absolute; inset: 0; z-index: 0; }
.hero-svg { width: 100%; height: 100%; display: block; }

.hero-inner { position: relative; z-index: 2; padding-bottom: 7rem; }

/* --- Columna del mensaje: texto oscuro sobre verde (alto contraste) --- */
.hero .hero-pre { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 1.2rem; }
.hero .hero-pre-linea { width: 42px; height: 2px; background: var(--oscuro); }
.hero .hero-pre-texto {
  font-family: 'Montserrat', sans-serif; font-weight: 800;
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 2px;
  color: var(--oscuro);
}
.hero h1 {
  font-family: 'Montserrat', sans-serif; font-weight: 900;
  font-size: clamp(2.1rem, 3.6vw, 3.3rem);
  line-height: 1.02;
  color: var(--oscuro);
  text-transform: uppercase;
  margin-bottom: 1.3rem;
}
.hero h1 .hero-blanco {
  color: #fff;
  text-shadow: 0 2px 14px rgba(54,64,59,0.25);
}
.hero .hero-desc {
  color: rgba(54,64,59,0.82);
  font-size: 0.96rem; line-height: 1.7;
  max-width: 34ch; margin-bottom: 1.8rem;
}

/* --- Botones sobre fondo verde --- */
/* Botones apilados: "Cotizar ahora" debajo de "Ver productos" (ajuste 13/07) */
.hero-btns {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.8rem;
}
.hero-btns .btn-hero { width: 100%; max-width: 260px; }
/* Botones del hero — ambos con la MISMA caja para que queden a la par.
   El secundario usa fondo blanco sólido (el semitransparente sobre verde
   producía un efecto de doble capa mal recortada). */
.btn-hero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  white-space: nowrap;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  height: 52px;                    /* altura fija: los dos botones idénticos */
  padding: 0 1.6rem;
  border-radius: 4px;
  border: 2px solid transparent;   /* la caja no cambia de tamaño entre variantes */
  text-decoration: none;
  cursor: pointer;
  transition: transform .25s, box-shadow .25s, background .25s, color .25s;
}
.btn-hero.oscuro {
  background: var(--oscuro);
  border-color: var(--oscuro);
  color: #fff;
  box-shadow: 0 6px 20px rgba(54,64,59,0.28);
}
.btn-hero.oscuro:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(54,64,59,0.38);
}
.btn-hero.claro {
  background: #fff;
  border-color: #fff;
  color: var(--oscuro);
  box-shadow: 0 6px 20px rgba(54,64,59,0.16);
}
.btn-hero.claro:hover {
  background: var(--oscuro);
  border-color: var(--oscuro);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(54,64,59,0.32);
}

/* --- Vitrina: 6 productos en 2 filas de 3 --- */
.hero-vitrina {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem 1.2rem;
}
.hp-card { text-align: center; }

/* Rombo: cuadrado rotado 45°, con la foto contrarrotada para verse recta */
/* Hexágono: forma técnica (celda/tuerca), no usada por ningún competidor.
   El marco blanco es un hexágono ligeramente mayor detrás de la foto. */
.hp-rombo {
  position: relative;
  width: 165px; height: 158px;   /* +25% ancho, +7% alto (ajuste 13/07) */
  margin: 0 auto 1.4rem;
  background: #fff;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  filter: drop-shadow(0 10px 22px rgba(54,64,59,0.28));
  transition: transform .35s;
}
.hp-card:hover .hp-rombo { transform: translateY(-6px) scale(1.05); }

/* La foto vive dentro de un hexágono un poco menor: deja ver el marco blanco */
.hp-foto {
  position: absolute;
  top: 4px; left: 4px; right: 4px; bottom: 4px;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background-size: cover; background-position: center;
  opacity: 0;
  transition: opacity 1s ease-in-out;   /* disolvencia */
}
.hp-foto.activa { opacity: 1; }

.hp-linea {
  display: block;
  font-family: 'Montserrat', sans-serif; font-weight: 700;
  font-size: 0.58rem; text-transform: uppercase; letter-spacing: 1.2px;
  color: rgba(54,64,59,0.62);
  margin-bottom: 0.25rem;
}
.hp-card h3 {
  font-family: 'Montserrat', sans-serif; font-weight: 800;
  font-size: 0.92rem;
  color: var(--oscuro);
  margin: 0;
  line-height: 1.25;
}
/* Producto destacado (Lonas): se marca con el borde del hexágono, no con
   un bloque oscuro que rompía la armonía del conjunto. */
.hp-card.destacado .hp-rombo { background: var(--oscuro); }
.hp-card.destacado h3 { color: var(--oscuro); }

/* --- Banda de métricas: sobre la onda blanca inferior --- */
.hero-metricas {
  position: relative; z-index: 2;
  margin-top: auto;
  padding: 1.6rem 0 2.2rem;
}
.hero-metricas .metrica { padding: 0.4rem 0; }
.hero-metricas .num {
  font-family: 'Montserrat', sans-serif; font-weight: 900;
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  color: var(--oscuro);
  line-height: 1;
}
.hero-metricas .lbl {
  font-family: 'Montserrat', sans-serif; font-weight: 700;
  font-size: 0.6rem; text-transform: uppercase; letter-spacing: 1.4px;
  color: rgba(54,64,59,0.6);
  margin-top: 0.35rem;
}

/* --- Responsive --- */
@media (max-width: 991.98px) {
  .hero { min-height: 0; padding: 6.5rem 0 0; }
  .hero-inner { padding-bottom: 3rem; }
  .hero-vitrina { gap: 1.4rem 1rem; margin-top: 2.5rem; }
  .hp-rombo { width: 138px; height: 132px; }
  .hero .hero-desc { max-width: none; }
}
@media (max-width: 575.98px) {
  .hero-vitrina { grid-template-columns: repeat(2, 1fr); }
  .hp-rombo { width: 124px; height: 120px; }
  .hp-card h3 { font-size: 0.82rem; }
}

/* ============================================================
   Acciones de producto en el hero (13/07)
   Ocultas por defecto; aparecen al pasar el mouse por la tarjeta.
   Cada ícono muestra su etiqueta al posarse encima.
   ============================================================ */
.hp-acciones {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.7rem;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .3s ease, transform .3s ease;
  pointer-events: none;   /* no capturan el clic mientras están ocultas */
}
.hp-card:hover .hp-acciones,
.hp-card:focus-within .hp-acciones {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.hp-btn {
  position: relative;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: #fff;
  color: var(--oscuro);
  font-size: 0.9rem;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(54,64,59,0.22);
  transition: background .22s, color .22s, transform .22s;
}
.hp-btn:hover {
  background: var(--oscuro);
  color: #fff;
  transform: translateY(-3px);
}
.hp-btn.deshabilitado {
  opacity: 0.45;
  cursor: not-allowed;
}
.hp-btn.deshabilitado:hover {
  background: #fff;
  color: var(--oscuro);
  transform: none;
}

/* Etiqueta al posarse sobre el ícono */
.hp-btn::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--oscuro);
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 0.62rem;
  letter-spacing: 0.3px;
  white-space: nowrap;
  padding: 0.3rem 0.6rem;
  border-radius: 4px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.hp-btn:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* En pantallas táctiles no hay "pasar el mouse": las acciones quedan visibles */
@media (hover: none) {
  .hp-acciones { opacity: 1; transform: none; pointer-events: auto; }
  .hp-btn::after { display: none; }   /* sin tooltips en táctil */
}


/* RUC en el pie (dato público, SUNAT) */
.footer-ruc {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.6px;
  color: rgba(255,255,255,0.5);
  margin-top: 0.6rem;
}

/* ============================================================
   MODAL DE FICHA TÉCNICA (13/07)
   ============================================================ */
.ficha-modal {
  position: fixed; inset: 0;
  z-index: 2000;
  display: none;
  align-items: center; justify-content: center;
  padding: 2rem 1rem;
}
.ficha-modal.abierto { display: flex; }
.ficha-modal-fondo {
  position: absolute; inset: 0;
  background: rgba(26,31,28,0.82);
  backdrop-filter: blur(4px);
  animation: fichaFade .25s ease;
}
.ficha-modal-caja {
  position: relative;
  width: 100%; max-width: 880px;
  height: 90vh;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 30px 80px rgba(0,0,0,0.5);
  animation: fichaSube .3s cubic-bezier(0.2, 0.9, 0.3, 1);
}
@keyframes fichaFade { from { opacity: 0 } to { opacity: 1 } }
@keyframes fichaSube { from { opacity: 0; transform: translateY(24px) } to { opacity: 1; transform: none } }

.ficha-modal-cabecera {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.4rem;
  background: var(--oscuro2);
  border-bottom: 3px solid var(--verde);
}
.ficha-modal-eyebrow {
  display: block;
  font-family: 'Montserrat', sans-serif; font-weight: 700;
  font-size: 0.58rem; text-transform: uppercase; letter-spacing: 1.5px;
  color: var(--verde);
}
.ficha-modal-cabecera h4 {
  font-family: 'Montserrat', sans-serif; font-weight: 800;
  font-size: 1.1rem; color: #fff; margin: 0.1rem 0 0;
}
.ficha-modal-acciones { display: flex; align-items: center; gap: 0.7rem; }
.ficha-btn-descarga {
  display: inline-flex; align-items: center; gap: 0.45rem;
  background: var(--verde); color: var(--oscuro);
  font-family: 'Montserrat', sans-serif; font-weight: 700;
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.5px;
  padding: 0.6rem 1rem; border-radius: 4px;
  text-decoration: none; white-space: nowrap;
  transition: transform .2s;
}
.ficha-btn-descarga:hover { color: var(--oscuro); transform: translateY(-2px); }
.ficha-cerrar {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.12); color: #fff;
  border: none; border-radius: 50%;
  cursor: pointer; font-size: 0.9rem;
  transition: background .2s;
}
.ficha-cerrar:hover { background: rgba(255,255,255,0.25); }

.ficha-modal-cuerpo { flex: 1; background: var(--claro); }
.ficha-modal-cuerpo iframe { width: 100%; height: 100%; border: 0; display: block; }

@media (max-width: 575.98px) {
  .ficha-modal { padding: 1rem 0.5rem; }
  .ficha-modal-caja { height: 92vh; }
  .ficha-btn-descarga span { display: none; }
}

/* ============================================================
   ONDAS DIVISORIAS ENTRE SECCIONES (13/07)
   Continúan el lenguaje curvo del hero: ninguna sección corta recto.
   Se aplican con la clase .con-onda sobre la sección.
   ============================================================ */
.seccion { position: relative; }

.con-onda::before {
  content: "";
  position: absolute;
  top: -1px; left: 0; right: 0;
  height: 60px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center top;
  pointer-events: none;
  z-index: 1;
}

/* Onda que entra a una sección CLARA (#E8EBE3) desde una blanca */
.onda-claro::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L0,28 C 240,58 420,4 720,28 C 1010,51 1200,10 1440,32 L1440,0 Z' fill='%23FFFFFF'/%3E%3C/svg%3E");
}

/* Onda que entra a una sección BLANCA desde una clara */
.onda-blanco::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L0,30 C 260,4 440,54 740,30 C 1030,7 1210,48 1440,26 L1440,0 Z' fill='%23E8EBE3'/%3E%3C/svg%3E");
}

/* Onda que entra a una sección OSCURA desde una clara */
.onda-oscuro::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L0,26 C 250,52 430,6 730,30 C 1020,52 1220,8 1440,30 L1440,0 Z' fill='%23E8EBE3'/%3E%3C/svg%3E");
}

/* Onda que entra al CTA verde desde una sección clara */
.onda-verde::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L0,30 C 240,6 460,52 760,28 C 1040,6 1220,50 1440,28 L1440,0 Z' fill='%23E8EBE3'/%3E%3C/svg%3E");
}

/* El contenido de la sección debe respirar bajo la onda */
.con-onda > .container { position: relative; z-index: 2; }
.con-onda { padding-top: 6.5rem !important; }


/* El CTA final y la sección oscura también reciben la onda */
/* El .cta-final tiene overflow:hidden (por sus círculos decorativos), lo que
   recortaba la onda. Se dibuja dentro del área visible con z-index alto. */
.cta-final { position: relative; }
.cta-final.con-onda {
  padding-top: 8rem !important;
  overflow: hidden;
}
.cta-final.con-onda::before {
  top: 0;
  height: 70px;
  z-index: 3;   /* por encima de los círculos decorativos del CTA */
}
.seccion-oscura.con-onda::before {
  /* La sección oscura viene del CTA verde */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L0,26 C 250,52 430,6 730,30 C 1020,52 1220,8 1440,30 L1440,0 Z' fill='%23AFCB07'/%3E%3C/svg%3E");
}

/* Botón de cotización por WhatsApp en las tarjetas del hero */
.hp-btn.wsp:hover {
  background: #25D366;
  color: #fff;
}

/* ============================================================
   FORMULARIO DE SOLICITUD — parche v25
   Añade: campo trampa antispam, casilla de consentimiento,
   avisos de resultado y marca de campo opcional.

   NO reemplaza reglas anteriores. Las existentes que se siguen
   usando tal cual: .form-card, .form-card-titulo, .form-control,
   .form-select, .form-label, .btn-enviar, .ayuda
   ============================================================ */

/* Campo trampa: invisible para personas, presente para los robots.
   Se usa posición fuera de pantalla y NO display:none, porque
   algunos robots ignoran los campos ocultos con display:none. */
.campo-trampa {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Casilla de consentimiento de datos personales (Ley 29733) */
.form-consent {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  background: var(--claro);
  border-radius: 4px;
  padding: 0.85rem 1rem;
}

.form-consent input[type="checkbox"] {
  width: 17px;
  height: 17px;
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--verde);
  cursor: pointer;
}

.form-consent label {
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--texto);
  margin: 0;
  cursor: pointer;
}

.form-consent a {
  color: var(--oscuro);
  font-weight: 600;
  text-decoration: underline;
}

.form-consent a:hover { color: var(--verde-hover); }

/* Marca de campo opcional, para que se distinga del obligatorio */
.form-label .opcional {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--gris-verde);
}

/* Avisos de resultado tras el envío */
.form-aviso {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.9rem 1rem;
  border-radius: 4px;
  font-size: 0.85rem;
  line-height: 1.45;
  margin-bottom: 1.2rem;
}

.form-aviso i { font-size: 1rem; margin-top: 1px; flex-shrink: 0; }

.form-aviso.ok {
  background: rgba(175, 203, 7, 0.16);
  border-left: 3px solid var(--verde);
  color: var(--oscuro);
}

.form-aviso.err {
  background: rgba(192, 57, 43, 0.08);
  border-left: 3px solid #C0392B;
  color: #7d2419;
}

/* Foco visible en el botón: accesibilidad de teclado */
.btn-enviar:focus-visible {
  outline: 3px solid var(--oscuro);
  outline-offset: 2px;
}
/* Ola dedicada exclusivamente para el CTA Final */
.ola-separadora-cta {
  position: absolute;
  top: -1px; left: 0; right: 0;
  height: 70px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L0,30 C 240,6 460,52 760,28 C 1040,6 1220,50 1440,28 L1440,0 Z' fill='%23E8EBE3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center top;
  z-index: 3;
  pointer-events: none;
}

/* Forzamos el padding para compensar el espacio de la nueva ola */
.cta-final {
  padding-top: 8rem !important; 
}
/* ============================================================
   CATÁLOGO DE PRODUCTOS Y FICHA INDIVIDUAL (24/08)
   Clases nuevas para productos.php y producto.php.
   Verificado: ninguna de estas clases existía antes en main.css,
   no hay colisión con reglas previas.
   Reutilizan sin duplicar: .pagina-hero*, .prod-item, .prod-img,
   .prod-badge, .prod-body, .prod-link, .btn-ver-todo, .ficha-modal*
   ============================================================ */

/* --- Menú de categorías: pastillas de filtro por línea --- */
.cat-filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-bottom: 2.2rem;
}

.cat-filtro-chip {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--oscuro);
  text-decoration: none;
  padding: 0.55rem 1.1rem;
  border: 1px solid rgba(54,64,59,0.22);
  border-radius: 40px;
  background: #fff;
  transition: background .22s, color .22s, border-color .22s;
}

.cat-filtro-chip:hover {
  border-color: var(--verde);
  background: rgba(175,203,7,0.12);
  color: var(--oscuro);
}

.cat-filtro-chip.activo {
  background: var(--verde);
  border-color: var(--verde);
  color: var(--oscuro);
}

/* Aviso del filtro aplicado, con opción de quitarlo */
.cat-filtro-activo {
  font-size: 0.85rem;
  color: var(--texto-suave);
  margin-bottom: 1.6rem;
}
.cat-filtro-activo strong { color: var(--oscuro); }
.cat-filtro-activo a { color: var(--verde); text-decoration: underline; }

/* --- Título de cada línea dentro del catálogo --- */
.cat-linea-titulo {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--oscuro);
  margin: 2.4rem 0 1.2rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid rgba(54,64,59,0.12);
}
.cat-linea-titulo i { color: var(--verde); font-size: 1.15rem; }

/* --- Estado vacío / sin resultados / servicio caído --- */
.cat-vacio {
  background: var(--claro);
  border-left: 4px solid var(--verde);
  border-radius: 6px;
  padding: 1.2rem 1.4rem;
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--texto-suave);
}
.cat-vacio i { color: var(--verde); }

/* ============================================================
   FICHA INDIVIDUAL DE PRODUCTO (producto.php)
   Prefijo .pf- = "producto ficha"
   ============================================================ */

/* Migas de pan */
.pf-miga {
  font-size: 0.78rem;
  color: var(--gris-verde);
  margin-bottom: 1.8rem;
}
.pf-miga a { color: var(--texto-suave); text-decoration: none; }
.pf-miga a:hover { color: var(--verde); }

/* Imagen principal del producto */
.pf-imagen {
  width: 100%;
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
  background-color: var(--oscuro);
  border-radius: 8px;
  box-shadow: 0 14px 40px rgba(0,0,0,0.18);
}

/* Etiqueta de la línea de negocio */
.pf-linea-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--verde);
  background: rgba(175,203,7,0.14);
  padding: 0.35rem 0.75rem;
  border-radius: 3px;
  margin-bottom: 0.8rem;
}

.pf-titulo {
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  color: var(--oscuro);
  line-height: 1.1;
  margin-bottom: 1.2rem;
}

/* Aviso de contenido pendiente de validación del cliente.
   Mismo lenguaje visual que .aviso-borrador de las páginas legales. */
.pf-aviso-pendiente {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  background: #FFF9E6;
  border: 1px solid #F0D97A;
  border-radius: 6px;
  padding: 0.85rem 1.1rem;
  margin-bottom: 1.4rem;
  font-size: 0.83rem;
  color: #6B5600;
  line-height: 1.55;
}
.pf-aviso-pendiente i { color: #C99A00; font-size: 1rem; margin-top: 2px; }

/* Bloques de contenido: descripción, materiales, aplicaciones */
.pf-bloque { margin-bottom: 1.5rem; }
.pf-bloque h6 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--verde);
  margin-bottom: 0.4rem;
}
.pf-bloque p {
  font-size: 0.92rem;
  line-height: 1.75;
  color: var(--texto-suave);
  margin: 0;
}

/* Acciones: cotizar y ficha técnica */
.pf-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 2rem;
}

.pf-btn-cotizar {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background: #25D366;
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 0.9rem 1.7rem;
  border-radius: 4px;
  text-decoration: none;
  transition: transform .25s, box-shadow .25s;
}
.pf-btn-cotizar:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(37,211,102,0.35);
}

.pf-btn-ficha {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background: var(--oscuro);
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 0.9rem 1.7rem;
  border-radius: 4px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: transform .25s, background .25s;
}
.pf-btn-ficha:hover {
  background: var(--oscuro2);
  color: var(--verde);
  transform: translateY(-2px);
}

/* Responsive: en móvil los botones ocupan todo el ancho */
@media (max-width: 575.98px) {
  .pf-acciones { flex-direction: column; }
  .pf-btn-cotizar, .pf-btn-ficha { justify-content: center; width: 100%; }
  .cat-filtro-chip { font-size: 0.65rem; padding: 0.45rem 0.9rem; }
}


/* ============================================================
   GALERIA DE IMAGENES — Ficha de producto
   Miniaturas debajo de la imagen principal + lightbox
   ============================================================ */

/* Imagen principal clickable */
.pf-img-clickable { cursor: zoom-in; }

/* Fila de miniaturas */
.pf-galeria {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.6rem;
}
.pf-galeria-thumb {
  width: 64px;
  height: 64px;
  background-size: cover;
  background-position: center;
  background-color: var(--claro);
  border-radius: 5px;
  cursor: pointer;
  border: 2px solid transparent;
  opacity: 0.7;
  transition: opacity 0.2s, border-color 0.2s;
}
.pf-galeria-thumb:hover {
  opacity: 1;
}
.pf-galeria-thumb-activa {
  border-color: var(--verde);
  opacity: 1;
}

/* --- Lightbox (overlay a pantalla completa) --- */
.pf-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s, visibility 0.25s;
}
.pf-lightbox-abierto {
  opacity: 1;
  visibility: visible;
}
.pf-lightbox-fondo {
  position: absolute;
  inset: 0;
  background: rgba(26, 31, 28, 0.92);
  cursor: pointer;
}
.pf-lightbox-contenido {
  position: relative;
  z-index: 2;
  max-width: 90vw;
  max-height: 85vh;
  text-align: center;
}
.pf-lightbox-contenido img {
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}
.pf-lightbox-contenido p {
  color: #E8EBE3;
  font-size: 0.85rem;
  margin-top: 0.8rem;
  font-family: 'Inter', sans-serif;
}
.pf-lightbox-cerrar {
  position: absolute;
  top: 1.2rem;
  right: 1.5rem;
  z-index: 3;
  background: none;
  border: none;
  color: #E8EBE3;
  font-size: 1.5rem;
  cursor: pointer;
  transition: color 0.2s;
}
.pf-lightbox-cerrar:hover { color: var(--verde); }

@media (max-width: 575.98px) {
  .pf-galeria-thumb { width: 52px; height: 52px; }
}

/* ============================================================
   BLOG — Listado publico
   ============================================================ */
.blog-hero {
  background: var(--oscuro);
  padding: 3rem 0 2rem;
  text-align: center;
}
.blog-hero-titulo {
  font-family: 'Montserrat', sans-serif;
  font-weight: 900; font-size: 2.2rem;
  color: var(--blanco);
}
.blog-hero-sub {
  color: var(--gris-verde); font-size: 0.95rem;
  margin-top: 0.3rem;
}
.blog-filtros {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 0.5rem; margin-top: 1.5rem;
}
.blog-filtro {
  padding: 0.4rem 1rem; border-radius: 20px;
  font-size: 0.8rem; font-weight: 600;
  background: rgba(255,255,255,0.06); color: var(--claro);
  text-decoration: none; transition: all 0.15s;
}
.blog-filtro:hover { background: rgba(255,255,255,0.12); color: var(--blanco); }
.blog-filtro-activo {
  background: var(--verde); color: var(--oscuro);
}

.blog-listado { padding: 2.5rem 0 3rem; }
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.5rem;
}
.blog-card {
  background: var(--blanco);
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none; color: inherit;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  transition: transform 0.2s, box-shadow 0.2s;
}
.blog-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}
.blog-card-img {
  height: 200px;
  background-size: cover; background-position: center;
  background-color: var(--claro);
  display: flex; align-items: center; justify-content: center;
}
.blog-card-img i { font-size: 2.5rem; color: rgba(0,0,0,0.08); }
.blog-card-cuerpo { padding: 1.2rem; }
.blog-card-cat {
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.5px; color: var(--verde);
}
.blog-card-titulo {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800; font-size: 1.05rem;
  color: var(--oscuro); margin: 0.4rem 0;
  line-height: 1.3;
}
.blog-card-extracto {
  font-size: 0.85rem; color: #666; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.blog-card-fecha {
  display: block; margin-top: 0.8rem;
  font-size: 0.75rem; color: var(--gris-verde);
}
.blog-vacio {
  text-align: center; padding: 4rem 1rem; color: var(--gris-verde);
}
.blog-vacio i { font-size: 3rem; display: block; margin-bottom: 0.8rem; }

/* ============================================================
   ARTICULO — Pagina individual
   ============================================================ */
.art-hero { background: var(--oscuro); padding: 2rem 0 0; }
.art-hero .container { max-width: 800px; }
.art-cat {
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.5px; color: var(--verde);
}
.art-cat a { color: var(--verde); text-decoration: none; }
.art-cat a:hover { text-decoration: underline; }
.art-titulo {
  font-family: 'Montserrat', sans-serif;
  font-weight: 900; font-size: 2rem;
  color: var(--blanco); margin: 0.5rem 0; line-height: 1.2;
}
.art-bajada { color: var(--claro); font-size: 1.05rem; line-height: 1.6; }
.art-meta {
  display: flex; gap: 1.2rem; margin-top: 0.8rem;
  font-size: 0.8rem; color: var(--gris-verde);
}
.art-cover { margin: 1.5rem 0 0; }
.art-cover img {
  width: 100%; border-radius: 10px 10px 0 0;
  max-height: 400px; object-fit: cover;
}

/* Caso de exito: problema/solucion/resultado */
.art-caso { background: #f8faf3; padding: 1.5rem 0; }
.art-caso .container { max-width: 800px; }
.art-caso-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; }
.art-caso-item { padding: 1rem; background: var(--blanco); border-radius: 8px; border-left: 4px solid var(--verde); }
.art-caso-label {
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.5px; color: var(--verde); display: block; margin-bottom: 0.3rem;
}
.art-caso-item p { font-size: 0.88rem; color: var(--oscuro); }

/* Cuerpo del articulo */
.art-cuerpo { padding: 2rem 0 3rem; }
.art-contenido { max-width: 800px; }
.art-contenido h2 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800; font-size: 1.3rem;
  color: var(--oscuro); margin: 2rem 0 0.6rem;
}
.art-num { color: var(--verde); }
.art-contenido p {
  font-size: 0.92rem; line-height: 1.7;
  color: #444; margin-bottom: 1rem;
}
.art-contenido figure {
  margin: 1.5rem 0;
}
.art-contenido figure img {
  width: 100%; border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
.art-contenido figcaption {
  font-size: 0.78rem; color: var(--gris-verde);
  margin-top: 0.4rem; text-align: center;
}

/* Resumen ejecutivo */
.art-resumen {
  background: #f8faf3; border-left: 4px solid var(--verde);
  border-radius: 0 8px 8px 0; padding: 1.2rem 1.5rem;
  margin: 1.5rem 0;
}
.art-resumen h4 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700; font-size: 0.9rem;
  color: var(--oscuro); margin-bottom: 0.5rem;
}
.art-resumen ul { padding-left: 1.2rem; }
.art-resumen li { font-size: 0.88rem; margin-bottom: 0.3rem; color: #444; }

/* Hallazgo clave */
.art-hallazgo {
  background: #fffbeb; border-left: 4px solid #f59e0b;
  border-radius: 0 8px 8px 0; padding: 1rem 1.2rem;
  font-size: 0.9rem; color: #92400e; margin: 1.2rem 0;
}

/* Modo de falla */
.art-modo {
  background: #fef2f2; border: 1px solid #fecaca;
  border-radius: 8px; padding: 1rem 1.2rem; margin: 1.2rem 0;
}
.art-modo-titulo {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700; font-size: 0.92rem;
  color: #991b1b; margin-bottom: 0.5rem;
}
.art-modo-titulo i { color: #dc2626; }
.art-modo p { font-size: 0.85rem; color: #7f1d1d; margin: 0.3rem 0; }
.art-modo-accion {
  background: #dcfce7; padding: 0.5rem 0.8rem;
  border-radius: 5px; font-size: 0.85rem;
  color: #166534; margin-top: 0.5rem;
}

/* Tabla */
.art-tabla {
  width: 100%; border-collapse: collapse;
  margin: 1rem 0; font-size: 0.88rem;
}
.art-tabla th {
  text-align: left; padding: 0.6rem 0.8rem;
  background: var(--claro); font-weight: 600;
  color: var(--oscuro); border-bottom: 2px solid var(--verde);
}
.art-tabla td {
  padding: 0.6rem 0.8rem;
  border-bottom: 1px solid #eee;
}

/* Referencias */
.art-referencias {
  background: #f5f5f4; border-radius: 8px;
  padding: 1rem 1.5rem; margin: 2rem 0;
}
.art-referencias h4 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700; font-size: 0.85rem; color: var(--oscuro);
}
.art-referencias ol { padding-left: 1.2rem; }
.art-referencias li { font-size: 0.8rem; color: #666; margin-bottom: 0.3rem; }

/* CTA */
.art-cta {
  background: var(--oscuro); color: var(--claro);
  border-radius: 10px; padding: 1.5rem 2rem;
  text-align: center; margin: 2rem 0;
}
.art-cta p { color: var(--claro); font-size: 1rem; margin-bottom: 1rem; }
.art-cta-btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: var(--verde); color: var(--oscuro);
  padding: 0.7rem 1.5rem; border-radius: 6px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700; font-size: 0.9rem;
  text-decoration: none; transition: background 0.15s;
}
.art-cta-btn:hover { background: #9ab806; }

/* Compartir */
.art-compartir {
  display: flex; align-items: center; gap: 0.8rem;
  padding-top: 2rem; margin-top: 2rem;
  border-top: 1px solid var(--claro);
  font-size: 0.82rem; color: var(--gris-verde);
}
.art-compartir a {
  color: var(--oscuro); font-size: 1.2rem;
  transition: color 0.15s;
}
.art-compartir a:hover { color: var(--verde); }

@media (max-width: 575.98px) {
  .art-titulo { font-size: 1.5rem; }
  .blog-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   SERVICIOS — Listado publico (servicios.php)
   ============================================================ */
.srv-pub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}
.srv-pub-card {
  background: var(--blanco);
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none; color: inherit;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  transition: transform 0.2s, box-shadow 0.2s;
}
.srv-pub-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}
.srv-pub-img {
  height: 200px;
  background-size: cover; background-position: center;
  background-color: var(--claro);
  display: flex; align-items: center; justify-content: center;
}
.srv-pub-img i { font-size: 2.5rem; color: rgba(0,0,0,0.08); }
.srv-pub-cuerpo { padding: 1.2rem; }
.srv-pub-cuerpo h4 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800; font-size: 1rem;
  color: var(--oscuro); margin-bottom: 0.4rem;
}
.srv-pub-cuerpo p {
  font-size: 0.85rem; color: #666; line-height: 1.5;
  margin-bottom: 0.6rem;
}
.srv-pub-link {
  font-size: 0.8rem; font-weight: 600;
  color: var(--verde);
}

@media (max-width: 575.98px) {
  .srv-pub-grid { grid-template-columns: 1fr; }
}
/* ============================================================
   FIX — Blog y artículo tapados por la cabecera fija
   3 EKA S.A.C. — 28/08/2026
   ------------------------------------------------------------
   CAUSA: .art-hero y .blog-hero se escribieron con un padding
   superior insuficiente (2rem y 3rem). La cabecera del sitio es
   fija y mide aproximadamente 6rem, por lo que tapaba la primera
   línea del contenido (la miga de pan y la etiqueta de categoría).

   REFERENCIA: .pagina-hero, que usan productos.php y
   servicios.php, ya resolvía esto con padding: 8rem 0 3.5rem.
   Aquí se aplica el mismo criterio.

   INSTALACIÓN: pegar este bloque al FINAL de
   assets/css/main.css. Al ir después, sus reglas prevalecen
   sobre las anteriores sin necesidad de editarlas.
   ============================================================ */

/* --- Cabecera del listado del blog (blog.php) --- */
.blog-hero {
  padding: 8rem 0 2.5rem;
}

/* --- Cabecera del artículo individual (articulo.php) --- */
.art-hero {
  padding: 7.5rem 0 0;
}

/* La miga de pan es la primera línea del artículo: se le da
   aire suficiente para que nunca quede pegada a la cabecera. */
.art-hero .pf-miga {
  margin-bottom: 1rem;
}

/* En pantallas pequeñas la cabecera es más baja y el menú se
   colapsa, así que no hace falta tanto espacio. */
@media (max-width: 991.98px) {
  .blog-hero { padding: 6.5rem 0 2rem; }
  .art-hero  { padding: 6rem 0 0; }
}

@media (max-width: 575.98px) {
  .blog-hero { padding: 5.5rem 0 1.8rem; }
  .art-hero  { padding: 5.5rem 0 0; }
}

/* ============================================================
   ESPECIALISTA DE LÍNEA — bloque de derivación (Bombas)
   Se usa en productos.php?linea=bombas y en la ficha de cada bomba.
   ============================================================ */

.esp-bloque {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  flex-wrap: wrap;
  background: #FFFFFF;
  border: 1px solid var(--claro, #E8EBE3);
  border-left: 5px solid var(--verde, #AFCB07);
  border-radius: 10px;
  padding: 1.2rem 1.4rem;
  margin: 1.2rem 0 1.8rem;
  box-shadow: 0 2px 10px rgba(54, 64, 59, 0.06);
}

/* Ícono redondo con la gota de marca como fondo sutil */
.esp-avatar {
  flex: 0 0 auto;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--claro, #E8EBE3);
  display: flex;
  align-items: center;
  justify-content: center;
}
.esp-avatar i {
  font-size: 1.7rem;
  color: var(--oscuro, #36403B);
}

.esp-datos {
  flex: 1 1 260px;
  min-width: 0;
}

.esp-rotulo {
  display: inline-block;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #6B8306;
  background: #F3F7E7;
  padding: 0.18rem 0.55rem;
  border-radius: 12px;
  margin-bottom: 0.4rem;
}

.esp-nombre {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--oscuro, #36403B);
  margin: 0.15rem 0 0.1rem;
  line-height: 1.2;
}

.esp-cargo {
  font-size: 0.82rem;
  color: var(--gris-verde, #97A180);
  margin: 0 0 0.35rem;
}

.esp-texto {
  font-size: 0.85rem;
  color: #555;
  line-height: 1.5;
  margin: 0;
}

.esp-accion {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.35rem;
}

.esp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: var(--oscuro, #36403B);
  color: #FFFFFF;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 0.82rem;
  padding: 0.7rem 1.3rem;
  border-radius: 6px;
  text-decoration: none;
  transition: background 0.18s ease, transform 0.1s ease;
  white-space: nowrap;
}
.esp-btn:hover {
  background: #2A322D;
  color: #FFFFFF;
}
.esp-btn:active { transform: scale(0.98); }
.esp-btn i { font-size: 1rem; }

.esp-tel {
  text-align: center;
  font-size: 0.78rem;
  color: var(--gris-verde, #97A180);
  letter-spacing: 0.02em;
}

/* --- Responsive --- */
@media (max-width: 767.98px) {
  .esp-bloque {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.9rem;
  }
  .esp-accion {
    width: 100%;
  }
  .esp-btn {
    width: 100%;
  }
}
/* ============================================================
   CASOS DE EXITO EN EL HOME — ahora dinamicos y clicables
   ------------------------------------------------------------
   La tarjeta paso de <div> a <a>: hay que neutralizar los
   estilos por defecto del enlace y agregar respuesta al hover,
   porque ahora si lleva a algun lado.

   Los KPIs numericos de la maqueta (.caso-stats) se reemplazan
   por el campo Resultado del caso, que es dato real. Las reglas
   de .caso-stats se dejan intactas por si se retoman.
   ============================================================ */

a.caso-item {
  text-decoration: none;
  color: inherit;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
a.caso-item:hover {
  transform: translateY(-3px);
}
.casos-claro a.caso-item:hover {
  box-shadow: 0 10px 26px rgba(0,0,0,0.10);
  border-color: rgba(175,203,7,0.55);
}
a.caso-item:hover h5 {
  color: #6B8306;
}
.casos-claro a.caso-item h5 {
  transition: color 0.18s ease;
}

/* --- Bloque de resultado (sustituye a los KPIs inventados) --- */
.caso-resultado {
  margin-top: 0.9rem;
  padding-top: 0.7rem;
  border-top: 1px solid rgba(54,64,59,0.10);
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--oscuro);
}
.caso-resultado-rotulo {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #6B8306;
  margin-bottom: 0.22rem;
}

/* Si la seccion se usara sobre fondo oscuro, el texto se aclara */
.casos-grid:not(.casos-claro) .caso-resultado {
  border-top-color: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.75);
}