/* ==========================================================
   GRUPO EMPRESARIAL KAMANA
   BODY DARK V1

   Rediseño integral del contenido principal.

   EXCLUIDOS:
   - header
   - hero / page-hero
   - footer

   PALETA:
   negro + fucsia + amarillo + azul + crema
   ========================================================== */

:root {
  --kb-black: #0b0d0f;
  --kb-black-2: #101214;
  --kb-black-3: #15181b;
  --kb-black-4: #1b1e22;

  --kb-pink: #ef0f74;
  --kb-yellow: #ffbd0a;
  --kb-blue: #0879d8;
  --kb-cream: #f4dcc6;

  --kb-white: #fffdf8;

  --kb-text:
    rgba(255,255,255,.76);

  --kb-muted:
    rgba(255,255,255,.54);

  --kb-border:
    rgba(255,255,255,.09);
}


/* ==========================================================
   MAIN GENERAL
   ========================================================== */

main#contenido {
  background:
    var(--kb-black);

  color:
    var(--kb-white);
}


/* ==========================================================
   TODAS LAS SECCIONES DESPUÉS DEL HERO
   ========================================================== */

main#contenido
> section:not(.hero):not(.page-hero) {
  --section-accent:
    var(--kb-yellow);

  position:
    relative;

  overflow:
    hidden;

  padding-top:
    clamp(
      82px,
      7.5vw,
      132px
    );

  padding-bottom:
    clamp(
      82px,
      7.5vw,
      132px
    );

  border-top:
    1px solid
    var(--kb-border);

  background-color:
    var(--kb-black-2);

  color:
    var(--kb-white);

  box-shadow:
    inset 0 2px 0
    color-mix(
      in srgb,
      var(--section-accent) 58%,
      transparent
    );
}


/* ==========================================================
   ALTERNANCIA VISUAL DE SECCIONES
   ========================================================== */

main#contenido
> section:not(.hero):not(.page-hero):nth-of-type(4n + 1) {
  --section-accent:
    var(--kb-yellow);

  background-color:
    #101214;
}


main#contenido
> section:not(.hero):not(.page-hero):nth-of-type(4n + 2) {
  --section-accent:
    var(--kb-pink);

  background-color:
    #121215;
}


main#contenido
> section:not(.hero):not(.page-hero):nth-of-type(4n + 3) {
  --section-accent:
    var(--kb-blue);

  background-color:
    #0d1217;
}


main#contenido
> section:not(.hero):not(.page-hero):nth-of-type(4n + 4) {
  --section-accent:
    var(--kb-cream);

  background-color:
    #151311;
}


/* Mantener fondos fotográficos existentes */

main#contenido
> section:not(.hero):not(.page-hero)[style*="background"],
main#contenido
> section:not(.hero):not(.page-hero)[class*="cta"] {
  background-color:
    rgba(9,11,13,.9);
}


/* ==========================================================
   CONTENEDOR CENTRAL
   ========================================================== */

main#contenido
> section:not(.hero):not(.page-hero)
> .container {
  position:
    relative;

  z-index:
    2;
}


/* ==========================================================
   CABECERAS DE SECCIÓN
   ========================================================== */

main#contenido
> section:not(.hero):not(.page-hero)
.section-heading {
  position:
    relative;

  margin-bottom:
    clamp(
      42px,
      5vw,
      70px
    );
}


main#contenido
> section:not(.hero):not(.page-hero)
.section-heading::after {
  display:
    block;

  width:
    68px;

  height:
    3px;

  margin-top:
    24px;

  border-radius:
    999px;

  background:
    var(--section-accent);

  content:
    "";

  box-shadow:
    0 0 20px
    color-mix(
      in srgb,
      var(--section-accent) 34%,
      transparent
    );
}


main#contenido
> section:not(.hero):not(.page-hero)
.section-heading-split {
  align-items:
    end;

  padding-bottom:
    28px;

  border-bottom:
    1px solid
    rgba(255,255,255,.1);
}


main#contenido
> section:not(.hero):not(.page-hero)
.section-heading-split::after {
  position:
    absolute;

  bottom:
    -2px;

  left:
    0;

  margin:
    0;
}


/* ==========================================================
   EYEBROWS
   ========================================================== */

main#contenido
> section:not(.hero):not(.page-hero)
:is(
  .eyebrow,
  .eyebrow-dark
) {
  color:
    var(--section-accent);

  font-weight:
    800;

  letter-spacing:
    .28em;
}


/* ==========================================================
   TÍTULOS
   ========================================================== */

main#contenido
> section:not(.hero):not(.page-hero)
:is(
  h1,
  h2,
  h3,
  h4
) {
  color:
    var(--kb-white);
}


main#contenido
> section:not(.hero):not(.page-hero)
.section-heading h2 {
  max-width:
    850px;

  color:
    var(--kb-white);

  text-shadow:
    0 8px 34px
    rgba(0,0,0,.24);
}


/* ==========================================================
   PÁRRAFOS
   ========================================================== */

main#contenido
> section:not(.hero):not(.page-hero)
p {
  color:
    var(--kb-text);
}


main#contenido
> section:not(.hero):not(.page-hero)
.section-heading
> p,

main#contenido
> section:not(.hero):not(.page-hero)
.section-heading-split
> p {
  color:
    var(--kb-muted);
}


/* ==========================================================
   LINKS DE TEXTO
   ========================================================== */

main#contenido
> section:not(.hero):not(.page-hero)
.text-link {
  color:
    var(--section-accent);
}


main#contenido
> section:not(.hero):not(.page-hero)
.text-link:hover {
  color:
    #fff;
}


/* ==========================================================
   PRODUCTOS
   ========================================================== */

main#contenido
.products-section {
  background-color:
    #0d0f11;
}


main#contenido
.products-grid {
  gap:
    20px;
}


main#contenido
.product-card {
  background:
    linear-gradient(
      145deg,
      #171a1e,
      #0d0f11
    );
}


main#contenido
.product-card-body {
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.015),
      transparent
    );
}


main#contenido
.product-card
.product-description {
  color:
    var(--kb-text);
}


/* ==========================================================
   SERVICIOS
   ========================================================== */

main#contenido
.services-preview {
  background-color:
    #101214;
}


main#contenido
.editorial-cards {
  gap:
    16px;
}


main#contenido
.editorial-card {
  min-height:
    290px;

  padding:
    clamp(
      28px,
      3vw,
      42px
    );

  background:
    linear-gradient(
      145deg,
      #171a1e 0%,
      #0e1012 100%
    );
}


main#contenido
.editorial-card
h3 {
  margin-top:
    30px;

  color:
    var(--kb-white);
}


main#contenido
.editorial-card
p {
  color:
    var(--kb-text);
}


/* ==========================================================
   ÍNDICE DE SERVICIOS
   ========================================================== */

main#contenido
.service-index {
  gap:
    14px;
}


main#contenido
.service-index
> a {
  min-height:
    240px;

  padding:
    32px;

  background:
    linear-gradient(
      145deg,
      #181b1f,
      #0d0f11
    );
}


/* ==========================================================
   DETALLES DE SERVICIOS
   ========================================================== */

main#contenido
.detail-list {
  display:
    grid;

  gap:
    18px;
}


main#contenido
.detail-row {
  border:
    1px solid
    var(--kb-border);

  background:
    linear-gradient(
      145deg,
      #171a1e,
      #0e1012
    );
}


/* ==========================================================
   HISTORIA / BLOQUES EDITORIALES GRANDES
   ========================================================== */

main#contenido
> section:not(.hero):not(.page-hero)
:is(
  .story-grid,
  .origin-grid,
  .about-grid,
  .history-grid,
  .brand-story-grid
) {
  gap:
    clamp(
      28px,
      5vw,
      76px
    );
}


main#contenido
> section:not(.hero):not(.page-hero)
:is(
  .story-grid,
  .origin-grid,
  .about-grid,
  .history-grid,
  .brand-story-grid
)
img {
  border:
    1px solid
    color-mix(
      in srgb,
      var(--section-accent) 70%,
      transparent
    );

  border-radius:
    18px;

  box-shadow:
    0 24px 70px
    rgba(0,0,0,.32);
}


/* ==========================================================
   SECCIÓN "¿POR QUÉ KAMANÁ?"
   ========================================================== */

main#contenido
> section:has(#reasonsTitle) {
  --section-accent:
    var(--kb-yellow);

  background-color:
    #0d0f11;
}


main#contenido
> section:has(#reasonsTitle)
.container
> :last-child {
  overflow:
    hidden;

  border:
    1px solid
    var(--kb-border);

  border-radius:
    18px;

  background:
    #111417;
}


main#contenido
> section:has(#reasonsTitle)
.container
> :last-child
> * {
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.025),
      transparent
    );

  color:
    var(--kb-white);

  border-color:
    rgba(255,255,255,.09);
}


main#contenido
> section:has(#reasonsTitle)
.container
> :last-child
p {
  color:
    var(--kb-text);
}


/* ==========================================================
   PROPÓSITO / IMPACTO
   ========================================================== */

main#contenido
.dark-section {
  background-color:
    #111012;

  color:
    var(--kb-white);
}


main#contenido
.dark-section
.section-heading
h2 {
  color:
    var(--kb-white);
}


main#contenido
.dark-section
.section-heading
p {
  color:
    var(--kb-text);
}


/* ==========================================================
   PROCESS STRIP
   ========================================================== */

main#contenido
.process-strip {
  gap:
    12px;

  border:
    0;

  background:
    transparent;
}


main#contenido
.process-strip
> div {
  border:
    1px solid
    var(--kb-border);

  border-radius:
    14px;

  background:
    linear-gradient(
      145deg,
      #171a1e,
      #0c0e10
    );
}


/* ==========================================================
   PERFIL DE TAZA
   ========================================================== */

main#contenido
.cup-section {
  background-color:
    #0c1014;
}


main#contenido
.cup-grid {
  overflow:
    hidden;

  border:
    1px solid
    color-mix(
      in srgb,
      var(--kb-blue) 64%,
      transparent
    );

  border-radius:
    20px;

  background:
    #101317;

  box-shadow:
    0 28px 70px
    rgba(0,0,0,.28);
}


main#contenido
.cup-copy {
  background:
    linear-gradient(
      145deg,
      #15191d,
      #0d0f11
    );
}


main#contenido
.cup-copy
h2 {
  color:
    var(--kb-white);
}


main#contenido
.cup-copy
p {
  color:
    var(--kb-text);
}


main#contenido
.cup-media
img {
  width:
    100%;

  height:
    100%;

  object-fit:
    cover;
}


/* ==========================================================
   TIENDAS
   ========================================================== */

main#contenido
.stores-section {
  background-color:
    #111315;
}


main#contenido
.stores-grid {
  gap:
    20px;
}


main#contenido
.store-card {
  overflow:
    hidden;

  border-radius:
    18px;

  box-shadow:
    0 25px 65px
    rgba(0,0,0,.3);
}


main#contenido
.store-card
> div {
  background:
    linear-gradient(
      180deg,
      rgba(10,12,14,.12),
      rgba(10,12,14,.97)
    );
}


/* ==========================================================
   BLOG HOME
   ========================================================== */

main#contenido
.journal-grid {
  gap:
    18px;
}


main#contenido
.journal-card {
  overflow:
    hidden;

  background:
    #101317;
}


main#contenido
.journal-card
> div {
  background:
    linear-gradient(
      180deg,
      rgba(16,19,23,.84),
      rgba(12,14,16,.98)
    );
}


main#contenido
.journal-card
h3 {
  color:
    var(--kb-white);
}


main#contenido
.journal-card
p {
  color:
    var(--kb-text);
}


/* ==========================================================
   BLOG INTERNO
   ========================================================== */

main#contenido
.article-stack {
  display:
    grid;

  gap:
    24px;
}


main#contenido
.article-entry {
  overflow:
    hidden;

  border-radius:
    18px;

  background:
    #111417;
}


main#contenido
.article-entry
> div {
  background:
    linear-gradient(
      145deg,
      #15181b,
      #0c0e10
    );
}


main#contenido
.article-entry
h2 {
  color:
    var(--kb-white);
}


main#contenido
.article-entry
p {
  color:
    var(--kb-text);
}


/* ==========================================================
   MENÚ
   ========================================================== */

main#contenido
.menu-catalog,
main#contenido
.menu-section {
  background-color:
    #0d0f11;
}


main#contenido
.menu-category-heading
h2 {
  color:
    var(--kb-white);
}


main#contenido
.menu-category-heading
p {
  color:
    var(--kb-muted);
}


main#contenido
.menu-category-number {
  border-color:
    var(--section-accent);

  color:
    var(--section-accent);
}


main#contenido
.menu-items-grid {
  gap:
    18px;
}


/* ==========================================================
   MENU VISIT
   ========================================================== */

main#contenido
.menu-visit {
  background-color:
    #0b1015;
}


main#contenido
.menu-visit-grid {
  border-color:
    rgba(8,121,216,.5);

  background:
    linear-gradient(
      145deg,
      #14191e,
      #0b0e11
    );
}


/* ==========================================================
   FORMULARIOS
   ========================================================== */

main#contenido
.dynamic-forms-section:not([hidden]) {
  background-color:
    #0c0f12;
}


main#contenido
.dynamic-forms-section
form {
  max-width:
    980px;

  margin:
    0 auto;
}


/* ==========================================================
   CTA / PANEL DE COTIZACIÓN
   ========================================================== */

main#contenido
.quote-panel {
  overflow:
    hidden;

  border-radius:
    18px;

  background:
    linear-gradient(
      135deg,
      #171419,
      #0d0f11
    );
}


/* ==========================================================
   BOTONES DEL CUERPO
   ========================================================== */

main#contenido
> section:not(.hero):not(.page-hero)
.button-primary {
  border-color:
    var(--kb-pink);

  background:
    var(--kb-pink);

  color:
    #fff;

  box-shadow:
    0 10px 28px
    rgba(239,15,116,.22);
}


main#contenido
> section:not(.hero):not(.page-hero)
.button-primary:hover {
  background:
    #ff2588;
}


main#contenido
> section:not(.hero):not(.page-hero)
.button-dark {
  border:
    1px solid
    rgba(255,255,255,.18);

  background:
    #fff;

  color:
    #101214;
}


main#contenido
> section:not(.hero):not(.page-hero)
.button-outline {
  border-color:
    rgba(255,255,255,.38);

  color:
    #fff;
}


/* ==========================================================
   IMÁGENES EDITORIALES
   ========================================================== */

main#contenido
> section:not(.hero):not(.page-hero)
:is(
  .article-entry,
  .cup-media,
  .store-card,
  .journal-card
)
img {
  filter:
    saturate(1.05)
    contrast(1.02);
}


/* ==========================================================
   LÍNEAS / DIVISORES ANTIGUOS
   ========================================================== */

main#contenido
> section:not(.hero):not(.page-hero)
:is(
  hr,
  .divider
) {
  border-color:
    rgba(255,255,255,.1);
}


/* ==========================================================
   INPUTS
   ========================================================== */

main#contenido
> section:not(.hero):not(.page-hero)
:is(
  input,
  select,
  textarea
) {
  border-color:
    rgba(255,255,255,.14);

  background:
    #090b0d;

  color:
    #fff;
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (
  max-width: 900px
) {

  main#contenido
  > section:not(.hero):not(.page-hero) {
    padding-top:
      72px;

    padding-bottom:
      72px;
  }


  main#contenido
  > section:not(.hero):not(.page-hero)
  .section-heading {
    margin-bottom:
      38px;
  }


  main#contenido
  > section:not(.hero):not(.page-hero)
  .section-heading-split {
    align-items:
      start;
  }


  main#contenido
  .editorial-card {
    min-height:
      auto;
  }
}


@media (
  max-width: 600px
) {

  main#contenido
  > section:not(.hero):not(.page-hero) {
    padding-top:
      58px;

    padding-bottom:
      58px;
  }


  main#contenido
  > section:not(.hero):not(.page-hero)
  .section-heading::after {
    width:
      52px;

    margin-top:
      18px;
  }


  main#contenido
  .service-index
  > a {
    min-height:
      auto;
  }
}


/* ==========================================================
   REDUCED MOTION
   ========================================================== */

@media (
  prefers-reduced-motion:
  reduce
) {

  main#contenido
  * {
    scroll-behavior:
      auto;
  }
}