/*
  Rediseño 2026-10 (v3) — ajustes sobre prototipo.css.
  prototipo.css es el CSS del prototipo tal cual (acotado a body.v3); aquí va
  la paleta, lo que cambia al pasar a WordPress y lo que el prototipo no tenía.
*/

/* ---------- Paleta A «Petróleo profundo y rojo» (el cobre pasó a rojo el 2026-10-07) + tipografía «Placa técnica» ---------- */
:root {
  --global-palette1: #c62828; /* rojo: botones y precios (antes cobre #a84c27) */
  --global-palette2: #9b1c1c; /* rojo hondo: hover y asistente */
  --global-palette3: #0d3440; /* petróleo profundo */
  --global-palette4: #232826; /* texto */
  --global-palette5: #575c58; /* texto medio */
  --global-palette6: #b9b5ad; /* líneas */
  --global-palette7: #e6e2db; /* gris cálido */
  --global-palette8: #f5f3ef; /* fondo claro */
  --global-palette9: #ffffff;
  --global-heading-font-family: 'Barlow Semi Condensed', 'Arial Narrow', sans-serif;
  --global-body-font-family: 'Barlow', 'Helvetica Neue', Arial, sans-serif;
  --petroleo-claro: #a9c2c6;
  --petroleo-linea: rgb(255 255 255 / 0.16);
  --petroleo-hondo: #0a2a34;
  --cobre-claro: #f08a7c; /* rojo claro sobre fondo oscuro */
  --sombra: 0 10px 30px rgb(13 52 64 / 0.16), 0 2px 6px rgb(13 52 64 / 0.08);
  --radio: 4px;
  --radio-foto: 6px;
  --cab-h: 88px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* El resto del tema (catálogo, ficha, carrito, checkout) lee estos tokens:
     con cambiarlos aquí hereda la paleta nueva sin tocar su CSS. */
  --t-primario: #0d3440;
  --t-primario-050: #eaf0f1;
  --t-primario-900: #0a2a34;
  --t-acento: #c62828;
  --t-acento-050: #fdeeec;
  --t-acento-200: #f08a7c;
  --t-acento-900: #9b1c1c;
  --t-superficie: #f5f3ef;
  --t-texto: #232826;
  --t-suave: #575c58;
  --t-borde: #e6e2db;
  --t-overlay: rgb(10 42 52 / 0.62);
  --t-inverso-suave: #a9c2c6;
  --t-font-titulo: 'Barlow Semi Condensed', 'Arial Narrow', sans-serif;
  --t-font-cuerpo: 'Barlow', 'Helvetica Neue', Arial, sans-serif;
  --t-radio-sm: 8px;
  --t-radio: 12px;
  --t-maxw: 1440px;
  --t-focus: 0 0 0 3px rgb(198 40 40 / 0.45);
}

html { scroll-padding-top: 128px; }
body.v3 {
  background: var(--global-palette9);
  color: var(--global-palette4);
  font: 400 1.0625rem / 1.55 var(--global-body-font-family);
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased;
}
.v3 h1, .v3 h2, .v3 h3 {
  font-family: var(--global-heading-font-family);
  font-weight: 700;
  color: var(--global-palette3);
  line-height: 1.08;
  text-wrap: balance;
  letter-spacing: 0;
}
.v3 :focus-visible { outline: 2px solid var(--global-palette1); outline-offset: 2px; }
.v3 [hidden] { display: none !important; }
/* Contenedor de todo el sitio: a todo el ancho, con los mismos márgenes que el hero. */
:where(.v3) .wrap { width: 100%; max-width: 1568px; margin-inline: auto; padding-inline: 64px; }
.v3 .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* El tema viejo pinta los íconos en cobre; aquí toman el color del texto. */
.v3 .t-icon, .v3 svg.t-icon { color: inherit; stroke: currentColor; }
/* Ni borde cobre de «destacado» ni insignias del tema viejo sobre las tarjetas nuevas. */
.v3 ul.products li.tarjeta.featured { border-top: 0; }
.v3 .v3-oculto { display: none !important; }
.v3 .t-icon { width: 20px; height: 20px; flex: none; }

/* ---------- Entradas animadas: solo arrancan ocultas si hay JavaScript ---------- */
.v3-js .v3 .hero__h1:not(.es-visible) .hero__letra { opacity: 0; transform: translateX(-18px); }
.v3 .aparece { transition-duration: 1s; }
.v3-js .v3 .aparece:not(.es-visible) { opacity: 0; }
html:not(.v3-js) .v3 .sube { opacity: 1; transform: none; }

/* ---------- Precio: WooCommerce envuelve el monto; el contenedor manda ---------- */
.v3 :is(.plan__q, .placa__q, .resultado__q) .woocommerce-Price-amount { font: inherit; color: inherit; }
.v3 :is(.plan__q, .placa__q, .resultado__q) { font-family: var(--global-heading-font-family); font-weight: 700; }
.v3 .placa__q { color: var(--global-palette1); }
.v3 .tarjeta .precio { font-family: var(--global-heading-font-family); font-weight: 700; color: var(--global-palette1); white-space: nowrap; }
.v3 .tarjeta .precio del { font-size: 0.7em; color: var(--global-palette5); }
.v3 .tarjeta .precio ins { text-decoration: none; }

/* ---------- Cabecera ---------- */
.v3 .marca { display: inline-flex; align-items: center; }
.v3 .marca img { display: block; width: auto; height: 30px; }
/* Cabecera: logo completo de Invercomer (con los arcos, sin recortar) + Goliat. */
.v3 .marcas { display: flex; align-items: center; gap: 16px; flex: none; }
.v3 .marcas .marca img { height: 60px; }
.v3 .marcas__goliat { display: block; width: auto; height: 46px; }
.v3 .marcas__linea { width: 1px; height: 40px; background: rgb(255 255 255 / 0.25); }
.v3 .cab__barra { padding-block: 6px; }
.v3 .hero__pausa { top: 120px; }
.v3 .cab .icono-cab, .v3 .cab .carrito-btn { color: var(--global-palette9); }
.v3 .cab__der .t-icon { width: 19px; height: 19px; }
.v3 .carrito-btn { text-decoration: none; }
.v3 .carrito-btn .t-cart-count:not(:empty),
.v3 .icono-cab .t-compare-count:not(:empty) {
  position: absolute;
  top: 4px;
  right: 2px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 10px;
  background: var(--global-palette1);
  color: var(--global-palette9);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}
.v3 .icono-cab .t-compare-count:not(:empty) { top: 2px; right: -4px; }
.v3 .t-cart-count:empty, .v3 .t-compare-count:empty { display: none; }
.v3 .cab__buscar { position: relative; }
.v3 .cab__buscar .t-icon { width: 18px; height: 18px; }
.v3 .cab__buscar .t-suggest {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 5;
  border-radius: 12px;
  background: var(--global-palette9);
  color: var(--global-palette4);
  box-shadow: var(--sombra);
  overflow: hidden;
}
.v3 .cab__buscar input[type=search] {
  padding: 0;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  color: var(--global-palette9) !important;
}
.v3 .cab--solida .cab__barra { background: rgb(13 52 64 / 0.9); }
/* Páginas interiores: la barra es fija y el contenido arranca debajo. */
.v3-interior #t-main { padding-top: 136px; }

/* ---------- Hero ---------- */
.v3 .hero__pausa .hero__play-i { display: none; }
.v3 .hero__pausa.es-pausado .hero__play-i { display: block; }
.v3 .hero__pausa.es-pausado .hero__pausa-i { display: none; }
.v3 .hero .btn { text-decoration: none; }

/* ---------- Listas de productos: la tarjeta vive en un <ul class="products"> ---------- */
.v3 ul.products.rejilla, .v3 .t-catalog-results ul.products {
  margin: 0;
  padding: 0;
  list-style: none;
}
.v3 ul.products::before, .v3 ul.products::after { display: none; }
.v3 ul.products li.tarjeta { width: auto; margin: 0; float: none; padding: 0; border: 0; }
.v3 .t-catalog-results ul.products {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px 24px;
  align-items: start;
}
.v3 .tarjeta .btn { text-decoration: none; }
.v3 .tarjeta .btn.loading { opacity: 0.6; pointer-events: none; }
.v3 .tarjeta .added_to_cart { display: none; }
.v3 .tarjeta .datos { margin: 0; padding: 0; list-style: none; }
.v3 .tarjeta .foto--pendiente { display: grid; place-items: center; aspect-ratio: 16 / 10; }
.v3 .rejilla--destacados .foto--pendiente { aspect-ratio: 1; }
.v3 .chequeo li .t-icon { width: 15px; height: 15px; flex: none; color: var(--global-palette3); transform: translateY(2px); }
.v3 .chequeo__acc .btn--line + .btn--line { grid-column: 2; }

/* Comparar: el botón de tienda.js con aspecto de casilla. */
.v3 .comparar {
  border: 0;
  padding: 0;
  background: none;
  font: inherit;
  font-size: 0.875rem;
}
.v3 .comparar__caja {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--global-palette6);
  border-radius: 3px;
  background: var(--global-palette9);
}
.v3 .comparar[aria-pressed='true'] .comparar__caja { border-color: var(--global-palette3); background: var(--global-palette3); }
.v3 .comparar[aria-pressed='true'] .comparar__caja::after {
  content: '';
  width: 9px;
  height: 5px;
  border: solid var(--global-palette9);
  border-width: 0 0 2px 2px;
  transform: translateY(-1px) rotate(-45deg);
}
.v3 .comparar[aria-pressed='true'] { color: var(--global-palette3); }

/* ---------- Precios de instalación ---------- */
.v3 .precios__foto { display: block; color: inherit; text-decoration: none; }
.v3 .plan__marca .t-icon { width: 12px; height: 12px; stroke-width: 2.5; }
.v3 .plan .btn { text-decoration: none; }

/* ---------- Asistente ---------- */
.v3 .asistente__panel h3:focus { outline: none; }
.v3 .resultado { margin: 0; padding: 0; list-style: none; }
.v3 .asistente__mas { margin-top: 8px; color: var(--global-palette9); }
.v3 .asistente .btn--texto { color: var(--global-palette9); }

/* ---------- Asesoría ---------- */
.v3 .asesoria .btn { text-decoration: none; }
/* Los campos del tema viejo llevan un selector muy específico (input:not(...)×3):
   se repite aquí con el mismo peso para que mande el diseño del formulario. */
.v3.t-site .contacto__campo :is(input, select, textarea):not([type=checkbox]):not([type=radio]):not([type=submit]) {
  width: 100%;
  min-height: 52px;
  padding: 12px 16px;
  border: 0;
  border-radius: 10px;
  background-color: rgb(245 243 239 / 0.94);
  color: var(--global-palette4);
  box-shadow: none;
  font-size: 1rem;
}
.v3.t-site .contacto__campo select:not([type=checkbox]):not([type=radio]):not([type=submit]) {
  appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23232826' stroke-width='1.8'%3E%3Cpath d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
}
.v3.t-site .contacto__campo textarea:not([type=checkbox]):not([type=radio]):not([type=submit]) { min-height: 84px; }
.v3.t-site .contacto__tel input:not([type=checkbox]):not([type=radio]):not([type=submit]) { min-height: 0; border-radius: 0; background: transparent; }
.v3.t-site .cab__buscar input:not([type=checkbox]):not([type=radio]):not([type=submit]) {
  flex: 1;
  min-width: 0;
  min-height: 42px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--global-palette9);
}
.v3.t-site .cab__buscar input::placeholder { color: rgb(255 255 255 / 0.7); }

/* ---------- Pie ---------- */
.v3 .pie { padding-block: 56px 32px; }
.v3 .marca--pie img { display: block; width: auto; height: 34px; }
.v3 .pie__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 24px;
  margin-top: 48px;
  padding-top: 20px;
  border-top: 1px solid var(--petroleo-linea);
  font-size: 0.8125rem;
}
.v3 .pie__legal nav { display: flex; gap: 20px; }
.v3 .pie__legal a { color: var(--petroleo-claro); }
.v3 .pie__wa svg { flex: none; }

/* El botón flotante de WhatsApp del tema queda; solo sube cuando hay bandeja de comparar. */
.v3 .t-compare-tray { border-radius: 12px; }

/* ---------- Tableta y celular ---------- */
@media (max-width: 1080px) {
  .v3 .t-catalog-results ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* La imagen de WordPress trae alto propio: el recuadro lo pone el CSS. */
.v3 .tarjeta__foto .foto { height: auto; }
@media (max-width: 860px) {
  .v3 .rejilla--destacados .tarjeta__foto { position: relative; min-height: 100%; }
  .v3 .rejilla--destacados .tarjeta__foto .foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .v3 .marcas { gap: 10px; }
  .v3 .marcas .marca img { height: 40px; }
  .v3 .marcas__goliat { height: 28px; }
  .v3 .marcas__linea { height: 30px; }
  .v3 .hero__pausa { top: 96px; }
  .v3-interior #t-main { padding-top: 104px; }
  .v3 .t-catalog-results ul.products { grid-template-columns: 1fr; gap: 16px; }
  .v3 .solo-ancho { display: none; }
  .v3 .solo-cel { display: inline; }
}
@media (prefers-reduced-motion: reduce) {
  .v3-js .v3 .hero__h1:not(.es-visible) .hero__letra, .v3-js .v3 .aparece:not(.es-visible) { opacity: 1; transform: none; }
}

/* ---------- Tarjetas dentro de ul.products: el CSS de WooCommerce del tema viejo pesa más ---------- */
.v3.t-site ul.products li.tarjeta h3 {
  margin: 0;
  font-family: var(--global-heading-font-family);
  font-weight: 700;
  font-size: 1.4375rem;
  line-height: 1.08;
  color: var(--global-palette3);
}
.v3.t-site ul.products li.tarjeta .btn--main,
.v3.t-site ul.products li.tarjeta .btn--main:hover { color: var(--global-palette9); }
.v3.t-site ul.products li.tarjeta .btn--line { color: var(--global-palette4); }
.v3.t-site ul.products li.tarjeta .btn--line:hover { color: var(--global-palette3); }
@media (max-width: 860px) {
  .v3.t-site ul.products li.tarjeta h3 { font-size: 1.3125rem; }
}

/* Con los dos logos la barra queda justa: el botón de WhatsApp no se parte y,
   en el celular, se va de la barra (queda el botón verde flotante). */
.v3 .cab__wa { white-space: nowrap; }
@media (max-width: 1560px) {
  .v3 .v3-menu { gap: 18px; }
  /* Solo el ícono; el texto queda para lectores de pantalla. */
  .v3 .cab__wa { padding: 0 12px; min-width: 44px; justify-content: center; }
  .v3 .cab__wa span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .v3 .cab__wa svg { width: 20px; height: 20px; }
}
@media (max-width: 480px) {
  .v3 .cab__barra .cab__wa { display: none; }
  .v3 .cab__barra { gap: 8px; }
}
/* La barra usa el mismo ancho máximo que el contenido (1568 px), no 1440. */
.v3 .cab__barra, .v3 .cab__panel { max-width: 1440px; }
@media (min-width: 1561px) {
  .v3 .cab__barra, .v3 .cab__panel { max-width: 1568px; }
}


/* ==========================================================================
   Páginas interiores con el estilo de la portada (2026-10-07)
   Tienda, categorías, búsqueda, páginas, carrito, checkout, mi cuenta y ficha:
   la barra flota sobre una franja petróleo —como sobre el video de la
   portada— con el título en blanco; abajo, fondo claro como «destacados».
   ========================================================================== */
.v3 .asistente { --ladrillo-claro: #fbd9d4; }

.v3-interior #t-main { padding-top: 0; }
/* Franja: arranca detrás de la barra fija y llega a todo el ancho aunque el
   contenedor sea angosto (sombra + recorte, sin tocar el marcado). */
.v3-interior :is(.t-catalog-heading, .t-page-heading, .t-checkout-steps),
.v3-interior .t-product-page > .woocommerce-breadcrumb {
  position: relative;
  background: var(--global-palette3);
  box-shadow: 0 0 0 100vmax var(--global-palette3);
  clip-path: inset(0 -100vmax);
  color: var(--petroleo-claro);
}
.v3-interior .t-catalog-heading { padding-block: 168px 64px; }
.v3-interior .t-page-heading { margin: 0 0 56px; padding-block: 168px 56px; }
.v3-interior .t-checkout-steps { padding-top: 160px; }
.v3-interior .t-checkout-steps { padding-bottom: 20px; }
/* -1px: las dos franjas se tocan sin dejar la costura de antialias. */
.v3-interior .t-checkout-steps + .t-page-heading { margin-top: -1px; padding-top: 1px; }
.v3-interior .t-checkout-steps ol { margin: 0; color: var(--petroleo-claro); }
.v3-interior .t-checkout-steps a { color: var(--petroleo-claro); }
.v3-interior .t-checkout-steps [aria-current=step] { color: var(--global-palette9); }

.v3-interior :is(.t-catalog-heading, .t-page-heading) h1 {
  margin: 0;
  max-width: 900px;
  color: var(--global-palette9);
  font-size: clamp(2.5rem, 4.6vw, 4rem);
  line-height: 1;
}
.v3-interior .t-catalog-heading .t-kicker {
  margin: 0 0 12px;
  color: var(--cobre-claro);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.v3-interior .t-catalog-heading p:last-child,
.v3-interior .t-catalog-heading .term-description { max-width: 620px; margin: 16px 0 0; color: var(--petroleo-claro); font-size: 1.125rem; }
.v3-interior :is(.t-catalog-heading, .t-product-page) .woocommerce-breadcrumb,
.v3-interior :is(.t-catalog-heading, .t-product-page) .woocommerce-breadcrumb a { color: var(--petroleo-claro); }
.v3-interior .t-catalog-heading .woocommerce-breadcrumb { margin-bottom: 28px; }

/* Ficha: franja delgada con la ruta, como respiro bajo la barra. */
.v3-interior .t-product-page { padding-top: 0; }
.v3-interior .t-product-page > .woocommerce-breadcrumb { margin: 0 0 48px; padding-block: 140px 22px; }

/* Catálogo sobre el gris cálido de «destacados»; filtros y bandeja en blanco. */
.v3-interior .t-commerce:has(.t-catalog-layout) { background: var(--global-palette8); }
.v3-interior .t-catalog-layout { padding-block: 56px 88px; }
.v3-interior .t-filters { background: var(--global-palette9); border: 0; border-radius: var(--radio-foto); box-shadow: none; }
.v3-interior .t-catalog-results ul.products li.tarjeta {
  padding: 12px 12px 16px;
  background: var(--global-palette9);
  border-radius: var(--radio-foto);
}

/* Páginas de texto (envíos, políticas…): una columna que se lee, títulos a escala. */
.v3-interior .t-page-content { padding-bottom: 88px; }
.v3-interior:not(.woocommerce-page) .t-page-content { max-width: 760px; font-size: 1.125rem; }
.v3-interior:not(.woocommerce-page) .t-page-content h2 { margin: 48px 0 12px; font-size: clamp(1.625rem, 2.4vw, 2.125rem); }
.v3-interior:not(.woocommerce-page) .t-page-content h3 { margin: 32px 0 8px; font-size: 1.375rem; }
.v3-interior:not(.woocommerce-page) .t-page-content > :first-child { margin-top: 0; }

/* Carrito y checkout: el título de cada bloque con la letra de la portada. */
.v3-interior.woocommerce-page .t-page-content h2,
.v3-interior.woocommerce-page .t-page-content h3 { font-family: var(--global-heading-font-family); color: var(--global-palette3); }

@media (max-width: 860px) {
  .v3-interior .t-catalog-heading { padding-block: 124px 40px; }
  .v3-interior .t-page-heading { margin-bottom: 32px; padding-block: 124px 36px; }
  .v3-interior .t-checkout-steps { padding-top: 120px; }
  .v3-interior .t-product-page > .woocommerce-breadcrumb { margin-bottom: 24px; padding-block: 108px 16px; }
  .v3-interior .t-catalog-layout { padding-block: 32px 56px; }
  .v3-interior .t-catalog-results ul.products li.tarjeta { padding: 10px; }
  .v3-interior .t-page-content { padding-bottom: 56px; }
}

/* Panel de Zuzelly (/panel/): cabecera nueva sobre la franja petróleo; el panel sigue igual debajo. */
.v3-interior .t-inst-main { padding-top: 0; }
.v3-interior .t-inst-main > .t-inst-wrap { padding-top: 40px; }
.v3-interior .t-inst-main::before {
  content: '';
  display: block;
  height: 120px;
  background: var(--global-palette3);
}
/* «Ver la tienda» no se esconde como el de WhatsApp: es el único botón de la barra. */
.v3 .cab__wa--fijo, .v3 .cab__barra .cab__wa--fijo { display: inline-flex; padding: 0 18px; min-width: 0; }
.v3 .cab__wa--fijo span { position: static; width: auto; height: auto; clip-path: none; }
@media (max-width: 860px) {
  .v3-interior .t-inst-main::before { height: 92px; }
  .v3-interior .t-inst-main > .t-inst-wrap { padding-top: 24px; }
}