/*
Theme Name: Ajosemedrano Portfolio
Theme URI: https://ajosemedrano.com
Author: José Medrano
Author URI: https://ajosemedrano.com
Description: Multi-page portfolio + blog theme for ajosemedrano.com.
Version: 2.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ajosemedrano
*/

:root{
  --white:#ffffff;
  --paper:#ffffff;
  --ink:#111827;
  --body-text:#374151;
  --ink-soft:#6b7280;
  --line:#e6e4e1;
  --surface:#fafaf9;
  --accent:#e8491f;
  --accent-dark:#c93c17;
  --accent-ink:#ffffff;
  --accent-soft:#fbe7e0;
  --whatsapp:#25D366;
}

*{box-sizing:border-box;}
body{background:var(--white); color:var(--body-text); font-family:var(--font-body); line-height:1.6; margin:0;}
@media (prefers-reduced-motion: reduce){ *{animation-duration:.001ms !important; transition-duration:.001ms !important;} }
img{max-width:100%;}

/* Tipografia del sitio: Lora para el logo y los titulos — recomendada
   especificamente para consultorias y sitios de marca personal de
   consultores (confianza, credibilidad editorial). Helvetica real
   para el cuerpo via el stack de sistema (Helvetica Neue en Mac/iOS,
   Arial en Windows — visualmente casi identica, sin webfont). */
:root{
  --font-display:'Lora', Georgia, 'Times New Roman', serif;
  --font-body:'Helvetica Neue', Helvetica, Arial, sans-serif;
}

h1, h2, h3, h4, h5, h6{
  font-family:var(--font-display);
  font-weight:700;
  color:var(--ink);
  text-wrap:balance;
  margin:0;
}

p, span, li, a{
  font-family:var(--font-body);
  font-weight:400;
  line-height:1.6;
  color:var(--body-text);
}

button, input, textarea, select{
  font-family:var(--font-body);
}

.mono{font-family:'IBM Plex Mono',monospace; font-variant-numeric:tabular-nums;}
.wrap{max-width:1120px; margin:0 auto; padding:0 32px;}

.eyebrow{
  font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent); display:flex; align-items:center; gap:10px;
}
.eyebrow::before{content:""; width:20px; height:1px; background:var(--accent); display:inline-block;}

/* ---- HEADER / NAV ---- */
header.site{position:sticky; top:0; z-index:40; background:color-mix(in srgb, var(--white) 92%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--line);}
.nav{display:flex; align-items:center; gap:40px; padding:18px 0; flex-wrap:nowrap;}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; padding:4px 0; flex:none; min-width:0;}
.brand-mark{width:34px; height:34px; object-fit:cover; border-radius:8px; flex:none; display:block;}
.brand-name{font-family:var(--font-display); font-weight:700; font-size:19px; color:var(--ink); line-height:1.1; white-space:nowrap;}
.nav-links{display:flex; align-items:center; gap:26px; font-size:14.5px; list-style:none; margin:0; padding:0;}
.nav-links a{text-decoration:none; color:var(--ink-soft); transition:color .15s;}
.nav-links a:hover, .nav-links .current-menu-item a{color:var(--ink);}
.nav-right{display:flex; align-items:center; gap:16px; margin-left:auto; flex:none;}
.lang-toggle{display:flex; border:1px solid var(--line); border-radius:999px; overflow:hidden; font-family:'IBM Plex Mono',monospace; font-size:12px;}
.lang-toggle button{border:0; background:transparent; color:var(--ink-soft); padding:6px 12px; cursor:pointer; font:inherit;}
.lang-toggle button.active{background:var(--ink); color:var(--white);}
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}

.btn{display:inline-flex; align-items:center; gap:8px; padding:12px 22px; border-radius:999px; font-size:14.5px; font-weight:600; text-decoration:none; cursor:pointer; border:1px solid transparent; transition:transform .15s, background .15s;}
.btn:hover{transform:translateY(-1px);}
.btn-primary{background:var(--accent); color:var(--accent-ink);}
.btn-primary:hover{background:var(--accent-dark);}
.btn-ghost{border-color:var(--line); background:transparent; color:var(--ink);}
.btn-dark{background:var(--ink); color:var(--white);}
.btn-sm{padding:8px 16px; font-size:13.5px;}

.btn-whatsapp-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; flex:none; transition:transform .15s, opacity .15s;
}
.btn-whatsapp-icon:hover{opacity:.8; transform:translateY(-1px);}
.btn-whatsapp-icon svg{width:34px; height:34px;}

/* ---- HERO (homepage) ---- */
.hero{padding:72px 0 64px;}
.hero-grid{display:grid; grid-template-columns:1.2fr .8fr; gap:48px; align-items:center;}
.hero .eyebrow{margin-bottom:16px;}
.hero h1{font-size:clamp(32px,4.4vw,52px); line-height:1.1; letter-spacing:-.01em;}
.hero p.lead{max-width:48ch; margin-top:20px; font-size:16.5px; color:var(--ink-soft);}
.hero-ctas{display:flex; gap:14px; margin-top:28px; flex-wrap:wrap;}
.avatar{
  aspect-ratio:1; border-radius:24px; background:var(--surface);
  display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden;
  border:1px solid var(--line);
}
.avatar svg{width:62%; height:62%;}

/* ---- QUICK LINKS (homepage) ---- */
.quick-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:16px; overflow:hidden;}
.quick-card{background:var(--white); padding:30px 26px; text-decoration:none; color:var(--ink); display:flex; flex-direction:column; gap:10px; transition:background .15s;}
.quick-card:hover{background:var(--surface);}
.quick-card .n{font-family:'IBM Plex Mono',monospace; color:var(--accent); font-size:13px;}
.quick-card h3{font-size:18px;}
.quick-card p{font-size:13.5px; color:var(--ink-soft); margin:0;}
.quick-card .go{margin-top:auto; font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--accent);}

/* ---- SECTION shell ---- */
section.block{padding:76px 0;}
.section-head{max-width:58ch; margin-bottom:38px;}
.section-head h2{font-size:clamp(24px,3vw,32px); margin-top:12px;}
.section-head p{color:var(--ink-soft); margin-top:12px;}

/* ---- CASE STUDIES (Experience page) ---- */
#casos{padding:20px 0 8px;}
.case-head{padding:40px 0 8px;}
.case-head h2{font-size:clamp(24px,3vw,32px); margin-top:12px;}
.case-head p{color:var(--ink-soft); margin-top:12px; max-width:56ch;}

.case{
  border:1px solid var(--line); background:var(--surface); color:var(--ink);
  border-radius:20px; padding:44px; margin:22px 0; display:grid;
  grid-template-columns:1.15fr .85fr; gap:36px; align-items:center;
}
.case .tag-row{display:flex; align-items:center; gap:12px; flex-wrap:wrap;}
.case .tag{font-family:'IBM Plex Mono',monospace; font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--accent);}
.case .year{font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--ink-soft); border:1px solid var(--line); border-radius:999px; padding:3px 10px; background:var(--white);}
.case h3{font-size:clamp(20px,2.4vw,27px); margin-top:10px; line-height:1.2;}
.case p.body{font-size:15px; margin-top:12px; max-width:50ch; color:var(--ink-soft);}
.case .stats{display:flex; flex-wrap:wrap; gap:22px; margin-top:20px;}
.case .stat b{display:block; font-size:22px; color:var(--accent);}
.case .stat span{display:block; font-size:12px; color:var(--ink-soft); margin-top:2px;}
.case .btn{margin-top:22px;}
.case .btn-whatsapp-icon{margin-top:22px;}
.case-figure{
  aspect-ratio:4/3; border-radius:14px; background:var(--white); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; color:var(--accent);
}
.case-figure svg{width:70%; height:70%;}

/* ---- PROCESS ---- */
.process-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:16px; overflow:hidden;}
.process-card{background:var(--white); padding:26px 22px; min-height:190px; display:flex; flex-direction:column;}
.process-card .n{font-family:'IBM Plex Mono',monospace; color:var(--accent); font-size:13px;}
.process-card h4{font-size:16.5px; margin-top:14px;}
.process-card p{font-size:13.5px; color:var(--ink-soft); margin-top:8px;}

/* ---- SKILLS ---- */
.skills-panel{background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:34px;}
.chips{display:flex; flex-wrap:wrap; gap:10px;}
.chip{
  padding:9px 16px; border-radius:999px; border:1px solid var(--line); background:var(--white);
  font-size:13.5px; font-family:'IBM Plex Mono',monospace; color:var(--ink);
}

/* ---- WAY OF WORK ---- */
.principles-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:20px;}
.principle{border:1px solid var(--line); border-radius:16px; padding:30px; background:var(--surface);}
.principle h3{font-size:19px; margin-bottom:10px;}
.principle p{font-size:14.5px; color:var(--ink-soft); margin:0;}
.principle .mark{width:34px; height:34px; border-radius:9px; background:var(--accent-soft); color:var(--accent); display:flex; align-items:center; justify-content:center; font-family:'IBM Plex Mono',monospace; font-weight:600; margin-bottom:16px;}

/* ---- EXPERIENCE TIMELINE ---- */
.exp-note{font-size:13px; color:var(--ink-soft); margin-bottom:24px; border:1px dashed var(--line); border-radius:10px; padding:12px 16px;}
.exp-row{display:flex; justify-content:space-between; align-items:baseline; gap:20px; padding:20px 0; border-top:1px solid var(--line); flex-wrap:wrap;}
.exp-row:last-child{border-bottom:1px solid var(--line);}
.exp-role{font-size:16.5px; color:var(--ink-soft);}
.exp-role b{color:var(--ink); font-weight:700;}
.exp-meta{display:flex; align-items:baseline; gap:16px;}
.exp-meta .co{text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:4px; font-weight:600;}
.exp-meta .dates{font-family:'IBM Plex Mono',monospace; font-size:12.5px; color:var(--ink-soft); white-space:nowrap;}

/* ---- CONTACT ---- */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start;}
.contact-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:16px;}
.contact-list li{border:1px solid var(--line); border-radius:14px; padding:18px 20px; display:flex; align-items:center; justify-content:space-between; background:var(--surface);}
.contact-list .k{font-family:'IBM Plex Mono',monospace; font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft);}
.contact-list .v{font-weight:600;}
.contact-form{border:1px solid var(--line); border-radius:16px; padding:30px; background:var(--surface);}
.contact-form label{display:block; font-size:13px; font-weight:600; margin-bottom:6px;}
.contact-form input, .contact-form textarea{width:100%; border:1px solid var(--line); border-radius:8px; padding:11px 13px; font-family:var(--font-body); font-size:14.5px; margin-bottom:16px; background:var(--white); color:var(--ink);}
.contact-form textarea{min-height:110px;}

/* ---- CTA BAND ---- */
.cta-band{background:var(--ink); color:var(--white); border-radius:24px; padding:56px 48px; display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap;}
.cta-band h2{font-size:clamp(26px,3.4vw,36px); max-width:16ch; color:var(--white);}
.cta-band .actions{display:flex; gap:14px; flex-wrap:wrap;}
.cta-band .btn-ghost{border-color:color-mix(in srgb, var(--white) 30%, transparent); color:var(--white);}

/* ---- BLOG: post cards ---- */
.blog-head{padding:48px 0 8px;}
.blog-head h1{font-size:clamp(28px,3.6vw,40px); margin-top:12px;}
.blog-head p{color:var(--ink-soft); margin-top:12px; max-width:56ch;}

.cat-filters{display:flex; flex-wrap:wrap; gap:10px; margin:28px 0 40px; padding-bottom:28px; border-bottom:1px solid var(--line);}
.cat-filters a{
  padding:8px 16px; border-radius:999px; border:1px solid var(--line); font-size:13px;
  font-family:'IBM Plex Mono',monospace; text-decoration:none; color:var(--ink-soft);
}
.cat-filters a:hover, .cat-filters a.is-active{background:var(--ink); color:var(--white); border-color:var(--ink);}

.post-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:26px; padding-bottom:60px;}
.post-card{border:1px solid var(--line); border-radius:16px; overflow:hidden; display:flex; flex-direction:column; text-decoration:none; color:var(--ink); background:var(--white); transition:border-color .15s;}
.post-card:hover{border-color:var(--accent);}
.post-card .thumb{aspect-ratio:16/9; background:var(--surface); display:flex; align-items:center; justify-content:center; color:var(--accent);}
.post-card .thumb svg{width:34%; height:34%;}
.post-card .body{padding:22px 22px 26px; display:flex; flex-direction:column; gap:10px; flex:1;}
.post-card .cat{font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--accent);}
.post-card h2, .post-card h3{font-size:19px; line-height:1.3;}
.post-card .excerpt{font-size:14px; color:var(--ink-soft); flex:1;}
.post-card .meta{font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--ink-soft); display:flex; justify-content:space-between; margin-top:6px;}

.pagination{display:flex; gap:10px; justify-content:center; padding-bottom:60px;}
.pagination a, .pagination span{padding:9px 16px; border:1px solid var(--line); border-radius:999px; text-decoration:none; font-family:'IBM Plex Mono',monospace; font-size:13px; color:var(--ink);}
.pagination .current{background:var(--ink); color:var(--white); border-color:var(--ink);}

/* ---- SINGLE POST ---- */
.single-post{max-width:70ch; margin:0 auto; padding:48px 0 80px;}
.single-post .post-cat{margin-bottom:18px;}
.single-post h1{font-size:clamp(28px,4vw,42px); line-height:1.15;}
.single-post .post-meta{font-family:'IBM Plex Mono',monospace; font-size:12.5px; color:var(--ink-soft); margin-top:16px;}
.single-post .post-content{margin-top:36px; font-size:17px; line-height:1.75;}
.single-post .post-content p{margin:0 0 22px;}
.single-post .post-content h2{font-size:26px; margin:40px 0 16px;}
.single-post .post-content h3{font-size:21px; margin:32px 0 14px;}
.single-post .post-content a{color:var(--accent); text-decoration-color:var(--accent-soft);}
.single-post .post-content blockquote{border-left:3px solid var(--accent); margin:28px 0; padding:4px 0 4px 22px; font-family:var(--font-body); font-style:italic; font-size:19px; color:var(--ink-soft);}
.single-post .post-content img{border-radius:12px;}
.single-post .post-content ul, .single-post .post-content ol{padding-left:22px;}
.single-post .post-nav{display:flex; justify-content:space-between; gap:20px; margin-top:56px; padding-top:26px; border-top:1px solid var(--line); font-size:14px;}
.single-post .post-nav a{text-decoration:none; color:var(--ink);}

/* ---- FOOTER ---- */
footer.site{padding:32px 0 60px;}
.foot-row{display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:13px; color:var(--ink-soft); padding-top:26px; border-top:1px solid var(--line);}

@media (max-width:880px){
  .hero-grid{grid-template-columns:1fr;}
  .avatar{max-width:280px; margin:0 auto;}
  .quick-grid{grid-template-columns:1fr;}
  .case{grid-template-columns:1fr; padding:30px;}
  .case-figure{order:-1;}
  .process-grid{grid-template-columns:repeat(2,1fr);}
  .principles-grid{grid-template-columns:1fr;}
  .contact-grid{grid-template-columns:1fr;}
  .post-grid{grid-template-columns:1fr;}
  .nav-links{display:none;}
  .nav{gap:16px; padding:16px 0;}
  .hero{padding:48px 0 36px;}
  .cta-band{padding:36px 24px;}
  section.block{padding:52px 0;}
  .exp-row{flex-direction:column; align-items:flex-start;}
}

@media (max-width:420px){
  .brand-name{font-size:17px;}
}