/*
Theme Name: Tarantos
Theme URI: https://bodegalostarantos.es
Author: Tarantos
Description: Tema WP envolviendo web estática con estilo claro “Papel & Vino” + responsive móvil/tablet.
Version: 1.0.1
Requires at least: 6.0
Tested up to: 6.6
License: GPLv2 or later
Text Domain: tarantos
*/

/* ========== PALETA CLARA: PAPEL & VINO ========== */
:root{
  --bg:#f7f3e9;         /* papel pergamino */
  --surface:#fffaf1;    /* tarjetas claras */
  --ink:#2a2a2a;        /* texto principal */
  --muted:#6f6a60;      /* texto secundario */

  --wine:#8b1538;       /* vino tinto */
  --gold:#b58a4b;       /* dorado suave */
  --gold-2:#9c7437;

  --line:#e6dfcf;

  --glass:#ffffffcc;
  --maxw:1260px; --radius:18px; --shadow:0 18px 50px rgba(0,0,0,.15);
  --gutter:22px;
}

/* ========== BASE + TEXTURA ========== */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--ink);
  background:
    radial-gradient(1200px 700px at 70% -10%, #fff6dc 0, var(--bg) 60%),
    url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'>\
<filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='1' stitchTiles='stitch'/>\
<feColorMatrix type='matrix' values='1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 .06 0'/></filter>\
<rect width='100%' height='100%' filter='url(%23n)' fill='none'/></svg>") repeat;
  background-attachment: fixed, fixed;
  line-height:1.65;
  font-family:ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

img{max-width:100%; height:auto; border-radius:14px}
a{color:var(--wine); text-decoration:none}
a:hover{opacity:.9}
a:focus,button:focus,input:focus,select:focus,textarea:focus{outline:3px solid var(--gold); outline-offset:2px}

.container{max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter)}
.center{text-align:center}
.small{font-size:.92rem; color:var(--muted)}
hr{border:0; border-top:1px solid var(--line); margin:26px 0}

/* Grids utilitarias */
.two{display:grid; gap:28px; grid-template-columns:1.15fr .85fr}
@media (max-width:1000px){.two{grid-template-columns:1fr}}

/* Skip link */
.skip-link{position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden}
.skip-link:focus{left:10px; top:10px; width:auto; height:auto; background:#fff; color:#111; padding:8px 12px; border-radius:8px; z-index:9999}

/* ========== HEADER ========== */
.header{
  position:sticky; top:0; z-index:90;
  border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.75);
  backdrop-filter:saturate(150%) blur(10px);
}
.nav{display:flex; align-items:center; justify-content:space-between; padding:12px 0}
.brand{display:flex; align-items:center; gap:14px; font-weight:800; letter-spacing:.08em}
.brand img{height:28px; width:auto; display:block}
.menu{display:flex; gap:18px; align-items:center}
.menu a{padding:10px 12px; border-radius:12px}
.menu a[aria-current="page"], .menu .current{background:rgba(181,138,75,.16)}
.burger{display:none}
@media (max-width:860px){
  .menu{display:none}
  .burger{display:inline-flex; color:#2a2a2a; background:#ffffff; border:1px solid #e8dcc3; border-radius:10px; padding:10px 12px}
  .menu.open{
    display:flex; flex-direction:column; gap:10px;
    position:absolute; left:var(--gutter); right:var(--gutter); top:64px;
    padding:14px; background:#fffef8; border:1px solid #eadfc9; border-radius:14px
  }
}

/* ========== HERO ========== */
.hero{position:relative; overflow:clip; border-bottom:1px solid var(--line)}
.kicker{color:var(--muted); text-transform:uppercase; letter-spacing:.22em; text-align:center; font-size:.9rem}
h1{font-size:clamp(2.2rem, 2.4vw + 1rem, 3.2rem); margin:8px 0 10px; line-height:1.2; text-align:center}
.lead{color:#3b3b3b; text-align:center; max-width:860px; margin:0 auto}
.cta{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:16px}
.btn{border:1px solid #e3d7bd; background:linear-gradient(#fff,#fff9ee); color:#303030; padding:12px 16px; border-radius:12px; font-weight:700; cursor:pointer; transition:.2s transform ease; min-height:44px}
.btn:hover{transform:translateY(-1px)}
.btn.primary{border-color:var(--gold-2); background:linear-gradient(var(--gold), var(--gold-2)); color:#2a1d0d}
.btn.ghost{background:#ffffff}

/* Hero con Ken Burns (si se usa .home-hero) */
.home-hero{position:relative; isolation:isolate; min-height:62vh; display:flex; align-items:center; padding:72px 0 28px; overflow:hidden}
.home-hero .hero-bg{
  position:absolute; inset:0; z-index:0;
  background-image:var(--hero-img, url('assets/accf371b-5c4c-47b4-9f10-dc432c3452da.jpg'));
  background-size:cover; background-position:center 35%; background-repeat:no-repeat;
  filter:contrast(105%) saturate(104%); transform:scale(1.02);
  animation:kenburns 24s ease-in-out infinite alternate;
}
@keyframes kenburns{
  0%   { transform:scale(1.02) translate3d(0,-4px,0); background-position:center 30% }
  100% { transform:scale(1.06) translate3d(0, 4px,0); background-position:center 40% }
}
.home-hero::before{content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(255,255,255,.70) 0%, rgba(255,255,255,.84) 45%, rgba(255,255,255,.92) 100%);
  pointer-events:none
}
.home-hero .container{display:grid; place-items:center; min-height:inherit}
.hero .panel{background:var(--glass); border:1px solid #eadfc9; border-radius:18px; padding:18px; box-shadow:var(--shadow); transform:none; opacity:1}
@supports (animation: name){
  .hero .panel{ transform: translateY(14px); opacity: 0; transition: .6s ease }
  .hero .panel.reveal{ transform:none; opacity:1 }
}

/* Distintivo (opcional) */
.badge-solete{position:absolute; right:clamp(14px, 2.2vw, 28px); top:clamp(14px, 2.2vw, 28px); display:flex; align-items:center; gap:10px; text-decoration:none; padding:8px 12px; border-radius:999px; background:rgba(255,255,255,.75); border:1px solid #eadfc9; box-shadow:0 10px 30px rgba(0,0,0,.15); z-index:5}
.badge-solete .sun{width:54px; height:54px; border-radius:999px; background:radial-gradient(circle at 30% 30%, #ffcc33, #ff9a00 60%, #8a4600 100%); box-shadow:0 0 60px #ff9a0055}
.badge-solete span{color:#3b3b3b; font-weight:700}
@media (max-width:860px){ .badge-solete{ transform:scale(.92); transform-origin:top right } }

/* ========== SECCIONES / TARJETAS / FEATURES ========== */
.section{padding:56px 0}
.section h2{font-size:clamp(1.7rem, 1vw + 1.3rem, 2.1rem)}
.card{background:linear-gradient(180deg, var(--surface) 0, #fff7e9 100%); border:1px solid #eadfc9; color:var(--ink); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow); transform:translateY(20px); opacity:0; transition:.7s ease}
.card.reveal{transform:none; opacity:1}

.features{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
@media (max-width:1024px){.features{grid-template-columns:repeat(2,1fr)}}
@media (max-width:680px){.features{grid-template-columns:1fr}}
.feature{display:flex; gap:14px; align-items:flex-start; background:linear-gradient(180deg, #fffdf6, var(--surface)); border:1px solid #eadfc9; border-radius:14px; padding:16px; transition:transform .25s ease}
.feature:hover{transform:translateY(-4px)}
.feature .icon{width:66px; height:66px; flex:0 0 66px; border-radius:14px; display:grid; place-items:center; background:radial-gradient(circle at 30% 30%, rgba(181,138,75,.20), rgba(131,98,47,.08)); border:1px solid #c9a87333}
.feature .icon img{width:40px; height:40px; display:block}

/* Collage */
.collage{position:relative; padding-bottom:18px}
.collage .inset{position:absolute; right:18px; bottom:18px; width:min(42%,260px); border-radius:14px; border:3px solid #fff; box-shadow:0 12px 40px rgba(0,0,0,.2)}
.collage figcaption{display:block; margin-top:10px; padding-right:calc(min(42%, 260px) + 18px)}
@media (max-width:680px){ .collage .inset{position:static; width:100%; margin-top:12px; border-width:2px} .collage figcaption{padding-right:0} }

/* Dedicataria */
.quote-row{display:grid; grid-template-columns:180px 1fr; gap:18px; align-items:center}
@media (max-width:700px){ .quote-row{grid-template-columns:1fr} }
.avatar-wrap{display:grid; place-items:center}
.avatar{width:160px; height:160px; border-radius:999px; object-fit:cover; border:3px solid var(--gold); box-shadow:0 10px 30px rgba(0,0,0,.15)}
.quote-body p{margin:0 0 12px}
.quote-sign{margin-top:8px; padding-top:10px; border-top:2px solid #efe7d4; color:#6d6558}

/* Quick actions móvil (opcional) */
@media (max-width:860px){
  .quickbar{position:fixed; left:0; right:0; bottom:0; z-index:95; display:flex; gap:12px; padding:10px 14px; background:rgba(255,255,255,.95); border-top:1px solid #eadfc9; backdrop-filter:blur(6px)}
  .quickbar a{flex:1; text-align:center}
}

/* Accesibilidad: reduce motion */
@media (prefers-reduced-motion:reduce){
  .home-hero .hero-bg{animation:none; transform:none}
}

/* ========== FOOTER + KIT DIGITAL ========== */
footer{margin-top:56px; background:#fffdf6; border-top:1px solid var(--line)}
.footer-sep{border:0; border-top:1px solid var(--line); margin:18px 0 10px}

.kit-top{ padding:14px 0 4px; text-align:center }
.kit-title{ margin:0 0 10px }

.kit-strip{ display:flex; justify-content:center; align-items:center; padding:0 }
.kit-strip picture{ display:block; width:100% }
.kit-strip img{ display:block; width:min(100%, 1100px); height:auto; border-radius:14px; box-shadow:0 10px 24px rgba(0,0,0,.06) }

/* Full-bleed en móvil para que “respire” */
@media (max-width:860px){
  .kit-top .container{ padding-left:0; padding-right:0 }
  .kit-strip img{ width:100vw; max-width:100vw; border-radius:0 }
}

/* 3 columnas del pie -> 2 en tablet -> 1 en móvil */
.footer-grid{ display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:24px; align-items:start; padding:16px 0 28px }
@media (max-width:1000px){ .footer-grid{ grid-template-columns:1fr 1fr } }
@media (max-width:640px){ .footer-grid{ grid-template-columns:1fr } }

.unstyled{ list-style:none; padding:0; margin:0 }
.unstyled li{ margin:.35rem 0 }

/* Kill-switch temporal de banners de cookies (hasta implementar el definitivo) */
#consent, .consent-summary, [data-component="cookie-consent"], .cookie-banner, .cc-window {
  display:none !important; visibility:hidden !important;
}