/*
  Paleta de marca — Peppers Plus
  =================================
  main.css (el CSS compilado del template "Agrigo") define todos sus colores
  como variables CSS en :root (ver su bloque :root, ~línea 22) y las usa en
  ~270 lugares. En vez de tocar ese archivo, esta hoja se carga DESPUÉS y
  sobreescribe solo esas variables — así el layout/diseño del template no
  cambia en absoluto, solo la paleta de color (+ el tamaño de los logos, ver
  más abajo).

  Colores reales de marca (confirmados por el cliente 25-ago-2026):
    - Rojo:  #C90116
    - Verde: #026A3A
  (Antes esta hoja traía una aproximación a partir de los PANTONE U que se
  habían dado inicialmente — 187 U / 348 U —, pero el cliente aclaró que esos
  Pantone no correspondían al branding real. Estos hex SÍ son los oficiales,
  no una conversión.)

  Mapeo de variables:
    --cp-color-theme-primary   (antes verde brillante #65CB3B, acentos/botones)
      → Rojo de marca #C90116
    --cp-color-heading-primary (antes verde oscuro #00652F, headings/top-bar)
      → Verde de marca #026A3A
    --cp-color-text-2 / --cp-color-border-1
      → tinte pálido derivado de #026A3A (mismo criterio que el template
        original: un gris-verdoso suave para texto secundario y bordes)
    --cp-color-grey-1
      → tinte casi blanco derivado de #026A3A (fondo alterno de secciones)
    --cp-color-bg-1 (crema neutro #FAF8EB) queda igual — no está atado al
      verde original, funciona bien con cualquiera de los dos colores de marca.

  Si el orden preferido fuera al revés (verde como color principal de
  encabezados y rojo como acento — o viceversa), swap estos dos valores.
*/

:root {
  --cp-color-theme-primary: #c90116; /* Rojo de marca */
  --cp-color-heading-primary: #026a3a; /* Verde de marca */
  --cp-color-text-2: #c7d9d0;
  --cp-color-border-1: #c7d9d0;
  --cp-color-grey-1: #f2f8f5;
}

/*
  Logos reales (ver 00-Documentación/02-Assets/01-Branding/)
  =============================================================
  logo.png    — isologo completo "PEPPERS PLUS" (1000×185, mismo aspect
                ratio ~5.4:1 que los logo-1/2/3.png del template que
                reemplaza, así que no distorsiona).
  isotipo.png — solo la marca (el rombo rojo con la cruz blanca y el
                remate verde), para espacios chicos como el ícono
                decorativo junto a los "eyebrow" (sub-heading) de cada
                sección, que antes usaba sec-logo.png (una hojita verde).

  El template no traía un tamaño fijo para el <img> del logo del header
  (solo padding en el contenedor `.header-logo`), así que sin esto el logo
  se vería a su tamaño real (enorme). Estas reglas replican el tamaño que
  tenían los logos originales del template.
*/
.header .primary-header-inner .header-logo img {
  height: 36px;
  width: auto;
}

/*
  El template original pintaba esta caja con --cp-color-theme-primary (antes
  verde brillante) porque su logo era blanco — pensado para ir sobre un fondo
  de color. El logo real de Peppers Plus ya trae sus propios colores (rojo +
  verde) sobre fondo transparente, así que sobre un fondo rojo el texto rojo
  del logo se vuelve invisible. Se quita ese fondo para que se vea tal cual.
*/
.header .primary-header-inner .header-logo {
  background-color: transparent;
}

/*
  Bug preexistente del template: la regla real es
  ".footer-widget .widget-header .footer-logo { max-width: 170px }", pero en
  el markup .footer-logo NO está dentro de un .widget-header (ese wrapper solo
  envuelve el <h3> de los otros widgets del footer) — el selector nunca
  matcheaba, así que .footer-logo nunca tuvo límite de ancho. No se notaba con
  el logo viejo (179px, ya chico de por sí); con el logo real (1000px de
  ancho original) se ve gigante sin este fix.
*/
.footer-widget .footer-logo {
  max-width: 220px;
}
/*
  El logo real trae sus propios colores (rojo/verde/blanco) — para verlo en
  blanco sólido sobre el footer oscuro (no hay una versión monocromática del
  archivo), se usa un filtro CSS que convierte cualquier píxel no
  transparente a blanco.
*/
.footer-widget .footer-logo img {
  filter: brightness(0) invert(1);
}

.section-heading .sub-heading img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

/*
  Logo en la animación del preloader (antes era el texto "Peppers Plus" en
  span; ver .site-name en main.css — fondo casi negro #111, texto blanco).
  Nuestro logo ya trae sus propios colores y se ve bien sobre ese fondo
  oscuro, así que solo hace falta acotar su tamaño.
*/
.site-name img {
  max-width: 90vw;
  width: 640px;
  height: auto;
}

/*
  Forma decorativa detrás del contenido del footer (igual patrón que usa el
  template en otras secciones: .about-section .about-bg-shape, .feature-
  section-2 .shape-1 — imagen absoluta + z-index negativo dentro de un
  contenedor con position:relative, así queda detrás sin afectar el layout).
  footer-shape-1.png venía en el template pero no se usaba en ningún lado.
*/
.footer-section {
  position: relative;
  z-index: 1;
}
.footer-section .footer-bg-shape {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: -1;
  opacity: 0.06;
  pointer-events: none;
}

/*
  Alineación de las 3 columnas del footer: logo/descripción/redes al centro,
  Quick Links a la izquierda, la info de contacto a la derecha.
*/
.footer-col-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.footer-col-links {
  text-align: left;
}

.footer-col-info {
  text-align: right;
}
.footer-col-info .footer-list-wrap {
  justify-content: flex-end;
}

/*
  Sin el <h2 class="title-logo"> gigante que traía el template (se quitó,
  ver "Ajustes de feedback" en CLAUDE.md), ya no había separación entre el
  contenido del footer (la dirección, en la columna de la derecha) y la
  línea divisoria de .footer-bottom-2 — quedaban pegados.
*/
.footer-wrapper {
  padding-bottom: 50px;
}

/*
  Top bar del header: "Peppers Plus" en el mensaje de bienvenida en blanco
  (el template lo pintaba con --cp-color-theme-primary, nuestro rojo, más
  subrayado) y el email/teléfono ahora son <a> (mailto:/tel:) en vez de texto
  plano — sin este override tomarían el azul de link por defecto del
  navegador, porque el template no tiene un reset de color para <a>.
*/
.header .top-bar .top-bar-inner .top-desc span {
  color: var(--cp-color-common-white);
}
.header .top-bar .top-bar-inner .top-bar-list li a {
  color: inherit;
}
.header .top-bar .top-bar-inner .top-bar-list li a:hover {
  color: var(--cp-color-theme-primary);
}

/*
  Logo del header en mobile: el template le da padding fijo (21px 32px) a
  .header-logo pensando en la caja de color que traía de fondo (ya la
  quitamos, ver arriba) — sin esa caja, ese padding se ve desproporcionado al
  lado del botón hamburguesa. Se reduce en mobile para que ambos queden
  visualmente balanceados (logo a la izquierda, hamburguesa a la derecha,
  mismo "peso" visual).
*/
@media (max-width: 767px) {
  .header .primary-header-inner .header-logo {
    padding: 24px 0;
  }
}

/*
  Los íconos de .side-menu-list (sidebar y menú móvil) tenían width/height
  fijos en main.css, pero <i> es un elemento inline — width/height no aplican
  a elementos inline, así que cada ícono terminaba con el ancho de su propio
  glifo (el de "location" es más ancho que el de "phone" o "email"),
  desalineando el texto de al lado. Con inline-flex, el tamaño fijo sí aplica
  y los 3 quedan del mismo ancho.
*/
.side-menu-list li i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/*
  El botón "volver arriba" (#scroll-percentage) mostraba el % de scroll
  (assets/js/main.js, función scrollPercentage) y solo cambiaba a una
  flecha hacia arriba cerca del final de la página. Se pidió que siempre
  muestre la flecha. En vez de tocar main.js, se oculta el texto/ícono que
  JS le inyecta a #scroll-percentage-value (queda con font-size:0, sigue
  ahí por si algo más lo usa) y se superpone un ícono fijo propio
  (.scroll-top-icon) que no depende del scroll.
*/
#scroll-percentage-value {
  font-size: 0;
}
#scroll-percentage .scroll-top-icon {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 20px;
  color: var(--cp-color-common-white);
  pointer-events: none;
}

/*
  Footer en mobile: orden Logo/descripción/redes → Quick Links → Information
  (distinto del orden en desktop), y todo centrado.
*/
@media (max-width: 767px) {
  .footer-col-brand-wrap {
    order: 1;
  }
  .footer-col-links-wrap {
    order: 2;
  }
  .footer-col-info-wrap {
    order: 3;
  }

  .footer-col-links,
  .footer-col-info {
    text-align: center;
  }
  .footer-col-info .footer-list-wrap {
    justify-content: center;
  }

  .footer-bottom-2 .copyright-txt,
  .footer-bottom-2 .footer-bottom-inner .txt {
    font-size: 13px;
  }
  .footer-bottom-2 .footer-bottom-inner {
    justify-content: center;
    text-align: center;
  }
}

/*
  El menú móvil (el panel que abre el botón hamburguesa) usaba el isologo
  completo "PEPPERS PLUS" — se ve mejor solo el isotipo (la marca sola) en
  ese espacio chico, junto al botón de cerrar.
*/
.mobile-side-menu .side-menu-head .side-menu-logo-link img {
  max-width: 48px;
}

/*
  "Why Peppers Plus": la foto pequeña (feature-img-02, un grower parado en
  el campo) queda muy apretada en mobile al lado de la lista de features —
  se oculta en mobile y se deja solo la foto grande (feature-img-01).
*/
@media (max-width: 767px) {
  #diferenciadores .image-wrap {
    display: none;
  }
}

/*
  Contenido de cada sección centrado en mobile (antes quedaba alineado a la
  izquierda, heredado del layout desktop en columnas). No aplica a Hero (ya
  tiene su propio diseño) ni a las tarjetas/ítems repetidos de cada sección
  (product cards, count-item, process-item, feature-item, feature-item-2,
  about-info-wrap), que mantienen su alineación original.
*/
@media (max-width: 767px) {
  #nosotros .section-heading,
  #nosotros .about-content > .desc,
  #nosotros .about-btn,
  #servicios .service-top .section-heading,
  #diferenciadores .section-heading,
  #diferenciadores .features-btn,
  #cifras .counter-text,
  #proceso .section-heading,
  .feature-section-2 .section-heading,
  .feature-section-2 .feature-btn,
  .cta-section-2 .cta-content-2,
  #contacto .col-xl-8 > .title,
  #contacto .content-left > .desc {
    text-align: center;
  }

  #nosotros .about-btn,
  #diferenciadores .features-btn,
  .feature-section-2 .feature-btn,
  .cta-section-2 .cta-content-2 {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  #contacto .content-left .social-list {
    justify-content: center;
  }
}

/*
  Segunda ronda de centrado en mobile: partes que no quedaron cubiertas por
  el bloque anterior porque no son ".section-heading"/".desc"/botón, sino
  elementos con su propio layout (flex/grid) que ponía todo a la izquierda.
*/
@media (max-width: 767px) {
  /* Products: título + flechas del carrusel, uno debajo del otro y
     centrados (antes en fila con justify-content: space-between). */
  #servicios .service-top {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  /* How We Work: cada paso (ícono, título, texto) centrado — antes solo el
     texto quedaba a la izquierda del ícono. */
  #proceso .process-item {
    text-align: center;
  }
  #proceso .process-item .icon {
    margin-left: auto;
    margin-right: auto;
  }

  /* Food Safety: los bullets (FSMA Compliant / FSVP Verified Suppliers)
     centrados como bloque, no la fila completa que antes quedaba pegada
     a la izquierda del contenedor. */
  .feature-section-2 .feature-content-2 .list {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* Contact (Get in Touch): email/teléfono/dirección centrados. */
  #contacto .content-right .list li {
    align-items: center;
    text-align: center;
  }

  /* Formulario (Send Message): título, inputs/textarea y botón centrados. */
  .contact-content .contact-title {
    text-align: center;
  }
  .contact-content .form-control {
    text-align: center;
  }
  .contact-content .contact-btn {
    display: block;
    margin: 0 auto;
  }
}