/* content.css — componentes compartidos de PÁGINAS INTERIORES (CPE-004).
   Reutilizable en las 10 páginas restantes; primera consumidora: nuestra-empresa (187).
   Escala tipográfica v2 armonizada (misma que home.css): H1 42/28 · H2 32/24 · body 19/17 · lh 1.2/1.55.
   Reutiliza de home.css (global): .cpe-band, .cpe-band__h2, .cpe-icons/.cpe-icon,
   .cpe-band--grey/--white/--purple/--intro, .cpe-cta/.cpe-cta__h2, .cpe-band a.cpe-btn, .cpe-bullets.
   Este archivo solo añade lo que NO existe en la home: hero de título de página + feature-split. */

/* ================= HERO DE TÍTULO DE PÁGINA ================= */
/* El vivo: banda con fondo-principal.webp + overlay morado y un H1 centrado (alt. ~432px @1920). */
.cpe-hero--page {
  background:
    linear-gradient(rgba(44, 36, 100, .60), rgba(44, 36, 100, .60)),
    url("https://cpe-online.eu/wp-content/uploads/2025/07/fondo-principal.webp") center/cover no-repeat;
  min-height: 340px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 90px 20px;
}
.cpe-hero--page .cpe-hero__h1 {
  font-family: Montserrat, sans-serif !important;
  font-weight: 700 !important;
  font-size: 42px !important;      /* v2 (vivo: 60px sin jerarquía con el resto) */
  line-height: 1.15 !important;
  color: #fff !important;
  margin: 0;
  max-width: 900px;
}
/* subtítulo opcional bajo el H1 (p.ej. private-label) — v2: 22/18 */
.cpe-hero--page .cpe-hero__sub {
  font-family: Montserrat, sans-serif !important;
  font-weight: 500 !important;
  font-size: 22px !important;
  line-height: 1.35 !important;
  color: #fff !important;
  opacity: .92;
  margin: 16px 0 0;
  max-width: 760px;
}

/* ================= FEATURE-SPLIT (imagen + texto) ================= */
/* Split genérico de páginas interiores: rejilla 1fr/1fr, imagen a un lado y texto al otro.
   Distinto del .cpe-split de la home (ese va sobre morado con texto blanco). Aquí texto oscuro. */
.cpe-feature-band { padding: 60px 20px; }
.cpe-feature {
  max-width: 1140px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
/* variante: imagen a la derecha (texto primero en el DOM) */
.cpe-feature--img-right .cpe-feature__media { order: 2; }

.cpe-feature__media { display: flex; justify-content: center; }
.cpe-feature__media img {
  width: 100%;
  max-width: 550px;
  height: auto;
  border-radius: 12px;
  display: block;
}
.cpe-feature__h2 {
  font-family: Montserrat, sans-serif !important;
  font-weight: 700 !important;
  font-size: 32px !important;      /* v2 */
  line-height: 1.2 !important;
  color: #000 !important;
  margin: 0 0 22px;
}
.cpe-feature__text p {
  font-family: Montserrat, sans-serif;
  font-size: 19px;                 /* v2 */
  font-weight: 400;
  line-height: 1.55;
  color: #414141;
  margin: 0 0 16px;
}
.cpe-feature__text p:last-child { margin-bottom: 0; }

/* ================= PROSE (bloque de texto contenido: H2 + párrafos + bullets) ================= */
.cpe-prose-band { padding: 60px 20px; }
.cpe-prose { max-width: 860px; margin: 0 auto; }
.cpe-prose--center { text-align: center; }
.cpe-prose p {
  font-family: Montserrat, sans-serif;
  font-size: 19px; font-weight: 400; line-height: 1.55;
  color: #414141; margin: 0 0 16px;
}
.cpe-prose .cpe-bullets { margin-top: 22px; text-align: left; display: inline-block; }

/* ================= PROCESO (pasos numerados) ================= */
.cpe-steps-band { padding: 60px 20px; }
.cpe-steps {
  max-width: 1140px; margin: 34px auto 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
}
.cpe-step {
  background: #fff; border-radius: 16px; padding: 30px 24px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .08); text-align: center;
}
.cpe-step__n {
  width: 46px; height: 46px; margin: 0 auto 16px;
  display: flex; align-items: center; justify-content: center;
  background: #B4242C; color: #fff; border-radius: 50%;
  font: 700 20px/1 Montserrat, sans-serif;
}
.cpe-step__t {
  font-family: Montserrat, sans-serif !important;
  font-size: 18px !important; font-weight: 700 !important;
  color: #000 !important; line-height: 1.3 !important; margin: 0 0 10px;
}
.cpe-step p {
  font-family: Montserrat, sans-serif;
  font-size: 16px; font-weight: 400; line-height: 1.5;
  color: #414141; margin: 0;
}

/* ================= CONTACTO (200) ================= */
.cpe-contact-band { padding: 60px 20px; }
.cpe-contact { max-width: 720px; margin: 0 auto; }
.cpe-contact__intro { text-align: center; margin-bottom: 28px; }
.cpe-contact__intro p {
  font-family: Montserrat, sans-serif; font-size: 19px; line-height: 1.55;
  color: #414141; margin: 0 0 6px;
}

/* formulario CF7 (estilamos el markup nativo de Contact Form 7) */
.cpe-form label { display: block; font-family: Montserrat, sans-serif; font-weight: 600; font-size: 16px; color: #000; margin: 18px 0 6px; }
.cpe-form input[type="text"], .cpe-form input[type="email"], .cpe-form textarea {
  width: 100%; box-sizing: border-box; font-family: Montserrat, sans-serif; font-size: 17px; color: #414141;
  padding: 14px 16px; border: 1px solid #d5d5d5; border-radius: 12px; background: #fff; margin-top: 4px;
}
.cpe-form textarea { min-height: 150px; resize: vertical; }
.cpe-form input:focus, .cpe-form textarea:focus { outline: none; border-color: #B4242C; }
.cpe-form .wpcf7-submit, .cpe-form input[type="submit"] {
  margin-top: 24px; background: #AC242C; color: #fff; font-family: Montserrat, sans-serif;
  font-size: 18px; font-weight: 600; border: none; padding: 15px 34px; border-radius: 20px;
  cursor: pointer; width: auto;
}
.cpe-form .wpcf7-submit:hover, .cpe-form input[type="submit"]:hover { background: #B4242C; }
.cpe-form .wpcf7-spinner { margin: 12px auto 0; display: block; }

/* fila de datos de contacto (tel / dirección / email) */
.cpe-contact-cards { max-width: 1000px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.cpe-ccard { text-align: center; }
.cpe-ccard__ic { width: 42px; height: 42px; margin: 0 auto 12px; color: #B4242C; display: block; }
.cpe-ccard__t { font-family: Montserrat, sans-serif; font-size: 18px; font-weight: 700; color: #000; margin: 0 0 4px; line-height: 1.3; }
.cpe-ccard__t a { color: #000; text-decoration: none; }
.cpe-ccard p { font-family: Montserrat, sans-serif; font-size: 15px; color: #414141; margin: 0; line-height: 1.4; }

/* mapa a ancho completo */
.cpe-map { line-height: 0; }
.cpe-map iframe { width: 100%; height: 420px; border: 0; display: block; }

/* ================= WOO ARCHIVE (productos / categorías) — CPE-005 =================
   Plantilla archive-product.html usa wp:woocommerce/legacy-template → markup clásico
   (ul.products li.product). Reutiliza el look de tarjeta de la home. YITH oculta cart/precio. */
.cpe-woo-archive { padding: 10px 20px 70px; }
.cpe-woo-archive .woocommerce-products-header,   /* el título lo pone el hero cpe-hero--page */
.cpe-woo-archive .woocommerce-result-count,
.cpe-woo-archive .woocommerce-ordering { display: none; }
.cpe-woo-archive .woocommerce { max-width: 1140px; margin: 0 auto; }
.cpe-woo-archive ul.products {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px;
  margin: 30px auto 0; padding: 0; list-style: none;
}
.cpe-woo-archive ul.products::before, .cpe-woo-archive ul.products::after { content: none !important; }
.cpe-woo-archive ul.products li.product {
  width: auto !important; margin: 0 !important; float: none !important; text-align: center;
}
.cpe-woo-archive ul.products li.product img {
  width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 8px; margin: 0 0 14px; display: block;
}
.cpe-woo-archive .woocommerce-loop-product__title {
  font-family: Montserrat, sans-serif !important; font-size: 18px !important; font-weight: 700 !important;
  color: #000 !important; line-height: 1.3 !important; padding: 0 0 12px; margin: 0;
}
.cpe-woo-archive li.product .price, .cpe-woo-archive li.product .star-rating { display: none; }  /* catálogo YITH */
.cpe-woo-archive li.product .button {
  display: inline-block; background: #AC242C; color: #fff !important; font-family: Montserrat, sans-serif;
  font-size: 16px; font-weight: 600; line-height: 1; padding: 12px 26px; border-radius: 20px; text-decoration: none;
}
.cpe-woo-archive li.product .button:hover { background: #B4242C; }

/* ================= WOO SINGLE (ficha de producto) — CPE-005 =================
   gallery (izq) + summary (der) + botón WhatsApp "Solicitar presupuesto" (hook en functions.php). */
.cpe-woo-single { padding: 50px 20px 70px; }
.cpe-woo-single div.product {
  max-width: 1140px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: start;
}
.cpe-woo-single .woocommerce-product-gallery { width: 100% !important; margin: 0; }
.cpe-woo-single .woocommerce-product-gallery img { border-radius: 12px; }
.cpe-woo-single .summary { margin: 0; }
.cpe-woo-single .product_title {
  font-family: Montserrat, sans-serif !important; font-weight: 700 !important; font-size: 32px !important;
  line-height: 1.2 !important; color: #000 !important; margin: 0 0 18px;
}
.cpe-woo-single .woocommerce-product-details__short-description {
  font-family: Montserrat, sans-serif; font-size: 18px; line-height: 1.6; color: #414141;
}
.cpe-woo-single .woocommerce-product-details__short-description p { margin: 0 0 12px; }
.cpe-woo-single .price, .cpe-woo-single form.cart, .cpe-woo-single .single_add_to_cart_button { display: none !important; }  /* catálogo YITH */
.cpe-woo-single a.cpe-btn, .cpe-woo-single a.cpe-woo-wa {
  display: inline-flex; align-items: center; margin-top: 22px;
  background: #AC242C; color: #fff; font-family: Montserrat, sans-serif; font-size: 18px; font-weight: 600;
  line-height: 1; text-decoration: none; padding: 15px 30px; border-radius: 20px;
}
.cpe-woo-single a.cpe-woo-wa:hover { background: #B4242C; }
.cpe-woo-single .product_meta, .cpe-woo-single .woocommerce-tabs { display: none; }  /* limpio como el vivo */

/* ================= PÁGINAS LEGALES (Complianz) =================
   aviso-legal/privacidad/cookies NO son Elementor: su post_content ya es el shortcode
   [cmplz-document ...] y Complianz lo renderiza. page.html lo mete en un post-content
   "constrained" (contentSize 1140px) → sale con chrome y contenido al swap sin tocar nada.
   Aquí solo damos ancho legible + ritmo de lectura (1140 es ancho para texto legal).
   NO se edita el post_content en vivo (no hay Elementor detrás que las mantenga dormidas). */
.cmplz-document {
  max-width: 900px;
  margin: 0 auto;
  padding: 40px 0 70px;
  font-family: Montserrat, sans-serif;
  color: #414141;
}
.cmplz-document h1 { font: 700 42px/1.15 Montserrat, sans-serif; color: #000; margin: 0 0 24px; }
.cmplz-document h2 { font: 700 28px/1.25 Montserrat, sans-serif; color: #000; margin: 34px 0 14px; }
.cmplz-document h3 { font: 700 20px/1.3 Montserrat, sans-serif; color: #000; margin: 24px 0 10px; }
.cmplz-document p, .cmplz-document li { font-size: 17px; line-height: 1.65; }
.cmplz-document a { color: #B4242C; }

/* ================= LANDING CATEGORÍA (CPE-008 · Enmascarado 514) =================
   Landing rica de la categoría product_cat/48 servida por la plantilla de término
   taxonomy-product_cat-enmascarado-de-vehiculos.html. Reutiliza de home.css el hero,
   iconos, split morado, cta morada, grids Woo (.cpe-band--woo/--featured-grid) y bullets.
   Aquí solo lo específico: lead+cta en el hero de título, tarjetas de tipo de producto,
   rejilla de ventajas (icono+frase) y FAQ nativo con <details> (sin JS). */

/* hero de título con lead + botón (el de las otras páginas solo lleva H1/sub) */
.cpe-hero--page .cpe-hero__lead {
  font-family: Montserrat, sans-serif;
  font-size: 19px; line-height: 1.55; color: #fff;
  max-width: 820px; margin: 18px auto 0; opacity: .95;
}
.cpe-hero--page .cpe-hero__cta { margin-top: 26px; }

/* --- catálogo de 3 columnas (grid Woo curado, ids del vivo) --- */
.cpe-band--cols-3 ul.products { grid-template-columns: repeat(3, 1fr) !important; }

/* --- tarjetas de tipo de producto (Film / Papel) --- */
.cpe-types-band { padding: 10px 20px 60px; }
.cpe-types { max-width: 1140px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.cpe-type-card {
  background: #fff; border-radius: 16px; box-shadow: 0 6px 20px rgba(0, 0, 0, .08);
  overflow: hidden; display: flex; flex-direction: column;
}
.cpe-type-card img { width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block; }
.cpe-type-card__body { padding: 28px 28px 30px; display: flex; flex-direction: column; flex: 1; }
.cpe-type-card__t {
  font-family: Montserrat, sans-serif !important; font-weight: 700 !important;
  font-size: 24px !important; line-height: 1.2 !important; color: #000 !important; margin: 0 0 16px;
}
.cpe-type-card__body p { font-family: Montserrat, sans-serif; font-size: 17px; line-height: 1.55; color: #414141; margin: 0 0 12px; }
.cpe-type-card__body ul { margin: 0 0 18px; padding-left: 20px; list-style: disc; }
.cpe-type-card__body li { font-family: Montserrat, sans-serif; font-size: 16px; line-height: 1.5; color: #414141; margin-bottom: 10px; }
.cpe-type-card__body li b { color: #000; }
.cpe-band .cpe-type-card__body a.cpe-btn { margin-top: auto; align-self: flex-start; }

/* --- ventajas (icono + frase, 5 col) --- */
.cpe-adv-band { padding: 20px 20px 66px; }
.cpe-adv { max-width: 1140px; margin: 34px auto 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; }
.cpe-adv__item { text-align: center; }
.cpe-adv__item img { width: 64px; height: 64px; object-fit: contain; margin: 0 auto 16px; display: block; }
.cpe-adv__item p { font-family: Montserrat, sans-serif; font-size: 16px; line-height: 1.45; color: #414141; margin: 0; }
.cpe-adv__item b, .cpe-adv__item span { font-weight: 600; color: #000; }

/* --- FAQ acordeón nativo (<details>/<summary>, sin JS) --- */
.cpe-faq-band { padding: 10px 20px 72px; }
.cpe-faq { max-width: 900px; margin: 34px auto 0; }
.cpe-faq__item { border-bottom: 1px solid #e3e3e3; }
.cpe-faq__item summary {
  list-style: none; cursor: pointer; position: relative;
  padding: 22px 46px 22px 4px;
  font-family: Montserrat, sans-serif; font-weight: 600; font-size: 19px; line-height: 1.35; color: #000;
}
.cpe-faq__item summary::-webkit-details-marker { display: none; }
.cpe-faq__item summary::after {
  content: "+"; position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  font-size: 28px; font-weight: 400; color: #B4242C; line-height: 1;
}
.cpe-faq__item[open] summary::after { content: "\2212"; }  /* − */
.cpe-faq__answer { padding: 0 4px 24px; }
.cpe-faq__answer p { font-family: Montserrat, sans-serif; font-size: 17px; line-height: 1.6; color: #414141; margin: 0; }

/* ================= WOO MI CUENTA (123) — CPE-005 =================
   La page 123 es Gutenberg plano (post_content = [woocommerce_my_account], NO Elementor):
   page.html renderiza el shortcode y Woo pinta login/registro/panel. Aquí solo damos
   coherencia de marca (Montserrat + rojo) sobre el markup nativo de Woo. Sin venta (YITH),
   así que la cuenta es login/datos, sin pedidos de compra reales. */
.woocommerce-account .woocommerce {
  max-width: 1000px; margin: 0 auto; padding: 50px 20px 70px; font-family: Montserrat, sans-serif; color: #414141;
}
.woocommerce-account h2, .woocommerce-account h3, .woocommerce-account legend {
  font-family: Montserrat, sans-serif !important; font-weight: 700 !important; color: #000 !important;
}
.woocommerce-account .woocommerce form .form-row label,
.woocommerce-account label { font-family: Montserrat, sans-serif; font-weight: 600; font-size: 16px; color: #000; }
.woocommerce-account input[type="text"], .woocommerce-account input[type="email"],
.woocommerce-account input[type="password"], .woocommerce-account input[type="tel"] {
  width: 100%; box-sizing: border-box; font-family: Montserrat, sans-serif; font-size: 17px; color: #414141;
  padding: 13px 16px; border: 1px solid #d5d5d5; border-radius: 12px; background: #fff;
}
.woocommerce-account input:focus { outline: none; border-color: #B4242C; }
.woocommerce-account .button, .woocommerce-account button[type="submit"], .woocommerce-account .woocommerce-Button {
  background: #AC242C !important; color: #fff !important; font-family: Montserrat, sans-serif;
  font-size: 17px; font-weight: 600; border: none; padding: 13px 30px; border-radius: 20px; cursor: pointer;
}
.woocommerce-account .button:hover, .woocommerce-account button[type="submit"]:hover { background: #B4242C !important; }
/* navegación del panel (cuando el usuario está logueado) */
.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0 0 24px; padding: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation li a {
  font-family: Montserrat, sans-serif; font-weight: 600; color: #2C2464; text-decoration: none;
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { color: #B4242C; }

/* ===================== MÓVIL (≤767px) ===================== */
@media (max-width: 767px) {
  .cpe-hero--page { min-height: 0; padding: 56px 20px; }
  .cpe-hero--page .cpe-hero__lead { font-size: 17px; }

  .cpe-band--cols-3 ul.products { grid-template-columns: repeat(2, 1fr) !important; }
  .cpe-types { grid-template-columns: 1fr; gap: 24px; }
  .cpe-adv { grid-template-columns: repeat(2, 1fr); gap: 30px 16px; margin-top: 26px; }
  .cpe-faq { margin-top: 26px; }
  .cpe-faq__item summary { font-size: 17px; padding: 20px 40px 20px 4px; }
  .cpe-hero--page .cpe-hero__h1 { font-size: 28px !important; }   /* v2 (vivo: 40px) */
  .cpe-hero--page .cpe-hero__sub { font-size: 18px !important; }

  .cpe-prose-band { padding: 44px 20px; }
  .cpe-prose p { font-size: 17px; }

  .cpe-steps-band { padding: 44px 20px; }
  .cpe-steps { grid-template-columns: 1fr; gap: 16px; margin-top: 26px; }
  .cpe-step { padding: 26px 22px; }

  .cmplz-document { padding: 30px 4px 50px; }
  .cmplz-document h1 { font-size: 28px; }
  .cmplz-document h2 { font-size: 22px; }

  .cpe-contact-band { padding: 44px 20px; }
  .cpe-contact__intro p { font-size: 17px; }
  .cpe-contact-cards { grid-template-columns: 1fr; gap: 26px; }
  .cpe-map iframe { height: 300px; }

  .cpe-woo-archive ul.products { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .cpe-woo-single div.product { grid-template-columns: 1fr; gap: 28px; }
  .cpe-woo-single .product_title { font-size: 26px !important; }

  .cpe-feature-band { padding: 44px 20px; }
  .cpe-feature { grid-template-columns: 1fr; gap: 28px; }
  /* imagen siempre arriba en móvil, sin importar el lado en desktop */
  .cpe-feature__media { order: 0 !important; }
  .cpe-feature__h2 { font-size: 24px !important; }                /* v2 */
  .cpe-feature__text p { font-size: 17px; }                      /* v2 */
}