/* COUGAR España · Landings de modelo (cougarlanding) · estilo de casa: Microgramma itálica, Nunito Sans, naranja #FF6A0A, bloques oscuros */
body.page-cglanding{ overflow-x:hidden; }
body.page-cglanding #wrapper{ padding-top:0; }
body.page-cglanding #wrapper .breadcrumb{ margin-bottom:10px; }
.cgl{ font-family:var(--cg-body,'Nunito Sans',system-ui,sans-serif); color:var(--cg-ink2,#2a2e37); }
.cgl-bleed{ width:100vw; margin-left:calc(50% - 50vw); position:relative; }
.cgl-w{ max-width:1180px; margin:0 auto; padding:0 20px; }
.cgl-previewbar{ background:#14161a; color:#fff; padding:10px 16px; border-radius:10px; font-size:13px; font-weight:700; margin:0 0 12px; }
.cgl-kicker{ font-family:'MicrogrammaSlant','Microgramma',sans-serif; font-style:italic; font-weight:700; text-transform:uppercase; letter-spacing:2px; font-size:12px; color:var(--cg-orange,#FF6A0A); margin:0 0 12px; }
.cgl .o{ color:var(--cg-orange,#FF6A0A); }
.cgl-h1,.cgl-h2,.cgl-banner-h{ font-family:'MicrogrammaSlant','Microgramma',sans-serif !important; font-style:italic !important; font-weight:700 !important; text-transform:uppercase; letter-spacing:.3px; }
.cgl-h1{ font-size:clamp(34px,6vw,84px) !important; line-height:.98 !important; color:#fff !important; margin:0 0 16px !important; }
.cgl-h1 small{ display:block; font-size:.36em; line-height:1.15; margin-top:12px; color:var(--cg-orange,#FF6A0A); letter-spacing:.5px; }
.cgl-h2{ font-size:clamp(22px,2.8vw,36px) !important; line-height:1.1 !important; color:#14161a !important; margin:0 0 14px !important; }
.cgl-dark .cgl-h2{ color:#fff !important; }
.cgl-p{ font-size:17px; line-height:1.7; color:#4a505b; }
.cgl-p p{ margin:0 0 12px; }
.cgl-dark .cgl-p{ color:#c3c8d0; }
.cgl-btn{ display:inline-flex; align-items:center; gap:8px; padding:16px 28px; border-radius:12px; background:linear-gradient(180deg,#FF6A0A,#f25c00); color:#fff !important; font-family:'MicrogrammaSlant','Microgramma',sans-serif; font-style:italic; font-weight:700; text-transform:uppercase; letter-spacing:.6px; font-size:14px; text-decoration:none !important; box-shadow:0 8px 24px rgba(255,106,10,.32); transition:transform .15s,box-shadow .15s; border:0; }
.cgl-btn:hover{ transform:translateY(-2px); box-shadow:0 12px 30px rgba(255,106,10,.42); }
.cgl-btn-sm{ padding:12px 20px; font-size:12px; border-radius:10px; }
/* hero */
.cgl-hero{ background:#0a0c10; min-height:min(78vh,760px); display:flex; align-items:center; overflow:hidden; }
.cgl-hero-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:right center; } /* el producto va a la derecha: que el recorte en pantallas estrechas no se lo coma */
.cgl-hero::after{ content:''; position:absolute; inset:0; background:linear-gradient(90deg,rgba(8,9,12,.92) 0%,rgba(8,9,12,.72) 34%,rgba(8,9,12,.18) 62%,rgba(8,9,12,0) 100%),linear-gradient(0deg,rgba(8,9,12,.55) 0%,rgba(8,9,12,0) 38%); }
.cgl-hero-in{ position:relative; z-index:2; width:100%; max-width:1180px; margin:0 auto; padding:70px 20px; }
.cgl-hero-in > *{ max-width:600px; }
.cgl-hero-sub{ font-size:19px; line-height:1.6; color:#e4e7ec; margin:0 0 20px; }
.cgl-chips{ list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin:0 0 26px; padding:0; }
.cgl-chips li{ padding:8px 14px; border-radius:999px; border:1px solid rgba(255,255,255,.28); background:rgba(255,255,255,.08); color:#fff; font-size:13px; font-weight:800; backdrop-filter:blur(6px); }
.cgl-hero-cta{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.cgl-desde{ color:#c3c8d0; font-size:14px; }
.cgl-desde b{ color:#fff; font-size:20px; }
/* cifras */
.cgl-cifras{ background:#14161a; border-top:3px solid var(--cg-orange,#FF6A0A); }
.cgl-cifras-in{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; padding-top:26px; padding-bottom:26px; }
.cgl-cifra{ text-align:center; color:#9aa1ab; font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.6px; }
.cgl-cifra b{ display:block; font-family:'MicrogrammaSlant','Microgramma',sans-serif; font-style:italic; font-size:clamp(24px,3.2vw,40px); color:#fff; letter-spacing:.5px; line-height:1.1; margin-bottom:4px; }
.cgl-cifra b em{ font-style:inherit; color:var(--cg-orange,#FF6A0A); font-size:.55em; margin-left:3px; }
/* partido */
.cgl-partido{ padding:74px 0; background:#fff; }
.cgl-partido.cgl-dark{ background:#0f1216; }
.cgl-partido-in{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:48px; align-items:center; }
.cgl-rev .cgl-partido-txt{ order:2; }
.cgl-rev .cgl-partido-in{ grid-template-columns:minmax(0,7fr) minmax(0,5fr); }
.cgl-partido-img img{ width:100%; height:auto; display:block; border-radius:20px; box-shadow:0 24px 60px rgba(0,0,0,.22); }
.cgl-puntos{ list-style:none; margin:16px 0 22px; padding:0; display:grid; gap:10px; }
.cgl-puntos li{ position:relative; padding-left:28px; font-size:16px; line-height:1.5; color:#2a2e37; }
.cgl-dark .cgl-puntos li{ color:#e4e7ec; }
.cgl-puntos li::before{ content:''; position:absolute; left:0; top:7px; width:14px; height:8px; border-left:3px solid var(--cg-orange,#FF6A0A); border-bottom:3px solid var(--cg-orange,#FF6A0A); transform:rotate(-45deg); }
.cgl-puntos li b{ color:#14161a; } .cgl-dark .cgl-puntos li b{ color:#fff; }
.cgl-puntos-2{ grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:30px; }
/* trio */
.cgl-trio{ padding:74px 0; background:var(--cg-lbg,#f3f4f7); }
.cgl-trio.cgl-dark{ background:#0f1216; }
.cgl-head{ max-width:760px; margin:0 0 30px; }
.cgl-trio-grid{ display:grid; gap:20px; grid-template-columns:repeat(3,minmax(0,1fr)); }
.cgl-trio-grid.cgl-n4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.cgl-trio-grid.cgl-n2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.cgl-card{ background:#fff; border:1px solid var(--cg-line,#e6e8ec); border-radius:18px; overflow:hidden; display:flex; flex-direction:column; }
.cgl-dark .cgl-card{ background:#171b22; border-color:#262c37; }
.cgl-card-img{ background:#f6f7f9; aspect-ratio:4/3; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.cgl-dark .cgl-card-img{ background:#1d222b; }
.cgl-card-img img{ width:100%; height:100%; object-fit:contain; display:block; }
.cgl-card-cover .cgl-card-img img{ object-fit:cover; }
.cgl-card-body{ padding:18px 20px 22px; }
.cgl-num{ display:inline-block; font-family:'MicrogrammaSlant','Microgramma',sans-serif; font-style:italic; font-weight:700; font-size:26px; color:var(--cg-orange,#FF6A0A); margin-bottom:4px; }
.cgl-card h3{ font-family:var(--cg-body,'Nunito Sans',sans-serif) !important; font-size:18px !important; font-weight:900 !important; color:#14161a !important; margin:0 0 6px !important; text-transform:none !important; letter-spacing:0; }
.cgl-dark .cgl-card h3{ color:#fff !important; }
.cgl-card p{ font-size:15px; line-height:1.55; color:#5a606b; margin:0; }
.cgl-dark .cgl-card p{ color:#aab0ba; }
/* ancho */
.cgl-ancho{ background:#0f1216; padding:0 0 60px; }
/* contain: en pantallas muy anchas la imagen se encoge en vez de recortarse; su fondo es el del bloque, así que no se ve el borde */
.cgl-ancho > img{ width:100%; height:auto; display:block; max-height:620px; object-fit:contain; }
.cgl-ancho-txt{ margin-top:-40px; position:relative; }
.cgl-ancho-txt > *{ max-width:900px; }
/* medidas */
.cgl-medidas{ padding:74px 0; background:#fff; }
.cgl-medidas-in{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:44px; align-items:center; }
.cgl-medidas-img img{ width:100%; height:auto; display:block; border-radius:18px; }
.cgl-tabla{ width:100%; border-collapse:collapse; font-size:15px; }
.cgl-tabla th,.cgl-tabla td{ padding:11px 0; border-bottom:1px solid #eef0f3; text-align:left; vertical-align:top; }
.cgl-tabla th{ font-weight:800; color:#14161a; width:44%; padding-right:14px; }
.cgl-tabla td{ color:#4a505b; }
/* comparar */
.cgl-comparar{ padding:74px 0; background:#0f1216; }
.cgl-cmp-wrap{ overflow:auto; border:1px solid #262c37; border-radius:18px; background:#171b22; }
.cgl-cmp{ width:100%; border-collapse:collapse; min-width:520px; font-size:15px; color:#d7dbe1; }
.cgl-cmp th,.cgl-cmp td{ padding:14px 18px; border-bottom:1px solid #262c37; text-align:left; vertical-align:top; }
.cgl-cmp thead th{ font-family:'MicrogrammaSlant','Microgramma',sans-serif; font-style:italic; text-transform:uppercase; font-size:16px; color:#fff; background:#1d222b; }
.cgl-cmp thead th a{ color:#fff; text-decoration:none; } .cgl-cmp thead th a:hover{ color:var(--cg-orange,#FF6A0A); }
.cgl-cmp tbody th{ color:#9aa1ab; font-weight:800; width:1%; white-space:nowrap; font-size:13px; text-transform:uppercase; letter-spacing:.5px; }
.cgl-cmp td b{ color:#fff; font-size:18px; }
.cgl-cmp tbody tr:last-child td,.cgl-cmp tbody tr:last-child th{ border-bottom:0; }
/* productos */
.cgl-prods{ padding:64px 0 30px; background:var(--cg-lbg,#f3f4f7); }
.cgl-prods .cg-shead h2,.cgl-guias .cg-shead h2{ font-family:'MicrogrammaSlant','Microgramma',sans-serif !important; font-style:italic !important; text-transform:uppercase; font-size:22px !important; margin:0 !important; }
.cgl-prods-grid{ display:grid !important; gap:14px !important; grid-template-columns:repeat(4,minmax(0,1fr)); margin-top:16px; }
.cgl-prods-grid.cgl-n2{ grid-template-columns:repeat(2,minmax(0,1fr)); max-width:640px; }
.cgl-prods-grid.cgl-n3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.cgl-prods-grid > *{ width:auto !important; max-width:none !important; flex:none !important; padding:0 !important; }
/* faq */
.cgl-faq{ padding:64px 0; background:#fff; }
.cgl-faq-in{ max-width:860px; }
.cgl-faq details{ background:#fff; border:1px solid var(--cg-line,#e6e8ec); border-radius:12px; padding:0 18px; margin:0 0 10px; }
.cgl-faq summary{ cursor:pointer; font-weight:800; padding:15px 30px 15px 0; list-style:none; position:relative; color:#14161a; font-size:16px; }
.cgl-faq summary::-webkit-details-marker{ display:none; }
.cgl-faq summary::after{ content:'+'; position:absolute; right:0; top:10px; font-size:22px; color:var(--cg-orange,#FF6A0A); font-weight:900; }
.cgl-faq details[open] summary::after{ content:'−'; }
.cgl-faq details > div{ padding:0 0 16px; font-size:15.5px; line-height:1.6; color:#3a3f49; }
/* guías */
.cgl-guias{ padding:20px 0 64px; background:var(--cg-lbg,#f3f4f7); }
.cgl-guias-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:12px; margin-top:14px; }
.cgl-guia{ display:block; background:#fff; border:1px solid var(--cg-line,#e6e8ec); border-radius:14px; padding:16px 18px; text-decoration:none !important; color:#14161a !important; transition:border-color .15s,box-shadow .15s; }
.cgl-guia:hover{ border-color:var(--cg-orange,#FF6A0A); box-shadow:0 8px 22px rgba(21,23,28,.08); }
.cgl-guia b{ display:block; font-size:15px; line-height:1.35; font-weight:800; }
.cgl-guia span{ display:block; font-size:13px; color:#7a828c; margin-top:4px; }
/* cta final */
.cgl-cta{ padding:80px 0; background:radial-gradient(1200px 400px at 50% 0%,rgba(255,106,10,.22),rgba(255,106,10,0) 70%),#0a0c10; text-align:center; }
.cgl-cta .cgl-p{ max-width:640px; margin:0 auto 24px; }
.cgl-trust{ list-style:none; margin:30px 0 0; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:10px 26px; color:#aab0ba; font-size:14px; font-weight:700; }
/* en una landing no se ofrece otro producto: fuera el aviso lateral de «oferta destacada» */
body#module-cougarlanding-landing #cg-rswrap{ display:none !important; }
/* banners (propuestas) */
.cgl-demo{ padding:26px 0; background:var(--cg-lbg,#f3f4f7); }
.cgl-demo-label{ font-family:'MicrogrammaSlant','Microgramma',sans-serif; font-style:italic; text-transform:uppercase; font-size:13px; letter-spacing:1.5px; color:#7a828c; margin:0 0 10px; }
.cgl-demo-nota{ font-size:13px; color:#7a828c; margin:8px 0 0; }
.cgl-banner{ position:relative; border-radius:20px; overflow:hidden; background:#0a0c10; aspect-ratio:1180/360; container-type:inline-size; }
.cgl-banner-alto{ aspect-ratio:1180/470; }
.cgl-banner > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.cgl-banner::after{ content:''; position:absolute; inset:0; background:linear-gradient(90deg,rgba(8,9,12,.9) 0%,rgba(8,9,12,.6) 36%,rgba(8,9,12,0) 68%); }
/* texto y tamaños en proporción al ancho del banner (cqw), para que el título no pise el producto en ventanas estrechas */
.cgl-banner-txt{ position:absolute; z-index:2; left:0; top:0; bottom:0; width:47%; padding:0 0 0 3.7cqw; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; }
.cgl-banner-h{ font-size:clamp(17px,3.1cqw,38px); line-height:1.04; color:#fff; margin:0 0 10px; }
.cgl-banner-txt p{ color:#dfe3e8; font-size:clamp(12px,1.35cqw,16px); line-height:1.5; margin:0 0 16px; }
@media (max-width:991px){
  .cgl-partido-in,.cgl-rev .cgl-partido-in,.cgl-medidas-in{ grid-template-columns:1fr; gap:26px; }
  .cgl-rev .cgl-partido-txt{ order:0; }
  .cgl-trio-grid,.cgl-trio-grid.cgl-n4{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .cgl-prods-grid,.cgl-prods-grid.cgl-n3{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .cgl-partido,.cgl-trio,.cgl-medidas,.cgl-comparar{ padding:50px 0; }
}
@media (max-width:640px){
  .cgl-hero{ min-height:0; align-items:flex-end; }
  .cgl-hero-bg{ object-position:center top; }
  .cgl-hero::after{ background:linear-gradient(0deg,rgba(8,9,12,.96) 0%,rgba(8,9,12,.82) 46%,rgba(8,9,12,.1) 78%); }
  .cgl-hero-in{ padding:240px 18px 34px; }
  .cgl-hero-sub{ font-size:16px; }
  .cgl-cifras-in{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 10px; }
  .cgl-trio-grid,.cgl-trio-grid.cgl-n4,.cgl-trio-grid.cgl-n2{ grid-template-columns:1fr; }
  .cgl-puntos-2{ grid-template-columns:1fr; }
  .cgl-p{ font-size:16px; }
  .cgl-prods-grid,.cgl-prods-grid.cgl-n2,.cgl-prods-grid.cgl-n3{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:8px !important; }
  .cgl-banner{ aspect-ratio:4/3; }
  .cgl-banner::after{ background:linear-gradient(0deg,rgba(8,9,12,.94) 0%,rgba(8,9,12,.5) 55%,rgba(8,9,12,0) 100%); }
  .cgl-banner-txt{ width:100%; padding:0 20px 20px; justify-content:flex-end; }
  .cgl-banner-h{ font-size:22px; }
  .cgl-banner-txt p{ font-size:14px; }
  .cgl-ancho-txt{ margin-top:20px; }
}

/* ===== HÉROE SEGÚN EL ANCHO DE PANTALLA (05/10/2026) =====
   El producto no se recorta ni queda debajo del texto en ningún tamaño. La imagen de escritorio es un lienzo de 1920×900 con el producto en la
   zona útil (x 1045-1900, y 80-822; ver landing_img.py). Antes iba en object-fit:cover a todo el ancho: en pantallas de más de ~1900 px (2560×1440)
   se ampliaba hasta comerse la cabeza y la base del producto, y entre 641 y 1199 px el texto quedaba encima.
   · ≥ 1024 px: la imagen se ajusta al ALTO del héroe y nunca se amplía tanto como para tapar más de 45 px del lienzo por arriba y por abajo
     (ancho = entre 213,34cqh y 237cqh). En pantallas anchas el héroe crece (hasta el 78 % del alto de la ventana) y lo que sobra a la
     izquierda es el fondo, con el borde de la imagen fundido.
   · 1024-1199 px: columna de texto más estrecha y letra algo menor.
   · 641-1023 px: apilado como en móvil (producto arriba, texto debajo), con la imagen hero-m2 (la de móvil al doble de resolución). */
@media (min-width:1024px){
  .cgl-hero{ min-height:min(78vh,max(760px,42.2vw)); }
  .cgl-hero-in > *{ max-width:min(600px,47vw); }
  @supports (width:1cqh){
    .cgl-hero > picture{ position:absolute; inset:0; container-type:size; }
    .cgl-hero-bg{ inset:auto; right:0; top:50%; transform:translateY(-50%); width:clamp(213.34cqh,100cqw,237cqh); height:auto; aspect-ratio:1920/900; max-width:none;
      -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14%); mask-image:linear-gradient(90deg,transparent 0,#000 14%); }
  }
}
@media (min-width:1024px) and (max-width:1199px){
  .cgl-hero{ min-height:min(78vh,760px,46.8vw); }
  .cgl-hero-in{ padding:44px 20px; }
  .cgl-hero-in > *{ max-width:44vw; }
  .cgl-h1{ font-size:5vw !important; }
  .cgl-hero-sub{ font-size:16.5px; line-height:1.5; }
  .cgl-chips{ gap:6px; margin-bottom:20px; }
  .cgl-chips li{ padding:6px 11px; font-size:12px; }
}
@media (min-width:641px) and (max-width:1023px){
  .cgl-hero{ min-height:0; align-items:flex-end; }
  .cgl-hero-bg{ object-position:center top; }
  .cgl-hero::after{ background:none; }
  /* la imagen de móvil lleva el producto en el 32 % superior (0,64 × ancho de alto): el texto empieza justo debajo y lleva su propio fondo */
  .cgl-hero-in{ padding:64vw 28px 44px; background:linear-gradient(180deg,rgba(8,9,12,0) calc(64vw - 70px),rgba(8,9,12,.9) calc(64vw + 30px)); }
  .cgl-hero-in > *{ max-width:none; }
}