/*
Theme Name: HazLoTuyo Studio
Theme URI: https://studio.hazlotuyo.pro
Author: Alex + ChatGPT
Author URI: https://studio.hazlotuyo.pro
Description: Tema oscuro con hero 3:2 editable, servicios con imágenes 3:2, bloque social, últimas obras (CPT obra) con fallback de miniaturas y blog. Tipografía clara y centrado en móvil.
Version: 4.8.0
Requires at least: 5.8
Tested up to: 6.6
Requires PHP: 7.4
Text Domain: hazlotuyo-studio
License: GPL-2.0+
*/

:root{
  --bg:#0D0D0D;
  --text:#F5F5F5;
  --muted:#C7C7C7;
  --red:#D00000;
  --yellow:#FFC400;
  --border:#1a1a1a;
  --card:#111;
  --max:1200px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;line-height:1.6}
a{color:var(--text);text-decoration:none}
a:hover{opacity:.9}
img{max-width:100%;height:auto;display:block}

.container{max-width:var(--max);margin:0 auto;padding:0 20px}

header.site-header{border-bottom:1px solid var(--border);padding:22px 0 14px}
header .container{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.brand a{font-weight:800;font-size:24px;letter-spacing:.4px}
.brand .dot{color:var(--red)}
.primary ul{list-style:none;margin:0;padding:0;display:flex;gap:18px;text-transform:uppercase;letter-spacing:.06em;font-size:13px;flex-wrap:wrap;justify-content:center}

.hero{padding:56px 0;border-bottom:1px solid var(--border)}
.hero .hero-img{aspect-ratio:3/2;border:1px solid var(--border);border-radius:16px;overflow:hidden;background:#0f0f0f}
.hero .lead{max-width:760px;margin:14px auto;color:var(--muted)}
.btns{display:flex;gap:12px;justify-content:center;margin-top:10px}
.btn{display:inline-block;padding:12px 18px;border-radius:12px;border:1px solid var(--border);font-weight:600;min-height:44px;line-height:1;background:transparent}
.btn-primary{background:var(--red);border-color:var(--red);color:var(--text)}

.section{padding:48px 0;border-bottom:1px solid var(--border)}
h1,h2,h3{font-family:Georgia,Times,serif;margin:0 0 12px;line-height:1.2}
h1{font-size:clamp(28px,4.6vw,44px)}
h2{font-size:clamp(22px,3.2vw,28px)}
h3{font-size:clamp(18px,2.4vw,20px)}
.card{padding:18px;border:1px solid var(--border);border-radius:16px;background:var(--card)}
.grid{display:grid;gap:24px}
.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.thumb{border-radius:12px;overflow:hidden;aspect-ratio:3/2;background:#0f0f0f;border:1px solid var(--border)}
.meta{font-size:13px;color:var(--muted);margin-top:6px}
.more{display:inline-block;margin-top:10px}

.social .social-wrap{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.social .links{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.social .links .btn{min-width:120px;text-align:center}

footer.site-footer{border-top:1px solid var(--border);padding:36px 0;text-align:center;color:var(--muted);font-size:14px}

@media (max-width:900px){
  .cols-3{grid-template-columns:1fr}
  .hero{padding:40px 0}
}


/* --- v4.7 tweaks --- */
:root{
  --bg:#121212;
  --text:#E0E0E0;
  --muted:#B8B8B8;
}
body{background:var(--bg);color:var(--text);}
p,li{color:var(--text);}
.btn.secondary{border:1px solid rgba(255,255,255,.28);background:transparent;}
.btn.secondary:hover{border-color:rgba(255,255,255,.6);transform:translateY(-1px);}
.service-card{display:block;color:inherit;text-decoration:none;}
.service-card:hover .thumb img{transform:scale(1.03);}
.thumb img{width:100%;height:100%;object-fit:cover;transition:transform .25s ease;}
.entry-content img, .entry-content figure, .entry-content video, .entry-content iframe{max-width:100%;height:auto;}
.entry-content .wp-block-image img{border-radius:14px;}
.follow{padding-top:36px;margin-top:18px;}
.follow .social-btn svg{width:18px;height:18px;vertical-align:-3px;margin-right:8px;opacity:.9;}


/* --- v4.7.1 fixes (layout + spacing) --- */
.btn{border-color:rgba(255,255,255,.22)}
.btn:hover{border-color:rgba(255,255,255,.45)}
.btn.btn-primary:hover{filter:brightness(1.04)}
.card{transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease}
.card:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.16);box-shadow:0 12px 30px rgba(0,0,0,.35)}
.thumb{display:block;width:100%}
.thumb img{display:block;width:100%;height:100%;object-fit:cover}
.section-last{padding-bottom:72px;border-bottom:0}
footer.site-footer{margin-top:0;padding-top:44px}

/* --- v4.8 mobile-first polish --- */
:root{
  --radius:16px;
  --radius-sm:12px;
  --shadow: 0 14px 60px rgba(0,0,0,.38);
  --shadow-soft: 0 10px 30px rgba(0,0,0,.25);
  --focus: 0 0 0 3px rgba(208,0,0,.35);
}

body{ -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.brand a, h1, h2, h3{ font-family: "Playfair Display", Georgia, Times, serif; }

/* Header + mobile nav */
header.site-header{position:sticky; top:0; z-index:50; background:linear-gradient(to bottom, rgba(18,18,18,.92), rgba(18,18,18,.72)); backdrop-filter: blur(10px); }
.nav-toggle{display:none; align-items:center; gap:10px; border:1px solid var(--border); background:rgba(255,255,255,.03); color:var(--text); padding:10px 12px; border-radius:12px; min-height:44px; font-weight:700; letter-spacing:.04em;}
.nav-toggle:focus{outline:none; box-shadow:var(--focus);}
.nav-toggle .bars{width:18px; height:12px; display:inline-block; position:relative;}
.nav-toggle .bars:before,.nav-toggle .bars:after,.nav-toggle .bars span{content:""; position:absolute; left:0; right:0; height:2px; background:currentColor; border-radius:2px;}
.nav-toggle .bars:before{top:0}
.nav-toggle .bars span{top:5px}
.nav-toggle .bars:after{bottom:0}

.primary{width:100%;}
.primary ul{gap:16px}
.primary a{display:inline-block; padding:10px 8px; border-radius:10px;}
.primary a:focus{outline:none; box-shadow:var(--focus);}

/* Buttons */
.btn{transition:transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;}
.btn:focus{outline:none; box-shadow:var(--focus);}
.btn-primary{box-shadow: 0 10px 25px rgba(208,0,0,.22);}
.btn-primary:hover{transform:translateY(-1px);}
.btn.secondary{border-color: rgba(255,255,255,.32); background: rgba(255,255,255,.02);}
.btn.secondary:hover{border-color: rgba(255,255,255,.55); transform:translateY(-1px);}

/* Sections spacing */
.hero{padding:48px 0 44px}
.section{padding:54px 0}
.section.social{padding:56px 0}
.section:last-of-type{padding-bottom:86px;} /* evita que el footer “se coma” el último bloque */

/* Hero image frame */
.hero .hero-img{box-shadow:var(--shadow-soft);}
.hero .hero-img img{width:100%; height:100%; object-fit:cover;}

/* Cards */
.card{box-shadow: 0 1px 0 rgba(255,255,255,.03); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;}
.card:hover{transform: translateY(-2px); box-shadow: var(--shadow-soft); border-color: rgba(255,255,255,.10);}
.card:focus-within{box-shadow: var(--shadow-soft), var(--focus); border-color: rgba(208,0,0,.35);}

.thumb{position:relative;}
.thumb img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}

/* Social buttons */
.social .links .btn{display:flex; align-items:center; justify-content:center; gap:10px; padding:12px 16px; min-width:132px;}
.social .links .btn svg{width:18px;height:18px; opacity:.95;}

/* Reduce motion friendly */
@media (prefers-reduced-motion: reduce){
  *{scroll-behavior:auto !important;}
  .btn, .card, .thumb img{transition:none !important;}
}

/* Mobile layout */
@media (max-width: 900px){
  header .container{gap:12px;}
  .nav-toggle{display:flex;}
  .primary{max-height:0; overflow:hidden; transition:max-height .25s ease;}
  body.nav-open .primary{max-height:260px;}
  .primary ul{flex-direction:column; gap:6px; padding-top:6px;}
  .primary a{width:100%; text-align:center; background:rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.06);}
  .hero .lead{font-size:15px;}
  .btns{flex-direction:column; align-items:center;}
  .btns .btn{width:min(340px, 100%);}
  .grid{gap:18px;}
  .section{padding:44px 0;}
}