/*
Theme Name: TotBio
Theme URI: https://totbio.online
Author: A-Digital
Author URI: https://a-digital.net
Description: Tema de bloques a medida para TotBio Herbodietetica, tu herbolario en Menorca. Salud natural, naturopatia, flores de Bach y dietetica.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: totbio
*/

/* ============ Base ============ */
:root{
  --tb-magenta:#9c2a6f; --tb-magenta-deep:#841d5c; --tb-pink:#c83f8e;
  --tb-gold:#c2a05f; --tb-soft:#fbeef4; --tb-ink:#2c2a2e;
}
body{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
a{ transition:color .2s ease, opacity .2s ease; }

/* ============ Header / Nav ============ */
.tb-header{
  position:sticky; top:0; z-index:50; background:#fff;
  border-bottom:1px solid #f0e6ec;
  box-shadow:0 1px 14px rgba(132,29,92,.05);
}
.tb-logo{ display:flex; align-items:center; gap:.55rem; text-decoration:none; }
.tb-logo svg{ display:block; height:48px; width:48px; flex:none; }
.tb-logo__text{ display:flex; flex-direction:column; line-height:1; }
.tb-logo__name{ font-family:'Poppins',sans-serif; font-weight:700; font-size:1.7rem; letter-spacing:-.01em; }
.tb-logo__name .tot{ color:#b89a55; }
.tb-logo__name .bio{ color:var(--tb-magenta); }
.tb-logo__tag{ font-family:'Poppins',sans-serif; font-weight:500; font-size:.6rem; letter-spacing:.34em; text-transform:lowercase; color:var(--tb-magenta); margin-top:.18rem; padding-left:.1rem; }
.tb-nav .wp-block-navigation-item__content{
  font-family:'Poppins',sans-serif; font-weight:500; color:var(--tb-ink);
  padding:.4rem .2rem;
}
.tb-nav .wp-block-navigation-item__content:hover{ color:var(--tb-magenta); }
.tb-nav .wp-block-navigation__submenu-container{
  border:none; border-radius:14px; box-shadow:0 14px 40px rgba(44,42,46,.14);
  padding:.4rem; min-width:230px; background:#fff;
}
.tb-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content{ border-radius:9px; }
.tb-nav .wp-block-navigation__submenu-container .wp-block-navigation-item:hover{ background:var(--tb-soft); border-radius:9px; }

/* ============ Buttons (pill + arrow) ============ */
.wp-block-button__link{
  display:inline-flex; align-items:center; gap:.55rem; line-height:1;
  box-shadow:0 8px 22px rgba(200,63,142,.28); letter-spacing:.01em;
}
.wp-block-button__link::after{
  content:""; width:22px; height:22px; border-radius:50%;
  background:rgba(255,255,255,.28);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 6 15 12 9 18'/></svg>") center/12px no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 6 15 12 9 18'/></svg>") center/12px no-repeat;
  background-color:#fff;
}
.wp-block-button__link:hover{ background:var(--tb-magenta)!important; transform:translateY(-2px); box-shadow:0 12px 26px rgba(132,29,92,.32); }
.wp-block-button.is-style-outline .wp-block-button__link{
  background:transparent!important; color:var(--tb-magenta)!important;
  border:2px solid var(--tb-pink); box-shadow:none;
}
.wp-block-button.is-style-outline .wp-block-button__link::after{ background-color:var(--tb-magenta); }
.wp-block-button.is-style-outline .wp-block-button__link:hover{ background:var(--tb-pink)!important; color:#fff!important; border-color:var(--tb-pink); }
.wp-block-button.is-style-outline .wp-block-button__link:hover::after{ background-color:#fff; }

/* ============ Hero ============ */
.tb-hero{
  position:relative; min-height:clamp(440px,62vh,620px);
  display:flex; align-items:center; justify-content:center; text-align:center;
  background:
    linear-gradient(115deg, rgba(63,125,36,.78), rgba(111,174,62,.42) 55%, rgba(167,201,87,.30)),
    radial-gradient(120% 120% at 80% 10%, #b9d471 0%, #6fae3e 45%, #2f6b1c 100%);
  overflow:hidden;
}
.tb-hero::before{
  content:""; position:absolute; inset:0; opacity:.16; mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'><g fill='none' stroke='white' stroke-width='1.4' opacity='.9'><path d='M60 8C40 28 40 56 60 76 80 56 80 28 60 8Z'/><path d='M60 44 60 112'/><path d='M30 70C45 64 56 70 60 82'/><path d='M90 70C75 64 64 70 60 82'/></g></svg>");
  background-size:200px;
}
.tb-hero__inner{ position:relative; z-index:2; color:#fff; padding:2rem 1.2rem; max-width:760px; }
.tb-hero__inner h1{ color:#fff; font-size:clamp(2.8rem,7vw,4.6rem); margin:0 0 .3rem; text-shadow:0 2px 18px rgba(0,0,0,.22); }
.tb-hero__inner p.tb-sub{ color:#fff; font-size:clamp(1.2rem,2.6vw,1.7rem); font-family:'Poppins',sans-serif; font-weight:300; margin:0 0 1.8rem; opacity:.96; }

/* ============ Section helpers ============ */
.tb-soft-bg{ background:var(--tb-soft); }
.tb-eyebrow{ font-family:'Poppins',sans-serif; font-weight:600; letter-spacing:.16em; text-transform:uppercase; font-size:.78rem; color:var(--tb-gold); }
.tb-accent-word{ color:var(--tb-accent,#c83f8e); }
.has-primary-color .tb-mark, .tb-mark{ color:var(--tb-pink); }

/* intro keyword bar */
.tb-keyword{
  background:var(--tb-soft); text-align:center;
}
.tb-keyword h2{ color:var(--tb-ink); font-weight:500; line-height:1.4; max-width:880px; margin-inline:auto; }

/* ============ Cards ============ */
.tb-card{
  background:#fff; border-radius:20px; overflow:hidden;
  box-shadow:0 10px 34px rgba(132,29,92,.08); border:1px solid #f3e8ef;
  height:100%;
}
.tb-card .tb-card__media{ aspect-ratio:4/3; position:relative; }
.tb-card .tb-card__body{ padding:1.4rem 1.5rem 1.7rem; }
.tb-card h3{ color:var(--tb-magenta); margin:0 0 .5rem; font-size:1.22rem; }
.tb-card p{ color:var(--tb-ink); opacity:.82; margin:0; font-size:.98rem; }

/* media gradients (no external images needed) */
.tb-img{ position:relative; aspect-ratio:4/3; border-radius:18px; overflow:hidden; }
.tb-img::after{ content:""; position:absolute; inset:0; opacity:.18; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='90' height='90' viewBox='0 0 90 90'><g fill='none' stroke='white' stroke-width='1.3'><path d='M45 10C32 24 32 44 45 58 58 44 58 24 45 10Z'/><path d='M45 34 45 82'/></g></svg>"); background-size:120px; }
.tb-img--herbs{ background:linear-gradient(140deg,#e7943f,#c9772a); }
.tb-img--seeds{ background:linear-gradient(140deg,#cdb27a,#a8884d); }
.tb-img--hair{ background:linear-gradient(140deg,#b07a4e,#7c5234); }
.tb-img--mint{ background:linear-gradient(140deg,#5f9e57,#3c7a34); }
.tb-img--spa{ background:linear-gradient(140deg,#caa27a,#9e7350); }
.tb-img--baby{ background:linear-gradient(140deg,#9bb39a,#6f8a6e); }
.tb-img--shop{ background:linear-gradient(140deg,#c98fb0,#9c4f7c); }
.tb-img--bach{ background:linear-gradient(140deg,#c08ab2,#8a4f86); }
.tb-img--vit{ background:linear-gradient(140deg,#d99a52,#b56f2c); }
.tb-img--leaf{ background:linear-gradient(140deg,#7fb24a,#3f7d24); }

/* intro row head */
.tb-rowhead{ display:flex; flex-wrap:wrap; gap:1.2rem; align-items:center; justify-content:space-between; }
.tb-rowhead h2{ margin:0; font-size:clamp(1.5rem,3.4vw,2.1rem); color:var(--tb-ink); font-weight:600; }
.tb-rowhead h2 .pink{ color:var(--tb-pink); } .tb-rowhead h2 .gold{ color:var(--tb-gold); }

/* card grid */
.tb-cardgrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem; }
@media (max-width:980px){ .tb-cardgrid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .tb-cardgrid{ grid-template-columns:1fr; } }

/* two-col feature (servicios/tiendas) */
.tb-feature{ display:grid; grid-template-columns:1fr 1fr; gap:2.6rem; align-items:center; }
.tb-feature.rev .tb-feature__media{ order:2; }
@media (max-width:860px){ .tb-feature{ grid-template-columns:1fr; gap:1.6rem; } .tb-feature.rev .tb-feature__media{ order:0; } }
.tb-feature h2, .tb-feature h3{ margin-top:0; }
.tb-feature .tb-img{ aspect-ratio:16/11; }

/* ============ CTA banner ============ */
.tb-cta-soft{ background:var(--tb-soft); text-align:center; }
.tb-cta-soft h2{ color:var(--tb-ink); font-weight:500; max-width:860px; margin-inline:auto; line-height:1.4; }

/* ============ Footer ============ */
.tb-footer{ background:var(--tb-magenta-deep); color:#fff; }
.tb-footer h2, .tb-footer h3, .tb-footer h4{ color:#fff; }
.tb-footer a{ color:#f6d8e8; }
.tb-footer a:hover{ color:#fff; }
.tb-footer .tb-muted{ color:#e7bcd5; opacity:.9; }
.tb-footer .wp-block-button__link{ background:#fff!important; color:var(--tb-magenta)!important; box-shadow:none; }
.tb-footer .wp-block-button__link::after{ background-color:var(--tb-magenta); }
.tb-footer .wp-block-button__link:hover{ background:var(--tb-pink)!important; color:#fff!important; }
.tb-footer .wp-block-button__link:hover::after{ background-color:#fff; }
.tb-subfooter{ background:#fbeef4; color:#9c2a6f; }
.tb-subfooter a{ color:#9c2a6f; }
.tb-kitdigital{ background:#fff; text-align:center; padding:1.6rem 1rem; border-top:1px solid #f0e6ec; }
.tb-kitdigital img{ height:46px; width:auto; opacity:.95; }
.tb-kitdigital .tb-kd-row{ display:flex; flex-wrap:wrap; gap:1.6rem 2.4rem; align-items:center; justify-content:center; }

/* ============ Page hero (interior) ============ */
.tb-pagehead{ background:linear-gradient(180deg,#fff, #fbeef4); }
.tb-pagehead h1{ color:var(--tb-magenta); }

/* contact / info chips */
.tb-info{ display:flex; flex-direction:column; gap:.3rem; }
.tb-info strong{ color:var(--tb-magenta); }

/* ============ Animations ============ */
.animate-on-scroll{ opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s ease; }
.animate-on-scroll.is-visible{ opacity:1; transform:none; }
.stagger-children > *{ opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s ease; }
.stagger-children.is-visible > *{ opacity:1; transform:none; }
.stagger-children.is-visible > *:nth-child(2){ transition-delay:.1s; }
.stagger-children.is-visible > *:nth-child(3){ transition-delay:.2s; }
.stagger-children.is-visible > *:nth-child(4){ transition-delay:.3s; }

@media (prefers-reduced-motion: reduce){
  .animate-on-scroll, .stagger-children > *{ opacity:1!important; transform:none!important; transition:none!important; }
  .wp-block-button__link:hover{ transform:none; }
}

/* ============ Responsive ============ */
@media (max-width:781px){
  .tb-logo svg{ height:40px; }
  .tb-hero{ min-height:440px; }
}