@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
  --c-primary-100: #f5f0f3;
  --c-primary-200: #e8d0df;
  --c-primary-300: #c990b0;
  --c-primary-400: #a86090;
  --c-primary-500: #7f406a;
  --c-primary-600: #6a3358;
  --c-primary-700: #4e2440;
  --c-primary-800: #33162a;

  --c-secondary-100: #f0fafa;
  --c-secondary-200: #c8eeee;
  --c-secondary-300: #87d9d9;
  --c-secondary-400: #60cccc;
  --c-secondary-500: #41bebd;
  --c-secondary-600: #329e9d;
  --c-secondary-700: #237e7d;
  --c-secondary-800: #145e5e;

  --c-white:        #ffffff;
  --c-gray-50:      #f9f9f9;
  --c-gray-100:     #f2f2f2;
  --c-gray-200:     #e5e5e5;
  --c-gray-300:     #d0d0d0;
  --c-gray-400:     #a0a0a0;
  --c-gray-500:     #6c757d;
  --c-gray-700:     #3d3d3d;
  --c-gray-900:     #1a1a1a;
  --c-black:        #111111;

  --c-success:  #28a745;
  --c-warning:  #ffc107;
  --c-danger:   #dc3545;
  --c-info:     #41bebd;

  --font-heading: 'Barlow Condensed', sans-serif;
  --font-body:    'Inter', sans-serif;

  --jakarta-font-family: 'Inter', sans-serif !important;
  --spartan-font-family: 'Barlow Condensed', sans-serif !important;

  --primary-color: #7f406a !important;
  --light-primary-color: #a86090 !important;
  --secondary-color: #4e2440 !important;
  --main-secondary-color: #4e2440 !important;
  --secondary-dark-color: #33162a !important;
  --page-bg-color: #f5f0f3 !important;
  --paragraph-color: #3d3d3d !important;
  --paragraph-light-color: rgba(255,255,255,0.65) !important;
  --paragraph-md-color: #6c757d !important;
  --primary-btn-hover-color: #f5f0f3 !important;
  --bg-light: #f5f0f3 !important;
  --bg-md-light: #e8d0df !important;
  --moving-text-color: #c990b0 !important;
  --hero-bg-color: #33162a !important;
  --border-color: #e8d0df !important;
  --border-color-1: #e8d0df !important;
  --transparent-primary-color: rgba(127,64,106,0.6) !important;
  --transparent-secondary-color: rgba(78,36,64,0.04) !important;
  --bg-semi-black-transparent: rgba(78,36,64,0.6) !important;
  --bg-black-transparent: rgba(51,22,42,0.9) !important;
  --primary-button-hover-bg: #f5f0f3 !important;
  --secondary-button-bg: #41bebd !important;
  --secondary-btn-text-color: #ffffff !important;
  --primary-btn-text-color: #ffffff !important;
}

body {
  font-family: var(--font-body);
  color: var(--c-gray-700);
}

h1, h2, h3,
.main-heading,
.main-title {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--c-gray-900);
}

h1 {
  font-size: 60px;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

h2, .main-heading {
  font-size: clamp(1.8rem, 3.5vw, 2.75rem);
  line-height: 1.15;
}

h3 {
  font-size: clamp(1.3rem, 2.5vw, 1.75rem);
  font-weight: 600;
  line-height: 1.25;
}

h4 {
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--c-gray-900);
}

p {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.75;
  color: var(--c-gray-700);
}

.sub-heading {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-primary-500);
  margin-bottom: 0.5rem;
}

.section-eyebrow {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-primary-500);
  display: block;
  margin-bottom: 0.5rem;
}

.display-number {
  font-family: var(--font-heading);
  font-size: clamp(3rem, 6vw, 5rem);
  font-weight: 700;
  line-height: 1;
  color: var(--c-primary-500);
}

.main-heading::after {
  content: '';
  display: block;
  width: 50px;
  height: 3px;
  background: var(--c-secondary-500);
  margin: 0.75rem auto 0;
}

.text-left .main-heading::after,
.section-header.text-left .main-heading::after {
  margin-left: 0;
}

/* Quitar línea celeste del titular en página de contacto */
.coppsa-contact-page .contact-detail-section .main-heading::after {
  display: none !important;
  content: none !important;
}

/* Sección Novedades (home-5 + página novedades.html): quitar la línea
   celeste bajo el titular "Últimas novedades y promociones". */
.coppsa-news-section .main-heading::after,
.coppsa-news-headings .main-heading::after {
  display: none !important;
  content: none !important;
}

/* Páginas de servicios (servicio-*.html, services-detail.html):
   quitar la línea celeste decorativa bajo los titulares internos. */
.services-detail-section .main-heading::after {
  display: none !important;
  content: none !important;
}

/* Novedad-detail: usa la estructura nativa de la plantilla
   (.blog-detail-section, .date-tag, .tag-btn, etc.). Los colores
   de marca ya provienen de los tokens COPPSA globales. */

/* Frase destacada (.services-quote-section) dentro de novedad-detail.
   Base = plantilla (img izq + frase der, fondo wine con chamfer).
   Ajustes mínimos:
   1) Acotar el ancho de la imagen (~30%) para que no se desborde
      con fotos verticales y respete la proporción de la referencia.
   2) Tinte vino sobre la foto mezclando con el fondo de la sección.
   3) Quitar la línea celeste debajo del titular. */
.blog-detail-section .inner-container .services-quote-section {
    padding-top: 36px !important;
    padding-bottom: 36px !important;
}
.blog-detail-section .inner-container .services-quote-section .service-quote-img {
    flex: 0 0 30%;
    max-width: 30%;
    align-self: stretch;
    height: auto;
    object-fit: cover;
    opacity: 0.55;
    mix-blend-mode: luminosity;
    /* La foto va de borde a borde del bloque (sin la franja vino del
       padding del section). El clip-path del section recorta la
       esquina superior derecha, asi que en la foto -que esta a la
       izquierda- el corte no afecta. */
    margin-top: -36px;
    margin-bottom: -36px;
    margin-left: 0;
}
@media (max-width: 767px) {
    .blog-detail-section .inner-container .services-quote-section .service-quote-img {
        flex: 0 0 35%;
        max-width: 35%;
    }
}
.blog-detail-section .inner-container .services-quote-section .main-heading::after {
    display: none !important;
    content: none !important;
}

/* Frase destacada dentro del quote block: 32px (mas calmo que el
   titular del articulo). */
.coppsa-novedad-page .blog-detail-section .services-quote-section .main-heading {
    font-size: 32px !important;
    line-height: 1.25 !important;
}
@media (max-width: 991px) {
    .coppsa-novedad-page .blog-detail-section .services-quote-section .main-heading {
        font-size: 2.4rem !important;
    }
}

/* Tag-block (autor + fecha) en novedad-detail: 16px de fuente. */
.coppsa-novedad-page .blog-detail-section .tag-block .tag {
    font-size: 16px !important;
}

/* Separación del titular respecto a meta (arriba) y al primer párrafo (abajo). */
.coppsa-novedad-page .blog-detail-section .discription-block .main-heading {
    margin-top: 40px !important;
    margin-bottom: 40px !important;
}

/* Quitar línea celeste de TODOS los main-heading dentro de la página
   de novedad detail (titular principal, comentarios, post-comment-form). */
.coppsa-novedad-page .blog-detail-section .main-heading::after {
    display: none !important;
    content: none !important;
}

/* Titular del articulo dentro del cuerpo: 42px (tamano editorial,
   mas chico que el hero) en desktop, reducido en mobile. */
.coppsa-novedad-page .blog-detail-section .discription-block .main-heading {
    font-size: 42px !important;
    line-height: 1.2 !important;
    letter-spacing: var(--heading-letter-spacing);
}
@media (max-width: 991px) {
    .coppsa-novedad-page .blog-detail-section .discription-block .main-heading {
        font-size: 3.2rem !important;
    }
}

/* Novedad-detail: usar el mismo fondo lila tintado de la página de
   Contacto, para coherencia visual entre subpáginas COPPSA. */
.coppsa-novedad-page .blog-detail-section {
    background: transparent;
    position: relative;
    padding-bottom: 100px !important;
}
/* Recortar el espacio enorme debajo de los tags: la plantilla pone
   margin: 10rem 0 — anulamos el inferior para que el fondo termine
   100px después del bloque tags+redes (definidos por padding-bottom). */
.coppsa-novedad-page .blog-detail-section .inner-container .tags-and-share {
    margin-bottom: 0 !important;
}

/* Sección "También puede interesarte" en novedad-detail: transparente,
   el fondo lila viene del body para que sea CONTINUO entre secciones. */
.coppsa-novedad-page .coppsa-related-news {
    background: transparent;
}
/* Titular "Tambien puede interesarte" en 32px (mismo peso que la
   frase del quote block). */
.coppsa-novedad-page .coppsa-related-news .main-heading {
    font-size: 32px !important;
    line-height: 1.2 !important;
}
.coppsa-novedad-page .coppsa-related-news .main-heading::after {
    display: none !important;
    content: none !important;
}
@media (max-width: 991px) {
    .coppsa-novedad-page .coppsa-related-news .main-heading {
        font-size: 2.4rem !important;
    }
}
/* Gradiente lila aplicado al body en background-attachment: fixed para
   que no se repita por sección y se vea como un fondo continuo. */
body.coppsa-novedad-page {
    background-color: #fcf8fa !important;
    background:
        radial-gradient(circle at 18% 20%, rgba(127, 64, 106, 0.07) 0, transparent 55%),
        radial-gradient(circle at 82% 80%, rgba(65, 190, 189, 0.06) 0, transparent 55%),
        linear-gradient(180deg, #fcf8fa 0%, #f7f0f4 100%) !important;
    background-attachment: fixed !important;
}
body.coppsa-novedad-page .page-header-section {
    margin-bottom: 0 !important;
}
/* Titulo de la portada en el detalle de novedad: tamano h3 para que
   el texto no se monte sobre la foto del header (que ocupa el ~40%
   derecho via clip-path del template). */
/* Titulo de la portada: max-width acotado al ~50% para forzar
   que SIEMPRE rompa en 2+ lineas y nunca invada la foto del
   header (que arranca al 58% desde la izquierda con clip-path).
   word-break para palabras largas (e.g. "perforacion"). */
body.coppsa-novedad-page .page-header-section .main-heading {
    font-size: 3rem !important;
    line-height: 1.2 !important;
    max-width: 50%;
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: auto;
}
@media (max-width: 1199px) {
    body.coppsa-novedad-page .page-header-section .main-heading {
        font-size: 2.6rem !important;
        max-width: 50%;
    }
}
@media (max-width: 991px) {
    body.coppsa-novedad-page .page-header-section .main-heading {
        font-size: 2.4rem !important;
        max-width: 45%;
    }
}
@media (max-width: 768px) {
    body.coppsa-novedad-page .page-header-section .main-heading {
        font-size: 2.2rem !important;
        max-width: 42%;
    }
}
@media (max-width: 575px) {
    /* En phones la foto del header se vuelve un strip mas chico,
       liberamos todo el ancho al titular. */
    body.coppsa-novedad-page .page-header-section .main-heading {
        font-size: 2.2rem !important;
        max-width: 100%;
    }
}

/* Separar la foto de la nota del chamfer del header: el header
   ya empuja 48px hacia abajo con margin-bottom + el clip extiende
   la imagen 48px mas, asi que sumamos un margin-top a la cover
   para que NO se toquen visualmente. */
.coppsa-novedad-page .blog-detail-section .blog-img-block {
    margin-top: 32px;
}
@media (max-width: 768px) {
    .coppsa-novedad-page .blog-detail-section .blog-img-block {
        margin-top: 16px;
    }
}

/* Tags y redes sociales en el bloque .tags-and-share:
   fondo blanco, texto/ícono vino, sin borde celeste, cuadrados con
   chamfer top-right siguiendo la estética Aventra. */
.coppsa-novedad-page .tags-and-share .tag-btn,
.coppsa-novedad-page .tags-and-share .social-link {
    background: #ffffff !important;
    color: var(--c-primary-500, #7f406a) !important;
    border: 1px solid rgba(127, 64, 106, 0.18) !important;
    box-shadow: 0 1px 2px rgba(127, 64, 106, 0.06);
    border-radius: 0 !important;
    -webkit-clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.coppsa-novedad-page .tags-and-share .tag-btn:hover,
.coppsa-novedad-page .tags-and-share .social-link:hover {
    background: var(--c-primary-500, #7f406a) !important;
    color: #ffffff !important;
    border-color: var(--c-primary-500, #7f406a) !important;
}
.coppsa-novedad-page .tags-and-share .social-link .icon,
.coppsa-novedad-page .tags-and-share .social-link svg {
    fill: var(--c-primary-500, #7f406a) !important;
    transition: fill 0.2s ease;
}
.coppsa-novedad-page .tags-and-share .social-link:hover .icon,
.coppsa-novedad-page .tags-and-share .social-link:hover svg {
    fill: #ffffff !important;
}

/* Página Servicios: quitar la línea celeste bajo el titular y dar
   más aire entre el heading y la grilla de cards. */
.coppsa-services-with-cta .headings .main-heading::after {
  display: none !important;
  content: none !important;
}
.coppsa-services-with-cta .cards-wrapper {
  margin-top: 40px !important;
}

/* ============================================================
   Empresa one-page: anclas con offset para que el nav sticky
   no tape el inicio de la sección al hacer scroll.
   ============================================================ */
html {
  scroll-behavior: smooth;
}

.coppsa-anchor {
  display: block;
  position: relative;
  top: 0;
  height: 0;
  scroll-margin-top: 90px;
}

/* ============================================================
   Navbar: transparente al cargar, sólido al hacer scroll.
   Inspirado en demo_1 de Aventra. La clase .scrolled la
   agrega main.js automáticamente al hacer scroll.
   ============================================================ */

/* Estado inicial: transparente, sin sombra, sin fondo */
.header.demo-header,
.header.demo-header .header-wrapper {
  background-color: transparent !important;
  box-shadow: none !important;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* Estado scrolled: fondo blanco sólido + sombra suave */
.header.demo-header.scrolled,
.header.demo-header.scrolled .header-wrapper,
.header.sticky-nav.scrolled,
.header.sticky-nav.scrolled .header-wrapper {
  background-color: #fff !important;
  box-shadow: 0 2px 20px rgba(0,0,0,0.08) !important;
}

.header .logo {
  display: flex;
  align-items: center;
}

.header .logo .coppsa-logo-img {
  filter: none;
  transition: filter 0.3s ease;
}

/* Logo: blanco al inicio, wine cuando scrolled */
.header.demo-header:not(.scrolled) .logo .coppsa-logo-img {
  filter: brightness(0) invert(1) !important;
}
.header.demo-header.scrolled .logo .coppsa-logo-img {
  filter: brightness(0) saturate(100%) invert(27%) sepia(20%) saturate(2476%) hue-rotate(278deg) brightness(92%) contrast(89%) !important;
}

/* Links del menú top-level: blancos al inicio, gris/wine cuando scrolled.
   Importante: scope a > li > a (hijos directos) para NO afectar los
   items del sub-menu desplegable, que tienen fondo blanco. */
header.demo-header .header-wrapper .navigation-menu.desktop > li > a {
  color: #ffffff !important;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  transition: color 0.2s;
}

header.demo-header.scrolled .header-wrapper .navigation-menu.desktop > li > a {
  color: #6f7b7a !important;
}

header.demo-header .header-wrapper .navigation-menu.desktop > li > a:hover {
  color: var(--c-secondary-500) !important;
}

header.demo-header.scrolled .header-wrapper .navigation-menu.desktop > li > a:hover,
.header.demo-header.scrolled .navigation-menu.desktop > li.menu-item.current > a {
  color: var(--c-primary-500) !important;
}

/* Iconos chevron del menú top-level: igual que los links */
header.demo-header .header-wrapper .navigation-menu.desktop > li > a .icon {
  fill: #ffffff !important;
  transition: fill 0.2s;
}

header.demo-header.scrolled .header-wrapper .navigation-menu.desktop > li > a .icon {
  fill: #6f7b7a !important;
}

header.demo-header .header-wrapper .navigation-menu.desktop > li > a:hover .icon {
  fill: var(--c-secondary-500) !important;
}

header.demo-header.scrolled .header-wrapper .navigation-menu.desktop > li > a:hover .icon {
  fill: var(--c-primary-500) !important;
}

.header .sub-menu {
  border: none !important;
  border-top: 3px solid var(--c-secondary-500) !important;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

.header .sub-menu .menu-item a {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--c-gray-700) !important;
  transition: background 0.15s, color 0.15s;
}

.header .sub-menu .menu-item a:hover {
  background: var(--c-primary-100) !important;
  color: var(--c-primary-500) !important;
}

/* El CTA del header (COTIZAR) hereda el .btn.primary global
   (vino → hover turquesa con animación burbuja). Sólo ajustamos
   tamaño/peso de la tipografía para que encaje en la barra. */
.header .icons-block .btn.primary {
  font-weight: 700;
  font-size: 0.875rem;
}

.header .hamburger-icon .bar {
  background-color: var(--c-primary-500) !important;
  transition: background-color 0.3s ease;
}

header.demo-header .header-wrapper .hamburger-icon .bar {
  background-color: #ffffff !important;
}

header.demo-header.scrolled .header-wrapper .hamburger-icon .bar {
  background-color: var(--c-primary-500) !important;
}

.header .hamburger-content {
  background: var(--c-primary-500) !important;
}

.header .hamburger-content .logo img {
  filter: brightness(0) invert(1);
}

.header .hamburger-content .navigation-menu .menu-item a {
  color: rgba(255,255,255,0.85) !important;
}

.header .hamburger-content .navigation-menu .menu-item a:hover {
  color: var(--c-secondary-500) !important;
}

.header .hamburger-close svg {
  fill: #fff;
}

.header .search-icon svg {
  fill: rgba(255,255,255,0.8);
}

.header .language-switcher a {
  color: rgba(255,255,255,0.8) !important;
}

.header .language-switcher a:hover {
  color: var(--c-secondary-500) !important;
}

.header .hamburger-content-inner .sidebar-title {
  color: #fff;
  font-family: var(--font-heading);
}

.header .hamburger-content-inner p {
  color: rgba(255,255,255,0.65);
}

.header .hamburger-content-inner .social-link {
  background: rgba(255,255,255,0.1);
}

.header .hamburger-content-inner .social-link:hover {
  background: var(--c-secondary-500);
}

.header .hamburger-content-inner .social-link svg {
  fill: rgba(255,255,255,0.75);
}

.header .hamburger-content-inner .social-link:hover svg {
  fill: #fff;
}

/* ============================================================
   BOTONES COPPSA (animación Aventra demo_1)
   - Primary: fondo vino → hover turquesa, letras siempre blancas
   - Secondary: fondo turquesa → hover vino, letras siempre blancas
   - La animación de "burbuja" + slide de texto viene de
     style_demo5.css (.btn ::before + .text-one / .text-two).
   - Auto-wrap de texto en .text-one/.text-two lo aplica
     coppsa-dynamic.js para los botones que no lo traen en HTML.
   ============================================================ */
.btn.primary,
.btn.primary:link,
.btn.primary:visited {
  background-color: var(--c-primary-500) !important;
  border-color: var(--c-primary-500) !important;
  color: #fff !important;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: 0.06em;
}

/* burbuja (::before) que entra desde arriba: turquesa */
.btn.primary::before,
.btn.primary:link::before,
.btn.primary:visited::before {
  display: block !important;
  background: var(--c-secondary-500) !important;
}

/* texto y SVG siempre en blanco (base y hover) */
.btn.primary .text-one,
.btn.primary .text-two,
.btn.primary > svg {
  color: #ffffff !important;
}
.btn.primary .text-one svg,
.btn.primary .text-two svg,
.btn.primary > svg {
  fill: #ffffff !important;
}

/* Hover: el fondo "se transforma" en turquesa via la burbuja ::before.
   No movemos el botón en Y para no romper el clip-path del template. */
.btn.primary:hover {
  border-color: var(--c-secondary-500) !important;
}

/* ---- Secondary: turquesa, hover vino ---- */
.btn.secondary,
.btn.secondary:link,
.btn.secondary:visited {
  background-color: var(--c-secondary-500) !important;
  border-color: var(--c-secondary-500) !important;
  color: #fff !important;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: 0.06em;
}

.btn.secondary::before,
.btn.secondary:link::before,
.btn.secondary:visited::before {
  display: block !important;
  background: var(--c-primary-500) !important;
}

.btn.secondary .text-one,
.btn.secondary .text-two,
.btn.secondary > svg {
  color: #ffffff !important;
}
.btn.secondary .text-one svg,
.btn.secondary .text-two svg,
.btn.secondary > svg {
  fill: #ffffff !important;
}

.btn.secondary:hover {
  border-color: var(--c-primary-500) !important;
}

/* ---- Ghost (tercer botón): blanco con letras vino,
   hover vino con letras blancas. Misma animación burbuja. ---- */
.btn.ghost,
.btn.ghost:link,
.btn.ghost:visited {
  background-color: #ffffff !important;
  border: 1px solid var(--c-primary-500) !important;
  color: var(--c-primary-500) !important;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: 0.06em;
}

.btn.ghost::before,
.btn.ghost:link::before,
.btn.ghost:visited::before {
  display: block !important;
  background: var(--c-primary-500) !important;
}

/* text-one (estado base) en vino */
.btn.ghost .text-one {
  color: var(--c-primary-500) !important;
}
.btn.ghost .text-one svg {
  fill: var(--c-primary-500) !important;
}

/* text-two (entra en hover) en blanco */
.btn.ghost .text-two {
  color: #ffffff !important;
}
.btn.ghost .text-two svg {
  fill: #ffffff !important;
}

.btn.ghost:hover {
  border-color: var(--c-primary-500) !important;
}

/* Fallback: si el botón NO trae .text-one/.text-two y sólo tiene texto
   plano + svg como hijos directos, ocultamos esos hijos en hover para
   que la burbuja sea visible y no quede el texto encima del fondo
   nuevo (el JS coppsa-dynamic.js los envuelve, así que este caso casi
   no se da, pero lo dejamos como red de seguridad). */
.btn.primary:not(:has(.text-one)) > svg,
.btn.secondary:not(:has(.text-one)) > svg {
  position: relative;
  z-index: 2;
}

.btn-outline-primary {
  background: transparent !important;
  border: 2px solid var(--c-primary-500) !important;
  color: var(--c-primary-500) !important;
  font-weight: 600;
  padding: 0.7rem 2rem;
  border-radius: 4px;
  transition: all 0.2s;
}

.btn-outline-primary:hover {
  background: var(--c-primary-500) !important;
  color: #fff !important;
}

.btn-outline-white {
  background: transparent !important;
  border: 2px solid rgba(255,255,255,0.7) !important;
  color: #fff !important;
  font-weight: 600;
  padding: 0.7rem 2rem;
  border-radius: 4px;
  transition: all 0.2s;
}

.btn-outline-white:hover {
  background: #fff !important;
  color: var(--c-primary-500) !important;
  border-color: #fff !important;
}

.read-more {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--c-primary-500) !important;
  transition: gap 0.2s, color 0.2s;
}

.read-more:hover {
  color: var(--c-primary-600) !important;
}

.read-more svg {
  fill: var(--c-primary-500) !important;
}

/* HERO COPPSA — estética de la plantilla base (Home 5 / Aventra):
   fondo blanco limpio, color en el TÍTULO (morado de marca),
   párrafo en gris oscuro y badge turquesa sobre el video.
   No se usa overlay oscuro porque el fondo es claro. */
.demo-hero-section {
  background-color: #ffffff !important;
  position: relative;
}

.demo-hero-section .text-block .main-heading {
  font-family: var(--font-heading);
  color: var(--c-primary-500) !important;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.05;
}

.demo-hero-section .text-block .main-heading::after {
  display: none;
}

.demo-hero-section .text-block p {
  color: #4a4a55;
  font-size: 18px;
  line-height: 1.75;
}

.demo-hero-section .badge {
  background: var(--c-secondary-500) !important;
}

.demo-hero-section .badge .text {
  color: #ffffff !important;
}

/* Portada (page-header) replicando demo_2:
   - sección compacta y SIN chamfer
   - la foto va en el lado derecho, con chamfer en la esquina inferior izquierda
   - la foto sobresale 40px por debajo de la sección */
.page-header-section {
  background: var(--c-primary-600) !important;
  position: relative;
  min-height: 0 !important;
  height: auto !important;
  padding: 150px 0 110px !important;
  overflow: visible !important;
  -webkit-clip-path: none !important;
  clip-path: none !important;
  /* margen inferior = altura del chamfer (48px) para que el inicio
     del corte diagonal coincida con el final de la portada */
  margin-bottom: 48px;
}

/* Degradé radial en la esquina inferior izquierda (ref. demo_2)
   Reemplazo el ::before del template para que ocupe toda la altura
   (sin la banda que dejaba abajo) y use los wines de marca. */
.page-header-section::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: radial-gradient(
    circle at bottom left,
    var(--c-primary-500) 0%,
    var(--c-primary-600) 25%,
    #3a1a30 70%
  ) !important;
  z-index: 0 !important;
  pointer-events: none;
}

/* Tipografía de las portadas internas (no home) copiada de la plantilla
   demo_2: título 48px Plus Jakarta Sans, breadcrumb 1.4rem Plus Jakarta
   Sans 600. */
.page-header-section .text-box .main-heading {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 48px !important;
  line-height: 1.15 !important;
  margin-bottom: 19.2px !important;
  padding-bottom: 0 !important;
  font-weight: 700 !important;
}

.page-header-section .text-box .breadcrumbs {
  padding: 0 !important;
}

.page-header-section .text-box .breadcrumbs ul {
  padding-left: 0 !important;
  margin: 0 !important;
  align-items: center !important;
}

.page-header-section .text-box .breadcrumbs ul li,
.page-header-section .text-box .breadcrumbs ul li a {
  color: #fff !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 1.4rem !important;
  letter-spacing: 1px;
  font-weight: 600;
  align-items: center !important;
}

/* Chevron alineado verticalmente con los textos */
.page-header-section .text-box .breadcrumbs ul li:nth-child(n + 2)::before {
  width: 1.1rem !important;
  margin: 0 0.6rem !important;
  display: inline-block !important;
  vertical-align: middle !important;
  line-height: 1 !important;
}

.page-header-section .text-box {
  position: relative;
  z-index: 2;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.page-header-section .hero-img-overlay {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: auto !important;
  left: auto !important;
  width: 42% !important;
  height: calc(100% + 48px) !important;
  opacity: 1 !important;
  overflow: hidden;
  z-index: 1;
  /* Chamfer en la esquina inferior izquierda de la foto (48px) */
  -webkit-clip-path: polygon(100% 0, 100% 100%, 48px 100%, 0 calc(100% - 48px), 0 0);
  clip-path: polygon(100% 0, 100% 100%, 48px 100%, 0 calc(100% - 48px), 0 0);
}

.page-header-section .hero-img-overlay .hero-slide-bg {
  position: relative !important;
  top: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  object-position: center;
}

/* Tinte de marca sobre la foto (como en demo_2 con el azul):
   wine + degradado para mantener legibilidad del navbar */
.page-header-section .hero-img-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(63, 32, 53, 0.7);
  pointer-events: none;
}

/* La grilla de puntitos siempre por encima de la foto */
.page-header-section .grid-icon {
  z-index: 3;
}

@media (max-width: 991px) {
  .page-header-section .hero-img-overlay {
    width: 50% !important;
  }
}

@media (max-width: 768px) {
  .page-header-section {
    padding: 110px 0 80px !important;
    margin-bottom: 40px;
  }
  .page-header-section .hero-img-overlay {
    width: 55% !important;
    height: calc(100% + 40px) !important;
    -webkit-clip-path: polygon(100% 0, 100% 100%, 32px 100%, 0 calc(100% - 32px), 0 0);
    clip-path: polygon(100% 0, 100% 100%, 32px 100%, 0 calc(100% - 32px), 0 0);
  }
}

.page-header-section .text-box .main-heading {
  color: #fff !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}

.page-header-section .text-box .main-heading::after {
  display: none;
}

/* Ambos items del breadcrumb en blanco (override del color teal previo) */
.page-header-section .breadcrumbs ul li,
.page-header-section .breadcrumbs ul li a,
.page-header-section .breadcrumbs ul li:last-child {
  color: #fff !important;
}

.page-header-section .grid-icon circle {
  stroke: rgba(255,255,255,0.2);
}

.achievements-section {
  background: var(--c-primary-700) !important;
}

.achievement-card {
  border-color: rgba(255,255,255,0.1) !important;
}

.achievement-card .icon {
  fill: var(--c-secondary-500) !important;
  color: var(--c-secondary-500) !important;
}

.achievement-card .icon svg {
  fill: var(--c-secondary-500) !important;
}

.achievement-card .title {
  color: #fff !important;
  font-family: var(--font-heading);
}

.service-card {
  background: #fff;
  border: 1px solid var(--c-gray-200);
  border-radius: 8px;
  transition: all 0.3s;
  position: relative;
  overflow: hidden;
}

.service-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--c-primary-500);
  transform: scaleX(0);
  transition: transform 0.3s;
}

.service-card:hover {
  border-color: var(--c-primary-200) !important;
  box-shadow: 0 8px 30px rgba(127,64,106,0.12);
  transform: translateY(-4px);
}

.service-card:hover::before {
  transform: scaleX(1);
}

.service-card .icon svg {
  fill: var(--c-primary-500) !important;
  color: var(--c-primary-500) !important;
  transition: color 0.3s, fill 0.3s;
}

.service-card .card-title {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--c-gray-900);
}

.service-card p {
  color: var(--c-gray-500);
  font-size: 18px;
  line-height: 1.7;
}

.service-card .read-more {
  color: var(--c-primary-500) !important;
  font-weight: 600;
}

.service-card .read-more svg {
  fill: var(--c-primary-500) !important;
}

.commitment-item,
.services-block-section .commitment-item {
  background: #fff;
  border: 1px solid var(--c-gray-200);
  border-radius: 8px;
  transition: all 0.3s;
  position: relative;
  overflow: hidden;
}

.commitment-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--c-primary-500);
  transform: scaleX(0);
  transition: transform 0.3s;
}

.commitment-item:hover {
  border-color: var(--c-primary-200) !important;
  box-shadow: 0 8px 30px rgba(127,64,106,0.12);
  transform: translateY(-4px);
}

.commitment-item:hover::before {
  transform: scaleX(1);
}

.commitment-item .commitment-title .icon svg {
  fill: var(--c-primary-500) !important;
  color: var(--c-primary-500) !important;
}

.commitment-item .commitment-title h3 {
  font-family: var(--font-heading);
  color: var(--c-gray-900);
}

.commitment-item p {
  color: var(--c-gray-500);
  font-size: 18px;
}

.commitment-item .read-more {
  color: var(--c-primary-500) !important;
}

.commitment-item .read-more svg {
  fill: var(--c-primary-500) !important;
}

.services-detail-section .links-container .area-link {
  color: var(--c-gray-700);
  transition: all 0.2s;
}

.services-detail-section .links-container .area-link:hover,
.services-detail-section .links-container .area-link.active {
  background: var(--c-primary-100) !important;
  color: var(--c-primary-500) !important;
  border-left-color: var(--c-primary-500) !important;
}

.services-detail-section .links-container .area-link:hover .icon svg,
.services-detail-section .links-container .area-link.active .icon svg {
  fill: var(--c-primary-500) !important;
}

.services-detail-section .links-container .area-link:hover .arrow-right svg,
.services-detail-section .links-container .area-link.active .arrow-right svg {
  fill: var(--c-primary-500) !important;
}

.project-card {
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}

.project-card .project-img-block,
.project-card .project-card-img {
  overflow: hidden;
}

.project-card .project-img-block img,
.project-card .project-card-img img {
  transition: transform 0.4s, opacity 0.4s;
}

.project-card:hover .project-img-block img,
.project-card:hover .project-card-img img {
  transform: scale(1.06);
}

.project-card .project-card-content,
.project-card .project-content {
  background: linear-gradient(to top, rgba(127,64,106,0.92) 0%, transparent 100%);
}

.project-card .project-card-content .main-title,
.project-card .project-content .main-title {
  font-family: var(--font-heading);
  color: #fff !important;
}

.project-card .project-card-content .main-title::after,
.project-card .project-content .main-title::after {
  display: none;
}

.project-card .project-card-content p,
.project-card .project-content p {
  color: rgba(255,255,255,0.8) !important;
  font-size: 18px;
}

.project-card .info-block .title {
  color: var(--c-primary-500);
  font-weight: 600;
}

.customer-section {
  background: transparent;
}

.customer-section .sub-heading {
  color: var(--c-primary-500);
}

.customer-section .main-heading {
  color: var(--c-gray-900);
}

.customer-card {
  transition: all 0.3s;
}

.customer-card:hover {
  border-color: var(--c-primary-200) !important;
  box-shadow: 0 8px 30px rgba(127,64,106,0.12);
}

.customer-card .logo-block .logo {
  opacity: 0.45;
  filter: grayscale(100%);
  transition: opacity 0.3s, filter 0.3s;
}

.customer-card:hover .logo-block .logo {
  opacity: 1;
  filter: grayscale(0%);
}

.testimonials-section .sub-heading,
.testimonial-section .sub-heading {
  color: var(--c-primary-500);
}

.testimonials-section .testimonial-card,
.testimonial-card {
  border-color: var(--c-gray-200);
}

.testimonials-section .testimonial-card:hover,
.testimonial-card:hover {
  border-color: var(--c-primary-200) !important;
  box-shadow: 0 8px 30px rgba(127,64,106,0.12);
}

.testimonial-card .quote-icon svg {
  fill: var(--c-primary-500) !important;
}

.footer-section,
footer,
footer.green-demo-footer {
  background: #3a1a30 !important;
  position: relative;
  /* Padding interno a los lados del footer (sobre el pl/pr-[24px] de
     Tailwind del HTML) para que el contenido del .container respire
     más, sobre todo el bloque brand a la izquierda. */
  padding-left: 4rem !important;
  padding-right: 4rem !important;
  /* Margen superior que reserva el espacio del form flotante
     (margin-top: -200px) para que NO invada la sección anterior. */
  margin-top: 220px !important;
}
@media (max-width: 991px) {
  .footer-section,
  footer,
  footer.green-demo-footer {
    margin-top: 140px !important;
  }
}

/* Sloped top edge (full width) — replica del Home 4 de Aventra: el
   slope diagonal va del lado IZQUIERDO. La banda se ubica 50px sobre
   el footer; el corte arranca arriba en (50px, 0) y baja hacia (0, 50px),
   creando un borde superior que sube desde abajo-izquierda hacia
   arriba-derecha (image_1777998487900.png). */
footer.green-demo-footer::before {
  content: '' !important;
  height: 55px !important;
  width: 100% !important;
  position: absolute !important;
  top: -50px !important;
  left: 0 !important;
  background-color: #3a1a30 !important;
  -webkit-clip-path: polygon(0 50px, 50px 0, 100% 0, 100% 100%, 0 100%) !important;
  clip-path: polygon(0 50px, 50px 0, 100% 0, 100% 100%, 0 100%) !important;
  z-index: 0 !important;
  pointer-events: none;
}

.footer-section .footer-wrapper,
footer .footer-wrapper {
  background: transparent !important;
  column-gap: 8rem;
}

.green-demo-footer .footer-logo {
  color: #fff !important;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.5rem;
  display: inline-flex;
  align-items: center;
  gap: 1rem;
}

/* footer-title: replica del .footer-title del Home 4 de Aventra
   (3rem = 30px, font-weight 600, line-height 1.4, max-width 332px).
   Color: tono morado claro semi-translúcido para mantener jerarquía
   sobre el fondo oscuro sin competir con el form. */
.green-demo-footer .footer-title,
footer .about-col .footer-title {
  color: rgba(255, 255, 255, 0.55) !important;
  font-family: var(--font-heading) !important;
  font-size: 1.8rem !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  max-width: 30rem !important;
  margin: 4rem 0 !important;
}

/* Brand col limita su ancho para no robar espacio al center y al form. */
.coppsa-foot-brand {
  width: 30rem;
  max-width: 30rem;
}

footer .about-col .footer-social-links {
  margin-top: 2rem !important;
}

footer .about-col .social-link:link,
footer .about-col .social-link:visited {
  background-color: transparent !important;
  border: 2px solid rgba(255,255,255,0.3) !important;
  width: 45px !important;
  height: 45px !important;
  border-radius: 0 !important;
  clip-path: var(--slope-clip-top-right-base) !important;
}

footer .about-col .social-link:link .icon,
footer .about-col .social-link:visited .icon {
  fill: rgba(255,255,255,0.6) !important;
}

footer .about-col .social-link:link:hover,
footer .about-col .social-link:visited:hover {
  background-color: rgba(255,255,255,0.15) !important;
  border-color: rgba(255,255,255,0.5) !important;
}

footer .about-col .social-link:link:hover .icon,
footer .about-col .social-link:visited:hover .icon {
  fill: #fff !important;
}

/* Title de columnas (MAPA DE SITIO, CONTACTO RÁPIDO) — 1.4rem como en
   .sub-heading-font-size del template */
.green-demo-footer .links-col .title,
footer .title {
  color: rgba(255, 255, 255, 0.55) !important;
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 1.4rem !important;
  margin-bottom: 3rem !important;
}

/* Links del sitemap — 2rem (paragraph-font-size del template) */
footer .links-col .footer-link:link,
footer .links-col .footer-link:visited {
  color: rgba(255, 255, 255, 0.92) !important;
  font-weight: 600 !important;
  font-size: 2rem !important;
  line-height: 3rem !important;
}

footer .links-col .footer-link:link:hover,
footer .links-col .footer-link:visited:hover {
  color: #fff !important;
}

.green-demo-footer .footer-link .icon-play {
  fill: rgba(255,255,255,0.4) !important;
}

.green-demo-footer .footer-link:hover .icon-play {
  fill: #fff !important;
}

footer .contact-detail h6 {
  color: rgba(255,255,255,0.85) !important;
  font-weight: 500 !important;
  line-height: 1.6 !important;
  font-size: 14px !important;
}

footer .copyright {
  color: rgba(255,255,255,0.5) !important;
  font-size: 0.875rem !important;
  margin-top: 5rem !important;
  background: transparent !important;
}

footer .grid-icon {
  stroke: rgba(255,255,255,0.25) !important;
}

.scrollToTopBtn {
  background: var(--c-primary-500) !important;
  /* Movido a la izquierda para invertir con el botón de WhatsApp */
  left: 28px !important;
  right: auto !important;
}

.scrollToTopBtn:hover {
  background: var(--c-primary-600) !important;
}

.scrollToTopBtn svg {
  fill: #fff;
}

.contact-detail-section input,
.contact-detail-section textarea,
.contact-detail-section select,
.contact-form .form-control {
  border: 1.5px solid var(--c-gray-200);
  border-radius: 4px;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--c-gray-700);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.contact-detail-section input:focus,
.contact-detail-section textarea:focus,
.contact-detail-section select:focus,
.contact-form .form-control:focus {
  border-color: var(--c-primary-500) !important;
  box-shadow: 0 0 0 3px rgba(127,64,106,0.12) !important;
  outline: none;
}

.contact-detail-section input::placeholder,
.contact-detail-section textarea::placeholder,
.contact-form .form-control::placeholder {
  color: var(--c-gray-300);
}

.contact-detail-section .sub-heading {
  color: var(--c-primary-500);
}

.contact-card .icon svg {
  fill: var(--c-primary-500) !important;
}

.contact-card .title {
  color: var(--c-gray-900);
  font-family: var(--font-heading);
}

.contact-card .link {
  color: var(--c-primary-500) !important;
}

.contact-card .link:hover {
  color: var(--c-secondary-500) !important;
}

.badge-category {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.3rem 0.85rem;
  border-radius: 2px;
}

.badge-primary   { background: var(--c-primary-100);   color: var(--c-primary-600);   }
.badge-secondary { background: var(--c-secondary-100); color: var(--c-secondary-700); }
.badge-dark      { background: var(--c-primary-500);   color: #fff;                   }
.badge-teal      { background: var(--c-secondary-500); color: #fff;                   }

.category-tag {
  display: inline-block;
  background: var(--c-secondary-500) !important;
  color: #fff !important;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.25rem 0.75rem;
  border-radius: 2px;
}

.stats {
  background: var(--c-primary-700) !important;
}

.stats .stat-item h2 {
  font-family: var(--font-heading) !important;
  color: #fff !important;
}

.stats .stat-item h2::after {
  display: none;
}

.stats .stat-item .line {
  background: var(--c-secondary-500) !important;
}

.stats .stat-item p {
  color: rgba(255,255,255,0.6) !important;
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.875rem;
}

.counter-section {
  background: var(--c-primary-700);
  padding: 70px 0;
}

.counter-item {
  text-align: center;
  padding: 1rem;
}

.counter-number {
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 700;
  color: #fff;
  line-height: 1;
  margin-bottom: 0.5rem;
}

.counter-suffix {
  color: var(--c-secondary-500);
}

.counter-label {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  color: rgba(255,255,255,0.6);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.counter-item + .counter-item {
  border-left: 1px solid rgba(255,255,255,0.1);
}

.commitment-section .main-heading {
  max-width: 760px !important;
}
.commitment-section .commitment-detail-block--single {
  display: block !important;
  max-width: 920px;
  margin: 0 auto;
  text-align: center;
}
.commitment-section .commitment-detail-block--single p {
  margin: 0;
}

.commitment-section .sub-heading {
  color: var(--c-primary-500);
}

.about-us-1-section .skills-wrapper .skill-bar,
.progress-bar-section .skill-bar {
  background-color: var(--c-primary-500) !important;
}

.about-us-1-section .logo-block,
.logo-block .logo-number {
  background: var(--c-primary-500) !important;
  color: #fff !important;
}

.grid-icon circle {
  stroke: var(--c-primary-300);
}

/* Bento cards (text-overlay): mantenemos la foto visible y aplicamos
   un degradé wine semitransparente para legibilidad del texto, similar
   al degradé radial del page-header. */
.text-overlay {
  background-color: transparent !important;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.text-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at bottom left,
    rgba(127, 64, 106, 0.85) 0%,
    rgba(106, 50, 87, 0.88) 35%,
    rgba(58, 26, 48, 0.92) 100%
  );
  z-index: 0;
  pointer-events: none;
}
.text-overlay > * {
  position: relative;
  z-index: 1;
}

.text-overlay .icon svg {
  fill: var(--c-secondary-500) !important;
}

.gallery-images-section .text-overlay {
  background-color: transparent !important;
}

/* Timeline (intro-section): mantener la barra de tabs (con el chip
   vino y la esquina chanflada) en todos los anchos de desktop/tablet.
   El template colapsa al dropdown selectify a partir de 991px; lo
   movemos para que solo se colapse en mobile real (<768px). */
@media (min-width: 768px) and (max-width: 991px) {
  .intro-section .toggle-card-wrapper .main-tabs .mobile-hidden {
    display: flex !important;
  }
  .intro-section .toggle-card-wrapper .main-tabs .selectify-wrapper {
    display: none !important;
  }
}
@media (max-width: 767px) {
  .intro-section .toggle-card-wrapper .main-tabs .selectify-wrapper {
    display: block !important;
  }
}

/* Trayectoria: contraste — pasar textos blancos a negro,
   excepto el del tab activo (chip vino). El segundo párrafo
   y el item con ícono van en la columna derecha. */
.intro-section .headings .main-heading {
  color: #1a1a1a !important;
}
.coppsa-trayectoria .pane-content-block .title {
  color: #1a1a1a !important;
}
.coppsa-trayectoria .pane-content-block .intro-list .list-item .text {
  color: #1a1a1a !important;
}
/* Spacing de la sección Trayectoria */
.intro-section.team-meet-green-bg.coppsa-trayectoria-section,
.coppsa-trayectoria-section.intro-section.team-meet-green-bg {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 80px !important;
  padding-bottom: 80px !important;
}
.coppsa-trayectoria-section .sub-heading {
  font-size: 16px !important;
  font-weight: 700 !important;
}
.coppsa-trayectoria-section .main-heading {
  margin-top: 0 !important;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  font-size: 32px !important;
}

/* Layout single-column centrado: título + párrafos + card apilados */
.coppsa-trayectoria .tab-panel-wrapper {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 2.4rem !important;
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.coppsa-trayectoria .pane-content-block,
.coppsa-trayectoria .pane-content-block--right {
  width: 100%;
  text-align: center;
}
.coppsa-trayectoria .pane-content-block .title {
  text-align: center;
  margin-bottom: 0.8rem !important;
  font-size: 20px;
  line-height: 1.3;
}
.coppsa-trayectoria .pane-content-block .description {
  text-align: center;
  margin-bottom: 1rem;
  font-size: 16px;
  line-height: 1.6;
}
.coppsa-trayectoria .pane-content-block .description:last-child {
  margin-bottom: 0;
}

/* Contenedor del selector de tabs sobre fondo blanco con sombra suave */
.coppsa-trayectoria .tabs-wrapper {
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(20, 20, 20, 0.06);
  border: 1px solid rgba(127, 64, 106, 0.1);
  padding: 0.6rem;
  display: flex;
  width: fit-content;
  margin: 0 auto 3rem auto;
}
.coppsa-trayectoria .tabs-wrapper .nav-tabs {
  border-bottom: none !important;
  margin: 0 !important;
}

/* Tabs: inactivos en violeta marca sin fondo, activo violeta + texto blanco */
.coppsa-trayectoria .nav-tabs {
  border-bottom: 1px solid rgba(127, 64, 106, 0.15) !important;
}
.coppsa-trayectoria .main-tabs .nav-link {
  color: var(--c-primary-500) !important;
  background: transparent !important;
}
.coppsa-trayectoria .main-tabs .nav-link .button-list-text {
  color: var(--c-primary-500) !important;
  font-weight: 600;
}
.coppsa-trayectoria .main-tabs .nav-link:hover {
  background: rgba(127, 64, 106, 0.08) !important;
}
.coppsa-trayectoria .main-tabs .nav-link:hover .button-list-text {
  color: var(--c-primary-500) !important;
}
.coppsa-trayectoria .main-tabs .nav-link.active,
.coppsa-trayectoria .main-tabs .nav-link.active:hover {
  background: var(--c-primary-500) !important;
}
.coppsa-trayectoria .main-tabs .nav-link.active .button-list-text {
  color: #ffffff !important;
}

/* Card de cierre debajo del texto */
.coppsa-trayectoria .pane-content-block--right {
  display: flex;
  justify-content: center;
  margin-top: 1rem;
}
.coppsa-trayectoria .trayectoria-card {
  display: flex;
  gap: 2rem;
  align-items: center;
  text-align: left;
  background: var(--c-primary-500);
  color: #ffffff;
  clip-path: var(--slope-clip-bottom-left-base);
  border: none;
  border-radius: 0;
  padding: 30px;
  box-shadow: none;
  max-width: 520px;
  width: 100%;
}
.coppsa-trayectoria .trayectoria-card__icon {
  width: 3.6rem;
  height: 3.6rem;
  flex: 0 0 auto;
  fill: #ffffff;
  margin-top: 0;
}
.coppsa-trayectoria .trayectoria-card__body {
  flex: 1;
}
.coppsa-trayectoria .trayectoria-card__title {
  font-family: var(--font-heading, var(--jakarta-font-family));
  font-size: 2rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 0.4rem 0;
  line-height: 1.3;
}
.coppsa-trayectoria .trayectoria-card__text,
.coppsa-trayectoria .trayectoria-card p.trayectoria-card__text {
  font-size: 1.5rem;
  color: #ffffff !important;
  margin: 0;
  line-height: 1.5;
  opacity: 1;
}
.coppsa-trayectoria .trayectoria-card__title {
  color: #ffffff !important;
}

.timeline-section .timeline-item .timeline-dot {
  background: var(--c-primary-500) !important;
  border-color: var(--c-primary-200) !important;
}

.timeline-section .timeline-item .timeline-line {
  background: var(--c-primary-200) !important;
}

.timeline-section .timeline-item .year {
  color: var(--c-primary-500);
  font-family: var(--font-heading);
  font-weight: 700;
}

.cta-section,
.cta-banner {
  background: var(--c-primary-500) !important;
}

.cta-section .main-heading,
.cta-banner .main-heading {
  color: #fff !important;
}

.cta-section .main-heading::after,
.cta-banner .main-heading::after {
  display: none;
}

.cta-section p,
.cta-banner p {
  color: rgba(255,255,255,0.8) !important;
}

.preloader .animated-preloader {
  border-color: var(--c-primary-200) !important;
  border-top-color: var(--c-primary-500) !important;
}

.unit-card {
  border-top: 4px solid transparent;
  transition: all 0.3s;
}

.unit-card.core    { border-top-color: var(--c-primary-500); }
.unit-card.design  { border-top-color: var(--c-secondary-500); }
.unit-card.trucks  { border-top-color: var(--c-primary-400); }

.unit-card:hover {
  box-shadow: 0 12px 40px rgba(0,0,0,0.1);
  transform: translateY(-6px);
}

.swiper-pagination-bullet-active {
  background: var(--c-primary-500) !important;
}

.swiper-button-next,
.swiper-button-prev {
  color: var(--c-primary-500) !important;
}

::-webkit-scrollbar-thumb {
  background: var(--c-primary-500);
}

::selection {
  background: var(--c-primary-200);
  color: var(--c-primary-800);
}

a {
  color: var(--c-primary-500);
}

a:hover {
  color: var(--c-primary-600);
}

.check-points .icon svg {
  fill: var(--c-primary-500) !important;
}

.project-detail-section .project-icon svg {
  fill: var(--c-primary-500) !important;
}

.project-detail-section .project-title {
  font-family: var(--font-heading);
  color: var(--c-gray-900);
}

.project-detail-section .project-discription {
  border-left-color: var(--c-primary-500) !important;
}

.project-detail-section .info-block .title {
  color: var(--c-primary-500);
}

.point-block .icon svg {
  fill: var(--c-primary-500) !important;
}

.related-projects .sub-heading {
  color: var(--c-primary-500);
}

.accordion-button:not(.collapsed) {
  background-color: var(--c-primary-100) !important;
  color: var(--c-primary-500) !important;
}

.accordion-button:focus {
  box-shadow: 0 0 0 0.2rem rgba(127,64,106,0.25) !important;
}

.operations-industries-section .industry-card {
  transition: all 0.3s;
}

.operations-industries-section .industry-card:hover {
  border-color: var(--c-primary-200) !important;
  box-shadow: 0 8px 30px rgba(127,64,106,0.12);
  transform: translateY(-4px);
}

.operations-industries-section .industry-card .icon svg {
  fill: var(--c-primary-500) !important;
}

.operations-industries-section .sub-heading {
  color: var(--c-primary-500);
}

.section-header {
  max-width: 700px;
  margin: 0 auto;
}

.section-title {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--c-gray-900);
  margin-bottom: 1rem;
}

.section-title::after {
  content: '';
  display: block;
  width: 50px;
  height: 3px;
  background: var(--c-secondary-500);
  margin: 0.75rem auto 0;
}

.section-header.text-left .section-title::after {
  margin-left: 0;
}

.section-subtitle {
  font-size: 1.0625rem;
  color: var(--c-gray-500);
  line-height: 1.75;
}

.hero-eyebrow {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-secondary-400);
  margin-bottom: 1rem;
  display: block;
}

.hero-title {
  font-family: var(--font-heading);
  font-size: clamp(2.75rem, 6vw, 5rem);
  font-weight: 700;
  line-height: 1.05;
  color: #fff;
  margin-bottom: 1.5rem;
}

.hero-title span {
  color: var(--c-secondary-500);
}

.hero-description {
  font-size: 1.125rem;
  line-height: 1.75;
  color: rgba(255,255,255,0.8);
  max-width: 560px;
  margin-bottom: 2rem;
}

.hero-cta-group {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

/* ─── Product Category Tabs ─────────────────────────── */
/* Selector de categorías estilo "How can we help you" (Aventra demo_6):
   contenedor pill translúcido que envuelve todos los tabs centrados;
   el tab activo es una píldora más clara dentro del contenedor. */
.product-tabs {
  display: inline-flex;
  gap: 4px;
  flex-wrap: wrap;
  margin: 36px auto 56px;
  padding: 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 100px;
  justify-content: center;
}

.product-tab {
  padding: 20px 36px;
  border-radius: 100px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.75);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
  line-height: 1;
}

.product-tab:hover {
  color: #fff;
}

.product-tab.active {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

/* #productos: anular el fondo radial wine→teal y el clip-path del
   template .demo-projects-section. La sección queda transparente para
   integrarse con el fondo general de la página. */
#productos.demo-projects-section {
    background: none;
    clip-path: none;
    overflow: visible;
    padding-bottom: 120px !important;
}
/* Aire extra en la grilla para que el overlay flotante de las cards
   (que cuelga por debajo de la imagen con bottom negativo) no quede
   cortado por la sección siguiente. */
#productos.demo-projects-section .product-grid {
    margin-bottom: 80px;
}
.product-grid.pb-\[40px\] { padding-bottom: 40px !important; }

/* #productos: titular y selector centrados al estilo demo_6 Aventra
   ("How can we help you" / "Industrial AI-powered products.").
   Tamaños de heading replicados de #trabajos para consistencia. */
#productos.demo-projects-section .heading-wrapper {
  text-align: center;
  display: block;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}
#productos.demo-projects-section .heading-wrapper .main-heading {
  line-height: var(--heading-line-height, 1.25);
  color: var(--c-primary-500, #7f406a);
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
#productos.demo-projects-section .heading-wrapper .main-heading::after {
  display: none;
}
#productos.demo-projects-section .heading-wrapper .sub-heading {
  font-size: var(--sub-heading-font-size, 1.4rem);
  color: var(--c-secondary-500, #41bebd) !important;
  letter-spacing: 1.6px;
  margin-bottom: 20px;
}
#productos.demo-projects-section > .container {
  text-align: center;
}
/* Selector estilo demo_6: contenedor rectangular con chamfer en la
   esquina superior derecha (slope-clip-top-right-3 ya existente en
   coppsa-custom). Mantengo altura/padding actuales. */
#productos.demo-projects-section .product-tabs {
  width: fit-content;
  border-radius: 0;
  clip-path: var(--slope-clip-top-right-3);
  background: rgba(127, 64, 106, 0.08);
}
#productos.demo-projects-section .product-tab {
  border-radius: 4px;
  color: var(--c-primary-500, #7f406a);
}
#productos.demo-projects-section .product-tab:hover {
  color: var(--c-primary-500, #7f406a);
}
#productos.demo-projects-section .product-tab.active {
  background: var(--c-primary-500, #7f406a);
  color: #fff;
}

/* ─── Product Grid (3 columns) ─────────────────────── */
.product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* ─── Productos destacados: misma card que #trabajos (overlay blanco
   chamfered del template demo_5), pero con "Ver producto →" siempre
   visible reemplazando el subtítulo de categoría. Hover wine COPPSA. */

/* Restaurar comportamiento del template (anular gradient global líneas
   637-657 que hijackearía el bg). Mismo patrón que #trabajos. */
/* Mirror exacto de la card de galería (.projects-section .demo-project-card)
   aplicado al markup de home (#productos .project-card). */
/* La card es contenedor de posicionamiento del panel flotante. El
   overflow:hidden global (línea 1142) cortaría el desborde, así que
   lo abrimos y reservamos espacio inferior para que el panel cuelgue
   y se expanda en hover sin pisar la fila siguiente. */
#productos.demo-projects-section .project-card {
    overflow: visible !important;
    position: relative;
    margin-bottom: 90px;
    border-radius: 0;
}
#productos.demo-projects-section .project-card .project-card-img {
    aspect-ratio: 3 / 4;
    height: auto;
    overflow: hidden;
}
#productos.demo-projects-section .project-card .project-card-img img {
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: cover;
    transition: transform 0.4s ease-in-out;
}
#productos.demo-projects-section .project-card:hover .project-card-img img {
    transform: scale(1.06);
}
/* Reposo: panel blanco flotando sobre el borde inferior de la imagen,
   con un ligero desborde hacia abajo (mismo patrón demo_1 Aventra).
   Sólo título + subtítulo visibles; línea + CTA esperando el hover. */
#productos.demo-projects-section .project-card .project-content {
    background-color: #ffffff !important;
    background-image: none !important;
    text-align: left;
    position: absolute;
    left: 6%;
    right: 6%;
    width: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    bottom: -40px;
    padding: 24px 28px;
    z-index: 2;
    box-shadow: 0 10px 30px rgba(127, 64, 106, 0.08);
    transition:
        background-color 0.4s ease-in-out,
        padding-bottom 0.4s ease-in-out,
        bottom 0.4s ease-in-out;
}
#productos.demo-projects-section .project-card .project-content .project-title {
    color: #7f406a !important;
    font-size: 20px !important;
    line-height: 1.3 !important;
    font-weight: 700;
    /* Reservar 2 líneas para que las cards queden todas a la misma altura */
    min-height: 2.6em;
    transition: color 0.4s ease-in-out;
}
#productos.demo-projects-section .project-card .project-content p {
    color: #7f406a !important;
    font-weight: 600;
    transition: color 0.4s ease-in-out;
}
/* Línea separadora y CTA ocultos en reposo, anclados al borde inferior
   para deslizar al revelar la expansión del panel en hover. */
#productos.demo-projects-section .project-card .project-content .line {
    background-color: rgba(255, 255, 255, 0.5) !important;
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 40px;
    height: 1px;
    opacity: 0;
    transform: translateY(20px);
    transition:
        opacity 0.4s ease-in-out,
        transform 0.4s ease-in-out;
}
#productos.demo-projects-section .project-card .project-content .read-more {
    color: #ffffff !important;
    position: absolute;
    left: 24px;
    bottom: 16px;
    opacity: 0;
    transform: translateY(20px);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    font-weight: 600;
    transition:
        opacity 0.4s ease-in-out,
        transform 0.4s ease-in-out,
        color 0.4s ease-in-out;
}
#productos.demo-projects-section .project-card .project-content .read-more svg {
    width: 14px;
    height: 14px;
    fill: #7f406a !important;
    transition: fill 0.4s ease-in-out;
}
/* Hover: turquesa, panel se expande hacia abajo, línea + CTA fade-in. */
#productos.demo-projects-section .project-card:hover .project-content {
    background-color: #41bebd !important;
    background-image: none !important;
    padding-bottom: 68px !important;
}
#productos.demo-projects-section .project-card:hover .project-content .project-title,
#productos.demo-projects-section .project-card:hover .project-content p {
    color: #ffffff !important;
}
#productos.demo-projects-section .project-card:hover .project-content .read-more {
    color: #ffffff !important;
    opacity: 1;
    transform: translateY(0);
}
#productos.demo-projects-section .project-card:hover .project-content .read-more svg {
    fill: #ffffff !important;
}
#productos.demo-projects-section .project-card:hover .project-content .line {
    opacity: 1;
    transform: translateY(0);
    background-color: rgba(255, 255, 255, 0.5) !important;
}

/* ─── Mirror exacto de .demo-project-card de la plantilla demo_5 ──── */
/* Imagen con chaflán en la esquina superior derecha; tarjeta de
   contenido en absolute, con chaflán en la esquina inferior derecha,
   ligeramente inset y desbordando 3rem por debajo de la imagen, tal
   como en `.projects-section .demo-project-card` del template. */
#productos.demo-projects-section .project-card {
    position: relative;
    overflow: visible;
    border-radius: 0;
    background: transparent;
}
#productos.demo-projects-section .project-card .project-card-img {
    width: 100%;
    display: block;
    overflow: hidden;
    -webkit-clip-path: var(--slope-clip-top-right-3);
    clip-path: var(--slope-clip-top-right-3);
}
#productos.demo-projects-section .project-card .project-content {
    padding: 2.4rem 2.6rem 2.4rem;
    position: absolute;
    bottom: calc(var(--slope-value-3) * -1);
    width: 88%;
    margin-left: 2.4rem;
    z-index: 2;
    -webkit-clip-path: var(--slope-clip-bottom-right-3);
    clip-path: var(--slope-clip-bottom-right-3);
    transition:
        padding-bottom 0.4s ease-in-out,
        background-color 0.4s ease-in-out;
}
/* En hover la card de contenido se expande hacia abajo para alojar la
   línea separadora y el "Ver producto →" que entran con fade + lift,
   igual que en la plantilla (Wind/Solar Solutions). */
#productos.demo-projects-section .project-card:hover .project-content {
    padding-bottom: 6.5rem;
}

/* Línea y CTA: ocultos en reposo, se revelan en hover con un lift
   desde abajo. Estos elementos quedan `position: absolute` sobre la
   card de contenido (en su posición static original respecto al flujo,
   con left/bottom específicos en hover) para que no ocupen espacio en
   reposo. */
#productos.demo-projects-section .project-card .project-content .line {
    position: absolute;
    display: block;
    width: calc(100% - 5.2rem);
    height: 1px;
    left: 2.6rem;
    bottom: 3.6rem;
    margin: 0;
    opacity: 0;
    transform: translateY(20px);
    transition:
        opacity 0.4s ease-in-out,
        transform 0.4s ease-in-out;
}
#productos.demo-projects-section .project-card .project-content .read-more {
    position: absolute;
    display: inline-flex;
    align-items: center;
    width: max-content;
    left: 2.6rem;
    bottom: 1.4rem;
    opacity: 0;
    transform: translateY(20px);
    overflow: visible !important;
    padding: 0;
    margin: 0;
    line-height: 1.4;
    transition:
        opacity 0.4s ease-in-out,
        transform 0.4s ease-in-out,
        bottom 0.4s ease-in-out,
        color 0.4s ease-in-out;
}
#productos.demo-projects-section .project-card .project-content .read-more svg {
    height: 14px;
    margin-left: 0.6rem;
    transition: fill 0.4s ease-in-out, transform 0.3s ease-in-out;
}
#productos.demo-projects-section .project-card:hover .project-content .line {
    opacity: 1;
    transform: translateY(0);
}
#productos.demo-projects-section .project-card:hover .project-content .read-more {
    opacity: 1;
    transform: translateY(0);
}
#productos.demo-projects-section .project-card:hover .project-content .read-more svg {
    transform: translateX(4px);
}

/* Hueco vertical extra en la grilla: el contenido se proyecta 3rem
   debajo de cada imagen, y necesita espacio adicional para no pisar
   la fila siguiente. */
#productos.demo-projects-section .product-grid {
    row-gap: 96px;
    padding-bottom: 56px !important;
}

@media (max-width: 991px) {
    #productos.demo-projects-section .product-grid {
        row-gap: 80px;
    }
}

@media (max-width: 767px) {
    #productos.demo-projects-section .project-card .project-content {
        width: 90%;
        padding: 1.8rem 2rem 1.6rem;
    }
    #productos.demo-projects-section .project-card .project-content .line {
        margin: 1.8rem 0 1rem;
    }
    #productos.demo-projects-section .product-grid {
        row-gap: 72px;
        padding-bottom: 40px !important;
    }
}

/* ─────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .section         { padding: 60px 0; }
  .demo-hero-section { min-height: auto; }
  .hero-title      { font-size: 2.25rem !important; }
  .counter-item + .counter-item {
    border-left: none;
    border-top: 1px solid rgba(255,255,255,0.1);
  }
  .header .icons-block .btn.primary {
    display: none;
  }
  .commitment-item { margin-bottom: 1rem; }
  .main-heading { font-size: clamp(1.5rem, 3vw, 2rem); }
  .main-heading::after {
    margin: 0.5rem auto 0;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .hero-title      { font-size: 3rem !important; }
  .section         { padding: 75px 0; }
}

/* ─── Novedades Slider (repurposed feedback section) ────────── */

.customer-feedback-section .feedback-main-wrapper .feedback-box .news-tag {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #41bebd;
    margin: 0 0 14px;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s;
    transition-delay: 0s;
}

.customer-feedback-section .feedback-main-wrapper .swiper-slide.swiper-slide-active .feedback-box .news-tag {
    opacity: 1;
    transform: translateY(0px);
}

.customer-feedback-section .feedback-main-wrapper .feedback-box .news-text {
    padding: 1.5rem 0 2rem;
    line-height: 28px;
}

.customer-feedback-section .feedback-main-wrapper .feedback-box .news-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-decoration: none;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s;
    transition-delay: 0.9s;
}

.customer-feedback-section .feedback-main-wrapper .swiper-slide.swiper-slide-active .feedback-box .news-link {
    opacity: 1;
    transform: translateY(0px);
}

.customer-feedback-section .feedback-main-wrapper .feedback-box .news-link:hover {
    color: #41bebd;
}

/* ─── Dark overlay on news bg image so all photos look moody ── */
.customer-feedback-section .feedback-main-wrapper .feedback-bg-img {
    position: relative;
    z-index: 0;
}
.customer-feedback-section .feedback-main-wrapper::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(8, 8, 16, 0.55);
    clip-path: var(--slope-clip-top-right-5);
    z-index: 1;
    pointer-events: none;
}
.customer-feedback-section .feedback-main-wrapper .feedback-slider {
    z-index: 2;
    position: absolute;
}
.customer-feedback-section .feedback-main-wrapper .feedback-slider-btns {
    z-index: 3;
}

/* ─── Fixed-height news background container ─────────────────── */
.customer-feedback-section .feedback-main-wrapper {
    height: 620px;
    overflow: visible;
}

.customer-feedback-section .feedback-main-wrapper .feedback-bg-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    clip-path: var(--slope-clip-top-right-5);
    z-index: 0;
}

/* ─── Service cards default: gray bg + purple text/icon ──────── */
.why-choose-us-section .cards-wrapper .service-card {
    background-color: #f2f1f5;
}

.why-choose-us-section .cards-wrapper .service-card .icon svg {
    fill: var(--c-primary-500);
}

.why-choose-us-section .cards-wrapper .service-card .card-content .card-title {
    color: var(--c-primary-500);
}

.why-choose-us-section .cards-wrapper .service-card .card-content p {
    color: #5a4e60;
}

.why-choose-us-section .cards-wrapper .service-card .card-content .read-more {
    color: var(--c-primary-500);
}

.why-choose-us-section .cards-wrapper .service-card .card-content .read-more svg {
    fill: var(--c-primary-500);
}

/* ─── Service cards hover: force icon + read-more to white ─────── */
.why-choose-us-section .cards-wrapper .service-card:hover .icon svg {
    fill: #ffffff !important;
}

.why-choose-us-section .cards-wrapper .service-card:hover .card-content .read-more {
    color: #ffffff !important;
}

.why-choose-us-section .cards-wrapper .service-card:hover .card-content .read-more svg {
    fill: #ffffff !important;
}

/* ─── Service cards: hide "Ver servicio" by default, show on hover ── */
.why-choose-us-section .cards-wrapper .service-card .card-content .read-more {
    opacity: 0;
    transition: opacity 0.4s ease-in-out, color 0.4s ease-in-out;
}

.why-choose-us-section .cards-wrapper .service-card:hover .card-content .read-more {
    opacity: 1 !important;
}

/* ─── Safety: hide Industries-We-Serve section (removed from HTML) ── */
.areas-serve-section.areas-serve-section-3 {
    display: none !important;
}

/* ─── Safety: hide FAQ section (removed from HTML) ── */
.faqs-section {
    display: none !important;
}

/* ─── Safety: hide video+metrics section (removed from HTML) ── */
.industries-section.industries-video-section {
    display: none !important;
}

/* ─── CTA Banner — Consultation section redesign ──────────────── */
/* ─── CTA Banner — Aventra-style: badge + headline + 2 buttons ─── */
.coppsa-cta-banner {
    background: #1a1c22;
    padding: 4rem 0 !important;
    position: relative;
    overflow: visible;
    margin-bottom: 20rem;
    scroll-margin-top: 110px;
    z-index: 5; /* allows badge to visually stack above the preceding section */
}

.coppsa-cta-bg {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(26, 28, 34, 0.92) 0%, rgba(26, 28, 34, 0.78) 50%, rgba(26, 28, 34, 0.92) 100%),
        repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.025) 0 2px, transparent 2px 14px),
        radial-gradient(ellipse at 80% 50%, rgba(65, 190, 189, 0.10) 0%, transparent 60%),
        radial-gradient(ellipse at 20% 50%, rgba(127, 64, 106, 0.14) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
}

.coppsa-cta-dots {
    position: absolute;
    top: 14px;
    right: 24px;
    width: 60px;
    height: 60px;
    z-index: 1;
    pointer-events: none;
}

.coppsa-cta-inner {
    display: flex;
    align-items: center;
    gap: 3.6rem;
    position: relative;
    z-index: 2;
    min-height: 110px;
    padding-left: 150px; /* reserve space for absolutely positioned badge (badge 120px + 30px gap) */
}

/* Logo badge (left) — absolutely positioned so it sticks out above and below
   the dark band, mirroring the Aventra template "flap" effect (orange badge
   in image_1777556101607.png). Square-ish (~120×140px) with ~22px chamfered
   corners on the top-left and bottom-left for clean diagonal cuts, solid
   brand colour (no gradient) and a single bold initial as the brand mark —
   matching the template's single-letter "A" approach. */
.coppsa-cta-badge {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 120px;
    height: 140px;
    background: var(--c-primary-500);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    box-shadow: 0 18px 40px rgba(127, 64, 106, 0.45);
    -webkit-clip-path: polygon(22px 0%, 100% 0%, 100% 100%, 22px 100%, 0% calc(100% - 22px), 0% 22px);
    clip-path: polygon(22px 0%, 100% 0%, 100% 100%, 22px 100%, 0% calc(100% - 22px), 0% 22px);
    z-index: 3;
}

.coppsa-cta-badge-mark {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: 5.4rem;
    font-weight: 700;
    line-height: 1;
    color: #ffffff;
    letter-spacing: -0.02em;
}

/* Headline + description (middle) */
.coppsa-cta-text {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.8rem;
    min-width: 0;
}

.coppsa-cta-headline {
    color: #ffffff;
    font-size: 2.4rem;
    line-height: 1.25;
    margin: 0;
    font-weight: 700;
    text-align: left;
}

.coppsa-cta-desc {
    color: rgba(255, 255, 255, 0.72);
    font-size: 1.5rem;
    line-height: 1.55;
    margin: 0;
    font-weight: 400;
    text-align: left;
    max-width: 62rem;
}

/* Buttons (right) */
.coppsa-cta-action {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 1.4rem;
    margin-left: auto;
}

.coppsa-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    padding: 1.8rem 2.6rem;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    border: none;
    cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease, transform 0.2s ease;
    /* Chamfer top-right corner like the template */
    -webkit-clip-path: polygon(0% 0%, calc(100% - 18px) 0%, 100% 18px, 100% 100%, 0% 100%);
    clip-path: polygon(0% 0%, calc(100% - 18px) 0%, 100% 18px, 100% 100%, 0% 100%);
}

.coppsa-cta-btn--primary {
    background: var(--c-primary-500);
    color: #ffffff;
}

.coppsa-cta-btn--primary:hover {
    background: var(--c-primary-700);
    color: #ffffff;
    transform: translateY(-2px);
}

.coppsa-cta-btn--secondary {
    background: #ffffff;
    color: #1a1c22;
}

.coppsa-cta-btn--secondary:hover {
    background: var(--c-secondary-500);
    color: #ffffff;
    transform: translateY(-2px);
}

.coppsa-cta-arrow {
    width: 1.2rem;
    height: 1.2rem;
    fill: currentColor;
    transition: transform 0.25s ease;
}

.coppsa-cta-btn:hover .coppsa-cta-arrow {
    transform: translateX(4px);
}

/* Safety: hide consultation photo block (removed from HTML) */
.image-section {
    display: none !important;
}

/* ─── Footer refinements ──────────────────────────────────────── */
.footer-desc {
    color: rgba(255, 255, 255, 0.6);
    font-size: 1.5rem;
    line-height: 1.7;
    margin-top: 1.2rem;
    margin-bottom: 0;
}

.coppsa-copyright-bar {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding-top: 2.4rem;
}

.footer-secondary-nav {
    display: flex;
    align-items: center;
    gap: 0;
}

.footer-secondary-nav a {
    color: rgba(255, 255, 255, 0.5);
    font-size: 1.4rem;
    text-decoration: none;
    padding: 0 1.6rem;
    transition: color 0.2s;
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    white-space: nowrap;
}

.footer-secondary-nav a:last-child {
    border-right: none;
    padding-right: 0;
}

.footer-secondary-nav a:hover {
    color: var(--c-secondary-500);
}

/* ─── Trabajos Realizados: componente Projects-section verbatim de
   Aventra demo_2/home-2.html (líneas 1530-1716). CSS .services-section
   ya está cargado en style_demo5.css (líneas 2467+). Adaptaciones
   COPPSA: background wine→teal radial (heredado del antiguo
   .demo-projects-section, ahora override scoped), antetítulo turquesa
   con línea ::before, icon box wine, btn primary wine. */

/* Fallback wow.js para anchor jump #trabajos. */
#trabajos.services-section .wow:not(.animated) {
    visibility: visible !important;
    opacity: 1 !important;
    animation: none !important;
}

/* Background COPPSA: anula el url(...) PNG del template y aplica el
   gradient radial wine→teal (mismo que tenía .demo-projects-section).
   Mantenemos el clip-path top-right-5 del template demo_2 y reducimos
   el padding-top para integrarlo al layout COPPSA. */
#trabajos.services-section {
    position: relative;
    background-image:
        linear-gradient(135deg,
            rgba(74, 33, 60, 0.72) 0%,
            rgba(58, 26, 48, 0.80) 55%,
            rgba(40, 16, 32, 0.88) 100%),
        url('../images-5/trabajos-bg-coppsa.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding-top: 8rem;
    padding-bottom: 8rem;
}
#trabajos.services-section.ml-\[0px\] {
    margin-left: 0 !important;
}
#trabajos.services-section.pl-\[40px\] {
    padding-left: 40px !important;
}
#trabajos.services-section.pr-\[40px\] {
    padding-right: 40px !important;
}

/* Heading: restituye tamaños de titular/antetítulo (anulados por reglas
   globales h2/.main-heading y .sub-heading en coppsa-custom líneas 87 y
   113), neutraliza ::after global (sin subrayado en esta sección),
   antetítulo turquesa con línea ::before. */
#trabajos.services-section .heading-wrapper {
    margin-top: 24px;
    margin-bottom: 5rem;
}
#trabajos.services-section .heading-wrapper .main-heading {
    font-size: var(--main-heading-font-size, 7rem);
    line-height: var(--heading-line-height, 1.05);
    color: var(--primary-white);
}
#trabajos.services-section .heading-wrapper .main-heading::after {
    display: none;
}
#trabajos.services-section .heading-wrapper .sub-heading {
    position: relative;
    padding-left: 36px;
    font-size: var(--sub-heading-font-size, 1.4rem);
    color: var(--c-secondary-500, #41bebd);
    letter-spacing: 1.6px;
    margin-bottom: 20px;
}
#trabajos.services-section .heading-wrapper .sub-heading::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 28px;
    height: 2px;
    background: var(--c-secondary-500, #41bebd);
    transform: translateY(calc(-50% - 4px));
}

/* Service-icon: cuadrito chamfered con bg wine COPPSA (template usa
   --primary-color que en este sitio mapea a wine, debería funcionar,
   pero forzamos por las dudas). Iconos blancos. */
#trabajos.services-section .service-card .services-content-block .service-icon {
    background-color: var(--c-primary-500, #7f406a);
}
#trabajos.services-section .service-card .services-content-block .service-icon svg {
    fill: var(--primary-white);
}

/* Title color y "info .title" (BUDGET/CLIENTE labels) en wine COPPSA. */
#trabajos.services-section .service-card .services-content-block .service-title {
    color: var(--c-primary-500, #7f406a);
}
#trabajos.services-section .service-card .services-content-block .info .title {
    color: var(--c-primary-500, #7f406a);
}

/* Botón primary en wine COPPSA con hover teal. */
#trabajos.services-section .service-card .services-content-block .service-btn .btn.primary {
    background-color: var(--c-primary-500, #7f406a);
}
#trabajos.services-section .service-card .services-content-block .service-btn .btn.primary::before {
    background: var(--c-secondary-500, #41bebd);
}

/* Neutraliza la regla genérica .service-card (líneas 1005-1034): borde
   gris + border-radius 8px que chocan con el clip-path chamfer, y el
   hover (translateY/box-shadow/::before line) que no queremos en esta
   sección. Conservamos clip-path top-right del template. */
#trabajos.services-section .service-card {
    border: 0 !important;
    border-radius: 0 !important;
    transition: none !important;
    box-shadow: none !important;
    transform: none !important;
}
#trabajos.services-section .service-card::before {
    display: none !important;
}
#trabajos.services-section .service-card:hover {
    border-color: transparent !important;
    box-shadow: none !important;
    transform: none !important;
}
#trabajos.services-section .service-card:hover::before {
    transform: scaleX(0) !important;
    display: none !important;
}

.coppsa-products-fullwidth {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

.coppsa-products-inner {
    max-width: 1440px;
    margin: 0 auto;
    padding-left: 60px;
    padding-right: 60px;
}

@media (max-width: 991px) {
    .coppsa-products-inner {
        padding-left: 32px;
        padding-right: 32px;
    }
}

@media (max-width: 767px) {
    .coppsa-products-inner {
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* ─── Footer 3-col layout (brand+contact / sitemap / quick form) ─── */
.coppsa-footer-grid {
    display: grid !important;
    /* Layout del footer Home 4 Aventra: brand fija a la izquierda
       (30rem), form fija a la derecha (36rem) anclada al borde derecho,
       sitemap como 1fr en el medio absorbe el espacio sobrante para
       quedar centrado entre ambas. column-gap amplio (12rem) crea
       gaps muy generosos entre las tres columnas. */
    grid-template-columns: 30rem 1fr 44rem;
    column-gap: 6rem !important;
    align-items: start;
    width: 100%;
}

/* Sitemap col: centra sus contenidos dentro del 1fr para reproducir
   la composición del template Home 4 (sitemap visualmente al medio). */
.coppsa-footer-grid .links-col {
    justify-self: center;
}

/* "Mapa de sitio" siempre en una sola línea */
.coppsa-footer-grid .links-col .title {
    white-space: nowrap;
}

/* Form col anclada al borde derecho de su track. El panel "Contacto rápido"
   sobresale ~60px hacia arriba sobre el borde superior del footer. */
.coppsa-footer-grid .coppsa-foot-form-col {
    justify-self: end;
    /* -60px compensa el padding-top:60px del footer y otros 60px adicionales
       hacen que el panel sobresalga 60px por encima del borde superior. */
    margin-top: -120px !important;
    position: relative;
    z-index: 3;
}

/* ─── Responsive footer (replica Home 4 colapsado) ─────────────────
   Al colapsarse el grid pasa a 1 sola columna con orden:
     1) Form panel (CONTACTO RÁPIDO)  → order: -1
     2) Brand + contacto              → order: 1
     3) Mapa de sitio                  → order: 2
   El form se estira al ancho completo del container, anula su width
   fijo y su justify-self end del desktop, y mantiene el clip-path con
   el chamfer top-right igual que en el template original. */
@media (max-width: 991px) {
    .coppsa-footer-grid {
        grid-template-columns: 1fr !important;
        column-gap: 0 !important;
        row-gap: 5rem;
    }
    /* Anula los width/max-width fijos del desktop para que cada columna
       llene el ancho completo del container al colapsar. */
    .coppsa-footer-grid .coppsa-foot-brand,
    .coppsa-foot-brand {
        width: 100%;
        max-width: 100%;
    }
    /* Form: ocupa el ancho completo y va PRIMERO (grid-row: 1). Usamos
       grid-row explícito porque el CSS del template (style_demo4.css)
       define `grid-row: 1` para .about-col y `grid-row: 2` para .links-col
       en este mismo breakpoint, y eso anularía un simple `order: -1`. */
    .coppsa-footer-grid .coppsa-foot-form-col {
        grid-row: 1 !important;
        grid-column: 1 / -1 !important;
        justify-self: stretch;
        width: 100%;
        max-width: 100%;
    }
    /* Brand col en row 2 (sobrescribe el grid-row: 1 del template). */
    footer.green-demo-footer .about-col,
    .coppsa-footer-grid .about-col {
        grid-row: 2 !important;
    }
    /* Sitemap al final, sin centrar (queda alineado a la izquierda
       como en el Home 4 colapsado). */
    footer.green-demo-footer .links-col,
    .coppsa-footer-grid .links-col {
        grid-row: 3 !important;
        justify-self: start;
    }
}

@media (max-width: 600px) {
    /* Padding interno del footer más reducido en mobile para que el form
       y el resto del contenido aprovechen el ancho disponible. */
    footer.green-demo-footer {
        padding-left: 1.6rem !important;
        padding-right: 1.6rem !important;
    }
    /* Form con padding interno menor en mobile. */
    .coppsa-foot-form-col {
        padding: 4rem 2.4rem 3.2rem;
        margin-top: -120px;
    }
}

/* Brand col: contact items with icons */
.coppsa-foot-contact-list {
    list-style: none;
    padding: 0;
    margin: 2.4rem 0 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
}

.coppsa-foot-contact-list li {
    display: flex;
    align-items: flex-start;
    gap: 1.6rem;
    color: rgba(255, 255, 255, 0.92);
    font-size: 1.8rem;
    font-weight: 600;
    line-height: 2.8rem;
}

/* Ítem de dirección (3er li): reducimos el tamaño para que la primera
   línea "Av. Concejal Felipe Belardinelli 4850," quepa en 30rem y el
   texto quede en 2 líneas totales en lugar de 3. */
.coppsa-foot-contact-list li:nth-child(3) {
    font-size: 1.4rem;
    line-height: 2.2rem;
}

.coppsa-foot-contact-list a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    transition: color 0.2s ease;
}

.coppsa-foot-contact-list a:hover {
    color: var(--c-secondary-500);
}

/* Iconos de contacto SIN contenedor circular — al estilo del Home 4 de
   Aventra: el icono se renderiza directamente en línea junto al texto.
   Los círculos se reservan exclusivamente para los iconos de redes
   sociales (.footer-social-links .social-link). */
.coppsa-foot-icon {
    width: 22px;
    height: 22px;
    min-width: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 4px;
    background: transparent;
    border: none;
    border-radius: 0;
}

.coppsa-foot-icon svg {
    width: 18px;
    height: 18px;
    fill: rgba(255, 255, 255, 0.75);
}

/* Quick contact form — panel que sobresale 260px sobre el footer.
   Contenido dentro del .container del footer, con el mismo gutter de
   ambos lados (igual que la columna brand a la izquierda). Sin bleed
   al borde del viewport. */
.coppsa-foot-form-col {
    position: relative;
    align-self: start;
    /* Ancho fijo del form panel (~508px, ampliado +100px para dar más
       respiro a labels/inputs sin invadir la columna del sitemap). */
    width: 50.8rem;
    max-width: 50.8rem;
    margin-top: -200px;
    /* Imagen industrial de fondo (pumpjack) tintada con morado de marca
       en gradient diagonal — replica el patrón del Home 4 de Aventra
       que combina foto + overlay de color de marca para dar identidad
       sin perder legibilidad. */
    background:
        linear-gradient(135deg, rgba(127, 64, 106, 0.88) 0%, rgba(51, 22, 42, 0.94) 70%),
        url('../images-coppsa/coppsa-form-bg.jpg') center/cover no-repeat;
    background-color: var(--c-primary-800);
    padding: 5.6rem 4rem 4.8rem;
    z-index: 3;
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.5);
    /* Chamfer top-right: corta la esquina superior derecha (46px). */
    -webkit-clip-path: polygon(0% 0%, calc(100% - 46px) 0%, 100% 46px, 100% 100%, 0% 100%);
    clip-path: polygon(0% 0%, calc(100% - 46px) 0%, 100% 46px, 100% 100%, 0% 100%);
    border-radius: 0;
}

.coppsa-foot-form-title {
    text-align: center !important;
    margin-bottom: 3rem !important;
    color: #ffffff !important;
    letter-spacing: 0.18em !important;
    /* Tamaño propio para no tocar el título MAPA DE SITIO */
    font-size: 1.2rem !important;
}

.coppsa-foot-form {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.coppsa-foot-field {
    position: relative;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
    padding: 1.4rem 0 1.4rem;
    transition: border-color 0.2s ease;
}

.coppsa-foot-field:focus-within {
    border-color: var(--c-secondary-500);
}

.coppsa-foot-field-icon {
    width: 22px;
    min-width: 22px;
    margin-right: 1.2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.coppsa-foot-field-icon svg {
    width: 18px;
    height: 18px;
    fill: rgba(255, 255, 255, 0.6);
    transition: fill 0.2s ease;
}

.coppsa-foot-field:focus-within .coppsa-foot-field-icon svg {
    fill: var(--c-secondary-500);
}

.coppsa-foot-field input,
.coppsa-foot-field textarea {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: #ffffff;
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 2.6rem;
    font-family: inherit;
    padding: 0.4rem 0;
    resize: none;
}

.coppsa-foot-field input::placeholder,
.coppsa-foot-field textarea::placeholder {
    color: rgba(255, 255, 255, 0.55);
}

.coppsa-foot-field--textarea {
    align-items: flex-start;
}

.coppsa-foot-field--textarea .coppsa-foot-field-icon {
    margin-top: 0.6rem;
}

.coppsa-foot-field--textarea textarea {
    min-height: 72px;
    line-height: 1.5;
}

/* El botón de envío del form del footer hereda de .btn.ghost
   (blanco/vino → hover vino/blanco con burbuja Aventra). Aquí sólo
   ajustamos sizing/padding y el clip-path para que ocupe todo el
   ancho del form. */
.btn.ghost.coppsa-foot-submit {
    margin-top: 2.2rem;
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 2rem !important;
    font-size: 1.1rem !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase;
    cursor: pointer;
    /* Chamfer top-right corner like the template */
    -webkit-clip-path: polygon(0% 0%, calc(100% - 18px) 0%, 100% 18px, 100% 100%, 0% 100%);
    clip-path: polygon(0% 0%, calc(100% - 18px) 0%, 100% 18px, 100% 100%, 0% 100%);
}

.btn.ghost.coppsa-foot-submit:disabled {
    opacity: 0.85;
    cursor: default;
}

/* Hide the legacy decorative grid icon if still around */
.green-demo-footer .grid-icon {
    display: none;
}

/* ============================================================
   Cotizar drawer (offcanvas lateral derecho)
   Replica el patrón demo_1 de Aventra: panel slide-in desde la
   derecha con foto reducida arriba + form de contacto idéntico
   al del footer + CTA "Enviar mensaje". Se abre desde el nav.
   ============================================================ */
.coppsa-quote-drawer {
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    visibility: hidden;
}
.coppsa-quote-drawer.is-open {
    pointer-events: auto;
    visibility: visible;
}
.coppsa-quote-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 6, 20, 0.55);
    opacity: 0;
    transition: opacity 0.32s ease;
}
.coppsa-quote-drawer.is-open .coppsa-quote-backdrop {
    opacity: 1;
}
.coppsa-quote-panel {
    position: absolute;
    top: 0;
    right: 0;
    height: 100vh;
    width: 460px;
    max-width: 92vw;
    transform: translateX(100%);
    transition: transform 0.38s cubic-bezier(0.22, 0.61, 0.36, 1);
    background:
        linear-gradient(135deg, rgba(127, 64, 106, 0.94) 0%, rgba(51, 22, 42, 0.97) 70%),
        url('../images-5/trabajos-bg-coppsa.jpg') center/cover no-repeat;
    background-color: var(--c-primary-800, #33162a);
    box-shadow: -28px 0 60px rgba(0, 0, 0, 0.45);
    padding: 28px 36px 36px;
    overflow-y: auto;
    -webkit-clip-path: polygon(36px 0%, 100% 0%, 100% 100%, 0% 100%, 0% 36px);
    clip-path: polygon(36px 0%, 100% 0%, 100% 100%, 0% 100%, 0% 36px);
    display: flex;
    flex-direction: column;
}
.coppsa-quote-drawer.is-open .coppsa-quote-panel {
    transform: translateX(0);
}
.coppsa-quote-close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 38px;
    height: 38px;
    background: transparent;
    border: none;
    color: #ffffff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 50%;
    transition: background 0.2s ease, color 0.2s ease;
    z-index: 2;
}
.coppsa-quote-close svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
}
.coppsa-quote-close:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--c-secondary-500, #41bebd);
}
.coppsa-quote-title {
    text-align: center;
    color: #ffffff;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-size: 1.2rem;
    font-weight: 700;
    margin: 32px 0 1.8rem;
}

/* ── Selectify widget dentro del drawer/footer form ─────────────────────
   La librería selectify (main.js) inicializa en todos los <select> de la
   página y genera .selectify-wrapper > .selectify > .active-wrapper + ul.
   El <select> original queda hidden. Estilos completos para fondo wine. */

.coppsa-foot-field .selectify-wrapper {
    flex: 1 1 0% !important;
    width: 0 !important;          /* fuerza al flex a distribuir el espacio */
    min-width: 0 !important;
    position: relative;
    display: block;
}

/* El <select> nativo oculto no debe ocupar espacio en el layout */
.coppsa-foot-field .selectify-wrapper select {
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    overflow: hidden !important;
}

.coppsa-foot-field .selectify-wrapper .selectify {
    position: relative;
    width: 100%;
}

/* Botón visible (valor activo + flecha) */
.coppsa-foot-field .selectify-wrapper .selectify .active-wrapper {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-direction: row !important;
    width: 100% !important;
    position: static !important;
    cursor: pointer;
    padding: 0.4rem 0;
    gap: 0.8rem;
}

.coppsa-foot-field .selectify-wrapper .selectify .active {
    flex: 1 !important;
    order: 1 !important;   /* texto primero (izquierda) */
    color: rgba(255,255,255,0.55) !important;
    font-size: 1.6rem !important;
    font-weight: 500 !important;
    font-family: inherit !important;
    background: none !important;
    clip-path: none !important;
    padding: 0 !important;
    display: block !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 2.6rem !important;
    min-width: 0;
}

.coppsa-foot-field .selectify-wrapper .selectify .active-wrapper:hover .active,
.coppsa-foot-field .selectify-wrapper .selectify.shown .active {
    color: #fff !important;
}

/* Chevron — siempre al extremo derecho vía order */
.coppsa-foot-field .selectify-wrapper .selectify .arrow-icon {
    position: static !important;
    transform: none !important;
    order: 2 !important;   /* flecha después del texto (derecha) */
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    margin-left: 0;
    transition: transform 0.2s ease;
}

.coppsa-foot-field .selectify-wrapper .selectify.shown .arrow-icon {
    transform: rotate(180deg) !important;
}

.coppsa-foot-field .selectify-wrapper .selectify .arrow-icon svg {
    width: 14px;
    height: 14px;
    fill: rgba(255,255,255,0.55);
    display: block;
}

.coppsa-foot-field .selectify-wrapper .selectify.shown .arrow-icon svg {
    fill: #fff;
}

/* Lista desplegable */
.coppsa-foot-field .selectify-wrapper .selectify ul {
    position: absolute !important;
    top: calc(100% + 4px) !important;
    left: 0 !important;
    width: max(100%, 200px) !important;
    background-color: #fff !important;
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.18) !important;
    list-style: none !important;
    padding: 0.4rem 0 !important;
    margin: 0 !important;
    z-index: 9999 !important;
    clip-path: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 0.15s ease, visibility 0.15s ease !important;
    max-height: 240px;
    overflow-y: auto;
}

.coppsa-foot-field .selectify-wrapper .selectify.shown ul {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: all !important;
    top: calc(100% + 4px) !important;
}

.coppsa-foot-field .selectify-wrapper .selectify ul li {
    padding: 0.75rem 1.2rem !important;
    font-size: 12px !important;
    color: #2d1a26 !important;
    cursor: pointer;
    display: block !important;
    clip-path: none !important;
    transition: background 0.15s ease;
    margin: 0 !important;
}

.coppsa-foot-field .selectify-wrapper .selectify ul li:hover,
.coppsa-foot-field .selectify-wrapper .selectify ul li.selected {
    background-color: var(--c-primary-500) !important;
    color: #fff !important;
}

/* Lead-recovery block: contacto directo (estilo footer, una línea) */
.coppsa-quote-divider {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 1.8rem 0 1.4rem;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.coppsa-quote-divider::before,
.coppsa-quote-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.18);
}
.coppsa-quote-direct {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 18px 22px;
}
.coppsa-quote-direct-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #ffffff;
    text-decoration: none;
    font-size: 0.98rem;
    line-height: 1.3;
    transition: color 0.2s ease;
}
/* Hook visual Tailwind-like aplicado a los contactos directos del drawer */
.coppsa-quote-direct-link.text-\[12px\] {
    font-size: 12px !important;
}
.pt-\[10px\] { padding-top: 10px !important; }
.pb-\[10px\] { padding-bottom: 10px !important; }
.coppsa-quote-direct-link:hover {
    color: var(--c-secondary-500, #41bebd);
}
.coppsa-quote-direct-icon {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--c-secondary-500, #41bebd);
}
.coppsa-quote-direct-icon svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

/* Ocultar el FAB de WhatsApp mientras el drawer está abierto
   para que no se solape con el CTA "Solicitar presupuesto". */
body.coppsa-drawer-open .coppsa-wa-btn {
    opacity: 0;
    pointer-events: none;
    transform: translateY(20px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}
.coppsa-quote-form .coppsa-foot-field {
    margin-bottom: 0.4rem;
}
.coppsa-quote-form .coppsa-foot-field--textarea textarea {
    min-height: 56px;
    line-height: 1.5;
}
.coppsa-quote-form .coppsa-foot-submit {
    margin-top: 1.4rem;
    padding: 1.6rem 2rem;
}

@media (max-width: 600px) {
    .coppsa-quote-panel {
        width: 100vw;
        max-width: 100vw;
        padding: 24px 22px 28px;
    }
}

/* ─── Novedades Grid Section ─── */
.coppsa-news-section {
    background: transparent;
    padding: 80px 0 80px;
}

/* En la página de listado de novedades el botón "Ver más novedades"
   queda al final de la sección y la plantilla deja mucho aire hasta el
   footer. Reducimos el padding-bottom para acercar el CTA al footer. */
.coppsa-news-page.coppsa-news-section {
    padding-bottom: 30px !important;
}

.coppsa-news-headings {
    text-align: center;
    margin-bottom: 52px;
}

.coppsa-news-headings .sub-heading {
    color: var(--c-secondary-500);
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: 14px;
    display: block;
}

.coppsa-news-headings .main-heading {
    color: #12131a;
    font-size: 5.4rem;
    font-weight: 800;
    max-width: 760px;
    margin: 0 auto;
    line-height: 1.12;
    letter-spacing: -0.01em;
}

/* Bloque "También puede interesarte" en novedad-detail:
   título a la izquierda y botón a la derecha en la misma fila (desktop).
   En mobile se apila: título arriba y botón debajo, ambos a la izquierda. */
.coppsa-news-headings.coppsa-related-heading-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    text-align: left;
    margin-bottom: 40px;
    flex-wrap: wrap;
}
.coppsa-news-headings.coppsa-related-heading-row .main-heading {
    margin: 0;
    max-width: none;
    font-size: 4.2rem;
    text-align: left;
}
.coppsa-news-headings.coppsa-related-heading-row .main-heading::after {
    display: none !important;
    content: none !important;
}
.coppsa-news-headings.coppsa-related-heading-row .coppsa-related-cta {
    flex: 0 0 auto;
    margin: 0;
    white-space: nowrap;
}
@media (max-width: 767px) {
    .coppsa-news-headings.coppsa-related-heading-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
    .coppsa-news-headings.coppsa-related-heading-row .main-heading {
        font-size: 3.4rem;
    }
}

.coppsa-news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 3rem;   /* demo_2 spacing: 48px */
    row-gap: 5rem;      /* demo_2 spacing: 80px */
}

/* Cards ocultas hasta que el usuario haga click en "Ver más noticias". */
.coppsa-news-card.coppsa-news-card--hidden {
    display: none !important;
}

/* Duración explícita para la animación custom-fadeInUp aplicada
   dinámicamente al revelar nuevas cards (mismo patrón que demo_2). */
.coppsa-news-card--revealing {
    animation-duration: 0.9s;
    animation-fill-mode: both;
    animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Botón "Ver más noticias" centrado debajo del grid. */
.coppsa-news-load-more-wrap {
    display: flex;
    justify-content: center;
    margin-top: 56px;
}
.coppsa-news-load-more {
    border: none;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
}

/* ─────────────────────────────────────────────────────────────
   Adapted from the Aventra "home-1" Recent Blog section.
   Visual cues borrowed: top-left date badge with diagonal chamfer
   on its inner corner, image with a subtle top-right chamfer cut,
   flatter card with a soft hairline shadow, and centered card body.
   COPPSA content (category tag, excerpt, "Leer más") is preserved.
   ───────────────────────────────────────────────────────────── */
.coppsa-news-card {
    background: transparent;
    border-radius: 0;
    overflow: visible;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    transition: transform 0.25s ease;
    position: relative;
    cursor: pointer;
}

.coppsa-news-card:hover {
    box-shadow: none;
    transform: translateY(-4px);
}

.coppsa-news-card-img-wrap {
    display: block;
    position: relative;
    overflow: hidden;
    /* Mismo ratio que demo_2 (.blog-img-block ≈ 400 × 418 ≈ 1:1). */
    aspect-ratio: 1 / 1;
    /* Subtle chamfer on the top-right corner — Aventra signature detail */
    -webkit-clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
    clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
}

.coppsa-news-card-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.coppsa-news-card:hover .coppsa-news-card-img-wrap img {
    transform: scale(1.05);
}

/* Category badge — pinned to BOTTOM-LEFT of the image with a diagonal
   chamfer on the TOP-RIGHT corner (mismo recurso visual que el
   date-tag de demo_2). Reemplaza el badge de fecha: ahora muestra la
   categoría del artículo (Eventos / Innovación / Proyectos). */
.coppsa-news-cat {
    display: none !important;
    position: absolute;
    left: 0;
    bottom: 0;
    background: var(--c-secondary-500);
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1;
    padding: 14px 24px 12px 16px;
    -webkit-clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
    clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
    z-index: 2;
    pointer-events: none;
}

/* Legacy date badge (no usado actualmente, reemplazado por
   .coppsa-news-cat). Mantenido por compatibilidad. */
.coppsa-news-date {
    position: absolute;
    top: auto;
    left: 0;
    bottom: 0;
    background: var(--c-secondary-500);
    color: #ffffff;
    border-radius: 0;
    padding: 11px 22px 9px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
    min-width: 56px;
    text-align: center;
    -webkit-clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
    clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
    z-index: 2;
}

.coppsa-news-day {
    font-size: 2.2rem;
    font-weight: 700;
    display: block;
}

.coppsa-news-month {
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    display: block;
    margin-top: 3px;
}

/* Card body — patrón demo_7: solo título centrado debajo de la
   imagen, sin excerpt ni "Leer más", sin fondo ni padding lateral. */
.coppsa-news-body {
    padding: 24px 8px 0;
    display: flex;
    flex-direction: column;
    flex: 1;
    text-align: center;
    align-items: center;
    background: transparent;
}

/* Meta line: "Por admin · hace un día" — debajo de la foto,
   encima del título. Tomado del patrón demo_2 (blog-grid). */
.coppsa-news-meta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: 'Inter', sans-serif;
    font-size: 1.5rem;
    font-weight: 400;
    color: #8a8f9c;
    margin-bottom: 10px;
    letter-spacing: 0.01em;
}
.coppsa-news-meta .coppsa-news-dot {
    color: #c8ccd3;
    line-height: 1;
}

/* Category tag, excerpt y "Leer más" ocultos por diseño — toda la
   card es clickeable (stretched link). */
.coppsa-news-tag,
.coppsa-news-tag--promo,
.coppsa-news-tag--new,
.coppsa-news-excerpt,
.coppsa-news-readmore {
    display: none !important;
}

.coppsa-news-title {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.35;
    margin-bottom: 0;
    color: #12131a;
}

.coppsa-news-title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

/* Stretched link — invisible overlay across the entire card so any
   click on the card area follows the title's href. The image link
   underneath shares the same href, so behaviour is consistent. */
.coppsa-news-title a::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 3;
}

/* En demo_2 el hover solo aplica zoom a la imagen; el título NO cambia
   de color. Mantenemos el mismo color en hover para replicar ese
   comportamiento. */
.coppsa-news-card:hover .coppsa-news-title a {
    color: inherit;
}

/* Excerpt truncated to 2 lines with an ellipsis "…" suffix.
   Uses the standard line-clamp pattern; pure CSS, no JS. */
.coppsa-news-excerpt {
    font-size: 1.4rem;
    line-height: 1.55;
    color: #555b6e;
    margin-bottom: 0;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.coppsa-news-cta {
    text-align: center;
    margin-top: 52px;
}

/* ─── WhatsApp Floating Button ─── */
.coppsa-wa-btn {
    position: fixed;
    bottom: 28px;
    right: 28px;
    left: auto;
    z-index: 9999;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.coppsa-wa-circle {
    width: 60px;
    height: 60px;
    min-width: 60px;
    border-radius: 50%;
    background: #25D366;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 18px rgba(37, 211, 102, 0.45);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    position: relative;
}

.coppsa-wa-circle svg {
    width: 32px;
    height: 32px;
    fill: #ffffff;
}

.coppsa-wa-circle::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 3px solid rgba(37, 211, 102, 0.5);
    animation: coppsa-wa-pulse 2s ease-out infinite;
}

@keyframes coppsa-wa-pulse {
    0%   { transform: scale(1);   opacity: 1; }
    70%  { transform: scale(1.35); opacity: 0; }
    100% { transform: scale(1.35); opacity: 0; }
}

.coppsa-wa-tooltip {
    background: #1a1a2e;
    color: #ffffff;
    font-size: 1.3rem;
    font-weight: 500;
    white-space: nowrap;
    padding: 8px 14px;
    border-radius: 8px;
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
    box-shadow: 0 4px 14px rgba(0,0,0,0.25);
}

.coppsa-wa-btn:hover .coppsa-wa-tooltip {
    opacity: 1;
    transform: translateX(0);
}

.coppsa-wa-btn:hover .coppsa-wa-circle {
    transform: scale(1.08);
    box-shadow: 0 6px 24px rgba(37, 211, 102, 0.6);
}

/* =============================================================
   ABOUT-COPPSA SECTION (REDISEÑADA)
   Layout 2 paneles inspirado en plantilla de referencia:
   - IZQUIERDA: foto oscura como background + overlay morado
     translúcido, eyebrow + título grande blanco + texto breve
     + botón CONÓCENOS con chamfer.
   - DERECHA: panel sólido morado con 5 items en columna,
     cada uno con icono turquesa + título + descripción breve.
   Edición por reglas COPPSA: solo CSS (no JS, no main.js).
   ============================================================= */
.coppsa-about-section {
    padding: 80px 0;
    background: #ffffff;
}

.coppsa-about-section .container {
    padding-left: 24px;
    padding-right: 24px;
}

/* Variante full-width: el grid ocupa el ancho completo de la
   ventana, sin container que lo limite. Se elimina la sombra
   exterior porque al ir edge-to-edge los bordes coinciden con
   el viewport. */
.coppsa-about-section--full {
    padding: 0;
    overflow-x: hidden;
}

.coppsa-about-fullwrap {
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin: 0;
    overflow-x: hidden;
}

.coppsa-about-section--full .coppsa-about-grid {
    box-shadow: none;
}

.coppsa-about-grid {
    display: grid;
    /* Panel izquierdo (foto + título) con MÁS protagonismo: ocupa
       ~60% del ancho, igual que la plantilla Home 4 de referencia
       donde la imagen domina visualmente sobre el panel de items. */
    grid-template-columns: 1.5fr 1fr;
    min-height: 720px;
    box-shadow: 0 14px 40px rgba(20, 20, 50, 0.10);
}

/* ---------- LEFT PANEL (foto + overlay + texto) ---------- */
.coppsa-about-left {
    position: relative;
    overflow: hidden;
    background-image: url('../images-5/about-us-img-1-coppsa.png');
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
}

.coppsa-about-left-overlay {
    position: absolute;
    inset: 0;
    /* Overlay morado oscuro (mismo tono que el footer #3a1a30) con
       sutil viñeteado diagonal: el extremo superior-izquierdo es
       ligeramente más claro y el inferior-derecho es el morado más
       profundo, replicando el degradé del Home 4 de referencia y
       unificando el tono con el footer. */
    background: linear-gradient(
        135deg,
        rgba(74, 33, 60, 0.72) 0%,
        rgba(58, 26, 48, 0.80) 55%,
        rgba(40, 16, 32, 0.88) 100%
    );
    z-index: 1;
}

.coppsa-about-left-content {
    position: relative;
    z-index: 2;
    padding: 72px 80px 72px 40px;
    color: #ffffff;
    max-width: 640px;
    margin-left: 0;
    margin-right: auto;
}

.coppsa-about-eyebrow {
    display: inline-block;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--c-secondary-500);
    margin-bottom: 18px;
    padding-left: 36px;
    position: relative;
}

.coppsa-about-eyebrow::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 28px;
    height: 2px;
    background: var(--c-secondary-500);
    transform: translateY(-50%);
}

.coppsa-about-title {
    font-size: 42px;
    font-weight: 700;
    line-height: 1.1;
    color: #ffffff;
    margin: 0 0 22px 0;
    letter-spacing: -0.01em;
}

.coppsa-about-desc {
    font-size: 1.8rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.88);
    margin: 0 0 36px 0;
    max-width: 460px;
}

/* CTA con chamfer (esquina superior derecha biselada).
   Texto oscuro sobre turquesa para contraste WCAG AAA
   (#12131a sobre #41bebd ≈ 9.5:1). Hover usa el token
   --c-secondary-600 en lugar de un hex hardcodeado. */
.coppsa-about-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #ffffff;
    color: var(--c-primary-500);
    padding: 16px 28px;
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    -webkit-clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
    clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
    transition: background 0.25s ease, color 0.25s ease, gap 0.2s ease;
}

.coppsa-about-btn:hover {
    background: var(--c-primary-500);
    color: #ffffff;
    gap: 14px;
}

.coppsa-about-btn-arrow {
    width: 14px;
    height: 14px;
    fill: currentColor;
    transition: transform 0.2s ease;
}

.coppsa-about-btn:hover .coppsa-about-btn-arrow {
    transform: translateX(3px);
}

/* ---------- RIGHT PANEL (morado sólido + items) ---------- */
.coppsa-about-right {
    background: var(--c-primary-500);
    padding: 72px 80px;
    display: flex;
    align-items: center;
}

.coppsa-about-right .coppsa-about-items {
    max-width: 640px;
    margin-right: auto;
}

.coppsa-about-items {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.coppsa-about-item {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 20px;
    align-items: flex-start;
}

.coppsa-about-item-icon {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(65, 190, 189, 0.15);
    border: 1px solid rgba(65, 190, 189, 0.35);
    color: var(--c-secondary-500);
    -webkit-clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}

.coppsa-about-item-icon svg {
    width: 22px;
    height: 22px;
    fill: var(--c-secondary-500);
}

.coppsa-about-item-text {
    min-width: 0;
}

.coppsa-about-item-title {
    font-size: 1.9rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 6px 0;
    line-height: 1.25;
}

.coppsa-about-item-desc {
    font-size: 1.4rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.82);
    margin: 0;
}

/* ============================================================
   Hero (.hero-section-2) — overlay tintado COPPSA
   Mismo overlay morado oscuro que .coppsa-about-left-overlay
   ("Sobre COPPSA"), unificando tono con footer y about. Más
   oscuro que el primer intento para mejorar el contraste del
   titular blanco sobre fotos de fondo claras.
   ============================================================ */
.hero-section-2 .hero-slider-2 .swiper-slide .hero-slide-bg-wrapper::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(74, 33, 60, 0.72) 0%,
        rgba(58, 26, 48, 0.80) 55%,
        rgba(40, 16, 32, 0.88) 100%
    );
    z-index: 2;
    pointer-events: none;
}

/* Titular del hero: cap a 60px y forzar 3 líneas en pantallas
   grandes para que NO se superponga con el bloque de video que
   está absoluto a la derecha (ver attached_assets/image_1778169057345.png).
   El CSS base de demo_2 (.hero-section-2 ... .main-heading) usa
   8rem (~80px) con max-width 70%, que al ancho del container
   queda en 2 líneas muy largas. Forzamos 60px y limitamos el
   ancho para garantizar 3 líneas hasta el breakpoint 1200px,
   donde el CSS base ya baja a 6rem. */
.hero-section-2 .hero-slider-2 .swiper-slide .hero-text-box .main-heading {
    font-size: 60px !important;
    line-height: 1.15;
    max-width: 960px;
    text-wrap: balance;
    -webkit-hyphens: none;
    hyphens: none;
}
@media (max-width: 1200px) {
    .hero-section-2 .hero-slider-2 .swiper-slide .hero-text-box .main-heading {
        font-size: 60px !important;
        max-width: 820px;
    }
}
@media (max-width: 991px) {
    .hero-section-2 .hero-slider-2 .swiper-slide .hero-text-box .main-heading {
        font-size: 48px !important;
        max-width: 680px;
    }
}
@media (max-width: 767px) {
    .hero-section-2 .hero-slider-2 .swiper-slide .hero-text-box .main-heading {
        font-size: 36px !important;
        max-width: 90%;
    }
}

.hero-section-2 .hero-slider-2 .swiper-slide .hero-text-box .main-heading::after {
    content: none;
}

/* Bloque de video flotante: el tamaño base de demo_2
   (463x365 con play icon de 116px) resulta demasiado dominante
   sobre la foto. Reducción a una proporción más sobria que
   mantiene el clip-path superior derecho heredado. */
.hero-section-2 .about-video-box .video-block:link .video-img,
.hero-section-2 .about-video-box .video-block:visited .video-img {
    width: 320px;
    height: 230px;
}
.hero-section-2 .about-video-box .video-block:link .video-play-icon,
.hero-section-2 .about-video-box .video-block:visited .video-play-icon {
    width: 72px;
    height: 72px;
    padding: 0.7rem;
}
@media (max-width: 1200px) {
    .hero-section-2 .about-video-box .video-block:link .video-img,
    .hero-section-2 .about-video-box .video-block:visited .video-img {
        width: 260px;
        height: 190px;
    }
    .hero-section-2 .about-video-box .video-block:link .video-play-icon,
    .hero-section-2 .about-video-box .video-block:visited .video-play-icon {
        width: 64px;
        height: 64px;
    }
}
@media (max-width: 991px) {
    .hero-section-2 .about-video-box .video-block:link .video-img,
    .hero-section-2 .about-video-box .video-block:visited .video-img {
        width: 220px;
        height: 160px;
    }
    .hero-section-2 .about-video-box .video-block:link .video-play-icon,
    .hero-section-2 .about-video-box .video-block:visited .video-play-icon {
        width: 56px;
        height: 56px;
    }
}

/* Ghost text band debajo del hero: marquee infinito con
   texto "outline" en vino tenue, sin fondo (transparente),
   inspirado en demo_1 de Aventra. Duplicamos el grupo para
   loop seamless con translateX(-50%). No interactivo. */
.coppsa-ghost-band {
    background: transparent;
    overflow: hidden;
    padding: 16px 0 24px 0;
    margin-top: 0;
}
.coppsa-ghost-track {
    display: flex;
    width: max-content;
    animation: coppsa-ghost-marquee 30s linear infinite;
}
.coppsa-ghost-group {
    display: flex;
    flex-shrink: 0;
}
.coppsa-ghost-text {
    display: inline-block;
    font-family: "Barlow Condensed", sans-serif;
    font-weight: 700;
    font-size: clamp(64px, 13vw, 180px);
    line-height: 1;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: transparent;
    -webkit-text-stroke: 1px rgba(127, 64, 106, 0.28);
    white-space: nowrap;
    user-select: none;
    pointer-events: none;
    padding-right: 0.5em;
}
@keyframes coppsa-ghost-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@media (max-width: 767px) {
    .coppsa-ghost-band {
        padding: 12px 0 16px 0;
        margin-top: 0;
    }
    .coppsa-ghost-text {
        font-size: clamp(40px, 14vw, 96px);
    }
}

/* Inversión de fondos: la página queda con un gris claro
   global y las cards que la plantilla pintaba en gris
   (--secondary-button-bg #f5f0f3) pasan a blanco para
   contrastar contra el nuevo fondo. */
body {
    background-color: #f2f2f2 !important;
}
.why-choose-us-section .cards-wrapper .service-card {
    background-color: #ffffff !important;
}
.why-choose-us-section .cards-wrapper .service-card:hover {
    background-color: var(--c-primary-500) !important;
}

/* Logos de clientes: los PNG fueron reprocesados con
   fondo transparente, así que no necesitan blend modes. */
.customer-section .clients-swiper .swiper-slide img {
    background: transparent !important;
}

/* Tipografía global de titulares y antetítulos en desktop:
   - .main-heading (h2): 42px / 700
   - .sub-heading  (h6): 16px / 600
   Se aplica en breakpoints grandes; los media queries existentes
   mantienen el comportamiento responsive en mobile/tablet. */
@media (min-width: 992px) {
    .main-heading {
        font-size: 42px !important;
        font-weight: 700 !important;
    }
    .sub-heading {
        font-size: 16px !important;
        font-weight: 600 !important;
    }
}

/* Re-fortalecer overrides del titular del hero para que la
   regla global anterior no los pise (el hero usa 60px). */
@media (min-width: 992px) {
    .hero-section-2 .hero-slider-2 .swiper-slide .hero-text-box .main-heading {
        font-size: 60px !important;
        font-weight: 700 !important;
    }
}
@media (min-width: 992px) and (max-width: 1200px) {
    .hero-section-2 .hero-slider-2 .swiper-slide .hero-text-box .main-heading {
        font-size: 52px !important;
    }
}

/* Unificación tipográfica de botones: 12px / extra-bold (800).
   Cubre los botones primarios/secundarios de la plantilla,
   los CTA propios COPPSA, las pills de productos y los
   "read more" sin afectar slider/swiper buttons (flechas). */
.btn,
a.btn,
button.btn,
.primary-btn,
.secondary-btn,
.hero-btns a,
.hero-btns .btn,
.coppsa-about-btn,
.coppsa-about-btn span,
.coppsa-cta-btn,
.product-tab,
.read-more,
.read-more span,
.header-btn,
.book-btn,
.contact-btn,
.solicitar-btn {
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: 0.06em;
}

/* Cards de servicios (why-choose-us): igualar altura del
   contenido y empujar el "Ver servicio" al fondo izquierdo,
   sin importar el largo del párrafo. Texto del párrafo a 16px. */
.why-choose-us-section .cards-wrapper {
    align-items: stretch;
}
.why-choose-us-section .cards-wrapper .service-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.why-choose-us-section .cards-wrapper .service-card .card-content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}
.why-choose-us-section .cards-wrapper .service-card .card-content p {
    font-size: 16px !important;
}
.why-choose-us-section .cards-wrapper .service-card .card-content .read-more {
    margin-top: auto;
    align-self: flex-start;
}

/* Override explícito del padding de la sección "Nuestros
   servicios" — las clases pt-[80px]/pb-[80px] del HTML son
   sintaxis Tailwind y Tailwind no está cargado, así que no
   pintan; la base del template usa 15rem 0 14rem 0. */
.why-choose-us-section {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
}

/* ============================================================
   Trust Section — "Clientes que confían en nosotros"
   Reemplaza el swiper paginado por una sección con prueba
   social (eyebrow + título + bajada + 3 stats) y un marquee
   infinito CSS-only de logos en escala de grises con hover
   a color. Fondo vino tenue para anclarla visualmente con
   el resto del lenguaje COPPSA.
   ============================================================ */
.coppsa-trust-section {
    background:
        linear-gradient(
            180deg,
            rgba(127, 64, 106, 0.04) 0%,
            rgba(127, 64, 106, 0.08) 100%
        );
    border-top: 1px solid rgba(127, 64, 106, 0.10);
    border-bottom: 1px solid rgba(127, 64, 106, 0.10);
    padding: 80px 0 80px 0;
    overflow: hidden;
}
.coppsa-trust-head {
    text-align: center;
    margin-bottom: 48px;
}
.coppsa-trust-eyebrow {
    display: inline-block;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-primary-500, #7f406a);
    margin-bottom: 10px;
}
.coppsa-trust-title {
    font-family: "Barlow Condensed", sans-serif;
    font-size: 42px;
    font-weight: 700;
    line-height: 1.15;
    color: #1f1422;
    margin: 0 0 14px 0;
}
.coppsa-trust-lead {
    font-family: "Inter", sans-serif;
    font-size: 16px;
    line-height: 1.55;
    color: #5a4756;
    max-width: 640px;
    margin: 0 auto;
}

.coppsa-trust-stats {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 56px;
}
.coppsa-stat {
    flex: 1 1 200px;
    max-width: 260px;
    text-align: center;
    padding: 24px 16px;
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid rgba(127, 64, 106, 0.10);
    box-shadow: 0 4px 18px -10px rgba(127, 64, 106, 0.18);
}
.coppsa-stat-num {
    display: block;
    font-family: "Barlow Condensed", sans-serif;
    font-size: 56px;
    font-weight: 700;
    line-height: 1;
    color: var(--c-primary-500, #7f406a);
    margin-bottom: 6px;
}
.coppsa-stat-label {
    display: block;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #5a4756;
    text-transform: none;
    letter-spacing: 0;
}

.coppsa-trust-marquee {
    position: relative;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(
        90deg,
        transparent 0,
        #000 8%,
        #000 92%,
        transparent 100%
    );
            mask-image: linear-gradient(
        90deg,
        transparent 0,
        #000 8%,
        #000 92%,
        transparent 100%
    );
}
.coppsa-trust-track {
    display: flex;
    width: max-content;
    animation: coppsa-trust-marquee 50s linear infinite;
}
.coppsa-trust-group {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.coppsa-trust-logo {
    flex: 0 0 auto;
    width: 180px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 24px;
}
.coppsa-trust-logo img {
    max-height: 64px;
    max-width: 140px;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.55;
    transition: filter 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
}
.coppsa-trust-logo:hover img {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.04);
}
.coppsa-trust-marquee:hover .coppsa-trust-track {
    animation-play-state: paused;
}
@keyframes coppsa-trust-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@media (max-width: 991px) {
    .coppsa-trust-section { padding: 64px 0; }
    .coppsa-trust-title { font-size: 34px; }
    .coppsa-stat-num { font-size: 44px; }
    .coppsa-trust-logo { width: 150px; height: 90px; padding: 0 18px; }
    .coppsa-trust-logo img { max-height: 56px; max-width: 120px; }
}
@media (max-width: 767px) {
    .coppsa-trust-section { padding: 48px 0; }
    .coppsa-trust-title { font-size: 28px; }
    .coppsa-trust-stats { gap: 12px; margin-bottom: 36px; }
    .coppsa-stat { padding: 18px 12px; }
    .coppsa-stat-num { font-size: 38px; }
    .coppsa-stat-label { font-size: 13px; }
    .coppsa-trust-logo { width: 130px; height: 80px; padding: 0 14px; }
    .coppsa-trust-logo img { max-height: 48px; max-width: 100px; }
}

/* ============================================================
   Trust BAR (variante slim, debajo del hero)
   Reemplaza la banda fantasma "INGENIERÍA EN ACCIÓN" en su
   primera aparición. Patrón B2B clásico: una franja delgada
   de logos cliente sobre el resto de la página. Reusa los
   estilos `.coppsa-trust-marquee` y `.coppsa-trust-logo`.
   ============================================================ */
.coppsa-trust-bar {
    background: transparent;
    padding: 56px 0 64px 0;
    margin-top: 0;
    overflow: hidden;
}
.coppsa-trust-bar .coppsa-trust-bar-kicker {
    text-align: center;
    font-family: "Inter", sans-serif;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: 0.20em;
    text-transform: uppercase;
    color: rgba(127, 64, 106, 0.80);
    margin: 0 0 32px 0;
}
.coppsa-trust-bar .coppsa-trust-marquee {
    -webkit-mask-image: linear-gradient(
        90deg,
        transparent 0,
        #000 6%,
        #000 94%,
        transparent 100%
    );
            mask-image: linear-gradient(
        90deg,
        transparent 0,
        #000 6%,
        #000 94%,
        transparent 100%
    );
}
.coppsa-trust-bar .coppsa-trust-logo {
    width: 280px;
    height: 150px;
    padding: 0 36px;
}
.coppsa-trust-bar .coppsa-trust-logo img {
    max-height: 96px;
    max-width: 220px;
}
@media (max-width: 1199px) {
    .coppsa-trust-bar .coppsa-trust-logo {
        width: 240px;
        height: 130px;
        padding: 0 28px;
    }
    .coppsa-trust-bar .coppsa-trust-logo img {
        max-height: 80px;
        max-width: 190px;
    }
}
@media (max-width: 991px) {
    .coppsa-trust-bar { padding: 44px 0 48px 0; }
    .coppsa-trust-bar .coppsa-trust-logo {
        width: 200px;
        height: 110px;
        padding: 0 22px;
    }
    .coppsa-trust-bar .coppsa-trust-logo img {
        max-height: 68px;
        max-width: 160px;
    }
}
@media (max-width: 767px) {
    .coppsa-trust-bar { padding: 32px 0 36px 0; }
    .coppsa-trust-bar .coppsa-trust-bar-kicker {
        font-size: 12px;
        margin-bottom: 20px;
    }
    .coppsa-trust-bar .coppsa-trust-logo {
        width: 160px;
        height: 90px;
        padding: 0 18px;
    }
    .coppsa-trust-bar .coppsa-trust-logo img {
        max-height: 56px;
        max-width: 130px;
    }
}

/* ============================================================
   Wrapper centrado para el CTA "Ver todos los servicios"
   debajo de las cards de la sección "Nuestros servicios".
   El botón en sí usa la clase nativa del template (.btn.primary)
   para conservar la consistencia visual con el resto del sitio.
   ============================================================ */
.coppsa-services-cta-wrap {
    display: flex;
    justify-content: center;
    margin-top: 48px;
}
@media (max-width: 767px) {
    .coppsa-services-cta-wrap { margin-top: 32px; }
}

/* ============================================================
   Ajustes finales sección "Productos destacados" (#productos)
   1) Titular h2 en negro (paridad con sección Novedades), no
      en vino, para mejorar contraste sobre el fondo oscuro.
   2) Padding vertical 80px arriba y abajo, reseteando los
      margins anteriores (mb-[100px]/mt-[0px] no hacen nada
      sin Tailwind), para separar la sección del bloque
      "Sobre COPPSA" arriba y de la banda fantasma abajo.
   ============================================================ */
#productos.demo-projects-section .heading-wrapper .main-heading {
    color: #12131a !important;
}
#productos.demo-projects-section.coppsa-products-fullwidth {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* ============================================================
   Pre-footer ghost band — mismo marquee fantasma que el resto
   (loop infinito, outline en vino tenue, sin fondo, mismo
   tamaño tipográfico) con un padding superior mayor para que
   actúe como cierre de la página antes del footer.
   ============================================================ */
.coppsa-ghost-band--prefooter {
    padding: 80px 0 16px 0;
    background: transparent;
}
/* Hook visual pt-[40px] sobre la sección pre-footer */
.coppsa-ghost-band--prefooter.pt-\[40px\] {
    padding-top: 40px !important;
}
/* Hook visual pb-[60px] aplicado a los grupos del marquee
   pre-footer (Tailwind no está cargado, lo resolvemos por CSS). */
.coppsa-ghost-band--prefooter .coppsa-ghost-group.pb-\[60px\] {
    padding-bottom: 60px !important;
}
@media (max-width: 767px) {
    .coppsa-ghost-band--prefooter { padding: 56px 0 12px 0; }
}

/* ============================================================
   Gap uniforme de 40px entre las secciones principales del home.
   Se aplica como margin-top a cada bloque mayor (excepto el hero
   y las bandas fantasma, que ya manejan su propio padding).
   ============================================================ */
.coppsa-trust-bar,
#empresa.coppsa-about-section,
#productos,
#trabajos.services-section,
#novedades.coppsa-news-section {
    margin-top: 40px !important;
}

/* Hooks visuales pt-[0px] / pb-[40px] sobre la sección trust-bar */
.coppsa-trust-bar.pt-\[0px\] { padding-top: 0 !important; }
.coppsa-trust-bar.pb-\[40px\] { padding-bottom: 40px !important; }

/* ============================================================
   Recorte de altura del footer: dejar ~40px de aire debajo de
   la barra de copyright "Todos los derechos reservados". El
   template trae padding-bottom y margin-top generosos que
   dejaban espacio vacío al final.
   ============================================================ */
footer.green-demo-footer.pb-\[40px\] {
    padding-bottom: 40px !important;
}
footer.green-demo-footer .coppsa-copyright-bar {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}


/* ============================================================
   Sección "Sobre COPPSA" (importada de demo_7 about-us-3).
   Layout 2 columnas: imagen a la izquierda con banner overlay
   y bloque de texto a la derecha sobre fondo vino COPPSA.
   ============================================================ */
.coppsa-about3-section.about-us-3-main-wrapper .about-us-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    clip-path: var(--slope-clip-top-right-5);
    overflow: visible;
    background-image: url('../images-5/coppsa-trayectoria.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.coppsa-about3-section.about-us-3-main-wrapper {
    background-image: none;
    padding-bottom: 0;
}
@media (max-width: 991px) {
    .coppsa-about3-section.about-us-3-main-wrapper .about-us-section {
        grid-template-columns: 1fr;
    }
}
.coppsa-about3-section .about-us-section .about-img-block {
    background-image: none;
    position: relative;
    min-height: 60rem;
}
@media (max-width: 991px) {
    .coppsa-about3-section .about-us-section .about-img-block {
        min-height: 50rem;
    }
}
.coppsa-about3-section .about-us-section .about-img-block .about-banner {
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 2rem;
    max-width: 660px;
    min-height: 150px;
    background-color: var(--primary-white);
    clip-path: var(--slope-clip-bottom-left-3);
    padding: 2.2rem 2.4rem 2.2rem 4rem;
    position: absolute;
    right: 0;
    bottom: 7rem;
    margin-left: 2rem;
    z-index: 2;
}
@media (max-width: 1200px) {
    .coppsa-about3-section .about-us-section .about-img-block .about-banner { min-height: 140px; bottom: 8rem; }
}
@media (max-width: 991px) {
    .coppsa-about3-section .about-us-section .about-img-block .about-banner { min-height: 130px; bottom: 4rem; }
}
@media (max-width: 767px) {
    .coppsa-about3-section .about-us-section .about-img-block .about-banner { min-height: 110px; bottom: 3rem; padding: 1.6rem 1.8rem 1.6rem 2.4rem; gap: 1.4rem; }
}
.coppsa-about3-section .about-us-section .about-img-block .about-banner .banner-text-stack {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 70%;
}
@media (max-width: 991px) {
    .coppsa-about3-section .about-us-section .about-img-block .about-banner .banner-text-stack { width: 60%; gap: 4px; }
}
.coppsa-about3-section .about-us-section .about-img-block .about-banner.no-logo .banner-text-stack {
    width: 100%;
}
.coppsa-about3-section .about-us-section .about-img-block .about-banner .banner-sub-text {
    font-family: var(--inter-font-family, 'Inter', sans-serif);
    color: #4a2840;
    font-size: 12px;
    line-height: 1.45;
    margin: 0;
    font-weight: 500;
    letter-spacing: 0.2px;
}
@media (max-width: 767px) {
    .coppsa-about3-section .about-us-section .about-img-block .about-banner .banner-sub-text { font-size: 11px; }
}
.coppsa-about3-section .about-us-section .about-img-block .about-banner img {
    height: auto;
    width: 90px;
}
@media (max-width: 991px) {
    .coppsa-about3-section .about-us-section .about-img-block .about-banner img { width: 70px; }
}
@media (max-width: 767px) {
    .coppsa-about3-section .about-us-section .about-img-block .about-banner img { width: 56px; }
}
.coppsa-about3-section .about-us-section .about-img-block .about-banner .banner-inner-text {
    font-family: var(--jakarta-font-family);
    color: var(--c-primary-500, #7f406a);
    font-weight: 700;
    line-height: 1.25;
    font-size: 24px;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    padding-left: 0;
    padding-right: 0;
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 24px;
    margin-right: 24px;
}
@media (max-width: 991px) {
    .coppsa-about3-section .about-us-section .about-img-block .about-banner .banner-inner-text { font-size: 20px; }
}
@media (max-width: 767px) {
    .coppsa-about3-section .about-us-section .about-img-block .about-banner .banner-inner-text { font-size: 17px; }
}
.coppsa-about3-section .about-us-section .about-text-block {
    background-image: linear-gradient(rgba(15, 6, 14, 0.72), rgba(15, 6, 14, 0.78)), url('../images-5/coppsa-trayectoria.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 10rem 0 22rem 0;
    color: var(--primary-white);
    position: relative;
}
@media (max-width: 991px) { .coppsa-about3-section .about-us-section .about-text-block { padding: 7rem 0; } }
@media (max-width: 767px) { .coppsa-about3-section .about-us-section .about-text-block { padding: 5rem 0; } }
.coppsa-about3-section .about-us-section .about-text-block .sub-heading {
    padding-left: 10rem;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin: 0 0 8px 0;
}
.coppsa-about3-section .about-us-section .about-text-block .main-heading {
    color: var(--primary-white);
    padding-left: 10rem;
    padding-right: 4rem;
    text-align: left;
    margin: 0 0 3rem 0;
    font-size: 32px;
    line-height: 1.15;
    max-width: none;
}
@media (max-width: 1200px) {
    .coppsa-about3-section .about-us-section .about-text-block .sub-heading,
    .coppsa-about3-section .about-us-section .about-text-block .main-heading { padding-left: 9.2rem; }
}
@media (max-width: 767px) {
    .coppsa-about3-section .about-us-section .about-text-block .sub-heading,
    .coppsa-about3-section .about-us-section .about-text-block .main-heading { padding-left: 3.2rem; }
    .coppsa-about3-section .about-us-section .about-text-block .main-heading { font-size: 28px; }
}
.coppsa-about3-section .about-us-section .about-text-block .about-us-comment,
.coppsa-about3-section .about-us-section .about-text-block .about-us-comment.primary-bg {
    background-color: #3a1a30 !important;
    max-width: 660px;
    clip-path: var(--slope-clip-top-right-3);
    padding: 5rem 7rem 5rem 10.2rem;
}
@media (max-width: 1200px) {
    .coppsa-about3-section .about-us-section .about-text-block .about-us-comment { padding: 4.6rem 9.2rem; }
}
@media (max-width: 767px) {
    .coppsa-about3-section .about-us-section .about-text-block .about-us-comment { padding: 2.6rem 3.2rem; }
}
.coppsa-about3-section .about-us-section .about-text-block .about-us-comment .comment {
    font-size: 15px;
    font-family: var(--inter-font-family, 'Inter', sans-serif);
    color: #ffffff !important;
    font-weight: 400;
    line-height: 1.65;
}
.coppsa-about3-section .about-us-section .about-text-block .about-us-comment .comment + .comment {
    margin-top: 1.2rem;
}
.coppsa-about3-section .about-us-section .about-text-block .about-us-comment .about-name {
    font-size: 14px;
    margin: 2.4rem 0 0 0;
    color: rgba(255,255,255,0.85);
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* ============================================================
   Servicios — 4 cards verticales (about-1.html)
   Scoped to .coppsa-services-vertical para no afectar home-5.
   ============================================================ */
.coppsa-services-vertical .cards-wrapper{
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:24px;
    margin-top:24px;
}
.coppsa-services-vertical .service-card{
    display:flex;
    flex-direction:column;
    background:#f4f1f3;
    padding:48px 32px 40px;
    min-height:300px;
    position:relative;
    border-radius:0;
    /* Chamfer SOLO en la esquina superior derecha; el resto cuadrado. */
    clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%);
    transition: transform .35s ease, box-shadow .35s ease;
}
.coppsa-services-vertical .service-card:hover{
    transform:translateY(-6px);
}
.coppsa-services-vertical .service-card .icon{
    width:56px;
    height:56px;
    margin-bottom:32px;
    display:flex;
    align-items:center;
    justify-content:center;
}
.coppsa-services-vertical .service-card .icon svg{
    width:44px;
    height:44px;
    fill: var(--c-primary-500, #7f406a);
}
.coppsa-services-vertical .service-card .card-content{
    display:flex;
    flex-direction:column;
    flex:1;
}
.coppsa-services-vertical .service-card .card-title{
    font-family:'Barlow Condensed', sans-serif;
    font-size:26px;
    line-height:1.15;
    font-weight:700;
    color: var(--c-primary-500, #7f406a);
    margin-bottom:18px;
}
.coppsa-services-vertical .service-card p{
    font-family:'Inter', sans-serif;
    font-size:15px;
    line-height:1.6;
    color:#4a4a4a;
    margin:0;
    padding-bottom:30px;
}
.coppsa-services-vertical .service-card .read-more{display:none !important;}

/* ─── Variante con CTA "Ver servicio" + hover violeta ─────────
   Para la página Servicios: cards blancas que en hover invierten a
   fondo vino con texto/ícono blanco y CTA visible. */
.coppsa-services-with-cta .cards-wrapper{
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.coppsa-services-with-cta .service-card{
    background: #ffffff;
    border: 1px solid #ece4e8;
    transition: background .35s ease, border-color .35s ease, transform .35s ease, box-shadow .35s ease;
}
.coppsa-services-with-cta .service-card:hover{
    background: var(--c-primary-500, #7f406a);
    border-color: var(--c-primary-500, #7f406a);
    box-shadow: 0 14px 40px rgba(127,64,106,0.25);
}
.coppsa-services-with-cta .service-card:hover .icon svg,
.coppsa-services-with-cta .service-card:hover .card-title,
.coppsa-services-with-cta .service-card:hover p{
    color: #ffffff !important;
    fill: #ffffff !important;
}
.coppsa-services-with-cta .service-card:hover p{
    color: rgba(255,255,255,0.92) !important;
}
/* CTA "Ver servicio" */
.coppsa-services-with-cta .service-card .read-more{
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--c-primary-500, #7f406a);
    transition: color .25s ease, transform .25s ease;
}
.coppsa-services-with-cta .service-card .read-more svg{
    width: 16px;
    height: 16px;
    fill: currentColor;
    transition: transform .25s ease;
}
.coppsa-services-with-cta .service-card:hover .read-more{
    color: #ffffff !important;
}
.coppsa-services-with-cta .service-card:hover .read-more svg{
    transform: translateX(4px);
    fill: #ffffff !important;
}
/* La card entera es cliqueable: el ::after del CTA se estira sobre toda
   la card. El padre .service-card es position:relative. */
.coppsa-services-with-cta .service-card .read-more::after{
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}
.coppsa-services-with-cta .service-card{
    cursor: pointer;
}
/* Responsive del grid 3-col */
@media (max-width: 991px){
    .coppsa-services-with-cta .cards-wrapper{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 575px){
    .coppsa-services-with-cta .cards-wrapper{
        grid-template-columns: 1fr;
    }
}

/* Featured variant — vino sólido, texto blanco */
.coppsa-services-vertical .service-card--featured{
    background: var(--c-primary-500, #7f406a);
}
.coppsa-services-vertical .service-card--featured .icon svg,
.coppsa-services-vertical .service-card--featured .card-title,
.coppsa-services-vertical .service-card--featured p{
    color:#ffffff;
    fill:#ffffff;
}
.coppsa-services-vertical .service-card--featured .icon svg{fill:#ffffff;}
.coppsa-services-vertical .service-card--featured p{color:rgba(255,255,255,0.92);}

/* Responsive */
@media (max-width: 1199px){
    .coppsa-services-vertical .cards-wrapper{grid-template-columns:repeat(2, minmax(0, 1fr));}
}
@media (max-width: 575px){
    .coppsa-services-vertical .cards-wrapper{grid-template-columns:1fr;}
    .coppsa-services-vertical .service-card{min-height:0;padding:40px 28px 36px;}
    .coppsa-services-vertical .service-card .icon{margin-bottom:48px;}
}

/* ============================================================
   Sectores — intro, closing line y CTA (about-1.html)
   ============================================================ */
.coppsa-sectores-section .headings{
    text-align:center;
    max-width:820px;
    margin:0 auto;
}
.coppsa-sectores-section .sub-heading{
    color: var(--c-primary-500, #7f406a);
    letter-spacing:3px;
}
.coppsa-sectores-intro{
    font-family:'Inter', sans-serif;
    font-size:17px;
    line-height:1.6;
    color:#4a4a4a;
    white-space:nowrap;
    margin:0 auto 16px;
}
.coppsa-sectores-closing{
    font-family:'Inter', sans-serif;
    font-size:16px;
    line-height:1.6;
    color:#4a4a4a;
    text-align:center;
    max-width:760px;
    margin:40px auto 0;
    font-style:italic;
}
.coppsa-sectores-cta{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:32px;
    margin-top:56px;
    padding:40px 56px;
    background:#f4f1f3;
    clip-path: polygon(28px 0, 100% 0, 100% calc(100% - 28px), calc(100% - 28px) 100%, 0 100%, 0 28px);
}
.coppsa-sectores-cta-text{flex:1;min-width:0;}
.coppsa-sectores-cta-title{
    font-family:'Barlow Condensed', sans-serif;
    font-size:28px;
    line-height:1.2;
    font-weight:700;
    color: var(--c-primary-500, #7f406a);
    margin:0 0 8px;
}
.coppsa-sectores-cta-desc{
    font-family:'Inter', sans-serif;
    font-size:15px;
    line-height:1.5;
    color:#4a4a4a;
    margin:0;
}
.coppsa-sectores-cta-btn{flex-shrink:0;}

@media (max-width: 767px){
    .coppsa-sectores-cta{
        flex-direction:column;
        align-items:flex-start;
        padding:32px 28px;
    }
    .coppsa-sectores-cta-title{font-size:24px;}
}

/* contact-block-wrapper debajo de Partners */
.contact-block-container {
    position: relative;
    padding-top: 110px;
    padding-bottom: 80px;
}
.contact-block-container > .container {
    position: relative;
}
.contact-block-container .contact-block-wrapper.pb-\[0px\]{
    padding-bottom: 0;
}
.contact-block-container .contact-block-wrapper.mb-\[160px\]{
    margin-bottom: 0;
}
@media (max-width: 767px) {
    .contact-block-container {
        padding-top: 140px;
        padding-bottom: 60px;
    }
}

/* client-section spacing + fondo limpio para Partners */
.client-section.pt-\[40px\] { padding-top: 60px; }
.client-section.pb-\[40px\] { padding-bottom: 60px; }
.client-section.mb-\[0px\]  { margin-bottom: 0; }
.client-section { background: transparent; }

/* main-heading margin */
.main-heading.mb-\[50px\] { margin-bottom: 50px; }

/* sectores CTA title size */
.coppsa-sectores-cta-title.text-\[32px\] { font-size: 32px; }

/* sub-heading utilities */
.sub-heading.font-bold { font-weight: 700; }

/* Partners section: intro + placeholders neutros */
.coppsa-partners-intro {
    max-width: 720px;
    margin: 0 auto 50px;
    text-align: center;
    color: #4a4a4a;
    font-size: 16px;
    line-height: 1.6;
}
.coppsa-partner-placeholder {
    width: 100%;
    min-height: 110px;
    display: block;
    background:
        linear-gradient(135deg, #eef0f2 0%, #dde1e6 100%);
    border: 1px solid #e5e8ec;
    border-radius: 4px;
    position: relative;
}
.coppsa-partner-placeholder::after {
    content: '';
    position: absolute;
    inset: 30% 30%;
    border-radius: 4px;
    background: rgba(127, 64, 106, 0.08);
}
.main-heading.mb-\[20px\] { margin-bottom: 20px; }

/* contact-text size */
.contact-text.text-\[24px\] { font-size: 24px; }
.contact-text.text-\[32px\] { font-size: 32px; }
@media (max-width: 767px) {
    .contact-text.text-\[32px\] { font-size: 24px; }
}

/* CTA banner: fondo violeta oscuro con buen contraste para texto blanco */
.contact-block-wrapper.coppsa-cta-banner {
    background:
        linear-gradient(135deg, rgba(127, 64, 106, 0.96) 0%, rgba(58, 26, 48, 0.98) 100%),
        var(--c-primary-700, #5a2c4b) !important;
    border-radius: 6px;
    padding: 48px 56px !important;
    box-shadow: 0 18px 48px rgba(58, 26, 48, 0.25);
    color: #fff !important;
}
.contact-block-wrapper.coppsa-cta-banner .contact-block,
.contact-block-wrapper.coppsa-cta-banner .contact-text {
    color: #fff !important;
}
.contact-block-wrapper.coppsa-cta-banner .contact-text {
    margin-bottom: 0 !important;
    line-height: 1.3;
    font-weight: 600;
}
.contact-block-wrapper.coppsa-cta-banner .contact-btns {
    margin-top: 0;
}

/* El botón CTA del banner usa el sistema unificado .btn.secondary
   (turquesa → hover vino con burbuja). Sin overrides extra: las
   reglas viejas forzaban turquesa también en hover y rompían la
   animación. */

/* Logo block en celeste, posicionado sobre el banner morado */
.contact-block-container .logo-block {
    background-color: var(--c-secondary-500, #41bebd) !important;
    z-index: 5 !important;
    left: 4rem !important;
    top: auto !important;
    bottom: -40px !important;
}
@media (max-width: 767px) {
    .contact-block-container .logo-block {
        left: 50% !important;
        bottom: -30px !important;
    }
}

@media (max-width: 767px) {
    .contact-block-wrapper.coppsa-cta-banner {
        padding: 32px 24px !important;
    }
}

/* sectores CTA padding/spacing */
.coppsa-sectores-cta.pl-\[240px\] { padding-left: 240px; }
.coppsa-sectores-cta.pr-\[240px\] { padding-right: 240px; }
.coppsa-sectores-cta.mt-\[60px\]  { margin-top: 60px; }
.coppsa-sectores-cta.pt-\[24px\]  { padding-top: 24px; }
.coppsa-sectores-cta.pb-\[24px\]  { padding-bottom: 24px; }
@media (max-width: 1199px) {
    .coppsa-sectores-cta.pl-\[240px\] { padding-left: 80px; }
    .coppsa-sectores-cta.pr-\[240px\] { padding-right: 80px; }
}
@media (max-width: 767px) {
    .coppsa-sectores-cta.pl-\[240px\] { padding-left: 24px; }
    .coppsa-sectores-cta.pr-\[240px\] { padding-right: 24px; }
    .coppsa-sectores-cta.mt-\[60px\]  { margin-top: 32px; }
}

/* ============================================================
   Contact Page — estética demo_6 con paleta COPPSA
   Fondo lila claro tintado de marca, cards e inputs en blanco,
   iconos y acentos en vino (#7f406a) y turquesa (#41bebd).
   ============================================================ */
.coppsa-contact-page .contact-detail-section {
    background:
        radial-gradient(circle at 18% 20%, rgba(127, 64, 106, 0.07) 0, transparent 55%),
        radial-gradient(circle at 82% 80%, rgba(65, 190, 189, 0.06) 0, transparent 55%),
        linear-gradient(180deg, #fcf8fa 0%, #f7f0f4 100%);
    padding-top: 80px;
    padding-bottom: 100px;
    position: relative;
}
/* Pintar el fondo del body con el mismo lila para que el chamfer
   de la portada apoye sobre el color nuevo y no quede franja blanca */
body.coppsa-contact-page {
    background-color: #fcf8fa !important;
    background: #fcf8fa !important;
}

/* La portada (page-header-section) tiene margin-bottom: 48px que deja
   ver el fondo del body (gris global #f2f2f2). En la página de contacto
   eliminamos ese margen para que la portada quede pegada al inicio
   de contact-detail-section (que ya tiene fondo lila). */
body.coppsa-contact-page .page-header-section {
    margin-bottom: 0 !important;
}

.coppsa-contact-page .contact-detail-section .sub-heading {
    color: var(--c-primary-500, #7f406a) !important;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.coppsa-contact-page .contact-detail-section .main-heading {
    color: #2a1620;
}

/* Contact cards (Phone / Email / Mailing / Location) */
.coppsa-contact-page .contact-cards-section {
    margin-top: 40px;
    margin-bottom: 40px;
}
.coppsa-contact-page .contact-cards-wrapper {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}
.coppsa-contact-page .contact-cards-wrapper.coppsa-contact-cards-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}
@media (max-width: 1199px) {
    .coppsa-contact-page .contact-cards-wrapper.coppsa-contact-cards-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 991px) {
    .coppsa-contact-page .contact-cards-wrapper { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .coppsa-contact-page .contact-cards-wrapper.coppsa-contact-cards-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575px) {
    .coppsa-contact-page .contact-cards-wrapper { grid-template-columns: 1fr; }
    .coppsa-contact-page .contact-cards-wrapper.coppsa-contact-cards-5 { grid-template-columns: 1fr; }
}
.coppsa-contact-page .contact-card .coppsa-card-note {
    margin: 8px 0 0;
    font-size: 0.85rem;
    line-height: 1.45;
    color: rgba(20, 20, 20, 0.65);
}

/* Solo color/fondo: respetar padding, gap, tamaño de icono y tipografía del template */
.coppsa-contact-page .contact-detail-section .contact-detail-wrapper .contact-cards-section .contact-cards-wrapper .contact-card,
.coppsa-contact-page .contact-card {
    background-color: #ffffff !important;
    background: #ffffff !important;
    box-shadow: 0 8px 24px rgba(127, 64, 106, 0.06);
    transition: none !important;
}
.coppsa-contact-page .contact-detail-section .contact-detail-wrapper .contact-cards-section .contact-cards-wrapper .contact-card::before,
.coppsa-contact-page .contact-detail-section .contact-detail-wrapper .contact-cards-section .contact-cards-wrapper .contact-card::after {
    display: none !important;
    content: none !important;
}
.coppsa-contact-page .contact-detail-section .contact-detail-wrapper .contact-cards-section .contact-cards-wrapper .contact-card:hover,
.coppsa-contact-page .contact-card:hover {
    background-color: #ffffff !important;
    background: #ffffff !important;
    transform: none !important;
}
.coppsa-contact-page .contact-detail-section .contact-detail-wrapper .contact-cards-section .contact-cards-wrapper .contact-card .icon,
.coppsa-contact-page .contact-card .icon {
    fill: var(--c-primary-500, #7f406a) !important;
    background: transparent !important;
}
.coppsa-contact-page .contact-detail-section .contact-detail-wrapper .contact-cards-section .contact-cards-wrapper .contact-card:hover .icon,
.coppsa-contact-page .contact-card:hover .icon {
    fill: var(--c-primary-500, #7f406a) !important;
}
.coppsa-contact-page .contact-detail-section .contact-detail-wrapper .contact-cards-section .contact-cards-wrapper .contact-card .contact-text .title,
.coppsa-contact-page .contact-card .contact-text .title {
    color: var(--c-primary-500, #7f406a) !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    line-height: 1.3 !important;
    letter-spacing: 1.5px;
    word-break: break-word;
    overflow-wrap: break-word;
}
.coppsa-contact-page .contact-detail-section .contact-detail-wrapper .contact-cards-section .contact-cards-wrapper .contact-card .contact-text .link,
.coppsa-contact-page .contact-card .contact-text .link,
.coppsa-contact-page .contact-card .contact-text a.link {
    color: #1a1a1a !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    transition: none !important;
    display: block;
    word-break: normal;
    overflow-wrap: break-word;
    line-height: 1.45;
    white-space: normal;
}
.coppsa-contact-page .contact-card .contact-text a.link:hover {
    color: #1a1a1a !important;
}

/* Form + callback: form (2fr) y bloque "¿Preferís que te llamemos?" (1fr) */
.coppsa-contact-page .form-call-wrapper.coppsa-form-call-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    width: 100%;
    max-width: 1200px;
    margin-left: auto !important;
    margin-right: auto !important;
    align-items: stretch;
}
.coppsa-contact-page .form-call-wrapper.coppsa-form-call-grid .main-contact-form {
    margin: 0;
    max-width: 100%;
}
.coppsa-contact-page .form-call-wrapper.coppsa-form-call-grid .main-contact-form .main-heading {
    text-align: left;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
.coppsa-contact-page .form-call-wrapper.coppsa-form-call-grid .main-contact-form .submit-btn.btn.primary {
    margin: 32px 0 0 auto !important;
}
/* Selects con misma estética de inputs */
.coppsa-contact-page .main-contact-form .coppsa-form-select select {
    width: 100%;
    background: #ffffff !important;
    border: 1px solid rgba(20, 20, 20, 0.10) !important;
    border-radius: 0 !important;
    padding: 16px 20px !important;
    color: rgba(20, 20, 20, 0.85) !important;
    font: inherit;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%237f406a'><path d='M7 10l5 5 5-5z'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 16px center !important;
    background-size: 18px !important;
    padding-right: 44px !important;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.coppsa-contact-page .main-contact-form .coppsa-form-select select:focus {
    border-color: var(--c-secondary-500, #41bebd) !important;
    box-shadow: 0 0 0 3px rgba(65, 190, 189, 0.18) !important;
    outline: none;
}
.coppsa-contact-page .main-contact-form .coppsa-form-select select:invalid,
.coppsa-contact-page .main-contact-form .coppsa-form-select select option[disabled] {
    color: rgba(20, 20, 20, 0.55);
}

/* Bloque callback "¿Preferís que te llamemos?" */
.coppsa-contact-page .coppsa-callback-block {
    background: var(--c-primary-500, #7f406a);
    color: #ffffff;
    padding: 40px 32px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    border-radius: 0;
    box-shadow: 0 12px 32px rgba(127, 64, 106, 0.18);
}
.coppsa-contact-page .coppsa-callback-block .coppsa-callback-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.coppsa-contact-page .coppsa-callback-block .coppsa-callback-icon svg {
    width: 24px;
    height: 24px;
    fill: #ffffff;
}
.coppsa-contact-page .coppsa-callback-block .coppsa-callback-title {
    color: #ffffff;
    font-size: 1.5rem;
    line-height: 1.25;
    margin: 0;
}
.coppsa-contact-page .coppsa-callback-block .coppsa-callback-text {
    color: rgba(255, 255, 255, 0.88);
    margin: 0 0 8px;
    line-height: 1.55;
}
.coppsa-contact-page .coppsa-callback-block .coppsa-callback-btn {
    background: var(--c-secondary-500, #41bebd) !important;
    color: #ffffff !important;
    border-radius: 0 !important;
    padding: 16px 28px !important;
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    letter-spacing: 0.06em;
    transition: background .25s ease;
}
.coppsa-contact-page .coppsa-callback-block .coppsa-callback-btn:hover {
    background: #ffffff !important;
    color: var(--c-primary-500, #7f406a) !important;
}
.coppsa-contact-page .coppsa-callback-block .coppsa-callback-btn svg {
    fill: currentColor !important;
}

/* Footer: intro debajo de "CONTACTO RÁPIDO" */
.coppsa-foot-form-intro {
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.9rem;
    line-height: 1.5;
    margin: -8px 0 16px;
}

/* Legacy single-column wrapper (cuando no se usa grid) */
.coppsa-contact-page .form-call-wrapper:not(.coppsa-form-call-grid) {
    display: block !important;
    grid-template-columns: none !important;
    gap: 0 !important;
    width: 100%;
    max-width: 880px;
    margin-left: auto !important;
    margin-right: auto !important;
}
/* Form: estética plantilla — sin fondo de card, inputs blancos cuadrados,
   tipografía oscura translúcida, botón ancho. Form, botón y titular
   centrados horizontalmente en la página. */
.coppsa-contact-page .main-contact-form {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    max-width: 880px;
    margin: 0 auto;
    width: 100%;
}
.coppsa-contact-page .main-contact-form .main-heading {
    color: rgba(20, 20, 20, 0.85) !important;
    margin-bottom: 28px;
    text-align: center;
    /* La plantilla limita el heading al 70% del wrapper. Sobreescribimos
       para que ocupe todo el ancho del form (880px) y quede centrado. */
    max-width: 100% !important;
    width: 100%;
    margin-left: auto !important;
    margin-right: auto !important;
}
.coppsa-contact-page .main-contact-form .form-block {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
@media (max-width: 575px) {
    .coppsa-contact-page .main-contact-form .form-block { grid-template-columns: 1fr; }
}
.coppsa-contact-page .main-contact-form .form-group {
    margin: 0;
}
.coppsa-contact-page .main-contact-form .form-group input,
.coppsa-contact-page .main-contact-form .form-group textarea,
.coppsa-contact-page .main-contact-form .custom-dropdown .dropdown-form-button {
    background: #ffffff !important;
    border: 1px solid rgba(20, 20, 20, 0.10) !important;
    border-radius: 0 !important;
    padding: 16px 20px !important;
    color: rgba(20, 20, 20, 0.85) !important;
    width: 100%;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.coppsa-contact-page .main-contact-form .form-group input::placeholder,
.coppsa-contact-page .main-contact-form .form-group textarea::placeholder {
    color: rgba(20, 20, 20, 0.55) !important;
}
.coppsa-contact-page .main-contact-form .form-group input:focus,
.coppsa-contact-page .main-contact-form .form-group textarea:focus,
.coppsa-contact-page .main-contact-form .custom-dropdown .dropdown-form-button:focus {
    background: #ffffff !important;
    border-color: var(--c-secondary-500, #41bebd) !important;
    box-shadow: 0 0 0 3px rgba(65, 190, 189, 0.18) !important;
    outline: none;
}
.coppsa-contact-page .main-contact-form textarea { min-height: 180px; }

/* Botón "Enviar consulta": estilo plantilla (slope clip top-right),
   crossfade estático sin desplazamiento, sin flecha, alineado a la
   derecha debajo del formulario. */
.coppsa-contact-page .main-contact-form .submit-btn.btn.primary {
    background: var(--c-secondary-500, #41bebd) !important;
    color: #ffffff !important;
    border-radius: 0 !important;
    padding: 22px 56px !important;
    margin: 32px 0 0 auto !important;
    display: block !important;
    width: -moz-fit-content !important;
    width: fit-content !important;
    min-width: 260px !important;
    max-width: -moz-fit-content !important;
    max-width: fit-content !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    font-size: 1.05rem;
    letter-spacing: 0.08em;
    transition: background .25s ease;
    overflow: hidden !important;
    position: relative !important;
}
/* Estado por defecto: text-one centrado y visible, text-two
   posicionado encima pero invisible. Sin desplazamientos. */
.coppsa-contact-page .main-contact-form .submit-btn.btn.primary .text-one {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    transform: none !important;
    transition: opacity .25s ease !important;
    opacity: 1;
}
.coppsa-contact-page .main-contact-form .submit-btn.btn.primary .text-two {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    transition: opacity .25s ease !important;
    opacity: 0;
    color: #ffffff !important;
}
/* Hover: oscurecer fondo (mejor contraste) y crossfade del texto. */
.coppsa-contact-page .main-contact-form .submit-btn.btn.primary:hover {
    background: #2fa3a2 !important;
}
.coppsa-contact-page .main-contact-form .submit-btn.btn.primary:hover .text-one {
    opacity: 0;
    transform: none !important;
}
.coppsa-contact-page .main-contact-form .submit-btn.btn.primary:hover .text-two {
    opacity: 1;
    transform: translate(-50%, -50%) !important;
}
/* Quitar el círculo expansivo de la plantilla en este botón. */
.coppsa-contact-page .main-contact-form .submit-btn.btn.primary::before {
    display: none !important;
}

/* Sección unificada (form + mapa) con fondo cement mixer + overlay wine
   COPPSA, estilo demo_2 "Areas We Serve". El mapa cuelga abajo (overhang). */
.coppsa-contact-page .coppsa-contact-form-section {
    background-color: #4e2440;
    background-image:
        linear-gradient(135deg,
            rgba(74, 33, 60, 0.72) 0%,
            rgba(58, 26, 48, 0.80) 55%,
            rgba(40, 16, 32, 0.88) 100%),
        url("../images-5/contact-form-bg.jpg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    padding: 6rem 0 5rem;
    margin-top: 0;
    position: relative;
}
/* Form centrado y angosto. */
.coppsa-contact-page .coppsa-contact-form-section .form-call-wrapper.coppsa-form-call-grid {
    display: block !important;
    max-width: 820px;
    margin: 0 auto !important;
}
.coppsa-contact-page .coppsa-contact-form-section .main-contact-form .main-heading {
    color: #ffffff !important;
    text-align: center !important;
    margin: 0 auto 32px !important;
}
/* Mapa overhang: solo una franja superior (~90px) solapa el fondo wine,
   el resto del mapa queda sobre el fondo blanco de la página. */
.coppsa-contact-page .coppsa-map-overhang {
    margin-top: -90px;
    margin-bottom: 5rem;
    position: relative;
    z-index: 2;
}
.coppsa-contact-page .coppsa-map-photo {
    position: relative;
    width: 100%;
    height: 460px;
    overflow: hidden;
    background: #eef0f3;
    box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.45);
    -webkit-clip-path: polygon(0 0, calc(100% - 64px) 0, 100% 64px, 100% 100%, 0 100%);
    clip-path: polygon(0 0, calc(100% - 64px) 0, 100% 64px, 100% 100%, 0 100%);
}
.coppsa-contact-page .coppsa-map-photo iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}
@media (max-width: 991px) {
    .coppsa-contact-page .coppsa-map-photo { height: 360px; }
    .coppsa-contact-page .coppsa-map-overhang { margin-top: -70px; }
}

/* Utilidades de padding/margin usadas en el form. */
.pt-\[0px\] { padding-top: 0 !important; }
.pt-\[80px\] { padding-top: 80px !important; }
.pb-\[140px\] { padding-bottom: 140px !important; }
.mt-\[0px\] { margin-top: 0 !important; }
.mb-\[0px\] { margin-bottom: 0 !important; }

/* El bloque "Get in Touch" + "COPPSA está preparado" queda alineado
   a la izquierda (default), sin centrar. */

/* Map block: Google Maps embed con la ubicación real de COPPSA Group.
   La card de dirección queda superpuesta sobre el mapa (estilo plantilla). */
.coppsa-contact-page .coppsa-map-block {
    position: relative;
    background: transparent;
    margin-top: 80px;
    padding: 0;
}
.coppsa-contact-page .coppsa-map-embed {
    position: relative;
    width: 100%;
    height: 600px;
    overflow: hidden;
    line-height: 0;
}
.coppsa-contact-page .coppsa-map-embed iframe {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}
/* Card flotante con la info de COPPSA, posicionada arriba-izquierda
   sobre el mapa (igual que la plantilla original) */
.coppsa-contact-page .coppsa-map-block > .container {
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    height: 100%;
    pointer-events: none;
    z-index: 2;
}
.coppsa-contact-page .coppsa-map-block .address-block {
    position: absolute;
    top: 60px;
    left: 24px;
    width: 360px;
    pointer-events: auto;
}
.coppsa-contact-page .coppsa-map-block .address-block .address-box {
    background: #ffffff;
    padding: 36px 32px 32px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.18);
}
.coppsa-contact-page .coppsa-map-block .address-block .address-box .logo-block span {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--c-primary-500, #7f406a);
    font-weight: 700;
    font-size: 1.4rem;
    letter-spacing: 0.04em;
}
.coppsa-contact-page .coppsa-map-block .address-block .address-box .logo-block img {
    height: 22px;
    width: auto;
    filter: brightness(0) saturate(100%) invert(27%) sepia(20%) saturate(2476%) hue-rotate(278deg) brightness(92%) contrast(89%);
}
.coppsa-contact-page .coppsa-map-block .address-block .address-box .address {
    margin-top: 20px;
}
.coppsa-contact-page .coppsa-map-block .address-block .address-box .address p {
    color: rgba(20, 20, 20, 0.78);
    font-size: 0.95rem;
    line-height: 1.55;
    margin: 0 0 14px;
}
.coppsa-contact-page .coppsa-map-block .address-block .address-box .btn.primary {
    display: inline-flex;
    background: var(--c-primary-500, #7f406a) !important;
    color: #ffffff !important;
    border-radius: 0 !important;
    padding: 14px 26px !important;
    margin-top: 8px;
    font-size: 0.85rem;
    letter-spacing: 0.1em;
}
.coppsa-contact-page .coppsa-map-block .address-block .address-box .btn.primary:hover {
    background: var(--c-secondary-500, #41bebd) !important;
}
.coppsa-contact-page .coppsa-map-block .address-block .address-box .btn.primary svg {
    fill: #ffffff !important;
}
.coppsa-contact-page .coppsa-map-block .address-block .card-notch {
    display: none;
}
@media (max-width: 767px) {
    .coppsa-contact-page .coppsa-map-embed { height: 520px; }
    .coppsa-contact-page .coppsa-map-block { margin-top: 48px; }
    .coppsa-contact-page .coppsa-map-block .address-block {
        position: relative;
        top: auto; left: auto;
        width: calc(100% - 32px);
        margin: -80px auto 24px;
    }
}

/* Nav: eliminar SOLO los triángulos junto a cada item del dropdown
   (estado base y hover). Los chevrones "v" de Empresa/Servicios se
   mantienen para indicar que tienen submenú. */
.navigation-menu .sub-menu li a::before,
.navigation-menu .sub-menu li a::after,
.navigation-menu .sub-menu li:hover > a::before,
.navigation-menu .sub-menu li:hover > a::after,
.navigation-menu .sub-menu li.current-menu-item > a::before,
.navigation-menu .sub-menu li.current-menu-item > a::after {
    content: none !important;
    display: none !important;
}
/* La plantilla mueve el span 34px a la izquierda en hover para dejar
   espacio a la flecha que ahora removimos. Anular ese desplazamiento. */
.navigation-menu .sub-menu li:hover > a span,
.navigation-menu .sub-menu li.current-menu-item > a span {
    transform: none !important;
}

/* Footer "Mapa de sitio": ocultar las flechas previas a cada link */
footer .footer-nav .footer-link .icon-play,
footer .footer-nav .footer-link svg.icon-play {
    display: none !important;
}

/* utility */
.pb-\[24px\] { padding-bottom: 24px; }
.pl-\[24px\] { padding-left: 24px; }
.pr-\[0px\]  { padding-right: 0; }
.mr-\[40px\] { margin-right: 40px; }
.pt-\[20px\] { padding-top: 20px; }
.pb-\[40px\] { padding-bottom: 40px; }
.mb-\[12px\] { margin-bottom: 12px; }

/* Segundo desplegable deshabilitado hasta elegir Motivo de consulta */
.coppsa-contact-page .custom-dropdown.is-disabled {
    opacity: 0.55;
    pointer-events: none;
    cursor: not-allowed;
}
.coppsa-contact-page .custom-dropdown.is-disabled .dropdown-form-button {
    cursor: not-allowed;
}
.mb-\[24px\] { margin-bottom: 24px; }

/* === Project Gallery — fondo violeta claro (igual a novedad-detail) + dropdown violeta suave === */
.projects-section {
    background-color: #fcf8fa !important;
    background:
        radial-gradient(circle at 18% 20%, rgba(127, 64, 106, 0.07) 0, transparent 55%),
        radial-gradient(circle at 82% 80%, rgba(65, 190, 189, 0.06) 0, transparent 55%),
        #fcf8fa !important;
}
/* Respetar alturas portrait de la plantilla: tarjetas con aspect-ratio 3/4 */
.projects-section .projects.grid-view .demo-project-card .project-card-img {
    aspect-ratio: 3 / 4;
    height: auto;
}
.projects-section .projects.grid-view .demo-project-card .project-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    max-height: none;
}
/* Card de contenido: blanco con texto vino por defecto */
.projects-section .demo-project-card .project-content {
    background-color: #ffffff !important;
}
.projects-section .demo-project-card .project-content .project-title {
    color: #7f406a !important;
    font-size: 20px !important;
    line-height: 1.3 !important;
}
.projects-section .demo-project-card .project-content p {
    color: #7f406a !important;
}
/* Línea y read-more: ocultas por defecto (como la plantilla), visibles en hover */
.projects-section .demo-project-card .project-content .line {
    background-color: rgba(255, 255, 255, 0.5) !important;
}
.projects-section .demo-project-card .project-content .read-more {
    color: #ffffff !important;
}
.projects-section .demo-project-card .project-content .read-more svg {
    fill: #7f406a !important;
}
/* Hover: turquesa con texto blanco */
.projects-section .demo-project-card:hover .project-content {
    background-color: #41bebd !important;
}
.projects-section .demo-project-card:hover .project-content .project-title,
.projects-section .demo-project-card:hover .project-content p,
.projects-section .demo-project-card:hover .project-content .read-more {
    color: #ffffff !important;
}
.projects-section .demo-project-card:hover .project-content .read-more svg {
    fill: #ffffff !important;
}
.projects-section .demo-project-card:hover .project-content .line {
    background-color: rgba(255, 255, 255, 0.5) !important;
}
.projects-section .project-head .filter-container .dropdown-btn,
.projects-section .project-head .filter-container .dropdown-button {
    background-color: #ffffff !important;
    color: #7f406a !important;
    border: none !important;
    box-shadow: none !important;
    font-weight: 600;
}
.projects-section .project-head .filter-container .dropdown-btn::after,
.projects-section .project-head .filter-container .dropdown-button::after {
    background-color: #7f406a !important;
    color: #7f406a !important;
}
.projects-section .project-head .filter-container .all-dropdown-menu,
.projects-section .project-head .filter-container .dropdown-menu {
    background-color: #f3e8ee !important;
    border: none !important;
}
.projects-section .project-head .filter-container .all-dropdown-menu li,
.projects-section .project-head .filter-container .dropdown-menu li {
    color: #7f406a !important;
    font-weight: 500;
}
.projects-section .project-head .filter-container .all-dropdown-menu li:hover,
.projects-section .project-head .filter-container .dropdown-menu li:hover {
    background-color: #7f406a !important;
    color: #ffffff !important;
}

/* === Proyectos relacionados (project-detail.html) ===
   Reusa las cards .demo-project-card exactamente como en la galería.
   Como Isotope no corre en esta página, aplicamos CSS Grid de 3 columnas
   directamente al contenedor. Quitamos el fondo violeta de la sección
   para que se integre con el detalle de proyecto. */
.coppsa-related-projects.projects-section {
    background: transparent !important;
    padding: 0 !important;
    margin-top: 3rem;
}
.coppsa-related-projects .coppsa-related-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    width: 100%;
    height: auto !important;
    position: static !important;
}
.coppsa-related-projects .coppsa-related-grid .demo-project-card {
    width: 100% !important;
    margin: 0 !important;
    position: static !important;
    left: auto !important;
    top: auto !important;
    float: none !important;
}
@media (max-width: 991px) {
    .coppsa-related-projects .coppsa-related-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .coppsa-related-projects .coppsa-related-grid { grid-template-columns: 1fr; }
}

/* === Titular de la nota (project-detail.html) === */
.project-detail-section .project-title.coppsa-project-headline {
    font-size: 42px !important;
    line-height: 1.15 !important;
    color: #7f406a !important;
    font-weight: 600;
}

/* === Frase destacada (project-detail.html) === */
.project-detail-section .project-discription.coppsa-project-lead {
    font-size: 28px !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
    color: #7f406a !important;
}

/* === Productos: subcategorías plegables dentro del sidebar === */
.blog-sidebar-section .categories-list li.has-subs .subcategories-list {
  list-style: none;
  margin: 0;
  padding: 0 0 0 14px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.25s ease, opacity 0.2s ease, padding 0.2s ease;
  border-left: 1px solid rgba(127, 64, 106, 0.18);
  margin-left: 4px;
}
.blog-sidebar-section .categories-list li.has-subs.is-open .subcategories-list {
  max-height: 400px;
  opacity: 1;
  padding-top: 6px;
  padding-bottom: 8px;
}
.blog-sidebar-section .categories-list li.has-subs .subcategories-list li {
  margin: 0;
  padding: 0;
  border-bottom: none;
}
.blog-sidebar-section .categories-list li.has-subs .subcategories-list .subcat-link {
  display: block;
  padding: 7px 10px;
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: #555;
  text-decoration: none;
  border-radius: 4px;
  transition: color 0.18s ease, background-color 0.18s ease;
}
.blog-sidebar-section .categories-list li.has-subs .subcategories-list .subcat-link:hover {
  color: var(--c-primary-500);
  background-color: rgba(127, 64, 106, 0.06);
}
.blog-sidebar-section .categories-list li.has-subs .subcategories-list .subcat-link.active {
  color: var(--c-primary-500);
  font-weight: 600;
  background-color: rgba(127, 64, 106, 0.08);
}

/* === Productos: cards blancas sobre fondo violeta claro ===
   Override solo dentro de la página productos (.blog-sidebar-section) para
   no afectar otros usos de .project-card. */
.blog-sidebar-section {
  background: rgba(127, 64, 106, 0.07);
}

.blog-sidebar-section .project-card {
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  overflow: hidden;
}

.blog-sidebar-section .project-card .project-card-content,
.blog-sidebar-section .project-card .project-content {
  background: #ffffff !important;
  padding: 28px 26px 26px;
}

.blog-sidebar-section .project-card .project-card-content .main-title,
.blog-sidebar-section .project-card .project-content .main-title {
  color: #1a1a1a !important;
  font-family: var(--font-heading);
  font-weight: 700;
}

.blog-sidebar-section .project-card .project-card-content p,
.blog-sidebar-section .project-card .project-content p {
  color: #444 !important;
  font-size: 16px !important;
}

.blog-sidebar-section .project-card .info-block {
  display: flex;
  gap: 28px;
  margin: 14px 0 8px;
}

.blog-sidebar-section .project-card .info-block .info .title {
  color: var(--c-secondary-500) !important;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.78rem;
  margin-bottom: 4px;
}

.blog-sidebar-section .project-card .info-block .info p {
  color: #1a1a1a !important;
  font-size: 15px !important;
  margin: 0;
}

/* Botón de las cards: celeste por defecto, wine en hover, siempre texto blanco. */
.blog-sidebar-section .project-card .btn.secondary {
  background-color: var(--c-secondary-500) !important;
  border-color: var(--c-secondary-500) !important;
  color: #fff !important;
}
.blog-sidebar-section .project-card .btn.secondary svg {
  fill: #fff !important;
}
.blog-sidebar-section .project-card .btn.secondary:hover {
  background-color: var(--c-primary-500) !important;
  border-color: var(--c-primary-500) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(127,64,106,0.35);
}
.blog-sidebar-section .project-card .btn.secondary:hover svg {
  fill: #fff !important;
}

/* === Productos: limpiar líneas + subcategorías 14px min === */
/* Hide template's hairline divider between category items (it crea las líneas
   que envolvían el panel de subcategorías abierto) */
.blog-sidebar-section .blog-sidebar-wrapper .blog-sidebar .categories .categories-list li .blog-link {
  border-bottom: none !important;
}
/* Garantiza tamaño mínimo de 14px en los enlaces de subcategoría */
.blog-sidebar-section .categories-list li.has-subs .subcategories-list .subcat-link {
  font-size: 14px !important;
  line-height: 1.4;
}

/* === Operations/Industries list (servicio-* pages): limpiar saturación ===
   Quita flechas y reemplaza el border-bottom grueso por un divisor sutil. */
.services-detail-section .services-detail-wrapper .services-links-block .links-container {
  gap: 8px !important;
}
.services-detail-section .services-detail-wrapper .services-links-block .links-container .area-link {
  padding: 18px 22px !important;
  border-bottom: 0 !important;
  border-radius: 12px !important;
  background: transparent;
  transition: background-color .25s ease, color .25s ease, transform .25s ease;
  gap: 1.5rem !important;
}
.services-detail-section .services-detail-wrapper .services-links-block .links-container .area-link .arrow-right {
  display: none !important;
}
.services-detail-section .services-detail-wrapper .services-links-block .links-container .area-link:hover,
.services-detail-section .services-detail-wrapper .services-links-block .links-container .area-link:active,
.services-detail-section .services-detail-wrapper .services-links-block .links-container .area-link.active {
  background-color: rgba(127, 64, 106, 0.08) !important;
  border-bottom: 0 !important;
  color: var(--c-primary-500) !important;
  transform: translateX(2px);
}

/* ========================================================================
   RESPONSIVE AUDIT — Task #12
   Consolidated mobile (≤575/767px), tablet (768–991px), desktop (≥992px)
   fixes for all 20 demo_5 pages. CSS-only (no HTML changes).
   Breakpoints used:
     - mobile small: max-width: 575px
     - mobile:       max-width: 767px
     - tablet:       768–991px
     - small-desk:   max-width: 1199px
   ======================================================================== */

/* --- Global safety net: prevent horizontal overflow site-wide ----------- */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}
*, *::before, *::after {
  box-sizing: border-box;
}
img, svg, video, iframe {
  max-width: 100%;
  height: auto;
}
/* Long unbreakable strings (URLs, emails) shouldn't blow out cards */
p, li, h1, h2, h3, h4, h5, h6, a, span, td, th, label, .btn {
  word-wrap: break-word;
  overflow-wrap: anywhere;
}
/* Sticky-nav anchor offset (kept consistent across pages) */
:target { scroll-margin-top: 90px; }

/* --- Tables / specs: horizontal scroll fallback on small screens -------- */
@media (max-width: 767px) {
  table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* --- Touch targets: ensure ≥44px on phones ------------------------------ */
@media (max-width: 767px) {
  .btn,
  .btn.primary,
  .btn.secondary,
  a.btn,
  button:not(.dropdown-btn),
  .read-more,
  .footer-link,
  .hamburger-icon,
  .hamburger-close,
  .social-link {
    min-height: 44px;
  }
  .btn, a.btn, .btn.primary, .btn.secondary {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    display: inline-flex;
    align-items: center;
  }
}

/* --- Container side padding on small screens --------------------------- */
@media (max-width: 767px) {
  .container {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}
@media (max-width: 575px) {
  .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* --- Header / nav --------------------------------------------------------
   Show hamburger and Cotizar CTA on tablet & mobile; hide desktop menu.
   Keep logo from overlapping right-side controls. */
@media (max-width: 991px) {
  .header.demo-header .header-wrapper {
    padding-left: 16px !important;
    padding-right: 16px !important;
    gap: 12px;
  }
  .header.demo-header .navigation-menu-wrapper.desktop-wrapper,
  .header.demo-header ul.navigation-menu.desktop {
    display: none !important;
  }
  .header.demo-header .hamburger {
    display: inline-flex !important;
  }
  .header.demo-header .logo .coppsa-logo-img {
    height: 20px !important;
  }
  .header.demo-header .icons-block .btn.primary {
    padding: 8px 14px !important;
    font-size: 12px !important;
  }
}
@media (max-width: 575px) {
  /* On very small phones, hide Cotizar text on header (drawer is still
     reachable from the in-page CTAs). Keep button visible for tap. */
  .header.demo-header .icons-block .btn.primary {
    padding: 8px 10px !important;
    font-size: 11px !important;
  }
  .header.demo-header .icons-block .btn.primary svg {
    display: none;
  }
}

/* Hamburger drawer: ensure sub-menus and close button work on phones */
@media (max-width: 767px) {
  .hamburger-content {
    width: 92vw !important;
    max-width: 380px !important;
  }
  .hamburger-content .navigation-menu.mobile > li > a {
    padding: 14px 20px !important;
    font-size: 16px !important;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .hamburger-content .sub-menu .menu-item a {
    padding: 12px 20px !important;
    min-height: 44px;
  }
}

/* --- Page header (hero strip on inner pages) ---------------------------- */
@media (max-width: 991px) {
  .page-header-section {
    padding-top: 100px !important;
    padding-bottom: 60px !important;
    min-height: auto !important;
  }
  .page-header-section .main-heading {
    font-size: 3.6rem !important;
    line-height: 1.15 !important;
  }
}
@media (max-width: 575px) {
  .page-header-section {
    padding-top: 90px !important;
    padding-bottom: 40px !important;
  }
  .page-header-section .main-heading {
    font-size: 2.8rem !important;
  }
  .page-header-section .grid-icon {
    width: 70px !important;
    height: 70px !important;
  }
}

/* --- Home hero (demo-hero-section / hero-section-2) --------------------- */
@media (max-width: 991px) {
  .demo-hero-section .text-block .main-heading,
  .hero-section-2 .hero-slider-2 .swiper-slide .hero-text-box .main-heading {
    font-size: 4.2rem !important;
    line-height: 1.1 !important;
  }
  .demo-hero-section .text-block p {
    font-size: 1.6rem !important;
  }
}
@media (max-width: 575px) {
  .demo-hero-section .text-block .main-heading,
  .hero-section-2 .hero-slider-2 .swiper-slide .hero-text-box .main-heading {
    font-size: 3.2rem !important;
  }
  .demo-hero-section .text-block p {
    font-size: 1.45rem !important;
  }
}

/* --- Generic section headings reflow ----------------------------------- */
@media (max-width: 767px) {
  .main-heading {
    font-size: 3rem !important;
    line-height: 1.15 !important;
  }
  .sub-heading {
    font-size: 1.2rem !important;
  }
  section { padding-top: 60px !important; padding-bottom: 60px !important; }
}

/* --- Grids: 3-col → 2-col → 1-col reflows ------------------------------ */
@media (max-width: 991px) {
  .projects.grid-view,
  .projects-section .projects.grid-view,
  .services-section .services-wrapper,
  .blog-section .blogs-wrapper,
  .industries-section .industries-wrapper {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 24px !important;
  }
}
@media (max-width: 575px) {
  .projects.grid-view,
  .projects-section .projects.grid-view,
  .services-section .services-wrapper,
  .blog-section .blogs-wrapper,
  .industries-section .industries-wrapper {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
}

/* --- Two-column "image + text" sections collapse on tablet ------------- */
@media (max-width: 991px) {
  .about-us-section .about-wrapper,
  .services-detail-section .services-detail-wrapper,
  .project-detail-section .project-main-wrapper {
    grid-template-columns: 1fr !important;
    display: grid !important;
    gap: 32px !important;
  }
}

/* --- Project filter bar (project1-col3): wrap on mobile ---------------- */
@media (max-width: 767px) {
  .projects-section .project-head {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }
  .projects-section .project-head .filter-container,
  .projects-section .project-head .view-toggle {
    width: 100%;
  }
  .projects-section .custom-dropdown,
  .projects-section .dropdown-btn {
    width: 100%;
  }
  .projects-section .view-toggle {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
  }
}

/* --- Project list-view rows: stack on mobile --------------------------- */
@media (max-width: 767px) {
  .projects.list-view .demo-project-card {
    grid-template-columns: 1fr !important;
    display: grid !important;
  }
}

/* --- Contact / forms: full width on mobile, no overflow ---------------- */
@media (max-width: 767px) {
  .contact-section .contact-form-wrapper,
  .contact-section .form-grid,
  form .form-grid,
  .coppsa-foot-form-col .form-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="search"],
  textarea,
  select {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 44px;
    font-size: 16px !important; /* prevent iOS zoom on focus */
  }
  .contact-section .info-block,
  .contact-section .contact-info-wrapper {
    grid-template-columns: 1fr !important;
  }
}

/* --- Footer: clean stacking on tablet/mobile --------------------------- */
@media (max-width: 991px) {
  .footer-section,
  footer,
  footer.green-demo-footer {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}
@media (max-width: 767px) {
  footer .footer-wrapper,
  footer.green-demo-footer .footer-wrapper,
  .coppsa-footer-grid {
    grid-template-columns: 1fr !important;
    column-gap: 0 !important;
    row-gap: 32px !important;
    display: grid !important;
  }
  footer .about-col .footer-title,
  .green-demo-footer .footer-title {
    font-size: 1.5rem !important;
    max-width: 100% !important;
    margin: 2rem 0 !important;
  }
  .coppsa-foot-brand {
    width: 100% !important;
    max-width: 100% !important;
  }
  .footer-secondary-nav {
    flex-wrap: wrap;
    gap: 8px 16px;
    justify-content: flex-start;
  }
}

/* --- Productos / blog-sidebar: stack sidebar above content on tablet --- */
@media (max-width: 991px) {
  .blog-sidebar-section .blog-sidebar-wrapper {
    grid-template-columns: 1fr !important;
    display: grid !important;
    gap: 24px !important;
  }
  .blog-sidebar-section .blog-sidebar {
    position: static !important;
    top: auto !important;
  }
}

/* --- Services detail: links list vertical, content stacks -------------- */
@media (max-width: 991px) {
  .services-detail-section .services-detail-wrapper .services-links-block {
    width: 100% !important;
  }
  .services-detail-section .services-detail-wrapper .services-links-block .links-container {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 575px) {
  .services-detail-section .services-detail-wrapper .services-links-block .links-container {
    grid-template-columns: 1fr !important;
  }
}

/* --- Coppsa quote drawer: full-screen on phones ------------------------- */
@media (max-width: 575px) {
  #coppsa-quote-drawer,
  .coppsa-quote-drawer {
    width: 100vw !important;
    max-width: 100vw !important;
  }
}

/* --- Ghost bands / large display text: scale down ---------------------- */
@media (max-width: 767px) {
  .coppsa-ghost-band,
  .coppsa-ghost-band--prefooter {
    font-size: 6rem !important;
    line-height: 1 !important;
  }
}
@media (max-width: 575px) {
  .coppsa-ghost-band,
  .coppsa-ghost-band--prefooter {
    font-size: 4rem !important;
  }
}

/* --- Project / blog detail: media + body widths ------------------------ */
@media (max-width: 767px) {
  .project-detail-section .project-thumbnail img,
  .blog-sidebar-section .blog-content img,
  .novedad-detail .blog-content img {
    width: 100% !important;
    height: auto !important;
  }
  .project-detail-section .project-discription {
    font-size: 1.6rem !important;
  }
}

/* --- Customer logos grid: stack to 3/2 cols ---------------------------- */
@media (max-width: 991px) {
  .customer-section .customers-wrapper,
  .marcas-section .marcas-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 575px) {
  .customer-section .customers-wrapper,
  .marcas-section .marcas-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* --- Breadcrumbs wrap on mobile --------------------------------------- */
@media (max-width: 575px) {
  .breadcrumbs ul {
    flex-wrap: wrap;
    gap: 6px 10px;
  }
}

/* --- Sticky elements: don't overlap viewport on phones ----------------- */
@media (max-width: 767px) {
  .blog-sidebar,
  .project-sidebar,
  .sticky-sidebar {
    position: static !important;
  }
}

/* === END RESPONSIVE AUDIT — Task #12 =================================== */

/* ============================================================
   Hero (.hero-section-2) — animación HORIZONTAL del texto/botones
   ------------------------------------------------------------
   La plantilla base anima `.main-heading`, `.about-list` y
   `.hero-btns` desde abajo (translateY 30px → 0). Como el slider
   ya se mueve horizontalmente con las flechas, hacemos que el
   contenido entre también desde la izquierda hacia la derecha
   para acompañar el sentido del slide.
   Sobrescribe las reglas de style_demo5.css (líneas 8233+, 8264+,
   8386+, 8408+ y :not(.swiper-slide-active) 8431+).
   ============================================================ */

/* Texto (título + lista): sólo fade, sin desplazamiento horizontal.
   Botones: fade + slide horizontal desde la izquierda, después del texto. */

/* Estado base / slide inactivo */
.hero-section-2 .hero-slider-2 .swiper-slide .hero-text-box .main-heading,
.hero-section-2 .hero-slider-2 .swiper-slide .hero-text-box .about-list {
    transform: none;
}

.hero-section-2 .hero-slider-2 .hero-btns {
    transform: translate3d(-60px, 0, 0);
}

.hero-section-2 .hero-slider-2 .swiper-slide:not(.swiper-slide-active) .hero-text-box .main-heading,
.hero-section-2 .hero-slider-2 .swiper-slide:not(.swiper-slide-active) .hero-text-box .about-list {
    transform: none !important;
}

.hero-section-2 .hero-slider-2 .swiper-slide:not(.swiper-slide-active) .hero-btns {
    transform: translate3d(-60px, 0, 0) !important;
}

/* Slide activo: primero el texto con fade, luego los botones deslizándose */
.hero-section-2 .hero-slider-2 .swiper-slide.swiper-slide-active .hero-text-box .main-heading,
.hero-section-2 .hero-slider-2 .swiper-slide.swiper-slide-active .hero-text-box .about-list {
    transform: none;
    transition: opacity 1.2s ease-in-out;
}

.hero-section-2 .hero-slider-2 .swiper-slide.swiper-slide-active .hero-btns {
    transform: translate3d(0, 0, 0);
    transition:
        opacity 1s ease-out,
        transform 1s cubic-bezier(0.22, 0.61, 0.36, 1);
    transition-delay: 1.2s; /* arranca cuando el texto ya está visible */
}

/* Quitar la línea turquesa debajo del título "Aliados que acompañan
   nuestro trabajo" en la sección Marcas y proveedores. */
.client-section .main-heading::after {
    display: none !important;
}

/* ─────────────────────────────────────────────────────────────
   Novedades v2 — Overlay card + category filter chips
   Card type B: foto a sangre, gradiente inferior, categoría +
   fecha + título sobre la foto, círculo-flecha como CTA visible.
   Estructura 1: barra de chips para filtrar por categoría.
   ───────────────────────────────────────────────────────────── */

/* Filter bar — mismo selector que #productos de la home: contenedor
   lila claro con chamfer top-right y tabs vino, el activo con fondo
   vino sólido y texto blanco. */
.coppsa-news-filters-wrap {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-bottom: 48px;
}

.coppsa-news-filters {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 6px 28px 6px 6px;
    max-width: 100%;
    background: rgba(127, 64, 106, 0.08);
    border-radius: 0;
    -webkit-clip-path: var(--slope-clip-top-right-3);
    clip-path: var(--slope-clip-top-right-3);
    justify-content: center;
}

.coppsa-news-chip {
    appearance: none;
    border: none;
    background: transparent;
    color: var(--c-primary-500, #7f406a);
    font-family: 'Inter', sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 18px 32px;
    border-radius: 4px;
    line-height: 1;
    cursor: pointer;
    transition:
        background-color 0.2s ease,
        color 0.2s ease;
}

.coppsa-news-chip:hover {
    color: var(--c-primary-500, #7f406a);
}

.coppsa-news-chip.is-active {
    background: var(--c-primary-500, #7f406a);
    color: #ffffff;
}

/* Hidden cards in grid (filter) */
.coppsa-news-card2.is-hidden {
    display: none !important;
}

.coppsa-news-empty-filter {
    grid-column: 1 / -1;
    text-align: center;
    padding: 40px 0;
    color: #8a8f9c;
    font-family: 'Inter', sans-serif;
    font-size: 1.5rem;
}

/* Overlay card */
.coppsa-news-card2 {
    position: relative;
    background: #12131a;
    border-radius: 0;
    overflow: hidden;
    -webkit-clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%);
    clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%);
    box-shadow: 0 6px 24px rgba(18, 19, 26, 0.08);
    transition:
        transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1),
        box-shadow 0.3s ease;
}

.coppsa-news-card2:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(18, 19, 26, 0.18);
}

.coppsa-news-card2-link {
    display: block;
    position: relative;
    color: #ffffff;
    text-decoration: none;
    aspect-ratio: 4 / 5;
}

.coppsa-news-card2-media {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.coppsa-news-card2-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.coppsa-news-card2:hover .coppsa-news-card2-media img {
    transform: scale(1.06);
}

.coppsa-news-card2-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(18, 19, 26, 0.92) 0%,
        rgba(18, 19, 26, 0.55) 35%,
        rgba(18, 19, 26, 0.05) 65%,
        rgba(18, 19, 26, 0) 100%
    );
    pointer-events: none;
}

.coppsa-news-card2-content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 28px 28px 28px 28px;
    z-index: 2;
}

.coppsa-news-card2-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.coppsa-news-card2-cat {
    display: inline-block;
    font-family: 'Inter', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #ffffff;
    padding: 6px 14px;
    border-radius: 0;
    -webkit-clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
    clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
    line-height: 1;
    background: var(--c-secondary-500, #41bebd);
}

/* Distinct color per category — uses brand palette */
.coppsa-news-card2-cat[data-cat="Proyectos"] {
    background: var(--c-primary-500, #7f406a);
}
.coppsa-news-card2-cat[data-cat="Servicios"] {
    background: var(--c-secondary-500, #41bebd);
}
.coppsa-news-card2-cat[data-cat="Innovación"] {
    background: #5a3450;
}
.coppsa-news-card2-cat[data-cat="Eventos"] {
    background: #2a8b8a;
}

.coppsa-news-card2-date {
    font-family: 'Inter', sans-serif;
    font-size: 1.3rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.85);
    letter-spacing: 0.01em;
}

.coppsa-news-card2-title {
    font-family: 'Barlow Condensed', 'Inter', sans-serif;
    font-size: 2.4rem;
    font-weight: 600;
    line-height: 1.2;
    color: #ffffff;
    margin: 0;
    /* Clamp to 3 lines */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Square arrow CTA with top-right chamfer — top right corner */
.coppsa-news-card2-arrow {
    position: absolute;
    right: 24px;
    top: 24px;
    width: 44px;
    height: 44px;
    border-radius: 0;
    -webkit-clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
    clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
    background: #ffffff;
    color: var(--c-primary-500, #7f406a);
    display: flex;
    align-items: center;
    justify-content: center;
    transition:
        background-color 0.3s ease,
        color 0.3s ease;
    z-index: 3;
    box-shadow: 0 4px 12px rgba(18, 19, 26, 0.18);
}

.coppsa-news-card2-arrow svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
    transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.coppsa-news-card2:hover .coppsa-news-card2-arrow {
    background: var(--c-primary-500, #7f406a);
    color: #ffffff;
}

.coppsa-news-card2:hover .coppsa-news-card2-arrow svg {
    transform: none;
}

/* Responsive — single column on phones, 2 cols on tablets */
@media (max-width: 991px) {
    .coppsa-news-grid {
        grid-template-columns: repeat(2, 1fr);
        column-gap: 2rem;
        row-gap: 3rem;
    }
}

/* En mobile: las cards no se apilan, se vuelven un carrusel
   horizontal con scroll-snap. El usuario desliza con el dedo
   y cada card ocupa ~82% del viewport. */
@media (max-width: 600px) {
    .coppsa-news-grid {
        display: flex;
        grid-template-columns: none;
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scroll-padding-left: 16px;
        scroll-padding-right: 16px;
        gap: 16px;
        padding: 4px 16px 12px 16px;
        margin: 0 -16px;
        scrollbar-width: none;
    }
    .coppsa-news-grid::-webkit-scrollbar {
        display: none;
    }
    .coppsa-news-grid > .coppsa-news-card,
    .coppsa-news-grid > .coppsa-news-card2 {
        flex: 0 0 82%;
        max-width: 82%;
        scroll-snap-align: start;
    }
    .coppsa-news-filters {
        gap: 8px;
        margin-bottom: 32px;
    }
    .coppsa-news-chip {
        font-size: 1.3rem;
        padding: 8px 16px;
    }
    .coppsa-news-card2-content {
        padding: 22px 20px 22px 20px;
    }
    .coppsa-news-card2-arrow {
        right: 18px;
        top: 18px;
        width: 38px;
        height: 38px;
    }
    .coppsa-news-card2-title {
        font-size: 2rem;
    }
}


/* ============================================================
   Admin quick link in main menu
   ============================================================ */
.coppsa-menu-admin > a {
    color: var(--coppsa-teal, #41bebd) !important;
    font-weight: 600;
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
}
.coppsa-menu-admin > a::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #41bebd;
    box-shadow: 0 0 0 3px rgba(65, 190, 189, 0.18);
    flex-shrink: 0;
}
.coppsa-menu-admin > a:hover,
.coppsa-menu-admin > a:focus {
    color: #2fa19f !important;
}
.navigation-menu.mobile .coppsa-menu-admin > a {
    color: #41bebd !important;
}