/*
Theme Name: La Guía del Café
Theme URI: https://laguiadelcafe.es
Author: La Guía del Café
Description: Tema a medida para La Guía del Café — dirección Nórdico grafito y ámbar. Tipografía IBM Plex Sans, paleta cálida neutra con acento ámbar, jerarquía por peso.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: laguiadelcafe
*/

:root{
  --bg:#FFFFFF; --surface:#F7F7F6; --text:#1D1E20; --muted:#5F6166;
  --accent:#416BD7; --accent-ink:#FFFFFF; --verify:#1E8A5B; --line:#E8E8E6;
  --tint:#F1F1EF;
  --sans:"DM Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --display:"Open Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --s:8px;
}
/* Sitio siempre en claro (como laguiadelcafe.es). Sin modo oscuro automático. */
:root{color-scheme:light;}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
a{color:inherit;}
img{max-width:100%;height:auto;}
.wrap{max-width:1060px;margin:0 auto;padding:0 calc(var(--s)*3);}
main{display:block;}
/* Titulares en Open Sans; cuerpo en DM Sans */
h1,h2,h3,h4,.hero h1,h1.page-title,.sec-head h2,.article h2,.article h3,.row h3,.criterios .c h4{font-family:var(--display);}

/* NAV */
.site-nav{display:flex;align-items:center;justify-content:space-between;padding:calc(var(--s)*3) 0;border-bottom:1px solid var(--line);gap:calc(var(--s)*2);flex-wrap:wrap;}
.brand{display:flex;align-items:center;text-decoration:none;color:var(--text);}
.brand img{height:48px;width:auto;display:block;}
.brand .dot{display:none;}
.site-nav .menu{display:flex;align-items:center;gap:calc(var(--s)*3);font-size:14px;color:var(--muted);list-style:none;margin:0;padding:0;flex-wrap:wrap;}
.site-nav .menu a{text-decoration:none;color:var(--muted);}
.site-nav .menu a:hover{color:var(--accent);}
.site-nav .menu > li{position:relative;}
.sub-toggle{background:none;border:0;font:inherit;color:var(--muted);cursor:pointer;padding:0;display:inline-flex;align-items:center;gap:5px;}
.sub-toggle:hover{color:var(--accent);}
.submenu{list-style:none;margin:0;padding:calc(var(--s)*1) 0;position:absolute;top:calc(100% + 8px);left:0;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.08);min-width:190px;display:none;z-index:30;}
.has-sub:hover .submenu,.has-sub:focus-within .submenu,.has-sub.open .submenu{display:block;}
.submenu a{display:block;padding:calc(var(--s)*1) calc(var(--s)*2);white-space:nowrap;}
.nav-toggle{display:none;background:none;border:0;font-size:24px;line-height:1;color:var(--text);cursor:pointer;}
@media(max-width:860px){
  .nav-toggle{display:block;order:3;}
  .site-nav{flex-wrap:wrap;}
  .site-nav .menu{display:none;flex-basis:100%;flex-direction:column;align-items:flex-start;gap:calc(var(--s)*1);padding-top:calc(var(--s)*2);}
  .site-nav.open .menu{display:flex;}
  .submenu{position:static;display:block;border:0;box-shadow:none;padding:calc(var(--s)*0.5) 0 calc(var(--s)*1) calc(var(--s)*2);min-width:0;}
  .sub-toggle{pointer-events:none;}
}

/* HERO */
.hero{display:grid;grid-template-columns:1.55fr .8fr;gap:calc(var(--s)*6);align-items:end;padding:calc(var(--s)*10) 0 calc(var(--s)*7);}
.ey{font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin:0 0 calc(var(--s)*2);display:inline-flex;align-items:center;gap:8px;}
.ey::before{content:"";width:24px;height:2px;background:var(--accent);}
.hero h1{font-weight:600;font-size:52px;line-height:1.08;letter-spacing:-.01em;margin:0;max-width:18ch;text-wrap:balance;}
h1.page-title{font-weight:700;font-size:40px;line-height:1.14;letter-spacing:-.02em;margin:0 0 calc(var(--s)*4);max-width:none;text-wrap:balance;}
.lead{font-weight:300;font-size:21px;color:var(--muted);max-width:52ch;margin:calc(var(--s)*4) 0 0;}
.stats{display:flex;flex-direction:column;gap:0;}
.stat{display:flex;justify-content:space-between;align-items:baseline;padding:calc(var(--s)*2) 0;border-top:1px solid var(--line);}
.stat b{font-weight:800;font-size:26px;font-variant-numeric:tabular-nums;}
.stat span{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);}

/* CRITERIOS */
.criterios{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:calc(var(--s)*6) 0;display:grid;grid-template-columns:repeat(4,1fr);gap:calc(var(--s)*4);}
.criterios .c .num{font-weight:200;font-size:34px;color:var(--accent);font-variant-numeric:tabular-nums;line-height:1;}
.criterios .c h4{font-weight:700;font-size:16px;margin:calc(var(--s)*1.5) 0 calc(var(--s)*1);}
.criterios .c p{font-size:14px;color:var(--muted);margin:0;}

/* SECTION HEAD */
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:calc(var(--s)*3);margin:calc(var(--s)*9) 0 0;flex-wrap:wrap;}
.sec-head h2{font-weight:800;font-size:34px;letter-spacing:-.02em;margin:0;}
.sec-head p{color:var(--muted);font-size:15px;margin:0;}

/* RANKING ROWS */
.row{display:grid;grid-template-columns:160px 1fr;gap:calc(var(--s)*6);padding:calc(var(--s)*6) 0;border-top:1px solid var(--line);align-items:start;}
.row:first-of-type{margin-top:calc(var(--s)*3);}
.side{position:sticky;top:24px;}
.side .n{font-weight:200;font-size:66px;line-height:.9;color:var(--accent);font-variant-numeric:tabular-nums;}
.side .v{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--verify);margin-top:calc(var(--s)*1);display:inline-flex;align-items:center;gap:7px;}
.side .v::before{content:"";width:14px;height:2px;background:var(--verify);flex:none;}
.row h3{font-weight:700;font-size:27px;letter-spacing:-.01em;margin:0 0 calc(var(--s)*2);}
.desc{color:var(--muted);max-width:60ch;margin:0 0 calc(var(--s)*4);}
.specs{display:grid;grid-template-columns:repeat(3,minmax(0,140px));gap:calc(var(--s)*3);margin-bottom:calc(var(--s)*4);}
.specs .k{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);display:block;}
.specs .val{font-weight:700;font-size:18px;font-variant-numeric:tabular-nums;}
.foot{display:flex;align-items:center;gap:calc(var(--s)*4);flex-wrap:wrap;}
.price{font-weight:800;font-size:26px;font-variant-numeric:tabular-nums;}
.cta{font-weight:600;font-size:15px;text-decoration:none;color:var(--accent-ink);background:var(--accent);padding:calc(var(--s)*1.5) calc(var(--s)*3);border-radius:999px;display:inline-block;transition:transform .12s ease;}
.cta:hover{transform:translateY(-1px);}
.cta:focus-visible{outline:3px solid var(--verify);outline-offset:2px;}
.lnk{font-size:14px;color:var(--text);text-decoration:none;opacity:.7;}
.lnk:hover{opacity:1;color:var(--accent);}
.imgph{aspect-ratio:16/10;background:var(--tint);border-radius:16px;margin-bottom:calc(var(--s)*3);display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:13px;letter-spacing:.04em;overflow:hidden;}
.imgph img{width:100%;height:100%;object-fit:cover;}
/* Fotos de producto del ranking: completas sobre blanco, sin recorte */
.row .imgph{aspect-ratio:4/3;background:#fff;}
.row .imgph img{object-fit:contain;padding:calc(var(--s)*2);}

/* ARTICLE / GENERIC CONTENT */
.article{max-width:760px;margin:0 auto;padding:calc(var(--s)*7) 0;}
.article h2{font-weight:800;font-size:30px;letter-spacing:-.02em;margin:calc(var(--s)*6) 0 calc(var(--s)*2);}
.article h3{font-weight:700;font-size:22px;margin:calc(var(--s)*5) 0 calc(var(--s)*1.5);}
.article p{margin:0 0 calc(var(--s)*3);text-wrap:pretty;}
.article ul,.article ol{margin:0 0 calc(var(--s)*3) calc(var(--s)*3);padding:0;}
.article li{margin-bottom:calc(var(--s)*1);}
.article img{border-radius:8px;margin:calc(var(--s)*3) 0;}
.article a{color:var(--accent);text-underline-offset:3px;}
table.spec{border-collapse:collapse;width:100%;margin:calc(var(--s)*3) 0;font-size:15px;}
table.spec td,table.spec th{padding:calc(var(--s)*1.5) calc(var(--s)*1);border-bottom:1px solid var(--line);text-align:left;vertical-align:top;}
table.spec td:first-child{color:var(--muted);width:40%;}

/* DISCLOSURE + FOOTER */
.disc{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:calc(var(--s)*3);font-size:14px;color:var(--muted);margin-top:calc(var(--s)*8);}
.site-footer{border-top:1px solid var(--line);margin-top:calc(var(--s)*8);padding:calc(var(--s)*6) 0;color:var(--muted);font-size:14px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:calc(var(--s)*2);}

@media(prefers-reduced-motion:reduce){.cta{transition:none;}html{scroll-behavior:auto;}}
@media(max-width:820px){
  .hero{grid-template-columns:1fr;gap:calc(var(--s)*4);}
  .hero h1{font-size:42px;}
  h1.page-title{font-size:30px;}
  .criterios{grid-template-columns:repeat(2,1fr);}
  .row{grid-template-columns:1fr;gap:calc(var(--s)*2);}
  .side{position:static;display:flex;align-items:baseline;gap:16px;}
  .specs{grid-template-columns:repeat(3,1fr);}
}