:root {
  /* Nueva paleta MarthyGlow: blanco, negro y coral */
  --blanco-roto: #F7F7F5;
  /* base principal */
  --rosa-nude: #F7F7F5;
  /* color de marca y llamadas a la acción */
  --rosa-claro: #C40E48;
  --marca: #C40E48;
  /* acentos y detalles */
  --negro: #000000;
  /* 5% CTA / autoridad */
  --gris: #454545;
  /* textos largos */
  --white: #FFFFFF;
  --radius-lg: 18px;
  --radius-md: 10px;
  --shadow-soft: 0 18px 42px -26px rgba(0, 0, 0, 0.28);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  color: var(--gris);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  margin: 0;
  color: var(--negro);
  letter-spacing: -0.01em;
}

p {
  line-height: 1.7;
  color: var(--gris);
  margin: 0;
}

a {
  text-decoration: none;
  color: inherit;
}

.eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--rosa-claro);
}

.wrap {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 28px;
}

section {
  padding: 90px 0;
}

.home-page section {
  padding: 68px 0;
}

.home-page .hero {
  padding: 64px 0 76px;
}

.home-page .final-cta {
  padding: 62px 0;
}

@media(max-width:720px) {
  section {
    padding: 56px 0;
  }

  .home-page section {
    padding: 44px 0;
  }

  .home-page .hero {
    padding: 42px 0 52px;
  }

  .home-page .final-cta {
    padding: 46px 0;
  }

  .wrap {
    padding: 0 20px;
  }
}

/* ---------- NAV ---------- */
header.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.nav-inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 14px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo-mark {
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo-mark img {
  height: 72px;
  width: auto;
  display: block;
  object-fit: contain;
}

.nav .logo-mark img {
  margin: -10px 0;
}

nav.menu {
  display: flex;
  align-items: center;
  gap: 34px;
}

nav.menu a {
  font-size: .86rem;
  font-weight: 600;
  letter-spacing: .03em;
  color: var(--negro);
  position: relative;
  padding: 4px 5px;
  transition: color .25s ease;
}

nav.menu a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 1.5px;
  background: var(--marca);
  transition: width .25s ease;
}

nav.menu a:hover::after {
  width: 100%;
}

.nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--marca);
  color: var(--white)!important;
  padding: 21px 22px;
  border-radius: 999px;
  font-weight: 800;
  font-size: .92rem;
  transition: transform .2s ease, background .2s ease;
}

nav.menu a.nav-cta {
  padding: 22px 22px;
  letter-spacing: .045em;
  word-spacing: .08em;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: 0 8px 20px rgba(196, 14, 72, .20);
}

nav.menu a.nav-cta::after {
  display: none;
}

.nav-cta:hover {
  background: var(--negro);
  transform: translateY(-1px);
}

.menu-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 1.4rem;
  cursor: pointer;
  color: var(--negro);
}

@media(max-width:860px) {
  nav.menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--blanco-roto);
    flex-direction: column;
    align-items: flex-start;
    padding: 18px 28px 22px;
    gap: 14px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    display: none;
  }

  nav.menu.open {
    display: flex;
  }

  .home-page nav.menu a[href="#inicio"] {
    display: none;
  }

  nav.menu .nav-cta {
    width: 100%;
    padding: 13px 18px;
    margin-top: 4px;
  }

  .nav .logo-mark img {
    height: 64px;
    margin: -8px 0;
  }

  .menu-toggle {
    display: block;
  }
}

/* ---------- HERO ---------- */
.hero {
  position: relative;
  padding: 80px 0 100px;
  overflow: hidden;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 56px;
  align-items: center;
}

@media(max-width:900px) {
  .hero-grid {
    grid-template-columns: 1fr;
  }
}

.hero h1 {
  font-size: clamp(2.1rem, 4.4vw, 3.3rem);
  line-height: 1.12;
  margin-top: 16px;
}

.hero h1 em {
  font-style: italic;
  color: var(--rosa-claro);
}

.hero p.lead {
  margin-top: 20px;
  font-size: 1.05rem;
  max-width: 480px;
}

.hero-ctas {
  margin-top: 34px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 15px 26px;
  border-radius: 999px;
  font-weight: 700;
  font-size: .9rem;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
  cursor: pointer;
  border: none;
}

.btn-primary {
  background: var(--negro);
  color: var(--white);
  box-shadow: var(--shadow-soft);
}

.btn-primary:hover {
  background: var(--marca);
  transform: translateY(-2px);
}

.btn-ghost {
  background: transparent;
  color: var(--negro);
  border: 1.5px solid var(--negro);
}

.btn-ghost:hover {
  background: var(--negro);
  color: var(--white);
}

.hero-visual {
  position: relative;
  aspect-ratio: 4/5;
  border-radius: var(--radius-lg);
  background:
    linear-gradient(160deg, var(--rosa-nude) 0%, var(--white) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hero-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero-badge {
  position: absolute;
  bottom: 22px;
  left: 22px;
  right: 22px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(6px);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.hero-badge .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--negro);
  flex-shrink: 0;
}

.hero-badge p {
  font-size: .82rem;
  color: var(--negro);
  font-weight: 600;
}

.hero-trust {
  margin-top: 48px;
  display: flex;
  gap: 34px;
  flex-wrap: wrap;
}

.trust-item .num {
  font-family: 'Playfair Display', serif;
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--negro);
  display: block;
}

.trust-item .lbl {
  font-size: .8rem;
  color: var(--gris);
}

/* ---------- TRUST STRIP ---------- */
.trust-strip {
  padding: 28px 0;
  background: var(--blanco-roto);
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.home-page .trust-strip {
  padding: 28px 0;
}

.trust-strip-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.trust-strip-grid div {
  min-height: 94px;
  padding: 18px;
  border-radius: var(--radius-md);
  background: var(--blanco-roto);
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.trust-strip-grid strong {
  display: block;
  color: var(--negro);
  font-size: .9rem;
  margin-bottom: 6px;
}

.trust-strip-grid span {
  display: block;
  color: var(--gris);
  font-size: .82rem;
  line-height: 1.45;
}

@media(max-width:900px) {
  .trust-strip-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media(max-width:560px) {
  .home-page .trust-strip {
    padding: 22px 0;
  }

  .trust-strip-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- SECTION HEAD ---------- */
.sec-head {
  max-width: 620px;
  margin-bottom: 44px;
}

.sec-head h2 {
  font-size: clamp(1.55rem, 3vw, 2.15rem);
  margin-top: 10px;
}

.sec-head p {
  margin-top: 14px;
}

.sec-head.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* ---------- CATEGORY LINKS (TIENDA) ---------- */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

@media(max-width:900px) {
  .cat-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media(max-width:520px) {
  .cat-grid {
    grid-template-columns: 1fr;
  }
}

.cat-card {
  display: block;
  background: var(--white);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.06);
  transition: transform .25s ease, box-shadow .25s ease;
}

.cat-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-soft);
}

.cat-img {
  aspect-ratio: 1/1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(150deg, var(--rosa-nude), var(--blanco-roto));
}

.cat-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}

.cat-card:hover .cat-img img {
  transform: scale(1.04);
}

.cat-body {
  padding: 18px 20px 22px;
}

.cat-body .tag {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--rosa-claro);
}

.cat-body h3 {
  font-size: 1.05rem;
  margin-top: 6px;
  font-family: 'Playfair Display', serif;
}

.cat-body span.arrow {
  display: inline-block;
  margin-top: 10px;
  font-size: .82rem;
  font-weight: 700;
  color: var(--negro);
}

/* ---------- ABOUT / FOTO ---------- */
.about {
  background: var(--blanco-roto);
}

.about-grid {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 56px;
  align-items: center;
}

@media(max-width:900px) {
  .about-grid {
    grid-template-columns: 1fr;
  }
}

.photo-frame {
  position: relative;
  aspect-ratio: 3/4;
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, var(--rosa-nude), var(--rosa-claro));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.photo-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: var(--radius-lg);
}

.photo-frame .placeholder-label {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--negro);
  background: rgba(255, 255, 255, 0.75);
  padding: 6px 14px;
  border-radius: 999px;
}

.about-copy p {
  margin-bottom: 16px;
  font-size: 1rem;
}

.about-copy .quote {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 1.3rem;
  color: var(--negro);
  margin-top: 22px;
  line-height: 1.5;
}

.about-signature {
  margin-top: 24px;
  font-weight: 700;
  color: var(--negro);
  font-size: .9rem;
}

/* ---------- GUIA POR NECESIDAD ---------- */
.need-guide {
  background: var(--white);
}

.need-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 10px;
}

.need-card {
  min-height: 238px;
  padding: 0;
  border-radius: var(--radius-md);
  background: var(--blanco-roto);
  border: 1px solid rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease;
}

.need-img {
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--rosa-nude);
}

.need-img img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform .35s ease;
}

.need-card:hover .need-img img {
  transform: scale(1.04);
}

.need-card-content {
  width: 100%;
  padding: 22px 24px 24px;
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
}

.need-card:hover {
  transform: translateY(-4px);
  background: var(--white);
  box-shadow: var(--shadow-soft);
}

.need-card .tag {
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--marca);
}

.need-card h3 {
  margin-top: 12px;
  font-size: 1.25rem;
  line-height: 1.25;
  color: var(--negro);
}

.need-card p {
  margin-top: 10px;
  font-size: .9rem;
  color: var(--gris);
}

.need-card .read {
  margin-top: auto;
  padding-top: 18px;
  font-size: .82rem;
  font-weight: 800;
  color: var(--marca);
}

.guide-note {
  margin-top: 24px;
  padding: 20px 24px;
  border-radius: var(--radius-md);
  background: var(--rosa-nude);
  border-left: 4px solid var(--marca);
}

.guide-note p {
  color: var(--negro);
  font-weight: 600;
}

@media(max-width:900px) {
  .need-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media(max-width:620px) {
  .need-grid {
    grid-template-columns: 1fr;
  }

  .need-card {
    min-height: auto;
  }
}

/* ---------- DONDE COMPRAR ---------- */
.buy-section {
  background: var(--blanco-roto);
}

.buy-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 36px;
}

@media(max-width:960px) {
  .buy-grid {
    grid-template-columns: 1fr;
  }
}

.buy-card {
  background: var(--blanco-roto);
  border-radius: var(--radius-lg);
  padding: 32px;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.buy-card h3 {
  font-size: 1.2rem;
  margin-bottom: 12px;
}

.buy-card p {
  margin-bottom: 16px;
}

/* El vino se reserva para acciones breves y de alta visibilidad. */
.buy-card .btn-primary {
  padding: 11px 18px;
  background: var(--marca);
  font-size: .78rem;
  letter-spacing: .02em;
  box-shadow: none;
}

.buy-card .btn-primary:hover {
  background: var(--negro);
}

/* ---------- UNETE A FARMASI (opportunity) ---------- */
.opportunity {
  background: var(--white);
  color: var(--gris);
}

.opportunity .eyebrow {
  color: var(--marca);
}

.opportunity h2 {
  color: var(--negro);
}

.opportunity .sec-head p {
  color: var(--gris);
}

.opp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

@media(max-width:900px) {
  .opp-grid {
    grid-template-columns: 1fr;
  }
}

.opp-card {
  background: var(--blanco-roto);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: var(--radius-md);
  padding: 26px;
}

.opp-card .num {
  font-family: 'Playfair Display', serif;
  font-size: 1.4rem;
  color: var(--marca);
  display: block;
  margin-bottom: 10px;
}

.opp-card h3 {
  color: var(--negro);
  font-size: 1.02rem;
  margin-bottom: 8px;
}

.opp-card p {
  color: var(--gris);
  font-size: .88rem;
}

.opp-cta {
  margin-top: 40px;
  text-align: center;
}

.btn-light {
  background: var(--marca);
  color: var(--white);
}

.btn-light:hover {
  background: var(--negro);
}

/* ---------- BLOG ---------- */
.blog {
  background: var(--blanco-roto);
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

@media(max-width:900px) {
  .blog-grid {
    grid-template-columns: 1fr;
  }
}

.blog-card {
  background: var(--white);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.06);
  transition: transform .25s ease;
}

.blog-card:hover {
  transform: translateY(-4px);
}

.blog-img {
  aspect-ratio: 16/10;
  background: linear-gradient(150deg, var(--rosa-claro), var(--rosa-nude));
  display: flex;
  align-items: center;
  justify-content: center;
}

.blog-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}

.blog-card:hover .blog-img img {
  transform: scale(1.04);
}

.blog-more-img {
  background: var(--negro);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.blog-more-img img {
  object-fit: contain;
  padding: 0;
  background: var(--white);
  transform: scale(1.35);
}

.blog-card:hover .blog-more-img img {
  transform: scale(1.42);
}

.blog-body {
  padding: 20px 22px 24px;
}

.blog-body .tag {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--rosa-claro);
}

.blog-body h3 {
  font-size: 1.02rem;
  margin-top: 8px;
  font-family: 'Playfair Display', serif;
  line-height: 1.3;
}

.blog-body p {
  font-size: .86rem;
  margin-top: 8px;
}

.blog-body .read {
  display: inline-block;
  margin-top: 12px;
  font-size: .8rem;
  font-weight: 700;
  color: var(--negro);
}

/* ---------- SISTEMA UNIFICADO DE TARJETAS ---------- */
.trust-strip-grid>div,
.cat-card,
.need-card,
.buy-card,
.opp-card,
.blog-card {
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .045);
  transition: transform .25s ease, box-shadow .25s ease,
    border-color .25s ease, background-color .25s ease;
}

.trust-strip-grid>div,
.cat-card,
.buy-card,
.blog-card {
  background: var(--white);
}

.need-card,
.opp-card {
  background: var(--blanco-roto);
}

.cat-card:hover,
.need-card:hover,
.buy-card:hover,
.opp-card:hover,
.blog-card:hover {
  transform: translateY(-4px);
  border-color: rgba(196, 14, 72, .28);
  box-shadow: 0 16px 34px rgba(0, 0, 0, .09);
}

.cat-body,
.blog-body {
  padding: 20px 22px 24px;
}

.cat-body span.arrow,
.need-card .read,
.blog-body .read {
  color: var(--marca);
  font-weight: 800;
}

/* ---------- FAQ ---------- */
.faq {
  background: var(--white);
}

.faq-list {
  margin-top: 16px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.faq-item {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.faq-q {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 20px 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  font-family: 'Playfair Display', serif;
  font-size: 1.02rem;
  color: var(--negro);
}

.faq-q .plus {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1.5px solid var(--negro);
  color: var(--negro);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .95rem;
  transition: transform .25s ease, background .25s ease, color .25s ease;
}

.faq-item.open .faq-q .plus {
  transform: rotate(45deg);
  background: var(--negro);
  color: var(--white);
}

.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease;
}

.faq-a-inner {
  padding: 0 4px 22px;
  max-width: 740px;
}

.faq-a-inner p {
  font-size: .92rem;
}

.faq-a-inner a {
  color: var(--negro);
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.faq-item.open .faq-a {
  max-height: 400px;
}

/* ---------- FOOTER CTA ---------- */
.final-cta {
  text-align: center;
  background: var(--blanco-roto);
}

.final-cta .logo-mark {
  justify-content: center;
  margin-bottom: 18px;
}

.final-cta .logo-mark img {
  height: 92px;
  margin: 0;
}

.final-cta h2 {
  font-size: clamp(1.55rem, 3.2vw, 2.2rem);
  max-width: 600px;
  margin: 0 auto;
}

.final-cta .btn {
  margin-top: 28px;
}

footer {
  padding: 44px 0 40px;
  text-align: center;
  font-size: .8rem;
  color: var(--gris);
  background: var(--white);
  border-top: 3px solid var(--marca);
}

footer .foot-links {
  display: flex;
  gap: 22px;
  justify-content: center;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

footer .foot-links a {
  font-weight: 700;
  color: var(--negro);
  font-size: .8rem;
  transition: color .2s ease;
}

footer .foot-links a:hover {
  color: var(--marca);
}

.footer-brand {
  color: var(--negro);
  font-weight: 700;
  line-height: 1.6;
}

.footer-brand span {
  margin: 0 4px;
  color: var(--marca);
}

.footer-partner {
  margin-top: 5px;
  color: var(--gris);
  font-weight: 600;
}

.footer-note {
  margin-top: 9px;
  color: #777;
  font-size: .74rem;
}

.sticky-wa {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 60;
  background: var(--marca);
  color: var(--white);
  width: 58px;
  height: 58px;
  padding: 0;
  border-radius: 50%;
  font-weight: 700;
  font-size: 0;
  box-shadow: 0 14px 32px rgba(0, 0, 0, .28);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}

.sticky-wa:hover {
  background: var(--negro);
  transform: translateY(-2px);
  box-shadow: 0 18px 38px rgba(0, 0, 0, .32);
}

.sticky-wa::before {
  content: "";
  width: 28px;
  height: 28px;
  background-color: var(--white);
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.02 3.2A12.73 12.73 0 0 0 5.1 22.48L3.2 29l6.69-1.76A12.75 12.75 0 1 0 16.02 3.2Zm0 23.36c-2.17 0-4.18-.65-5.86-1.76l-.42-.27-3.97 1.04 1.06-3.86-.28-.44a10.55 10.55 0 1 1 9.47 5.29Zm5.78-7.91c-.32-.16-1.88-.93-2.17-1.03-.29-.11-.5-.16-.72.16-.21.32-.82 1.03-1.01 1.24-.19.21-.37.24-.69.08-.32-.16-1.35-.5-2.57-1.59-.95-.85-1.59-1.9-1.78-2.22-.19-.32-.02-.49.14-.65.15-.15.32-.37.48-.56.16-.19.21-.32.32-.53.11-.21.05-.4-.03-.56-.08-.16-.72-1.73-.98-2.37-.26-.62-.52-.54-.72-.55h-.61c-.21 0-.56.08-.85.4-.29.32-1.12 1.09-1.12 2.66s1.15 3.09 1.31 3.3c.16.21 2.26 3.45 5.47 4.83.76.33 1.36.53 1.83.68.77.24 1.47.21 2.02.13.62-.09 1.88-.77 2.15-1.51.27-.74.27-1.38.19-1.51-.08-.13-.29-.21-.61-.37Z'/%3E%3C/svg%3E") center / contain no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.02 3.2A12.73 12.73 0 0 0 5.1 22.48L3.2 29l6.69-1.76A12.75 12.75 0 1 0 16.02 3.2Zm0 23.36c-2.17 0-4.18-.65-5.86-1.76l-.42-.27-3.97 1.04 1.06-3.86-.28-.44a10.55 10.55 0 1 1 9.47 5.29Zm5.78-7.91c-.32-.16-1.88-.93-2.17-1.03-.29-.11-.5-.16-.72.16-.21.32-.82 1.03-1.01 1.24-.19.21-.37.24-.69.08-.32-.16-1.35-.5-2.57-1.59-.95-.85-1.59-1.9-1.78-2.22-.19-.32-.02-.49.14-.65.15-.15.32-.37.48-.56.16-.19.21-.32.32-.53.11-.21.05-.4-.03-.56-.08-.16-.72-1.73-.98-2.37-.26-.62-.52-.54-.72-.55h-.61c-.21 0-.56.08-.85.4-.29.32-1.12 1.09-1.12 2.66s1.15 3.09 1.31 3.3c.16.21 2.26 3.45 5.47 4.83.76.33 1.36.53 1.83.68.77.24 1.47.21 2.02.13.62-.09 1.88-.77 2.15-1.51.27-.74.27-1.38.19-1.51-.08-.13-.29-.21-.61-.37Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- BLOG PAGE ---------- */
.blog-page section {
  padding: 80px 0;
}

.blog-page .nav-inner {
  gap: 20px;
}

.blog-page nav.menu {
  gap: 28px;
}

.blog-page nav.menu a,
.blog-page footer .foot-links a {
  font-weight: 700;
}

.blog-page .blog-hero {
  padding: 74px 0 64px;
  background: linear-gradient(135deg, var(--blanco-roto), #fff);
}

.blog-hero-grid {
  display: grid;
  grid-template-columns: 1fr .78fr;
  gap: 50px;
  align-items: center;
}

.blog-page .eyebrow,
.blog-page .tag {
  font-weight: 800;
}

.blog-page .blog-hero h1 {
  font-size: clamp(2.2rem, 4.2vw, 3.5rem);
  line-height: 1.08;
  margin-top: 14px;
}

.blog-page .blog-hero h1 em {
  font-style: italic;
  color: var(--rosa-claro);
}

.blog-page .lead {
  font-size: 1.05rem;
  max-width: 560px;
  margin-top: 20px;
}

.hero-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.hero-card img {
  width: 100%;
  height: 360px;
  object-fit: cover;
  display: block;
}

.hero-card-body {
  padding: 22px;
}

.hero-card-body h2 {
  font-size: 1.35rem;
  margin-bottom: 8px;
}

.blog-page .btn {
  justify-content: center;
  padding: 14px 24px;
  font-weight: 800;
  margin-top: 26px;
}

.blog-page .blog-grid {
  gap: 24px;
}

.post-card {
  background: var(--white);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.06);
  transition: transform .25s ease, box-shadow .25s ease;
}

.post-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-soft);
}

.post-card img {
  width: 100%;
  aspect-ratio: 16/10;
  object-fit: cover;
  display: block;
}

.post-body {
  padding: 22px 24px 26px;
}

.post-body h2 {
  font-size: 1.18rem;
  line-height: 1.3;
  margin-top: 9px;
}

.post-body p {
  font-size: .9rem;
  margin-top: 10px;
}

.blog-page .read {
  font-weight: 800;
  margin-top: 14px;
}

.article {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 42px;
  margin-bottom: 34px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: var(--shadow-soft);
}

.article-grid {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 36px;
  align-items: start;
}

.article img {
  width: 100%;
  border-radius: var(--radius-md);
  aspect-ratio: 16/10;
  object-fit: cover;
}

.article h2 {
  font-size: clamp(1.5rem, 3vw, 2.15rem);
  margin: 8px 0 16px;
}

.article h3 {
  font-family: 'Montserrat', sans-serif;
  font-size: 1rem;
  margin: 22px 0 8px;
}

.article ul {
  margin: 12px 0 0;
  padding-left: 20px;
  line-height: 1.8;
  color: var(--gris);
}

.tip {
  background: var(--blanco-roto);
  border-left: 4px solid var(--rosa-claro);
  padding: 16px 18px;
  border-radius: 12px;
  margin-top: 20px;
  color: var(--negro);
  font-weight: 600;
}

.cta-box {
  background: var(--rosa-nude);
  border-radius: var(--radius-lg);
  padding: 42px;
  text-align: center;
}

.cta-box h2 {
  font-size: clamp(1.45rem, 3vw, 2.1rem);
  max-width: 720px;
  margin: 0 auto 12px;
}

.blog-page .sticky-wa {
  font-weight: 800;
}

@media(max-width:920px) {
  .blog-page .blog-grid {
    grid-template-columns: 1fr;
  }
}

@media(max-width:900px) {
  .blog-hero-grid {
    grid-template-columns: 1fr;
  }
}

@media(max-width:880px) {
  .article {
    padding: 26px;
  }

  .article-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- BLOG POST PAGE ---------- */
.blog-post-page .blog-post-hero {
  padding: 76px 0 40px;
  background: var(--blanco-roto);
}

.blog-post-wrap {
  max-width: 920px;
  margin: 0 auto;
  padding: 0 28px;
}

.blog-post-page .blog-post-hero h1 {
  margin-top: 14px;
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 1.08;
  max-width: 820px;
}

.skincare-post-page .blog-post-hero h1 {
  max-width: 780px;
}

.post-meta {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: .82rem;
  font-weight: 600;
  color: var(--gris);
}

.post-cover {
  margin-top: 34px;
  border-radius: 26px;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  background: var(--white);
}

.post-cover img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  display: block;
}

.post-content {
  background: var(--white);
  padding: 62px 0;
}

.post-content article {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 28px;
}

.post-content h2 {
  margin-top: 38px;
  margin-bottom: 14px;
  font-size: clamp(1.45rem, 2.5vw, 2rem);
}

.post-content h3 {
  margin-top: 28px;
  margin-bottom: 10px;
  font-size: 1.25rem;
}

.post-content p {
  margin-bottom: 18px;
  font-size: 1rem;
}

.post-content ul,
.post-content ol {
  padding-left: 22px;
  margin: 0 0 24px;
  color: var(--gris);
  line-height: 1.7;
}

.post-highlight {
  margin: 30px 0;
  padding: 24px 26px;
  border-radius: 20px;
  background: var(--rosa-nude);
  color: var(--negro);
  font-weight: 600;
}

.calendula-recommendation,
.product-recommendation {
  margin: 38px 0;
  padding: 30px;
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 24px;
  background: var(--blanco-roto);
}

.post-content .calendula-recommendation h2,
.post-content .product-recommendation h2 {
  margin-top: 8px;
}

.calendula-recommendation .btn,
.product-recommendation .btn {
  margin: 4px 0 18px;
}

.post-content .calendula-recommendation .international-note,
.post-content .product-recommendation .international-note {
  margin: 0;
  padding-top: 14px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--gris);
}

.international-note a {
  color: var(--negro);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.product-list {
  display: grid;
  gap: 18px;
  margin: 24px 0 8px;
}

.product-step {
  padding: 22px;
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 20px;
  background: var(--blanco-roto);
}

.product-step strong {
  display: block;
  color: var(--negro);
  margin-bottom: 6px;
}

.routine-list {
  display: grid;
  gap: 18px;
  margin: 24px 0 8px;
}

.routine-step {
  padding: 22px;
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 20px;
  background: var(--blanco-roto);
}

.routine-step strong {
  display: block;
  color: var(--negro);
  margin-bottom: 6px;
}

.do-dont {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin: 24px 0;
}

.do-dont div {
  padding: 22px;
  border-radius: 20px;
  background: var(--blanco-roto);
  border: 1px solid rgba(0, 0, 0, 0.07);
}

.post-cta-box {
  margin-top: 46px;
  padding: 34px;
  border-radius: 26px;
  background: var(--negro);
  color: var(--white);
  text-align: center;
}

.post-cta-box h2,
.post-cta-box p {
  color: var(--white);
}

.post-cta-box p {
  margin-top: 12px;
  opacity: .88;
}

.post-cta-box .btn {
  margin-top: 22px;
}

.related-posts {
  padding: 58px 0 80px;
  background: var(--blanco-roto);
}

.related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 28px;
}

@media(max-width:850px) {
  .related-grid {
    grid-template-columns: 1fr;
  }

  .do-dont {
    grid-template-columns: 1fr;
  }

  .blog-post-page .blog-post-hero {
    padding-top: 52px;
  }
}

/* ---------- PIEL TIRANTE / FARMASI POST ---------- */
.piel-tirante-page {
  font-family: 'Montserrat', sans-serif;
  color: var(--gris);
  background: var(--blanco-roto);
}

.piel-tirante-page h1,
.piel-tirante-page h2,
.piel-tirante-page h3 {
  font-family: 'Playfair Display', serif;
  color: var(--negro);
  line-height: 1.12;
}

.piel-tirante-page p {
  line-height: 1.75;
}

.piel-tirante-page section {
  padding: 4rem 1.25rem;
}

.piel-tirante-page .hero-bg {
  background: linear-gradient(135deg, var(--white) 0%, var(--white) 48%, rgba(255, 90, 104, 0.18) 100%);
}

.piel-tirante-page .section-soft {
  background: linear-gradient(180deg, var(--blanco-roto) 0%, var(--white) 100%);
}

.piel-tirante-page .badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .35px;
  text-transform: uppercase;
  background: rgba(255, 90, 104, 0.18)!important;
  color: var(--negro)!important;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.piel-tirante-page .cta-main {
  transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease;
}

.piel-tirante-page .cta-main:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, .18);
}

.piel-tirante-page .bg-mg-soft {
  background-color: rgba(255, 90, 104, 0.10)!important;
}

.piel-tirante-page .bg-mg-dark {
  background-color: var(--negro)!important;
}

.piel-tirante-page .hover\:bg-mg-dark:hover {
  background-color: #222!important;
}

.piel-tirante-page .hover\:bg-mg-soft:hover {
  background-color: var(--blanco-roto)!important;
}

.piel-tirante-page .text-mg-dark {
  color: var(--negro)!important;
}

.piel-tirante-page .text-mg-accent {
  color: var(--rosa-claro)!important;
}

.piel-tirante-page .border-mg-soft {
  border-color: rgba(0, 0, 0, 0.08)!important;
}

.piel-tirante-page .card {
  transition: transform .25s ease, box-shadow .25s ease;
}

.piel-tirante-page .card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .08);
}

.piel-tirante-page .article-content {
  border-radius: var(--radius-lg)!important;
}

.piel-tirante-page .article-content h2 {
  margin-top: 3rem;
  margin-bottom: 1rem;
  font-size: clamp(1.85rem, 3vw, 2.5rem);
}

.piel-tirante-page .article-content h3 {
  margin-top: 2rem;
  margin-bottom: .75rem;
  font-size: 1.35rem;
}

.piel-tirante-page .article-content p,
.piel-tirante-page .article-content li {
  font-size: 1.05rem;
  color: var(--gris);
}

.piel-tirante-page .article-content ul,
.piel-tirante-page .article-content ol {
  margin-top: 1rem;
  margin-bottom: 1.6rem;
  padding-left: 1.25rem;
}

.piel-tirante-page .article-content li {
  margin-bottom: .85rem;
}

.piel-tirante-page .whatsapp-float {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 58px;
  height: 58px;
  border-radius: 999px;
  background: var(--negro);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  box-shadow: 0 14px 32px rgba(0, 0, 0, .28);
  z-index: 9999;
  transition: transform .25s ease, box-shadow .25s ease;
}

.piel-tirante-page .whatsapp-float:hover {
  background: var(--marca);
  transform: translateY(-2px);
  box-shadow: 0 18px 38px rgba(0, 0, 0, .32);
}

.piel-tirante-page .image-placeholder {
  min-height: 280px;
  border: 2px dashed rgba(255, 90, 104, .55);
  background: linear-gradient(135deg, var(--white) 0%, var(--blanco-roto) 100%);
  border-radius: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
  color: var(--gris);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7);
}

.piel-tirante-page .image-placeholder small {
  display: block;
  margin-top: .5rem;
  color: var(--gris);
  font-size: .85rem;
  line-height: 1.5;
}

.piel-tirante-page .image-placeholder img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 2rem;
}

.piel-tirante-page footer {
  padding: 4rem 1.25rem;
  background: rgba(255, 90, 104, 0.10)!important;
  border-top: 1px solid rgba(0, 0, 0, 0.08)!important;
  text-align: center;
}

@media (min-width: 768px) {
  .piel-tirante-page section,
  .piel-tirante-page footer {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
}

@media (max-width: 768px) {
  .piel-tirante-page .whatsapp-float {
    right: 16px;
    bottom: 16px;
    width: 58px;
    height: 58px;
    font-size: 30px;
  }
}

/* ---------- JABON CALENDULA PRODUCT PAGE ---------- */
.calendula-page {
  font-family: 'Montserrat', sans-serif;
  color: var(--gris);
  background: var(--white);
}

.calendula-page h1,
.calendula-page h2,
.calendula-page h3 {
  font-family: 'Playfair Display', serif;
  color: var(--negro);
  line-height: 1.15;
}

.calendula-page section {
  overflow: hidden;
}

.calendula-page section p {
  line-height: 1.75;
}

.calendula-page .hero-gradient {
  background: linear-gradient(135deg, var(--white) 0%, var(--white) 54%, rgba(255, 90, 104, 0.18) 100%);
}

.calendula-page .section-soft {
  background: linear-gradient(180deg, var(--white) 0%, var(--blanco-roto) 100%);
}

.calendula-page .cta-button {
  background: var(--negro)!important;
  color: var(--white)!important;
  transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease;
  animation: calendulaPulse 2s infinite;
}

.calendula-page .cta-button:hover {
  background: var(--marca)!important;
  transform: translateY(-2px);
}

@keyframes calendulaPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.03); }
  100% { transform: scale(1); }
}

.calendula-page .image-zoom {
  transition: transform .45s ease;
}

.calendula-page .image-zoom:hover {
  transform: scale(1.02);
}

.calendula-page .badge {
  display: inline-block;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .4px;
}

.calendula-page .card-hover {
  transition: transform .25s ease, box-shadow .25s ease;
}

.calendula-page .card-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 38px rgba(0, 0, 0, .08);
}

.calendula-page .visual-card {
  height: 100%;
}

.calendula-page details summary {
  line-height: 1.5;
}

.calendula-page details p {
  padding-top: 6px;
}

.calendula-page .bg-yellow-50,
.calendula-page .bg-yellow-100,
.calendula-page .bg-green-50,
.calendula-page .bg-red-50,
.calendula-page .bg-gray-50 {
  background-color: rgba(255, 90, 104, .10)!important;
}

.calendula-page .bg-yellow-500,
.calendula-page .bg-green-500,
.calendula-page .bg-red-500 {
  background-color: var(--negro)!important;
}

.calendula-page .hover\:bg-yellow-600:hover,
.calendula-page .hover\:bg-green-600:hover,
.calendula-page .hover\:bg-red-600:hover {
  background-color: #222!important;
}

.calendula-page .text-yellow-600,
.calendula-page .text-yellow-700,
.calendula-page .text-green-500,
.calendula-page .text-green-600,
.calendula-page .text-green-700,
.calendula-page .text-orange-500,
.calendula-page .text-blue-500,
.calendula-page .text-red-500 {
  color: var(--negro)!important;
}

.calendula-page .text-gray-400,
.calendula-page .text-gray-500,
.calendula-page .text-gray-600,
.calendula-page .text-gray-700 {
  color: var(--gris)!important;
}

.calendula-page .border-yellow-200,
.calendula-page .border-yellow-400,
.calendula-page .border-green-200,
.calendula-page .border-red-100 {
  border-color: var(--rosa-nude)!important;
}

.calendula-page .whatsapp-float {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 58px;
  height: 58px;
  border-radius: 999px;
  background: var(--negro);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 32px rgba(0, 0, 0, .28);
  z-index: 999;
  transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease;
}

.calendula-page .whatsapp-float:hover {
  transform: translateY(-2px);
  background: var(--marca);
  box-shadow: 0 18px 38px rgba(0, 0, 0, .32);
}

.calendula-page .whatsapp-float i {
  font-size: 30px;
}

@media (max-width: 768px) {
  .calendula-page h1 {
    line-height: 1.08;
  }

  .calendula-page h2 {
    line-height: 1.18;
  }

  .calendula-page .mobile-section-space {
    padding-top: 4.5rem;
    padding-bottom: 4.5rem;
  }

  .calendula-page .whatsapp-float {
    width: 58px;
    height: 58px;
    right: 14px;
    bottom: 14px;
  }

  .calendula-page .whatsapp-float i {
    font-size: 28px;
  }
}