/*
Theme Name: La Casa del Cuento
Theme URI: https://lacasadelcuento.es/
Description: Tema a medida de La Casa del Cuento (Patones de Arriba). Concepto "el cuento por capítulos": paleta papel/tinta/bosque/hiedra/baya/oro, tipografía de cuento. Preparado para tienda WooCommerce. Desarrollado en colaboración por pymIT.
Author: La Casa del Cuento
Author URI: https://lacasadelcuento.es/
Version: 0.1.12
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 8.0
License: GPL-2.0-or-later
Text Domain: casa-del-cuento
*/

/* ============================================================
   La Casa del Cuento - sistema "el cuento por capitulos"
   Papel calido de fondo; tinta para leer; bosque/hiedra de la
   sierra; baya como acento; oro para los capitulos. Tipografia
   serif para las voces del cuento, sans para la interfaz.
   ============================================================ */
:root{
  --papel:#faf6ec; --papel-2:#f3ecdc; --tinta:#2e3226; --tinta-suave:#5c6152;
  --bosque:#4a5d43; --hiedra:#6e7f5a; --baya:#a34d5d; --baya-2:#b56371; --oro:#b98d4f;
  --linea:rgba(46,50,38,.16);
  --serif:Georgia,"Iowan Old Style","Palatino Linotype",serif;
  --sans:ui-sans-serif,system-ui,"Segoe UI",Roboto,Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--papel);color:var(--tinta);font-family:var(--sans);font-size:17px;line-height:1.75}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:.005em}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}

#nav{position:fixed;top:0;left:0;right:0;z-index:40;padding:14px 0;transition:background .3s,box-shadow .3s}
#nav.on{background:rgba(250,246,236,.94);backdrop-filter:blur(8px);box-shadow:0 1px 0 var(--linea)}
/* compensar la barra de administracion de WordPress (solo usuarios logueados) */
.admin-bar #nav{top:32px}
@media screen and (max-width:782px){.admin-bar #nav{top:46px}}
.nav-in{display:flex;align-items:center;justify-content:space-between}
.brand{font-family:var(--serif);font-size:1.25rem;color:var(--tinta)}
#nav .brand{color:var(--tinta)}
.brand em{font-style:italic;color:var(--baya)}
.menu{display:flex;gap:26px;font-size:.9rem;align-items:center}
.menu a{color:var(--tinta-suave);border-bottom:1px solid transparent;transition:color .2s,border-color .2s;padding:2px 0}
.menu a:hover{color:var(--baya);border-color:var(--baya)}
.menu a.menu-tienda{color:var(--baya);font-weight:600}
/* menu movil (hamburguesa) */
.burger{display:none;background:none;border:0;cursor:pointer;color:var(--tinta);padding:6px;margin:-6px}
#nav:not(.on) .burger{color:#fff;filter:drop-shadow(0 1px 4px rgba(30,32,24,.6))}
@media(max-width:760px){
  .burger{display:inline-flex;align-items:center}
  .menu{position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;align-items:stretch;
    background:rgba(250,246,236,.98);backdrop-filter:blur(10px);box-shadow:0 14px 26px -14px rgba(46,50,38,.5);
    padding:8px 24px 14px;display:none;border-top:1px solid var(--linea)}
  .menu.open{display:flex}
  .menu a{padding:13px 2px;border-bottom:1px solid var(--linea);font-size:1rem}
  .menu a:last-child{border-bottom:0}
}

/* hero - degradado ligero para que la casa respire */
.hero{position:relative;min-height:94svh;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden}
.hero-img{position:absolute;inset:0;background:url(assets/img/hero.jpg) center 60%/cover no-repeat}
.hero-veil{position:absolute;inset:0;background:
  radial-gradient(120% 72% at 50% 92%, rgba(46,50,38,.5) 0%, rgba(46,50,38,0) 62%),
  linear-gradient(180deg, rgba(250,246,236,.32) 0%, rgba(250,246,236,.04) 26%, rgba(250,246,236,0) 48%, rgba(46,50,38,.32) 100%)}
.hero-in{position:relative;z-index:2;text-align:center;padding:120px 24px 9vh;margin:0 auto;max-width:900px}
.erase{font-family:var(--serif);font-style:italic;font-size:clamp(1.05rem,2vw,1.35rem);color:#fbf7ec;margin:0 0 10px;text-shadow:0 2px 16px rgba(30,32,24,.9)}
.hero h1{font-size:clamp(2.6rem,7vw,4.6rem);line-height:1.02;margin:0 0 16px;color:#fff;text-shadow:0 2px 28px rgba(30,32,24,.92),0 1px 6px rgba(30,32,24,.75)}
.hero h1 em{font-style:italic;color:#f4cbd3}
.hero .sub{font-size:clamp(1rem,1.8vw,1.2rem);color:#f6f1e6;max-width:52ch;margin:0 auto 26px;text-shadow:0 1px 14px rgba(30,32,24,.92)}
.hero .cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:.55em;font-weight:600;font-size:.93rem;padding:14px 26px;
  border-radius:100px;border:1px solid transparent;transition:transform .18s,background .18s,color .18s,border-color .18s;cursor:pointer}
.btn-b{background:var(--baya);color:#fdf7f2;border-color:var(--baya)}
.btn-b:hover{background:var(--baya-2);transform:translateY(-2px)}
.btn-g{background:rgba(250,246,236,.14);color:#fff;border-color:rgba(255,255,255,.6);backdrop-filter:blur(3px)}
.btn-g:hover{background:rgba(250,246,236,.28);transform:translateY(-2px)}

.cap{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--oro);
  display:flex;align-items:center;gap:12px;justify-content:center;margin-bottom:14px}
.cap::before,.cap::after{content:"";width:34px;height:1px;background:var(--oro);opacity:.7}
section{padding:96px 0}
.sec-t{font-size:clamp(1.9rem,4vw,2.7rem);line-height:1.1;text-align:center;margin:0 0 14px}
.sec-t em{font-style:italic;color:var(--baya)}
.sec-lead{text-align:center;max-width:60ch;margin:0 auto;color:var(--tinta-suave);font-size:1.1rem}
.dropcap::first-letter{font-family:var(--serif);font-size:3.2em;float:left;line-height:.82;padding:6px 10px 0 0;color:var(--baya)}
.vine{display:flex;justify-content:center;margin:0 auto;opacity:.75}
.cap1-logo{display:block;width:220px;max-width:62%;height:auto;margin:46px auto 0}

/* hueco de foto (placeholder cuando aun no hay imagen) */
.ph{position:relative;border-radius:12px;overflow:hidden;background:linear-gradient(150deg,#eef0e4,#e7ddca);display:flex;align-items:center;justify-content:center;text-align:center}
.ph::after{content:"";position:absolute;inset:8px;border:1px dashed rgba(74,93,67,.45);border-radius:8px;pointer-events:none}
.ph .ph-in{position:relative;z-index:1;color:var(--bosque);padding:16px}
.ph .ph-in svg{width:30px;height:30px;stroke:var(--bosque);fill:none;stroke-width:1.3;margin:0 auto 6px;opacity:.8}
.ph .ph-in b{display:block;font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;opacity:.7}
.ph .ph-in span{font-family:var(--serif);font-style:italic;font-size:1.02rem;color:var(--tinta)}

/* rincon */
.lugar{background:var(--papel-2)}
.lugar-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:52px}
.lcard{background:var(--papel);border:1px solid var(--linea);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s}
.lcard:hover{transform:translateY(-4px);box-shadow:0 18px 34px -22px rgba(46,50,38,.35)}
.lcard .ph{height:170px;border-radius:0}
.lcard .lbody{padding:24px;text-align:center;display:flex;flex-direction:column;gap:10px;align-items:center}
.lcard .lbody>svg{width:34px;height:34px;stroke:var(--baya);fill:none;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.lcard b{font-family:var(--serif);font-weight:400;font-size:1.25rem;color:var(--tinta)}
.lcard span{font-size:.93rem;color:var(--tinta-suave)}
@media(max-width:820px){.lugar-grid{grid-template-columns:1fr}}

/* tesoros */
.tes-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:52px}
.tcard{border-radius:16px;overflow:hidden;border:1px solid var(--linea);display:flex;flex-direction:column;background:var(--papel)}
.tcard .ph{height:200px;border-radius:0}
.tcard.verde .ph{background:linear-gradient(150deg,#eef0e4,#dbe3ca)}
.tcard.rosa .ph{background:linear-gradient(150deg,#f7ebe8,#eccdd0)}
.tcard.miel .ph{background:linear-gradient(150deg,#f7efe0,#ecdcbb)}
.tcard.cielo .ph{background:linear-gradient(150deg,#e9eef0,#d5e2e4)}
.tbody{padding:28px 26px;display:flex;flex-direction:column;gap:8px}
.tbody .num{font-family:var(--serif);font-style:italic;color:var(--oro);font-size:1rem}
.tbody h3{margin:0;font-size:1.4rem;color:var(--tinta)}
.tbody p{margin:0;font-size:.95rem;color:var(--tinta-suave)}
.tbody .ej{font-size:.83rem;color:var(--bosque);font-style:italic}
@media(max-width:760px){.tes-grid{grid-template-columns:1fr}}

/* talleres */
.taller{background:var(--bosque);color:#f2efe4}
.taller .cap{color:#d9c58f}.taller .cap::before,.taller .cap::after{background:#d9c58f}
.taller .sec-t{color:#fdfbf3}.taller .sec-t em{color:#eec5cd}
.taller .sec-lead{color:#d9dcc8}
.taller-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:34px;align-items:center;margin-top:46px}
.taller .ph{height:320px;background:linear-gradient(150deg,#5a6d52,#43563e)}
.taller .ph::after{border-color:rgba(250,246,236,.4)}
.taller .ph .ph-in,.taller .ph .ph-in span{color:#f2efe4}
.taller .ph .ph-in svg{stroke:#f2efe4}
.taller-txt b{font-family:var(--serif);font-weight:400;font-size:1.5rem;display:block;margin-bottom:10px;color:#fdfbf3}
.taller-txt p{color:#d9dcc8;margin:0 0 8px}
.taller-txt .mini{font-size:.9rem;color:#c3c9b2;font-style:italic}
@media(max-width:760px){.taller-grid{grid-template-columns:1fr}}

/* visita */
.visita-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:50px;align-items:start}
.vinfo{display:grid;gap:18px}
.vrow{display:flex;gap:14px;align-items:flex-start}
.vrow svg{width:22px;height:22px;stroke:var(--baya);fill:none;stroke-width:1.5;flex-shrink:0;margin-top:4px}
.vrow b{display:block;font-size:.95rem}
.vrow span,.vrow a{font-size:.93rem;color:var(--tinta-suave)}
.vrow a{color:var(--baya);border-bottom:1px solid rgba(163,77,93,.3)}
.mapa{border-radius:16px;overflow:hidden;border:1px solid var(--linea);background:linear-gradient(160deg,#eef0e4,#e4e9d8);display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:300px;gap:8px;text-align:center;padding:20px}
.mapa b{font-family:var(--serif);font-weight:400;font-size:1.3rem}
.mapa span{font-size:.85rem;color:var(--tinta-suave)}
@media(max-width:760px){.visita-grid{grid-template-columns:1fr}}

footer{background:var(--tinta);color:#cfd2c3;padding:54px 0 30px;text-align:center}
.foot-logo{width:200px;height:auto;margin:0 auto 14px;display:block}
footer .fin{font-family:var(--serif);font-style:italic;font-size:1.6rem;color:#f2efe4;margin:0 0 8px}
footer p{font-size:.85rem;margin:6px 0}
footer a{color:#eec5cd}
.foot-legal{margin:18px 0 0;display:flex;gap:6px 18px;justify-content:center;flex-wrap:wrap;font-size:.8rem}
.foot-legal a{color:#cfd2c3;border-bottom:1px solid rgba(250,246,236,.2)}
.foot-legal a:hover{color:#eec5cd}
.nota{margin-top:26px;padding-top:18px;border-top:1px solid rgba(250,246,236,.15);font-size:.75rem;color:#9aa08c}

.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s,transform .7s}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}
.ph.filled::after{display:none}
.mapa-img{position:relative;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;min-height:300px;padding:0;background-size:cover;background-position:center;text-decoration:none}
.mapa-img::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(46,50,38,0) 45%,rgba(46,50,38,.7) 100%);border-radius:16px}
.map-tag{position:relative;z-index:1;color:#fff;font-family:var(--serif);font-size:1.1rem;padding:0 18px 4px;text-shadow:0 1px 8px rgba(0,0,0,.7)}
.map-btn{position:relative;z-index:1;margin:0 0 16px 18px}
/* voces del cuento (testimonios) */
.voces-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:50px}
.voz{margin:0;background:var(--papel-2);border:1px solid var(--linea);border-radius:16px;padding:26px 26px 24px;display:flex;flex-direction:column;gap:12px}
.voz blockquote{margin:0;font-family:var(--serif);font-style:italic;font-size:1.12rem;line-height:1.6;color:var(--tinta)}
.voz blockquote p{margin:0 0 .5em}.voz blockquote p:last-child{margin-bottom:0}
.voz blockquote::before{content:"\201C";font-family:var(--serif);font-size:2.6rem;color:var(--oro);line-height:.1;display:block;height:.42em}
.voz figcaption{font-size:.92rem;color:var(--baya);font-weight:600}
@media(max-width:820px){.voces-grid{grid-template-columns:1fr}}

.encargo{background:var(--papel-2)}
.ecf{display:grid;gap:16px;margin-top:36px;text-align:left}
.efield{display:flex;flex-direction:column;gap:6px}
.efield label{font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--tinta-suave)}
.efield input,.efield textarea{background:var(--papel);border:1px solid var(--linea);border-radius:10px;padding:13px 15px;font-family:var(--sans);font-size:1rem;color:var(--tinta)}
.efield input:focus,.efield textarea:focus{outline:none;border-color:var(--baya)}
.efield textarea{min-height:120px;resize:vertical}
.ecf-msg{margin:2px 0 0;text-align:center;font-family:var(--serif);font-style:italic;font-size:1.1rem;color:var(--bosque);display:none}

/* paginas de contenido (legal, sobre la casa, blog) */
.page-shell{padding:130px 0 90px}
.entry{margin:0 0 40px}
.entry-title{font-family:var(--serif);font-weight:400;font-size:clamp(1.8rem,4vw,2.5rem);line-height:1.12;color:var(--tinta);margin:0 0 8px}
.entry-title em{font-style:italic;color:var(--baya)}
.entry-content{color:var(--tinta);font-size:1.02rem}
.entry-content h2{font-size:1.5rem;margin:1.6em 0 .4em;color:var(--tinta)}
.entry-content h3{font-size:1.2rem;margin:1.4em 0 .3em;color:var(--bosque)}
.entry-content a{color:var(--baya);border-bottom:1px solid rgba(163,77,93,.3)}
.entry-content ul,.entry-content ol{padding-left:1.3em}
.entry-content li{margin:.3em 0}
.entry-content blockquote{margin:1.2em 0;padding:.4em 1.1em;border-left:3px solid var(--oro);font-family:var(--serif);font-style:italic;color:var(--tinta-suave)}
.entry-nav{margin-top:30px;font-size:.95rem}
.entry-nav a{color:var(--baya)}

/* ============================================================
   WooCommerce - la tienda, con la voz del cuento
   ============================================================ */
.woo-shell{padding:130px 0 90px}
.woocommerce .woocommerce-breadcrumb{color:var(--tinta-suave);font-size:.85rem;margin-bottom:18px}
.woocommerce .woocommerce-breadcrumb a{color:var(--baya)}
.woocommerce-products-header__title,
.woocommerce .woocommerce-products-header__title,
.woocommerce h1.page-title{font-family:var(--serif);font-weight:400;font-size:clamp(1.9rem,4vw,2.7rem);color:var(--tinta);text-align:center;margin:0 0 10px}
.woocommerce .term-description{text-align:center;max-width:60ch;margin:0 auto 30px;color:var(--tinta-suave)}
/* rejilla de productos */
.woocommerce ul.products{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:26px;margin:30px 0 0}
.woocommerce ul.products::before,.woocommerce ul.products::after{content:none}
.woocommerce ul.products li.product{width:auto!important;margin:0!important;float:none!important;
  background:var(--papel);border:1px solid var(--linea);border-radius:16px;overflow:hidden;
  display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s}
.woocommerce ul.products li.product:hover{transform:translateY(-4px);box-shadow:0 18px 34px -22px rgba(46,50,38,.35)}
.woocommerce ul.products li.product a img{margin:0;border-radius:0;aspect-ratio:1/1;object-fit:cover}
.woocommerce ul.products li.product .woocommerce-loop-product__title{font-family:var(--serif);font-weight:400;
  font-size:1.15rem;color:var(--tinta);padding:16px 18px 4px}
.woocommerce ul.products li.product .price{color:var(--bosque);padding:0 18px;font-size:1rem}
.woocommerce ul.products li.product .cdc-reserva{margin:12px 18px 18px}
/* botones y avisos con la paleta */
.woocommerce a.button,.woocommerce button.button,.woocommerce .button,
.woocommerce #respond input#submit,.woocommerce input.button{
  background:var(--baya)!important;color:#fdf7f2!important;border-radius:100px!important;
  padding:12px 24px!important;font-weight:600!important;border:1px solid var(--baya)!important}
.woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce .button:hover{background:var(--baya-2)!important}
.woocommerce .woocommerce-message,.woocommerce .woocommerce-info{border-top-color:var(--baya)}
.woocommerce .onsale{background:var(--oro);border-color:var(--oro)}
/* ficha de producto */
.woocommerce div.product .product_title{font-family:var(--serif);font-weight:400;color:var(--tinta)}
.woocommerce div.product p.price,.woocommerce div.product span.price{color:var(--bosque)}
@media(max-width:520px){.woocommerce ul.products{grid-template-columns:1fr 1fr;gap:16px}}