/*
Theme Name: Bonsai La Siesta
Theme URI: https://bonsailasiesta.com
Author: Bonsai La Siesta
Description: Tema a medida para el vivero de bonsáis Bonsai La Siesta. Pensado alrededor de la sombra, la quietud y los anillos de crecimiento.
Version: 1.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
Text Domain: bonsai-la-siesta
*/

/* ============================================
   TOKENS
   ============================================ */
:root{
  --pine:#1F3D2B;       /* verde pino oscuro, texto principal y secciones oscuras */
  --pine-2:#274832;
  --sage:#7C8F6B;       /* verde salvia, acentos secundarios */
  --sage-light:#DCE4D2; /* fondo suave verdoso */
  --clay:#B5602F;       /* terracota quemada, acento principal */
  --clay-dark:#8C4A22;
  --paper:#EDEAE2;      /* fondo cálido tipo piedra/papel, NO crema genérico */
  --paper-2:#E2DED2;
  --bark:#2A2420;       /* casi negro cálido, footer y textos fuertes */
  --ink:#33302A;
  --line:#CBC5B4;
  --radius:4px;
  --max:1120px;
  --font-display:'Fraunces', Georgia, serif;
  --font-body:'Work Sans', -apple-system, sans-serif;
  --font-mono:'JetBrains Mono', ui-monospace, monospace;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.6;
}
img{max-width:100%;display:block;}
a{color:inherit;}
.wrap{max-width:var(--max);margin:0 auto;padding:0 28px;}

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:600;
  line-height:1.15;
  margin:0 0 .5em;
  color:var(--pine);
}
h1{font-size:clamp(2.4rem,5vw,4rem);font-weight:500;}
h2{font-size:clamp(1.6rem,3vw,2.4rem);}
h3{font-size:1.3rem;}
p{margin:0 0 1.1em;}

.eyebrow{
  font-family:var(--font-mono);
  font-size:.75rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--clay-dark);
  display:inline-block;
  margin-bottom:.9em;
}

.btn{
  display:inline-flex;
  align-items:center;
  gap:.5em;
  font-family:var(--font-mono);
  font-size:.85rem;
  letter-spacing:.03em;
  text-decoration:none;
  padding:.85em 1.5em;
  border-radius:var(--radius);
  border:1px solid var(--pine);
  color:var(--pine);
  background:transparent;
  transition:background .18s ease, color .18s ease;
}
.btn:hover{background:var(--pine);color:var(--paper);}
.btn.btn-solid{background:var(--clay);border-color:var(--clay);color:var(--paper);}
.btn.btn-solid:hover{background:var(--clay-dark);border-color:var(--clay-dark);}

/* ============================================
   HEADER
   ============================================ */
.site-header{
  position:sticky;top:0;z-index:50;
  background:var(--paper);
  border-bottom:1px solid var(--line);
}
.site-header .wrap{
  display:flex;align-items:center;justify-content:space-between;
  padding-top:18px;padding-bottom:18px;
}
.site-branding{display:flex;align-items:center;gap:.6em;text-decoration:none;}
.site-branding .mark{width:30px;height:30px;flex-shrink:0;}
.site-branding .name{
  font-family:var(--font-display);
  font-size:1.25rem;color:var(--pine);
}
.primary-nav ul{
  list-style:none;display:flex;gap:2em;margin:0;padding:0;
  font-family:var(--font-mono);font-size:.82rem;letter-spacing:.04em;text-transform:uppercase;
}
.primary-nav a{text-decoration:none;color:var(--ink);position:relative;padding-bottom:4px;}
.primary-nav a:hover{color:var(--clay-dark);}
.nav-toggle{display:none;}
@media (max-width:820px){
  .primary-nav{
    display:none;position:absolute;left:0;right:0;top:100%;
    background:var(--paper);border-bottom:1px solid var(--line);padding:20px 28px;
  }
  .primary-nav ul{flex-direction:column;gap:1em;}
  .nav-toggle{display:block;background:none;border:1px solid var(--pine);border-radius:var(--radius);padding:8px 12px;font-family:var(--font-mono);font-size:.8rem;cursor:pointer;color:var(--pine);}
  .site-header.nav-open .primary-nav{display:block;}
}

/* ============================================
   HERO
   ============================================ */
.hero{padding:70px 0 90px;position:relative;overflow:hidden;}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;}
.hero-copy .tagline{font-size:1.1rem;color:var(--pine-2);max-width:38ch;}
.hero-actions{display:flex;gap:14px;margin-top:1.6em;flex-wrap:wrap;}
.hero-art{position:relative;display:flex;align-items:center;justify-content:center;}
.hero-art svg{width:100%;max-width:420px;height:auto;}
@media (max-width:820px){
  .hero .wrap{grid-template-columns:1fr;}
  .hero-art{order:-1;max-width:260px;margin:0 auto 20px;}
}

/* ============================================
   SECTIONS
   ============================================ */
section{padding:70px 0;}
.section-head{max-width:60ch;margin-bottom:2.4em;}
.section-dark{background:var(--pine);color:var(--sage-light);}
.section-dark h2,.section-dark h3{color:var(--paper);}
.section-dark .eyebrow{color:var(--sage);}

.section-philosophy{border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.philosophy-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:start;}
.philosophy-grid .lede{font-family:var(--font-display);font-size:1.5rem;color:var(--pine);line-height:1.35;}
@media (max-width:820px){.philosophy-grid{grid-template-columns:1fr;}}

/* Plant-tag styled cards, para catálogo */
.tag-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
@media (max-width:900px){.tag-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.tag-grid{grid-template-columns:1fr;}}

.plant-tag{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  text-decoration:none;
  color:var(--ink);
  display:block;
  transition:transform .18s ease, box-shadow .18s ease;
}
.plant-tag:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(31,61,43,.12);}
.plant-tag figure{margin:0;aspect-ratio:4/3;background:var(--sage-light);overflow:hidden;}
.plant-tag figure img{width:100%;height:100%;object-fit:cover;}
.plant-tag .tag-body{padding:16px 18px 18px;}
.plant-tag .latin{font-family:var(--font-mono);font-size:.72rem;color:var(--sage);letter-spacing:.03em;}
.plant-tag h3{margin:.2em 0 .3em;font-size:1.1rem;}
.plant-tag .price{
  font-family:var(--font-mono);font-size:.95rem;color:var(--clay-dark);
  border-top:1px dashed var(--line);margin-top:.7em;padding-top:.6em;
}
.no-products-note{
  border:1px dashed var(--line);border-radius:var(--radius);padding:26px;
  font-family:var(--font-mono);font-size:.85rem;color:var(--pine-2);
}

/* Cuidados / blog, formato horizontal tipo ficha de vivero */
.care-list{display:flex;flex-direction:column;border-top:1px solid var(--line);}
.care-item{
  display:grid;grid-template-columns:120px 1fr auto;gap:24px;align-items:baseline;
  padding:22px 0;border-bottom:1px solid var(--line);text-decoration:none;color:inherit;
}
.care-item .care-date{font-family:var(--font-mono);font-size:.78rem;color:var(--sage);}
.care-item h3{margin:0;font-size:1.15rem;}
.care-item .care-excerpt{grid-column:1/-1;color:var(--pine-2);font-size:.95rem;margin-top:-6px;}
.care-item .care-arrow{font-family:var(--font-mono);font-size:.85rem;color:var(--clay-dark);}
@media (max-width:600px){
  .care-item{grid-template-columns:1fr;gap:6px;}
}

/* Sobre nosotros teaser */
.about-teaser .wrap{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center;}
.rings{width:100%;max-width:340px;}
@media (max-width:820px){.about-teaser .wrap{grid-template-columns:1fr;}}

/* Contacto */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px;}
.contact-detail{margin-bottom:1.4em;}
.contact-detail .label{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--sage);display:block;margin-bottom:.3em;}
.contact-form-note{border:1px dashed var(--line);border-radius:var(--radius);padding:20px;font-family:var(--font-mono);font-size:.82rem;}
@media (max-width:820px){.contact-grid{grid-template-columns:1fr;}}

/* ============================================
   PÁGINAS Y ENTRADAS GENÉRICAS
   ============================================ */
.page-content,.single-content{padding:70px 0;}
.page-content .wrap,.single-content .wrap{max-width:760px;}
.entry-title{margin-bottom:.3em;}
.entry-meta{font-family:var(--font-mono);font-size:.78rem;color:var(--sage);margin-bottom:2em;}
.single-content img{border-radius:var(--radius);margin:1.5em 0;}
.blog-grid{display:grid;grid-template-columns:1fr;max-width:760px;margin:0 auto;}

/* ============================================
   FOOTER
   ============================================ */
.site-footer{background:var(--bark);color:var(--sage-light);padding:60px 0 30px;}
.footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:40px;margin-bottom:40px;}
.site-footer h4{color:var(--paper);font-size:.95rem;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.06em;margin-bottom:.9em;}
.site-footer p{color:#B9B4A6;font-size:.92rem;}
.site-footer ul{list-style:none;margin:0;padding:0;}
.site-footer li{margin-bottom:.5em;}
.site-footer a{text-decoration:none;color:#B9B4A6;}
.site-footer a:hover{color:var(--paper);}
.footer-bottom{
  border-top:1px solid #453E36;padding-top:22px;
  font-family:var(--font-mono);font-size:.75rem;color:#8A8375;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;
}
@media (max-width:820px){.footer-grid{grid-template-columns:1fr;}}

/* ============================================
   WOOCOMMERCE — ajustes mínimos para heredar la identidad
   ============================================ */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:14px;
}
.woocommerce a.button, .woocommerce button.button, .woocommerce #respond input#submit{
  font-family:var(--font-mono);background:var(--clay);border-radius:var(--radius);border:none;color:var(--paper);
}
.woocommerce a.button:hover, .woocommerce button.button:hover{background:var(--clay-dark);}
.woocommerce span.onsale{background:var(--pine);border-radius:var(--radius);}
.woocommerce ul.products li.product .price{color:var(--clay-dark);font-family:var(--font-mono);}