/*
Theme Name:   El Gato Chino Child
Theme URI:    https://elgatochino.com
Description:  Child theme de GeneratePress para El Gato Chino — Javier, contenido sobre China para hispanohablantes.
Author:       Javier
Template:     generatepress
Version:      1.0.0
Text Domain:  el-gato-chino-child
*/

/* =============================================================
   1. FUENTES
   ============================================================= */
@font-face{
  font-family:'Lemon Milk';
  src:url('assets/fonts/LEMONMILK-Bold.otf') format('opentype');
  font-weight:700 900;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Lemon Milk';
  src:url('assets/fonts/LEMONMILK-Medium.otf') format('opentype');
  font-weight:400 600;
  font-style:normal;
  font-display:swap;
}

/* =============================================================
   2. VARIABLES DE MARCA
   ============================================================= */
:root{
  --egc-red:#D70F00;
  --egc-red-dark:#A80B00;
  --egc-ink:#1B1210;
  --egc-ink-soft:#5B5049;
  --egc-paper:#FFFDF9;
  --egc-panel:#F4EFE6;
  --egc-gold:#D9A441;
  --egc-rule:rgba(27,18,16,0.12);
  --egc-display:'Lemon Milk','Arial Narrow',Impact,sans-serif;
  --egc-sans:'Inter',-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
}

body{
  font-family:var(--egc-sans);
  color:var(--egc-ink);
  background:var(--egc-paper);
}
a{ color:var(--egc-red); }
a:hover{ color:var(--egc-red-dark); }

/* =============================================================
   3. HEADER / NAV DE GENERATEPRESS -> barra roja de marca
   ============================================================= */
#site-navigation,
.main-navigation,
.site-header{
  background:var(--egc-red) !important;
}
.site-header .site-branding *{ color:#fff; }
.main-nav ul li a,
.menu-toggle{
  font-family:var(--egc-sans);
  font-weight:600;
  color:#ffe9e5 !important;
}
.main-nav ul li a:hover,
.main-nav ul li.current-menu-item > a{
  color:#fff !important;
}
.main-nav ul ul{ background:var(--egc-red-dark) !important; }

.site-logo img,
.custom-logo{
  max-height:42px;
  width:auto;
}
.site-title, .site-title a,
.main-title, .main-title a{
  font-family:var(--egc-display) !important;
  font-weight:500;
  color:#fff !important;
  letter-spacing:0.02em;
}

/* =============================================================
   4. BOTONES Y TIPOGRAFIA GENERAL
   ============================================================= */
h1,h2,h3,.egc-display{
  font-family:var(--egc-display);
  font-weight:800;
  letter-spacing:0.01em;
  line-height:1.15;
}
.button,
button,
input[type="submit"],
.wp-block-button__link{
  background:var(--egc-red);
  border-color:var(--egc-red);
  color:#fff;
  font-family:var(--egc-sans);
  font-weight:600;
  border-radius:6px;
}
.button:hover,
button:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover{
  background:var(--egc-red-dark);
  border-color:var(--egc-red-dark);
}

/* =============================================================
   5. PAGINA DE INICIO PERSONALIZADA (template-home.php)
   ============================================================= */
.egc-wrap{ max-width:1160px; margin:0 auto; padding:0 28px; }
.egc-section{ padding:60px 0; border-bottom:1px solid var(--egc-rule); }
.egc-section-head{ margin-bottom:34px; max-width:60ch; }
.egc-kicker{ font-family:var(--egc-display); font-weight:400; color:var(--egc-red); font-size:0.95rem; letter-spacing:0.02em; margin:0 0 6px; }

/* Hero */
.egc-hero{ padding:64px 0 56px; border-bottom:1px solid var(--egc-rule); }
.egc-hero-grid{ display:grid; grid-template-columns:1fr 0.85fr; gap:52px; align-items:center; }
@media (max-width:900px){ .egc-hero-grid{ grid-template-columns:1fr; } }
.egc-badge{ display:inline-flex; align-items:center; gap:8px; background:var(--egc-panel); border:1px solid var(--egc-rule); padding:6px 12px; border-radius:20px; font-size:0.82rem; font-weight:600; color:var(--egc-ink-soft); margin-bottom:18px; }
.egc-hero-title{ font-size:clamp(2.3rem,5vw,3.75rem); margin:0 0 22px; }
.egc-hero-title em{ font-style:normal; color:var(--egc-red); }
.egc-hero-bio{ font-size:1.08rem; color:var(--egc-ink-soft); max-width:46ch; margin:0 0 28px; }
.egc-social-row{ display:flex; gap:12px; flex-wrap:wrap; }
.egc-btn{ display:inline-flex; align-items:center; gap:9px; text-decoration:none; padding:11px 18px; border-radius:6px; font-weight:600; font-size:0.9rem; background:var(--egc-ink); color:#fff; }
.egc-btn:hover{ background:var(--egc-red); color:#fff; }
.egc-btn.outline{ background:transparent; border:1.5px solid var(--egc-ink); color:var(--egc-ink); }
.egc-btn.outline:hover{ border-color:var(--egc-red); color:var(--egc-red); }

.egc-photo{ aspect-ratio:3/4; border-radius:10px; overflow:hidden; background:var(--egc-panel); border:1px solid var(--egc-rule); }
.egc-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.egc-photo.placeholder{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; text-align:center; padding:24px; color:var(--egc-ink-soft); border-style:dashed; border-width:2px; }
.egc-photo.placeholder svg{ width:34px; height:34px; color:var(--egc-red); }

.egc-fact-strip{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--egc-rule); border:1px solid var(--egc-rule); border-radius:8px; overflow:hidden; margin-top:44px; }
@media (max-width:700px){ .egc-fact-strip{ grid-template-columns:repeat(2,1fr); } }
.egc-fact-chip{ background:var(--egc-panel); padding:16px 18px; display:flex; flex-direction:column; gap:5px; }
.egc-fact-chip span{ font-size:0.76rem; color:var(--egc-ink-soft); }
.egc-fact-chip b{ font-family:var(--egc-sans); font-weight:700; font-size:0.92rem; }

/* Sobre mi */
.egc-about-grid{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start; }
@media (max-width:820px){ .egc-about-grid{ grid-template-columns:1fr; } }
.egc-about-grid p{ font-size:1.02rem; color:var(--egc-ink-soft); margin:0 0 16px; }
.egc-quote{ font-family:var(--egc-display); font-weight:800; font-size:1.5rem; color:var(--egc-ink); border-left:5px solid var(--egc-red); padding:4px 0 4px 20px; margin:0 0 20px; line-height:1.25; }

/* Contenido destacado */
.egc-content-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
@media (max-width:820px){ .egc-content-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .egc-content-grid{ grid-template-columns:1fr; } }
.egc-content-card{ background:var(--egc-panel); border-radius:8px; overflow:hidden; }
.egc-content-thumb{ aspect-ratio:4/5; background:linear-gradient(150deg,var(--egc-ink),#3A2B27); display:flex; align-items:center; justify-content:center; position:relative; }
.egc-content-thumb svg{ width:44px; height:44px; color:var(--egc-red); }
.egc-platform-chip{ position:absolute; top:10px; left:10px; background:rgba(255,255,255,0.92); color:var(--egc-ink); font-size:0.7rem; font-weight:700; padding:3px 8px; border-radius:4px; }
.egc-content-card .egc-cc-text{ padding:14px 16px 18px; }
.egc-content-card h4{ margin:0 0 4px; font-size:0.96rem; font-family:var(--egc-sans); font-weight:700; line-height:1.3; }
.egc-content-card p{ margin:0; font-size:0.82rem; color:var(--egc-ink-soft); }

/* Redes */
.egc-platform-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
@media (max-width:900px){ .egc-platform-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .egc-platform-grid{ grid-template-columns:1fr; } }
.egc-platform-card{ border:1.5px solid var(--egc-rule); border-radius:10px; padding:24px 20px; }
.egc-platform-icon{ width:38px; height:38px; border-radius:8px; background:var(--egc-ink); display:flex; align-items:center; justify-content:center; margin-bottom:14px; }
.egc-platform-icon svg{ width:19px; height:19px; color:#fff; }
.egc-platform-card h4{ margin:0 0 4px; font-family:var(--egc-display); font-weight:800; font-size:1.1rem; }
.egc-platform-card p{ margin:0 0 14px; font-size:0.85rem; color:var(--egc-ink-soft); }
.egc-platform-card a{ font-size:0.85rem; font-weight:700; color:var(--egc-red); text-decoration:none; border-bottom:1.5px solid var(--egc-red); }

/* Blog preview */
.egc-blog-row{ display:grid; grid-template-columns:80px 1fr auto; gap:22px; align-items:center; padding:20px 0; border-bottom:1px solid var(--egc-rule); }
@media (max-width:640px){ .egc-blog-row{ grid-template-columns:1fr; } .egc-blog-meta{ display:none; } }
.egc-blog-num{ font-family:var(--egc-display); font-size:1.8rem; -webkit-text-stroke:1.5px var(--egc-ink); color:transparent; }
.egc-blog-row h4{ margin:0 0 4px; font-size:1.05rem; font-weight:700; font-family:var(--egc-sans); }
.egc-blog-row p{ margin:0; font-size:0.86rem; color:var(--egc-ink-soft); }
.egc-blog-meta{ font-size:0.8rem; color:var(--egc-ink-soft); white-space:nowrap; }

/* Contacto */
.egc-contact-grid{ display:grid; grid-template-columns:1.4fr 1fr; gap:48px; align-items:start; }
@media (max-width:820px){ .egc-contact-grid{ grid-template-columns:1fr; } }
.egc-contact-alt{ background:var(--egc-panel); border-radius:10px; padding:26px 24px; }
.egc-contact-alt h4{ margin:0 0 14px; font-size:0.95rem; font-weight:700; }
.egc-contact-alt-link{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--egc-ink); font-weight:700; font-size:0.95rem; margin-bottom:14px; }
.egc-contact-alt-link svg{ width:18px; height:18px; color:var(--egc-red); flex:none; }
.egc-contact-alt p{ margin:0; font-size:0.85rem; color:var(--egc-ink-soft); line-height:1.5; }

/* Reskin generico para Contact Form 7 / WPForms, para que combine con la marca */
.wpcf7-form input[type=text],
.wpcf7-form input[type=email],
.wpcf7-form textarea,
.wpforms-form input[type=text],
.wpforms-form input[type=email],
.wpforms-form textarea{
  font-family:var(--egc-sans);
  border:1.5px solid var(--egc-rule) !important;
  border-radius:6px !important;
  padding:11px 13px !important;
}
.wpcf7-form input:focus,
.wpcf7-form textarea:focus,
.wpforms-form input:focus,
.wpforms-form textarea:focus{
  border-color:var(--egc-red) !important;
  outline:none;
}
.wpcf7-submit,
.wpforms-submit{
  background:var(--egc-red) !important;
  border:none !important;
  color:#fff !important;
  font-weight:700 !important;
  border-radius:6px !important;
  padding:13px 26px !important;
}