/**
 * Primitivo Pottery — componentes del chrome (Oleadas 1-2).
 * Solo lo que Divi 5 nativo no puede expresar: mancha de pincelada del botón, iconos del prototipo,
 * reordenamiento del header, menús del footer como listas, motivo vasija. Todo lo demás vive en
 * Design Variables + Presets (ver recipes/primitivo/02-oleada1-design-system.md).
 * Clases ancla (se ponen en Avanzado > Atributos HTML > Clase): pp-promo, pp-header, pp-menu, pp-account,
 * pp-footer, pp-footer-menu, pp-social, pp-social-link, pp-footer-bottom, pp-motif(+ --tr/--tl/--br/--bl).
 */

/* ------------------------------------------------------------------ Base */
body.primitivo-site {
  background-color: var(--pp-cloth);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.primitivo-site ::selection { background: var(--pp-sage); color: var(--pp-ink); }
.primitivo-site :focus-visible { outline: 2px solid var(--pp-olive); outline-offset: 3px; border-radius: 3px; }

/* ----------------------------------------------- Botón pincelada (presets) */
/* El preset define tipografía/relleno y quita borde e icono; la mancha SVG va como ::before
   para poder rotarla en hover sin mover el texto (igual que .btn del prototipo). */
.et_pb_button[class*="preset--module--divi-button--pp"],
.et_pb_button.preset--module--divi-button--default {
  position: relative;
  isolation: isolate;
  transition: transform .5s var(--pp-ease), filter .5s var(--pp-ease), background-color .4s var(--pp-ease), color .4s var(--pp-ease), border-color .4s var(--pp-ease);
}
.et_pb_button[class*="preset--module--divi-button--pp"]:after,
.et_pb_button.preset--module--divi-button--default:after { display: none !important; }
/* Botones de pincelada: fondo transparente (la mancha hace de fondo) */
.et_pb_button.preset--module--divi-button--default,
.et_pb_button.preset--module--divi-button--ppbtnprimary,
.et_pb_button.preset--module--divi-button--ppbtnsecondary,
.et_pb_button.preset--module--divi-button--ppbtnlight,
.et_pb_button.preset--module--divi-button--ppbtnsm { background: transparent !important; box-shadow: none; }
body #page-container .et_pb_section .et_pb_button.preset--module--divi-button--default::before,
body #page-container .et_pb_section .et_pb_button.preset--module--divi-button--ppbtnprimary::before,
body #page-container .et_pb_section .et_pb_button.preset--module--divi-button--ppbtnsecondary::before,
body #page-container .et_pb_section .et_pb_button.preset--module--divi-button--ppbtnlight::before,
body #page-container .et_pb_section .et_pb_button.preset--module--divi-button--ppbtnsm::before {
  content: "" !important;
  display: block !important;
  position: absolute;
  inset: -6px -4px;
  margin: 0 !important;
  width: auto;
  height: auto;
  opacity: 1 !important;
  transform: none;
  line-height: 1;
  z-index: -1;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  transition: transform .55s var(--pp-ease), filter .55s var(--pp-ease);
}
body #page-container .et_pb_section .et_pb_button.preset--module--divi-button--default::before,
body #page-container .et_pb_section .et_pb_button.preset--module--divi-button--ppbtnprimary::before,
body #page-container .et_pb_section .et_pb_button.preset--module--divi-button--ppbtnsm::before { background-image: var(--pp-brush-primary); }
body #page-container .et_pb_section .et_pb_button.preset--module--divi-button--ppbtnsecondary::before { background-image: var(--pp-brush-secondary); }
body #page-container .et_pb_section .et_pb_button.preset--module--divi-button--ppbtnlight::before { background-image: var(--pp-brush-light); }
body #page-container .et_pb_section .et_pb_button.preset--module--divi-button--default:hover::before,
body #page-container .et_pb_section .et_pb_button.preset--module--divi-button--ppbtnprimary:hover::before,
body #page-container .et_pb_section .et_pb_button.preset--module--divi-button--ppbtnsecondary:hover::before,
body #page-container .et_pb_section .et_pb_button.preset--module--divi-button--ppbtnlight:hover::before,
body #page-container .et_pb_section .et_pb_button.preset--module--divi-button--ppbtnsm:hover::before {
  transform: rotate(-1.2deg) scale(1.035);
  filter: brightness(1.06) saturate(1.05);
}
body #page-container .et_pb_section .et_pb_button.preset--module--divi-button--default:active::before,
body #page-container .et_pb_section .et_pb_button.preset--module--divi-button--ppbtnprimary:active::before,
body #page-container .et_pb_section .et_pb_button.preset--module--divi-button--ppbtnsecondary:active::before,
body #page-container .et_pb_section .et_pb_button.preset--module--divi-button--ppbtnlight:active::before,
body #page-container .et_pb_section .et_pb_button.preset--module--divi-button--ppbtnsm:active::before {
  transition-duration: .15s;
  transform: rotate(-.5deg) scale(.965);
  filter: brightness(.97) saturate(1.02);
}
/* Outline: el hover lo resuelve el preset (fondo/color); aquí solo el micro-lift del prototipo */
.et_pb_button.preset--module--divi-button--ppbtnoutline:hover,
.et_pb_button.preset--module--divi-button--ppbtnoutlinelight:hover { transform: translateY(-1px); box-shadow: 0 10px 20px -12px rgba(44, 33, 24, .35); }

/* --------------------------------------------------------- Cards (hover) */
.et_pb_group.preset--module--divi-group--ppcard { transition: transform var(--pp-dur) var(--pp-ease), box-shadow var(--pp-dur) var(--pp-ease); }
.et_pb_group.preset--module--divi-group--ppcard:hover { transform: translateY(-6px); box-shadow: var(--pp-shadow-md) !important; }

/* ------------------------------------------------------ Motivo vasija */
.pp-motif { position: relative; isolation: isolate; overflow: hidden; }
.pp-motif::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: clamp(200px, 26vw, 400px);
  aspect-ratio: 152 / 188;
  background: var(--pp-motif) center / contain no-repeat;
  opacity: .07;
  pointer-events: none;
}
.pp-motif--light::before { filter: invert(1); opacity: .09; }
.pp-motif--tr::before { top: -6%; right: -2%; transform: rotate(6deg); }
.pp-motif--tl::before { top: -6%; left: -2%; transform: rotate(-6deg) scaleX(-1); }
.pp-motif--br::before { bottom: -6%; right: -2%; transform: rotate(-4deg); }
.pp-motif--bl::before { bottom: -6%; left: -2%; transform: rotate(4deg) scaleX(-1); }
@media (max-width: 600px) { .pp-motif::before { width: clamp(120px, 34vw, 200px); } }

/* Divi añade 10px de padding inferior a los títulos de los módulos: el prototipo no lo tiene */
.primitivo-site .et_pb_heading .et_pb_module_header,
.primitivo-site h1.et_pb_module_header, .primitivo-site h2.et_pb_module_header, .primitivo-site h3.et_pb_module_header,
.primitivo-site h4.et_pb_module_header, .primitivo-site h5.et_pb_module_header, .primitivo-site h6.et_pb_module_header { padding-bottom: 0; }

/* El área de contenido de Divi es blanca por defecto: el sitio va sobre cloth */
.primitivo-site #main-content { background-color: var(--pp-cloth); }

/* ---------------------------------------------------------- Barra promo */
.pp-promo .et_pb_text_inner p { margin: 0; padding: 0; }
.pp-promo a { color: var(--pp-chalk); text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.pp-promo a:hover { color: var(--pp-chalk); }

/* --------------------------------------------------------------- Header */
.pp-header { border-bottom: 1px solid transparent; transition: background var(--pp-dur) var(--pp-ease), box-shadow var(--pp-dur) var(--pp-ease); }
.pp-header.et_pb_sticky { box-shadow: var(--pp-shadow-sm); }
/* El desenfoque de fondo va en un pseudo-elemento: un backdrop-filter en la propia sección crearía un bloque
   contenedor para los descendientes `fixed` y encerraría el drawer del mini-carrito dentro del header. */
.pp-header::before { content: ""; position: absolute; inset: 0; z-index: -1; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); pointer-events: none; }

/* Logo | menú centrado | búsqueda · cuenta · carrito · hamburguesa. Los contenedores del módulo Menú y su
   envoltorio pasan a `display: contents` para que el icono de cuenta (módulo SVG, hermano) y los iconos del
   menú sean elementos de la misma fila flex y se puedan ordenar. */
.pp-header .et_pb_row,
.pp-header .et_pb_column { width: 100%; }
.pp-header .et_pb_column { gap: .8rem; }
.pp-header .pp-menu,
.pp-header .pp-menu .et_pb_menu_inner_container,
.pp-header .pp-menu .et_pb_menu__wrap { display: contents; }
.pp-header .pp-menu { padding: 0 !important; margin: 0 !important; background: transparent !important; }
.pp-header .pp-menu .et_pb_menu__logo-wrap { order: 0; flex: 0 0 auto; margin: 0; }
.pp-header .pp-menu .et_pb_menu__logo { margin: 0; }
.pp-header .pp-menu .et_pb_menu__logo img,
.pp-header .pp-menu .et_pb_menu__logo a { display: block; height: 46px; width: auto; max-height: none; }
.pp-header .pp-menu .et_pb_menu__menu { order: 1; flex: 1 1 auto; display: flex; justify-content: center; }
.pp-header .pp-menu .et-menu { display: flex; align-items: center; justify-content: center; gap: clamp(1.2rem, 2.4vw, 2.4rem); flex-wrap: nowrap; }
.pp-header .pp-menu .et-menu > li { margin: 0 !important; padding: 0 !important; }
.pp-header .pp-menu .et-menu > li > a {
  position: relative; display: block; padding: .4rem 0 calc(.4rem + 2px) !important; white-space: nowrap;
  font-size: .98rem; font-weight: 500; line-height: 1.35; opacity: 1;
  background: linear-gradient(var(--pp-olive), var(--pp-olive)) no-repeat left bottom / 0 2px;
  transition: color var(--pp-dur) var(--pp-ease), background-size var(--pp-dur) var(--pp-ease);
}
.pp-header .pp-menu .et-menu > li > a:hover,
.pp-header .pp-menu .et-menu > li.current-menu-item > a,
.pp-header .pp-menu .et-menu > li.current_page_item > a { background-size: 100% 2px; }
.pp-header .pp-menu .et-menu > li.current-menu-item > a,
.pp-header .pp-menu .et-menu > li.current_page_item > a { color: var(--pp-ink); }
.pp-header .pp-menu .pp-menu-cuenta-movil { display: none; }

/* Iconos de acción: mismas formas de trazo del prototipo (máscara SVG sobre currentColor) */
.pp-header .pp-menu .et_pb_menu__search-button { order: 2; }
.pp-header .pp-account { order: 3; }
.pp-header .pp-menu .bc_menu_cart,
.pp-header .pp-menu > .et_pb_menu_inner_container > .et_pb_menu__wrap > .et_pb_menu__cart-button { order: 4; }
.pp-header .pp-menu .et_mobile_nav_menu { order: 5; }
.pp-header .pp-menu .et_pb_menu__icon,
.pp-header .pp-account .et_pb_svg_link {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin: 0 !important; padding: 0 !important; border-radius: 999px;
  color: var(--pp-ink); background: transparent; border: 0;
  transition: background var(--pp-dur) var(--pp-ease);
}
.pp-header .pp-menu .et_pb_menu__icon:hover,
.pp-header .pp-account .et_pb_svg_link:hover { background: color-mix(in srgb, var(--pp-sage) 40%, transparent); color: var(--pp-ink); }
.pp-header .pp-menu .shop-cart { display: inline-flex; }
.pp-header .pp-menu .bc_menu_cart { position: relative; z-index: 1; }
.pp-header .pp-menu .et_pb_menu__search-button::after,
.pp-header .pp-menu .et_pb_menu__search-button::before,
.pp-header .pp-menu .et_pb_menu__cart-button::after,
.pp-header .pp-menu .et_pb_menu__cart-button::before { content: none !important; }
.pp-header .pp-menu .et_pb_menu__search-button { cursor: pointer; }
.pp-header .pp-menu .et_pb_menu__search-button::before,
.pp-header .pp-menu .et_pb_menu__cart-button::before {
  content: "" !important; display: block; width: 22px; height: 22px; background: currentColor;
  -webkit-mask: var(--pp-ico) center / contain no-repeat; mask: var(--pp-ico) center / contain no-repeat;
}
.pp-header .pp-menu .et_pb_menu__search-button {
  --pp-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E");
}
.pp-header .pp-menu .et_pb_menu__cart-button {
  --pp-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.7 13.4a2 2 0 0 0 2 1.6h9.7a2 2 0 0 0 2-1.6L23 6H6'/%3E%3C/svg%3E");
}
.pp-header .pp-account .et_pb_svg_inner,
.pp-header .pp-account svg { display: block; }
.pp-header .pp-account { margin: 0 !important; }

/* Badge de cantidad del carrito */
.pp-header .pp-menu .et_pb_menu__cart-count {
  position: absolute; top: 4px; right: 2px; left: auto;
  min-width: 18px; height: 18px; padding: 0 4px;
  background: var(--pp-dune); color: var(--pp-chalk);
  font-size: .68rem; font-weight: 700; line-height: 18px; text-align: center;
  border-radius: 999px; letter-spacing: 0;
}
.pp-header .pp-menu .et_pb_menu__cart-count:empty { display: none; }

/* Buscador desplegable: cubre la fila del header */
.pp-header .pp-menu .et_pb_menu__search-container {
  position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 30;
  background: var(--pp-cloth);
}
.pp-header .pp-menu .et_pb_menu__search-input {
  font-family: var(--pp-font-body); color: var(--pp-ink); background: transparent; border: 0;
  border-bottom: 1.5px solid var(--pp-line-strong); padding: .6rem 0;
}
.pp-header .et_pb_row,
.pp-header .et_pb_column { position: static; } /* el buscador y el menú móvil se anclan a la sección (ancho completo) */

/* Tablet / móvil: logo | iconos | hamburguesa (la cuenta pasa a ser ítem del menú móvil) */
@media (max-width: 980px) {
  .pp-header .pp-menu .et_pb_menu__logo img,
  .pp-header .pp-menu .et_pb_menu__logo a { height: 38px; }
  .pp-header .pp-menu .et_pb_menu__menu { display: none; }
  .pp-header .pp-menu .et_pb_menu__logo-wrap { margin-right: auto; }
  .pp-header .pp-menu .et_mobile_nav_menu { display: inline-flex; align-items: center; margin: 0; }
  .pp-header .pp-menu .pp-menu-cuenta-movil { display: list-item; }
  .pp-header .pp-menu .et_mobile_menu {
    left: 0; right: 0; width: 100%; top: 100%; border-top: 0; background: var(--pp-cloth);
    box-shadow: var(--pp-shadow-lg); padding: 1rem var(--pp-gutter) 2rem;
  }
  .pp-header .pp-menu .et_mobile_menu li a {
    display: block; padding: .7rem 0; font-size: 1.15rem; font-weight: 500; color: var(--pp-casa);
    border-bottom: 1px solid var(--pp-line); background: transparent;
  }
}

/* Mini-carrito deslizante (BodyCommerce): el panel vive dentro del header (contexto de apilamiento z=100) y el
   velo `.CartClick.overlay` en <body>. Con el drawer abierto se eleva el header por encima del velo. */
body:has(.bodycommerce-minicart.active) .et-l--header { z-index: 2147483000; }

/* --------------------------------------------------------------- Footer */
.pp-footer a { transition: color var(--pp-dur) var(--pp-ease); }
.pp-footer .et_pb_text_inner p { margin: 0; padding: 0; }
.pp-footer .et_pb_text_inner a { color: rgba(251, 247, 240, .85); }
.pp-footer .et_pb_text_inner a:hover { color: var(--pp-sunset); }
.pp-footer-logo { margin-bottom: var(--pp-space-16) !important; width: auto !important; }
.pp-footer-logo img { height: 52px !important; width: auto !important; max-width: none; }

/* Retícula del footer del prototipo: 1.4fr 1fr 1fr 1fr, hueco 4rem (.footer-grid) */
.pp-footer > .et_pb_row:first-of-type { display: grid !important; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--pp-space-32); }
.pp-footer > .et_pb_row:first-of-type > .et_pb_column { width: auto !important; max-width: none !important; flex: none !important; min-width: 0; }
@media (max-width: 900px) { .pp-footer > .et_pb_row:first-of-type { grid-template-columns: 1fr 1fr; gap: var(--pp-space-24); } }
@media (max-width: 520px) { .pp-footer > .et_pb_row:first-of-type { grid-template-columns: 1fr; } }

/* Menús del footer como lista vertical (el módulo Menú es horizontal con hamburguesa en móvil) */
.pp-footer-menu { padding: 0 !important; margin: 0 !important; background: transparent !important; }
.pp-footer-menu .et_pb_menu_inner_container,
.pp-footer-menu .et_pb_menu__wrap,
.pp-footer-menu .et_pb_menu__menu { display: block !important; width: 100%; }
.pp-footer-menu .et_mobile_nav_menu,
.pp-footer-menu .et_pb_menu__search-container { display: none !important; }
.pp-footer-menu .et-menu { margin: 0 !important; display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
.pp-footer-menu .et-menu > li { margin: 0 0 .6rem !important; padding: 0 !important; font-size: 1rem; line-height: 1.7; }
.pp-footer-menu .et-menu > li > a {
  display: inline !important; padding: 0 !important; font-size: .95rem; font-weight: 400; line-height: calc(1rem * 1.7);
  color: rgba(251, 247, 240, .85); opacity: 1; transition: color var(--pp-dur) var(--pp-ease);
}
.pp-footer-menu .et-menu > li > a:hover { color: var(--pp-sunset); }
.pp-footer-menu .pp-menu-cuenta-movil { display: list-item; }

/* Redes: círculos de 42px */
.pp-social { gap: .8rem; margin-top: var(--pp-space-16); }
.pp-social-link { margin: 0 !important; }
.pp-social-link .et_pb_svg_link {
  width: 42px; height: 42px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(251, 247, 240, .28); color: var(--pp-chalk); transition: background var(--pp-dur) var(--pp-ease), color var(--pp-dur) var(--pp-ease);
}
.pp-social-link .et_pb_svg_link:hover { background: var(--pp-chalk); color: var(--pp-rust); }
.pp-social-link svg { display: block; width: 18px; height: 18px; }

/* Barra inferior */
.pp-footer { row-gap: 0; }
.pp-footer .pp-footer-bottom.et_pb_row { position: relative; margin-top: var(--pp-space-48) !important; padding-top: var(--pp-space-24) !important; }
.pp-footer-bottom::before { content: ""; position: absolute; top: 0; left: var(--pp-gutter); right: var(--pp-gutter); border-top: 1px solid rgba(251, 247, 240, .18); }
.pp-footer-bottom .et_pb_text_inner p { margin: 0; }

/* ------------------------------------------------------------------ 404 */
.pp-404 .et_pb_button { margin-top: 0; }