:root{
  --ink:#0b0b0b;
  --panel:#141311;
  --line:rgba(194,153,75,.28);
  --gold:#c2994b;
  --gold-hi:#dcb867;
  --bone:#ede7da;
  --muted:#a59e90;
  --display:"Cinzel","Trajan Pro",Georgia,serif;
  --body:"Lora",Georgia,"Times New Roman",serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--ink);color:var(--bone);font-family:var(--body);font-size:17px;line-height:1.7}
a{color:inherit}
:focus-visible{outline:2px solid var(--gold-hi);outline-offset:3px}
.wrap{max-width:1160px;margin:0 auto;padding:0 28px}
section{padding:110px 0}
h2{font-family:var(--display);font-weight:500;font-size:clamp(28px,4vw,42px);line-height:1.2;letter-spacing:.02em;color:var(--bone);max-width:20ch}
.lead{color:var(--muted);max-width:52ch;margin-top:18px}
.btn{display:inline-block;font-family:var(--display);font-weight:600;font-size:15px;letter-spacing:.06em;text-decoration:none;padding:15px 30px;border:1px solid var(--gold);background:var(--gold);color:#0b0b0b;cursor:pointer;transition:background .2s,color .2s}
.btn:hover{background:var(--gold-hi);border-color:var(--gold-hi)}
.btn.ghost{background:transparent;color:var(--gold)}
.btn.ghost:hover{background:var(--gold);color:#0b0b0b}

/* ============ HEADER HONORIS CAUSA ============ */
.site-header{position:relative;z-index:20;background:#050505;border-bottom:1px solid var(--line);min-height:145px;display:grid;grid-template-columns:1fr 3fr 1fr;align-items:center;padding:18px max(28px,calc((100vw - 1160px)/2));gap:24px}
.header-mark{width:96px;height:96px;display:grid;place-items:center;text-decoration:none;position:relative}
.header-mark img{display:block;width:100%;height:100%;object-fit:contain}
.header-center{text-align:center}.header-title{font-family:var(--display);font-size:clamp(17px,2vw,28px);line-height:1.2;color:var(--bone);letter-spacing:.03em}.header-title strong{display:block;color:var(--gold-hi);font-weight:600}.header-nav{display:flex;justify-content:center;gap:clamp(14px,2vw,30px);margin-top:17px;list-style:none}.header-nav>li{position:relative}.header-nav>li>a{position:relative;font-family:var(--display);font-size:12px;font-weight:600;text-decoration:none;color:var(--bone);transition:color .2s}.header-nav a:hover,.header-nav a[aria-current]{color:var(--gold-hi)}.header-nav>li>a[aria-current]::after{content:"";position:absolute;left:0;right:0;bottom:-8px;height:2px;background:var(--gold)}.nav-caret{display:inline-block;width:6px;height:6px;margin:0 0 3px 7px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg)}.nav-submenu{position:absolute;top:100%;left:-14px;z-index:35;display:none;min-width:220px;padding:8px 0;list-style:none;text-align:left;background:#080807;border:1px solid var(--line);border-top:2px solid var(--gold);box-shadow:0 12px 28px rgba(0,0,0,.35)}.nav-has-sub:hover>.nav-submenu,.nav-has-sub:focus-within>.nav-submenu{display:block}.header-nav .nav-submenu a{display:block;padding:10px 16px;font-size:13px;white-space:nowrap}.header-nav .nav-submenu a:hover{background:rgba(194,153,75,.1)}.nav-contact-details{display:none}.header-details{justify-self:end;display:grid;gap:5px;min-width:0;font-style:normal;font-size:12px;line-height:1.35;text-align:right;color:var(--bone)}.header-details a,.header-details p{min-width:0;overflow-wrap:anywhere;text-decoration:none}.header-details span{display:block;color:var(--gold);font-family:var(--display);font-size:10px;letter-spacing:.06em;text-transform:uppercase}.header-details a:hover{color:var(--gold-hi)}.menu-toggle{display:none}
@media(max-width:900px){
  .site-header{position:relative;grid-template-columns:54px minmax(0,1fr) 46px;gap:14px;min-height:84px;padding:12px 20px}
  .header-mark{width:52px;height:54px}
  .header-center{min-width:0;text-align:left}
  .header-details{display:none}
  .header-title{font-size:clamp(16px,3vw,22px);text-align:center;}
  .header-center nav{position:absolute;top:100%;left:0;right:0;z-index:30;background:#080807;border-bottom:1px solid var(--line);overflow:hidden;max-height:0;opacity:0;visibility:hidden;transform:translateY(-8px);transition:max-height .35s ease,opacity .25s ease,transform .25s ease,visibility .25s}
  .site-header.menu-open .header-center nav{max-height:min(85vh,760px);opacity:1;visibility:visible;overflow-x:hidden;overflow-y:auto;transform:translateY(0)}
  .header-nav{display:grid;gap:0;margin:0;padding:8px 22px 16px}
  .header-nav>li{border-bottom:1px solid rgba(194,153,75,.14)}
  .header-nav>li>a{display:block;width:100%;padding:12px 4px;font-size:16px}
  .header-nav>li>a[aria-current]::after{display:none}
  .header-nav .nav-submenu{position:static;display:block;min-width:0;padding:0 0 8px 12px;border:0;box-shadow:none;background:transparent}
  .header-nav .nav-submenu li{border:0}
  .header-nav .nav-submenu a{width:100%;padding:8px 14px;color:var(--muted);font-family:var(--body);font-size:14px;white-space:normal}
  .header-nav .nav-submenu a:hover{color:var(--bone);background:transparent}
  .nav-caret{transform:rotate(45deg);margin-left:9px}
  .header-nav .nav-contact-details{display:grid;gap:4px;border:0;padding:12px 4px 4px;color:var(--muted);font-size:14px;line-height:1.5}
  .header-nav .nav-contact-details a{padding:0;color:var(--bone);font-size:14px}
  .header-nav .nav-contact-details span{overflow-wrap:anywhere}
  .menu-toggle{width:44px;height:44px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;border:1px solid var(--line);border-radius:3px;background:transparent;color:var(--gold-hi);cursor:pointer}
  .menu-toggle span{display:block;width:20px;height:2px;border-radius:2px;background:currentColor;transition:transform .25s ease,opacity .2s ease}
  .menu-open .menu-toggle span:first-child{transform:translateY(8px) rotate(45deg)}
  .menu-open .menu-toggle span:nth-child(2){opacity:0}
  .menu-open .menu-toggle span:last-child{transform:translateY(-8px) rotate(-45deg)}
}
@media(max-width:520px){
  .site-header{grid-template-columns:46px minmax(0,1fr) 42px;gap:10px;min-height:74px;padding:10px 14px}
  .header-mark{width:46px;height:50px}
  .header-title{font-size:clamp(13px,4vw,17px);letter-spacing:.01em;line-height:1.18;text-align:center}
  .menu-toggle{width:40px;height:40px}
}
@media(prefers-reduced-motion:reduce){.header-center nav,.menu-toggle span{transition:none}}
/* ============ HERO ============ */
#hero{position:relative;min-height:88vh;display:flex;align-items:center;padding:120px 0 110px;background-color:var(--ink);
  background-image:
    linear-gradient(90deg,rgba(11,11,11,.96) 0%,rgba(11,11,11,.8) 42%,rgba(11,11,11,.2) 100%),
    url("../images/fondo_hero/fondo_hero.webp"),
    radial-gradient(ellipse at 78% 40%,rgba(194,153,75,.22),transparent 55%);
  background-size:cover;background-position:center right;background-repeat:no-repeat}
#hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:140px;background:linear-gradient(0deg,var(--ink),transparent)}
#hero .wrap{position:relative;z-index:1;width:100%}
#hero h1{font-family:var(--display);font-weight:500;font-size:clamp(36px,6vw,72px);line-height:1.12;letter-spacing:.02em;color:var(--gold-hi)}
#hero .sub{font-size:clamp(18px,2vw,22px);max-width:36ch;margin-top:26px;color:var(--bone)}
.hero-btns{display:flex;gap:16px;flex-wrap:wrap;margin-top:42px}

/* ============ NOSOTROS (intro) ============ */
#nosotros{padding:90px 0 100px}
.nos-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:80px;align-items:start}
.nos-grid p{max-width:56ch}
.nos-link{display:inline-block;margin-top:26px;border-bottom:1px solid var(--gold);color:var(--gold-hi);text-decoration:none;font-size:16px}
.nos-link:hover{color:var(--bone)}

/* ============ SERVICIOS ============ */
#servicios{border-top:1px solid var(--line)}
.srv-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:80px;align-items:start}
.srv-intro{position:sticky;top:110px}
.srv-list{list-style:none;border-top:1px solid var(--line)}
.srv-list li{border-bottom:1px solid var(--line)}
.srv-list a{display:grid;grid-template-columns:44px 1fr;gap:22px;padding:30px 8px;text-decoration:none;transition:background .25s,padding .25s}
.srv-list a:hover{background:var(--panel);padding-left:20px}
.srv-list svg{width:36px;height:36px;stroke:var(--gold);fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;margin-top:4px}
.srv-list h3{font-family:var(--display);font-weight:500;font-size:24px;letter-spacing:.03em;color:var(--gold-hi)}
.srv-list p{color:var(--muted);font-size:16px;margin-top:6px;max-width:46ch}
.srv-list .more{display:inline-block;margin-top:12px;font-size:15px;color:var(--bone);border-bottom:1px solid var(--gold)}

/* ============ TESTIMONIOS ============ */
#testimonios{background:var(--panel);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.rating{display:flex;align-items:center;gap:14px;margin-top:26px;color:var(--muted);font-size:15px}
.rating b{font-family:var(--display);font-size:34px;color:var(--gold-hi);font-weight:500}
.stars{color:var(--gold);letter-spacing:3px;font-size:18px}
.rev-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:28px;margin-top:56px}
.rev{border:1px solid var(--line);padding:36px;background:var(--ink)}
.rev.main{grid-row:span 2;display:flex;flex-direction:column;justify-content:space-between;padding:48px}
.rev blockquote{font-style:italic;font-size:19px;line-height:1.75}
.rev.main blockquote{font-size:clamp(21px,2.4vw,27px);line-height:1.6}
.rev .who{margin-top:26px;font-size:15px;color:var(--muted)}
.rev .who strong{display:block;color:var(--bone);font-weight:500;font-size:16px}
.google-source{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.google-icon{display:inline-block;font-family:Arial,sans-serif;font-size:.92em;font-weight:700;line-height:1;background:conic-gradient(from -45deg,#4285f4 0 25%,#34a853 25% 50%,#fbbc05 50% 75%,#ea4335 75%);background-clip:text;-webkit-background-clip:text;color:transparent}
.rev-foot{margin-top:40px}

/* ============ REDES ============ */
.soc-head{display:flex;justify-content:space-between;align-items:end;gap:30px;flex-wrap:wrap}
.soc-links{display:flex;gap:12px;flex-wrap:wrap}
.social-icon{width:46px;height:46px;display:grid;place-items:center;border:1px solid var(--gold);color:var(--gold);transition:background .2s,color .2s}
.social-icon:hover{background:var(--gold);color:var(--ink)}
.social-icon svg{width:22px;height:22px;fill:currentColor;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.social-icon svg rect,.social-icon svg circle{fill:none}
.social-icon svg .icon-dot{fill:currentColor;stroke:none}
.soc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:48px;align-items:start}
.post{position:relative;aspect-ratio:4/5;display:flex;align-items:flex-end;padding:20px;text-decoration:none;border:1px solid var(--line);background:linear-gradient(160deg,#1d1a14,#0d0c0a);overflow:hidden}
.post::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.85),transparent 60%)}
.post span{position:relative;z-index:1;font-size:15px;line-height:1.5}
.post small{display:block;color:var(--gold);font-family:var(--display);letter-spacing:.06em;font-size:13px;margin-bottom:4px}
.post:hover{border-color:var(--gold)}
.tiktok-post{width:min(100%,325px);aspect-ratio:325/578;justify-self:center;padding:0;background:#000}
.tiktok-post::after{display:none}
.tiktok-post iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ============ AGENDA ============ */
#agenda{background:var(--panel);border-top:1px solid var(--line)}
.ag-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:70px}
.ag-data{list-style:none;margin-top:36px;display:grid;gap:18px}
.ag-data li{padding-left:18px;border-left:2px solid var(--gold)}
.ag-data b{display:block;font-family:var(--display);font-weight:500;color:var(--gold-hi);font-size:15px;letter-spacing:.05em}
form{border:1px solid var(--line);background:var(--ink);padding:44px;display:grid;gap:20px}
form .row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
label{display:grid;gap:8px;font-size:15px;color:var(--muted)}
input,select,textarea{font:inherit;font-size:16px;color:var(--bone);background:var(--panel);border:1px solid var(--line);padding:13px 14px;width:100%;border-radius:0}
input:focus,select:focus,textarea:focus{border-color:var(--gold);outline:none}
textarea{min-height:110px;resize:vertical}
.check{display:flex;gap:12px;align-items:flex-start;font-size:14px}
.check input{width:auto;margin-top:5px;accent-color:var(--gold)}
.note{font-size:13px;color:var(--muted)}

/* ============ FOOTER ============ */
footer{border-top:1px solid var(--line);padding:80px 0 0}
.ft-grid{display:grid;grid-template-columns:minmax(190px,1.45fr) repeat(3,minmax(125px,.9fr)) minmax(230px,1.5fr);gap:36px}
.ft-logo img{display:block;width:min(100%,220px);height:auto;object-fit:contain}
.footer-socials{display:flex;gap:10px;margin-top:18px}
.footer-socials .social-icon{width:40px;height:40px;flex:none}
.footer-socials .social-icon svg{width:20px;height:20px}
footer h4{font-family:var(--display);font-weight:500;font-size:15px;letter-spacing:.06em;color:var(--gold);margin-bottom:16px}
footer ul{list-style:none;display:grid;gap:9px;font-size:15px}
footer a{text-decoration:none;color:var(--muted)}
footer a:hover{color:var(--bone)}
footer p{font-size:15px;color:var(--muted);margin-top:14px;max-width:34ch}
.ft-bar{margin-top:64px;border-top:1px solid var(--line);padding:26px 0;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:13px;color:var(--muted)}
.ft-bar nav{display:flex;gap:22px;flex-wrap:wrap}

/* ============ BOTÓN WHATSAPP ============ */
/* 1. Botón de WhatsApp */
.btn-wsp {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 40px;
    
    /* MODIFICA AQUÍ PARA ESCRITORIO: Antes era 40px, ahora está a 20px del borde */
    right: 20px; 
    
    background-color: #25d366;
    border-radius: 50px;
    box-shadow: 0px 4px 10px rgba(0,0,0,0.3);
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    animation: saltito 2.5s infinite;
}

.btn-wsp img {
    width: 35px;
    height: 35px;
}

/* 2. Ajuste de posición exclusivo para dispositivos móviles */
@media (max-width: 768px) {
    .btn-wsp {
        /* MODIFICA AQUÍ PARA MÓVILES: Más pegado al borde y un poco más abajo */
        right: 15px; 
        bottom: 20px;
    }
}

/* 3. Globo de diálogo */
.tooltip-wsp {
    position: absolute;
    right: 85px; /* Distancia del globo respecto al botón */
    background-color: #FFFFFF;
    color: #0c0c0c;
    padding: 12px 18px;
    border-radius: 20px;
    font-size: 14px;
    font-family: sans-serif;
    font-weight: bold;
    white-space: nowrap;
    box-shadow: 0px 4px 12px rgba(0,0,0,0.15);
    
    opacity: 0;
    visibility: hidden;
    transform: scale(0.8);
    transform-origin: right center;
    
    /* Animación: 6s de duración total, inicia tras 3s de espera */
    animation: mostrarYEsconder 6s 3s forwards;
}

.tooltip-wsp::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -10px;
    transform: translateY(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: transparent transparent transparent #FFFFFF;
}

/* Animación del salto constante */
@keyframes saltito {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-15px); }
    60% { transform: translateY(-7px); }
}

/* Animación que hace aparecer y desaparecer el globo */
@keyframes mostrarYEsconder {
    0% { 
        opacity: 0; 
        visibility: hidden; 
        transform: scale(0.8); 
    }
    10% { /* Aparece rápidamente (~0.6 seg) */
        opacity: 1; 
        visibility: visible; 
        transform: scale(1); 
    }
    90% { /* Se mantiene visible durante ~4.8 seg */
        opacity: 1; 
        visibility: visible; 
        transform: scale(1); 
    }
    100% { /* Desaparece al final */
        opacity: 0; 
        visibility: hidden; 
        transform: scale(0.8); 
    }
}

/* ============ RESPONSIVE ============ */
@media (max-width:900px){
  section{padding:80px 0}
  .srv-grid,.ag-grid,.rev-grid,.nos-grid{grid-template-columns:1fr;gap:40px}
  #hero{min-height:80vh;padding:90px 0 90px;background-position:68% center}
  #nosotros{padding:60px 0 70px}
  .srv-intro{position:static}
  .rev.main{grid-row:auto;padding:36px}
  .soc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ft-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px}
  form{padding:28px}
  form .row{grid-template-columns:1fr}
}
@media(max-width:600px){
  .soc-grid{grid-template-columns:minmax(0,1fr);gap:22px}
  .rev-foot .btn{max-width:100%;padding:12px 16px;white-space:normal;text-align:center}
  .rev-foot .google-source{white-space:normal;justify-content:center}
}
@media (max-width:520px){
  .ft-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;scroll-behavior:auto!important}
}