/* YH_WEB — Yolanda Herranz */

/* === Fonts === */
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap');

/* === Reset === */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:'EB Garamond',Georgia,serif;font-weight:400;color:#1a1a1a;background:#fff;line-height:1.6;min-height:100vh;display:flex;flex-direction:column}
a{color:inherit;text-decoration:none}
b,strong{font-weight:700}

/* === Header === */
.site-header{background:#fff;padding:30px 40px 10px;border-bottom:1px solid #e0e0e0}
.header-inner{max-width:1100px;margin:0 auto;display:flex;align-items:flex-end;justify-content:space-between}
.header-logos{display:flex;align-items:flex-end;gap:12px}
.header-portrait{height:114px;width:auto;border-radius:0}
.header-name{height:70px;width:auto}

/* === Nav === */
.main-nav{display:flex;gap:28px;align-items:flex-end;padding-bottom:6px}
.main-nav a{font-size:1rem;color:#333;transition:color .2s;position:relative}
.main-nav a::after{content:'';position:absolute;bottom:-3px;left:0;width:0;height:1px;background:#ad1d23;transition:width .3s ease}
.main-nav a:hover::after{width:100%}
.main-nav a:hover,.main-nav a.active{color:#ad1d23}

/* === Language Toggle === */
.lang-toggle-wrap{display:flex;align-items:center}
.lang-toggle-mobile{display:none}
.toggle-track{display:flex;align-items:center;gap:6px;background:#ad1d23;border-radius:20px;padding:3px;cursor:pointer;position:relative;width:56px;height:26px}
.toggle-thumb{position:absolute;width:20px;height:20px;background:#fff;border-radius:50%;transition:left .3s ease;left:3px;pointer-events:none}
.toggle-input{display:none}
.toggle-input:checked~.toggle-thumb{left:33px}
.flag-left,.flag-right{font-size:.65rem;font-weight:600;color:#fff;z-index:1;width:22px;text-align:center;user-select:none;pointer-events:none}

/* === Footer === */
.site-footer{text-align:center;padding:40px;border-top:1px solid #e0e0e0;font-size:.85rem;color:#999;margin-top:auto}

/* === Main === */
main{flex:1}

/* === Header nav group === */
.header-nav-group{display:flex;align-items:center;gap:30px}

/* === Home === */
.home-content{flex:1}
.video-wrap{max-width:900px;margin:40px auto 30px;padding:0 20px}
.video-wrap iframe{width:100%;aspect-ratio:16/9;border:none}
.home-title{text-align:center;font-size:1.8rem;color:#ad1d23;margin-bottom:30px;font-weight:600}
.home-bio{max-width:900px;margin:0 auto 60px;padding:0 20px;line-height:1.35;color:#444;text-align:center}
.home-bio p{margin-bottom:2em}

/* === Contacto === */
.contact-slider{width:100%;max-width:1100px;height:700px;margin:60px auto 0;position:relative;overflow:hidden;background:#f5f5f5}
.contact-slider img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s ease}
.contact-slider img.active{opacity:1}
.contact-section{width:100%;max-width:600px;margin:40px auto;padding:0 20px}
.contact-text{text-align:center;font-size:1.1rem;color:#ad1d23;margin-bottom:30px;font-weight:500}
.contact-form{display:flex;flex-direction:column;gap:16px}
.contact-form input,.contact-form textarea{width:100%;padding:14px 16px;border:1px solid #ddd;border-radius:6px;font-family:inherit;font-size:.95rem;transition:border-color .2s}
.contact-form input:focus,.contact-form textarea:focus{outline:none;border-color:#ad1d23}
.contact-form textarea{resize:vertical;min-height:140px}
.contact-form button{background:#ad1d23;color:#fff;border:none;padding:14px 32px;border-radius:6px;cursor:pointer;font-family:inherit;font-size:.95rem;transition:opacity .2s;align-self:flex-start}
.contact-form button:hover{opacity:.9}

/* Anti-spam honeypot — oculto para humanos */
.hp-field{position:absolute;left:-9999px;opacity:0;height:0;width:0;overflow:hidden}

/* Feedback message */
.form-feedback{text-align:center;padding:12px 16px;border-radius:6px;margin-bottom:20px;font-size:.95rem}
.form-feedback.success{background:#e8f5e9;color:#2e7d32;border:1px solid #a5d6a7}
.form-feedback.error{background:#ffebee;color:#c62828;border:1px solid #ef9a9a}

/* === Currículum === */
.cv-content{max-width:950px;margin:40px auto;padding:0 20px}
.cv-content h2{text-align:center;font-weight:700;color:#ad1d23;font-size:1.1rem;margin:30px 0 12px}
.cv-content p{font-size:1rem;line-height:1.4;margin-bottom:18px}
.cv-content .m{font-weight:700}
.cv-content .mi{font-weight:600;font-style:italic}
.cv-content a{color:#ad1d23}
.cv-content a:hover{color:#8B1520}
.accordion{margin-top:30px}
.acc-header{cursor:pointer;font-size:1rem;font-weight:600;color:#ad1d23;padding:10px 0;border-top:1px solid #e0e0e0;display:flex;justify-content:space-between;align-items:center}
.acc-header::after{content:" +";font-size:1.2rem}
.acc-header.open::after{content:" −"}
.acc-body{display:none;padding:8px 0 20px;overflow-wrap:break-word;word-break:break-word}
.acc-body.open{display:block}
.acc-body a{overflow-wrap:break-word;word-break:break-word}

h1{text-align:center;color:#ad1d23;font-size:1.8rem;font-weight:600}

/* === Obra grid (mobile-first: 2 cols → 4 cols en escritorio) === */
.obra-page{max-width:1100px;margin:50px auto;padding:0 20px}
.obra-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.obra-card{display:block;text-align:center}
.obra-card img{width:100%;height:auto;display:block;border-radius:6px;box-shadow:rgba(0,0,0,0.12)0 3px 12px;transition:box-shadow .3s,transform .3s}
.obra-card:hover img{box-shadow:rgba(0,0,0,0.18)0 6px 20px;transform:translateY(-2px)}
.obra-card .obra-title{font-size:.85rem;color:#ad1d23;margin-top:8px;line-height:1.3;font-weight:600}
.obra-card .obra-year{font-size:.8rem;color:#999;margin-top:2px}

/* === Publicaciones grid === */
.pub-page{max-width:1100px;margin:50px auto;padding:0 20px}
.pub-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px 20px}
.pub-card{display:block;text-align:center}
.pub-card img{width:100%;height:auto;display:block;border-radius:6px;box-shadow:0 3px 12px rgba(0,0,0,.12);transition:box-shadow .3s,transform .3s;aspect-ratio:3/4;object-fit:contain;background:#f5f5f5}
.pub-card:hover img{box-shadow:0 6px 20px rgba(0,0,0,.18);transform:translateY(-2px)}
.pub-title{font-size:.95rem;color:#ad1d23;margin-top:10px;line-height:1.3;font-weight:600}
.pub-subtitle{font-size:.85rem;color:#ad1d23;margin-top:4px;line-height:1.3}
.pub-year{font-size:.8rem;color:#999;margin-top:4px}

/* === Compra === */
.compra-page{max-width:700px;margin:80px auto;padding:0 20px;text-align:center;font-size:1.1rem;line-height:1.8;color:#333}
.compra-page h1{margin-top:50px}

/* === Compra grid === */
.compra-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:30px 20px;max-width:800px;margin:40px auto}
.compra-card{display:block;text-align:center}
.compra-card img{width:100%;height:auto;display:block;border-radius:6px;box-shadow:0 3px 12px rgba(0,0,0,.12);transition:box-shadow .3s,transform .3s;aspect-ratio:3/4;object-fit:contain;background:#f5f5f5}
.compra-card:hover img{box-shadow:0 6px 20px rgba(0,0,0,.18);transform:translateY(-2px)}
.compra-title{font-size:.95rem;color:#ad1d23;margin-top:10px;line-height:1.3;font-weight:600}
.compra-page a{color:#ad1d23}
.compra-page a:hover{color:#8B1520}

/* === Obra detail (galería solo imágenes) — mobile-first === */
.obra-detail{max-width:1100px;margin:0 auto;padding:20px}
.obra-detail-header{display:flex;align-items:baseline;gap:20px;margin-bottom:24px;flex-wrap:wrap;gap:10px}
.obra-detail-header h1{font-size:1.1rem;color:#ad1d23;font-weight:600}
.obra-back{font-size:.9rem;color:#ad1d23;white-space:nowrap}
.obra-gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.obra-gallery img{width:100%;height:auto;display:block;border-radius:4px;cursor:pointer;transition:opacity .2s}
.obra-gallery img:hover{opacity:.85}

/* === Lightbox === */
.lightbox-overlay{display:none;position:fixed;z-index:9999;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.92);cursor:pointer;justify-content:center;align-items:center}
.lightbox-overlay.open{display:flex}
.lightbox-overlay img{max-width:92vw;max-height:92vh;object-fit:contain;border-radius:4px;box-shadow:0 8px 40px rgba(0,0,0,.5)}
.lightbox-close{position:fixed;top:20px;right:30px;font-size:2.5rem;color:#fff;cursor:pointer;z-index:10000;line-height:1;opacity:.7;transition:opacity .2s;font-weight:300}
.lightbox-close:hover{opacity:1}
.lightbox-nav{position:fixed;top:50%;transform:translateY(-50%);font-size:3rem;color:#fff;cursor:pointer;z-index:10000;padding:20px;opacity:.6;transition:opacity .2s;user-select:none}
.lightbox-nav:hover{opacity:1}
.lightbox-prev{left:10px}
.lightbox-next{right:10px}

@media(min-width:769px){
.obra-detail-header h1{font-size:1.4rem}
.obra-gallery{grid-template-columns:repeat(4,1fr);gap:16px}
.obra-detail-header{flex-wrap:nowrap;gap:20px}

.obra-grid{grid-template-columns:repeat(4,1fr);gap:30px 20px}
.obra-card .obra-title{font-size:.95rem}
.obra-card .obra-year{font-size:.8rem}
}

@media(max-width:768px){
.site-header{padding:15px 20px 8px}
.header-inner{flex-wrap:wrap;align-items:center;gap:8px}
.header-portrait{height:60px}
.header-name{height:40px}
.header-nav-group{order:3;width:100%;gap:12px;justify-content:center;padding-top:8px;border-top:1px solid #eee;margin-top:4px}
.main-nav{gap:12px;flex-wrap:wrap;justify-content:center}
.main-nav a{font-size:.9rem}
.lang-toggle-wrap{display:none}
.lang-toggle-mobile{display:flex}
.contact-slider{height:350px}
.contact-form button{width:100%}
.cv-content{padding:0 16px}
.cv-content p{font-size:.95rem}
.pub-grid{grid-template-columns:repeat(2,1fr);gap:20px}
}

.cv-content .year{font-weight:700;color:#ad1d23}
.intro{text-align:center;font-style:italic}
.intro p{margin-bottom:1em}