:root{
  --pl-header-height: 84px; /* AJUSTA si tu header es más alto */
}


/* ---- HERO (FULL WIDTH / FULL BLEED) ---- */
.pl-kitchen-hero{
  position: relative;
  width: 100%;
  min-height: 420px;
  overflow: hidden;
  border-radius: 0 !important;
  background: #111;
}

/* Fondo */
.pl-kitchen-hero__bg{
  position: absolute;
  inset: 0;
  z-index: 0;

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  transform: scale(1.02);
  will-change: transform;
}

/* Overlay legible */
.pl-kitchen-hero__overlay{
  position: absolute;
  inset: 0;
  z-index: 1;

  /* overlay default (desktop) */
  background: linear-gradient(
    90deg,
    rgba(0,0,0,.72) 0%,
    rgba(0,0,0,.48) 45%,
    rgba(0,0,0,.18) 100%
  );
}

/* Contenido encima del overlay */
.pl-kitchen-hero .container,
.pl-kitchen-hero .container-fluid{
  position: relative;
  z-index: 2;
}

/* Texto SIEMPRE legible (dark/light) */
.pl-kitchen-hero,
.pl-kitchen-hero *{
  color: #fff !important;
}

/* Badges claros */
.pl-kitchen-hero .badge{
  color: #111 !important;
  background: rgba(255,255,255,.92) !important;
  border-color: rgba(255,255,255,.35) !important;
}

/* Botones consistentes */
.pl-kitchen-hero .btn.btn-light{
  color: #111 !important;
}
.pl-kitchen-hero .btn.btn-outline-light{
  border-color: rgba(255,255,255,.70) !important;
}

/* Móvil */
@media (max-width: 991px){
  .pl-kitchen-hero{
    min-height: 380px;
  }

  /* overlay vertical para móvil */
  .pl-kitchen-hero__overlay{
    background: linear-gradient(
      180deg,
      rgba(0,0,0,.78) 0%,
      rgba(0,0,0,.42) 70%,
      rgba(0,0,0,.20) 100%
    );
  }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .pl-kitchen-hero__bg{
    transform: none;
  }
}

/* ---- FULL BLEED REAL (rompe cualquier container padre) ---- */
/* Esto asegura que el hero toque ambos lados del viewport aunque esté dentro de un .container */
#kitchenHero{
  position: relative;
  left: 50%;
  right: 50%;
  width: 100%;
  margin-left: -50vw;
  margin-right: -50vw;
  overflow: hidden; 
}

/* ---- Bootstrap guard: si alguien puso py-5 en el wrapper del hero ---- */
/* Idealmente el py-5 va en el .container interno, pero esto lo blinda */
#kitchenHero.py-5,
#kitchenHero .py-5{
  padding-top: 10 !important;
  padding-bottom: 0 !important;
}

/* ---- Quality: evita que algún layout meta padding extra al hero ---- */
#kitchenHero{
  padding-left: 0 !important;
  padding-right: 0 !important;
}


.pl-benefit-card {
  background: var(--pl-card-bg, #fff);
  border: 1px solid rgba(0,0,0,.06);
  transition: transform .25s ease, box-shadow .25s ease;
}

.pl-benefit-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0,0,0,.08);
}

.pl-benefit-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgba(0,0,0,.04);
  font-size: 1.25rem;
}

/* =========================
   DARK MODE – Benefit Cards
========================= */

[data-bs-theme="dark"] .pl-benefit-card {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 18px 36px rgba(0,0,0,.45);
}

[data-bs-theme="dark"] .pl-benefit-card:hover {
  box-shadow: 0 26px 52px rgba(0,0,0,.6);
  border-color: rgba(255,255,255,.22);
}

[data-bs-theme="dark"] .pl-benefit-icon {
  background: rgba(255,255,255,.12);
  color: #fff;
}

/* Portfolio cards */


.pf-card{
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.08);
  background: #fff;
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.pf-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 18px 38px rgba(0,0,0,.10);
}

.pf-cover{
  aspect-ratio: 16/10;
  width: 100%;
  object-fit: cover;
  display:block;
}

.pf-chip{
  font-size:.78rem;
  padding:.35rem .55rem;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.12);
  background: rgba(0,0,0,.03);
}

/* Dark mode (Bootstrap 5.3) */
[data-bs-theme="dark"] .pf-card{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.14);
  box-shadow: 0 18px 36px rgba(0,0,0,.45);
}
[data-bs-theme="dark"] .pf-chip{
  border-color: rgba(255,255,255,.16);
  background: rgba(255,255,255,.10);
}

/* =========================
   PORTFOLIO (Premium UI)
   Requiere:
   - .pf-card, .pf-cover, .pf-chip
   - #portfolioSection, #pfGrid
   - #pfModal (Bootstrap modal)
========================= */

/* Controls */
#portfolioSection .form-select,
#portfolioSection .form-control{
  border-radius: 999px;
  border-color: var(--pf-card-border);
}
[data-bs-theme="dark"] #portfolioSection .form-select,
[data-bs-theme="dark"] #portfolioSection .form-control{
  background-color: rgba(255,255,255,.06);
  color: var(--pf-title);
}

/* Dark mode: dropdown (options) */
[data-bs-theme="dark"] #portfolioSection .form-select{
  border-color: rgba(255,255,255,.16);
}

[data-bs-theme="dark"] #portfolioSection .form-select option,
[data-bs-theme="dark"] #portfolioSection .form-select optgroup{
  background-color: #0b0f14;   /* fondo del dropdown */
  color: rgba(255,255,255,.92);
}

/* Input search placeholder */
[data-bs-theme="dark"] #portfolioSection .form-control::placeholder{
  color: rgba(255,255,255,.55);
}

:root{
  --pf-radius: 18px;
  --pf-radius-lg: 22px;

  --pf-card-bg: #ffffff;
  --pf-card-border: rgba(0,0,0,.08);
  --pf-card-shadow: 0 12px 26px rgba(0,0,0,.08);
  --pf-card-shadow-hover: 0 22px 48px rgba(0,0,0,.12);

  --pf-title: #111827;
  --pf-text: #374151;
  --pf-muted: rgba(17,24,39,.62);

  --pf-chip-bg: rgba(0,0,0,.035);
  --pf-chip-border: rgba(0,0,0,.10);

  --pf-ring: rgba(0,0,0,.10);
}

/* Dark mode (Bootstrap 5.3) */
[data-bs-theme="dark"]{
  --pf-card-bg: rgba(255,255,255,.06);
  --pf-card-border: rgba(255,255,255,.14);
  --pf-card-shadow: 0 18px 40px rgba(0,0,0,.45);
  --pf-card-shadow-hover: 0 26px 58px rgba(0,0,0,.62);

  --pf-title: rgba(255,255,255,.92);
  --pf-text: rgba(255,255,255,.78);
  --pf-muted: rgba(255,255,255,.56);

  --pf-chip-bg: rgba(255,255,255,.10);
  --pf-chip-border: rgba(255,255,255,.16);

  --pf-ring: rgba(255,255,255,.16);
}

/* Section spacing polish */
#portfolioSection{
  scroll-margin-top: 90px;
}

/* Header (opcional: look más fino) */
#portfolioSection h2{
  letter-spacing: -.02em;
}
#portfolioSection p{
  color: var(--pf-muted);
}

/* Controls */
#portfolioSection .form-select,
#portfolioSection .form-control{
  border-radius: 999px;
  border-color: var(--pf-card-border);
}
[data-bs-theme="dark"] #portfolioSection .form-select,
[data-bs-theme="dark"] #portfolioSection .form-control{
  background-color: rgba(255,255,255,.06);
  color: var(--pf-title);
}

/* ===== Cards ===== */
.pf-card{
  border-radius: var(--pf-radius-lg);
  overflow: hidden;
  border: 1px solid var(--pf-card-border);
  background: var(--pf-card-bg);
  box-shadow: var(--pf-card-shadow);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, filter .18s ease;
  position: relative;
}

/* hover lift */
.pf-card:hover{
  transform: translateY(-4px);
  box-shadow: var(--pf-card-shadow-hover);
  border-color: color-mix(in srgb, var(--pf-card-border) 30%, rgba(255,255,255,.35) 70%);
}

/* focus ring */
.pf-card button:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px var(--pf-ring);
  border-radius: var(--pf-radius-lg);
}

/* Cover */
.pf-cover{
  width: 100%;
  aspect-ratio: 16/10;
  object-fit: cover;
  display: block;
  transform: scale(1.01);
  transition: transform .22s ease, filter .22s ease;
}
.pf-card:hover .pf-cover{
  transform: scale(1.05);
  filter: saturate(1.05);
}

/* Subtle gradient overlay for readability */
.pf-card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,.00) 40%,
    rgba(0,0,0,.06) 70%,
    rgba(0,0,0,.12) 100%
  );
  opacity: .55;
}
[data-bs-theme="dark"] .pf-card::before{
  opacity: .35;
}

/* Card content typography */
.pf-card .p-3{
  position: relative;
  z-index: 1;
}
.pf-card .fw-semibold{
  color: var(--pf-title);
}
.pf-card .opacity-75,
.pf-card .small.opacity-75{
  color: var(--pf-muted) !important;
  opacity: 1 !important;
}

/* Chips */
.pf-chip{
  font-size: .78rem;
  line-height: 1;
  padding: .42rem .62rem;
  border-radius: 999px;
  border: 1px solid var(--pf-chip-border);
  background: var(--pf-chip-bg);
  color: var(--pf-text);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* ===== Modal styling ===== */
#pfModal .modal-content{
  border-radius: 22px;
  border: 1px solid var(--pf-card-border);
  background: var(--pf-card-bg);
}
#pfModal .modal-header,
#pfModal .modal-footer{
  border-color: var(--pf-card-border);
}
#pfModal .modal-title{
  color: var(--pf-title);
}
#pfModal .modal-body p,
#pfModal .modal-body li{
  color: var(--pf-text);
}
#pfModal .border{
  border-color: var(--pf-card-border) !important;
}
#pfModal .ratio{
  border-radius: 18px;
}

/* Gallery tiles in modal */
#pfModalGallery .ratio{
  border-radius: 16px;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}
#pfModalGallery a:hover .ratio{
  transform: translateY(-2px);
  box-shadow: var(--pf-card-shadow);
}

/* Buttons inside modal (sutil) */
#pfModalLinks .btn{
  border-radius: 999px;
}

/* ===== Responsive tweaks ===== */
@media (max-width: 575.98px){
  #portfolioSection .form-select,
  #portfolioSection .form-control{
    width: 100% !important;
  }
  #portfolioSection .d-flex.gap-2{
    width: 100%;
  }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .pf-card, .pf-cover, #pfModalGallery .ratio{
    transition: none !important;
  }
}
/* =========================
   FIX DARK MODE: Portfolio Modal
   (mejora backdrop + modal bg)
========================= */

/* 1) Backdrop MÁS oscuro + blur (opcional) */
[data-bs-theme="dark"] .modal-backdrop.show{
  opacity: .88 !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* 2) Fuerza el fondo del modal: sólido y premium (NO transparente) */
[data-bs-theme="dark"] #pfModal .modal-content{
  background: #0b0f14 !important;               /* fondo real oscuro */
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: 0 40px 120px rgba(0,0,0,.85) !important;
}

/* 3) Header/footer con separación clara */
[data-bs-theme="dark"] #pfModal .modal-header,
[data-bs-theme="dark"] #pfModal .modal-footer{
  background: #0b0f14 !important;
  border-color: rgba(255,255,255,.10) !important;
}

/* 4) Texto */
[data-bs-theme="dark"] #pfModal .modal-title{
  color: rgba(255,255,255,.92) !important;
}
[data-bs-theme="dark"] #pfModal #pfModalSubtitle{
  color: rgba(255,255,255,.60) !important;
}
[data-bs-theme="dark"] #pfModal .modal-body p,
[data-bs-theme="dark"] #pfModal .modal-body li,
[data-bs-theme="dark"] #pfModal .modal-body .small{
  color: rgba(255,255,255,.78) !important;
}

/* 5) El panel derecho (Detalles) que se vea como card */
[data-bs-theme="dark"] #pfModal .modal-body .rounded-4.border{
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.12) !important;
}

/* 6) Tiles de galería: borde y fondo correctos */
[data-bs-theme="dark"] #pfModalGallery .ratio{
  background: rgba(255,255,255,.04) !important;
  border-color: rgba(255,255,255,.12) !important;
}

/* 7) Botón cerrar visible (sin verse raro) */
[data-bs-theme="dark"] #pfModal .btn-close{
  filter: invert(1) grayscale(1);
  opacity: .95;
}

/* 8) Si tu CSS anterior dejó glass en el modal, lo anulamos */
[data-bs-theme="dark"] #pfModal .modal-content,
[data-bs-theme="dark"] #pfModal .modal-header,
[data-bs-theme="dark"] #pfModal .modal-body,
[data-bs-theme="dark"] #pfModal .modal-footer{
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}


/* ============================
   BENEFITS — THEME VARIABLES
   (soporta: data-theme, data-bs-theme, class dark-mode/theme-dark)
   ============================ */

.pl-benefits-section{
  /* Light defaults */
  --pl-sec-bg: #f8f9fa;
  --pl-title: #111;
  --pl-subtitle: #6c757d;

  --pl-card-bg: #fff;
  --pl-card-border: rgba(0,0,0,.06);
  --pl-card-shadow: 0 20px 40px rgba(0,0,0,.08);

  --pl-icon-bg: rgba(0,0,0,.04);
  --pl-icon-border: rgba(0,0,0,.05);

  --pl-card-title: #111;
  --pl-card-text: #6c757d;

  background: var(--pl-sec-bg);
  color: var(--pl-title);
}

.pl-benefits-section .pl-section-title{ color: var(--pl-title); }
.pl-benefits-section .pl-section-subtitle{ color: var(--pl-subtitle); }

.pl-benefits-section .pl-benefit-card{
  background: var(--pl-card-bg);
  border: 1px solid var(--pl-card-border);
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
}

.pl-benefits-section .pl-benefit-card:hover{
  box-shadow: var(--pl-card-shadow);
}

.pl-benefits-section .pl-benefit-icon{
  background: var(--pl-icon-bg);
  border: 1px solid var(--pl-icon-border);
}

.pl-benefits-section .pl-benefit-card h5{ color: var(--pl-card-title); }
.pl-benefits-section .pl-benefit-card p{ color: var(--pl-card-text); }


/* ============================
   DARK MODE — aplica con cualquiera de estos toggles
   ============================ */

[data-theme="dark"] .pl-benefits-section,
[data-bs-theme="dark"] .pl-benefits-section,
.dark-mode .pl-benefits-section,
.theme-dark .pl-benefits-section{
  --pl-sec-bg:
    radial-gradient(1200px 600px at 50% -10%, rgba(90,130,255,.14), transparent 60%),
    radial-gradient(900px 500px at 85% 20%, rgba(0,255,200,.06), transparent 55%),
    linear-gradient(180deg, #0b0d12 0%, #07080b 100%);

  --pl-title: rgba(255,255,255,.92);
  --pl-subtitle: rgba(255,255,255,.62);

  --pl-card-bg: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  --pl-card-border: rgba(255,255,255,.08);
  --pl-card-shadow:
    0 18px 48px rgba(0,0,0,.55),
    0 0 0 1px rgba(120,160,255,.10) inset,
    0 0 24px rgba(120,160,255,.10);

  --pl-icon-bg: rgba(255,255,255,.08);
  --pl-icon-border: rgba(255,255,255,.10);

  --pl-card-title: rgba(255,255,255,.90);
  --pl-card-text: rgba(255,255,255,.66);
}

[data-theme="dark"] .pl-benefits-section .pl-benefit-card:hover,
[data-bs-theme="dark"] .pl-benefits-section .pl-benefit-card:hover,
.dark-mode .pl-benefits-section .pl-benefit-card:hover,
.theme-dark .pl-benefits-section .pl-benefit-card:hover{
  transform: translateY(-6px);
  border-color: rgba(120,160,255,.26);
  box-shadow: var(--pl-card-shadow);
}

/* ============================
   BENEFIT CARDS — PRO DESIGN
   ============================ */

.pl-benefit-card{
  position: relative;
  padding: 22px 22px 20px;
  border-radius: 22px;
  height: 100%;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease;

  /* Light default (si lo usas en light también) */
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
}

/* Línea superior sutil (detalle premium) */
.pl-benefit-card::before{
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: rgba(255,255,255,.25);
  opacity: .0;
  transition: opacity .25s ease;
}

/* Glow suave en hover */
.pl-benefit-card::after{
  content: "";
  position: absolute;
  inset: -40% -30%;
  background: radial-gradient(500px 240px at 20% 0%, rgba(120,160,255,.20), transparent 55%);
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
}

/* Hover: elevación + glow controlado */
.pl-benefit-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 22px 60px rgba(0,0,0,.18);
}

/* Tipografía dentro de la card */
.pl-benefit-card h5{
  font-weight: 650;
  letter-spacing: -.2px;
  margin-bottom: 8px;
}

.pl-benefit-card p{
  margin: 0;
  line-height: 1.45;
  font-size: .95rem;
}

/* Icon chip pro */
.pl-benefit-icon{
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  margin-bottom: 14px;

  background: rgba(0,0,0,.04);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 10px 22px rgba(0,0,0,.06);
}

.pl-benefit-icon i{
  font-size: 1.05rem;
  opacity: .95;
}

/* ============================
   DARK MODE — PRO DEPTH
   (cubre data-theme / data-bs-theme / clases)
   ============================ */

[data-theme="dark"] .pl-benefit-card,
[data-bs-theme="dark"] .pl-benefit-card,
.dark-mode .pl-benefit-card,
.theme-dark .pl-benefit-card{
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow:
    0 18px 40px rgba(0,0,0,.55),
    0 1px 0 rgba(255,255,255,.06) inset;
  backdrop-filter: blur(10px);
}

[data-theme="dark"] .pl-benefit-card::before,
[data-bs-theme="dark"] .pl-benefit-card::before,
.dark-mode .pl-benefit-card::before,
.theme-dark .pl-benefit-card::before{
  opacity: .35;
}

[data-theme="dark"] .pl-benefit-card:hover::after,
[data-bs-theme="dark"] .pl-benefit-card:hover::after,
.dark-mode .pl-benefit-card:hover::after,
.theme-dark .pl-benefit-card:hover::after{
  opacity: 1;
}

[data-theme="dark"] .pl-benefit-card:hover,
[data-bs-theme="dark"] .pl-benefit-card:hover,
.dark-mode .pl-benefit-card:hover,
.theme-dark .pl-benefit-card:hover{
  border-color: rgba(120,160,255,.28);
  box-shadow:
    0 26px 70px rgba(0,0,0,.70),
    0 0 0 1px rgba(120,160,255,.10) inset;
}

[data-theme="dark"] .pl-benefit-card h5,
[data-bs-theme="dark"] .pl-benefit-card h5,
.dark-mode .pl-benefit-card h5,
.theme-dark .pl-benefit-card h5{
  color: rgba(255,255,255,.92);
}

[data-theme="dark"] .pl-benefit-card p,
[data-bs-theme="dark"] .pl-benefit-card p,
.dark-mode .pl-benefit-card p,
.theme-dark .pl-benefit-card p{
  color: rgba(255,255,255,.66);
}

/* Icon chip en dark */
[data-theme="dark"] .pl-benefit-icon,
[data-bs-theme="dark"] .pl-benefit-icon,
.dark-mode .pl-benefit-icon,
.theme-dark .pl-benefit-icon{
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow:
    0 18px 34px rgba(0,0,0,.55),
    0 0 0 1px rgba(120,160,255,.10) inset;
}

[data-theme="dark"] .pl-benefit-icon i,
[data-bs-theme="dark"] .pl-benefit-icon i,
.dark-mode .pl-benefit-icon i,
.theme-dark .pl-benefit-icon i{
  color: rgba(255,255,255,.92);
}

/* Contenedor del muestrario */
.pl-swatch-section{
  position: relative;
  background: #fff;
}

/* Título visible y encima de todo */
.pl-swatch-section .pl-swatch-title{
  position: relative;
  z-index: 5;
  color: #111 !important;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: 1 !important;
}

/* Subtítulo (si existe) */
.pl-swatch-section .pl-swatch-subtitle{
  position: relative;
  z-index: 5;
  color: rgba(17,17,17,.7) !important;
}