/*
Theme Name: Novena Verde
Theme URI: https://novenaverde.com
Author: Alvaro
Author URI: https://novenaverde.com
Description: Tema a medida para Novena Verde — reconexión, bienestar y equilibrio. Diseño botánico para novenas personalizadas, terapia holística y radiestesia. Al activarlo crea automáticamente las páginas del sitio.
Version: 1.0.0
Requires at least: 5.9
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: novena-verde
*/

/* ============================================================
   NOVENA VERDE — Shared Stylesheet
   ============================================================ */

/* ---------- Tokens ---------- */
:root{
  --forest-900: #1b2a1f;
  --forest-800: #25382a;
  --forest-700: #2f4a35;
  --forest-600: #3d5f44;
  --moss-500:   #5b7a52;
  --sage-300:   #b9c7a8;
  --sage-200:   #d5dec6;
  --clay-700:   #5a3e2b;
  --terra-400:  #c08458;
  --cream-100:  #f4ecdc;
  --cream-50:   #faf5e9;
  --bone:       #fffaee;
  --ink:        #1a1a14;
  --ink-soft:   #3b3b32;
  --muted:      #6e6a5a;
  --rule:       #d8d0bb;
  --serif: "Cormorant Garamond","EB Garamond",Georgia,serif;
  --sans:  "Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:  "JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --maxw: 1240px;
  --gutter: clamp(20px,4vw,56px);
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--cream-50);
  font-size:17px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{ color:inherit; }
img{ display:block; max-width:100%; }
p{ margin:0 0 1em; }

body::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  background:
    radial-gradient(1200px 700px at 90% -10%,rgba(91,122,82,.10),transparent 60%),
    radial-gradient(900px 600px at -10% 110%,rgba(192,132,88,.10),transparent 60%);
  z-index:0;
}

/* ---------- Layout ---------- */
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter); position:relative; z-index:1; }

.eyebrow{
  font-family:var(--mono); font-size:11px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--moss-500);
  display:inline-flex; align-items:center; gap:10px;
}
.eyebrow::before{ content:""; width:22px; height:1px; background:currentColor; display:inline-block; }

h1,h2,h3{ font-family:var(--serif); font-weight:500; color:var(--forest-900); letter-spacing:-.005em; }
h1{ font-size:clamp(48px,7vw,96px); line-height:1.02; margin:0; }
h2{ font-size:clamp(32px,4.4vw,56px); line-height:1.08; margin:0 0 24px; }
h3{ font-size:26px; line-height:1.2; margin:0 0 10px; }
.lede{ font-size:19px; color:var(--ink-soft); max-width:60ch; }
em.flora{ font-style:italic; color:var(--forest-700); }

/* ---------- Buttons ---------- */
.btn{
  font-family:var(--mono); font-size:12px; letter-spacing:.18em;
  text-transform:uppercase; padding:14px 22px; border-radius:999px;
  text-decoration:none; display:inline-flex; align-items:center; gap:10px;
  transition:transform .15s ease,background .2s,color .2s;
}
.btn:hover{ transform:translateY(-1px); }
.btn-primary{ background:var(--forest-700); color:var(--cream-50); }
.btn-primary:hover{ background:var(--forest-800); }
.btn-ghost{ border:1px solid var(--rule); color:var(--ink); }
.btn-ghost:hover{ border-color:var(--forest-700); color:var(--forest-700); }

/* ---------- Nav ---------- */
.nav{
  position:sticky; top:0; z-index:30;
  backdrop-filter:blur(10px);
  background:rgba(250,245,233,.78);
  border-bottom:1px solid rgba(216,208,187,.6);
}
.nav-inner{ display:flex; align-items:center; justify-content:space-between; padding:14px 0; }
.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; }
.brand-mark{
  width:38px; height:38px; border-radius:50%; overflow:hidden;
  background:var(--forest-700);
  box-shadow:0 0 0 1px var(--rule),0 4px 12px rgba(27,42,31,.10);
  flex:none;
}
.brand-mark img{ width:100%; height:100%; object-fit:cover; display:block; }
.brand-text{ display:flex; flex-direction:column; line-height:1; }
.brand-name{ font-family:var(--serif); font-size:22px; color:var(--forest-900); letter-spacing:.01em; }
.brand-sub{ font-family:var(--mono); font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--moss-500); margin-top:4px; }
.nav-links{ display:flex; gap:28px; font-size:14px; color:var(--ink-soft); }
.nav-links a{ text-decoration:none; transition:color .15s; }
.nav-links a:hover,
.nav-links a.active{ color:var(--forest-700); }
.nav-links a.active{ border-bottom:1px solid var(--forest-700); padding-bottom:2px; }
.nav-cta{
  font-family:var(--mono); font-size:12px; letter-spacing:.15em; text-transform:uppercase;
  padding:10px 16px; border:1px solid var(--forest-700); color:var(--forest-700);
  text-decoration:none; border-radius:999px; transition:background .2s,color .2s;
}
.nav-cta:hover{ background:var(--forest-700); color:var(--cream-50); }
@media(max-width:760px){ .nav-links{ display:none; } }

/* ---------- Main Hero (index only) ---------- */
.hero{
  padding:clamp(90px,14vw,180px) 0 clamp(90px,12vw,160px);
  position:relative; overflow:hidden; isolation:isolate; color:var(--cream-50);
}
.hero-bg{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(180deg,rgba(27,42,31,.55) 0%,rgba(27,42,31,.65) 60%,rgba(27,42,31,.85) 100%),
    url("https://novenaverde.com/wp-content/uploads/2026/04/c4f42a84beeab28f29d4fb55e4c48d2e132a8cc0.jpg") center/cover no-repeat,
    var(--forest-800);
  filter:saturate(.9);
}
.hero-bg::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(900px 500px at 80% 10%,rgba(192,132,88,.18),transparent 70%),
    radial-gradient(700px 500px at 10% 90%,rgba(91,122,82,.25),transparent 65%);
  mix-blend-mode:screen; opacity:.7;
}
.hero-inner{ max-width:880px; position:relative; z-index:1; }
.hero h1{ color:var(--cream-50); }
.hero h1 .accent{ font-style:italic; color:var(--sage-200); }
.hero h1 .leaf{
  display:inline-block; width:.7em; height:.7em; background:var(--terra-400);
  border-radius:60% 10% 60% 10%; transform:rotate(-25deg);
  margin:0 .05em .05em .05em; vertical-align:middle;
}
.hero-lede{ margin-top:28px; font-size:19px; color:rgba(255,250,238,.82); max-width:52ch; }
.hero-actions{ display:flex; gap:14px; margin-top:36px; flex-wrap:wrap; }
.hero .btn-ghost{ border-color:rgba(255,250,238,.4); color:var(--cream-50); }
.hero .btn-ghost:hover{ border-color:var(--cream-50); background:rgba(255,250,238,.08); }
.hero-meta{
  display:flex; gap:30px; margin-top:56px;
  font-family:var(--mono); font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:rgba(217,225,201,.7); flex-wrap:wrap;
  border-top:1px solid rgba(217,225,201,.25); padding-top:28px;
}
.hero-meta span strong{
  display:block; font-family:var(--serif); font-style:italic;
  font-size:24px; color:var(--sage-200); letter-spacing:0;
  text-transform:none; margin-bottom:4px; font-weight:500;
}

/* ---------- Page Hero (inner pages) ---------- */
.page-hero{
  background:var(--forest-800);
  padding:clamp(60px,8vw,100px) 0 clamp(50px,6vw,80px);
  position:relative; overflow:hidden;
}
.page-hero::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(900px 500px at 90% -20%,rgba(192,132,88,.15),transparent 60%),
    radial-gradient(600px 400px at -10% 110%,rgba(91,122,82,.20),transparent 60%);
  pointer-events:none;
}
.page-hero .wrap{ position:relative; z-index:1; }
.page-hero .eyebrow{ color:var(--sage-300); }
.page-hero h1{ color:var(--cream-50); font-size:clamp(40px,5.5vw,76px); margin-top:16px; }

/* ---------- Marquee strip ---------- */
.strip{
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
  background:var(--cream-100); padding:18px 0; overflow:hidden;
}
.strip-track{
  display:flex; gap:56px; font-family:var(--serif); font-style:italic;
  color:var(--forest-700); font-size:22px; white-space:nowrap;
  animation:scroll 38s linear infinite;
}
.strip-track span{ display:inline-flex; align-items:center; gap:56px; }
.strip-track .dot{ width:6px; height:6px; border-radius:50%; background:var(--terra-400); display:inline-block; }
@keyframes scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ---------- Sections ---------- */
section{ padding:clamp(70px,9vw,120px) 0; position:relative; z-index:1; }
.section-head{ display:grid; grid-template-columns:1fr 1fr; gap:40px; margin-bottom:64px; align-items:end; }
.section-head p{ color:var(--ink-soft); font-size:18px; max-width:50ch; }
@media(max-width:760px){ .section-head{ grid-template-columns:1fr; gap:16px; } }

/* ---------- Services ---------- */
.services{ background:var(--bone); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); }
.svc-grid{ display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--rule); }
@media(max-width:880px){ .svc-grid{ grid-template-columns:1fr; } }
.svc{ padding:44px 36px 40px; border-right:1px solid var(--rule); transition:background .25s; }
.svc:last-child{ border-right:none; }
.svc:hover{ background:var(--cream-100); }
@media(max-width:880px){ .svc{ border-right:none; border-bottom:1px solid var(--rule); } .svc:last-child{ border-bottom:none; } }
.svc-num{ font-family:var(--mono); font-size:11px; letter-spacing:.2em; color:var(--muted); margin-bottom:28px; display:flex; justify-content:space-between; }
.svc-glyph{ width:48px; height:48px; margin-bottom:24px; color:var(--forest-700); }
.svc h3{ color:var(--forest-900); margin-bottom:14px; }
.svc p{ color:var(--ink-soft); font-size:16px; }
.svc-link{
  margin-top:28px; display:inline-flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--forest-700); text-decoration:none;
  border-bottom:1px solid var(--forest-700); padding-bottom:4px;
}

/* ---------- Servicios page: expanded cards ---------- */
.svc-expanded{ background:var(--cream-50); }
.svc-exp-item{
  display:grid; grid-template-columns:1fr 1.4fr;
  gap:clamp(40px,6vw,80px); align-items:start;
  padding:clamp(60px,7vw,90px) 0;
  border-bottom:1px solid var(--rule);
}
.svc-exp-item:last-child{ border-bottom:none; }
@media(max-width:880px){ .svc-exp-item{ grid-template-columns:1fr; } }
.svc-exp-num{ font-family:var(--mono); font-size:11px; letter-spacing:.22em; color:var(--muted); margin-bottom:20px; }
.svc-exp-item h2{ font-size:clamp(30px,3.6vw,48px); margin-bottom:0; }
.svc-exp-body p{ color:var(--ink-soft); max-width:56ch; }
.svc-exp-body h3{ color:var(--forest-700); font-size:20px; margin:32px 0 10px; }
.process-steps{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:0; }
.process-steps li{
  display:grid; grid-template-columns:32px 1fr;
  gap:16px; padding:14px 0; border-bottom:1px solid var(--rule);
  font-size:16px; color:var(--ink-soft); align-items:baseline;
}
.process-steps li:last-child{ border-bottom:none; }
.process-steps li span{ font-family:var(--mono); font-size:10px; letter-spacing:.2em; color:var(--muted); }

/* ---------- About section ---------- */
.about{ background:var(--forest-800); color:var(--cream-50); }
.about h2{ color:var(--cream-50); }
.about .eyebrow{ color:var(--sage-300); }
.about-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,90px); align-items:start; }
@media(max-width:880px){ .about-grid{ grid-template-columns:1fr; } }
.about p{ color:rgba(255,250,238,.78); font-size:17px; max-width:56ch; }
.about .pull{ font-family:var(--serif); font-style:italic; font-size:clamp(26px,3.2vw,36px); color:var(--sage-200); line-height:1.25; margin-bottom:28px; }
.about-list{ padding:0; margin:32px 0 0; }
.about-list > div{ display:grid; grid-template-columns:80px 1fr; gap:24px; padding:18px 0; border-top:1px solid rgba(217,225,201,.18); align-items:baseline; }
.about-list > div:last-child{ border-bottom:1px solid rgba(217,225,201,.18); }
.about-list dt{ font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--sage-300); }
.about-list dd{ margin:0; font-family:var(--serif); font-size:20px; color:var(--cream-50); line-height:1.35; }

/* ---------- Values grid (quienes-somos) ---------- */
.values-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; border:1px solid var(--rule); }
@media(max-width:760px){ .values-grid{ grid-template-columns:1fr; } }
.value-card{ padding:40px 32px; border-right:1px solid var(--rule); }
.value-card:last-child{ border-right:none; }
@media(max-width:760px){ .value-card{ border-right:none; border-bottom:1px solid var(--rule); } .value-card:last-child{ border-bottom:none; } }
.value-card h3{ font-size:22px; color:var(--forest-800); margin-bottom:12px; }
.value-card p{ font-size:15px; color:var(--ink-soft); }
.value-n{ font-family:var(--mono); font-size:10px; letter-spacing:.22em; color:var(--muted); margin-bottom:20px; }

/* ---------- Quote section ---------- */
.quote-section{
  background:var(--cream-100); text-align:center;
  padding:clamp(80px,10vw,140px) 0; position:relative;
}
.quote-section::before,.quote-section::after{
  content:""; position:absolute; left:50%; transform:translateX(-50%);
  width:1px; height:60px; background:var(--rule);
}
.quote-section::before{ top:0; }
.quote-section::after{ bottom:0; }
blockquote{
  font-family:var(--serif); font-style:italic;
  font-size:clamp(28px,4vw,48px); line-height:1.25;
  color:var(--forest-800); max-width:22ch; margin:0 auto;
}
blockquote .mark{
  font-family:var(--serif); font-size:110px; line-height:0;
  color:var(--terra-400); display:block; height:30px; margin-bottom:10px;
}
.quote-cite{ margin-top:36px; font-family:var(--mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); }

/* ---------- Contact section ---------- */
.contact{ background:var(--cream-50); }
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,80px); }
@media(max-width:880px){ .contact-grid{ grid-template-columns:1fr; } }
.contact h2{ max-width:14ch; }
.channels{ display:flex; flex-direction:column; border-top:1px solid var(--rule); }
.channel{
  display:grid; grid-template-columns:36px 1fr auto;
  align-items:center; gap:18px; padding:20px 0;
  border-bottom:1px solid var(--rule); text-decoration:none; color:var(--ink);
  transition:padding-left .2s,background .2s;
}
.channel:hover{ padding-left:12px; background:rgba(91,122,82,.06); }
.channel-icon{ width:36px; height:36px; display:grid; place-items:center; color:var(--forest-700); border:1px solid var(--rule); border-radius:50%; background:var(--bone); }
.channel-icon svg{ width:18px; height:18px; }
.channel-label{ font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); display:block; margin-bottom:2px; }
.channel-value{ font-family:var(--serif); font-size:22px; color:var(--forest-900); }
.channel-arrow{ font-family:var(--mono); font-size:14px; color:var(--muted); }
.channel:hover .channel-arrow{ color:var(--forest-700); }

/* ---------- Contact form ---------- */
.contact-form{ display:flex; flex-direction:column; gap:20px; }
.field{ display:flex; flex-direction:column; gap:8px; }
.field label{ font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }
.field input,.field textarea,.field select{
  font-family:var(--sans); font-size:16px; color:var(--ink);
  background:var(--bone); border:1px solid var(--rule); border-radius:6px;
  padding:12px 16px; outline:none; transition:border-color .2s;
  width:100%;
}
.field input:focus,.field textarea:focus,.field select:focus{ border-color:var(--forest-700); }
.field textarea{ min-height:120px; resize:vertical; }

/* ---------- Filosofía blocks ---------- */
.fil-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,80px); align-items:start; }
@media(max-width:760px){ .fil-grid{ grid-template-columns:1fr; } }
.fil-block{ padding:clamp(50px,6vw,80px) 0; border-bottom:1px solid var(--rule); }
.fil-block:last-child{ border-bottom:none; }
.fil-block h2{ margin-bottom:20px; }
.fil-block p{ color:var(--ink-soft); max-width:58ch; }
.fil-num{ font-family:var(--serif); font-style:italic; font-size:72px; color:var(--sage-200); line-height:1; margin-bottom:16px; display:block; }

/* ---------- Legal pages ---------- */
.legal-content{
  max-width:760px; padding:clamp(60px,8vw,100px) 0;
  margin:0 auto;
}
.legal-content h2{ font-size:clamp(22px,2.8vw,32px); margin:48px 0 16px; color:var(--forest-800); }
.legal-content h2:first-child{ margin-top:0; }
.legal-content h3{ font-size:20px; margin:32px 0 10px; color:var(--forest-700); }
.legal-content p{ color:var(--ink-soft); font-size:16px; line-height:1.7; }
.legal-content ul{ padding-left:20px; color:var(--ink-soft); font-size:16px; line-height:1.7; }
.legal-content li{ margin-bottom:6px; }
.legal-content a{ color:var(--forest-700); text-decoration:underline; }
.legal-content table{ width:100%; border-collapse:collapse; font-size:15px; margin:24px 0; }
.legal-content th{ background:var(--forest-800); color:var(--cream-50); padding:10px 14px; text-align:left; font-family:var(--mono); font-size:10px; letter-spacing:.15em; text-transform:uppercase; }
.legal-content td{ padding:10px 14px; border-bottom:1px solid var(--rule); color:var(--ink-soft); }
.legal-content tr:hover td{ background:var(--cream-100); }
.legal-updated{ font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-top:56px; padding-top:24px; border-top:1px solid var(--rule); }

/* ---------- Footer ---------- */
footer{ background:var(--forest-900); color:var(--sage-200); padding:60px 0 36px; }
.foot-grid{ display:grid; grid-template-columns:2fr 1fr 1fr; gap:40px; margin-bottom:48px; }
@media(max-width:760px){ .foot-grid{ grid-template-columns:1fr; } }
footer h4{ font-family:var(--mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--sage-300); margin:0 0 18px; font-weight:500; }
footer a{ text-decoration:none; color:var(--cream-50); }
footer a:hover{ color:var(--terra-400); }
footer ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; font-size:15px; }
.foot-brand{ display:flex; align-items:center; gap:14px; margin-bottom:20px; }
.foot-brand .brand-mark{ box-shadow:0 0 0 1px rgba(217,225,201,.2); }
.foot-brand .brand-name{ color:var(--cream-50); }
.foot-tag{ font-family:var(--serif); font-style:italic; font-size:19px; color:var(--sage-200); max-width:36ch; }
.foot-bottom{
  border-top:1px solid rgba(217,225,201,.18); padding-top:24px;
  display:flex; justify-content:space-between; align-items:center;
  font-family:var(--mono); font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--sage-300); flex-wrap:wrap; gap:12px;
}
.foot-legal{ display:flex; gap:20px; flex-wrap:wrap; }
.foot-legal a{ color:var(--sage-300); font-size:11px; }
.foot-legal a:hover{ color:var(--terra-400); }

/* ---------- WordPress admin bar offset ---------- */
.admin-bar .nav{ top:32px; }
@media screen and (max-width:782px){ .admin-bar .nav{ top:46px; } }