/* ===== PIE + CONTACTO (23/09/2026) · módulo aparte: style.css y app.js intactos ===== */
.ico{width:1em;height:1em;flex:none;display:inline-block;vertical-align:middle}

.pie{position:relative;background:#070708;color:#fff;overflow:hidden;isolation:isolate;border-top:1px solid #ffffff14}
footer.pie{padding:0;text-align:left;font-size:16px;line-height:normal;color:#fff}
.pie__tri{position:absolute;inset:0 0 auto auto;width:min(70vw,980px);height:720px;z-index:-1;pointer-events:none;
  background:url(../img/ui/triangulos.webp) no-repeat top right/contain;opacity:.07;
  -webkit-mask:linear-gradient(200deg,#000 20%,transparent 75%);mask:linear-gradient(200deg,#000 20%,transparent 75%)}
.pie__wrap{width:min(1320px,100%);margin:0 auto;padding:0 6vw}

/* --- 1 · ¿Hablamos? --- */
.pie__top{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(40px,6vw,96px);align-items:start;padding-top:clamp(80px,13vh,150px);padding-bottom:clamp(64px,10vh,110px)}
.pie__h{font-family:var(--display);font-weight:900;text-transform:uppercase;line-height:.86;letter-spacing:.005em;
  font-size:clamp(58px,8.6vw,150px);margin:0 0 22px;white-space:nowrap}
.pie__lead{color:var(--muted);font-size:clamp(16px,1.5vw,19px);line-height:1.55;max-width:44ch;margin-bottom:34px}

.pie__tels{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px}
.tel{position:relative;display:flex;flex-direction:column;gap:6px;padding:20px 22px 20px;border-radius:18px;
  background:#ffffff08;border:1px solid #ffffff17;transition:background .35s var(--ease),border-color .35s,transform .35s var(--ease)}
.tel:hover{background:var(--red);border-color:var(--red);transform:translateY(-3px)}
.tel__who{padding-right:28px;font-size:12px;letter-spacing:.18em;line-height:1.35;text-transform:uppercase;color:#a39fa8;font-weight:700;transition:color .35s}
.tel__num{font-family:var(--display);font-weight:700;font-size:clamp(24px,2.3vw,32px);white-space:nowrap;letter-spacing:.02em;line-height:1}
.tel__num small{font-size:.5em;color:#ffffff80;margin-right:6px;letter-spacing:.06em;vertical-align:.35em}
.tel .ico{position:absolute;top:18px;right:18px;font-size:20px;color:var(--red);transition:color .35s,transform .45s var(--ease)}
.tel:hover .tel__who,.tel:hover .tel__num small{color:#ffffffc9}
.tel:hover .ico{color:#fff;transform:rotate(-14deg) scale(1.08)}

.pie__horario{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;padding:14px 0 0;color:#cfcbd3;font-size:15px}
.pie__horario .ico{color:#8d8993;font-size:17px}
.estado{display:inline-flex;align-items:center;gap:8px;padding:6px 12px 6px 10px;border-radius:30px;background:#ffffff0d;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:#bdb8c2}
.estado::before{content:"";width:8px;height:8px;border-radius:50%;background:#77727d}
.estado.is-open{color:#7ee2a0;background:#2ecc7114}
.estado.is-open::before{background:#2ecc71;box-shadow:0 0 0 0 #2ecc7188;animation:latido 2s infinite}
@keyframes latido{70%{box-shadow:0 0 0 8px #2ecc7100}100%{box-shadow:0 0 0 0 #2ecc7100}}
.pie__mail{display:inline-flex;align-items:center;gap:10px;margin-top:22px;font-size:17px;color:#fff;
  border-bottom:1px solid #ffffff38;padding-bottom:4px;transition:border-color .3s,color .3s}
.pie__mail .ico{color:var(--red)}
.pie__mail:hover{border-color:var(--red);color:#fff}

/* --- formularios (mini y completo comparten piezas) --- */
.cform{position:relative;background:#f5f2ec;color:#15161d;border-radius:26px;padding:clamp(26px,3vw,40px);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.7)}
.cform__head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:22px}
.cform__t{font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:clamp(30px,2.8vw,40px);line-height:.92}
.cform__s{margin-top:8px;color:#5d5a63;font-size:15px;line-height:1.45}
.cform__badge{flex:none;width:58px;height:58px;display:grid;place-items:center;border-radius:50%;background:var(--red);color:#fff;font-size:24px;
  box-shadow:0 10px 26px rgba(227,6,19,.35)}
.cform__grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cform__grid .full{grid-column:1/-1}
.fld{position:relative;display:block}
.fld input,.fld textarea,.fld select{width:100%;font:inherit;font-size:16px;color:#15161d;background:#fff;border:1.5px solid #e2ddd3;
  border-radius:14px;padding:24px 16px 9px;outline:none;transition:border-color .25s,box-shadow .25s;-webkit-appearance:none;appearance:none}
.fld textarea{min-height:96px;resize:vertical}
.fld span{position:absolute;left:17px;top:17px;font-size:15px;color:#8a8690;pointer-events:none;transition:all .22s var(--ease)}
.fld input:focus+span,.fld input:not(:placeholder-shown)+span,
.fld textarea:focus+span,.fld textarea:not(:placeholder-shown)+span{top:8px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--red)}
.fld input:focus,.fld textarea:focus{border-color:#15161d;box-shadow:0 0 0 4px #15161d12}
.cform.is-tried .fld input:invalid,.cform.is-tried .fld textarea:invalid{border-color:var(--red);box-shadow:0 0 0 4px #e3061314}

.checks{display:grid;gap:10px;margin:18px 0 20px}
.chk{display:grid;grid-template-columns:22px 1fr;gap:11px;align-items:start;font-size:14px;line-height:1.45;color:#48454f;cursor:pointer}
.chk input{-webkit-appearance:none;appearance:none;width:22px;height:22px;margin:0;border:1.5px solid #bdb7ab;border-radius:7px;background:#fff;
  display:grid;place-items:center;cursor:pointer;transition:all .2s}
.chk input::after{content:"";width:10px;height:6px;border:2.4px solid #fff;border-top:0;border-right:0;transform:rotate(-45deg) scale(0);margin-top:-3px;transition:transform .2s var(--ease)}
.chk input:checked{background:var(--red);border-color:var(--red)}
.chk input:checked::after{transform:rotate(-45deg) scale(1)}
.chk input:focus-visible{box-shadow:0 0 0 4px #e3061330}
.chk a{color:#15161d;text-decoration:underline;text-underline-offset:2px}
.cform.is-tried .chk input:invalid{border-color:var(--red);box-shadow:0 0 0 4px #e3061318}
.req{color:var(--red)}

.cform__send{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;border:0;cursor:pointer;font:inherit;font-size:16px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:#fff;background:var(--red);padding:18px 26px;border-radius:40px;
  transition:background .3s,transform .3s var(--ease),box-shadow .3s}
.cform__send:hover{background:var(--red2);transform:translateY(-2px);box-shadow:0 14px 30px rgba(227,6,19,.32)}
.cform__send .ico{font-size:19px;transition:transform .35s var(--ease)}
.cform__send:hover .ico{transform:translateX(4px)}
.cform.is-sending .cform__send{pointer-events:none;opacity:.7}
.cform.is-sending .cform__send .ico{animation:vaiven .8s var(--ease) infinite alternate}
@keyframes vaiven{to{transform:translateX(6px)}}
.cform__legal{margin-top:16px;font-size:11.5px;line-height:1.5;color:#8a8690}
.cform__legal a{color:inherit;text-decoration:underline}
.cform__err{display:none;margin-top:12px;font-size:14px;color:var(--red2);font-weight:700}
.cform.is-error .cform__err{display:block}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

/* estado enviado */
.cform__ok{position:absolute;inset:0;border-radius:inherit;background:#15161d;color:#fff;display:flex;flex-direction:column;justify-content:center;
  align-items:flex-start;padding:clamp(28px,3.4vw,46px);opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility .5s}
.cform.is-sent .cform__ok{opacity:1;visibility:visible}
.cform__ok-ico{width:64px;height:64px;border-radius:50%;background:var(--red);display:grid;place-items:center;font-size:30px;margin-bottom:24px;
  transform:scale(.4);transition:transform .7s cubic-bezier(.34,1.56,.64,1) .15s}
.cform.is-sent .cform__ok-ico{transform:none}
.cform__ok b{font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:clamp(34px,3.2vw,48px);line-height:.92;margin-bottom:12px}
.cform__ok p{color:#c9c5cd;font-size:16px;line-height:1.5;max-width:36ch}
.cform__ok button{margin-top:24px;background:none;border:0;color:#fff;font:inherit;font-size:14px;letter-spacing:.12em;text-transform:uppercase;
  font-weight:700;border-bottom:1.5px solid #ffffff55;padding-bottom:3px;cursor:pointer}
.cform__ok button:hover{border-color:var(--red)}

/* --- 2 · marca + secciones --- */
.pie__mapa{display:grid;grid-template-columns:1fr auto;gap:40px 80px;align-items:center;padding:clamp(56px,9vh,90px) 6vw clamp(40px,6vh,64px);border-top:1px solid #ffffff12}
.pie__brand{display:flex;align-items:center;gap:clamp(28px,3.4vw,52px)}
.pie__logo{width:clamp(150px,14vw,210px);height:auto;flex:none;filter:drop-shadow(0 18px 40px rgba(0,0,0,.5))}
.pie__brand p{color:#a39fa8;font-size:16px;line-height:1.6}
.pie__brand p b{color:#fff;font-weight:700;font-size:18px}
.pie__acciones{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:22px}
.pie__acciones img{height:42px;width:auto;opacity:.9;transition:opacity .3s,transform .3s var(--ease)}
.pie__acciones a:hover img{opacity:1;transform:translateY(-2px)}
.pie__ig{display:inline-flex;align-items:center;gap:10px;margin-right:6px}
.pie__ig .ico{font-size:18px}
.pie__col h3{font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:var(--red);font-weight:700;margin-bottom:18px}
.pie__col ul{list-style:none;display:grid;grid-template-columns:auto auto;gap:12px 44px}
.pie__col a{position:relative;color:#d7d3db;font-size:16px;transition:color .25s}
.pie__col a::after{content:"";position:absolute;left:0;bottom:-3px;height:1.5px;width:100%;background:var(--red);
  transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease)}
.pie__col a:hover{color:#fff}
.pie__col a:hover::after{transform:scaleX(1);transform-origin:left}

/* --- 3 · la V del aniversario, gigante (sube y se asienta con el scroll) --- */
.pie__v{position:relative;display:flex;justify-content:center;pointer-events:none;user-select:none;margin-top:clamp(10px,3vh,40px);height:clamp(190px,30vw,460px);overflow:hidden}
.pie__v img{width:clamp(300px,50vw,760px);height:auto;align-self:flex-start;will-change:transform}

/* --- 4 · legal --- */
.pie__base{position:relative;z-index:1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 28px;
  padding:22px 0 26px;border-top:1px solid #ffffff12;color:#77737c;font-size:13px;background:#070708}
.pie__base nav{display:flex;flex-wrap:wrap;gap:6px 22px}
.pie__base nav a{color:#77737c;transition:color .25s}
.pie__base a:hover{color:#fff}
.pie__up{display:inline-flex;align-items:center;gap:10px;background:none;border:0;color:#d7d3db;font:inherit;font-size:13px;letter-spacing:.16em;
  text-transform:uppercase;font-weight:700;cursor:pointer}
.pie__up i{width:38px;height:38px;border-radius:50%;border:1.5px solid #ffffff30;display:grid;place-items:center;transition:all .35s var(--ease)}
.pie__up .ico{font-size:17px}
.pie__up:hover i{background:var(--red);border-color:var(--red);transform:translateY(-3px)}

/* ===== BOTÓN FLOTANTE ===== */
.fab{position:fixed;right:clamp(16px,2.4vw,32px);bottom:clamp(16px,2.4vw,30px);z-index:70;display:flex;align-items:center;gap:12px;
  border:0;cursor:pointer;font:inherit;color:#15161d;background:#fff;padding:8px 20px 8px 8px;border-radius:50px;
  box-shadow:0 18px 44px -10px rgba(0,0,0,.55),0 0 0 1px #0000000d;
  opacity:0;transform:translateY(24px) scale(.94);pointer-events:none;transition:opacity .45s var(--ease),transform .55s var(--ease)}
.fab.is-on{opacity:1;transform:none;pointer-events:auto}
.fab__ico{position:relative;width:44px;height:44px;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;font-size:20px}
.fab__ico::after{content:"";position:absolute;top:1px;right:1px;width:11px;height:11px;border-radius:50%;background:#77727d;border:2px solid #fff}
.fab.is-open-now .fab__ico::after{background:#2ecc71}
.fab__txt{text-align:left;line-height:1.1}
.fab__txt b{display:block;font-size:16px;font-weight:700;letter-spacing:.02em}
.fab__txt small{display:block;font-size:12px;color:#6b6871;margin-top:2px}
.fab:hover .fab__ico{animation:timbre .7s var(--ease)}
@keyframes timbre{20%{transform:rotate(-14deg)}40%{transform:rotate(12deg)}60%{transform:rotate(-8deg)}80%{transform:rotate(4deg)}}

/* ===== POPUP DE CONTACTO ===== */
.cmodal{position:fixed;inset:0;z-index:9997;display:grid;place-items:center;padding:3vh 3vw;visibility:hidden;pointer-events:none}
.cmodal.open{visibility:visible;pointer-events:auto}
.cmodal__bg{position:absolute;inset:0;background:rgba(6,6,8,.78);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);opacity:0;transition:opacity .45s var(--ease)}
.cmodal.open .cmodal__bg{opacity:1}
.cmodal__box{position:relative;display:grid;grid-template-columns:.8fr 1.2fr;width:min(1060px,100%);max-height:94vh;border-radius:28px;overflow:hidden;
  background:#f5f2ec;box-shadow:0 50px 120px rgba(0,0,0,.6);opacity:0;transform:translateY(40px) scale(.97);transition:opacity .45s var(--ease),transform .6s var(--ease)}
.cmodal.open .cmodal__box{opacity:1;transform:none}
.cmodal__side{position:relative;background:var(--red);color:#fff;padding:clamp(28px,3.4vw,46px);display:flex;flex-direction:column;overflow:hidden;isolation:isolate}
.cmodal__side::before{content:"";position:absolute;inset:0;z-index:-1;background:url(../img/ui/triangulos.webp) no-repeat bottom right/cover;opacity:.07;mix-blend-mode:multiply}
.cmodal__side .escudo{height:118px;align-self:flex-start;width:auto;margin-bottom:auto;filter:drop-shadow(0 8px 18px rgba(0,0,0,.25))}
.cmodal__side h2{font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:clamp(40px,4.4vw,62px);line-height:.88;margin:36px 0 14px}
.cmodal__side p{font-size:15.5px;line-height:1.5;color:#ffffffd9;margin-bottom:26px;max-width:30ch}
.cmodal__tel{display:block;padding:14px 0;border-top:1px solid #ffffff40}
.cmodal__tel small{display:block;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:#ffffffb3;margin-bottom:4px}
.cmodal__tel b{font-family:var(--display);font-weight:700;font-size:28px;letter-spacing:.02em;display:flex;align-items:center;gap:10px}
.cmodal__tel b .ico{font-size:18px;transition:transform .4s var(--ease)}
.cmodal__tel:hover b .ico{transform:rotate(-14deg)}
.cmodal__hor{display:flex;gap:10px;align-items:flex-start;padding-top:14px;border-top:1px solid #ffffff40;font-size:14px;line-height:1.45;color:#ffffffe6}
.cmodal__hor .ico{font-size:17px;margin-top:1px}
.cmodal__hor .estado{margin-top:8px;background:#0000001f;color:#fff}
.cmodal__hor .estado.is-open{color:#fff;background:#0000002e}
.cmodal__main{overflow-y:auto;overscroll-behavior:contain}
.cmodal__main .cform{background:transparent;box-shadow:none;border-radius:0;min-height:100%}
.cmodal__main .cform__ok{border-radius:0}
.cmodal__x{position:absolute;top:16px;right:16px;z-index:3;width:44px;height:44px;border-radius:50%;border:0;background:#15161d10;color:#15161d;
  display:grid;place-items:center;font-size:20px;cursor:pointer;transition:background .3s,color .3s,transform .4s var(--ease)}
.cmodal__x:hover{background:#15161d;color:#fff;transform:rotate(90deg)}
.cmodal.is-sent .cmodal__x{background:#ffffff1a;color:#fff}
.cmodal__main .fld select{padding:24px 44px 9px 16px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2315161d' stroke-width='2.4'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 16px center}
.cmodal__main .fld select+span{top:8px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--red)}
html.cmodal-lock,html.cmodal-lock body{overflow:hidden}
body.cmodal-fijo{position:fixed;left:0;right:0;width:100%}

/* ===== responsive ===== */
@media(max-width:1100px){
  .pie__top{grid-template-columns:1fr}
  .pie__top .cform--mini{max-width:640px}
}
@media(max-width:1020px){
  .pie__mapa{grid-template-columns:1fr;gap:44px}
}
@media(max-width:820px){
  /* móvil: pantalla completa (100dvh; con vh la barra de Safari tapaba la X y el botón de enviar) */
  .cmodal{padding:0;display:block}
  .cmodal__bg{display:none}
  .cmodal__box{position:fixed;inset:0;width:100%;height:100vh;height:100dvh;max-height:none;border-radius:0;display:block;
    overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;transform:translateY(40px)}
  .cmodal__side{padding:22px 20px 20px;display:block}
  .cmodal__side .escudo{height:58px;margin:0 0 14px}
  .cmodal__side h2{margin:0 0 6px;font-size:34px;padding-right:56px}
  .cmodal__side p{margin-bottom:14px;font-size:15px;max-width:none}
  .cmodal__tels{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .cmodal__tel{padding:10px 0}
  .cmodal__tel b{font-size:20px;gap:6px}
  .cmodal__tel small{font-size:9.5px;letter-spacing:.12em}
  .cmodal__hor{padding-top:10px;font-size:13.5px}
  .cmodal__hor .estado{margin-top:6px}
  .cmodal__main{overflow:visible}
  .cmodal__main .cform{padding:24px 20px calc(28px + env(safe-area-inset-bottom))}
  .cmodal__main .cform__ok{position:fixed;inset:0;z-index:2;border-radius:0}
  /* la X se queda fija arriba aunque se desplace el formulario */
  .cmodal__x{position:fixed;top:calc(14px + env(safe-area-inset-top));right:14px;z-index:5;background:#15161d;color:#fff;box-shadow:0 6px 18px rgba(0,0,0,.3)}
  .cmodal.is-sent .cmodal__x{background:#ffffff26}
}
@media(max-width:600px){
  /* móvil: pie compacto */
  .pie__wrap{padding:0 16px}
  .pie__top{padding-top:56px;padding-bottom:44px;gap:28px}
  .pie__h{font-size:52px;margin-bottom:12px}
  .pie__lead{font-size:15px;margin-bottom:20px}
  .pie__tels{grid-template-columns:1fr 1fr;gap:8px;margin-bottom:6px}
  .tel{padding:12px 12px 13px;border-radius:14px;gap:4px}
  .tel__who{font-size:9.5px;letter-spacing:.1em;padding-right:18px}
  .tel__num{font-size:19px}
  .tel__num small{display:none}
  .tel .ico{top:11px;right:10px;font-size:15px}
  .pie__horario{font-size:13px;gap:8px 12px;padding-top:10px}
  .pie__mail{margin-top:14px;font-size:15px}
  .cform{border-radius:20px;padding:20px 16px}
  .cform__head{margin-bottom:14px}
  .cform__t{font-size:28px}
  .cform__s{font-size:14px;margin-top:4px}
  .cform__grid{grid-template-columns:1fr;gap:10px}
  .cform__badge{display:none}
  .fld textarea{min-height:84px}
  .checks{margin:14px 0 16px;gap:8px}
  .chk{font-size:13px}
  .cform__send{padding:16px 22px}
  .cform__legal{font-size:10.5px;margin-top:12px}
  .pie__mapa{padding:32px 16px 24px;text-align:center;justify-items:center;gap:22px}
  .pie__brand{flex-direction:column;gap:0}
  .pie__logo{display:none}          /* el escudo sobra en móvil */
  .pie__brand p{display:none}
  .pie__acciones{justify-content:center;margin-top:0}
  .pie__ig{padding:11px 20px}
  .pie__acciones img{height:38px}
  .pie__col h3{display:none}
  .pie__col ul{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 6px}
  .pie__col a{display:inline-block;padding:7px 12px;border:1px solid #ffffff1f;border-radius:30px;font-size:13px}
  .pie__col a::after{display:none}
  .pie__v{height:130px;margin-top:0}
  .pie__v img{width:230px}
  .pie__base{flex-direction:column;align-items:center;text-align:center;gap:12px;padding:16px 16px calc(18px + env(safe-area-inset-bottom))}
  .pie__base nav{justify-content:center;gap:6px 14px;font-size:12px}
  .pie__up{font-size:11px}
  .pie__up i{width:32px;height:32px}
  .fab{padding:0;border-radius:50%;right:16px;bottom:16px}
  .fab__ico{width:58px;height:58px;font-size:24px}
  .fab__ico::after{top:3px;right:3px}
  .fab__txt{display:none}
}
@media(prefers-reduced-motion:reduce){.estado.is-open::before{animation:none}.fab:hover .fab__ico{animation:none}}