/* ============================================================
   PRESENTIA — Sistema de diseño web
   Bienestar, Bienvivir. Aquí y Ahora.
   ============================================================ */

@font-face {
  font-family: "Zamora";
  src: url("fonts/Zamora.ttf") format("truetype");
  font-weight: 400 700;
  font-display: swap;
}

:root {
  /* --- 12 colores corporativos --- */
  --amber:#DE9E1E;  --orange:#E0650F; --melon:#E08A89;  --slate:#804FFF;
  --sky:#0F9ED9;    --crayola:#1A77D5;--space:#191D4C;  --shamrock:#178073;
  --british:#024732;--battleship:#807956;--dim:#626267; --black:#020002;

  /* --- Roles funcionales --- */
  --brand:#804FFF;       /* Slate Blue / morado — color primario */
  --brand-600:#6c3df2;
  --brand-700:#591fe0;
  --brand-100:#ece3ff;
  --brand-50:#f6f2ff;

  --ink:#171326;         /* texto / titulares (negro con matiz violeta) */
  --ink-soft:#3a3550;
  --muted:#62626a;       /* Dim Gray — texto secundario */
  --bg:#ffffff;
  --tint:#f5f1ff;        /* lavanda muy suave */
  --cream:#fbf7ef;
  --line:#eae5f4;
  --line-strong:#ddd5ee;

  /* --- Tipografía --- */
  --display:"Zamora", "Trebuchet MS", system-ui, sans-serif;
  --body:"Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* --- Radios --- */
  --r-xs:10px; --r-sm:14px; --r:20px; --r-lg:30px; --r-xl:44px; --pill:999px;

  /* --- Sombras --- */
  --sh-sm:0 2px 8px rgba(23,19,38,.06);
  --sh:0 14px 40px -18px rgba(23,19,38,.28);
  --sh-brand:0 18px 44px -20px rgba(128,79,255,.55);

  /* --- Layout --- */
  --maxw:1240px;
  --gut:clamp(20px, 5vw, 56px);
}

/* ============================ Reset ============================ */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{
  font-family:var(--body);
  color:var(--ink);
  background:var(--bg);
  font-size:17px;
  line-height:1.6;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
ul{list-style:none;padding:0}
::selection{background:var(--brand);color:#fff}

/* ============================ Tipografía ============================ */
.display,h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.02;letter-spacing:-.01em;color:var(--ink)}
.t-hero{font-family:var(--display);font-size:clamp(3.1rem,7.6vw,6.6rem);line-height:.98;letter-spacing:-.02em}
.t-xl{font-family:var(--display);font-size:clamp(2.4rem,5vw,4.2rem);line-height:1.0;letter-spacing:-.015em}
.t-lg{font-family:var(--display);font-size:clamp(1.9rem,3.4vw,2.9rem);line-height:1.04}
.t-md{font-family:var(--display);font-size:clamp(1.35rem,2.2vw,1.8rem);line-height:1.1}
.lead{font-size:clamp(1.08rem,1.6vw,1.3rem);line-height:1.55;color:var(--ink-soft)}
.eyebrow{font-family:var(--body);font-weight:700;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--brand);display:inline-flex;align-items:center;gap:.55em}
.muted{color:var(--muted)}
.italic{font-style:italic}
p{text-wrap:pretty}

/* ============================ Layout utils ============================ */
.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.section{padding-block:clamp(64px,9vw,128px)}
.section--tight{padding-block:clamp(48px,6vw,84px)}
.center{text-align:center}
.stack{display:flex;flex-direction:column}
.row{display:flex;align-items:center}
.wrap{flex-wrap:wrap}
.grid{display:grid;gap:clamp(18px,2.4vw,30px)}
.gap-sm{gap:12px}.gap{gap:20px}.gap-lg{gap:32px}
@media(max-width:860px){.section{padding-block:clamp(52px,11vw,80px)}}

/* ============================ Asterisco ============================ */
.ast{display:inline-block;color:var(--brand);width:1em;height:1em;flex:none}
.ast svg{width:100%;height:100%;display:block}
.spin-slow{animation:spin 26s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.spin-slow{animation:none}}

/* ============================ Botones ============================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  font-family:var(--body);font-weight:600;font-size:1rem;line-height:1;
  padding:1.02em 1.7em;border-radius:var(--pill);
  transition:transform .25s cubic-bezier(.2,.8,.2,1), background .2s, box-shadow .25s, color .2s;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-3px)}
.btn:active{transform:translateY(-1px)}
.btn--primary{background:var(--brand);color:#fff;box-shadow:var(--sh-brand)}
.btn--primary:hover{background:var(--brand-600)}
.btn--ink{background:var(--ink);color:#fff}
.btn--ink:hover{background:#000}
.btn--ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.6px var(--line-strong)}
.btn--ghost:hover{box-shadow:inset 0 0 0 1.6px var(--brand);color:var(--brand)}
.btn--light{background:#fff;color:var(--ink)}
.btn--light:hover{background:var(--brand-50);color:var(--brand)}
.btn--sm{padding:.7em 1.15em;font-size:.92rem}
.btn .ast{width:1.05em;height:1.05em;color:currentColor}

/* ============================ Chips / etiquetas ============================ */
.chip{
  display:inline-flex;align-items:center;gap:.5em;
  font-family:var(--body);font-weight:600;font-size:.82rem;letter-spacing:.01em;
  padding:.5em .9em;border-radius:var(--pill);
  background:var(--brand-50);color:var(--brand-700);
  box-shadow:inset 0 0 0 1px var(--line);
}
.chip .ast{width:.85em;height:.85em}
.chip--solid{background:var(--brand);color:#fff;box-shadow:none}

/* color helpers for accents */
.c-orange{--brand:var(--orange);--brand-700:#b34d09;--brand-50:#fdf0e6;--brand-600:#cf5a0d;--sh-brand:0 18px 44px -20px rgba(224,101,15,.5)}
.c-melon{--brand:#d96b6a;--brand-700:#b14e4d;--brand-50:#fceeed;--brand-600:#cf5c5b;--sh-brand:0 18px 44px -20px rgba(224,138,137,.55)}
.c-amber{--brand:var(--amber);--brand-700:#a9760f;--brand-50:#fdf4e2;--brand-600:#c98c16;--sh-brand:0 18px 44px -20px rgba(222,158,30,.5)}
.c-sky{--brand:var(--sky);--brand-700:#0a6f9b;--brand-50:#e6f5fc;--brand-600:#0d8cc1;--sh-brand:0 18px 44px -20px rgba(15,158,217,.5)}
.c-shamrock{--brand:var(--shamrock);--brand-700:#0f5a51;--brand-50:#e4f3f1;--brand-600:#14726684;--sh-brand:0 18px 44px -20px rgba(23,128,115,.5)}

/* ============================ Cards ============================ */
.card{
  background:#fff;border-radius:var(--r-lg);padding:clamp(22px,2.4vw,34px);
  box-shadow:var(--sh-sm);border:1px solid var(--line);
  transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s;
  position:relative;
}
.card--hover:hover{transform:translateY(-6px);box-shadow:var(--sh)}
.card--flat{box-shadow:none}

/* ============================ Placeholders de imagen ============================ */
.ph{
  position:relative;overflow:hidden;border-radius:var(--r-lg);
  background:
    repeating-linear-gradient(135deg, rgba(128,79,255,.07) 0 11px, rgba(128,79,255,.02) 11px 22px),
    var(--tint);
  display:flex;align-items:center;justify-content:center;min-height:200px;color:var(--brand-700);
}
.ph::after{
  content:attr(data-ph);
  font-family:"Roboto Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.74rem;letter-spacing:.05em;text-transform:uppercase;
  color:var(--brand-700);opacity:.72;text-align:center;padding:1em 1.4em;max-width:80%;
  border:1.4px dashed rgba(128,79,255,.4);border-radius:var(--pill);background:rgba(255,255,255,.55);
}
/* duotono: foto con overlay de color de marca */
.ph--duo{
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.10) 0 13px, rgba(255,255,255,0) 13px 26px),
    linear-gradient(150deg, var(--orange), var(--brand) 78%);
}
.ph--duo::after{color:#fff;border-color:rgba(255,255,255,.7);background:rgba(0,0,0,.12)}
.ph--purple{background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.08) 0 13px, rgba(255,255,255,0) 13px 26px),
    var(--brand)}
.ph--purple::after{color:#fff;border-color:rgba(255,255,255,.6);background:rgba(0,0,0,.10)}

/* ============================ Header / Nav ============================ */
.nav{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav__in{display:flex;align-items:center;gap:28px;height:74px}
.nav__logo{height:26px;width:auto}
.nav__links{display:flex;align-items:center;gap:26px;margin-left:8px}
.nav__links a{font-weight:500;font-size:.97rem;color:var(--ink-soft);transition:color .2s;position:relative}
.nav__links a:hover{color:var(--brand)}
.nav__right{margin-left:auto;display:flex;align-items:center;gap:14px}
.iconbtn{width:44px;height:44px;border-radius:var(--pill);display:flex;align-items:center;justify-content:center;color:var(--ink);transition:background .2s,color .2s;position:relative}
.iconbtn:hover{background:var(--brand-50);color:var(--brand)}
.cartdot{position:absolute;top:7px;right:7px;width:17px;height:17px;border-radius:50%;background:var(--orange);color:#fff;font-size:.62rem;font-weight:700;display:flex;align-items:center;justify-content:center}
.nav__burger{display:none}
@media(max-width:980px){
  .nav__links{display:none}
  .nav__burger{display:flex}
}

/* ============================ Footer ============================ */
.footer{background:var(--ink);color:#fff;padding-block:clamp(56px,7vw,92px) 36px}
.footer a{color:rgba(255,255,255,.72);transition:color .2s}
.footer a:hover{color:#fff}
.footer h4{font-family:var(--body);font-weight:700;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:18px}

/* ============================ Marquee ============================ */
.marquee{overflow:hidden;white-space:nowrap;display:flex}
.marquee__t{display:inline-flex;align-items:center;gap:.5em;animation:marq 28s linear infinite}
@keyframes marq{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.marquee__t{animation:none}}

/* ============================ Reveal on scroll ============================ */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}

/* ============================ Misc ============================ */
.divider-ast{display:flex;align-items:center;gap:18px;color:var(--line-strong)}
.divider-ast::before,.divider-ast::after{content:"";height:1px;background:var(--line);flex:1}
.pill-tab{padding:.7em 1.2em;border-radius:var(--pill);font-weight:600;font-size:.95rem;color:var(--ink-soft);transition:.2s;cursor:pointer}
.pill-tab[aria-selected="true"]{background:var(--ink);color:#fff}
.pill-tab:hover{color:var(--brand)}

/* ============================ Botón circular con flecha ============================ */
.arrowbtn{
  width:54px;height:54px;border-radius:var(--pill);flex:none;
  display:flex;align-items:center;justify-content:center;
  background:#fff;color:var(--ink);box-shadow:var(--sh-sm);
  transition:transform .25s, background .2s, color .2s;
}
.arrowbtn:hover{transform:translateY(-3px) scale(1.04)}
.arrowbtn--orange{background:var(--orange);color:#fff}
.arrowbtn--brand{background:var(--brand);color:#fff}
.arrowbtn--ink{background:var(--ink);color:#fff}
.arrowbtn--ghost{background:rgba(255,255,255,.16);color:#fff;box-shadow:inset 0 0 0 1.4px rgba(255,255,255,.5)}
.arrowbtn svg{width:42%;height:42%}
.arrowbtn--lg{width:62px;height:62px}

/* ============================ Cápsula sobre foto (lozenge) ============================ */
.photo{position:relative;border-radius:var(--r-lg);overflow:hidden}
.photo .ph{border-radius:0;height:100%;width:100%}
.lozenge{
  position:absolute;left:0;bottom:0;max-width:84%;
  background:var(--ink);color:#fff;padding:20px 26px 22px;
  border-radius:0 var(--r-lg) 0 var(--r-lg);
}
.lozenge--top{top:0;bottom:auto;border-radius:0 0 var(--r-lg) 0}
.lozenge--white{background:#fff;color:var(--ink)}
.lozenge--brand{background:var(--brand);color:#fff}
.lozenge__k{font-family:var(--body);font-weight:700;font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;opacity:.8;margin-bottom:7px;display:block}
.lozenge__t{font-family:var(--display);font-size:clamp(1.15rem,1.7vw,1.5rem);line-height:1.05}

/* ============================ Tags pastel ============================ */
.tag{display:inline-flex;align-items:center;font-family:var(--body);font-weight:600;font-size:.78rem;padding:.42em .82em;border-radius:var(--pill);background:var(--brand-50);color:var(--brand-700)}
.tag--purple{background:#efe7ff;color:#5a2fd6}
.tag--amber{background:#fbf0d8;color:#9a6c10}
.tag--green{background:#dcf0e7;color:#0f6657}
.tag--melon{background:#fce4e2;color:#b14e4d}
.tag--sky{background:#e0f1fb;color:#0a6f9b}

/* ============================ Bento / tiles ============================ */
.bento{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:minmax(120px,auto);gap:clamp(12px,1.5vw,20px)}
.tile{border-radius:var(--r-lg);padding:clamp(20px,2vw,30px);display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden;min-height:150px}
.tile--ink{background:var(--ink);color:#fff}
.tile--brand{background:var(--brand);color:#fff}
.tile--green{background:var(--british);color:#fff}
.tile--shamrock{background:var(--shamrock);color:#fff}
.tile--orange{background:var(--orange);color:#fff}
.tile--melon{background:#e08a89;color:#fff}
.tile--tint{background:var(--tint);color:var(--ink)}
.tile--cream{background:var(--cream);color:var(--ink)}
.tile__big{font-family:var(--display);font-size:clamp(2.4rem,4.4vw,4rem);line-height:.92;letter-spacing:-.02em}
@media(max-width:860px){.bento{grid-template-columns:repeat(6,1fr)}}

/* ============================ Gráfico concéntrico ============================ */
.rings line, .rings circle{stroke:currentColor;fill:none;stroke-width:1}

/* ============================ Card de servicio con icono asterisco ============================ */
.svc{display:flex;flex-direction:column;gap:16px}
.svc__ic{width:56px;height:56px;border-radius:var(--r);display:flex;align-items:center;justify-content:center;background:var(--brand-50);color:var(--brand)}
.svc__ic .ast{width:55%;height:55%}

/* ============================ Acordeón ============================ */
.acc__item{border-top:1px solid var(--line)}
.acc__item:last-child{border-bottom:1px solid var(--line)}
.acc__head{width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:24px 4px;text-align:left;font-family:var(--display);font-size:clamp(1.15rem,1.9vw,1.5rem);color:var(--ink)}
.acc__head .pm{flex:none;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--brand-50);color:var(--brand);transition:.3s;font-size:1.2rem}
.acc__item[open] .pm{background:var(--brand);color:#fff;transform:rotate(45deg)}
.acc__body{padding:0 4px 26px;color:var(--muted);max-width:62ch}
.acc__head::-webkit-details-marker{display:none}
details>summary{list-style:none;cursor:pointer}
details>summary::-webkit-details-marker{display:none}