:root{
  --beige-light:#e7ddc7;
  --navy:#0e1a26;
  --ink:#0b1520;
  --beige:#d9d2c1;
  --beige-2:#cfc7b4;
  --muted:#9aa3ad;
  --white:#ffffff;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--navy);color:var(--beige);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;line-height:1.6}
h1,h2,h3,h4{font-family:"EB Garamond",Georgia,serif;color:var(--beige);line-height:1.2;margin:0 0 .5rem 0}
h1{font-size:clamp(2rem,4vw,3rem)}
h2{font-size:clamp(1.5rem,3vw,2rem)}
h3{font-size:clamp(1.2rem,2.5vw,1.4rem)}
p{margin:.5rem 0 1rem}
a{color:var(--beige-2);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1100px;margin:0 auto;padding:0 20px}
.page{padding-top:88px;min-height:60vh}
.site-header{position:sticky;top:0;backdrop-background:rgba(11,21,32,.75);border-bottom:1px solid rgba(255,255,255,.06);z-index:100}
.nav{display:flex;align-items:center;justify-content:space-between;height:80px;gap:16px}
.brand{display:flex;align-items:center;gap:12px;font-weight:600}
.brand-logo{width:36px;height:36px;object-fit:contain}
.brand-logo.small{width:28px;height:28px}
#menu{display:flex;gap:20px;align-items:center}
#hamburger{display:none;background:transparent;border:1px solid rgba(255,255,255,.15);padding:8px 10px;border-radius:10px;color:var(--beige)}

/* --- Dropdown navigation (Servicios / Blog) --- */
.nav-dropdown{
  position:relative;
  display:flex;
  align-items:center;
}

.nav-link{
  font-family:"Inter",-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  font-weight:600;
  letter-spacing:.02em;
  padding:.4rem .6rem;
  border-radius:.5rem;
  position:relative;
  border:none;
  background:transparent;
  color:var(--beige);
  cursor:pointer;
}

.nav-dropdown > .nav-link::before{
  content:"▾";
  display:inline-block;
  margin-left:.35rem;
  font-size:.85em;
  transform:translateY(1px);
  opacity:.75;
  transform-origin:center;
  transition:transform .16s ease,opacity .16s ease;
}

.nav-dropdown.is-open > .nav-link::before,
.nav-dropdown:hover > .nav-link::before{
  transform:rotate(180deg);
  opacity:1;
}

.nav-dropdown-menu{
  position:absolute;
  top:100%;
  left:0;
  min-width:220px;
  padding:8px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(11,21,32,.98);
  box-shadow:0 18px 40px rgba(0,0,0,.45);
  opacity:0;
  transform:none;
  pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
  z-index:120;
  display:none;
}

.nav-dropdown-menu a{
  display:block;
  padding:10px 14px;
  border-radius:999px;
  white-space:nowrap;
  font-size:.84rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  border:1px solid transparent;
  color:var(--beige-2);
  background:transparent;
  transition:background .18s ease, border-color .18s ease, color .18s ease;
}

.nav-dropdown-menu a:hover{
  background:rgba(231,221,199,.06);
  border-color:rgba(231,221,199,.25);
  color:var(--beige-light);
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu,
.nav-dropdown.is-open .nav-dropdown-menu{
  opacity:1;
  transform:none;
  pointer-events:auto;
  display:block;
}

/* Mobile behaviour: dropdowns dentro del panel */
@media (max-width: 900px){
  #menu{
    width:100% !important;
    left:0 !important;
    right:0 !important;
    transform:none !important;
  }
  #menu > a,
  #menu > .nav-dropdown{
    width:100%;
  }
  #menu > a,
  #menu .nav-dropdown > .nav-link{
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
  }

  .nav-dropdown{
    width:100%;
    flex-direction:column;
    align-items:stretch;
  }
  .nav-dropdown-menu{
    position:static;
    width:100%;
    margin-top:4px;
    min-width:0;
    box-shadow:none;
    border-radius:10px;
    border:1px solid rgba(255,255,255,.10);
    padding:0;
    max-height:0;
    overflow:hidden;
    opacity:0;
    pointer-events:none;
    display:none;
  }
  .nav-dropdown.is-open .nav-dropdown-menu{
    opacity:1;
    max-height:400px;
    padding:6px 4px 6px;
    pointer-events:auto;
    display:block;
  }
  .nav-dropdown-menu a{
    width:100%;
    padding:8px 10px;
    margin-bottom:4px;
  }
}
);border-color:transparent}
.btn-ghost{background:transparent;border-color:rgba(255,255,255,.1)}
.hero{padding:4vh 0 3vh;}
.hero-logo{width:min(220px,40vw);height:auto;opacity:.95;font-size:clamp(2.6rem,6vw,4.4rem);margin:.8rem 0 .2rem;text-align:center;line-height:1.05}
.hero-title-split{margin:1.4rem 0 .6rem;line-height:1.05 text-align:center;}
.hero-title-split .hero-main{display:block;font-family:"Cormorant Garamond",serif;font-size:clamp(3.6rem,7vw,5.4rem);letter-spacing:.08rem;font-weight:600}
.hero-title-split .hero-subline{display:block;margin-top:.3rem;font-family:"Cormorant Garamond",serif;font-size:1.6rem;letter-spacing:.32rem;text-transform:uppercase;text-align:center}

.hero-sub{color:var(--beige-2);margin:.6rem 0 1.4rem;font-size:1.05rem;text-align:center}
.grid.features{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:3rem auto}
.card{background:var(--beige-light);}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin:2rem 0}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.text{padding:3rem 0}
.nice{padding-left:1.2rem}
.nice li{margin:.4rem 0}
.cta-strip{margin:2rem 0;text-align:center}
.form label{display:block;margin:.7rem 0 .2rem}
input,textarea{width:100%;padding:12px 14px;border-radius:14px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.03);color:var(--beige)}
input::placeholder,textarea::placeholder{color:var(--muted)}
.hidden{display:none}
.site-footer{
  border-top:1px solid rgba(255,255,255,.09);
  margin-top:4rem;
  padding:2.5rem 0 2.25rem;
  background:radial-gradient(circle at top left, rgba(248,240,228,.04), transparent 55%),
             radial-gradient(circle at top right, rgba(148,163,184,.08), transparent 60%),
             rgba(11,21,32,.96);
  backdrop-filter:blur(10px);
}

.footer-grid{
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr;
  gap:24px;
  align-items:flex-start;
}

.foot-brand{
  display:flex;
  gap:12px;
  align-items:flex-start;
}

.foot-brand strong{
  font-size:1.05rem;
  letter-spacing:.06em;
}

.foot-heading{
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size:.75rem;
  margin-bottom:.9rem;
  color:rgba(243,244,246,.9);
}

.foot-link{
  display:block;
  margin-bottom:.4rem;
  font-size:.9rem;
  color:rgba(209,213,219,.9);
}

.foot-link:hover{
  color:var(--beige);
}

.foot-meta{
  margin-top:1.75rem;
  padding-top:1.25rem;
  border-top:1px solid rgba(148,163,184,.35);
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
  justify-content:space-between;
  font-size:.8rem;
  color:rgba(148,163,184,.9);
}

/* Footer responsive */
@media (max-width: 768px){
  .footer-grid{
    grid-template-columns:1fr;
    gap:20px;
  }
  .foot-meta{
    flex-direction:column;
    align-items:flex-start;
  }
}



.foot-tagline{
  margin-top:.65rem;
  font-size:.9rem;
  color:rgba(209,213,219,.9);
  max-width:22rem;
}

.muted{color:var(--muted)}
.tiny{font-size:.85rem}
.centered{display:flex;flex-direction:column;align-items:center;justify-content:center}
.cookie-banner{position:fixed;bottom:16px;left:16px;right:16px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:14px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px;backdrop-display:none}
.cookie-banner a{color:var(--beige)}
@media (max-width:900px){
  .grid.features{grid-template-columns:1fr}
  .two-col{grid-template-columns:1fr}
  #menu{display:none;position:absolute;top:80px;left:0;right:0;background:rgba(11,21,32,.98);padding:12px;border-radius:12px;border:1px solid rgba(255,255,255,.08);flex-direction:column;min-width:220px}
  #hamburger{display:inline-block}
  .footer-grid{grid-template-columns:1fr 1fr}
}

.prose{font-size:1.05rem}
.prose .box{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);padding:14px;border-radius:14px;margin:1rem 0}
.prose .tips{background:rgba(217,210,193,.08);border-left:3px solid var(--beige);padding:12px;border-radius:10px;margin:1rem 0}
blockquote{margin:1rem 0;padding:12px 16px;border-left:3px solid rgba(255,255,255,.25);background:rgba(255,255,255,.04);border-radius:8px}
.article-head{margin:2rem 0 1rem}
.post-card h3{margin-top:0}

/* Tweaks for portada-only logo and monogram hero */
.hero img.hero-logo{height:auto}
@media (max-width:600px){
  .hero a .hero-logo{max-width:220px}
}

/* Accessibility */
.skip-link{position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:10px;top:10px;width:auto;height:auto;padding:8px 12px;background:var(--beige);color:var(--ink);border-radius:10px}
:focus-visible{outline:2px dashed var(--beige);outline-offset:3px}

/* Interactions */
.btn{transition:transform .18s ease, box-shadow .18s ease}
.btn:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(0,0,0,.25)}
.card{background:var(--beige-light);}
.card:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(0,0,0,.28)}
#menu a.active, #menu button.nav-link.active{font-weight:700;text-decoration:underline}

/* Back to top */
#backToTop{position:fixed;right:18px;bottom:18px;border-radius:50%;width:44px;height:44px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);color:var(--beige);font-size:20px;opacity:0;pointer-events:none;transition:opacity .2s ease, transform .2s ease}
#backToTop:hover{transform:translateY(-2px)}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important}
}

/* --- Mobile polish (header + layout) --- */
.nav-cta .tel{white-space:nowrap; letter-spacing:.3px; font-variant-numeric:tabular-nums}
@media (max-width:900px){
  .nav-cta .tel{display:none} /* hide raw phone on small screens to avoid wrapping */
  .container{padding:0 16px}
}
@media (max-width:600px){
  h1{font-size:1.9rem}
  h2{font-size:1.4rem}
  .page{padding-top:78px}
}
/* Lists and text alignment */
.text ul, .text ol, .nice{padding-left:1.1rem;margin-left:.2rem}
.text li{margin:.35rem 0}
.text h1{margin-bottom:.6rem}
.text h2{margin-top:1.2rem;margin-bottom:.4rem}
/* Improve cards spacing on mobile */
@media (max-width:900px){
  .cards{gap:14px}
  .card{background:var(--beige-light);}
}

/* Bigger logo for portada */
.logo-only{min-height:82vh}
.logo-hero-big{width:100%; max-width: clamp(380px, 56vw, 980px); height:auto;}
@media (max-width:768px){
  .logo-hero-big{max-width: clamp(260px, 78vw, 680px);}
}

/* Portada logo grande */
.hero.logo-only a img.hero-logo {
  width: min(80%, 600px);
  min-width: 50vw;
  height: auto;
}
@media (max-width: 600px) {
  .hero.logo-only a img.hero-logo {
    width: 80vw;
    min-width: 70vw;
  }
}

/* Portada centrada sin scroll */
.hero.logo-only {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
body.index-page {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

/* === Landing (portada) full centering & no scroll === */
body.landing {
  overflow: hidden;
}
main.page.logo-landing {
  padding-top: 0;
  height: calc(100vh - 80px); /* header height */
  display: grid;
  place-items: center;
}
.hero.logo-only {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
  background: radial-gradient(1200px 400px at 50% -20%, rgba(255,255,255,.06), transparent);
}
.hero.logo-only a {
  display: inline-block;
}
.hero.logo-only a img.hero-logo {
  display: block;
  width: min(60vw, 1100px);
  min-width: 50vw;
  height: auto;
  max-height: 76vh;
  object-fit: contain;
  margin: 0 auto;
}
@media (max-width: 900px){
  main.page.logo-landing{ height: calc(100vh - 80px); }
  .hero.logo-only a img.hero-logo {
    width: min(82vw, 680px);
    min-width: 70vw;
    max-height: 70vh;
  }
}

/* iOS-safe mobile nav overlay */
html.nav-open, body.nav-open { /* overflow desbloqueado para que los anchors funcionen */ }
.hamburger{background:transparent;border:1px solid rgba(255,255,255,.18);border-radius:10px;padding:8px 10px;color:var(--beige)}
@media (max-width:900px){
  .site-header{position:fixed;top:0;left:0;right:0;z-index:120;}
  body{padding-top:80px;}

  #menu{
    position:fixed;
    top:80px; right:16px; left:16px;
    background:rgba(11,21,32,.98);
    border:1px solid rgba(255,255,255,.08);
    border-radius:14px;
    padding:12px;
    display:block;
    opacity:0; visibility:hidden;
    transform:translateY(-8px);
    transition:opacity .2s ease, transform .2s ease, visibility .2s;
    -webkit-overflow-scrolling: touch;
  }
  html.nav-open #menu{
    opacity:1; visibility:visible; transform:none;
  }
  #menu a, #menu button.nav-link{display:block;padding:10px 12px;margin-bottom:6px;border-radius:6px;border:1px solid rgba(255,255,255,0.10);font-size:0.9rem;letter-spacing:0.10em;}
  .nav-cta .tel{display:none}
}

/* ===== About hero parallax ===== */
.hero-image{position:relative;width:100%;height:56vh;min-height:420px;background-size:cover;background-position:center;display:grid;place-items:center;}
.about-hero{background-image:url('../assets/about-hero.jpg');background-attachment:fixed;}
.hero-overlay{background:linear-gradient(180deg, rgba(11,21,32,.25), rgba(11,21,32,.55));width:100%;height:100%;display:grid;place-items:center;}
.hero-overlay h1{font-size:clamp(2rem,5vw,3rem);margin:0;text-shadow:0 8px 24px rgba(0,0,0,.35);}
@supports (-webkit-overflow-scrolling: touch){
  .about-hero{background-attachment:scroll;}
}
@media (max-width:900px){.hero-image{height:44vh;min-height:320px;}}

/* ===== Footer premium layout ===== */
.site-footer{border-top:1px solid rgba(255,255,255,.08);padding:2.8rem 0;background:rgba(11,21,32,.94)}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:26px;align-items:start}
.footer-grid h4{font-family:"EB Garamond", serif;margin:0 0 .6rem;font-size:1.05rem;color:var(--beige)}
.footer-grid a{display:inline-block;margin:.25rem 0}
.footer-grid a:hover{opacity:.9;transform:translateX(1px)}
.foot-brand strong{font-weight:700}
.foot-brand small{display:block;color:var(--muted)}
.footer-divider{height:1px;background:rgba(255,255,255,.08);margin:1.2rem 0}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:.9rem;margin-top:1rem}
@media (max-width:900px){
  .footer-grid{grid-template-columns:1fr 1fr;gap:18px}
  .footer-bottom{flex-direction:column;gap:.5rem;text-align:center}
}


/* ===== Cookie banner: compact pill bottom-right ===== */
.cookie-banner{
  position:fixed;bottom:16px;right:16px;left:auto;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  padding:10px 12px;
  display:none;align-items:center;gap:12px;
  backdrop-
  max-width:420px;
  z-index:300;
}
.cookie-banner p{margin:0}
.cookie-banner .cookie-actions{display:flex;gap:8px;margin-left:auto}
@media (max-width:600px){
  .cookie-banner{left:16px;right:16px;max-width:none}
}


/* Phone icon in header */
.phone-icon{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:10px;border:1px solid rgba(255,255,255,.18);color:var(--beige);transition:transform .18s ease, box-shadow .18s ease, background .18s ease}
.phone-icon svg{display:block}
@media (hover:hover){
  .phone-icon:hover{
    background:rgba(255,255,255,.06);
    box-shadow:0 0 0 3px rgba(217,210,193,.12), 0 8px 18px rgba(0,0,0,.25);
    transform:translateY(-1px);
  }
}
@media (prefers-reduced-motion: reduce){
  .phone-icon{transition:none}
}


/* ===== Abstract hero (video-like, CSS only) ===== */
.hero-abstract{
  position:relative;
  overflow:hidden;
  min-height:70vh;
  display:grid;
  place-items:center;
  text-align:center;
}
.hero-abstract .inner{
  position:relative;
  z-index:2;
  padding: clamp(16px, 4vw, 32px);
}
.hero-abstract h1{font-size:clamp(2rem,6vw,3.2rem); margin:0 0 .6rem}
.hero-abstract p{color:var(--beige-2); margin:0 0 1.2rem}
.hero-abstract .actions{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}

.hero-abstract::before,
.hero-abstract::after{
  content:""; position:absolute; inset:-20%;
}
/* moving gradient */
.hero-abstract::before{
  background: radial-gradient(1200px 600px at 20% -10%, rgba(255,255,255,.08), transparent 60%),
              radial-gradient(1000px 600px at 80% 110%, rgba(255,255,255,.06), transparent 60%),
              conic-gradient(from 180deg at 50% 50%, rgba(217,210,193,.08), rgba(255,255,255,0) 40%, rgba(217,210,193,.06) 70%, rgba(255,255,255,0));
  animation: swirl 18s linear infinite;
  opacity:.55;
}
/* subtle grain */
.hero-abstract::after{
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width=\"100\" height=\"100\" viewBox=\"0 0 100 100\"><filter id=\"n\"><feTurbulence type=\"fractalNoise\" baseFrequency=\"0.9\" numOctaves=\"2\" stitchTiles=\"stitch\"/></filter><rect width=\"100%\" height=\"100%\" filter=\"url(%23n)\" opacity=\"0.035\"/></svg>');
  mix-blend-mode: overlay;
  opacity:.35;
}
@keyframes swirl{
  0%{ transform: translate3d(0,0,0) rotate(0deg) }
  50%{ transform: translate3d(0,-2%,0) rotate(180deg) }
  100%{ transform: translate3d(0,0,0) rotate(360deg) }
}

@media (max-width: 900px){
  .hero-abstract{ min-height:64vh }
}


/* --- Services enhanced layout (AGAME v2) --- */
.lead{color:var(--beige-2);max-width:60ch;margin:.25rem 0 2rem}
.services-section{padding:3rem 0}
.services-section .area{margin:2rem 0}
.services-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.service-card{background:var(--beige-light); border-radius:14px; padding:22px;}
.service-card:hover,.service-card:focus{transform:translateY(-3px);border-color:rgba(217,210,193,.35);box-shadow:0 6px 20px rgba(0,0,0,.25);outline:none}
.service-card .icon{width:48px;height:48px;border-radius:12px;display:grid;place-items:center;margin-bottom:.6rem;background:rgba(217,210,193,.08);color:var(--beige-2)}
.service-card h3{margin:.2rem 0 .3rem;font-size:1.05rem}
.service-card p{margin:0 0 .6rem 0;color:var(--beige-2);font-size:.95rem}
.service-card .more{font-weight:600;letter-spacing:.2px}
@media (prefers-reduced-motion:reduce){
  .service-card{background:var(--beige-light); border-radius:14px; padding:22px;}
}


/* --- UX mejoras: breadcrumb y FAQ --- */
.breadcrumb{font-size:.9rem;margin:1rem 0 1rem;color:var(--beige-2)}
.breadcrumb ol{list-style:none;display:flex;gap:.5rem;padding:0;margin:0;flex-wrap:wrap}
.breadcrumb a{color:var(--beige-2)}
.breadcrumb li::after{content:"/";opacity:.5;margin:0 .25rem}
.breadcrumb li:last-child::after{content:"";}
.breadcrumb li.active{color:var(--beige);font-weight:600}
.faq{margin:2rem 0 3rem}
.faq h2{margin-bottom:.5rem}
.faq details{border:1px solid rgba(217,210,193,.15);background:rgba(255,255,255,.03);border-radius:.75rem;padding:.75rem 1rem;margin:.5rem 0}
.faq summary{cursor:pointer;font-weight:600;outline:none}
.faq p{margin:.5rem 0 0;color:var(--beige-2)}


/* --- Landing components (AGAME) --- */
.hero-landing{padding:3rem 0;background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,0));}
.hero-landing h1{font-size:clamp(2rem,4vw,3rem);margin-bottom:.4rem}
.hero-landing .lead{color:var(--beige-2);max-width:65ch;margin-bottom:1rem}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.75rem;margin:1rem 0 2rem}
.kpis .kpi{display:flex;gap:.5rem;align-items:flex-start;background:rgba(255,255,255,.03);border:1px solid rgba(217,210,193,.1);border-radius:.75rem;padding:.6rem .8rem}
.kpi .ico{margin-top:.15rem;color:var(--beige-2)}
.grid-landing{display:grid;gap:1.25rem;grid-template-columns:1.2fr .8fr}
@media (max-width:900px){.grid-landing{grid-template-columns:1fr}}
.box{background:rgba(255,255,255,.03);border:1px solid rgba(217,210,193,.12);border-radius:1rem;padding:1rem}
.process{margin:2rem 0}
.steps{display:grid;gap:.75rem}
.step{display:flex;gap:.6rem;align-items:flex-start}
.step .num{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;border:1px solid rgba(217,210,193,.25)}
.testimonials{display:grid;gap:.75rem;margin:1.5rem 0}
.quote{background:rgba(255,255,255,.03);border:1px solid rgba(217,210,193,.1);border-radius:.75rem;padding:.75rem}
.cta-sticky{position:sticky;bottom:0;background:rgba(14,26,38,.9);backdrop-border-top:1px solid rgba(217,210,193,.12);padding:.6rem .9rem;display:flex;justify-content:space-between;align-items:center;z-index:50}
.cta-sticky .btn{margin-left:.5rem}
.form .grid2{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.form .field{display:flex;flex-direction:column}
.form input,.form textarea{background:#0b1520;border:1px solid rgba(217,210,193,.2);color:var(--beige);border-radius:.5rem;padding:.6rem}
.form label{font-size:.9rem;color:var(--beige-2);margin-bottom:.25rem}
.badges{display:flex;flex-wrap:wrap;gap:.5rem;margin:.75rem 0}
.badge{border:1px solid rgba(217,210,193,.25);border-radius:999px;padding:.25rem .6rem;font-size:.85rem;color:var(--beige-2)}


/* --- Typographic upgrade for main menu --- */
.site-header .nav{align-items:center}
#menu a, #menu button.nav-link{
  font-family:"Inter",-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  font-weight:600;
  letter-spacing:.02em;
  padding:.4rem .6rem;
  border-radius:.5rem;
  position:relative;
  transition:color .2s ease, background .2s ease, opacity .2s ease;
}
#menu a:hover,#menu a:focus,#menu button.nav-link:hover,#menu button.nav-link:focus{
  background:rgba(217,210,193,.08);
  outline:none;
}
#menu a:after,#menu button.nav-link:after{
  content:"";
  position:absolute;
  left:.6rem; right:.6rem; bottom:.25rem;
  height:2px;
  background:currentColor;
  opacity:.0;
  transform:scaleX(.3);
  transform-origin:left;
  transition:opacity .2s ease, transform .2s ease;
}
#menu a:hover:after,#menu a:focus:after,#menu button.nav-link:hover:after,#menu button.nav-link:focus:after{opacity:.4; transform:scaleX(1)}

/* Back link bar */
.back-bar{margin:.5rem auto 0; padding-top:.5rem}
.back-link{
  display:inline-flex; align-items:center; gap:.4rem;
  font-weight:600; color:var(--beige-2);
  border:1px solid rgba(217,210,193,.18);
  border-radius:.6rem; padding:.35rem .6rem;
  background:rgba(255,255,255,.03);
  transition:transform .15s ease, border-color .2s ease;
}
.back-link:hover,.back-link:focus{
  border-color:rgba(217,210,193,.35);
  transform:translateY(-1px);
  outline:none;
}
.back-link .arr{font-size:1.1rem; line-height:1}


/* --- Mobile menu type upgrade --- */
@media (max-width: 900px){
  #menu a, #menu button.nav-link{
    font-size:1.1rem;
    line-height:1.6;
    letter-spacing:.01em;
    padding:.6rem .4rem;
  }
}


/* --- Desktop side figures (decorative) --- */
@media (min-width: 1200px){
  body:before, body:after{
    content:"";
    position:fixed;
    top:0; bottom:0;
    width:220px; /* reserved column */
    background-repeat:no-repeat;
    background-position:center bottom;
    background-size:contain;
    opacity:.95;
    pointer-events:none; /* decoration only */
    z-index:0;
  }
  body:before{left:0; background-image:url('../assets/side-arch-220.webp');}
  body:after{right:0; background-image:url('../assets/side-arch-220.webp'); transform:scaleX(-1);}
  /* prevent content overlap */
  .container, .page, main{position:relative; z-index:1}
  .container{max-width:1000px; margin-left:auto; margin-right:auto}
  .site-header .container{max-width:1000px}
}
@media (min-width: 1500px){
  body:before, body:after{width:260px; background-image:url('../assets/side-arch-220.webp')}
  .container, .page, main{}
}
@media (min-width: 1000px) and (max-width: 1199.98px){
  body:before, body:after{
    content:"";
    position:fixed; top:0; bottom:0;
    width:160px;
    background-repeat:no-repeat;
    background-position:center bottom;
    background-size:contain;
    opacity:.95; pointer-events:none; z-index:0;
  }
  body:before{left:0; background-image:url('../assets/side-arch-160.webp')}
  body:after{right:0; background-image:url('../assets/side-arch-160.webp'); transform:scaleX(-1)}
  .container, .page, main{position:relative; z-index:1}
  .container{max-width:920px; margin-left:auto; margin-right:auto}
  .site-header .container{max-width:920px}
}

/* Subtle radial glows to reduce empty navy */
@media (min-width: 1000px){
  body{
    background-image:
      radial-gradient(800px 50% at -100px 60%, rgba(217,210,193,.08), transparent 60%),
      radial-gradient(800px 50% at 110% 60%, rgba(217,210,193,.08), transparent 60%);
    background-attachment: fixed, fixed;
  }
}


/* --- Center fix for breadcrumb & FAQ --- */
nav.breadcrumb.container{max-width:1000px;margin-left:auto;margin-right:auto;padding:0 1rem}
section.faq.container{max-width:1000px;margin-left:auto;margin-right:auto}
/* keep consistency with base container on large screens */
@media (min-width:1200px){
  nav.breadcrumb.container, section.faq.container{max-width:1000px}
}
@media (min-width:1500px){
  nav.breadcrumb.container, section.faq.container{max-width:1100px}
}

/* --- breadcrumb divider --- */
nav.breadcrumb.container{padding-bottom:.6rem; margin-bottom:1rem; position:relative}
nav.breadcrumb.container:after{
  content:""; position:absolute; left:0; right:0; bottom:0;
  height:1px;
  background:linear-gradient(90deg, rgba(217,210,193,.0), rgba(217,210,193,.22), rgba(217,210,193,.0));
}


/* refine side panels positioning */
@media (min-width: 1000px){
  body:before, body:after{
    background-position:center center !important;
    background-size:cover !important;
  }
}


/* --- CTA sticky refinada (alineada y sin solapar footer) --- */
.cta-sticky{
  position: sticky;
  bottom: 0;
  padding: .6rem 1rem;
  /* alinear con container sin cambiar el markup */
  padding-left: max(1rem, calc((100vw - 1000px)/2));
  padding-right: max(1rem, calc((100vw - 1000px)/2));
}
@media (min-width:1500px){
  .cta-sticky{
    padding-left: max(1rem, calc((100vw - 1100px)/2));
    padding-right: max(1rem, calc((100vw - 1100px)/2));
  }
}
/* estado oculto cuando el footer entra en viewport */
.cta-sticky.is-hidden{
  opacity:.0;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease;
  pointer-events:none;
}


/* --- About hero fix: proper crop and blend --- */
.hero-photo.about-hero{
  position:relative;
  overflow:hidden;
  border-bottom:1px solid rgba(217,210,193,.12);
}
.hero-photo.about-hero img{
  width:100%;
  height:clamp(240px, 36vh, 460px);
  object-fit:cover;
  object-position:center 82%;
  display:block;
  
}
/* gradient to fuse with header/nav */
.hero-photo.about-hero:before{
  content:"";
  position:absolute; left:0; right:0; top:0; height:96px;
  background:linear-gradient(180deg, rgba(14,26,38,.95), rgba(14,26,38,0));
  pointer-events:none;
}
/* subtle bottom fade for elegant transition */
.hero-photo.about-hero:after{
  content:"";
  position:absolute; left:0; right:0; bottom:0; height:72px;
  background:linear-gradient(0deg, rgba(14,26,38,.65), rgba(14,26,38,0));
  pointer-events:none;
}


/* --- About hero gap fix (no space under header) --- */
.site-header{ margin-bottom:0 !important; }
#main.page{ padding-top:0 !important; }
#main.page > *:first-child{ margin-top:0 !important; }
.hero-photo.about-hero{ margin-top:0 !important; border-bottom:none !important; }
.hero-photo.about-hero:before{ display:none !important; } /* remove top dark overlay that parecía 'hueco' */


/* --- Services hero blend fix: no two-tone background --- */
.hero-landing{
  background: transparent !important;
  box-shadow: none !important;
}
.hero-landing::before,
.hero-landing::after{
  display:none !important;
}


/* --- Services tagline single-line on desktop --- */
.no-wrap-desktop{ white-space: normal; }
@media (min-width: 1000px){
  .no-wrap-desktop{
    white-space: nowrap;
  }
  /* optional: slightly smaller so it fits in one line without overflow */
  .services-hero .no-wrap-desktop,
  .hero-landing .no-wrap-desktop{
    font-size: clamp(1rem, 1.25vw, 1.1rem);
  }
}


/* --- Home minimal (logo only) --- */
.home-minimal .site-header,
.home-minimal footer,
.home-minimal .cta-sticky,
.home-minimal nav.breadcrumb,
.home-minimal .back-bar{ display:none !important; }

.home-splash{
  position:relative;
  z-index:1;
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:2rem 1rem;
}
.home-logo{
  width:clamp(180px, 26vw, 360px);
  height:auto;
  image-rendering:auto;
  
}


/* --- Home minimal v22: header visible, big clickable logo --- */
.home-minimal .site-header{ display:block !important; }
.home-minimal footer{ display:none !important; }
.home-minimal .cta-sticky{ display:none !important; }
.home-minimal nav.breadcrumb, .home-minimal .back-bar{ display:none !important; }

.home-splash{
  min-height: 86vh;
  display: grid;
  place-items: center;
  padding: 1.5rem;
}
.home-logo-link{ text-decoration:none; cursor:pointer; display:inline-block; }
.home-logo{
  height: clamp(260px, 72vh, 88vh);
  width: auto;
  max-width: 92vw;
  image-rendering:auto;
  
  transition: transform .15s ease;
}
.home-logo-link:hover .home-logo,
.home-logo-link:focus .home-logo{ transform: scale(1.02); }


/* --- Folder view for services --- */
.folder-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:1rem; margin-top:1rem;
}
.folder-card{
  position:relative; display:flex; align-items:center; gap:.6rem;
  padding:1rem 1.1rem 1.1rem; border:1px solid rgba(217,210,193,.18);
  border-radius:1rem; background:rgba(255,255,255,.03);
  text-decoration:none; color:var(--beige);
  transition:transform .15s ease, border-color .2s ease, background .2s ease;
  overflow:hidden;
}
.folder-card .tab{
  position:absolute; top:.6rem; left:.6rem; width:56%; height:.6rem;
  border:1px solid rgba(217,210,193,.22);
  border-bottom:none; border-radius:.5rem .5rem 0 0;
  background:rgba(217,210,193,.08);
  pointer-events:none;
}
.folder-card .ico{ font-size:1.25rem; opacity:.85 }
.folder-card .t{ font-weight:700; letter-spacing:.02em }
.folder-card:hover{ transform:translateY(-2px); border-color:rgba(217,210,193,.35); background:rgba(255,255,255,.05) }

/* Grid of services in a category */
.service-list-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:.9rem; margin: .5rem 0 2rem;
}
.service-item-card{
  display:flex; align-items:center; min-height:72px; padding:.9rem 1rem;
  border:1px solid rgba(217,210,193,.16); border-radius:.9rem;
  background:rgba(255,255,255,.02); text-decoration:none; color:var(--beige);
  transition:border-color .2s ease, background .2s ease, transform .15s ease;
}
.service-item-card .t{ font-weight:600 }
.service-item-card:hover{ border-color:rgba(217,210,193,.32); background:rgba(255,255,255,.05); transform:translateY(-1px) }

/* tighten hero spacing for folders */
.services-hero{ padding-top: 1.5rem; }


/* --- Services as sections (not folders) --- */
.services-section{margin:1.25rem auto 2rem; padding:1rem 0; border-top:1px solid rgba(217,210,193,.14)}
.section-head{display:flex; gap:.75rem; align-items:flex-end; justify-content:space-between; flex-wrap:wrap}
.section-head h2{margin:0}
.section-head .muted{color:var(--beige-2); margin:0; max-width:60ch}
.section-preview-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:.75rem; margin-top:.75rem}
.preview-card{display:flex; flex-direction:column; gap:.25rem; padding:.8rem 1rem; border:1px solid rgba(217,210,193,.16); border-radius:.8rem; text-decoration:none; color:var(--beige); background:rgba(255,255,255,.02); transition:border-color .2s, background .2s, transform .15s}
.preview-card .t{font-weight:700}
.preview-card .d{opacity:.8; font-size:.95rem}
.preview-card:hover{border-color:rgba(217,210,193,.32); background:rgba(255,255,255,.05); transform:translateY(-1px)}

/* Category cards with description */
.service-cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1rem; margin:1rem 0 2rem}
.svc-card{display:flex; flex-direction:column; gap:.35rem; padding:1rem 1.1rem; border:1px solid rgba(217,210,193,.16); border-radius:.9rem; text-decoration:none; color:var(--beige); background:rgba(255,255,255,.02); transition:border-color .2s, background .2s, transform .15s}
.svc-card h3{
  margin:0 0 .25rem;
  line-height:1.18;
  height:3.6em;              /* altura fija para el título (hasta 3 líneas) */
  display:block;
  overflow:hidden;
}

.svc-card p{
  flex:1 1 auto;
  margin:.1rem 0 .4rem;
  color:var(--beige-2);
  line-height:1.45;
  height:8.4em;              /* banda fija para el cuerpo de texto */
  overflow:hidden;
}

.svc-card .more{
  opacity:.85;
  font-weight:600;
  margin-top:auto;
}

/* Botones dentro de tarjetas: alineados al fondo también */
.svc-card .btn{
  margin-top:auto;
  align-self:flex-start;
}
.svc-card:hover{border-color:rgba(217,210,193,.32); background:rgba(255,255,255,.05); transform:translateY(-1px)}




/* --- Services tabs (versión final móvil + escritorio) --- */
.tabmenu{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.4rem;
  margin:1.5rem auto 0;
  padding:0;
  border:none;
  background:transparent;
}

.tabbtn{
  flex:0 0 auto;
  appearance:none;
  border:1px solid rgba(217,210,193,.32);
  background:rgba(15,23,42,.95);
  color:rgba(235,227,210,.82);
  padding:.45rem .9rem;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:.72rem;
  cursor:pointer;
  text-align:center;
  position:relative;
  white-space:nowrap;
  border-radius:999px;
  transition:
    color .18s ease,
    background-color .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    transform .12s ease;
}

.tabbtn:hover{
  color:var(--beige);
  border-color:rgba(245,233,214,.8);
  background:rgba(30,41,59,.95);
}

.tabbtn.is-active{
  color:#0b1220;
  background:#f5e9d6;
  border-color:#f5e9d6;
  box-shadow:0 10px 22px rgba(0,0,0,.35);
  transform:translateY(-1px);
}

/* Sin subrayados adicionales */
.tabbtn::after{
  content:none !important;
}

.tab-panel{
  display:none;
  padding:1.5rem 0 0;
}

.tab-panel.is-active{
  display:block;
}

/* En escritorio aumentamos ligeramente tamaño y espaciado */
@media (min-width: 768px){
  .tabmenu{
    margin:2.25rem auto 0;
    gap:.6rem;
  }
  .tabbtn{
    font-size:.8rem;
    letter-spacing:.1em;
    padding:.55rem 1.4rem;
  }
}

/* En pantallas muy pequeñas aseguramos que quepan los tres en una línea */
@media (max-width: 480px){
  .tabbtn{
    font-size:.67rem;
    letter-spacing:.06em;
    padding:.4rem .65rem;
  }
}

/* Card grid re-use */
.service-cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1rem; margin:1rem 0 2rem}
.svc-card{display:flex; flex-direction:column; gap:.35rem; padding:1rem 1.1rem; border:1px solid rgba(217,210,193,.16); border-radius:.9rem; text-decoration:none; color:var(--beige); background:rgba(255,255,255,.02); transition:border-color .2s, background .2s, transform .15s}
.svc-card h3{
  margin:0 0 .25rem;
  line-height:1.18;
  height:3.6em;              /* altura fija para el título (hasta 3 líneas) */
  display:block;
  overflow:hidden;
}

.svc-card p{
  flex:1 1 auto;
  margin:.1rem 0 .4rem;
  color:var(--beige-2);
  line-height:1.45;
  height:8.4em;              /* banda fija para el cuerpo de texto */
  overflow:hidden;
}

.svc-card .more{
  opacity:.85;
  font-weight:600;
  margin-top:auto;
}

/* Botones dentro de tarjetas: alineados al fondo también */
.svc-card .btn{
  margin-top:auto;
  align-self:flex-start;
}
.svc-card:hover{border-color:rgba(217,210,193,.32); background:rgba(255,255,255,.05); transform:translateY(-1px)}

/* --- Mini CTA: Plantéanos tu caso --- */
.mini-cta{
  display:flex; justify-content:space-between; align-items:center; gap:.75rem;
  border:1px solid rgba(217,210,193,.18); border-radius:.8rem;
  background:rgba(255,255,255,.03); padding:.7rem .9rem; margin: .6rem auto 1rem;
}
.mini-cta-text{ font-weight:700; letter-spacing:.02em }
@media (max-width:800px){ .mini-cta{ flex-direction:column; align-items:flex-start } }


/* --- CTA card inside services grids --- */
.svc-card.svc-cta{
  display:flex; flex-direction:column; gap:.5rem;
  align-items:flex-start;
  border-style:dashed;
  border-color: rgba(217,210,193,.35);
  background: rgba(255,255,255,.05);
}
.svc-card.svc-cta .btn{ margin-top:.25rem; }


/* === Classic style pack v29C (Source Serif 4 + Inter) === */
:root{
  --beige-light:#e7ddc7;
  --navy:#0E1A26;
  --beige:#D9D2C1;
  --beige-2:rgba(217,210,193,.82);
}
html,body{ font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif; line-height:1.55; }
h1,h2,h3,.h1,.h2,.h3{ font-family: "Source Serif 4", Georgia, Cambria, "Times New Roman", Times, serif; letter-spacing:.01em; }
h1{ font-weight:700; font-size: clamp(34px, 4.2vw, 42px); line-height:1.18; }
h2{ font-weight:700; font-size: clamp(26px, 3.2vw, 30px); line-height:1.22; }
h3{ font-weight:600; font-size: clamp(20px, 2.2vw, 22px); line-height:1.28; }
p,li{ font-size: clamp(16px, 1.1vw, 17px); }

/* Menu superior */
.site-header nav a, header nav a{
  font-weight:600; letter-spacing:.2px; text-decoration:none; position:relative; padding-bottom:.2rem;
}
.site-header nav a[aria-current="page"],
header nav a[aria-current="page"],
.site-header nav a.active{
  text-decoration:none;
  border-bottom:2px solid rgba(217,210,193,.85);
}
/* Hover states sutiles */
a:hover{ opacity:.95 }
.btn{ transition: transform .12s ease, border-color .18s ease, background-color .18s ease }
.btn:hover{ transform: translateY(-1px) }

/* Cards (servicios) – bordes y sombra sutil */
.svc-card,.service-item-card{
  border:1px solid rgba(217,210,193,.18);
  border-radius: .9rem;
  background: rgba(255,255,255,.02);
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}
.svc-card:hover,.service-item-card:hover{
  border-color: rgba(217,210,193,.32);
  box-shadow: 0 10px 22px rgba(0,0,0,.08);
  transform: translateY(-1px);
}
.svc-card h3{
  margin:0 0 .25rem;
  line-height:1.18;
  height:3.6em;              /* altura fija para el título (hasta 3 líneas) */
  display:block;
  overflow:hidden;
}
.svc-card p{
  flex:1 1 auto;
  margin:.1rem 0 .4rem;
  color:var(--beige-2);
  line-height:1.45;
  height:8.4em;              /* banda fija para el cuerpo de texto */
  overflow:hidden;
}

/* Formularios: campos discretos + focus visible */
.form .field input,.form .field textarea, form input, form textarea{
  background: rgba(255,255,255,.03);
  border:1px solid rgba(217,210,193,.18);
  border-radius:.6rem; color:var(--beige);
  padding:.6rem .7rem;
}
.form .field input:focus, .form .field textarea:focus, form input:focus, form textarea:focus{
  outline:2px solid rgba(217,210,193,.55);
  outline-offset: 1px;
  border-color: rgba(217,210,193,.45);
}

/* Breadcrumbs y subtítulos */
.breadcrumb{ margin-bottom: 1rem; }
.lead{ color: var(--beige-2); }

/* Overlays un punto más limpios (mejora nitidez) */
.hero-photo.about-hero::before{ opacity:.92 } /* si existe ese overlay */


/* about: extra spacing between hero and copy */
.hero-photo.about-hero + .about-copy{ margin-top: 3.2rem; }

/* --- Visual polish v1: KPI chips wrapping & alignment --- */
.kpis .kpi{ align-items:center; padding:.65rem .95rem; overflow:visible; }
.kpi .ico{ margin-top:0; display:inline-flex; align-items:center; line-height:0 }
.kpis .kpi > div{ min-width:0; white-space:normal; word-break:break-word; overflow-wrap:anywhere; }


/* --- Section CTA unify + equal heights --- */
.service-cards{ grid-auto-rows: 1fr; }
.svc-card{ height: 100%; display:flex; flex-direction:column; }
.svc-card .more{ margin-top:auto; font-weight:600; opacity:.9 }
.svc-card.svc-cta{ border-style: solid; border-color: rgba(217,210,193,.22); background: rgba(255,255,255,.02); }
.svc-card.svc-cta:hover{ border-color: rgba(217,210,193,.32); }


/* --- About hero: office image + scroll reveal v1 --- */
.hero-photo.about-hero{position:relative;overflow:hidden}
.hero-photo.about-hero + .about-copy{margin-top:3rem}
.hero-photo.about-hero img.is-dynamic{
  width:100%;height:clamp(360px,52vh,620px);
  object-fit:cover;object-position:center 8%;
  
  transition:object-position .12s linear;
}
@media (prefers-reduced-motion:reduce){
  .hero-photo.about-hero img.is-dynamic{transition:none}
}

/* blog full narrative */
.text p{ line-height:1.8; margin:1rem 0; }
.text h2{ margin-top:1.5rem; }
.text h3{ margin-top:1rem; }
.section-preview-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px; margin:1.5rem 0 2.5rem; }
.preview-card{ display:block; padding:1rem; border:1px solid rgba(217,210,193,.14); border-radius:14px; background:rgba(255,255,255,.03); }
.preview-card .t{ font-weight:600; margin-bottom:.25rem; }
.cta-strip{ margin-top:2rem; padding:1rem; border:1px solid rgba(217,210,193,.15); border-radius:12px; }


/* === Ajustes logo en móvil (navbar + portada) === */
@media (max-width: 768px) {
  .brand-logo {
    width: 48px;
    height: 48px;
    object-fit: contain;
  }

  .home-splash {
    padding: 1.5rem 0.75rem;
    min-height: 86vh;
  }

  .home-logo {
    height: auto !important;
    max-height: 78vh;
    width: auto;
    max-width: 96vw;
  }
}

/* === Tarjetas claras para servicios y blog === */
.card, .service-card {
    background: #f3f6fa !important;
    border: 1px solid rgba(15,23,42,0.08) !important;
    color: #0e1a26 !important;
}
.card p, .service-card p {
    color: #0b1520 !important;
}
.card .t, .service-card .t {
    color: #0e1a26 !important;
}


/* === Ajuste colores tarjetas Servicios y Blog === */

/* Servicios: tarjetas en azul claro corporativo */
.svc-card {
  background: #0b1724; /* base más clara que el fondo pero aún navy */
  border-radius: 18px;
  border: 1px solid rgba(148,163,184,0.35);
}
.svc-card h3 {
  color: #f5f2ea;
}
.svc-card p {
  color: #cbd5f5;
}
.svc-card .more {
  color: #f5f2ea;
}
.svc-card.svc-cta {
  background: #f3f6fa;
  border-color: rgba(15,23,42,0.25);
}
.svc-card.svc-cta h3,
.svc-card.svc-cta p,
.svc-card.svc-cta .more {
  color: #0b1520;
}

/* Blog: tarjetas con fondo beige como el título */
.section-preview-grid .preview-card {
  background: #d9d2c1;
  border-radius: 18px;
  border: 1px solid rgba(15,23,42,0.12);
  color: #0b1520;
}
.section-preview-grid .preview-card .t {
  color: #0b1520;
}
.section-preview-grid .preview-card .muted {
  color: rgba(15,23,42,0.7);
}


/* === Corrección final: tarjetas Servicios (azul claro) y Blog (beige) === */

/* Servicios: tarjetas en azul muy claro */
.svc-card {
  background: #f3f6fa;
  border-radius: 18px;
  border: 1px solid rgba(15,23,42,0.08);
  color: #0e1a26;
}
.svc-card h3 {
  color: #0e1a26;
}
.svc-card p {
  color: #0b1520;
}
.svc-card .more {
  color: #0e1a26;
}
.svc-card:hover {
  background: #e7edf7;
  border-color: rgba(15,23,42,0.18);
}

/* Blog: tarjetas con fondo beige como el título "Blog" */
.section-preview-grid .preview-card {
  background: #d9d2c1;
  border-radius: 18px;
  border: 1px solid rgba(15,23,42,0.14);
  color: #0b1520;
}
.section-preview-grid .preview-card .t {
  color: #0b1520;
}
.section-preview-grid .preview-card .muted {
  color: rgba(15,23,42,0.7);
}
.section-preview-grid .preview-card p {
  color: #0b1520;
}


/* === DISEÑO UNIFICADO DE TARJETAS AGAME (toda la web) === */
.svc-card,
.section-preview-grid .preview-card,
.card,
.service-item-card,
.blog-card {
  background: #f3f6fa !important;
  border-radius: 18px !important;
  border: 1px solid rgba(15,23,42,0.08) !important;
  color: #0e1a26 !important;
  box-shadow: 0 14px 32px rgba(15,23,42,0.10);
}

.svc-card h3,
.section-preview-grid .preview-card .t,
.card h3,
.service-item-card h3,
.blog-card h3 {
  color: #0e1a26 !important;
}

.svc-card p,
.section-preview-grid .preview-card p,
.section-preview-grid .preview-card .muted,
.card p,
.service-item-card p,
.blog-card p {
  color: #0b1520 !important;
}

.svc-card .more,
.section-preview-grid .preview-card .more {
  color: #0e1a26 !important;
}

/* Hover sutil común */
.svc-card:hover,
.section-preview-grid .preview-card:hover,
.card:hover,
.service-item-card:hover,
.blog-card:hover {
  background: #e7edf7 !important;
  border-color: rgba(15,23,42,0.18) !important;
  transform: translateY(-1px);
  transition: background .2s ease, border-color .2s ease, transform .15s ease;
}


/* === Ajuste tarjeta contacto: tipografía corporativa === */
.contact-card,
.contact-card p,
.contact-card a {
  color: #0b1520 !important;
}
.contact-card a {
  text-decoration: none;
}

/* === Margen lateral en móvil para tarjetas (Servicios, Blog, Inicio, Contacto) === */
@media (max-width: 768px) {
  .svc-cards,
  .section-preview-grid,
  .cards,
  .two-col > div,
  .contact-card,
  .blog-card,
  .card {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .svc-card,
  .preview-card,
  .blog-card,
  .card {
    margin-left: 4px !important;
    margin-right: 4px !important;
  }
}


/* === Ajuste extra de márgenes en móvil: títulos + Servicios === */
@media (max-width: 768px) {
  /* Títulos de Blog y Servicios con mismo margen que las tarjetas */
  .container.hero-landing.blog-hero,
  .container.hero-landing.services-hero {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  /* Servicios: un poco más de aire lateral que el resto */
  .svc-cards {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
}


/* === Alineado vertical de todas las cabeceras (hero) === */
.hero-landing,
.hero-photo.about-hero,
.container.text.contact-hero {
  padding-top: 4.2rem !important;
}

/* Ajuste específico en móvil */
@media (max-width: 768px) {
  .hero-landing,
  .hero-photo.about-hero,
  .container.text.contact-hero {
    padding-top: 3.2rem !important;
  }
}



}


/* === HERO SOBRE EL DESPACHO – Integrado en la maquetación === */
.about-hero-gradient{
  max-width: 1100px;
  height: 42vh;
  margin: 0 auto 2.5rem auto;
  border-radius: 24px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 24px 60px rgba(0,0,0,0.35);
}

.about-hero-img{
  position:absolute;
  inset:0;
  background-image: url('../assets/about-hero.webp');
  background-size: cover;
  background-position: center;
  
}

.about-hero-gradient::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(to bottom,
            rgba(0,0,0,0) 0%,
            rgba(0,0,0,0.08) 55%,
            #0b1520 100%);
}

@media (max-width: 768px){
  .about-hero-gradient{
    height: 32vh;
    margin-bottom: 2rem;
    border-radius: 18px;
    box-shadow: 0 18px 40px rgba(0,0,0,0.30);
  }
}




/* Imagen tipo cuadro integrada al ancho del texto */
.about-cuadro-wrapper{
  margin: 0 0 1.8rem 0;
  padding-top: 1.6rem;
}
.about-cuadro-img{
  display:block;
  width:100%;
  height:auto;
  border-radius: 16px;
  box-shadow: 0 18px 42px rgba(0,0,0,0.32);
}
@media(max-width:768px){
  .about-cuadro-wrapper{
    padding-top:1.2rem;
    margin-bottom:1.4rem;
  }
  .about-cuadro-img{
    border-radius:12px;
  }
}

.home-feature-cards{margin-top:1rem !important;}

.firma-flex{display:flex;justify-content:center;gap:40px;align-items:center;margin-bottom:20px;}
.firma-centered{max-width:300px;height:auto;}

/* Updated separation and integration */
.firma-flex {
    display: flex;
    justify-content: center;
    gap: 90px; /* increased separation */
    align-items: center;
    margin: 40px 0; /* more breathing space */
}

.firma-centered {
    max-width: 320px;
    height: auto;
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.18); /* subtle professional integration */
}

/* Further separation + subtle navy filter */
.firma-flex {
    display: flex;
    justify-content: center;
    gap: 140px; /* more separation */
    align-items: center;
    margin: 50px 0;
}

.firma-centered {
    max-width: 330px;
    height: auto;
    border-radius: 6px;
    box-shadow: 0 8px 22px rgba(0,0,0,0.20);
    
}

/* FIX: Menú superior opaco siempre */
header, .navbar, .topbar {
    background-color: #0e1a26 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    opacity: 1 !important;
}


/* === Override final: tarjetas en beige claro corporativo === */
.card,
.service-card,
.svc-card,
.section-preview-grid .preview-card,
.folder-card,
.service-item-card,
.blog-card,
.contact-card {
  background: #faf5ee !important;
  border-color: rgba(15,23,42,0.18) !important;
  color: #0b1520 !important;
}

.card p,
.service-card p,
.svc-card p,
.section-preview-grid .preview-card p,
.blog-card p,
.contact-card p {
  color: #0b1520 !important;
}

.section-preview-grid .preview-card .muted {
  color: rgba(15,23,42,0.7) !important;
}

/* Prevent hover color changes on cards */
.card:hover,
.service-card:hover,
.svc-card:hover,
.section-preview-grid .preview-card:hover,
.folder-card:hover,
.service-item-card:hover,
.blog-card:hover,
.contact-card:hover {
  background: #faf5ee !important;
  border-color: rgba(15,23,42,0.18) !important;
  color: #0b1520 !important;
}


/* Imágenes de inicio: comportamiento diferenciado escritorio/móvil */

/* Bloques móviles inicialmente ocultos en escritorio */
.firma-mobile-top,
.firma-mobile-bottom {
  display: none;
}

.firma-mobile-img {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  display: block;
  border-radius: 6px;
  box-shadow: 0 8px 22px rgba(0,0,0,0.20);
}

/* Versión escritorio: se mantiene la pareja de imágenes en horizontal */
.firma-flex.firma-desktop {
  display: flex;
}

/* Versión móvil: ocultamos la versión escritorio y mostramos las imágenes separadas */
@media (max-width: 768px) {
  .firma-flex.firma-desktop {
    display: none !important;
  }

  .firma-mobile-top,
  .firma-mobile-bottom {
    display: block;
    margin: 24px auto;
    padding: 0 1.4rem;
  }
}



/* Bloque premium defensa penal */
.premium-block {
  max-width: 880px;
  margin: 0 auto 3rem auto;
  padding: 1.5rem 1.75rem 2.25rem;
  background: rgba(15,23,42,0.03);
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,0.08);
}

.premium-block h2 {
  margin-top: 1.8rem;
  margin-bottom: 0.75rem;
}

.premium-block p {
  margin-bottom: 0.9rem;
}

.premium-tag {
  display: inline-block;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,0.1);
  background: rgba(15,23,42,0.02);
}

.premium-highlights {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.2rem;
  margin: 1.6rem 0 0.6rem;
}

.highlight-card {
  padding: 0.9rem 1rem;
  border-radius: 12px;
  background: #faf5ee;
  border: 1px solid rgba(15,23,42,0.06);
}

.highlight-card h3 {
  font-size: 0.98rem;
  margin-bottom: 0.4rem;
}

.highlight-card p {
  font-size: 0.92rem;
  margin-bottom: 0;
}

.premium-list {
  margin-left: 1.2rem;
}

.premium-list li {
  margin-bottom: 0.4rem;
}

/* Responsive */
@media (max-width: 900px) {
  .premium-highlights {
    grid-template-columns: 1fr;
  }
}


/* Ajuste bloque premium defensa */
.premium-block {
  margin: 1.5rem 0 3rem 0;
  padding: 1.5rem 0 2.25rem 0;
  background: rgba(15,23,42,0.03);
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,0.08);
}

.premium-tag {
  display: none;
}

/* Tarjetas destacadas en azul marino */
.highlight-card,
.highlight-card h3,
.highlight-card p {
  color: #0b1520;
}

/* FAQ en acordeón alineado */
.faq-section {
  max-width: 880px;
  margin: 0 auto 3rem auto;
}

.faq-accordion {
  margin-top: 1rem;
}





.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0;
  font-weight: 600;
  color: #0b1520;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-icon {
  font-size: 0.9rem;
  opacity: 0.75;
}

.faq-item p {
  margin: 0.2rem 0 0.2rem;
  font-size: 0.95rem;
  color: #0b1520;
}


/* FAQ unified beige */
.faq-item {
  background: #f6f0e8 !important;
  border: 1px solid rgba(15,23,42,0.10);
  border-radius: 10px;
  margin-bottom: 0.75rem;
  padding: 0.1rem 0.9rem 0.8rem;
}

.faq-item[open] {
  background: #f6f0e8 !important;
}


/* Blog listing enhancements */
.section-preview-grid .preview-card .meta-line{
  margin-top: 0.15rem;
  margin-bottom: 0.35rem;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.section-preview-grid .preview-card .blog-pill{
  display: inline-flex;
  align-items: center;
  padding: 0.07rem 0.45rem;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,0.28);
  font-size: 0.74rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.section-preview-grid .preview-card .reading-time{
  font-size: 0.8rem;
  opacity: .8;
}
.section-preview-grid .preview-card .summary{
  margin-top: 0.1rem;
}

/* CTA dentro de los artículos del blog */
.cta-box{
  margin: 2.5rem 0 2rem;
  padding: 1.5rem 1.75rem;
  border-radius: 0.9rem;
  border: 1px solid rgba(217,210,193,0.75);
  background: rgba(217,210,193,0.10);
}
.cta-box .cta-title{
  font-weight: 600;
  margin-bottom: 0.35rem;
}
.cta-box a{
  text-decoration: none;
}
.cta-box a:hover,
.cta-box a:focus{
  text-decoration: underline;
}


/* Tabs de filtrado del blog */
.blog-filter{
  margin-top: 1.5rem;
  margin-bottom: 1.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.blog-filter .blog-tab{
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,0.55);
  background: transparent;
  color: #e5e7eb;
  font-size: 0.9rem;
  padding: 0.35rem 0.9rem;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.blog-filter .blog-tab.is-active{
  background: #e9dfcf;
  color: #111827;
  border-color: transparent;
}
.blog-filter .blog-tab:focus-visible{
  outline: 2px solid #e9dfcf;
  outline-offset: 2px;
}


/* Imagen de cabecera en artículos del blog */
.blog-header{
  width: 100%;
  height: auto;
  border-radius: 0.6rem;
  margin-bottom: 1.4rem;
  display: block;
}


/* CTA inferior unificada para artículos del blog */
.cta-bottom {
  margin-top: 4rem;
  margin-bottom: 3rem;
  padding: 2.5rem 2rem;
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 18px 45px rgba(0,0,0,0.12);
  text-align: left;
}

.cta-bottom h2 {
  font-size: 1.6rem;
  margin-bottom: 0.75rem;
}

.cta-bottom p {
  margin-bottom: 0.5rem;
}

.cta-bottom a {
  font-weight: 600;
  text-decoration: none;
}

.cta-bottom a:hover {
  text-decoration: underline;
}

/* Bloque de artículos relacionados */
.related-posts {
  margin-top: 2rem;
  margin-bottom: 4rem;
}

.related-posts h2 {
  font-size: 1.4rem;
  margin-bottom: 0.75rem;
}

.related-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem 1.5rem;
}

.related-list li a {
  display: inline-block;
  font-size: 0.98rem;
  text-decoration: none;
}

.related-list li a:hover {
  text-decoration: underline;
}

/* Responsive para móviles */
@media (max-width: 768px) {
  .cta-bottom {
    padding: 2rem 1.5rem;
  }
  .related-list {
    grid-template-columns: 1fr;
  }
}


/* ---- PREMIUM RELATED POSTS ---- */
.related-posts {
  margin-top: 4rem;
  margin-bottom: 4rem;
  padding: 2.5rem;
  background: #ffffff;
  border-radius: 18px;
  box-shadow: 0 25px 55px rgba(0,0,0,0.15);
}

.related-posts h2 {
  font-size: 1.8rem;
  margin-bottom: 1rem;
  font-weight: 700;
}

.related-list {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem 2rem;
}

.related-list li a {
  display: block;
  padding: 1rem 1.2rem;
  background: #fafafa;
  border-radius: 12px;
  box-shadow: 0 10px 22px rgba(0,0,0,0.08);
  text-decoration: none;
  transition: all 0.25s ease;
}

.related-list li a:hover {
  background: #f0f0f0;
  transform: translateY(-3px);
}

/* Mobile */
@media (max-width: 768px) {
  .related-list {
    grid-template-columns: 1fr;
  }
}

/* ---- SHRINK CTA-BOX (primer cuadro "¿Tienes un caso parecido?") ---- */
.cta-box {
  padding: 1.5rem 1.5rem !important;
  border-radius: 14px !important;
  max-width: 800px;
  margin: 0 auto 2rem auto;
}


/* ---- Ajuste final CTA-box al final del artículo ---- */
.cta-box {
  padding: 1.6rem 1.6rem !important;
  border-radius: 14px !important;
  max-width: 780px;
  margin: 3rem auto 2.5rem auto;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(2, 13, 28, 0.85);
}

/* ---- Artículos relacionados con paleta AGAME ---- */
.related-posts {
  margin-top: 3rem;
  margin-bottom: 4rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,0.08);
  background: transparent;
  box-shadow: none;
}

.related-posts h2 {
  font-size: 1.5rem;
  margin-bottom: 1.25rem;
  font-weight: 600;
}

.related-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem 1.75rem;
}

.related-list li a {
  display: block;
  padding: 0.9rem 1.1rem;
  background: rgba(255,255,255,0.02);
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.08);
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.related-list li a:hover {
  background: rgba(255,255,255,0.06);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(0,0,0,0.3);
}

/* Responsive */
@media (max-width: 768px) {
  .related-list {
    grid-template-columns: 1fr;
  }
}


/* Ajuste alineación lateral de listas dentro de bloques de texto */
.text ul,
.text ol,
.text .nice {
  padding-left: 1.1rem;
  margin-left: 0;
}


/* Override final: listas perfectamente alineadas con el texto principal */
.text ul,
.text ol,
.text .nice {
  margin-left: 0 !important;
  padding-left: 0 !important;
  list-style-position: inside;
}


/* === Página de contacto AGAME === */
.contact-grid {
  display: grid;
  grid-template-columns: 1.1fr 1.1fr;
  gap: 2.5rem;
  margin-top: 2rem;
}

@media (max-width: 768px) {
  .contact-grid {
    grid-template-columns: 1fr;
  }
}

.contact-info-card,
.contact-form-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 18px 50px rgba(0,0,0,0.25);
}

.contact-info-card h2 {
  margin-bottom: 1rem;
}

.contact-info-card p,
.contact-form-card label,
.contact-form-card .privacy-note {
  margin-bottom: 0.7rem;
}

.contact-form-card input,
.contact-form-card textarea {
  width: 100%;
  padding: 0.9rem;
  margin-bottom: 1.1rem;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.18);
  color: #e6e2d9;
  border-radius: 10px;
}

.contact-form-card input:focus,
.contact-form-card textarea:focus {
  outline: none;
  border-color: rgba(255,255,255,0.35);
}

.btn-contact {
  width: 100%;
  margin-top: 0.4rem;
}

.note {
  opacity: 0.85;
  margin-top: 1rem;
}

.privacy-note {
  font-size: 0.85rem;
  opacity: 0.8;
  margin-top: 0.8rem;
}



/* Ajuste: subtítulo del contacto con el mismo color que el título */
.muted {
  color: #e6e2d9 !important;
  opacity: 1 !important;
}


/* Forzar color exacto del subtítulo en Contacto */
.contact-hero .muted {
    color: #e6e2d9 !important;
    opacity: 1 !important;
}


/* Restaurar color general de .muted y fijar el del subtítulo de Contacto */
.muted {
  color: var(--muted);
}

.contact-hero .muted {
  color: var(--beige);
  opacity: 1;
}


/* Ajuste definitivo: subtítulo de Contacto exactamente igual que el título (var(--beige)) */
.contact-hero .muted {
  color: var(--beige) !important;
  opacity: 1 !important;
}


/* Ajuste hero: AGAME más grande y visualmente alineado con ABOGADOS */
.hero-logo{
  width:min(210px,38vw);
  margin:0.4rem auto 0.1rem;
}

.hero-title-split{
  margin:0.8rem 0 0.4rem;
  line-height:1.03;
  text-align:center;
}

.hero-title-split .hero-main{
  font-size:clamp(3.9rem,8vw,5.8rem);
  letter-spacing:0.14rem;
  font-weight:600;
}

.hero-title-split .hero-subline{
  letter-spacing:0.32rem;
}

/* === Marca AGAME monograma + texto en dos líneas === */
.brand{
  display:flex;
  align-items:center;
  gap:10px;
}

.brand-logo{
  width:30px;
  height:30px;
  object-fit:contain;
}

.brand-text{
  display:flex;
  flex-direction:column;
  line-height:1.05;
  text-transform:uppercase;
  letter-spacing:0.10em;
  color:var(--beige);
  font-size:1.05rem;
align-items:center;text-align:center;}

.brand-text .brand-sub{
  text-transform:none;
  font-weight:400;
  font-size:0.76rem;
  letter-spacing:0.08em;
  margin-top:1px;
}

/* === Menú superior premium y compacto === */
#menu{
  display:flex;
  align-items:center;
  gap:8px;
}

#menu a, #menu button.nav-link{
  text-transform:uppercase;
  letter-spacing:0.14em;
  font-weight:500;
  font-size:0.8rem;
  color:var(--beige);
  padding:4px 6px;
  border:none;
  background:transparent;
  opacity:0.9;
  transition:opacity 0.2s ease;
}

#menu a:hover,
#menu a[aria-current="page"]{
  opacity:1;
}

/* Bloque teléfono + botón diferenciado del menú */
.nav-cta{
  display:flex;
  align-items:center;
  gap:10px;
  margin-left:16px;
}

/* === Menú móvil premium (lista vertical elegante) === */
@media (max-width: 900px){
  .site-header{
    padding:0.6rem 0;
  }

  #menu{
    flex-direction:column;
    align-items:stretch;
    gap:6px;
  }

  #menu a, #menu button.nav-link{
    width:100%;
    border-radius:6px;
    padding:10px 12px;
    font-size:0.9rem;
    letter-spacing:0.10em;
    border:1px solid rgba(255,255,255,0.10);
  }

  #menu a:hover,
  #menu a[aria-current="page"],
  #menu button.nav-link:hover,
  #menu button.nav-link[aria-current="page"]{
    background:rgba(255,255,255,0.04);
    border-color:rgba(255,255,255,0.20);
  }

  .nav-cta{
    gap:6px;
  }
}






@media (max-width: 640px){
  .services-grid{
    grid-template-columns:1fr;
    max-width:100%;
  }
  .service-card{
    width:100%;
    box-sizing:border-box;
    margin:0 auto;
  }
  body{
    overflow-x:hidden;
  }
}


/* === Etiqueta de área en "Todos los servicios" === */
.todos-servicios .svc-card .svc-area{
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  margin-top:0.15rem;
  margin-bottom:0.35rem;
  padding:0.12rem 0.65rem;
  border-radius:999px;
  border:1px solid rgba(231,221,199,0.75);
  background:rgba(231,221,199,0.18);
  font-size:0.72rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--ink);
  opacity:.95;
  height:1.9em;
  align-self:flex-start;      /* que no se estire a todo el ancho */
  width:auto;
  max-width:100%;
}

/* Botón "Consultar" en tarjeta Plantéanos tu caso */
.svc-card.svc-cta .btn-primary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0.45rem 1.1rem;
  border-radius:999px;
  border:1px solid rgba(231,221,199,0.98);
  background:var(--beige-light);
  color:var(--navy);
  font-weight:600;
  font-size:0.9rem;
  letter-spacing:.02em;
}
.svc-card.svc-cta .btn-primary:hover{
  border-color:rgba(255,255,255,0.9);
  background:rgba(231,221,199,0.92);
  color:var(--navy);
}

/* === Grid fija de servicios (3 columnas) en "Todos los servicios" === */
.todos-servicios .section-preview-grid.servicios-grid{
  grid-template-columns: repeat(3,minmax(0,1fr));
}

@media (max-width: 1024px){
  .todos-servicios .section-preview-grid.servicios-grid{
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
}

@media (max-width: 640px){
  .todos-servicios .section-preview-grid.servicios-grid{
    grid-template-columns: 1fr;
  }
}

/* Mostrar icono de teléfono también en móvil */
@media (max-width:900px){
  .nav-cta .tel{
    display:inline-flex;
    align-items:center;
  }
}


/* Ajuste leve para las pestañas de 'Todos los servicios' */
.services-tabs.services-tabs--standalone{
  margin-top:1.75rem;
}


/* === Refinado de etiquetas de área en "Todos los servicios" === */
.svc-area{
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  margin-top:0.15rem;
  margin-bottom:0.35rem;
  padding:0.12rem 0.65rem;
  border-radius:999px;
  border:1px solid rgba(231,221,199,0.75);
  background:rgba(231,221,199,0.18);
  font-size:0.72rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--ink);
  opacity:.95;
  height:1.9em;
  align-self:flex-start;      /* que no se estire a todo el ancho */
  width:auto;
  max-width:100%;
}

/* === Botones premium globales === */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:0.35rem;
  padding:0.55rem 1.4rem;
  border-radius:999px;
  border:1px solid transparent;
  font-size:0.9rem;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-decoration:none;
  cursor:pointer;
  background:transparent;
  color:var(--beige-light);
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
}

.btn-primary{
  border-color:rgba(231,221,199,0.9);
  background:linear-gradient(135deg, rgba(231,221,199,0.18), rgba(231,221,199,0.08));
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}

.btn-primary:hover{
  transform:translateY(-1px);
  background:linear-gradient(135deg, rgba(231,221,199,0.26), rgba(231,221,199,0.14));
  box-shadow:0 16px 42px rgba(0,0,0,.55);
}

.btn-ghost{
  border-color:rgba(231,221,199,0.55);
  background:transparent;
}

.btn-ghost:hover{
  transform:translateY(-1px);
  background:rgba(231,221,199,0.08);
  box-shadow:0 12px 34px rgba(0,0,0,.45);
}

.btn-outline{
  border-color:rgba(231,221,199,0.8);
  background:transparent;
}

.btn-outline:hover{
  transform:translateY(-1px);
  background:rgba(231,221,199,0.10);
  box-shadow:0 12px 34px rgba(0,0,0,.5);
}

.btn-contact{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-top:0.4rem;
  padding:0.3rem 1.2rem;
  width:auto;
  min-width:0;
}

/* Asegurar que el botón de enviar en formularios ocupa ancho correcto en móvil */
@media (max-width:640px){
  .btn-contact{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-top:0.4rem;
  padding:0.3rem 1.2rem;
  width:auto;
  min-width:0;
}
}


/* Ajuste tabs Servicios en móvil: 2x2, sin desbordes horizontales */
@media (max-width: 640px){
  .services-tabs.tabmenu{
    flex-wrap:wrap;
    justify-content:center;
    row-gap:.45rem;
  }
  .services-tabs.tabmenu .tabbtn{
    flex:0 1 calc(50% - .5rem);
    white-space:normal;
  }
}


/* Ajuste específico botón "Contactar" en cabecera */
.btn-nav-contact{
  padding:0.25rem 0.9rem;
  font-size:0.78rem;
  border-radius:999px;
  border-width:1px;
  box-shadow:none;
}

/* Hover más sutil para el botón de cabecera */
.btn-nav-contact:hover{
  transform:translateY(-1px);
  background:rgba(231,221,199,0.06);
  box-shadow:0 6px 18px rgba(0,0,0,0.35);
}

/* Ajuste específico botón "Enviar consulta" en contacto */
.btn-contact{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-top:0.4rem;
  padding:0.3rem 1.2rem;
  width:auto;
  min-width:0;
}

@media (max-width: 640px){
  .hero-cta{
    display:grid;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    gap:0.75rem;
    max-width:100%;
    justify-content:center;
    align-items:center;
  }
  .hero-cta .btn{
    width:100%;
    padding:0.5rem 0.4rem;
    font-size:0.82rem;
    text-align:center;
    white-space:normal;
  }
}


/* Fuerza separación mínima SOLO en inicio */
.home-page .svc-card h3 {
    margin-bottom: 0.02rem !important;
}

.home-page .svc-card p {
    margin-top: 0.02rem !important;
}



/* Styles moved from blog.html */
.card,
    .service-card,
    .svc-card,
    .section-preview-grid .preview-card,
    .folder-card,
    .service-item-card,
    .blog-card,
    .contact-card {
      background: #faf5ee !important;
      border-color: rgba(15,23,42,0.18) !important;
      color: #0b1520 !important;
    }
    .card p,
    .service-card p,
    .svc-card p,
    .section-preview-grid .preview-card p,
    .blog-card p,
    .contact-card p {
      color: #0b1520 !important;
    }
    .section-preview-grid .preview-card .muted {
      color: rgba(15,23,42,0.7) !important;
    }
    .card:hover,
    .service-card:hover,
    .svc-card:hover,
    .section-preview-grid .preview-card:hover,
    .folder-card:hover,
    .service-item-card:hover,
    .blog-card:hover,
    .contact-card:hover {
      background: #faf5ee !important;
      border-color: rgba(15,23,42,0.22) !important;
      color: #0b1520 !important;
    }


/* Styles moved from index.html */
.firma-flex {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 80px;
        margin: 50px 0;
      }
      .firma-centered {
        max-width: 340px;
        width: 100%;
        height: auto;
        border-radius: 6px;
        box-shadow: 0 8px 22px rgba(0,0,0,0.22);
      }
      @media (max-width: 768px) {
        .firma-flex {
          flex-direction: column;
          gap: 24px;
        }
        .firma-centered {
          max-width: 100%;
        }
      }


/* Styles moved from index.html */
/* Tarjetas beige corporativas */
    .card,
    .service-card,
    .svc-card,
    .section-preview-grid .preview-card,
    .folder-card,
    .service-item-card,
    .blog-card,
    .contact-card {
      background: #faf5ee !important;
      border-color: rgba(15,23,42,0.18) !important;
      color: #0b1520 !important;
    }

    .card p,
    .service-card p,
    .svc-card p,
    .section-preview-grid .preview-card p,
    .blog-card p,
    .contact-card p {
      color: #0b1520 !important;
    }

    .section-preview-grid .preview-card .muted {
      color: rgba(15,23,42,0.7) !important;
    }

    .card:hover,
    .service-card:hover,
    .svc-card:hover,
    .section-preview-grid .preview-card:hover,
    .folder-card:hover,
    .service-item-card:hover,
    .blog-card:hover,
    .contact-card:hover {
      background: #faf5ee !important;
      border-color: rgba(15,23,42,0.22) !important;
      color: #0b1520 !important;
    }

    /* Imágenes inicio escritorio/móvil */
    .firma-flex.firma-desktop {
      display: flex;
      justify-content: center;
      gap: 140px;
      align-items: center;
      margin: 50px 0;
    }

    .firma-centered {
      max-width: 330px;
      height: auto;
      border-radius: 6px;
      box-shadow: 0 8px 22px rgba(0,0,0,0.20);
    }

    .firma-mobile-top,
    .firma-mobile-bottom {
      display: none;
    }

    .firma-mobile-img {
      width: 100%;
      max-width: 420px;
      margin: 0 auto;
      display: block;
      border-radius: 6px;
      box-shadow: 0 8px 22px rgba(0,0,0,0.20);
    }

    @media (max-width: 768px) {
      .firma-flex.firma-desktop {
        display: none !important;
      }

      .firma-mobile-top,
      .firma-mobile-bottom {
        display: block;
        margin: 24px auto;
        padding: 0 1.4rem;
      }
    }


/* Styles moved from services.html */
.svc-icon {
      display: inline-block;
      margin-right: 0.45em;
      font-size: 1.05em;
      transform: translateY(1px);
    }



/* === HERO LAYOUT OVERRIDE (CENTRADO Y CONTENIDO DENTRO DEL ANCHO) === */
.hero.centered {
  min-height: 88vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 40px 20px;
}

.hero-sub {
  max-width: 960px;
  width: 100%;
  margin: 15px auto 24px auto;
  padding: 0 16px;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--beige-2);
}

/* Ajuste específico para pantallas pequeñas */
@media (max-width: 768px) {
  .hero.centered {
    min-height: 90vh;
    padding: 24px 12px;
  }
  .hero-sub {
    max-width: 100%;
    font-size: 0.95rem;
    line-height: 1.45;
  }
}

/* === FORMULARIO CONTACTO: CHECKBOX EN LÍNEA === */
label.checkbox {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
}

label.checkbox input[type="checkbox"] {
  margin-top: 4px;
  flex-shrink: 0;
}



/* === OVERRIDE CHECKBOX RGPD: TEXTO A LA DERECHA, SIN DESBORDAR === */
label.checkbox {
  display: block;
  cursor: pointer;
}

label.checkbox input[type="checkbox"] {
  display: inline-block;
  margin-right: 8px;
  margin-top: 0;
  vertical-align: middle;
}



/* === CORRECCIÓN DEFINITIVA CHECKBOX RGPD === */
label.checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

label.checkbox input[type="checkbox"] {
  width: auto;
  min-width: auto;
  max-width: none;
  display: inline-block;
  margin: 0 8px 0 0;
  padding: 0;
  flex-shrink: 0;
}

input[type="checkbox"]{
  width: auto;
  padding: 0;
  border-radius: 4px;
}



/* === Margen horizontal para servicios en móvil, similar al blog === */
@media (max-width: 768px){
  .service-cards {
    grid-template-columns: 1fr;
    margin-left: 0;
    margin-right: 0;
  }
  .service-cards .svc-card {
    margin: 0 .35rem;
  }
}



/* === JUSTIFICAR TEXTO EN SERVICIOS Y BLOG === */
.hero-landing p,
.hero-landing .premium-block p,
section.text p,
section.container.text p {
  text-align: justify;
}

/* === MARGEN ADICIONAL EN ARTÍCULOS DE SERVICIOS EN MÓVIL === */
@media (max-width: 768px){
  .hero-landing,
  section.container.text {
    padding-left: 1.4rem;
    padding-right: 1.4rem;
  }
}



/* === JUSTIFICAR TEXTO SOBRE EL DESPACHO (FIX DEFINITIVO) === */
.about-text p,
.about-text div,
.about-text span,
section.container.about p {
    text-align: justify !important;
}



/* === FIX: TARJETAS INTERNAS DE ARTÍCULOS ALINEADAS A LA IZQUIERDA === */
.article-cards .svc-card p,
.service-article .svc-card p,
.svc-card p {
    text-align: left !important;
}

/* FIX article highlight cards left align */
.highlight-card p { text-align:left !important; }

/* Reduce navbar height by ~30% */
.navbar, header, .top-nav {
    height: 60px !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}
.navbar-brand .brand-logo{
    height:40px !important;
    width:40px !important;
}
.navbar-brand .brand-text{
    font-size:1.2rem !important;
    line-height:1.2rem !important;
}
.navbar-brand .brand-sub{
    font-size:0.8rem !important;
    line-height:0.8rem !important;
}


/* Center nav items after height reduction */
.nav{
  height:56px !important;
  align-items:center !important;
}
#menu > a{
  display:flex !important;
  align-items:center !important;
  height:56px !important;
}
.nav-link{
  display:flex !important;
  align-items:center !important;
  height:56px !important;
}


/* === Mobile header & overlay menu === */
@media (max-width:900px){
  .nav-cta{
    display:none !important;
  }
  .site-header .container.nav{
    gap:8px;
  }
  #hamburger{
    margin-left:auto;
  }

  /* Fullscreen overlay menu */
  #menu{
    display:none;
    position:fixed;
    inset:0;
    padding:96px 24px 32px;
    background:rgba(5,15,25,0.97);
    border:none;
    box-shadow:none;
    flex-direction:column;
    align-items:flex-start;
    justify-content:flex-start;
    gap:18px;
    opacity:0;
    visibility:hidden;
    transform:translateY(6px);
    transition:opacity .22s ease, transform .22s ease, visibility .22s ease;
    z-index:900;
  }
  html.nav-open #menu{
    display:flex;
    opacity:1;
    visibility:visible;
    transform:none;
  }

  #menu .menu-close{
    align-self:flex-end;
    background:transparent;
    border:none;
    color:#f5efe0;
    font-size:1.6rem;
    line-height:1;
    padding:4px;
    margin-bottom:12px;
  }

  #menu a,
  #menu button.nav-link{
    display:block;
    width:100%;
    text-align:left;
    padding:8px 4px;
    font-size:1.02rem;
    letter-spacing:0.06em;
    background:transparent;
    border:none;
    border-radius:0;
  }

  #menu .nav-dropdown-menu{
    position:static;
    transform:none;
    box-shadow:none;
    border:none;
    padding-top:0;
    background:transparent;
    gap:6px;
  }
}


/* === Centrar submenús dentro del overlay móvil === */
@media (max-width: 900px){
  #menu .nav-dropdown-menu{
      width: 100%;
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      text-align: center !important;
      padding: 0 !important;
      margin: 0 !important;
      gap: 10px !important;
  }

  #menu .nav-dropdown-menu a{
      width: auto !important;
      text-align: center !important;
      padding: 6px 0 !important;
  }

  #menu .nav-link{
      width: 100%;
      text-align: center !important;
  }
}


/* === Ocultar la X en escritorio, mostrar solo en móvil === */
.menu-close{
    display:none !important;
}
@media (max-width: 900px){
    .menu-close{
        display:block !important;
    }
}


/* === Footer opaco sin columnas visibles en todo el ancho === */
.site-footer{
  position:relative;
  z-index:1;
}
.site-footer::before{
  content:"";
  position:absolute;
  inset:0;
  background:#0b1520;
  z-index:-1;
}


/* ===== Ajustar espacios en la portada móvil sin afectar escritorio ===== */
@media (max-width: 900px){

  /* Reducir espacio superior del hero */
  .hero-section,
  .hero,
  .homepage-hero {
      padding-top: 20px !important;
  }

  /* Reducir espacio bajo el logo */
  .hero-logo,
  .homepage-hero img {
      margin-top: 10px !important;
      margin-bottom: 10px !important;
  }

  /* Reducir distancia entre texto y botones */
  .hero-text{
      margin-top: 10px !important;
      margin-bottom: 15px !important;
  }

  /* Reducir distancia entre botones y las secciones siguientes */
  .hero-buttons{
      margin-bottom: 20px !important;
  }

  /* Ajuste general de secciones para evitar huecos excesivos */
  section{
      padding-top: 20px !important;
  }
}


/* === Ajuste fuerte de espacios en hero solo para móvil === */
@media (max-width: 900px){
  .hero.centered{
    min-height: auto !important;
    padding: 16px 16px 24px !important;
    justify-content: flex-start !important;
  }
  .hero-logo{
    margin-top: 8px !important;
    margin-bottom: 8px !important;
    max-width: 70% !important;
  }
  .hero-sub{
    margin: 8px auto 12px auto !important;
  }
  .hero-cta{
    margin-bottom: 16px !important;
  }
}


/* ==== Arreglar checkbox en móvil para que quede en una sola línea ==== */
@media (max-width: 900px){
    .form-checkbox{
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        white-space: nowrap !important;
        width: 100% !important;
    }

    .form-checkbox input[type="checkbox"]{
        flex-shrink: 0 !important;
        margin: 0 !important;
    }

    .form-checkbox label{
        white-space: nowrap !important;
        line-height: 1.3 !important;
    }
}


/* ==== Override definitivo checkbox móvil: tick + texto en una sola línea ==== */
@media (max-width: 900px){
  label.checkbox{
    display:flex !important;
    align-items:center !important;
    gap:6px !important;
    white-space:nowrap !important;
    font-size:0.85rem !important;
  }
  label.checkbox input[type="checkbox"]{
    flex-shrink:0 !important;
    margin:0 6px 0 0 !important;
  }
}