/* ============ TOKENS ============ */
  :root{
    --navy:#0f2b46;
    --navy-dark:#0a1d30;
    --navy-soft:#173a5e;
    --gray-bg:#DDE2E7;
    --paper:#F4F1EA;
    --whatsapp:#2D6A35;
    --whatsapp-dark:#2e774a;
    --brass:#996515;
    --brass-light:#a49c86;
    --ink:#1c232c;
    --ink-soft:#4c5b6b;
    --white:#F4F1EA;
    --line:rgba(15,43,70,.14);
    --shadow:0 20px 45px -20px rgba(10,29,48,.35);
    --font-display:'Playfair Display', Georgia, serif;
    --font-body:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono:'JetBrains Mono', 'Courier New', monospace;
    --radius:2px;
    --container:1180px;
  }

  *,*::before,*::after{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important;}
  }
  body{
    margin:0;
    font-family:var(--font-body);
    color:var(--ink);
    background:var(--paper);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  img{max-width:100%;display:block;}
  a{color:inherit;text-decoration:none;}
  ul{list-style:none;margin:0;padding:0;}
  h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:1.15;margin:0;color:var(--navy);}
  p{margin:0;}
  button{font-family:inherit;cursor:pointer;}
  :focus-visible{outline:2px solid var(--brass);outline-offset:3px;}

  .container{max-width:var(--container);margin:0 auto;padding:0 24px;}
  .eyebrow{
    display:inline-flex;align-items:center;gap:10px;
    font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
    color:var(--brass);
  }
  .eyebrow::before{content:"";width:22px;height:1px;background:var(--brass);display:inline-block;}

  /* ============ SELLO / STAMP DEVICE ============ */
  .sello{
    --size:74px;
    width:var(--size);height:var(--size);
    border-radius:50%;
    border:1px dashed var(--brass);
    display:flex;align-items:center;justify-content:center;
    position:relative;flex-shrink:0;
  }
  .sello::after{
    content:"";
    position:absolute;inset:6px;
    border-radius:50%;
    border:1px solid rgba(176,141,87,.45);
  }
  .sello svg{width:34%;height:34%;stroke:var(--brass);}

  /* ============ HEADER ============ */
  .site-header{
    position:sticky;top:0;z-index:200;
    background:rgba(251,252,253,.92);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
    .brand-text {
      display: flex;
      flex-direction: column;
      gap: 4px; 
      
    }


    .brand-text strong,
    .brand-text span {
      line-height: 1.2;
    }
  }
  .nav-row{
    display:flex;align-items:center;justify-content:space-between;
    height:76px;
  }
  .brand{display:flex;align-items:center;gap:12px;}
  .brand-mark{
    width:38px;height:38px;border-radius:50%;
    border:1px solid var(--navy);
    display:flex;align-items:center;justify-content:center;
  }
  .brand-mark svg{width:18px;height:18px;stroke:var(--navy);}
  .brand-text{display:flex;flex-direction:column;line-height:1.1;}
  .brand-text strong{font-family:var(--font-display);font-size:1.02rem;color:var(--navy);}
  .brand-text span{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);}

  .main-nav ul{display:flex;gap:34px;}
  .main-nav a{
    font-size:.9rem;color:var(--ink-soft);font-weight:500;
    position:relative;padding:6px 0;
  }
  .main-nav a::after{
    content:"";position:absolute;left:0;bottom:0;height:1px;width:0;
    background:var(--brass);transition:width .25s ease;
  }
  .main-nav a:hover::after,.main-nav a:focus-visible::after{width:100%;}

  .header-cta{
    display:flex;align-items:center;gap:14px;
  }
  .btn{
    display:inline-flex;align-items:center;gap:9px;
    padding:12px 22px;font-size:.86rem;font-weight:600;
    border-radius:var(--radius);border:1px solid transparent;
    transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
    white-space:nowrap;
  }
  .btn svg{width:17px;height:17px;}
  .btn-primary{background:var(--whatsapp);color:#fff;}
  .btn-primary:hover{background:var(--whatsapp-dark);transform:translateY(-1px);box-shadow:0 10px 22px -10px rgba(37,211,102,.6);}
  .btn-outline{border-color:var(--navy);color:var(--navy);}
  .btn-outline:hover{background:var(--navy);color:#fff;}
  .btn-ghost-light{border-color:rgba(255,255,255,.4);color:#fff;}
  .btn-ghost-light:hover{background:rgba(255,255,255,.12);}

  .nav-toggle{
    display:none;background:none;border:1px solid var(--line);
    width:44px;height:44px;border-radius:var(--radius);
    align-items:center;justify-content:center;
  }
  .nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{
    content:"";display:block;width:20px;height:2px;background:var(--navy);
    position:relative;transition:transform .25s ease, opacity .25s ease;
  }
  .nav-toggle span::before{position:absolute;top:-7px;}
  .nav-toggle span::after{position:absolute;top:7px;}
  .nav-toggle.is-active span{background:transparent;}
  .nav-toggle.is-active span::before{transform:translateY(7px) rotate(45deg);}
  .nav-toggle.is-active span::after{transform:translateY(-7px) rotate(-45deg);}

  /* ============ HERO ============ */

  .hero-img{
  display:block;
  width:100%;
  height:200x;      /* ajusta este número a tu gusto */
  object-fit:cover;
  object-position:center;
}
  .hero{
    background:linear-gradient(180deg,var(--navy) 0%,var(--navy-dark) 100%);
    color:#fff;position:relative;overflow:hidden;
    padding:76px 0 100px;
  }
  .hero::before{
    content:"";position:absolute;inset:0;
    background-image:radial-gradient(circle at 82% 18%, rgba(176,141,87,.16), transparent 45%);
    pointer-events:none;
  }
  .hero-grid{
    position:relative;z-index:1;
    display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center;
  }
  .hero-eyebrow{color:var(--brass-light);}
  .hero-eyebrow::before{background:var(--brass-light);}
  .hero h1{
    color:#fff;font-size:clamp(2.1rem,4vw,3.2rem);margin-top:18px;
    max-width:16ch;
  }
  .hero h1 em{color:var(--brass-light);font-style:normal;}
  .hero-sub{
    margin-top:22px;font-size:1.05rem;color:rgba(255,255,255,.78);
    max-width:46ch;
  }
  .hero-ctas{display:flex;gap:16px;margin-top:34px;flex-wrap:wrap;}
  .hero-badges{
    display:flex;gap:28px;margin-top:52px;flex-wrap:wrap;
  }
  .hero-badge{display:flex;flex-direction:column;gap:4px;}
  .hero-badge strong{font-family:var(--font-display);font-size:1.5rem;color:#fff;}
  .hero-badge span{font-size:.76rem;color:rgba(255,255,255,.6);letter-spacing:.02em;}

  .hero-signature{
    position:relative;display:flex;flex-direction:column;align-items:center;gap:22px;
  }
  .signature-card{
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.14);
    border-radius:var(--radius);
    padding:34px 28px 28px;
    width:100%;
  }
  .signature-card .card-label{
    font-family:var(--font-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
    color:rgba(255,255,255,.55);display:flex;justify-content:space-between;margin-bottom:20px;
  }
  .sig-path{
    fill:none;stroke:var(--brass-light);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
    stroke-dasharray:900;stroke-dashoffset:900;
    animation:draw 2.6s ease forwards .3s;
  }
  @keyframes draw{to{stroke-dashoffset:0;}}
  .signature-card .card-foot{
    display:flex;justify-content:space-between;align-items:center;margin-top:18px;
    padding-top:16px;border-top:1px dashed rgba(255,255,255,.2);
    font-family:var(--font-mono);font-size:.72rem;color:rgba(255,255,255,.55);
  }
  .card-foot .ok{color:var(--brass-light);}

  /* ============ SECTION SHELL ============ */
  section{padding:96px 0;}
  .section-head{
    max-width:640px;margin:0 auto 56px;text-align:center;
  }
  .section-head h2{font-size:clamp(1.7rem,3vw,2.3rem);margin-top:16px;}
  .section-head p{margin-top:16px;color:var(--ink-soft);font-size:1.02rem;}
  .bg-soft{background:var(--gray-bg);}

  /* ============ SERVICIOS ============ */
  .servicios-grid{
    display:grid;grid-template-columns:repeat(3,1fr);gap:2px;
    background:var(--line);border:1px solid var(--line);
  }
  .servicio-card{
    background:var(--paper);padding:38px 32px;
    display:flex;flex-direction:column;gap:16px;
    transition:background .25s ease;
  }
  .servicio-card:hover{background:#fff;}
  .servicio-icon{
    width:46px;height:46px;border-radius:50%;
    background:var(--navy);display:flex;align-items:center;justify-content:center;
  }
  .servicio-icon svg{width:20px;height:20px;stroke:var(--brass-light);}
  .servicio-card h3{font-size:1.12rem;}
  .servicio-card p{color:var(--ink-soft);font-size:.94rem;}

  /* ============ PROCESO ============ */
  .proceso-list{
    display:grid;grid-template-columns:repeat(4,1fr);gap:0;
    counter-reset:step;
    position:relative;
  }
  .proceso-list::before{
    content:"";position:absolute;top:26px;left:6%;right:6%;height:1px;
    background:repeating-linear-gradient(90deg, var(--brass) 0 8px, transparent 8px 16px);
  }
  .proceso-item{padding:0 22px;position:relative;}
  .proceso-num{
    font-family:var(--font-mono);font-size:.9rem;color:var(--navy);
    width:52px;height:52px;border-radius:50%;background:var(--paper);
    border:1px solid var(--navy);display:flex;align-items:center;justify-content:center;
    position:relative;z-index:1;margin-bottom:22px;
  }
  .proceso-item img {
    
    margin-bottom: 16px; /* Despeja el texto de abajo */
    border-radius: 50px 50px 0 0; /* Bordes redondeados solo arriba (izq y der) */
    object-fit: cover;
  }
  .proceso-item h3{font-size:1.09rem;margin-bottom:10px;}
  .proceso-item p{color:var(--ink-soft);font-size:.9rem;}

  /* ============ SOBRE MÍ ============ */
  .sobre-grid{
    display:grid;grid-template-columns:.85fr 1.15fr;gap:64px;align-items:center;
  }
  .sobre-visual{
    background:var(--navy);border-radius:var(--radius);
    padding:40px;position:relative;color:#fff;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
    aspect-ratio:4/5;
  }
  .sobre-visual .sello{width:130px;height:130px;border-color:var(--brass-light);}
  .sobre-visual .sello svg{stroke:var(--brass-light);width:38%;height:38%;}
  .sobre-visual span{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.6);text-align:center;}
  .sobre-cred{margin-top:28px;display:flex;flex-direction:column;gap:14px;width:100%;}
  .cred-row{display:flex;justify-content:space-between;font-size:.78rem;border-top:1px solid rgba(255,255,255,.16);padding-top:10px;color:rgba(255,255,255,.75);}

  .sobre-copy h2{font-size:clamp(1.7rem,3vw,2.2rem);}
  .sobre-copy p{margin-top:18px;color:var(--ink-soft);}
  .cred-list{margin-top:28px;display:grid;gap:16px;}
  .cred-list li{
    display:flex;gap:14px;align-items:flex-start;font-size:.95rem;color:var(--ink);
  }
  .cred-list svg{width:20px;height:20px;stroke:var(--brass);flex-shrink:0;margin-top:2px;}

  /* ============ FAQ ============ */
  .faq-list{max-width:820px;margin:0 auto;}
  .faq-item{border-bottom:1px solid var(--line);}
  .faq-q{
    width:100%;display:flex;justify-content:space-between;align-items:center;gap:20px;
    background:none;border:none;padding:26px 4px;text-align:left;
    font-family:var(--font-display);font-size:1.08rem;color:var(--navy);
  }
  .faq-q .plus{
    width:26px;height:26px;border:1px solid var(--brass);border-radius:50%;
    flex-shrink:0;position:relative;transition:transform .3s ease;
  }
  .faq-q .plus::before,.faq-q .plus::after{
    content:"";position:absolute;background:var(--brass);
    top:50%;left:50%;transform:translate(-50%,-50%);
  }
  .faq-q .plus::before{width:10px;height:1px;}
  .faq-q .plus::after{width:1px;height:10px;transition:opacity .25s ease;}
  .faq-item.is-open .faq-q .plus{transform:rotate(180deg);}
  .faq-item.is-open .faq-q .plus::after{opacity:0;}
  .faq-a{
    max-height:0;overflow:hidden;transition:max-height .35s ease;
  }
  .faq-a-inner{padding:0 4px 28px;color:var(--ink-soft);font-size:.96rem;max-width:68ch;}

  /* ============ CONTACTO ============ */
  .contacto{
    background:linear-gradient(180deg,var(--navy-dark),var(--navy));
    color:#fff;
  }
  .contacto-grid{
    display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start;
  }
  .contacto h2{color:#fff;font-size:clamp(1.8rem,3.4vw,2.4rem);max-width:14ch;}
  .contacto-sub{margin-top:18px;color:rgba(255,255,255,.72);max-width:44ch;}
  .contacto-ctas{margin-top:32px;display:flex;flex-direction:column;gap:14px;max-width:360px;}
  .contacto-ctas .btn{justify-content:center;width:100%;}
  .info-card{
    background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.15);
    border-radius:var(--radius);padding:34px;
  }
  .info-row{display:flex;gap:16px;padding:16px 0;border-bottom:1px dashed rgba(255,255,255,.18);}
  .info-row:last-child{border-bottom:none;}
  .info-row svg{width:20px;height:20px;stroke:var(--brass-light);flex-shrink:0;margin-top:2px;}
  .info-row strong{display:block;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.5);font-family:var(--font-mono);margin-bottom:4px;}
  .info-row span{font-size:.95rem;color:#fff;}

  /* ============ FOOTER ============ */
  footer{background:var(--navy-dark);color:rgba(255,255,255,.6);padding:44px 0;}
  .footer-row{
    display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:18px;
    font-size:.82rem;
  }
  .footer-row .brand-text strong{
  
  display: block;
  margin-bottom: 6px;color:#fff;}
  .footer-legal{max-width:520px;font-size:.78rem;line-height:1.6;color:rgba(255,255,255,.4);margin-top:18px;}

  /* ============ WHATSAPP FLOAT ============ */
  .wa-float{
    position:fixed;bottom:26px;right:26px;z-index:300;
    width:60px;height:60px;border-radius:50%;
    background:var(--whatsapp);
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 14px 30px -8px rgba(37,211,102,.55);
    animation:wa-pulse 2.8s ease-in-out infinite;
  }
  .wa-float svg{width:28px;height:28px;fill:#fff;}
  .wa-float:hover{animation-play-state:paused;transform:scale(1.06);}
  @keyframes wa-pulse{
    0%,100%{box-shadow:0 14px 30px -8px rgba(37,211,102,.55);}
    50%{box-shadow:0 14px 30px -8px rgba(37,211,102,.85), 0 0 0 10px rgba(37,211,102,.12);}
  }

  /* ============ REVEAL ============ */
  .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease, transform .7s ease;}
  .reveal.is-visible{opacity:1;transform:none;}

  /* ============ RESPONSIVE ============ */
  @media (max-width:980px){
    .hero-grid{grid-template-columns:1fr;}
    .hero-signature{order:-1;}
    .hero-img{height:130px;}
    .servicios-grid{grid-template-columns:repeat(2,1fr);}
    .proceso-list{grid-template-columns:repeat(2,1fr);row-gap:40px;}
    .proceso-list::before{display:none;}
    .sobre-grid{grid-template-columns:1fr;}
    .sobre-visual{aspect-ratio:auto;padding:32px;}
    .contacto-grid{grid-template-columns:1fr;}
  }
  @media (max-width:760px){
    .main-nav{
      position:fixed;inset:76px 0 0 0;background:var(--white);
      transform:translateY(-8px);opacity:0;pointer-events:none;
      transition:opacity .25s ease, transform .25s ease;
      border-top:1px solid var(--line);
      overflow-y:auto;
    }
    .main-nav.is-open{opacity:1;transform:none;pointer-events:auto;}
    .main-nav ul{flex-direction:column;gap:0;padding:8px 24px 24px;}
    .main-nav a{display:block;padding:16px 0;border-bottom:1px solid var(--line);}
    .nav-toggle{display:flex;}
    .header-cta .btn-outline{display:none;}
    .servicios-grid{grid-template-columns:1fr;}
    .proceso-list{grid-template-columns:1fr;}
    section{padding:64px 0;}
    .wa-float{width:54px;height:54px;bottom:18px;right:18px;}
  }

  /* Banner de ancho completo */
.banner-full {
  width: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
  display: block;
  line-height: 0; /* Elimina cualquier espacio en blanco debajo de la imagen */
}

.banner-full img {
  width: 100%;
  height: 280px; /* Altura adaptable en pantallas grandes */
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Ajuste responsive para celulares */
@media (max-width: 768px) {
  .banner-full img {
    height: 180px; /* Altura ajustada para no ocupar demasiado espacio vertical en móvil */
  }
}