/*
Theme Name: Patte Child — Puppy King 305
Theme URI: https://pk.vph305.com/
Description: Child theme de Patte para Puppy King 305 — catalogo de cachorros premium en Miami, FL. "Where Royalty Becomes Loyalty". Todo el codigo personalizado del sitio vive aqui; el theme padre nunca se edita.
Author: Puppy King 305
Author URI: https://pk.vph305.com/
Template: patte
Version: 1.1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: patte-child
Tags: pet shop, puppies, woocommerce, elementor
*/

/* =============================================================================
   FASE 2 — BRANDING GLOBAL

   Orden de carga:
     1. pxl-style      (patte/assets/css/style.css + :root inline del theme)
     2. pxl-base       (patte/style.css)
     3. pk-brand       (assets/css/puppy-king-brand.css)  <- tokens de marca
     4. pk-child       (este archivo)                     <- overrides
     5. pk-components  (assets/css/pk-components.css)     <- marquee, etc.

   Sobre !important: este archivo NO usa ninguno. Los overrides ganan por orden
   de carga (empate de especificidad) o por selectores con ID
   (#pxl-header-elementor = 1 ID), que superan a las reglas de Elementor
   (.elementor-element-xxxx = 1-2 clases).
   ========================================================================== */


/* -----------------------------------------------------------------------------
   1. REMAPEO DE LAS VARIABLES DEL THEME PADRE

   Patte imprime un :root inline (patte_inline_styles) con estas variables y las
   usa en cientos de reglas. Redefinirlas aqui rebrandea el theme completo de un
   golpe, sin pelear selector por selector.

   Equivalente en wp-admin: Theme Options -> Colors. Se deja en CSS para que el
   branding viaje con el codigo y no dependa de la base de datos.
-------------------------------------------------------------------------------- */
:root {
  --primary-color: var(--pk-black);          /* era #000000 — titulos, acentos oscuros */
  --secondary-color: var(--pk-magenta);      /* era #fa441d — botones, estados activos */
  --secondary-color-rgb: var(--pk-magenta-rgb);
  --third-color: var(--pk-body-ink);         /* era #555555 — texto de cuerpo */
  --fourth-color: var(--pk-gold);            /* era #feda46 — acento decorativo */
  --fifth-color: var(--pk-gold-light);       /* era #940c69 */
  --link-color: var(--pk-link-on-light);
  --link-color-hover: var(--pk-magenta);
  --link-color-active: var(--pk-magenta);
}


/* -----------------------------------------------------------------------------
   2. BASE: cuerpo, titulos, enlaces, seleccion
-------------------------------------------------------------------------------- */
/* Base calida, como el demo original. El negro se reserva para header, footer,
   barra de confianza y secciones destacadas: ese contraste es lo que hace que
   el negro se lea premium en vez de vacio. */
body,
#pxl-main {
  color: var(--pk-body-ink);
  background-color: var(--pk-surface);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  color: var(--pk-heading-on-light);
  letter-spacing: var(--pk-tracking-display);
}

/* Enlaces de contenido: dorado legible sobre claro, magenta al hover */
a {
  color: var(--pk-link-on-light);
}

a:hover,
a:focus {
  color: var(--pk-magenta);
}

/* Foco visible para teclado (accesibilidad) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--pk-gold);
  outline-offset: 2px;
}

::selection {
  background-color: var(--pk-magenta);
  color: var(--pk-white);
}

body::-webkit-scrollbar-thumb {
  background: var(--pk-gold);
}

body::-webkit-scrollbar-track {
  background: var(--pk-black);
}


/* -----------------------------------------------------------------------------
   3. HEADER EN NEGRO

   El header es una plantilla de Elementor dentro de #pxl-header-elementor.
   Se pinta el wrapper de negro y se transparentan las secciones internas de
   Elementor, que traian el fondo claro del demo.

   Si mas adelante quieres una seccion del header con fondo propio (una imagen,
   por ejemplo), dale la clase pk-keep-bg en Elementor y se respeta.
-------------------------------------------------------------------------------- */
#pxl-header-elementor,
#pxl-header-default,
#pxl-header-mobile,
.pxl-header-elementor-main,
.pxl-header-elementor-sticky,
.pxl-header-elementor-mobile {
  background-color: var(--pk-black);
  color: var(--pk-white);
}

#pxl-header-elementor .elementor-section:not(.pk-keep-bg),
#pxl-header-elementor .e-con:not(.pk-keep-bg),
#pxl-header-elementor .elementor-container:not(.pk-keep-bg) {
  background-color: transparent;
}

/* Linea dorada fina que separa el header del contenido */
#pxl-header-elementor,
#pxl-header-default {
  border-bottom: 1px solid var(--pk-border);
}

/* Textos y titulos dentro del header */
#pxl-header-elementor h1,
#pxl-header-elementor h2,
#pxl-header-elementor h3,
#pxl-header-elementor h4,
#pxl-header-elementor h5,
#pxl-header-elementor h6,
#pxl-header-elementor .elementor-heading-title,
#pxl-header-elementor p,
#pxl-header-elementor span,
#pxl-header-elementor i {
  color: var(--pk-white);
}

/* Header pegajoso al hacer scroll: negro solido con sombra */
#pxl-header-elementor.is-sticky .pxl-header-elementor-sticky {
  background-color: var(--pk-black);
  box-shadow: 0 6px 24px rgba(var(--pk-black-rgb), 0.55);
}

/* Boton hamburguesa en dorado */
.pxl-nav-mobile .pxl-nav-mobile-button span {
  background: var(--pk-gold);
}


/* -----------------------------------------------------------------------------
   4. MENU DE NAVEGACION
   Fondo negro (lo hereda del header), item en blanco, hover dorado,
   item ACTIVO en dorado con subrayado dorado.
-------------------------------------------------------------------------------- */
#pxl-header-elementor .pxl-menu-primary > li > a,
#pxl-header-default .pxl-menu-primary > li > a,
.pxl-header-nav .pxl-menu-primary > li > a {
  color: var(--pk-white);
  font-family: var(--pk-font-display);
  letter-spacing: var(--pk-tracking-label);
  text-transform: uppercase;
}

#pxl-header-elementor .pxl-menu-primary > li > a:hover,
#pxl-header-default .pxl-menu-primary > li > a:hover,
.pxl-header-nav .pxl-menu-primary > li > a:hover {
  color: var(--pk-gold);
}

/* Item activo — dorado (el padre lo pintaba con --secondary-color) */
#pxl-header-elementor .pxl-menu-primary > li.current_page_item > a,
#pxl-header-elementor .pxl-menu-primary > li.current-menu-item > a,
#pxl-header-elementor .pxl-menu-primary > li.current_page_ancestor > a,
#pxl-header-elementor .pxl-menu-primary > li.current-menu-ancestor > a,
#pxl-header-default .pxl-menu-primary > li.current_page_item > a,
#pxl-header-default .pxl-menu-primary > li.current-menu-item > a,
#pxl-header-default .pxl-menu-primary > li.current_page_ancestor > a,
#pxl-header-default .pxl-menu-primary > li.current-menu-ancestor > a {
  color: var(--pk-gold);
}

/* Subrayado dorado del item activo y en hover */
.pxl-menu-primary > li > a > span {
  position: relative;
}

.pxl-menu-primary > li > a > span::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  background: var(--pk-gold-gradient);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--pk-transition);
}

.pxl-menu-primary > li > a:hover > span::after,
.pxl-menu-primary > li.current_page_item > a > span::after,
.pxl-menu-primary > li.current-menu-item > a > span::after,
.pxl-menu-primary > li.current_page_ancestor > a > span::after,
.pxl-menu-primary > li.current-menu-ancestor > a > span::after {
  transform: scaleX(1);
}

/* Icono "casita" del ancestro activo, en dorado */
.pxl-menu-primary > li.current-menu-ancestor::before {
  background-color: var(--pk-gold);
}

/* Submenus: negro suave con borde dorado */
.pxl-menu-primary .sub-menu,
.pxl-menu-primary .children {
  background-color: var(--pk-black-soft);
  border: 1px solid var(--pk-border);
  border-radius: var(--pk-radius-sm);
  box-shadow: 0 12px 30px rgba(var(--pk-black-rgb), 0.5);
}

.pxl-menu-primary .sub-menu li:not(:last-child),
.pxl-menu-primary .children li:not(:last-child) {
  border-bottom: 1px solid rgba(var(--pk-white-rgb), 0.08);
}

.pxl-menu-primary .sub-menu li a,
.pxl-menu-primary .children li a {
  color: var(--pk-gray);
}

.pxl-menu-primary .sub-menu li > a:hover,
.pxl-menu-primary .children li > a:hover,
.pxl-menu-primary .sub-menu li.current-menu-item > a,
.pxl-menu-primary .children li.current-menu-item > a {
  color: var(--pk-gold);
}

.pxl-menu-primary .sub-menu li a::before,
.pxl-menu-primary .children li a::before {
  background-color: var(--pk-gold);
}

/* Drawer movil: fondo negro y textos claros */
.pxl-header-menu {
  background-color: var(--pk-black);
}

.pxl-header-menu-scroll .pxl-menu-primary > li > a {
  color: var(--pk-white);
}

.pxl-header-menu-scroll .pxl-menu-primary > li > a:hover {
  color: var(--pk-gold);
}

.pxl-header-menu-scroll .pxl-close::before,
.pxl-header-menu-scroll .pxl-close::after,
.pxl-header-menu-scroll .pxl-close:hover::before,
.pxl-header-menu-scroll .pxl-close:hover::after {
  background-color: var(--pk-gold);
}

/* En el drawer los submenus van en linea, sin caja flotante */
.pxl-header-menu-scroll .pxl-menu-primary .sub-menu,
.pxl-header-menu-scroll .pxl-menu-primary .children {
  background-color: transparent;
  border: 0;
  box-shadow: none;
}


/* -----------------------------------------------------------------------------
   5. FOOTER EN NEGRO
-------------------------------------------------------------------------------- */
#pxl-footer-elementor,
#pxl-footer-default {
  background-color: var(--pk-black);
  color: var(--pk-text-on-dark);
  border-top: 1px solid var(--pk-border);
}

#pxl-footer-elementor .elementor-section:not(.pk-keep-bg),
#pxl-footer-elementor .e-con:not(.pk-keep-bg) {
  background-color: transparent;
}

#pxl-footer-elementor h1,
#pxl-footer-elementor h2,
#pxl-footer-elementor h3,
#pxl-footer-elementor h4,
#pxl-footer-elementor h5,
#pxl-footer-elementor h6,
#pxl-footer-elementor .elementor-heading-title,
#pxl-footer-elementor .widget-title {
  color: var(--pk-heading-on-dark);
  font-family: var(--pk-font-display);
  letter-spacing: var(--pk-tracking-label);
}

#pxl-footer-elementor p,
#pxl-footer-elementor li,
#pxl-footer-elementor span {
  color: var(--pk-text-on-dark);
}

#pxl-footer-elementor a {
  color: var(--pk-link-on-dark);
}

#pxl-footer-elementor a:hover {
  color: var(--pk-gold-light);
}


/* -----------------------------------------------------------------------------
   6. BOTONES

   Primario = magenta, hover magenta oscuro.
   El selector base del padre (button:not(...), .button) ya toma
   --secondary-color, que arriba apunta a magenta. Aqui se afinan hover,
   tipografia y las variantes de marca.
-------------------------------------------------------------------------------- */
button:not(.mfp-close, .rm-style-default, .search-submit, .mfp-arrow),
.button,
.btn,
input[type="submit"],
.wp-element-button {
  font-family: var(--pk-font-display);
  letter-spacing: var(--pk-tracking-label);
  text-transform: uppercase;
  border-radius: var(--pk-radius-pill);
}

button:not(.mfp-close, .rm-style-default, .search-submit, .mfp-arrow):hover,
.button:hover,
input[type="submit"]:hover,
.wp-element-button:hover {
  background-color: var(--pk-cta-hover);
  color: var(--pk-white);
}

/* Variantes reutilizables de marca (se usan en las Fases 3 y 4) */
.pk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--pk-tap-target);
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: var(--pk-radius-pill);
  font-family: var(--pk-font-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: var(--pk-tracking-label);
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  transition: all var(--pk-transition);
}

.pk-btn--primary {
  background-color: var(--pk-cta);
  color: var(--pk-white);
}

.pk-btn--primary:hover,
.pk-btn--primary:focus {
  background-color: var(--pk-cta-hover);
  color: var(--pk-white);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(var(--pk-magenta-rgb), 0.35);
}

.pk-btn--gold {
  background: var(--pk-gold-gradient);
  color: var(--pk-black);
}

.pk-btn--gold:hover,
.pk-btn--gold:focus {
  color: var(--pk-black);
  transform: translateY(-2px);
  box-shadow: var(--pk-shadow-gold);
}

/* Negro con borde dorado — el boton de llamar de la card (Fase 4) */
.pk-btn--outline {
  background-color: var(--pk-black);
  border-color: var(--pk-gold);
  color: var(--pk-gold);
}

.pk-btn--outline:hover,
.pk-btn--outline:focus {
  background-color: var(--pk-gold);
  color: var(--pk-black);
}

.pk-btn--whatsapp {
  background-color: var(--pk-green);
  color: var(--pk-white);
}

.pk-btn--whatsapp:hover,
.pk-btn--whatsapp:focus {
  background-color: var(--pk-green-dark);
  color: var(--pk-white);
}

.pk-btn--block {
  display: flex;
  width: 100%;
}


/* -----------------------------------------------------------------------------
   7. BARRA DE TITULO DE PAGINA (breadcrumb)
-------------------------------------------------------------------------------- */
#pxl-page-title-default {
  background-color: var(--pk-black);
}

#pxl-page-title-default .pxl-page-title,
#pxl-page-title-default h1 {
  color: var(--pk-heading-on-dark);
  font-family: var(--pk-font-display);
}

#pxl-page-title-default .pxl-breadcrumb,
#pxl-page-title-default .pxl-breadcrumb span {
  color: var(--pk-text-on-dark);
}

#pxl-page-title-default .pxl-breadcrumb a {
  color: var(--pk-gold);
}


/* -----------------------------------------------------------------------------
   8. UTILIDADES DE MARCA
   Clases sueltas para usar desde Elementor (campo "CSS Classes") sin escribir
   CSS nuevo cada vez.
-------------------------------------------------------------------------------- */

/* Seccion oscura: invierte los colores de texto de forma coherente */
.pk-section-dark {
  background-color: var(--pk-black);
  color: var(--pk-text-on-dark);
}

.pk-section-dark h1,
.pk-section-dark h2,
.pk-section-dark h3,
.pk-section-dark h4,
.pk-section-dark h5,
.pk-section-dark h6,
.pk-section-dark .elementor-heading-title {
  color: var(--pk-heading-on-dark);
}

.pk-section-dark a {
  color: var(--pk-link-on-dark);
}

.pk-section-dark a:hover {
  color: var(--pk-gold-light);
}

.pk-gold {
  color: var(--pk-gold);
}

.pk-magenta {
  color: var(--pk-magenta);
}

/* "305" resaltado en magenta dentro de un titulo */
.pk-highlight {
  color: var(--pk-magenta);
}

/* Titulo estilo letrero de la fachada */
.pk-display {
  font-family: var(--pk-font-display);
  text-transform: uppercase;
  letter-spacing: var(--pk-tracking-display);
  line-height: 1.05;
}

/* Etiqueta pequena en mayusculas y dorado (ej: la RAZA en la card) */
.pk-label {
  font-family: var(--pk-font-display);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--pk-tracking-label);
  color: var(--pk-gold-ink);
}

.pk-section-dark .pk-label {
  color: var(--pk-gold);
}

/* Linea decorativa dorada */
.pk-divider {
  width: 72px;
  height: 2px;
  margin: 16px 0;
  border: 0;
  background: var(--pk-gold-gradient);
}

.pk-divider--center {
  margin-left: auto;
  margin-right: auto;
}

/* Badge de corona premium */
.pk-crown-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: var(--pk-radius-pill);
  background: var(--pk-gold-gradient);
  color: var(--pk-black);
  font-family: var(--pk-font-display);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--pk-tracking-label);
}

/* Bullet de huellita para listas */
.pk-paw-list {
  list-style: none;
  padding-left: 0;
}

.pk-paw-list li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 10px;
}

.pk-paw-list li::before {
  content: "🐾";
  position: absolute;
  left: 0;
  top: 0;
  font-size: 14px;
  line-height: 1.9;
}


/* -----------------------------------------------------------------------------
   9. TIPOGRAFIA — matar la fuente "bubble" del theme

   Patte carga DynaPuff (la redonda tipo caricatura) para los h1 y Anybody para
   el resto, desde patte_fonts_url(). functions.php ahora quita ese enqueue y
   carga Oswald + Inter en su lugar; aqui se reasignan las familias.

   Se ancla en #pxl-wapper (el div que envuelve todo el sitio) porque 1 ID gana
   sobre las reglas de Elementor (.elementor-element-xxxx = 1-2 clases) sin
   necesidad de !important.
-------------------------------------------------------------------------------- */
body,
input,
textarea,
select,
#pxl-wapper,
#pxl-wapper p,
#pxl-wapper li,
#pxl-wapper .elementor-widget-text-editor,
#pxl-wapper .elementor-widget-container {
  font-family: var(--pk-font-body);
}

#pxl-wapper h1,
#pxl-wapper h2,
#pxl-wapper h3,
#pxl-wapper h4,
#pxl-wapper h5,
#pxl-wapper h6,
#pxl-wapper .h1,
#pxl-wapper .h2,
#pxl-wapper .h3,
#pxl-wapper .elementor-heading-title,
#pxl-wapper .pxl-item--title,
#pxl-wapper button,
#pxl-wapper .button,
#pxl-wapper .btn {
  font-family: var(--pk-font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--pk-tracking-display);
}


/* -----------------------------------------------------------------------------
   10. NEUTRALIZADOR DEL DEMO

   El demo de Patte trae secciones color crema, garabatos naranjas y formas
   amarillas. Eso NO esta en el CSS del theme: son contenido de Elementor
   guardado en la base de datos, asi que no se puede borrar desde aqui. Lo que
   si se puede es dejar de pintarlo.

   Se activa con la clase pk-neutralize en el body, que functions.php agrega
   automaticamente en la portada (constante PK_NEUTRALIZE_HOME).

   Escapes:
     - pk-keep-bg  en una seccion  -> conserva su fondo propio
     - pk-keep     en un widget    -> no se oculta aunque sea decorativo
-------------------------------------------------------------------------------- */

/* IMPORTANTE — cambio de direccion de diseno:
   El neutralizador ya NO borra los fondos de las secciones. Los cremas del
   demo se conservan a proposito: son la base calida del sitio.
   PK_NEUTRALIZE_HOME viene en false. Si lo pones en true, solo hace esto:
   uniformar los fondos crema del demo al crema de la marca, por si alguno
   viene de un tono distinto que desentona. */
body.pk-neutralize #pxl-main > .elementor > .elementor-section:not(.pk-keep-bg):not(.pk-bg-black),
body.pk-neutralize #pxl-main > .elementor > .e-con:not(.pk-keep-bg):not(.pk-bg-black) {
  background-color: var(--pk-surface);
}

/* Garabatos naranjas y formas amarillas: se ocultan por separado, porque
   chocan con el dorado y el magenta. Interruptor propio: PK_HIDE_DEMO_DOODLES.
   En Elementor los adornos van como widgets posicionados en absoluto
   (.elementor-absolute); el contenido real nunca lo es, asi que este selector
   es preciso y no toca nada util. */
body.pk-hide-doodles #pxl-main .elementor-widget-image.elementor-absolute:not(.pk-keep),
body.pk-hide-doodles #pxl-main .elementor-widget-pxl-shape:not(.pk-keep),
body.pk-hide-doodles #pxl-main .pxl-shape:not(.pk-keep),
body.pk-hide-doodles #pxl-main .pxl-round:not(.pk-keep) {
  display: none;
}

/* El slider del demo (Slider Revolution) mientras siga publicado.
   Sin acotar a #pxl-main a proposito: Patte tambien puede colocar el slider
   por opciones de pagina, fuera del contenido principal. */
body.pk-hide-demo-slider rs-module-wrap,
body.pk-hide-demo-slider .rev_slider_wrapper,
body.pk-hide-demo-slider .elementor-widget-slider_revolution,
body.pk-hide-demo-slider .elementor-widget-wp-widget-rev-slider-widget,
body.pk-hide-demo-slider .pxl-slider-revolution {
  display: none;
}

/* Secciones que quedaron vacias al ocultar el slider.
   Patte marca el header transparente del demo con .px-header--transparent,
   que es position:absolute — por eso el header se monta encima del contenido
   y el H1 salia cortado. Se compensa con --pk-header-h (lo mide pk-ui.js) y
   con la clase pk-header-overlay que el mismo script pone en el body. */
body.pk-hide-demo-slider .pk-empty-section,
.pk-hide-section {
  display: none;
}

/* :has() colapsa la seccion contenedora del slider en navegadores modernos.
   pk-ui.js hace lo mismo por JS para el resto. */
body.pk-hide-demo-slider .elementor-section:has(rs-module-wrap),
body.pk-hide-demo-slider .elementor-section:has(.elementor-widget-slider_revolution),
body.pk-hide-demo-slider .e-con:has(rs-module-wrap) {
  display: none;
}

/* Utilidad manual: aplicar a una seccion en Elementor para dejarla limpia */
.pk-plain {
  background-color: transparent;
  background-image: none;
}

.pk-bg-white {
  background-color: var(--pk-white);
}

.pk-bg-offwhite {
  background-color: var(--pk-off-white);
}

.pk-bg-black {
  background-color: var(--pk-black);
}


/* -----------------------------------------------------------------------------
   11. MOVIL — la mayoria del trafico sera movil
-------------------------------------------------------------------------------- */
@media screen and (max-width: 767px) {
  .pk-btn {
    min-height: 48px;
    font-size: 14px;
    padding: 0 18px;
  }

  .pk-display {
    letter-spacing: 0;
  }
}