/* =========================================================
   RINCÓN CREATIVO — rincon.css
   Capa visual pastel, cálida y artesanal. Se carga última (ver
   inc/enqueue.php) y pisa lo justo de main.css y de las hojas de cada
   página: la paleta ya llega por las variables de :root, acá se
   resuelven tipografía de títulos, botones, bandas de color, hero y
   detalles decorativos.

   Regla de contraste: nunca texto blanco sobre pastel. Las bandas que
   antes eran oscuras toman un fondo pastel y redefinen localmente
   --color-white (que ahí era el color del texto) a tinta, así todo lo que
   esas secciones pintaban "claro sobre oscuro" pasa a "tinta sobre
   pastel" solo.
   ========================================================= */

/* ---------- Base ---------- */
body {
  background: var(--rosa-claro);
  color: var(--texto);
  font-family: var(--font-body);
}

h1,
h2,
h3 {
  font-family: var(--font-script);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.3;
  color: var(--tinta);
}

h4,
h5,
h6 {
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--tinta);
}

p {
  color: inherit;
}

/* Links dentro de texto: tinta con subrayado rosa (el rosa como color de
   texto sobre rosa claro no se lee). */
.entry-content a,
.site-main p a {
  color: var(--tinta);
  text-decoration: underline;
  text-decoration-color: var(--rosa);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: text-decoration-color 0.25s ease;
}

.entry-content a:hover,
.site-main p a:hover {
  text-decoration-color: var(--menta-medio);
}

::selection {
  background: var(--rosa);
  color: var(--tinta);
}

:focus-visible {
  outline: 2px solid var(--tinta);
  outline-offset: 3px;
}

/* Mobile first: más aire entre secciones a medida que crece la pantalla. */
.home-section {
  padding: 3.5rem 0;
}

@media (min-width: 768px) {
  .home-section {
    padding: 5rem 0;
  }
}

@media (min-width: 1100px) {
  .home-section {
    padding: 6.5rem 0;
  }
}

/* ---------- Títulos con pincelada rosa ---------- */
.home-section__title,
.home-flora__title,
.home-journal__title,
.bioself-shop__title,
.metodo-hero__title,
.page-title,
.entry-title {
  font-family: var(--font-script);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--tinta);
}

.home-section__title::after,
.home-flora__title::after,
.home-journal__title::after,
.bioself-shop__title::after,
.metodo-hero__title::after {
  content: "";
  display: block;
  width: 7.5rem;
  max-width: 60%;
  height: 0.75rem;
  margin: 0.5rem auto 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M3 8c18-5 34-6 52-3s36 4 62-3' fill='none' stroke='%23F2A6B6' stroke-width='5' stroke-linecap='round'/%3E%3Cpath d='M10 10c20-3 44-3 66-1' fill='none' stroke='%23F2A6B6' stroke-width='2' stroke-linecap='round' opacity='.55'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

/* Títulos alineados a la izquierda: la pincelada también. */
.home-journal__title::after {
  margin-left: 0;
}

/* ---------- Botones ---------- */
.button-primary,
.button-outline,
.home-arquitectura__cta,
.home-journal__subscribe,
.bioself-lead-form button,
.bioself-coming-soon__form button,
.bioself-product-card .bioself-add-to-cart,
.bioself-product__cart .single_add_to_cart_button,
.bioself-product-reviews #respond .form-submit input,
.bioself-shop__filter-toggle,
.bioself-shop-row__cta,
.bioself-cart .button,
.bioself-cart button.button,
.bioself-cart input.button,
.bioself-cart .wc-proceed-to-checkout .checkout-button,
.woocommerce-cart .return-to-shop .button,
.woocommerce-account .button,
.woocommerce-account button.button,
.woocommerce-account input.button,
.woocommerce-account .woocommerce-Button,
.woocommerce-account .woocommerce-form-login__submit,
.woocommerce-account .woocommerce-form-register__submit,
.woocommerce-account .woocommerce-EditAccountForm button[type="submit"],
.woocommerce-account .woocommerce-address-fields button[type="submit"],
.woocommerce-account .woocommerce-ResetPassword button[type="submit"],
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
  background: var(--rosa);
  color: var(--tinta);
  border: 0;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 700;
  box-shadow: var(--shadow-soft);
  transition:
    background-color 0.3s ease,
    transform 0.25s ease,
    box-shadow 0.3s ease;
}

.button-primary:hover,
.button-primary:focus-visible,
.button-outline:hover,
.button-outline:focus-visible,
.home-flora__cta:hover,
.home-flora__cta:focus-visible,
.home-arquitectura__cta:hover,
.home-arquitectura__cta:focus-visible,
.home-journal__subscribe:hover,
.bioself-lead-form button:hover,
.bioself-coming-soon__form button:hover,
.bioself-product-card .bioself-add-to-cart:hover,
.bioself-product__cart .single_add_to_cart_button:hover,
.bioself-product-reviews #respond .form-submit input:hover,
.bioself-shop__filter-toggle:hover,
.bioself-shop-row:hover .bioself-shop-row__cta,
.bioself-cart .button:hover,
.bioself-cart button.button:hover,
.bioself-cart input.button:hover,
.bioself-cart .wc-proceed-to-checkout .checkout-button:hover,
.woocommerce-cart .return-to-shop .button:hover,
.woocommerce-account .button:hover,
.woocommerce-account button.button:hover,
.woocommerce-account input.button:hover,
.woocommerce-account .woocommerce-Button:hover,
.woocommerce-account .woocommerce-form-login__submit:hover,
.woocommerce-account .woocommerce-form-register__submit:hover,
.woocommerce-account .woocommerce-EditAccountForm button[type="submit"]:hover,
.woocommerce-account .woocommerce-address-fields button[type="submit"]:hover,
.woocommerce-account .woocommerce-ResetPassword button[type="submit"]:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
  background: var(--menta-medio);
  color: var(--tinta);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(26, 26, 26, 0.08);
}

/* Secundario: contorno tinta sobre transparente. */
.button-outline {
  background: transparent;
  border: 2px solid var(--tinta);
  box-shadow: none;
}

/* ---------- Badges y pequeños acentos ---------- */
.site-header__cart-count,
.bioself-product-card .onsale,
.bioself-badge,
.woocommerce span.onsale {
  background: var(--menta);
  color: var(--tinta);
  font-weight: 700;
}

.bioself-rituales .page-numbers.current,
.bioself-shop__pagination .page-numbers.current,
.bioself-shop__pagination .page-numbers:hover,
.woocommerce-account .woocommerce-pagination .current,
.woocommerce-MyAccount-navigation li.is-active a {
  background: var(--rosa);
  color: var(--tinta);
}

.bioself-price-slider__range {
  background: var(--rosa);
}

.bioself-ritual__num {
  background: var(--menta);
  color: var(--tinta);
}

.bioself-toast {
  background: var(--tinta);
  color: var(--rosa-claro);
  border-radius: var(--radius-sm);
}

/* ---------- Bordes redondeados y sombras suaves ---------- */
.bioself-product-card,
.home-rituales__card,
.metodo-pillar,
.needs-flip__face,
.bioself-shop-row,
.mini-cart,
.bioself-shipping-announce,
.bioself-cart .cart_totals,
.woocommerce-account .woocommerce-MyAccount-content,
.woocommerce-MyAccount-navigation {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}

.bioself-product-card img,
.home-journal-card__media,
.bioself-gallery img,
.home-video__frame {
  border-radius: var(--radius-sm);
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="search"],
input[type="number"],
select,
textarea {
  border-radius: var(--radius-sm);
  border-color: var(--color-border);
  font-family: var(--font-body);
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--rosa);
  outline: none;
  box-shadow: 0 0 0 3px rgba(242, 166, 182, 0.35);
}

/* ---------- Header ---------- */
.site-header {
  background: #ffffff;
  border-bottom: 0;
  box-shadow: var(--shadow-soft);
}

.site-header__logo-name {
  font-family: var(--font-script);
  font-weight: 400;
  color: var(--tinta);
}

.header-marquee .bioself-marquee__item {
  color: var(--tinta);
}

.header-marquee--dark .bioself-marquee__item {
  color: var(--rosa-claro);
}

/* ---------- Hero (slider de fotos) ----------
   El texto va sobre la foto con el velo oscuro de main.css, así que acá
   sí queda claro: pisa el color tinta de los títulos de la base. */
.home-hero__caption h1,
.home-hero__caption p {
  color: #ffffff;
  text-shadow:
    0 2px 4px rgba(26, 26, 26, 0.7),
    0 6px 28px rgba(26, 26, 26, 0.6);
}

/* Las fotos del slider son muy claras (y traen texto propio): el velo de
   main.css no alcanzaba para que el blanco se lea. */
.home-hero__caption {
  background: linear-gradient(
    90deg,
    rgba(26, 26, 26, 0.8) 0%,
    rgba(26, 26, 26, 0.55) 45%,
    rgba(26, 26, 26, 0) 80%
  );
}

@media (max-width: 768px) {
  .home-hero__caption {
    background: linear-gradient(
      180deg,
      rgba(26, 26, 26, 0) 0%,
      rgba(26, 26, 26, 0.82) 60%
    );
  }
}

/* ---------- Bandas de color (antes oscuras) ---------- */
.site-footer,
.home-flora,
.home-marquee,
.home-arquitectura,
.home-journal,
.home-metodo,
.metodo-hero,
.metodo-closing {
  --color-white: var(--tinta);
  color: var(--texto);
}

/* Estas cuatro usaban --color-bg como color de texto. */
.home-arquitectura,
.home-journal,
.metodo-hero,
.metodo-closing {
  --color-bg: var(--tinta);
}

.site-footer,
.home-arquitectura,
.home-metodo,
.metodo-closing {
  background: var(--lila);
}

.home-flora,
.home-journal,
.metodo-hero {
  background: var(--menta);
}

.home-marquee {
  background: var(--rosa);
}

.home-metodo .home-metodo__pillars .metodo-pillar .metodo-pillar__letter,
.home-metodo .home-metodo__pillars .metodo-pillar .metodo-pillar__initial {
  color: var(--tinta);
}

/* Textos que en main.css tenían un blanco cálido fijo (rgba). */
.site-footer,
.site-footer__bottom,
.home-flora__text,
.home-journal__subtitle,
.home-journal-card__author,
.home-metodo__pillars .metodo-pillar__text,
.metodo-eyebrow--light,
.metodo-hero__lead,
.metodo-closing__text,
.home-marquee .bioself-marquee__item {
  color: var(--texto);
}

.home-flora__eyebrow,
.metodo-eyebrow {
  color: var(--tinta);
}

.home-flora__isotipo {
  fill: var(--rosa);
}

.home-marquee .bioself-marquee__dot {
  color: var(--tinta);
  opacity: 0.5;
}

.metodo-hero__watermark {
  color: rgba(26, 26, 26, 0.05);
}

.site-footer__bottom,
.home-journal-swiper,
.home-journal-card,
.home-journal-card__media {
  border-color: rgba(26, 26, 26, 0.12);
}

.home-journal__filter {
  border-color: rgba(26, 26, 26, 0.3);
}

.home-journal__filter.is-active,
.home-journal__filter:hover {
  background: var(--rosa);
  border-color: var(--rosa);
  color: var(--tinta);
}

.home-journal__arrow:hover {
  background: var(--rosa);
  border-color: var(--rosa);
  color: var(--tinta);
}

/* Tarjetas del journal: si no hay foto, degradé pastel en lugar de oscuro. */
.home-journal-card__media--sage,
.home-journal-card__media--deepforest {
  background: linear-gradient(155deg, var(--menta-medio) 0%, var(--rosa-claro) 130%);
}

.home-journal-card__media--taupe,
.home-journal-card__media--dark {
  background: linear-gradient(155deg, var(--lila) 0%, var(--rosa-claro) 130%);
}

.home-metodo__pillars .metodo-pillar {
  background: rgba(255, 255, 255, 0.55);
  border: 0;
  border-top: 3px solid var(--rosa);
}

.home-metodo__pillars .metodo-pillar:hover {
  background: rgba(255, 255, 255, 0.8);
  box-shadow: var(--shadow-soft);
}

/* Footer */
.site-footer__logo {
  font-family: var(--font-script);
  font-weight: 400;
  font-size: 1.75rem;
  letter-spacing: 0;
  color: var(--tinta);
}

.site-footer__logo::after {
  content: " ♥";
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--rosa);
}

.site-footer__col h3 {
  font-family: var(--font-body);
  font-weight: 800;
  color: var(--tinta);
}

.site-footer__col a:hover {
  color: var(--tinta);
  text-decoration: underline;
  text-decoration-color: var(--rosa);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.site-footer .bioself-lead-form input[type="email"] {
  background: #ffffff;
  border-color: transparent;
  color: var(--tinta);
}

.site-footer .bioself-lead-form input[type="email"]::placeholder {
  color: var(--color-text-muted);
}

.site-footer .bioself-lead-form input[type="email"]:focus {
  border-color: var(--rosa);
}

.site-footer .bioself-lead-form__thanks {
  color: var(--tinta);
}

/* ---------- Corazoncitos decorativos ---------- */
.home-flora__eyebrow::before,
.home-flora__eyebrow::after {
  content: "♥";
  margin: 0 0.5em;
  color: var(--rosa);
}

.home-flora .home-flora__eyebrow::before,
.home-flora .home-flora__eyebrow::after {
  color: var(--tinta);
  opacity: 0.6;
}

/* ---------- Tienda: fila de producto ----------
   shop.css pasaba el logo a silueta blanca (filter), pensado para un logo
   con fondo transparente; con el logo actual (fondo opaco) quedaba un
   cuadrado blanco. Se muestra con sus colores, en un círculo. El velo
   pasa de verde oliva a tinta para que la descripción blanca se lea. */
.bioself-shop-row__logo {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 50%;
  filter: none;
  box-shadow: 0 4px 16px rgba(26, 26, 26, 0.18);
}

.bioself-shop-row__bg::before {
  background: linear-gradient(
    180deg,
    rgba(26, 26, 26, 0.3),
    rgba(26, 26, 26, 0.55)
  );
}

.bioself-shop-row__desc {
  color: #ffffff;
  text-shadow: 0 2px 8px rgba(26, 26, 26, 0.5);
}

/* ---------- Páginas de contenido (Nosotros, etc.: page.php) ----------
   Ancho de lectura cómodo y los bloques del editor con la paleta. */
.site-main.container > article.type-page {
  max-width: 760px;
  margin: 0 auto;
  padding: 2.5rem 0 4rem;
}

.site-main.container > article.type-page h1.page-title {
  margin: 0 0 1.5rem;
  font-size: clamp(2.2rem, 1.8rem + 2vw, 3.2rem);
}

.site-main.container > article.type-page h2 {
  margin: 2.5rem 0 0.75rem;
  font-size: clamp(1.6rem, 1.4rem + 1vw, 2rem);
}

.site-main.container > article.type-page p,
.site-main.container > article.type-page li {
  font-size: 1.05rem;
  line-height: 1.75;
}

.site-main.container > article.type-page .wp-block-list {
  padding-left: 1.25rem;
}

.site-main.container > article.type-page .wp-block-list li {
  margin-bottom: 0.6rem;
}

.site-main.container > article.type-page .wp-block-list li::marker {
  color: var(--rosa);
}

/* Links dentro de listas: mismo subrayado rosa que en los párrafos. */
.site-main.container > article.type-page li a {
  color: var(--tinta);
  text-decoration: underline;
  text-decoration-color: var(--rosa);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.site-main .wp-block-buttons {
  gap: 0.75rem;
  margin-top: 2.5rem;
}

.site-main .wp-block-button__link {
  padding: 0.8rem 1.75rem;
  background: var(--rosa);
  border: 2px solid var(--rosa);
  border-radius: 999px;
  color: var(--tinta);
  font-family: var(--font-body);
  font-weight: 700;
  text-decoration: none;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.site-main .wp-block-button__link:hover,
.site-main .wp-block-button__link:focus-visible {
  background: var(--menta-medio);
  border-color: var(--menta-medio);
  color: var(--tinta);
}

.site-main .wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  border-color: var(--tinta);
}

.site-main .wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: var(--menta-medio);
  border-color: var(--menta-medio);
}

/* ---------- Mini-carrito en celular ----------
   En main.css el panel se alinea al borde derecho del ícono del carrito;
   en mobile a la derecha del ícono todavía está el menú, así que el panel
   se salía por la izquierda. Acá se ancla al header entero (sticky, es su
   bloque contenedor) con margen parejo a los dos lados. */
@media (max-width: 600px) {
  .site-header__cart-wrap {
    position: static;
  }

  .site-header .mini-cart {
    top: calc(100% + 8px);
    left: 12px;
    right: 12px;
    width: auto;
    max-width: none;
    box-shadow: 0 16px 40px rgba(26, 26, 26, 0.16);
  }
}