/* ====== JinYer Balance Website - Global Styles ====== */

/* ====== Variables ====== */
:root{
  --light:#ffffff;
  --dark:#0b0b0d;
  --text-light:#ffffff;
  --text-dark:#1f1f1f;
  --radius:22px;
  --maxw:1200px;
  --pad:clamp(64px,7vw,120px);
  --hover-gray:#6f6f6f;
  --active-gray:#b3b3b3;

  /* Social (desktop defaults) */
  --social-d: 60px;
  --social-gap: 15px;
  --social-ic: 35px;
}

/* ====== Base ====== */
*{margin:0;padding:0;box-sizing:border-box}
img{display:block;max-width:100%;border-radius:var(--radius)}
a{color:inherit}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;line-height:1.6;color:var(--text-dark);background:#fff;overflow-x:hidden}
.container{width:min(calc(100% - 6px),var(--maxw));margin:auto}
.section{padding:48px 0;display:flex;align-items:center;min-height:0;justify-content:center}
.section:first-of-type, main > .section:first-child{margin-top:72px;padding-top:48px}
.section-light{background:#fff;color:var(--text-dark)}
.section-dark{background:#0b0b0d;color:var(--text-light)}

h1{font-size:clamp(2.4rem,5vw,3.8rem);line-height:1.12;margin-bottom:18px}
h2{font-size:clamp(1.9rem,4.2vw,3rem);line-height:1.15;margin-bottom:14px}
h3{font-size:clamp(1.25rem,2.6vw,1.6rem);margin-bottom:10px}
p{font-size:1.12rem;opacity:.9;margin-bottom:14px}

.grid{display:grid;gap:40px;align-items:center}
.grid-2{grid-template-columns:1fr 1fr}
.grid-3{grid-template-columns:repeat(3,1fr);align-items:stretch}
.grid-align-center{align-items:center}
.grid-align-end{align-items:end}

/* ====== NAV ====== */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:1000;
  background:rgba(0,0,0,.88);
  border-bottom:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.nav .container{padding-block:10px}
.nav-content{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px}

.brand{display:flex;align-items:center}
.brand img{height:52px;width:auto;filter:drop-shadow(0 2px 8px rgba(0,0,0,.35))}

.menu-wrap{display:flex;align-items:center;justify-content:center;position:relative}

.nav-menu{list-style:none;display:flex;align-items:center;gap:0}
.nav-menu a{
  color:#fff;text-decoration:none;font-weight:600;padding:6px 12px;position:relative;font-size:.96rem;opacity:.95;
  transition:.2s;border-radius:6px
}
.nav-menu li:not(:last-child) a::after{content:"|";position:absolute;right:-2px;top:0;color:rgba(255,255,255,.45);font-weight:300}
.nav-menu a:hover{opacity:1;background:var(--hover-gray);color:#fff}
.nav-menu a.active{color:var(--active-gray)!important;background:transparent!important;cursor:default;pointer-events:none;opacity:1}

.nav-icon{
  display:inline-flex;align-items:center;justify-content:center;color:#fff;
  text-decoration:none;transition:color .2s,transform .2s;
}
.nav-icon:hover{color:var(--hover-gray);transform:translateY(-2px)}
.nav-icon svg{width:24px;height:24px}

.language-switch{
  display:inline-flex;align-items:center;justify-content:center;background:#fff;color:#0d0d0d;
  padding:6px 12px;border-radius:999px;font-weight:800;text-decoration:none;letter-spacing:.02em;font-size:.88rem;text-transform:uppercase;
  transition:background-color .2s,color .2s, transform .2s; white-space:nowrap;
}
.language-switch:hover{background:var(--hover-gray)!important;color:#fff!important;transform:translateY(-2px)}

/* ====== Hamburger icon ====== */
.hamburger{
  background:transparent;border:0;color:#fff;cursor:pointer;width:56px;height:44px;border-radius:14px;padding:0;
  display:none;align-items:center;justify-content:center;transition:background-color .2s;position:relative;
}
.hamburger .bars{position:relative;width:28px;height:18px}
.hamburger .bars:before,.hamburger .bars:after,.hamburger .mid{
  content:"";position:absolute;left:0;right:0;height:4px;background:rgba(255,255,255,.92);border-radius:4px;
}
.hamburger .bars:before{top:0}
.hamburger .mid{top:7px}
.hamburger .bars:after{bottom:0}
.hamburger:hover{background:rgba(255,255,255,.06)}
.hamburger:hover .bars:before,
.hamburger:hover .bars:after,
.hamburger:hover .mid{background:var(--hover-gray)}
.hamburger.open{background:rgba(255,255,255,.06)}
.hamburger.open .bars:before,
.hamburger.open .bars:after,
.hamburger.open .mid{background:var(--hover-gray)}

/* ====== Buttons ====== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6ch;padding:14px 24px;border:0;border-radius:999px;cursor:pointer;text-decoration:none;
  background:#000;color:#fff;font-weight:800;letter-spacing:.03em;text-transform:uppercase;line-height:1;box-shadow:none;
  transition:transform .2s,background-color .2s,color .2s;
}
.btn:hover{transform:translateY(-2px);background:var(--hover-gray);color:#fff}
.btn-light{background:#fff;color:#0d0d0d}
.btn-light:hover{background:var(--hover-gray)!important;color:#fff!important}

/* ====== Cards ====== */
.card{background:rgba(0,0,0,.04);border:1px solid rgba(0,0,0,.08);border-radius:var(--radius);padding:28px;backdrop-filter:blur(8px);transition:transform .25s,box-shadow .25s;box-shadow:0 8px 28px rgba(0,0,0,.20)}
.card:hover{transform:translateY(-4px);box-shadow:0 14px 36px rgba(0,0,0,.22)}
.section-dark .card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14)}

/* ====== Carousel / VIDEO EMBED WRAP ====== */
.ratio{
  aspect-ratio:16/9;
  width:100%;
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:0 8px 28px rgba(0,0,0,.20);
}
.ratio iframe{width:100%;height:100%;border:0;display:block}

/* ====== Latest Insights header ====== */
.insights-header{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center;margin-bottom:40px}
.insights-hero{width:100%;height:340px;object-fit:cover;border-radius:var(--radius)}
#blog .vcenter{display:flex;flex-direction:column;align-items:flex-start;gap:12px}

/* ====== Blog Cards (Latest Insights posts) ====== */
#blog .card:hover{transform:none;box-shadow:0 8px 28px rgba(0,0,0,.20)}
/* DESKTOP: Todo alineado a la izquierda */
#blog .grid-3 .card{display:flex;flex-direction:column;text-align:left!important}
#blog .grid-3 .card h3{text-align:left!important}
#blog .grid-3 .card p{text-align:left!important}
/* DESKTOP: Botones "Read More" ALINEADOS A LA IZQUIERDA */
#blog .card .btn-blog{margin-top:auto;align-self:flex-start!important}

/* Estilos para las imágenes de los posts */
#blog .grid-3 .card > div:first-child{height:200px;margin-bottom:20px}
#blog .grid-3 .card img{width:100%;height:100%;object-fit:cover;border-radius:var(--radius)}

/* ====== Blog Social Section (Follow Our Journey) ====== */
/* CENTRALIZADO en desktop, tablet y mobile */
#blog .card:last-child{text-align:center}
#blog .card:last-child h3{text-align:center}
#blog .card:last-child p{text-align:center}

/* ====== Service cards ====== */
.service-card{display:flex;flex-direction:column;text-align:center}
.service-card .icon-wrap{
  height:110px;display:flex;align-items:center;justify-content:center;
  margin-bottom:12px;
}
.service-card h3{margin-top:2px;margin-bottom:10px}
.service-card p{margin-bottom:18px}
.service-card .btn{margin-top:auto;align-self:center}

/* ====== Forms ====== */
.form-group{margin-bottom:18px;text-align:left}
.form-group label{display:block;margin-bottom:8px;font-weight:600;text-align:left}
.form-group input{
  width:100%;padding:14px 16px;border-radius:999px;font-size:1rem;outline:none;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(255,255,255,.28);
  color:#111;
}
.form-group input::placeholder{color:#666}
#contact .grid-2 > div:first-child{text-align:left}
#contact .grid-2 > div:first-child h1{text-align:left}
#contact .grid-2 > div:first-child p{text-align:left}

/* ====== Contact Layout ====== */

/* ====== Blog social strip ====== */
#blog .social-strip{
  display:flex;justify-content:center;align-items:center;gap:var(--social-gap);flex-wrap:nowrap;
}
#blog .social-btn{
  display:flex;align-items:center;justify-content:center;
  width:var(--social-d);height:var(--social-d);
  border-radius:50%;
  background:rgba(255,255,255,.10);
  transition:transform .3s,background-color .3s;
  text-decoration:none;
}
#blog .social-btn:hover{background:rgba(255,255,255,.20);transform:translateY(-3px)}
#blog .social-btn img{width:var(--social-ic);height:var(--social-ic);object-fit:contain;border-radius:0}
#blog img.evolution-img{border-radius:0!important}

/* ====== Spacing tweaks ====== */
#portfolio{padding-top:calc(var(--pad) * .55)}
#contact{padding-top:calc(var(--pad) * .55)}

/* ====== Footer ====== */
.footer{background:#111;color:#e7e7e7}
.footer .container{padding-top:48px;padding-bottom:7px}
.footer-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:28px;margin-bottom:26px}
.footer-section h4{font-size:.86rem;letter-spacing:.12em;opacity:.8;margin-bottom:12px}
.footer-section a{display:block;color:#ddd;text-decoration:none;margin-bottom:6px;opacity:.75;transition:.2s}
.footer-section a:hover{opacity:1}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.12);padding-top:18px;opacity:.9;
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap
}
.footer-icons{display:flex;align-items:center;gap:10px;flex-wrap:wrap;order:1}
.icon-box{
  width:40px;height:40px;border-radius:9999px;background:rgba(255,255,255,.10);
  display:flex;align-items:center;justify-content:center;transition:transform .2s, background-color .2s;text-decoration:none
}
.icon-box:hover{transform:translateY(-2px);background:var(--hover-gray)}
.icon-box img{width:24px;height:24px;object-fit:contain;border-radius:0}
.footer-left{display:flex;align-items:center;gap:15px;flex-wrap:wrap;order:2}

/* ====== Tablet (<=1024px) ====== */
@media (max-width:1024px){
  .nav-content{grid-template-columns:auto 1fr auto;gap:8px}
  .brand{justify-self:start}
  .menu-wrap{justify-self:center}
  .nav-content > div:last-child{justify-self:end}
  .nav-icon svg{width:20px;height:20px}
  .language-switch{padding:5px 10px;font-size:.82rem}
  .nav-menu a{font-size:.88rem;padding:6px 10px}
}

/* ====== Mobile (<=780px) ====== */
@media (max-width:780px){
  .brand img{height:40px}
  .brand{justify-self:start}
  .language-switch{justify-self:end}
  .nav-menu{display:none}
  .nav-content{grid-template-columns:1fr auto 1fr;gap:0}
  .menu-wrap{grid-column:2;justify-self:center;justify-content:center}
  .hamburger{display:inline-flex !important}
  .nav-icon svg{width:18px;height:18px}
  .language-switch{padding:5px 9px;font-size:.76rem}
  .language-switch:hover{background:#777!important;color:#fff!important;transform:translateY(-2px)}

  #navMenu{position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%);display:none;flex-direction:column;gap:8px;padding:14px;min-width:220px;border-radius:18px;background:rgba(11,11,13,.94);border:1px solid rgba(255,255,255,.1);box-shadow:0 24px 48px rgba(0,0,0,.45);z-index:1001}
  #navMenu.show{display:flex}
  #navMenu li:not(:last-child) a::after{content:none}
  #navMenu a{display:block;padding:10px 14px;border-radius:12px;text-align:center}
  #navMenu a:hover{background:rgba(255,255,255,.08)}
  #navMenu a.active{color:var(--active-gray);background:transparent}

  .grid-2{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}

  /* Center headings and buttons, left-align paragraphs on mobile */
  .section{text-align:center}
  h1, h2, h3{text-align:center}
  p{text-align:left}
  .btn{margin-left:auto;margin-right:auto;display:inline-flex}
  .card{text-align:center}
  .card p{text-align:left}

  /* Proper stacking order: image → text → button (except service cards which have their own order) */
  .grid > *:not(.service-card){display:flex;flex-direction:column}
  .grid > *:not(.service-card) img{order:1;margin-bottom:20px}
  .grid > *:not(.service-card) h1, .grid > *:not(.service-card) h2, .grid > *:not(.service-card) h3{order:2}
  .grid > *:not(.service-card) p{order:3}
  .grid > *:not(.service-card) .btn{order:4;margin-top:12px}

  /* Service cards already have correct order: icon → text → button */
  .service-card{display:flex;flex-direction:column;text-align:center}
  .service-card .icon-wrap{order:1}
  .service-card h3{order:2}
  .service-card p{order:3}
  .service-card .btn{order:4;margin-top:auto}

  .footer-links{grid-template-columns:1fr}
  .footer-section{text-align:center}
  .footer-section a{margin-bottom:0;padding:12px 0;display:block;text-align:center}
  .footer-section a + a{border-top:1px solid rgba(255,255,255,.12)}
  .footer-bottom{flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:16px}
  .footer-icons{order:1;justify-content:center}
  .footer-left{justify-content:center;text-align:center}

  /* ====== Blog section - Mobile/Tablet ====== */
  .insights-header{grid-template-columns:1fr;gap:18px;align-items:center;margin-bottom:28px;text-align:center}
  .insights-hero{height:clamp(220px,46vw,360px);border-radius:26px}
  #blog .vcenter{align-items:center;text-align:center}
  #blog .vcenter h1{text-align:center}
  #blog .vcenter p{text-align:center!important}
  #blog .vcenter .btn{align-self:center}

  /* MOBILE/TABLET: Todo centralizado en blog cards */
  #blog .grid-3 .card{text-align:center;align-items:center}
  #blog .grid-3 .card h3{text-align:center}
  #blog .grid-3 .card p{text-align:center}
  #blog .card .btn-blog{align-self:center}

  /* MOBILE/TABLET: Social section sigue centralizada (ya lo está por defecto) */
  #blog .card:last-child{text-align:center}

  /* ====== Portfolio section - left aligned on mobile/tablet ====== */
  #portfolio .grid-2 > div:last-child{text-align:left}
  #portfolio .grid-2 > div:last-child h1{text-align:left}
  #portfolio .grid-2 > div:last-child p{text-align:left}
  #portfolio .grid-2 > div:last-child .btn{align-self:flex-start}

  /* ====== About section - left aligned on mobile/tablet ====== */
  #about .grid-2 > div:first-child{order:2;text-align:left}
  #about .grid-2 > div:last-child{order:1}
  #about .grid-2 > div:first-child h1{text-align:left}
  #about .grid-2 > div:first-child p{text-align:left}
  #about .grid-2 > div:first-child .btn{align-self:flex-start}

  /* ====== Contact section - mobile/tablet ====== */
  /* Stay Connected text - SIEMPRE IZQUIERDA */
  #contact .grid-2 > div:first-child{text-align:left!important}
  #contact .grid-2 > div:first-child h1{text-align:left!important}
  #contact .grid-2 > div:first-child p{text-align:left!important}
  #contact .grid-2 > div:first-child > div{justify-content:flex-start;margin-bottom:30px}
  /* Form - solo el botón centrado */
  #contact form{text-align:center}
  #contact form .btn{float:none;display:inline-block}

  /* ====== Blog social: shrink proportionally on tablet ====== */
  #blog{
    --social-d: clamp(40px,7.5vw,54px);
    --social-gap: clamp(8px,1.8vw,14px);
    --social-ic: calc(var(--social-d) * .58);
  }

  /* ====== Spacing adjustments ====== */
  #portfolio{padding-top:calc(var(--pad) * .5)}
  #contact{padding-top:calc(var(--pad) * .5)}
}

/* ====== Small phones (<=520px) ====== */
@media (max-width:520px){
  .container{width:min(calc(100% - 26px),var(--maxw))}
  .footer-links{grid-template-columns:1fr}

  /* Blog social: smaller on small phones */
  #blog{
    --social-d: clamp(28px,8.6vw,42px);
    --social-gap: clamp(6px,1.6vw,10px);
    --social-ic: calc(var(--social-d) * .6);
  }
}