/* ============================================================
   Psilocivida — tema hijo sobre "classic" (PrestaShop 8.2)
   Fuente de verdad de la paleta y la identidad visual.
   Selectores validados contra themes/classic/templates/*.tpl
   (no se editó classic; todo el look vive en este archivo).
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Manrope:wght@400;600;700;800&display=swap");

/* Paleta adaptada del mockup (Psilocivida.html): misma identidad,
   tonos más brillantes, texto morado oscuro y acentos lavanda */
:root {
  --psi-violeta:  #7b2ec7;
  --psi-violeta-dark: #4a1a80;
  --psi-magenta:  #d5379b;
  --psi-turquesa: #14a5a5;
  --psi-verde:    #2fa85a;
  --psi-naranjo:  #f2952a; /* CTA cálido */
  --psi-naranjo-dark: #dd7f14;
  --psi-ambar:    #F5A623;
  --psi-crema:    #f5eefb; /* fondos suaves ahora lavanda */
  --psi-carbon:   #241733;
  --psi-titulo:   #2a1840;
  --psi-gris:     #ece1f6;
  --psi-gradient: linear-gradient(90deg,#7b2ec7,#d5379b,#14a5a5,#2fa85a,#f2952a,#F5A623);

  --psi-radius-sm: 10px;
  --psi-radius: 16px;
  --psi-radius-lg: 22px;
  --psi-radius-pill: 999px;
  --psi-shadow-sm: 0 2px 10px rgba(80,30,120,.07);
  --psi-shadow: 0 10px 26px rgba(80,30,120,.12);
  --psi-shadow-lg: 0 16px 44px rgba(80,30,120,.17);
  --psi-ease: cubic-bezier(.22,1,.36,1);
}

/* ============================================================
   Base
   ============================================================ */
body {
  color: var(--psi-carbon);
  font-family: "Manrope", "Nunito Sans", system-ui, sans-serif;
  background: #fff;
}
h1, h2, h3, h4, .h1, .h2, .h3,
.display-1, .display-2, .display-3 {
  font-family: "Fredoka", "Baloo 2", sans-serif;
  color: var(--psi-titulo);
  letter-spacing: .2px;
}
a { color: var(--psi-violeta); transition: color .15s var(--psi-ease); }
a:hover, a:focus { color: var(--psi-magenta); }

::selection { background: #f0d9ff; color: var(--psi-titulo); }

/* ============================================================
   Header — sticky, limpio, con acento de marca
   ============================================================ */
#header {
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: var(--psi-shadow-sm);
}
#header .header-banner { display: none; } /* banner nativo sin usar; el hero va en el slider */
#header .header-top { background: #fff; padding: 14px 0; }
#header .header-nav {
  background: var(--psi-violeta);
  border-top: 3px solid transparent;
  border-image: var(--psi-gradient) 1;
}
#_desktop_top_menu .top-menu > li > a,
.header-nav .top-menu a {
  color: #fff;
  font-weight: 600;
  font-family: "Fredoka", sans-serif;
  letter-spacing: .3px;
}
#_desktop_top_menu .top-menu > li > a:hover,
.header-nav .top-menu a:hover { color: var(--psi-ambar); }

#_desktop_cart .cart-products-count,
.blockcart .cart-products-count {
  background: var(--psi-naranjo);
  color: #fff;
  border-radius: var(--psi-radius-pill);
  padding: 1px 8px;
  font-weight: 700;
}

/* Buscador redondeado */
#search_widget input.ui-autocomplete-input,
#search_widget input[type="text"] {
  border-radius: var(--psi-radius-pill);
  border: 1px solid var(--psi-gris);
}
#search_widget button[type="submit"] { color: var(--psi-turquesa); }

/* ============================================================
   Botones y CTAs
   ============================================================ */
/* Botones píldora con degradado violeta→magenta (estilo del mockup),
   sombra de color suave y lift al hover */
.btn-primary,
a.btn-primary,
.add-to-cart,
button.add-to-cart {
  background: linear-gradient(135deg, var(--psi-violeta), var(--psi-magenta));
  border: none;
  color: #fff;
  border-radius: var(--psi-radius-pill);
  padding: 11px 28px;
  font-weight: 700;
  font-family: "Fredoka", sans-serif;
  letter-spacing: .3px;
  box-shadow: 0 12px 26px -12px rgba(123, 46, 199, .65);
  transition: transform .15s var(--psi-ease), box-shadow .15s var(--psi-ease), filter .15s var(--psi-ease);
}
.btn-primary:hover, .btn-primary:focus,
.add-to-cart:hover, .add-to-cart:focus {
  background: linear-gradient(135deg, var(--psi-magenta), var(--psi-naranjo));
  transform: translateY(-2px);
  box-shadow: 0 16px 30px -12px rgba(213, 55, 155, .6);
  color: #fff;
}
.btn-secondary {
  background-color: #fff;
  border: 2px solid var(--psi-violeta);
  color: var(--psi-violeta);
  border-radius: var(--psi-radius-pill);
  font-weight: 700;
}
.btn-secondary:hover { background-color: var(--psi-violeta); color: #fff; }

/* ============================================================
   Hero / carrusel principal (ps_imageslider)
   ============================================================ */
#carousel.carousel {
  border-radius: var(--psi-radius-lg);
  overflow: hidden;
  box-shadow: var(--psi-shadow-lg);
  margin: 24px 0;
}
#carousel .carousel-item figure { margin: 0; position: relative; }
#carousel .carousel-item img { width: 100%; object-fit: cover; }
#carousel .caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 32px 40px;
  background: linear-gradient(0deg, rgba(42,42,50,.72) 0%, rgba(42,42,50,0) 100%);
  color: #fff;
  text-align: left;
}
#carousel .caption .display-1 {
  color: #fff;
  font-size: clamp(1.5rem, 3.5vw, 2.6rem);
  text-transform: none;
  margin-bottom: 6px;
}
#carousel .caption .caption-description { color: #f0e9f5; font-size: 1.05rem; }
#carousel .carousel-indicators li {
  background-color: rgba(255,255,255,.55);
  border-radius: var(--psi-radius-pill);
}
#carousel .carousel-indicators li.active { background-color: var(--psi-ambar); }
#carousel .carousel-control {
  background: rgba(255,255,255,.85);
  border-radius: 50%;
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--psi-shadow-sm);
}
#carousel .carousel-control .material-icons { color: var(--psi-violeta); }

/* ============================================================
   Barra de anuncios degradada (tope del sitio, estilo mockup)
   ============================================================ */
.psi-announce {
  background: linear-gradient(90deg, #14a5a5, #2fa85a, #f2952a, #d5379b, #7b2ec7, #14a5a5);
  background-size: 400% 100%;
  animation: psi-flow 18s linear infinite;
  color: #fff;
  text-align: center;
  font-size: 13.5px;
  font-weight: 700;
  padding: 9px 16px;
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}
@keyframes psi-flow {
  0% { background-position: 0% 0; }
  100% { background-position: 400% 0; }
}
.psi-announce__sep::before { content: "· "; opacity: .8; }
@media (max-width: 767px) {
  .psi-announce { font-size: 12px; padding: 7px 10px; }
  .psi-announce__sep:last-child { display: none; }
}

/* Fondo blanco aireado como el mockup */
#wrapper { background: #fff; }

/* Menú liviano: Manrope, minúsculas, una línea */
#_desktop_top_menu .top-menu > li > a {
  font-family: "Manrope", sans-serif;
  font-weight: 600;
  font-size: 14.5px;
  text-transform: none;
  letter-spacing: 0;
  color: #3f2d55;
}
#_desktop_top_menu .top-menu > li > a:hover { color: var(--psi-violeta); }

/* Buscador pill compacto */
#search_widget input.ui-autocomplete-input,
#search_widget input[type="text"] {
  background: #f7f2fc;
  border: 1px solid #eee1f7;
}

/* Contador del carrito como pill degradado */
.blockcart .cart-products-count,
#_desktop_cart .cart-products-count {
  background: linear-gradient(135deg, #7b2ec7, #d5379b);
}

/* Títulos de sección con kicker magenta (estilo "EXPLORA POR CATEGORÍA") */
.featured-products .products-section-title,
.featured-products .h1 {
  text-align: left;
  text-transform: none;
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 700;
  color: var(--psi-titulo);
}
.featured-products .products-section-title::before {
  content: "NUESTRA SELECCIÓN";
  display: block;
  font-family: "Manrope", sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .16em;
  color: var(--psi-magenta);
  margin-bottom: 6px;
}
.featured-products .products-section-title::after { display: none; }
/* segunda sección de productos (Novedades) con kicker propio */
.featured-products.mt-3 .products-section-title::before { content: "RECIÉN LLEGADOS"; }

/* ── Sección "Explora por categoría" (mockup) ── */
.psi-kicker {
  font-family: "Manrope", sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .16em;
  color: var(--psi-magenta);
}
.psi-cats-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin: 8px 0 18px;
}
.psi-cats-head h2 {
  margin: 6px 0 0;
  font-size: clamp(26px, 3vw, 38px);
  color: var(--psi-titulo);
}
.psi-cats-all { font-weight: 700; color: var(--psi-violeta); white-space: nowrap; }
.psi-cats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 40px;
}
.psi-cat {
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  box-shadow: var(--psi-shadow-sm);
  transition: transform .15s var(--psi-ease), box-shadow .15s var(--psi-ease);
}
.psi-cat:hover { transform: translateY(-4px); box-shadow: var(--psi-shadow); }
.psi-cat__img { display: block; height: 150px; overflow: hidden; }
.psi-cat__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s var(--psi-ease);
}
.psi-cat:hover .psi-cat__img img { transform: scale(1.06); }
.psi-cat__bar { display: block; height: 4px; }
.psi-cat__bar--1 { background: linear-gradient(90deg, #7b2ec7, #d5379b); }
.psi-cat__bar--2 { background: linear-gradient(90deg, #d5379b, #f2952a); }
.psi-cat__bar--3 { background: linear-gradient(90deg, #2fa85a, #14a5a5); }
.psi-cat__bar--4 { background: linear-gradient(90deg, #f2952a, #F5A623); }
.psi-cat__name {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 16px;
  font-family: "Fredoka", sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: var(--psi-titulo);
}
.psi-cat__name span { color: var(--psi-violeta); font-size: 17px; }
.psi-cat:hover .psi-cat__name { color: var(--psi-titulo); }

/* card CTA "¿Primera vez?" (degradado, cierra la grilla) */
.psi-cat--cta {
  background: linear-gradient(135deg, #7b2ec7, #d5379b, #f2952a);
  color: #fff;
  padding: 22px;
  justify-content: space-between;
  min-height: 240px;
  box-shadow: 0 16px 36px -16px rgba(123, 46, 199, .55);
}
.psi-cat--cta:hover { color: #fff; }
.psi-cat__kicker {
  font-family: "Manrope", sans-serif;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .14em;
  color: rgba(255, 255, 255, .9);
}
.psi-cat__cta-title {
  font-family: "Fredoka", sans-serif;
  font-weight: 600;
  font-size: 21px;
  line-height: 1.2;
  margin-top: auto;
}
.psi-cat__cta-link { font-weight: 700; margin-top: 6px; }
@media (max-width: 767px) {
  .psi-cats { grid-template-columns: repeat(2, 1fr); }
  .psi-cats-head { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   Chips de confianza bajo el hero (estilo mockup)
   ============================================================ */
.psi-chips {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin: 0 0 34px;
}
.psi-chip {
  display: flex;
  align-items: center;
  gap: 12px;
}
.psi-chip__ico {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  flex-shrink: 0;
}
.psi-chip__ico--v { background: #f1e6fb; color: #7b2ec7; }
.psi-chip__ico--m { background: #fde4f1; color: #d5379b; }
.psi-chip__ico--g { background: #e2f6ea; color: #2fa85a; }
.psi-chip__ico--t { background: #dff4f4; color: #14a5a5; }
.psi-chip strong { display: block; font-size: 14px; color: var(--psi-titulo); }
.psi-chip small { font-size: 12.5px; color: #8b7aa3; }
@media (max-width: 767px) {
  .psi-chips { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}

/* Flechas laterales del hero */
.psi-hero__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .9);
  color: var(--psi-violeta);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 8px 20px -8px rgba(90, 40, 140, .4);
  z-index: 3;
}
.psi-hero__arrow--prev { left: 14px; }
.psi-hero__arrow--next { right: 14px; }
.psi-hero__arrow:hover { background: #fff; }
@media (max-width: 767px) { .psi-hero__arrow { display: none; } }

/* ============================================================
   HERO carrusel de la home (estructura del mockup)
   ============================================================ */
@keyframes psi-floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.psi-hero {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  margin: 24px 0 36px;
  box-shadow: 0 24px 60px -30px rgba(90, 40, 140, .4);
}
.psi-hero__track {
  display: flex;
  transition: transform .65s cubic-bezier(.7, 0, .2, 1);
  will-change: transform;
}
.psi-hero__slide {
  flex: 0 0 100%;
  min-height: 460px;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
}
/* Geometría sagrada de fondo: malla de círculos entrelazados (flor de la
   vida, como en el logo) en SVG inline sobre los degradados pastel */
:root {
  --psi-geo-violeta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='62.35' viewBox='0 0 36 62.35'%3E%3Cg fill='none' stroke='%237b2ec7' stroke-opacity='.07' stroke-width='1'%3E%3Ccircle cx='0' cy='0' r='36'/%3E%3Ccircle cx='36' cy='0' r='36'/%3E%3Ccircle cx='18' cy='31.18' r='36'/%3E%3Ccircle cx='0' cy='62.35' r='36'/%3E%3Ccircle cx='36' cy='62.35' r='36'/%3E%3C/g%3E%3C/svg%3E");
  --psi-geo-blanca: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='62.35' viewBox='0 0 36 62.35'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.06' stroke-width='1'%3E%3Ccircle cx='0' cy='0' r='36'/%3E%3Ccircle cx='36' cy='0' r='36'/%3E%3Ccircle cx='18' cy='31.18' r='36'/%3E%3Ccircle cx='0' cy='62.35' r='36'/%3E%3Ccircle cx='36' cy='62.35' r='36'/%3E%3C/g%3E%3C/svg%3E");
}
.psi-hero__slide--1 { background: var(--psi-geo-violeta), radial-gradient(120% 120% at 0% 0%, #efe0ff, #f6ecff 45%, #e7f7ee); }
.psi-hero__slide--2 { background: var(--psi-geo-violeta), radial-gradient(120% 120% at 0% 0%, #ffe2f1, #fff0f6 45%, #e6f6ff); }
.psi-hero__slide--3 { background: var(--psi-geo-violeta), radial-gradient(120% 120% at 0% 0%, #e2fbef, #f0fff7 45%, #e6f3ff); }
.psi-hero__body {
  padding: 64px 56px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
}
.psi-hero__badge {
  align-self: flex-start;
  background: #fff;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .08em;
  padding: 7px 14px;
  border-radius: 999px;
}
.psi-hero__badge--1 { border: 1px solid #ecd9ff; color: #7b2ec7; }
.psi-hero__badge--2 { border: 1px solid #ffd6ea; color: #d5379b; }
.psi-hero__badge--3 { border: 1px solid #cdefdd; color: #1f9257; }
.psi-hero__title {
  font-family: "Fredoka", sans-serif;
  font-weight: 700;
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.02;
  margin: 0;
  color: #2a1840;
  text-wrap: balance;
}
.psi-grad {
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.psi-grad--1 { background-image: linear-gradient(90deg, #7b2ec7, #d5379b, #14a5a5); }
.psi-grad--2 { background-image: linear-gradient(90deg, #d5379b, #e14b8a, #f2952a); }
.psi-grad--3 { background-image: linear-gradient(90deg, #2fa85a, #14a5a5, #7b2ec7); }
.psi-hero__sub {
  font-size: 17px;
  line-height: 1.6;
  color: #5c4a72;
  max-width: 440px;
  margin: 0;
}
.psi-hero__ctas { display: flex; gap: 12px; margin-top: 6px; flex-wrap: wrap; }
.psi-cta {
  font-weight: 700;
  font-size: 15px;
  padding: 15px 28px;
  border-radius: 14px;
  color: #fff;
  display: inline-block;
}
.psi-cta:hover { color: #fff; transform: translateY(-2px); }
.psi-cta--grad1 { background: linear-gradient(135deg, #7b2ec7, #d5379b); box-shadow: 0 12px 26px -12px rgba(213, 55, 155, .7); }
.psi-cta--grad2 { background: linear-gradient(135deg, #d5379b, #f2952a); box-shadow: 0 12px 26px -12px rgba(242, 149, 42, .6); }
.psi-cta--grad3 { background: linear-gradient(135deg, #2fa85a, #14a5a5); box-shadow: 0 12px 26px -12px rgba(20, 165, 165, .6); }
.psi-cta--ghost {
  background: #fff;
  border: 1px solid #e7d6f5;
  color: #6b2fa0;
}
.psi-cta--ghost:hover { color: #6b2fa0; border-color: #d5b8ef; }
.psi-hero__art {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
}
.psi-hero__art img {
  width: 100%;
  max-height: 340px;
  object-fit: cover;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, .7);
  box-shadow: 0 18px 40px -18px rgba(90, 40, 140, .35);
  animation: psi-floaty 6s ease-in-out infinite;
}
.psi-hero__dots {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
}
.psi-hero__dots button {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: none;
  background: rgba(42, 24, 64, .2);
  cursor: pointer;
  padding: 0;
}
.psi-hero__dots button.is-active { background: #7b2ec7; width: 26px; border-radius: 999px; }

/* ── Cards de educación / comunidad / testimonio ── */
.psi-home-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin: 36px 0;
}
.psi-card {
  border-radius: 20px;
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 190px;
  transition: transform .15s var(--psi-ease), box-shadow .15s var(--psi-ease);
}
.psi-card:hover { transform: translateY(-3px); }
.psi-card__kicker { font-size: 11.5px; font-weight: 800; letter-spacing: .14em; opacity: .75; }
.psi-card h3 { margin: 0; font-size: 22px; }
.psi-card p { margin: 0; font-size: 14.5px; line-height: 1.55; }
.psi-card__link { font-weight: 700; margin-top: auto; }
.psi-card--edu {
  background: var(--psi-geo-violeta), var(--psi-crema);
  border: 1px solid var(--psi-gris);
  color: var(--psi-carbon);
}
.psi-card--edu h3 { color: var(--psi-titulo); }
.psi-card--edu .psi-card__link { color: var(--psi-violeta); }
.psi-card--comunidad {
  background: linear-gradient(135deg, #7b2ec7, #d5379b, #f2952a);
  color: #fff;
  box-shadow: 0 16px 36px -16px rgba(123, 46, 199, .55);
}
.psi-card--comunidad:hover { color: #fff; }
.psi-card--comunidad h3,
.psi-card--comunidad .psi-card__link,
.psi-card--comunidad:hover h3,
.psi-card--comunidad:hover .psi-card__link { color: #fff; }
.psi-card--comunidad p { color: rgba(255, 255, 255, .92); }
.psi-card--comunidad .psi-card__kicker { color: rgba(255, 255, 255, .9); opacity: 1; }
.psi-card--quote {
  background: #fff;
  border: 1px solid var(--psi-gris);
  justify-content: center;
  margin: 0;
}
.psi-card--quote blockquote {
  margin: 0;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--psi-titulo);
  border: none;
  padding: 0;
}
.psi-card--quote figcaption { color: #8b7aa3; font-size: 13px; }

@media (max-width: 767px) {
  .psi-hero { border-radius: 18px; margin: 12px 0 24px; }
  .psi-hero__slide { grid-template-columns: 1fr; min-height: 0; }
  .psi-hero__body { padding: 30px 24px 10px; gap: 14px; }
  .psi-hero__art { padding: 18px 24px 46px; }
  .psi-hero__art img { max-height: 210px; }
  .psi-home-cards { grid-template-columns: 1fr; }
}

/* ============================================================
   Barra de fortalezas (contenido editable vía módulo de texto/
   banner en Back Office — usar esta clase en el bloque HTML)
   ============================================================ */
.psi-usp {
  background: var(--psi-crema);
  border-top: 3px solid transparent;
  border-image: var(--psi-gradient) 1;
  padding: 28px 0;
  margin-bottom: 8px;
}
.psi-usp .item {
  color: var(--psi-violeta);
  font-weight: 700;
  font-family: "Fredoka", sans-serif;
  text-align: center;
}

/* ============================================================
   Bloques de la home / secciones
   ============================================================ */
.page-home > .container > .row,
#content.page-home {
  background: transparent;
}
.psi-section-cream { background: var(--psi-crema); border-radius: var(--psi-radius-lg); padding: 32px; }

.featured-products .h1, .products-section-title,
section > h2, section > h3 {
  font-family: "Fredoka", sans-serif;
  color: var(--psi-violeta);
  position: relative;
  padding-bottom: 10px;
}
.featured-products .h1::after, .products-section-title::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 56px; height: 4px;
  border-radius: var(--psi-radius-pill);
  background: var(--psi-gradient);
}

/* ============================================================
   Cards de producto — look moderno con hover
   ============================================================ */
.product-miniature {
  background: #fff;
  border-radius: var(--psi-radius);
  overflow: hidden;
  box-shadow: var(--psi-shadow-sm);
  transition: transform .2s var(--psi-ease), box-shadow .2s var(--psi-ease);
  height: 100%;
}
.product-miniature:hover {
  transform: translateY(-4px);
  box-shadow: var(--psi-shadow);
}
.product-miniature .thumbnail-container { border-radius: 0; box-shadow: none; }
.product-miniature .thumbnail-top { position: relative; overflow: hidden; }
.product-miniature .product-thumbnail img {
  transition: transform .35s var(--psi-ease);
}
.product-miniature:hover .product-thumbnail img { transform: scale(1.06); }

.product-miniature .product-description { padding: 14px 16px 16px; }
.product-miniature .product-title a {
  color: var(--psi-carbon);
  font-weight: 700;
  font-family: "Nunito Sans", sans-serif;
}
.product-miniature .product-title a:hover { color: var(--psi-magenta); }

.product-price-and-shipping .price,
.product-price, .current-price, .price {
  color: var(--psi-violeta);
  font-weight: 800;
  font-family: "Fredoka", sans-serif;
}
.product-price-and-shipping .regular-price { color: #9a9aa2; }

/* Badges de descuento / novedad / stock */
.product-flags .product-flag,
.discount, .on-sale {
  border-radius: var(--psi-radius-sm);
  font-weight: 700;
  text-transform: none;
  padding: 4px 10px;
}
.product-flags .discount, .discount-percentage, .discount-amount {
  background-color: var(--psi-ambar);
  color: var(--psi-carbon);
}
.product-flags .new { background-color: var(--psi-turquesa); color: #fff; }
.product-flags .online-only { background-color: var(--psi-violeta); color: #fff; }
.product-available .product-quantities,
.product-availability .available {
  color: var(--psi-verde);
  font-weight: 700;
}

.quick-view {
  background: #fff;
  border-radius: var(--psi-radius-pill);
  padding: 8px 16px;
  box-shadow: var(--psi-shadow-sm);
}

/* ============================================================
   Reaseguro (envío / pago seguro / devoluciones)
   ============================================================ */
#blockreassurance_home,
.block-reassurance {
  background: var(--psi-crema);
  border-radius: var(--psi-radius-lg);
  padding: 20px;
}
.block-reassurance-item i, .block-reassurance-item svg { color: var(--psi-turquesa); }

/* ============================================================
   Newsletter
   ============================================================ */
#ps_emailsubscription_block input[type="email"],
.block-newsletter input[type="email"] {
  border-radius: var(--psi-radius-pill) 0 0 var(--psi-radius-pill);
  border: none;
  padding: 10px 18px;
}
#ps_emailsubscription_block button,
.block-newsletter button {
  border-radius: 0 var(--psi-radius-pill) var(--psi-radius-pill) 0;
  background: var(--psi-naranjo);
  border-color: var(--psi-naranjo);
}

/* ============================================================
   Footer
   ============================================================ */
.footer-container {
  background: var(--psi-geo-blanca), linear-gradient(180deg, var(--psi-violeta) 0%, var(--psi-violeta-dark) 100%);
  color: #fff;
  padding-top: 40px;
  margin-top: 40px;
  position: relative;
  overflow: hidden;
}
/* (el colibrí del footer se quitó: chocaba con la burbuja del chat,
   que ahora lleva el colibrí como ícono) */
.footer-container h3, .footer-container .h3 {
  color: #fff;
  font-family: "Fredoka", sans-serif;
}
.footer-container a, .footer-container li a { color: #e6dcf0; }
.footer-container a:hover { color: var(--psi-ambar); }
.footer-container .block-social a {
  background: rgba(255,255,255,.12);
  border-radius: 50%;
}
.footer-container .block-social a:hover { background: var(--psi-naranjo); }

/* Títulos de columnas que classic pinta oscuros (#232323) — forzado:
   el markup varía entre bloques y las reglas de classic ganan en algunos */
.footer-container h3,
.footer-container .h3,
.footer-container .myaccount-title,
.footer-container .myaccount-title a,
.footer-container .block-contact .block-contact-title,
.footer-container .linklist .blockcms-title a,
.footer-container .block-contact .navbar-toggler .material-icons {
  color: #fff !important;
}

/* Texto e email del bloque de contacto (classic los deja gris #7a7a7a) */
.footer-container .block-contact { color: #e6dcf0; }
.footer-container .block-contact a { color: #fff; }
.footer-container .block-contact a:hover { color: var(--psi-ambar); }

/* ============================================================
   Listados (categoría/novedades/ofertas): ancho completo, 4 por fila
   — con el catálogo actual el sidebar de filtros no aporta
   ============================================================ */
@media (min-width: 768px) {
  #category #left-column,
  #new-products #left-column,
  #best-sales #left-column,
  #prices-drop #left-column { display: none; }
  #category #content-wrapper,
  #new-products #content-wrapper,
  #best-sales #content-wrapper,
  #prices-drop #content-wrapper {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
  }
}
@media (min-width: 1200px) {
  #category .products > .js-product,
  #new-products .products > .js-product,
  #best-sales .products > .js-product,
  #prices-drop .products > .js-product {
    width: 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }
}
/* títulos de listado sin mayúsculas gritadas */
.page-header h1, #js-product-list-header h1, .h1.page-title {
  text-transform: none;
}
/* selector de orden como pill */
.products-sort-order .select-title {
  border-radius: 999px;
  border: 1px solid var(--psi-gris);
  box-shadow: none;
  background: #fff;
}

/* ============================================================
   Página de categoría: sin huecos ni cajas vacías
   ============================================================ */
/* classic reserva ~220px para descripción/imagen de categoría inexistentes */
#category .block-category { min-height: 0; }
/* subcategorías sin imagen: ocultar el marco vacío, dejar solo el nombre */
#subcategories .subcategory-image { display: none; }
#subcategories ul li { border: 1px solid var(--psi-gris); border-radius: 14px; padding: 14px; }

/* ============================================================
   Páginas CMS: columna de lectura cómoda (~75 caracteres)
   ============================================================ */
#cms #content-wrapper { width: 100%; max-width: 100%; flex: 0 0 100%; }
#cms #left-column { display: none; }
#cms .page-content {
  max-width: 820px;
  margin: 0 auto;
  text-align: left;
  font-size: 16.5px;
}
#cms .page-content p, #cms .page-content li {
  text-align: left;
  line-height: 1.75;
  color: #4a3a5e;
}
#cms .page-content ul { padding-left: 22px; }
#cms .page-content li { margin-bottom: 8px; }
#cms .page-content li::marker { color: var(--psi-magenta); }
#cms .page-content h2 {
  margin: 38px 0 14px;
  font-size: 26px;
  color: var(--psi-titulo);
}
#cms .page-content h2:first-of-type { margin-top: 26px; }
#cms .page-content a { font-weight: 600; }
#cms .page-header h1 {
  max-width: 820px;
  margin: 10px auto 18px;
  font-size: clamp(28px, 3vw, 40px);
}
#cms .page-header h1::before {
  content: "APRENDE";
  display: block;
  font-family: "Manrope", sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .16em;
  color: var(--psi-magenta);
  margin-bottom: 6px;
}
#cms .breadcrumb { max-width: 820px; margin-left: auto; margin-right: auto; }
@media (max-width: 767px) {
  #cms .page-content, #cms .page-header h1, #cms .breadcrumb { padding: 0 4px; }
  #cms .page-content { font-size: 15.5px; }
}

/* ============================================================
   Detalle de producto (ficha)
   ============================================================ */
.product-quantity .btn { border-radius: var(--psi-radius-sm); }
#product-availability .stock-available { color: var(--psi-verde); font-weight: 700; }
.product-cover, .product-images img { border-radius: var(--psi-radius); }

/* ============================================================
   Utilidades
   ============================================================ */
.psi-gradient-text {
  background: var(--psi-gradient);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.psi-badge {
  display: inline-block;
  background: var(--psi-ambar);
  color: var(--psi-carbon);
  border-radius: var(--psi-radius-pill);
  padding: 4px 14px;
  font-weight: 700;
  font-size: .85rem;
}

/* ============================================================
   Layout de header (desktop): logo grande centrado arriba,
   menú centrado debajo — estilo "logo protagonista"
   ============================================================ */
@media (min-width: 768px) {
  /* barra violeta fuera en desktop: cuenta y carrito viven en la fila única */
  #header .header-nav { display: none; }

  #header .header-top { padding: 10px 0; }
  #header .header-top > .container { max-width: 1280px; width: 100%; }
  .psi-header-row {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: nowrap;
    padding: 0 24px;
  }
  .psi-header-logo {
    width: auto;
    max-width: none;
    padding: 0;
    float: none;
    flex-shrink: 0;
    position: relative;
  }
  /* colibrí estático a la izquierda del wordmark */
  .psi-header-logo { padding-left: 46px; }
  .psi-header-logo::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    background: url(../img/colibri.png) no-repeat center / contain;
    pointer-events: none;
  }
  .psi-header-logo h1 { margin: 0; }
  .psi-header-logo img { max-height: 52px; width: auto; }

  .psi-header-mid {
    flex: 1;
    min-width: 0;
    width: auto;
    float: none;
    display: flex;
    align-items: center;
    gap: 16px;
  }
  #_desktop_top_menu { float: none; width: auto; flex: 1; min-width: 0; }
  #_desktop_top_menu .top-menu {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap; /* envolver antes que solapar las acciones */
    gap: 0;
  }
  #_desktop_top_menu .top-menu > li > a { padding: 6px 10px; }
  #search_widget {
    float: none;
    margin: 0;
    width: clamp(150px, 15vw, 210px);
    max-width: 210px;
    flex-shrink: 1;
    min-width: 0;
  }

  .psi-header-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
    margin-left: auto;
  }
  .psi-header-actions .user-info { margin: 0; }
  .psi-header-actions .user-info a {
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
  }
  .psi-header-actions .user-info a,
  .psi-header-actions .user-info .material-icons {
    color: #3f2d55;
    font-weight: 600;
  }
  .psi-header-actions .blockcart,
  .psi-header-actions .blockcart a,
  .psi-header-actions .blockcart span,
  .psi-header-actions .blockcart .material-icons {
    color: #fff !important;
  }
  /* acciones compactas siempre: solo íconos + contador (como el mockup) */
  .psi-header-actions .user-info span { display: none; }
  .psi-header-actions .user-info .material-icons { font-size: 26px; }
  .psi-header-actions .blockcart span:not(.cart-products-count) { display: none; }
  .psi-header-actions .blockcart { padding: 9px 14px; }
  .psi-header-logo img { max-height: 46px; }
  .psi-header-actions .blockcart {
    background: linear-gradient(135deg, #7b2ec7, #d5379b);
    border-radius: 999px;
    padding: 9px 18px;
    height: auto;
    box-shadow: 0 10px 22px -10px rgba(123, 46, 199, .5);
  }
  .psi-header-actions .blockcart a,
  .psi-header-actions .blockcart .material-icons,
  .psi-header-actions .blockcart .cart-products-count {
    color: #fff;
  }
  .psi-header-actions .blockcart .cart-products-count {
    background: transparent;
    padding: 0 0 0 4px;
    box-shadow: none;
  }
}

/* anchos medios (768-1249): acciones compactas a íconos, buscador corto */
@media (min-width: 768px) and (max-width: 1249px) {
  .psi-header-actions .user-info span { display: none; }
  .psi-header-actions .blockcart span:not(.cart-products-count) { display: none; }
  .psi-header-actions .blockcart { padding: 9px 12px; }
  #search_widget { width: clamp(130px, 14vw, 190px); }
  .psi-header-logo img { max-height: 44px; }
}

/* menú sin mayúsculas forzadas, en Manrope (gana a las reglas de classic) */
#_desktop_top_menu .top-menu a,
#_desktop_top_menu .top-menu[data-depth="0"] > li > a {
  font-family: "Manrope", sans-serif !important;
  font-weight: 600;
  font-size: 14.5px;
  text-transform: none !important;
  letter-spacing: 0;
  color: #3f2d55;
}

/* ============================================================
   Carrusel gigante: a todo el ancho del viewport (full-bleed)
   ============================================================ */
#wrapper { overflow-x: clip; }
@media (min-width: 768px) {
  #carousel,
  #carousel.carousel {
    width: 100vw;
    max-width: 100vw;
    margin: 0 0 28px calc(50% - 50vw);
    border-radius: 0;
    box-shadow: none;
  }
  #carousel .carousel-item img {
    width: 100%;
    height: min(540px, 36vw);
    object-fit: cover;
  }
}

/* ============================================================
   Barra superior (header-nav): sin cajas grises, iconos claros
   ============================================================ */
#header .header-nav a,
#header .header-nav .material-icons {
  color: #fff;
}
#header .header-nav .blockcart,
#header .header-nav .blockcart.active {
  background: transparent;
  height: auto;
}
#header .header-nav .blockcart a,
#header .header-nav .blockcart .material-icons,
#header .header-nav .user-info a,
#header .header-nav .user-info .material-icons {
  color: #fff;
}

/* ============================================================
   Carrusel: contención (nunca desbordar el viewport)
   ============================================================ */
#carousel,
.carousel {
  max-width: 100%;
  overflow: hidden;
}
#carousel .carousel-inner { width: 100%; }
#carousel .carousel-item img { width: 100%; height: auto; }
/* Con un solo slide no hay transiciones: fija la posición para que el
   JS del carrusel (Bootstrap viejo de classic, que anima `left`) no deje
   NI el contenedor NI los slides atascados a mitad de animación — se
   comprobó en vivo un left:177px (50% del ancho) sobre #carousel mismo.
   (Quitar estos !important si algún día se agregan más slides.) */
#carousel { left: 0 !important; }
#carousel .carousel-item { left: 0 !important; }
/* Con un solo slide, flechas e indicadores no aportan (quitar si se agregan slides) */
#carousel .direction,
#carousel .carousel-indicators { display: none; }

/* ============================================================
   Responsive — mobile first (la mayoría del tráfico es móvil)
   ============================================================ */
@media (max-width: 767px) {
  body { overflow-x: hidden; }

  /* Barra superior blanca en móvil: el logo va aquí y necesita fondo claro.
     Layout convencional: hamburguesa | logo centrado | cuenta | carrito */
  #header .header-nav {
    background: #fff;
    border-bottom: 1px solid var(--psi-gris);
  }
  #header .header-nav .mobile {
    display: flex;
    align-items: center;
    padding: 8px 0;
  }
  #header .header-nav .mobile #menu-icon { order: 1; }
  #header .header-nav .mobile .top-logo {
    order: 2;
    flex: 1 1 auto;
    text-align: center;
    margin: 0;
    max-width: none;
  }
  #header .header-nav .mobile #_mobile_user_info { order: 3; }
  #header .header-nav .mobile #_mobile_cart { order: 4; margin-left: 6px; }
  .top-logo img { max-height: 40px; width: auto; }

  /* Iconos violeta — misma especificidad que las reglas desktop para ganarles */
  #header .header-nav a,
  #header .header-nav .material-icons,
  #header .header-nav #menu-icon .material-icons,
  #header .header-nav .blockcart a,
  #header .header-nav .blockcart .material-icons,
  #header .header-nav .user-info a,
  #header .header-nav .user-info .material-icons {
    color: var(--psi-violeta);
  }

  /* Badge del carrito discreto, no un botón gigante */
  .blockcart .cart-products-count,
  #_desktop_cart .cart-products-count {
    font-size: .75rem;
    padding: 1px 7px;
    vertical-align: top;
  }

  /* Footer móvil: el acordeón integrado al violeta, sin paneles grises
     (classic pinta .links ul con #f6f6f6 y los items en #232323) */
  .footer-container .links ul { background-color: transparent; }
  .footer-container .links ul > li {
    border-bottom: 1px solid rgba(255, 255, 255, .15);
  }
  .footer-container .links ul > li a { color: #e6dcf0; }
  .footer-container .links a span.link-item {
    background: transparent;
    color: #fff;
  }
  .footer-container .links .title {
    border-bottom: 1px solid rgba(255, 255, 255, .2);
  }

  #carousel { margin: 12px 0; border-radius: var(--psi-radius); box-shadow: var(--psi-shadow); }
  /* El banner 2200x680 queda ilegible a ancho móvil: recorte centrado más
     alto — el logo está centrado en el banner, así que se ve completo */
  #carousel .carousel-item img { height: 230px; object-fit: cover; }
  #carousel .caption { padding: 18px 20px; }
  #carousel .carousel-control { width: 34px; height: 34px; }
  .psi-section-cream { padding: 20px; border-radius: var(--psi-radius); }
  .btn-primary, .add-to-cart { padding: 10px 20px; }
}