/* Distriflex — tarjeta digital v5 (asesoras con foto) */
:root{
  /* Colores tomados del logo de Distriflex */
  --cyan:#2fbbeb;       /* "distri", aro del ícono */
  --navy:#2f499c;       /* "flex", letras del ícono */
  --navy-900:#101c4d;   /* azul noche del logo: hero y cierre */
  --navy-700:#2f499c;   /* títulos y botones */
  --brand:#2fbbeb;      /* acentos */
  --sheet:#eef7fc;      /* fondo claro con tinte celeste */
  --chip:#e2f3fb;
  --paper:#ffffff;
  --ink:#14224f;
  --muted:#4e5d80;
  --line:#d3e6f2;
  --wa:#25d366; --wa-ink:#073b1e;
  --max:460px;
  --font:"Outfit",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--font);color:var(--ink);line-height:1.5;
  background:var(--navy-900);
  background-image:radial-gradient(120% 70% at 50% 0%,#23398a 0%,var(--navy-900) 70%);
  min-height:100vh;
}
img{display:block;max-width:100%;height:auto}
svg{width:20px;height:20px;flex:none}
a{color:inherit}
:focus-visible{outline:3px solid var(--cyan);outline-offset:3px;border-radius:12px}

.card{width:100%;max-width:var(--max);margin:0 auto;background:var(--sheet);overflow:hidden;overflow:clip}
/* ---------- Hero ---------- */
.hero{position:relative;color:#fff;min-height:100vh;min-height:max(600px,100svh);display:flex;align-items:flex-end;isolation:isolate;background:var(--navy-900)}
.hero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%;z-index:-2;pointer-events:none}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(16,28,77,.35) 0%,rgba(16,28,77,.18) 22%,rgba(16,28,77,.55) 42%,rgba(16,28,77,.88) 62%,var(--navy-900) 86%)}
.hero__body{width:100%;padding:36px 22px calc(18px + env(safe-area-inset-bottom));text-align:center}
.hero__logo{width:clamp(150px,46vw,188px);height:auto;margin:0 auto 22px;border-radius:50%;box-shadow:0 0 0 6px rgba(47,187,235,.28),0 14px 40px rgba(0,0,0,.4)}
.hero h1{text-shadow:0 2px 18px rgba(16,28,77,.55);margin:0 auto 10px;max-width:15ch;font-weight:600;font-size:clamp(2rem,8.4vw,2.45rem);line-height:1.05;letter-spacing:-.02em;text-wrap:balance}
.hero__lead{margin:0 auto 22px;max-width:30ch;text-wrap:balance;color:#cfe9f7;font-weight:300;font-size:1.05rem}

.hero__cta{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:54px;padding:0 22px;border-radius:999px;
  font:600 1rem/1 var(--font);text-decoration:none;border:0;cursor:pointer;transition:transform .15s ease,background-color .15s ease}
.btn:active{transform:scale(.98)}
.btn--wa{background:var(--wa);color:var(--wa-ink)}
.btn--wa{min-height:58px;padding:0 16px;box-shadow:0 10px 24px rgba(0,0,0,.25)}
.btn--wa svg{width:24px;height:24px}
.btn__txt{display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left;line-height:1}
.btn__txt small{font-size:.72rem;font-weight:500;opacity:.8}
.btn--ghost{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(6px)}
.btn--navy{background:var(--navy-700);color:#fff;width:100%}

.quick{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:22px;padding-top:18px;border-top:1px solid rgba(47,187,235,.25)}
.quick a{display:flex;flex-direction:column;align-items:center;gap:6px;padding:6px 0;text-decoration:none;font-size:.78rem;color:#cfe9f7}
.more{display:inline-flex;flex-direction:column;align-items:center;gap:2px;margin-top:14px;padding:6px 14px;color:#cfe9f7;font-size:.8rem;text-decoration:none}
.more svg{width:22px;height:22px;animation:nudge 2.2s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
.quick svg{width:46px;height:46px;padding:12px;border-radius:50%;background:rgba(47,187,235,.16);color:#fff;border:1px solid rgba(47,187,235,.45)}

/* ---------- Sheet (contenido claro) ---------- */
.sheet{padding:18px 16px 28px;display:grid;gap:18px}
.keep{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.keep__btn svg{color:var(--cyan)}
.keep__btn{display:flex;align-items:center;justify-content:center;gap:8px;min-height:50px;border-radius:16px;
  background:var(--paper);border:1px solid var(--line);color:var(--navy-700);font:500 .95rem/1 var(--font);text-decoration:none;cursor:pointer}

.line{background:var(--paper);border-radius:24px;overflow:hidden;border:1px solid var(--line)}
.line__photo{margin:0;aspect-ratio:4/3;overflow:hidden}
.line__photo img{width:100%;height:100%;object-fit:cover}
/* Encuadre de las fotos verticales dentro del marco horizontal (v5.2) */
.line__photo .pos-sala{object-position:50% 62%}
.line__photo .pos-cama{object-position:50% 52%}
.line__body{padding:18px 18px 20px}
.line h2,.visit h2{margin:0 0 4px;font-weight:600;font-size:1.7rem;letter-spacing:-.015em;line-height:1.1;color:var(--navy-700)}
.line p{margin:0 0 14px;color:var(--muted);font-size:.97rem}
.chips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.chip{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0;min-height:48px;padding:0 12px 0 14px;border-radius:14px;
  background:var(--chip);color:var(--navy-700);font-weight:500;text-decoration:none;border:1px solid transparent;transition:border-color .15s,background-color .15s}
.chip::after{content:"";width:18px;height:18px;flex:none;
  background:var(--cyan);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M4 20l1.3-4A8 8 0 1 1 8 18.7z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M4 20l1.3-4A8 8 0 1 1 8 18.7z'/%3E%3C/svg%3E") center/contain no-repeat}
@media (hover:hover){.chip:hover{border-color:var(--brand);background:#fff}}
.chip:active{background:#cdeaf8}

.visit{background:var(--paper);border-radius:24px;border:1px solid var(--line);padding:20px 16px 16px}
.visit__addr{margin:0 0 14px;color:var(--muted);font-size:1.02rem}
.visit__map{border-radius:16px;overflow:hidden;background:#dcecf6;margin-bottom:12px}
.visit__map iframe{display:block;width:100%;height:240px;border:0}

/* ---------- Cierre ---------- */
.closing{position:relative;color:#fff;text-align:center;isolation:isolate;padding:70px 22px calc(34px + env(safe-area-inset-bottom))}
.closing__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.closing::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(16,28,77,.6),var(--navy-900) 78%)}
.closing__body img{width:140px;margin:0 auto 18px;border-radius:50%;box-shadow:0 0 0 5px rgba(47,187,235,.28)}
.closing__tag{margin:0 0 18px;font-size:1.45rem;font-weight:500;letter-spacing:-.01em}
.closing__phone{display:inline-block;font-weight:600;text-decoration:none;font-size:1.05rem;padding:6px 10px}
.credit{margin:22px 0 0;font-size:.78rem;color:#93a6d4}
.credit a{color:#cfe9f7}

/* ---------- Flotante y aviso ---------- */
.float-wa{position:fixed;z-index:20;right:max(16px,calc((100vw - var(--max))/2 + 16px));bottom:calc(16px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;align-items:flex-end;gap:10px;
  opacity:0;transform:translateY(16px) scale(.9);pointer-events:none;transition:opacity .25s,transform .25s}
.float-wa.is-on{opacity:1;transform:none;pointer-events:auto}
.float-wa__btn{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:var(--wa);color:var(--wa-ink);border:0;cursor:pointer;
  box-shadow:0 10px 28px rgba(0,0,0,.28)}
.float-wa__btn svg{width:30px;height:30px}
.float-wa__btn[aria-expanded="true"]{background:#fff}
.float-wa__menu{display:grid;gap:8px}
.float-wa__menu[hidden]{display:none}
.float-wa__menu a{display:flex;align-items:center;gap:10px;min-height:48px;padding:0 18px 0 14px;border-radius:999px;background:var(--wa);color:var(--wa-ink);
  font-weight:600;text-decoration:none;box-shadow:0 8px 22px rgba(0,0,0,.25);animation:pop .18s ease-out both}
.float-wa__menu a:nth-child(2){animation-delay:.04s}
@keyframes pop{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.toast{position:fixed;left:50%;bottom:calc(88px + env(safe-area-inset-bottom));transform:translate(-50%,10px);z-index:30;
  background:var(--ink);color:#fff;padding:12px 18px;border-radius:12px;font-size:.92rem;opacity:0;pointer-events:none;transition:.2s}
.toast.is-on{opacity:1;transform:translate(-50%,0)}

/* ---------- Asesoras (v5) ---------- */
.asesor{display:flex;flex-direction:column;align-items:center;gap:2px;padding:14px 8px 12px;border-radius:22px;text-decoration:none;color:#fff;
  background:rgba(255,255,255,.1);border:1px solid rgba(47,187,235,.35);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:0 10px 24px rgba(0,0,0,.25);transition:transform .15s ease,background-color .15s ease,border-color .15s ease}
.asesor:active{transform:scale(.98)}
.asesor__foto{position:relative;width:76px;height:76px;margin-bottom:8px}
.asesor__foto img{width:100%;height:100%;object-fit:cover;border-radius:50%;box-shadow:0 0 0 3px var(--cyan)}
.asesor__wa{position:absolute;right:-4px;bottom:-2px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  background:var(--wa);color:#fff;box-shadow:0 0 0 3px var(--navy-900)}
.asesor__wa svg{width:17px;height:17px}
.asesor__nombre{font-weight:600;font-size:.98rem;line-height:1.15}
.asesor__rol{font-size:.76rem;color:#cfe9f7;font-weight:400}
.asesor__num{margin-top:6px;font-size:.78rem;font-weight:600;color:var(--wa);letter-spacing:.01em}
.float-wa__menu a img{width:34px;height:34px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px #fff}
.float-wa__menu a span{display:flex;flex-direction:column;line-height:1.1}
.float-wa__menu a small{font-size:.7rem;font-weight:500;opacity:.8}
.float-wa__menu a{padding:0 16px 0 7px;min-height:50px}
.float-wa__menu a svg{width:18px;height:18px;margin-left:4px}
@media (hover:hover){.asesor:hover{background:rgba(255,255,255,.16);border-color:var(--cyan)}}


/* =========================================================
   ADAPTACIÓN A PANTALLAS
   ========================================================= */

/* Celulares muy angostos (iPhone SE 1ª gen., Android pequeños) */
@media (max-width:359px){
  .hero__body{padding-inline:16px}
  .hero__cta{grid-template-columns:1fr}
  .btn__txt{flex-direction:row;align-items:baseline;gap:6px}
  .more{display:inline-flex;flex-direction:column;align-items:center;gap:2px;margin-top:14px;padding:6px 14px;color:#cfe9f7;font-size:.8rem;text-decoration:none}
.more svg{width:22px;height:22px;animation:nudge 2.2s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
.quick svg{width:42px;height:42px;padding:11px}
  .quick a{font-size:.72rem}
  .keep{grid-template-columns:1fr}
  .sheet{padding-inline:12px}
  .chips{grid-template-columns:1fr}
}

/* Tarjeta flotante en pantallas medianas (phablets, ventanas angostas) */
@media (min-width:500px){
  body{padding:28px 0}
  .card{border-radius:32px;box-shadow:0 30px 80px rgba(0,0,0,.45)}
}

/* Tablet (vertical y horizontal) */
@media (min-width:720px){
  :root{--max:820px}
  body{padding:40px 24px}
  .hero{min-height:680px}
  .hero__body{padding:0 48px 36px}
  .hero__logo{width:210px;margin-bottom:26px}
  .hero h1{font-size:3rem;max-width:16ch}
  .hero__lead{font-size:1.15rem}
  .hero__cta{max-width:460px;margin:0 auto}
  .quick{max-width:460px;margin-inline:auto}
  .sheet{grid-template-columns:1fr 1fr;padding:28px;gap:22px}
  .keep{grid-column:1 / -1;max-width:460px;width:100%;justify-self:center}
  .line{display:flex;flex-direction:column}
  .line__body{flex:1;display:flex;flex-direction:column}
  .line p{flex:1}
  .visit{grid-column:1 / -1;display:grid;grid-template-columns:1fr 1.5fr;grid-template-rows:auto auto 1fr;gap:6px 24px;padding:24px;align-items:start}
  .visit h2,.visit__addr{grid-column:1}
  .visit__map{grid-column:2;grid-row:1 / 4;margin:0}
  .visit__map iframe{height:280px}
  .visit .btn{grid-column:1;grid-row:3;align-self:end}
  .closing{padding-top:90px}
}

/* Escritorio: pantalla dividida. El hero queda fijo a la izquierda
   y el contenido se desplaza a la derecha. */
@media (min-width:1100px) and (min-height:600px){
  :root{--max:1440px}
  body{padding:0;background:var(--navy-900)}
  .card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);border-radius:0;box-shadow:none;min-height:100vh}
  .hero{grid-column:1;grid-row:1 / span 2;position:sticky;top:0;align-self:start;height:100vh;min-height:0}
  .hero__body{padding:0 clamp(40px,5vw,80px) 56px}
  .hero__logo{width:clamp(220px,17vw,260px);margin-bottom:30px}
  .hero h1{font-size:clamp(2.6rem,3.2vw,3.3rem);max-width:12em}
  .sheet{grid-column:2;grid-template-columns:1fr;padding:clamp(28px,3vw,48px);align-content:start}
  .line{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
  .line__photo{aspect-ratio:auto;height:100%;min-height:260px}
  .line__body{padding:22px 22px 22px}
  .visit{grid-template-columns:1fr 1.4fr}
  .keep{justify-self:stretch;max-width:none}
  .closing{grid-column:2}
  .float-wa{display:none}
  .more{display:none}
  .hero::before{background:linear-gradient(180deg,rgba(16,28,77,.3) 0%,rgba(16,28,77,.2) 25%,rgba(16,28,77,.6) 48%,rgba(16,28,77,.92) 70%,var(--navy-900) 92%)}
  /* En escritorio el mouse permite estados hover más claros */
  .keep__btn,.btn{transition:background-color .15s,border-color .15s,transform .15s}
  .keep__btn:hover{border-color:var(--brand)}
  .btn--wa:hover{background:#2be36f}
  .btn--ghost:hover{background:rgba(255,255,255,.18)}
  .btn--navy:hover{background:#263f8c}
}

/* Pantallas muy grandes: evitar que todo se estire */
@media (min-width:1600px){
  body{background:radial-gradient(120% 80% at 50% 0%,#23398a 0%,var(--navy-900) 70%);padding:32px}
  .card{border-radius:32px;overflow:clip;box-shadow:0 30px 80px rgba(0,0,0,.45)}
  .hero{top:32px;height:calc(100vh - 64px)}
}

/* Celular acostado: la pantalla es baja, el hero no puede ocuparla toda */
@media (orientation:landscape) and (max-height:520px){
  body{padding:0}
  .card{max-width:none;border-radius:0;box-shadow:none}
  .hero{min-height:auto}
  .more{display:none}
  .hero__body{padding-top:44px;padding-bottom:22px;display:grid;grid-template-columns:auto 1fr;column-gap:22px;align-items:center;text-align:left;
    padding-left:max(22px,env(safe-area-inset-left));padding-right:max(22px,env(safe-area-inset-right))}
  .hero__logo{grid-row:1 / 3;width:110px;margin:0}
  .hero h1{margin:0 0 6px;max-width:none;font-size:1.8rem}
  .hero__lead{margin:0;max-width:none}
  .hero__cta,.quick{grid-column:1 / -1}
  .hero__cta{margin:18px 0 0;max-width:none}
  .quick{max-width:none;margin-inline:0}
  .hero::before{background:linear-gradient(180deg,rgba(16,28,77,.35),rgba(16,28,77,.9) 55%,var(--navy-900))}
}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* Asesoras: ajustes por pantalla (van al final para prevalecer) */
@media (max-width:359px){
  .hero__cta{grid-template-columns:1fr 1fr;gap:8px}
  .asesor{padding:12px 4px 10px}
  .asesor__foto{width:62px;height:62px}
  .asesor__nombre{font-size:.86rem}
  .asesor__rol,.asesor__num{font-size:.7rem}
}
@media (orientation:landscape) and (max-height:520px){
  .asesor{padding:10px 8px}
  .asesor__foto{width:54px;height:54px;margin-bottom:4px}
}