/* =========================================================
   GRUPO EMPRESARIAL KAMANA
   CONTENEDORES V1
   PROPUESTA 3
   NEGRO + FUCSIA + AMARILLO + AZUL + CREMA

   IMPORTANTE:
   - NO modifica header
   - NO modifica hero
   - NO modifica footer
   - NO modifica layouts base
   ========================================================= */

:root {
  --kc-black: #101214;
  --kc-black-2: #15181b;
  --kc-black-3: #1c1f23;

  --kc-pink: #ef0f74;
  --kc-yellow: #ffbd0a;
  --kc-blue: #0879d8;
  --kc-cream: #f6dcc4;

  --kc-white: #fffdf8;
  --kc-muted: rgba(255,255,255,.68);
  --kc-soft: rgba(255,255,255,.48);
}


/* =========================================================
   SUPERFICIE BASE
   SOLO CONTENEDORES DENTRO DE MAIN
   ========================================================= */

main#contenido :is(
  .product-card,
  .editorial-card,
  .service-index > a,
  .detail-row,
  .journal-card,
  .store-card,
  .article-entry,
  .quote-panel,
  .menu-item-card,
  .menu-tools,
  .menu-visit-grid,
  .cup-grid,
  .process-strip > div
) {
  --kc-accent: var(--kc-yellow);

  position: relative;

  border:
    1px solid
    color-mix(
      in srgb,
      var(--kc-accent) 72%,
      #272b30
    );

  border-radius: 16px;

  background:
    linear-gradient(
      90deg,
      var(--kc-accent),
      transparent 38%
    )
    top left / 100% 2px
    no-repeat,

    radial-gradient(
      circle at 100% 0%,
      color-mix(
        in srgb,
        var(--kc-accent) 12%,
        transparent
      ),
      transparent 34%
    ),

    linear-gradient(
      145deg,
      #171a1e 0%,
      #101214 68%,
      #0c0e10 100%
    );

  color:
    var(--kc-white);

  box-shadow:
    0 18px 40px
    rgba(0,0,0,.17),

    inset 0 1px 0
    rgba(255,255,255,.045),

    0 0 22px
    color-mix(
      in srgb,
      var(--kc-accent) 10%,
      transparent
    );

  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}


/* Hover solamente cuando el bloque es interactivo */

main#contenido :is(
  .product-card,
  .editorial-card,
  .service-index > a,
  .journal-card,
  .store-card,
  .menu-item-card
):hover {
  transform:
    translateY(-3px);

  border-color:
    var(--kc-accent);

  box-shadow:
    0 22px 46px
    rgba(0,0,0,.23),

    inset 0 1px 0
    rgba(255,255,255,.06),

    0 0 30px
    color-mix(
      in srgb,
      var(--kc-accent) 16%,
      transparent
    );
}


/* =========================================================
   CICLO DE COLORES
   ========================================================= */

/* Productos */

main#contenido
.products-grid
.product-card:nth-child(4n + 1) {
  --kc-accent:
    var(--kc-pink);
}

main#contenido
.products-grid
.product-card:nth-child(4n + 2) {
  --kc-accent:
    var(--kc-yellow);
}

main#contenido
.products-grid
.product-card:nth-child(4n + 3) {
  --kc-accent:
    var(--kc-blue);
}

main#contenido
.products-grid
.product-card:nth-child(4n + 4) {
  --kc-accent:
    var(--kc-cream);
}


/* Editoriales */

main#contenido
.editorial-cards
.editorial-card:nth-child(4n + 1) {
  --kc-accent:
    var(--kc-pink);
}

main#contenido
.editorial-cards
.editorial-card:nth-child(4n + 2) {
  --kc-accent:
    var(--kc-yellow);
}

main#contenido
.editorial-cards
.editorial-card:nth-child(4n + 3) {
  --kc-accent:
    var(--kc-blue);
}

main#contenido
.editorial-cards
.editorial-card:nth-child(4n + 4) {
  --kc-accent:
    var(--kc-cream);
}


/* Servicios */

main#contenido
.service-index
> a:nth-child(4n + 1) {
  --kc-accent:
    var(--kc-pink);
}

main#contenido
.service-index
> a:nth-child(4n + 2) {
  --kc-accent:
    var(--kc-yellow);
}

main#contenido
.service-index
> a:nth-child(4n + 3) {
  --kc-accent:
    var(--kc-blue);
}

main#contenido
.service-index
> a:nth-child(4n + 4) {
  --kc-accent:
    var(--kc-cream);
}


/* Detalles de servicios */

main#contenido
.detail-list
.detail-row:nth-child(4n + 1) {
  --kc-accent:
    var(--kc-pink);
}

main#contenido
.detail-list
.detail-row:nth-child(4n + 2) {
  --kc-accent:
    var(--kc-yellow);
}

main#contenido
.detail-list
.detail-row:nth-child(4n + 3) {
  --kc-accent:
    var(--kc-blue);
}

main#contenido
.detail-list
.detail-row:nth-child(4n + 4) {
  --kc-accent:
    var(--kc-cream);
}


/* Blog / editorial */

main#contenido
.journal-grid
.journal-card:nth-child(4n + 1),

main#contenido
.article-stack
.article-entry:nth-child(4n + 1) {
  --kc-accent:
    var(--kc-pink);
}

main#contenido
.journal-grid
.journal-card:nth-child(4n + 2),

main#contenido
.article-stack
.article-entry:nth-child(4n + 2) {
  --kc-accent:
    var(--kc-yellow);
}

main#contenido
.journal-grid
.journal-card:nth-child(4n + 3),

main#contenido
.article-stack
.article-entry:nth-child(4n + 3) {
  --kc-accent:
    var(--kc-blue);
}


/* Menú dinámico */

main#contenido
.menu-items-grid
.menu-item-card:nth-child(4n + 1) {
  --kc-accent:
    var(--kc-pink);
}

main#contenido
.menu-items-grid
.menu-item-card:nth-child(4n + 2) {
  --kc-accent:
    var(--kc-yellow);
}

main#contenido
.menu-items-grid
.menu-item-card:nth-child(4n + 3) {
  --kc-accent:
    var(--kc-blue);
}

main#contenido
.menu-items-grid
.menu-item-card:nth-child(4n + 4) {
  --kc-accent:
    var(--kc-cream);
}


/* Proceso */

main#contenido
.process-strip
> div:nth-child(4n + 1) {
  --kc-accent:
    var(--kc-pink);
}

main#contenido
.process-strip
> div:nth-child(4n + 2) {
  --kc-accent:
    var(--kc-yellow);
}

main#contenido
.process-strip
> div:nth-child(4n + 3) {
  --kc-accent:
    var(--kc-blue);
}

main#contenido
.process-strip
> div:nth-child(4n + 4) {
  --kc-accent:
    var(--kc-cream);
}


/* =========================================================
   TEXTOS DENTRO DE CONTENEDORES
   ========================================================= */

main#contenido :is(
  .product-card,
  .editorial-card,
  .service-index > a,
  .detail-row,
  .journal-card,
  .store-card,
  .article-entry,
  .quote-panel,
  .menu-item-card,
  .menu-tools,
  .menu-visit-grid,
  .cup-grid,
  .process-strip > div
) :is(
  h2,
  h3,
  h4,
  strong
) {
  color:
    var(--kc-white);
}


main#contenido :is(
  .product-card,
  .editorial-card,
  .service-index > a,
  .detail-row,
  .journal-card,
  .store-card,
  .article-entry,
  .quote-panel,
  .menu-item-card,
  .menu-tools,
  .menu-visit-grid,
  .cup-grid,
  .process-strip > div
) p {
  color:
    var(--kc-muted);
}


main#contenido
.detail-row li {
  color:
    var(--kc-muted);
}


/* Labels / kicker / numeración */

main#contenido
.editorial-card
> span,

main#contenido
.service-index
> a
> span,

main#contenido
.detail-row
> span,

main#contenido
.journal-card
> div
> span,

main#contenido
.article-entry
.eyebrow,

main#contenido
.process-strip
span,

main#contenido
.product-kicker {
  color:
    var(--kc-accent);
}


/* Links internos */

main#contenido :is(
  .editorial-card,
  .service-index > a,
  .detail-row,
  .store-card,
  .article-entry,
  .quote-panel
)
.text-link,

main#contenido
.editorial-card
> strong {
  color:
    var(--kc-accent);
}


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

main#contenido
.product-card {
  overflow: hidden;
}


main#contenido
.product-card-media {
  position: relative;

  background:
    #0d0f11;
}


main#contenido
.product-card-media img {
  transition:
    transform 420ms ease;
}


main#contenido
.product-card:hover
.product-card-media img {
  transform:
    scale(1.025);
}


main#contenido
.product-card-body {
  color:
    var(--kc-white);
}


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


main#contenido
.product-card
.product-tag {
  border:
    1px solid
    color-mix(
      in srgb,
      var(--kc-accent) 55%,
      transparent
    );

  background:
    rgba(10,12,14,.82);

  color:
    var(--kc-white);

  backdrop-filter:
    blur(10px);
}


main#contenido
.product-card
.product-buy-row
label
> span {
  color:
    var(--kc-muted);
}


main#contenido
.product-card
.product-size {
  border:
    1px solid
    rgba(255,255,255,.13);

  background:
    #0d0f11;

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


main#contenido
.product-card
.product-size:focus {
  border-color:
    var(--kc-accent);

  outline: none;
}


/*
  El CTA de carrito permanece fucsia
  para mantener una acción principal uniforme.
*/

main#contenido
.product-card
.add-to-cart {
  border-color:
    var(--kc-pink);

  background:
    var(--kc-pink);

  color: #fff;

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


/* =========================================================
   TARJETAS EDITORIALES
   ========================================================= */

main#contenido
.editorial-card {
  overflow: hidden;
}


main#contenido
.editorial-card::after {
  position: absolute;

  right: 18px;
  bottom: 16px;

  width: 46px;
  height: 1px;

  background:
    var(--kc-accent);

  content: "";

  opacity: .8;
}


/* =========================================================
   INDICE DE SERVICIOS
   ========================================================= */

main#contenido
.service-index
> a {
  overflow: hidden;
}


main#contenido
.service-index
> a
h2 {
  color:
    var(--kc-white);
}


main#contenido
.service-index
> a
p {
  color:
    var(--kc-muted);
}


/* =========================================================
   DETALLES GRANDES
   ========================================================= */

main#contenido
.detail-row {
  padding:
    clamp(
      28px,
      4vw,
      52px
    );
}


main#contenido
.detail-row
ul {
  color:
    var(--kc-muted);
}


/* =========================================================
   JOURNAL / BLOG
   ========================================================= */

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


main#contenido
.journal-card
img,

main#contenido
.article-entry
img {
  transition:
    transform 450ms ease;
}


main#contenido
.journal-card:hover
img {
  transform:
    scale(1.025);
}


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


main#contenido
.article-entry
> div {
  background:
    transparent;
}


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


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

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


main#contenido
.store-card
> div {
  background:
    linear-gradient(
      180deg,
      rgba(16,18,20,.83),
      rgba(16,18,20,.98)
    );

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


main#contenido
.store-card
a {
  color:
    var(--kc-accent);
}


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

main#contenido
.menu-tools {
  --kc-accent:
    var(--kc-pink);

  padding:
    clamp(
      22px,
      3vw,
      34px
    );
}


main#contenido
.menu-tools
h2 {
  color:
    var(--kc-white);
}


main#contenido
.menu-tools
> div
> p:last-child {
  color:
    var(--kc-muted);
}


main#contenido
.menu-search
input {
  border:
    1px solid
    rgba(255,255,255,.13);

  background:
    #0b0d0f;

  color:
    #fff;
}


main#contenido
.menu-search
input::placeholder {
  color:
    rgba(255,255,255,.42);
}


main#contenido
.menu-item-card {
  overflow: hidden;
}


main#contenido
.menu-item-card.is-featured {
  border-color:
    var(--kc-accent);

  background:
    linear-gradient(
      145deg,
      #191c20 0%,
      #111315 100%
    );
}


main#contenido
.menu-item-media {
  background:
    #0d0f11;
}


main#contenido
.menu-item-heading
h3 {
  color:
    var(--kc-white);
}


main#contenido
.menu-item-body
p {
  color:
    var(--kc-muted);
}


main#contenido
.menu-visit-grid {
  --kc-accent:
    var(--kc-blue);

  padding:
    clamp(
      28px,
      4vw,
      48px
    );
}


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

main#contenido
.cup-grid {
  --kc-accent:
    var(--kc-yellow);

  overflow: hidden;
}


main#contenido
.cup-copy {
  padding:
    clamp(
      30px,
      4vw,
      54px
    );
}


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


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


main#contenido
.cup-media {
  overflow: hidden;
}


/* =========================================================
   PROCESOS
   ========================================================= */

main#contenido
.process-strip
> div {
  padding:
    26px 22px;
}


main#contenido
.process-strip
> div
span {
  display:
    inline-block;

  margin-bottom:
    12px;

  font-weight:
    800;
}


main#contenido
.process-strip
> div
h3 {
  color:
    var(--kc-white);
}


/* =========================================================
   QUOTE PANEL
   ========================================================= */

main#contenido
.quote-panel {
  --kc-accent:
    var(--kc-pink);

  padding:
    clamp(
      30px,
      4vw,
      52px
    );
}


main#contenido
.quote-panel
h2 {
  color:
    var(--kc-white);
}


main#contenido
.quote-panel
p {
  color:
    var(--kc-muted);
}


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

main#contenido
.dynamic-forms-section
form,

body[data-page="construccion"]
main#contenido
form {
  --kc-accent:
    var(--kc-blue);

  position: relative;

  border:
    1px solid
    var(--kc-blue);

  border-radius:
    16px;

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

  color:
    var(--kc-white);

  box-shadow:
    0 18px 42px
    rgba(0,0,0,.18),

    0 0 24px
    rgba(8,121,216,.08);
}


main#contenido
.dynamic-forms-section
form
:is(
  label,
  h2,
  h3,
  strong
),

body[data-page="construccion"]
main#contenido
form
:is(
  label,
  h2,
  h3,
  strong
) {
  color:
    var(--kc-white);
}


main#contenido
.dynamic-forms-section
form
p,

body[data-page="construccion"]
main#contenido
form
p {
  color:
    var(--kc-muted);
}


main#contenido
.dynamic-forms-section
form
:is(
  input,
  select,
  textarea
),

body[data-page="construccion"]
main#contenido
form
:is(
  input,
  select,
  textarea
) {
  border:
    1px solid
    rgba(255,255,255,.13);

  background:
    #0b0d0f;

  color:
    #fff;
}


main#contenido
.dynamic-forms-section
form
:is(
  input,
  select,
  textarea
):focus,

body[data-page="construccion"]
main#contenido
form
:is(
  input,
  select,
  textarea
):focus {
  border-color:
    var(--kc-blue);

  outline:
    none;

  box-shadow:
    0 0 0 3px
    rgba(8,121,216,.11);
}


/* =========================================================
   BLOQUES AUXILIARES SI EXISTEN
   ========================================================= */

main#contenido :is(
  .construction-card,
  .construction-panel,
  .construction-summary,
  .upload-panel,
  .form-card
) {
  --kc-accent:
    var(--kc-blue);

  border:
    1px solid
    var(--kc-accent);

  border-radius:
    16px;

  background:
    linear-gradient(
      145deg,
      #171a1e,
      #101214
    );

  color:
    #fff;

  box-shadow:
    0 18px 42px
    rgba(0,0,0,.18);
}


/* =========================================================
   ACCESIBILIDAD / FOCUS
   ========================================================= */

main#contenido :is(
  .product-card,
  .editorial-card,
  .service-index > a,
  .journal-card,
  .store-card
):focus-visible {
  outline:
    2px solid
    var(--kc-accent);

  outline-offset:
    4px;
}


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

@media (
  max-width: 900px
) {
  main#contenido :is(
    .product-card,
    .editorial-card,
    .service-index > a,
    .detail-row,
    .journal-card,
    .store-card,
    .article-entry,
    .quote-panel,
    .menu-item-card,
    .menu-tools,
    .menu-visit-grid,
    .cup-grid,
    .process-strip > div
  ) {
    border-radius:
      14px;
  }

  main#contenido
  .detail-row {
    padding:
      28px;
  }
}


@media (
  max-width: 600px
) {
  main#contenido
  .quote-panel,

  main#contenido
  .menu-tools,

  main#contenido
  .menu-visit-grid,

  main#contenido
  .cup-copy {
    padding:
      24px;
  }

  main#contenido
  .process-strip
  > div {
    padding:
      22px 18px;
  }
}


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

@media (
  prefers-reduced-motion:
  reduce
) {
  main#contenido :is(
    .product-card,
    .editorial-card,
    .service-index > a,
    .journal-card,
    .store-card,
    .menu-item-card
  ) {
    transition:
      none;
  }

  main#contenido
  .product-card-media
  img,

  main#contenido
  .journal-card
  img,

  main#contenido
  .article-entry
  img {
    transition:
      none;
  }
}