/* =========================================================
   Lovely Planners — CSS UNIFICADO (solo variables en :root)
   ========================================================= */

/* =========================
   TOKENS GLOBALES ( :root )
   ========================= */
:root{

  
  /* Fuente principal (Avenir con fallbacks) */
  --font-ui-v2: "Avenir Next", Avenir, Inter, system-ui, -apple-system, "Segoe UI",
             Roboto, "Helvetica Neue", Arial, sans-serif;

  /* 11 pt ≈ 14.667px ≈ 0.92rem (mejor usa rem) */
  --font-btn-size: 0.92rem;
  /* Tracking 200 = 200/1000em = 0.2em (≈ 2.93px a 11pt) */
  --font-btn-letter: 0.2em;
  --font-btn-weight: 700;

  /* ---- Paleta base (estática) ---- */
  --color-primary: #d16880;     /* rosa marca */
  --color-primary-v2: #f43980;     /* rosa marca v2*/
  --color-secondary: #7C255B;   /* acento profundo */
  --color-accent: #ba0046;      /* variante */
  --color-white: #ffffff;
  --color-black: #1b1b1b;
  --color-gray-900: #121217;
  --color-gray-800: #15151A;
  --color-gray-700: #2A2A34;
  --color-gray-100: #F7F6F6;
  --color-negro-tx1: #252525;

  --textcat: var(--color-negro-tx1);
  /* ---- Alias de compatibilidad / énfasis ---- */
  --brand: var(--color-primary);
  --brandgradiant: linear-gradient(135deg, var(--color-primary), var(--color-primary-v2));
  --accent: var(--color-primary);
  --rose: var(--color-primary);
  --rose-2: var(--color-accent);

  /* ---- Tintas y superficies globales ---- */
  --bg: var(--color-primary);   /* fondo general del shell (puedes cambiarlo a #fff si prefieres) */
  --surface: var(--color-gray-900);
  --card: #FFFFFF;
  --ink: #EAEAF0;               /* texto en layouts oscuros */
  --inktext: var(--color-black);/* texto en layouts claros */
  --muted: #b4b4b1;
  --ring: rgba(255, 0, 157, 0.45);
  --border-dark: var(--color-gray-700);
  --shadow: rgba(0,0,0,.25);

  /* ---- Fondos suaves / Formularios claros ---- */
  --bgtk: #f0efee;
  --bgcot: #f9f9f9;
  --inkcot: #b4b4b1;
  --ink-60: #b4b4b1;
  --ring-2: rgba(0,0,0,.06);

  /* ---- Header ---- */
  --header-bg: #e1018b;
  --header-ink: #ffffff;
  --header-h: 60px;

  /* ---- Footer ---- */
  --footer-bg:#252525;
  --footer-ink:#F0EEF0;
  --footer-ink-70: rgba(240,238,240,.75);
  --footer-ink-50: rgba(240,238,240,.55);
  --footer-accent: var(--color-primary);
  --footer-ring: rgba(255,255,255,.12);

  /* ---- Radios / sombras / tipografías ---- */
  --radius: 14px;
  --radius-lg: 18px;
  --soft-shadow: 0 8px 24px rgba(0,0,0,.05);
  --font-base-size: 13.333px; /* ≈ 10pt */
  --font-ui: "Avenir Next", Avenir, Inter, system-ui, -apple-system, "Segoe UI",
             Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-serif: Georgia, ui-serif, serif;

  /* ====== BLOG (tokens solo en :root) ====== */
  --blog-bg: #c19aa2;
  --blog-card: #eaeaea;
  --blog-ink: #1b1b1b;
  --blog-muted: #564d57;
  --blog-surface: #121217;
  --blog-chip-bg: #1f1f27;
  --blog-chip-border: #2a2a34;
  --blog-chip-ink: #d8d8e2;
  --blog-card-grad-from: #ea25d3ad;
  --blog-card-grad-to: #000000;

  --text-p-color: #252525;
  
  --font-display-title: "Bodoni 72", "Bodoni Moda", "Libre Bodoni",
                  Didot, Baskerville, "Times New Roman", serif;
  --play-stroke-color: #fff;
  --play-stroke-width: 2px;
}

/* Base tipográfica mínima (shell global) */
html,body{ 
  margin:0; 
  font-family: var(--font-ui);
  font-size: var(--font-base-size);
  color: var(--ink); 
}


/* =================
   HEADER / NAVBAR
   ================= */
#site-header{ position:sticky; top:0; z-index:50; 
    background: #00000059; text-transform: uppercase;  }
.lp-nav{
  max-width:1100px; margin:0 auto; height:var(--header-h);
  display:flex; align-items:center; justify-content:space-between; padding:0 16px; gap:16px;
}
.lp-logo img{ display:block; height:60px; width:auto; object-fit:contain; }
.desktop-only{ display:flex; align-items:center; gap:22px; }
.mobile-only{ display:none; }

.lp-row{ display:flex; align-items:center; gap:22px; }
.lp-row a{
  text-decoration:none; color:var(--header-ink); font-weight:600; position:relative; padding:6px 0;
}
.lp-row a::after{
  content:""; position:absolute; left:0; right:0; bottom:-7px; height:2px;
  transform:scaleX(0); transform-origin:right; background:var(--brand); transition:.2s;
}
.lp-row a:hover::after{ transform:scaleX(1); transform-origin:left; }

/* Idioma (desktop) */
.lang{ position:relative; border:none; border-radius:10px; padding:6px 10px; cursor:pointer; user-select:none; }
.lang-label{ color:var(--header-ink); }
.lang-list{
  position:absolute; right:0; top:calc(100% + 8px); background:#fff; border:1px solid var(--ring);
  border-radius:12px; padding:6px; min-width:80px; box-shadow:0 8px 24px rgba(0,0,0,.08); display:none; z-index:70;
}
.lang-list::before{
  content:''; position:absolute; top:-6px; right:14px;
  border:6px solid transparent; border-bottom-color:#fff; filter:drop-shadow(0 -1px 1px rgba(0,0,0,.1));
}
.lang.open .lang-list{ display:block; }
.lang-list button{
  width:100%; background:none; border:0; text-align:left; padding:8px 10px; border-radius:8px; cursor:pointer; font-weight:600; color:#333;
}
.lang-list button:hover{ background:#f3f4f6; }

/* Hamburguesa */
.lp-toggle{ display:none; width:42px; height:42px; border:0; background:transparent; cursor:pointer; }
.lp-toggle .bar{ display:block; width:24px; height:2px; background:#fff; margin:5px auto; transition:transform .25s, opacity .25s; }

/* Menú base (desktop) */
.lp-menu{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; }

/* Backdrop */
.nav-backdrop{
  position:fixed; left:0; right:0; top:var(--header-h); bottom:0;
  background:rgba(0,0,0,.35); opacity:0; visibility:hidden; pointer-events:none; z-index:25;
  transition:opacity .25s, visibility 0s .25s;
}
.nav-backdrop.show{ opacity:1; visibility:visible; pointer-events:auto; transition:opacity .25s; }
body.nav-open{ overflow:hidden; }

/* Mobile */
@media (max-width:900px){
  .lp-toggle{ display:block; }
  .desktop-only{ display:none; }
  .mobile-only{ display:block; }
  .lp-menu{
    position:fixed; left:0; right:0; top:var(--header-h); bottom:0;
    background:#fff; padding:16px; overflow:auto;
    visibility:hidden; opacity:0; pointer-events:none;
    transform:translateY(8px);
    transition:opacity .25s, transform .25s, visibility 0s .25s;
    z-index:100; box-shadow:0 12px 28px rgba(0,0,0,.18);
  }
  .lp-menu.is-open{
    visibility:visible; opacity:1; pointer-events:auto;
    transform:none; transition:opacity .25s, transform .25s;
  }

  .lp-sheets{ height:100%; width: 100%;}
  .lp-sheet{ display:none; }
  .lp-sheet.is-active{ display:block; }

  .menu-link{ 
        display: block;
        color: #111;
        text-decoration: none;
        font-weight: 600;
        padding: 12px 4px;
        width: 100%;
        text-align: left;
        border: none;
        background: none; 
    }
  .menu-link:hover{ background:#f3f4f6; }

  .sheet-header{ display:flex; align-items:center; gap:0; padding:4px 0 12px; border-bottom:1px solid #eee; margin-bottom:12px; color: rgb(21, 21, 21); }
  .sheet-back{ background:none; border:0; font-size:26px; line-height:1; cursor:pointer; padding:4px 8px; }
  .sheet-body .lang-opt{ width:100%; text-align:left; background:none; border:0; padding:12px 6px; border-radius:8px; cursor:pointer; font-weight:600; }
  .sheet-body .lang-opt:hover{ background:#f3f4f6; }

  .lp-toggle[aria-expanded="true"] .bar:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .lp-toggle[aria-expanded="true"] .bar:nth-child(2){ opacity:0; }
  .lp-toggle[aria-expanded="true"] .bar:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
}

@media (max-width:480px){
  .lp-nav{ height:56px; }
}


/* =========
   FOOTER
   ========= */
#site-footer{ background:var(--footer-bg); color:var(--footer-ink); }
.ft{ max-width:1100px; margin:0 auto; padding:36px 16px 24px; }
.ft-grid{ display:grid; grid-template-columns: 1.2fr 1fr 1fr; gap:28px; }
@media (max-width:960px){ .ft-grid{ grid-template-columns: 1fr 1fr } }
@media (max-width:640px){ .ft-grid{ grid-template-columns: 1fr } }

.ft-brand{ display:flex; flex-direction:column; gap:10px; min-width:0; }
.ft-brand img{ width:auto; object-fit:contain; display:block; }
.ft-tag{ color:var(--footer-ink-70); font-weight:500; line-height:1.5; }

.ft-title{
  color:var(--footer-ink-70); text-transform:uppercase; letter-spacing:.08em;
  font-weight:800; font-size:.86rem; margin:4px 0 10px;
}
.ft-list{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.ft-list a{ color:var(--footer-ink); text-decoration:none; font-weight:600; display:inline-flex; align-items:center; gap:8px; }
.ft-list a:hover{ color:#fff; text-decoration:underline; text-underline-offset:3px; }

.ft-contact{ display:grid; gap:8px; }
.ft-contact a{ color:var(--footer-ink); text-decoration:none; }
.ft-contact a:hover{ color:#fff; text-decoration:underline; text-underline-offset:3px; }

.ft-social{ display:flex; gap:10px; margin-top:8px; }
.ft-social a{
  width:36px; height:36px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,.06); border:1px solid var(--footer-ring);
  transition: transform .12s ease, background .12s ease, border-color .12s;
}
.ft-social a:hover{ transform: translateY(-2px); background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.18); }
.ft-social svg{ width:18px; height:18px; fill:var(--footer-ink-70) }

.ft-bottom{
  margin-top:22px; padding-top:14px; border-top:1px solid var(--footer-ring);
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
}
.ft-copy{ color:var(--footer-ink-50); font-size:.92rem }
.ft-legal{ display:flex; gap:14px; flex-wrap:wrap }
.ft-legal a{ color:var(--footer-ink-70); text-decoration:none; font-weight:600;
    fill: white; }
.ft-legal a:hover{ color:#fff; text-decoration:underline; text-underline-offset:3px; }

.ft-cta{
  margin-top:10px; display:inline-flex; align-items:center; gap:8px;
  padding:10px 12px; border-radius:12px; border:1px solid #fff;
  background: var(--brandgradiant);
  color:#fff; text-decoration:none;
  /*box-shadow:0 8px 18px rgba(149,80,106,.28);*/
}
.ft-cta:hover{ filter:brightness(1.05) }
.ft-cta svg{ width:18px; height:18px; fill:#fff }


/* ============================
   SECCIÓN VÍDEO — Tere y Karen
   ============================ */
.tereykaren{
  background: var(--bgtk);
  padding: clamp(24px, 5vw, 56px) 16px;
}
.tk-wrap{
  max-width: 1100px; margin: 0 auto;
  display: grid; gap: clamp(20px, 4vw, 48px);
  grid-template-columns: 1fr 1fr; align-items: center;
}
.tk-media{
  position: relative; margin: 0; border-radius: var(--radius);
  overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,.08);
}
.tk-video{
  width: 100%; height: 100%; aspect-ratio: 4/5;
  object-fit: cover; display: block; filter: saturate(1.02) contrast(1.02);
}
.tk-play{
  position: absolute; inset: 0; display: grid; place-items: center;
  background: none; border: 0; cursor: pointer;
  opacity: 1; transform: translateZ(0) scale(1);
  transition: opacity .35s ease, transform .35s ease, filter .35s ease;
  pointer-events: auto;
}
#tereykaren.is-playing .tk-play{ opacity: 0; transform: translateZ(0) scale(.98); pointer-events: none; }
#tereykaren.is-paused .tk-play,
#tereykaren.is-ended  .tk-play{ opacity: 1; transform: translateZ(0) scale(1); pointer-events: auto; }

.tk-play .play-base,
.tk-play .play-fill{
  font-weight: 600; letter-spacing: .18em;
  font-size: clamp(28px, 8vw, 92px); line-height: 1; user-select: none;
  font-family: var(--font-display-title);
}
.tk-play .play-base{
  color: transparent;                      /* sin relleno */
  -webkit-text-stroke: var(--play-stroke-width) var(--play-stroke-color);
  text-shadow: none;
}
@supports not (-webkit-text-stroke: 1px #000) {
  .tk-play .play-base{
    /* “falso” contorno con sombras en 8 direcciones */
    text-shadow:
      1px 0 var(--play-stroke-color),
     -1px 0 var(--play-stroke-color),
      0 1px var(--play-stroke-color),
      0 -1px var(--play-stroke-color),
      1px 1px var(--play-stroke-color),
     -1px -1px var(--play-stroke-color),
      1px -1px var(--play-stroke-color),
     -1px 1px var(--play-stroke-color);
  }
}
.tk-play .play-fill{
  position: absolute; color: #fff;
  text-shadow: 0 1px 8px rgba(0,0,0,.15);
  clip-path: inset(100% 0 0 0 round 0); transition: clip-path .5s cubic-bezier(.2,.8,.2,1);
}


/* Hover/focus: se “llena” en blanco */
.tk-media:hover .play-fill,
.tk-play:focus-visible .play-fill{
  clip-path: inset(0 0 0 0);
}
.tk-media:hover .play-fill, .tk-play:focus-visible .play-fill{ clip-path: inset(0 0 0 0 round 0); }

.tk-dim{
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(60% 60% at 50% 50%, rgba(0,0,0,0.35), rgba(0,0,0,0.6)),
    linear-gradient(to bottom, rgba(0,0,0,0.15), rgba(0,0,0,0.45));
  opacity: 0; transition: opacity .45s ease;
}

.tk-copy{ color: var(--inktext); }
.tk-title{
  font-weight: 600; letter-spacing: .08em; line-height: 1.05;
  margin: 0 0 16px; font-size: clamp(2.1rem, 4vw + 1rem, 4rem);color: var(--text-p-color);
  font-family: var(--font-display-title);
}
.tk-copy p{
  margin: 10px 0; /*font-size: clamp(14px, 1.6vw, 16px);*/
  line-height: 1.6; color: var(--text-p-color);
}
.tk-btn{
  display: inline-block; margin-top: 18px;
  background: #fff; color: var(--brand); text-decoration: none; letter-spacing: .12em;
  padding: 14px 40px; border-radius: 36px; /*box-shadow: 0 6px 18px rgba(123,0,90,.1);*/
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease; border: var(--brand) solid 1px;
  font-family: var(--font-ui-v2);
  font-size:   var(--font-btn-size);
  font-weight: var(--font-btn-weight);
}
.tk-btn:hover{ background: var(--brandgradiant); color:#fff; }

@media (max-width: 860px){
  .tk-wrap{ grid-template-columns: 1fr; }
  .tk-copy{ order: 1; text-align: left; }
  .tk-media{ order: 2; }
  .tk-title{ margin-bottom: 10px; }
}
.tk-play:focus-visible{ outline: 2px solid #fff8; outline-offset: 4px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce){
  .tk-play, .tk-dim, .tk-play .play-fill { transition: none; }
}


/* ==================
   PORTADA — Slider
   ================== */
.portada{
  --offset: 0px; --fade-ms: 700ms; --dot-size: 9px; --ctrl-size: 44px;
  position: relative; /*min-height: calc(100vh - var(--offset));*/min-height: 100vh;
  overflow: hidden; color: #fff; background: #111; isolation: isolate;
}
.portada .lp-slider{ position:absolute; inset:0; }
.lp-slider .layer{ position:absolute; inset:0; opacity:0; transition: opacity var(--fade-ms) ease; will-change: opacity; }
.lp-slider .layer.active, .lp-slider .layer.in{ opacity:1; z-index:0; }
.lp-slider .layer > img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center; user-select:none; -webkit-user-drag:none; pointer-events:none;
}
.portada .lp-prev, .portada .lp-next{
  position:absolute; top:50%; transform:translateY(-50%);
  width:var(--ctrl-size); height:var(--ctrl-size);
  border:none; border-radius:999px; background:rgba(255,255,255,.18);
  display:grid; place-items:center; cursor:pointer; z-index:2;
  transition:background .2s, opacity .2s, transform .2s;
}
.portada .lp-prev{ left:14px; } .portada .lp-next{ right:14px; }
.portada .lp-prev:hover, .portada .lp-next:hover{ background:rgba(255,255,255,.3); }
.portada .lp-prev:focus-visible, .portada .lp-next:focus-visible{ outline:2px solid #fff; }
.portada .lp-prev svg, .portada .lp-next svg{ width:18px; height:18px; fill:#fff; }
.portada .lp-dots{
  position:absolute; left:50%; bottom:16px; transform:translateX(-50%);
  display:flex; gap:10px; z-index:2;
}
.portada .lp-dots button{
  width:var(--dot-size); height:var(--dot-size); border-radius:999px; border:none; cursor:pointer; padding:0;
  background:rgba(255,255,255,.5); transition:transform .2s, background .2s;
}
.portada .lp-dots button[aria-current="true"]{ background:#fff; transform:scale(1.2); }
@media (prefers-reduced-motion: reduce){
  .lp-slider .layer{ transition:none; }
  .portada .lp-prev, .portada .lp-next{ transition:none; }
  .portada .lp-dots button{ transition:none; }
}
@media (max-width: 640px){
  .portada .lp-prev, .portada .lp-next{ --ctrl-size: 40px; }
  .portada .lp-dots{ bottom:12px; }
}


/* ==========================
   PASS-IMAGE — Marquee
   ========================== */
/* ==========================
   PASS-IMAGE — Marquee (cuadros + placeholder con hover)
   ========================== */
.pass-image{ background:var(--bgcot); overflow:hidden; padding:22px 0; }
.pi-wrap{ display:grid; gap:18px; }

/* desvanecer extremos */
.pi-row{
  overflow:hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

/* pista animada */
.pi-track{
  --pi-gap:12px;
  --pi-radius:12px;
  --pi-shadow:0 4px 14px rgba(0,0,0,.08);
  --size: 200px;                 /* se define por fila vía inline style */
  display:flex;
  gap:var(--pi-gap);
  width:max-content;
  animation: pi-marquee var(--dur, 40s) linear infinite;
  will-change: transform;
}
.pi-row.reverse .pi-track{ animation-direction: reverse; }

/* ====== Ítems cuadrados ====== */
.pi-item{
  position: relative;
  flex: 0 0 auto;
  width: var(--size);
  height: var(--size);
  border-radius: var(--pi-radius);
  overflow: hidden;
  box-shadow: var(--pi-shadow);
}

/* imagen normal */
.pi-img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* placeholder gris que revela imagen en hover */
.pi-ph{
  position: relative;
  background-color: var(--ph-bg, #f0efec);
  background-image: var(--ph-img, none);
  background-size: cover;
  background-position: center;
}
.pi-ph::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  background: var(--ph-bg, #f0efec);
  transition: opacity .35s ease;
  opacity: 1;
  pointer-events: none;
  z-index: 0;
}
/* al hover/focus revela la imagen */
.pi-ph:hover::after,
.pi-ph:focus-visible::after{
  opacity: 0;
}
.pi-ph::before{
  content: attr(data-label);        /* <- lo provee el JS */
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-display, var(--font-ui, sans-serif));
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--ph-label, #b4b4b1);  /* gris suave */
  font-size: clamp(14px, 1.6vw, 22px);
  opacity: 1;
  transition: opacity .35s ease;
  pointer-events: none;
  z-index: 1;                       /* encima del velo */
}

.pi-ph:hover::after,
.pi-ph:focus-visible::after{ opacity: 0; }
.pi-ph:hover::before,
.pi-ph:focus-visible::before{ opacity: 0; }

@media (prefers-reduced-motion: reduce){
  .pi-track{ animation-duration: 0s; animation-iteration-count: 0; }
}

@keyframes pi-marquee{ to{ transform: translateX(-50%); } }


/* ============================
   COTIZADOR — UI (claro)
   ============================ */
.cotizador{ background:var(--bgcot); padding:48px 16px; }
.cotizador__wrap{ max-width:1100px; margin:0 auto; font-family:var(--font-ui); color:var(--inkcot); }
.cotizador__header{ margin-bottom:28px; text-align:left; }
.cotizador__title{
  font: 700 clamp(26px,3.8vw,52px)/1.05 var(--font-ui);
  letter-spacing:.07em; text-transform:uppercase; color:var(--rose);
}
.cotizador__subtitle{ color:var(--ink-60); margin-top:6px }

.cotizador__grid{ display:grid; gap:24px; grid-template-columns:minmax(0,1fr) 380px; }
@media (max-width:980px){ .cotizador__grid{ grid-template-columns:1fr } }

.card{
  background:var(--card); /*border:1px solid var(--ring);*/ border-radius:var(--radius-lg);
  box-shadow:var(--soft-shadow); padding:0; margin-bottom:18px; color:var(--inkcot);
}

.section__head{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 16px 10px; }
.section__legend,.card__title{ font-weight:800; color:var(--text-p-color); letter-spacing:.02em; margin:0; }
.section__toggle{
  border:1px solid var(--ring); background:#fff; width:28px; height:28px;
  border-radius:8px; font-weight:900; cursor:pointer; line-height:1;
}
.section__content{ padding:10px 16px 16px; }
.section--collapsed .section__content{ display:none; }

.guests label{ font-weight:600; color:var(--ink-60) }
#guestsRange{ width:100%; margin:10px 0;  }
.guests__row{ display:flex; align-items:center; gap:10px }
.guests__row input{
  width:110px; padding:10px 12px; border-radius:12px; border:1px solid var(--ring);
  background:#fff; font-weight:600; color:var(--inkcot);
}

/* Opciones */
.opts{ display:grid; gap:10px }
.opt{
  display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:12px;
  border:1px solid var(--ring); border-radius:14px; padding:12px 14px; background:#fff;
  transition:box-shadow .18s, border-color .18s, background .18s; cursor:pointer;
}
.opt:hover{ box-shadow:0 6px 16px rgba(0,0,0,.06) }
.opt--selected{ border-color:color-mix(in srgb, var(--rose) 35%, transparent); background:#fff7fa }
.opt__label{ color:var(--inkcot); font-weight:600 }
.opt__price{ font-weight:800; color:var(--rose); text-align:right; justify-self:end; }
.opt input{ justify-self:end; align-self:center; width:18px; height:18px; margin:0; }

.badge{ font-size:.78rem; padding:4px 8px; border-radius:999px; background:#f2edf0; color:var(--ink-60); }

/* Resumen & contacto */
.summary__total{
  display:flex; align-items:center; justify-content:space-between;
  background:linear-gradient(180deg,#fff,#fbf5f7);
  /*border-top:1px solid var(--ring); border-bottom:1px solid var(--ring);*/
  padding:14px 16px;
}
.summary__label{ color:var(--ink-60); font-weight:600 }
.summary__price{ font:800 28px/1.1 var(--font-ui); color:var(--rose) }
.summary__pp{ color:var(--ink-60); margin-top:2px }

.summary__break{ padding:0 0 12px; }
.sumlist{ display:grid; gap:10px; margin:10px 16px 0; list-style:none; padding:0 }
.sum-group{
  border:1px dashed var(--ring); border-radius:12px; padding:10px 12px; background:#fff;
}
.sum-group__top{ display:flex; align-items:center; justify-content:space-between; gap:10px }
.sum-group__title{ font-weight:800; color:var(--inkcot) }
.sum-group__price{ font-weight:800; color:var(--rose) }
.sum-remove{
  border:0; background:none; color:var(--rose-2);
  font-weight:800; border-radius:8px; padding:4px 8px; cursor:pointer;
}
.sum-items{ display:grid; gap:6px; margin-top:8px }
.sum-item{
  display:grid; grid-template-columns: 1fr auto auto; align-items:center; gap:10px;
  background:#fff; border:1px solid var(--ring-2); border-radius:10px; padding:8px 10px;
}
.sum-item__name{ font-weight:600; color:var(--inkcot) }
.sum-item__price{ font-weight:800; color:var(--rose); text-align:right; justify-self:end }
.sum-item__rm{ border:0; background:transparent; cursor:pointer; font-weight:900; color:var(--rose-2);
  width:28px; height:28px; border-radius:8px; line-height:1;
}

.summary__form{ padding:14px 16px 16px }
.summary__form label{ display:block; margin:10px 0 0; color:var(--inkcot); font-weight:700; font-size:.95rem; }
.summary__form input{
  width:90%; margin-top:6px; padding:12px 14px; border-radius:12px; border:1px solid var(--ring);
  background:#fff; color:var(--inkcot); font-weight:600; transition: box-shadow .15s, border-color .15s;
}
.summary__form input::placeholder{ color:#b4a9a9; font-weight:500 }
.summary__form input:focus{
  outline:none; border-color:color-mix(in srgb, var(--rose) 40%, #fff);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--rose) 18%, transparent);
}

/* Botones */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 16px; border-radius:36px; border:0; cursor:pointer;
  background: #fff; 
  color:var(--brand);
  font-weight:800; letter-spacing:.2px; 
  transition: transform .12s ease, filter .12s ease;
  border: 1px solid var(--brand)
}
.btn:hover{ background: var(--brandgradiant); color:#fff}
.btn-secondary{
  background:#fff; color:var(--rose-2);
  border:1px solid color-mix(in srgb, var(--rose) 35%, #e9e9e9);
  box-shadow:0 6px 12px rgba(149,80,106,.08);
}
.btn-secondary:hover{ background:#fff9fb }

.form-actions{ display:flex; gap:10px; margin-top:12px; }
@media (max-width:420px){ .form-actions{ flex-direction:column } }

.form-actions button{
    width: 100%;
}

.hint{ color:var(--ink-60); font-size:.9rem; margin-top:10px }
@media (max-width:980px){ .summary__price{ font-size:24px } }
.section__foot{ margin-top:12px; border-top:1px solid var(--ring-2); padding-top:12px; }
.nav-controls{ display:flex; align-items:center; gap:10px; }
.nav-controls .spacer{ flex:1 }
.btn-ghost[disabled], .btn[disabled]{ opacity:.5; cursor:not-allowed }
.btn-ghost{
  display:inline-flex; 
  align-items:center; 
  justify-content:center; 
  padding:8px 10px;
  border: var(--brand) solid 1px;
  font-weight:800; cursor:pointer;
  box-shadow:0 4px 10px rgba(149,80,106,.06);
  color: var(--brand);
  background: #fff;
}
.btn-ghost:hover{ background: var(--accent); color:#fff }
#resetQuote{ width:100%; }
.card__title{ padding:10px; }


/* ===========================
   CONTACT — Form (claro)
   =========================== */

#lp-contact{
  --accent: var(--brand);
  --accent-2: color-mix(in oklab, var(--brand), white 18%);
  --ink:#14151a; --muted: color-mix(in oklab, var(--ink), white 60%);
  --panel: rgba(255,255,255,.94); --border: color-mix(in oklab, var(--ink), white 85%);
  --ring: color-mix(in oklab, var(--brand), white 70%);
  --wrap: 1060px; --r-xl:26px; --r:16px; --g-xl:28px; --g-lg:22px;
}
#lp-contact .hero{
  position:relative; color:#fff; overflow:clip;
  background:
    /* capa oscura para legibilidad (opcional) */
    linear-gradient(180deg, rgba(15,18,33,.70), rgba(26,33,51,.75) 55%, rgba(32,40,58,.80) 100%),
    /* imagen */
    url("/img/contact-hero.webp") center / cover no-repeat,
    /* tus capas actuales */
    radial-gradient(1100px 540px at 70% -30%,
      color-mix(in oklab, var(--brand), white 52%) 0%, transparent 58%),
    linear-gradient(180deg, #0f1221, #1a2133 55%, #20283a 100%);
}
#lp-contact .hero__inner{ max-width:var(--wrap); margin:0 auto; padding: clamp(64px, 8vw, 120px) 28px; }
#lp-contact .eyebrow{ margin:0 0 .55rem; letter-spacing:.14em; text-transform:uppercase; opacity:.7; font-size:.8rem; font-weight:800 }
#lp-contact h1{
  margin:.2rem 0 .2rem; font-family: ui-serif, Georgia, "Times New Roman", serif;
  font-weight:900; font-size: clamp(2.6rem, 1rem + 4vw, 4rem); text-shadow:0 18px 48px rgba(0,0,0,.28)
}
#lp-contact .sub{ margin:0; opacity:.96; font-size: clamp(1rem, .9rem + .6vw, 1.22rem) }

#lp-contact .progress__txt{ position:absolute; right:28px; top:-2px; transform: translateY(-140%); font-weight:800; color:#4b4e5e; font-size:.8rem }
#lp-contact .wrap{ max-width:var(--wrap); margin: clamp(22px, 4.5vw, 42px) auto; padding:0 28px }
#lp-contact .card{
  background:var(--panel); /*border:1px solid var(--border);*/ border-radius:var(--r-xl);
  backdrop-filter: blur(10px);
  box-shadow:0 28px 72px rgba(15,21,36,.12), 0 1px 0 rgba(255,255,255,.55) inset;
}
#lp-contact .form{ padding: clamp(10px, 3vw, 18px); }

#lp-contact .set{ border:1px dashed color-mix(in oklab, var(--ink), white 84%); border-radius:20px; padding:10px; margin-bottom:var(--g-xl) }
#lp-contact .set legend{ padding:0 12px; font-weight:800; letter-spacing:.2px; color:#2a2c35 }

#lp-contact .row{ display:grid; gap:var(--g-lg) }
#lp-contact .row--2{ grid-template-columns:1fr 1fr }
#lp-contact .row--3{ grid-template-columns:repeat(3, minmax(0,1fr)) }
@media (max-width:860px){ #lp-contact .row--2, #lp-contact .row--3{ grid-template-columns:1fr } }

#lp-contact .field{ position:relative; display:grid; gap:10px; padding: 10px 0; }
#lp-contact .field > label{
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  pointer-events:none; /*background: linear-gradient(180deg, #fff 0 60%, transparent 60%);*/
  padding:0 6px; border-radius:6px; color:var(--muted); font-weight:700; font-size:.94rem;
  transition: transform .16s, color .16s, opacity .16s;
}
#lp-contact .label{ font-weight:800; color:#2a2c35 }
#lp-contact .muted{ color:var(--muted) }

#lp-contact input, #lp-contact select, #lp-contact textarea{
  border-radius:14px; border:1px solid var(--border);
  background: linear-gradient(180deg, #fff, #fafafd);
  color:#14151a; outline:0; padding:14px 16px; height:56px;
  transition:border-color .16s, box-shadow .16s, background .16s; box-shadow:0 1px 0 rgba(0,0,0,.03) inset;
  box-sizing:border-box;
}
#lp-contact textarea{
  max-width: 100%;
  overflow-wrap:anywhere; word-break:break-word; white-space:pre-wrap; resize:vertical;
}
#lp-contact input::placeholder, #lp-contact textarea::placeholder{ color:transparent }
#lp-contact .field:has(input:not(:placeholder-shown)),
#lp-contact .field:has(textarea:not(:placeholder-shown)),
#lp-contact .field:has(input:focus),
#lp-contact .field:has(textarea:focus){ --lift:-26px }
#lp-contact .field:has(input:not(:placeholder-shown)) > label,
#lp-contact .field:has(textarea:not(:placeholder-shown)) > label,
#lp-contact .field:has(input:focus) > label,
#lp-contact .field:has(textarea:focus) > label{
  transform: translateY(-38px) translateX(-20px) scale(.8);
  background: white;
}
#lp-contact .field:has(select) > label{ transform: translateY(-38px) scale(.92); color: var(--muted);background: white;}

#lp-contact input:focus, #lp-contact select:focus, #lp-contact textarea:focus{
  border-color: color-mix(in oklab, var(--brand), black 8%);
  box-shadow: 0 0 0 5px color-mix(in oklab, var(--brand), white 70%); background:#fff;
}

#lp-contact .chips{ display:grid; gap:12px; grid-template-columns: repeat(auto-fill, minmax(210px,1fr)) }
#lp-contact .chips label{
  display:flex; align-items:center; gap:10px; padding:13px 16px; border-radius:999px;
  border:1px solid var(--border); background:#fff; cursor:pointer; user-select:none;
  transition: box-shadow .16s, border-color .16s, background .16s, color .16s, transform .02s;
}
#lp-contact .chips input{ width:18px; height:18px;  }
#lp-contact .chips label:has(input:checked){
  border-color: color-mix(in oklab, var(--brand), white 18%);
  background: color-mix(in oklab, var(--brand), white 90%);
  color: color-mix(in oklab, var(--brand), black 28%);
  box-shadow:0 12px 26px color-mix(in oklab, var(--brand), black 80% / 12%);
}

#lp-contact .counter{ text-align:right; font-size:.82rem; color:var(--muted); margin-top:6px }
#lp-contact .req{ color:var(--muted); font-weight:600; margin-left:.35rem }
#lp-contact .is-error{ border-color:#d43e33 !important; box-shadow:0 0 0 5px rgba(212,62,51,.16) !important }
#lp-contact .is-ok{ border-color:#2fa84f !important; box-shadow:0 0 0 5px rgba(47,168,79,.16) !important }

#lp-contact .actions{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:6px }
#lp-contact .btn{ appearance:none; border:0; cursor:pointer; font-weight:900; letter-spacing:.2px; padding:13px 22px; border-radius:999px }
#lp-contact .btn--primary{
  color:#fff;
  transition: transform .08s, box-shadow .18s, filter .18s;
  background: var(--brand)
}
#lp-contact .btn--primary:hover{ filter:saturate(1.06);  }
#lp-contact .btn--primary:active{ transform: translateY(1px) }
#lp-contact .btn[disabled]{ opacity:.6; cursor:progress }
#lp-contact .btn--ghost{ background:#fff; border:1px solid var(--border); color:#14151a; text-decoration:none; font-weight:800; box-shadow:0 10px 24px rgba(0,0,0,.08) }
#lp-contact .status{ color:var(--muted) }


/* =========================
   CATÁLOGO — Cards + Tabs
   ========================= */
.lp-catalog{ --muted:#475569; --ring:#e5e7eb;
  max-width:1100px; margin:40px auto; padding:0 16px; color:var(--textcat);
}
.lp-cat-bar{ display:flex; align-items:center; gap:12px; margin-bottom:18px; }
.lp-tabs{ display:flex; gap:18px; }
.lp-tabs button{
  appearance:none; border:0; background:none; font-weight:700; font-size:1.05rem; color:var(--muted);
  padding:8px 2px; position:relative; cursor:pointer; outline-offset:3px;
}
.lp-tabs button[aria-selected="true"]{ color:var(--textcat); }
.lp-tabs button[aria-selected="true"]::after{
  content:""; position:absolute; left:0; right:0; bottom:-8px; height:3px; background:var(--brand); border-radius:3px;
}

/* Dropdown móvil */
.lp-cat-select{
  display:none; align-items:center; justify-content:space-between; gap:10px;
  width:100%; background:#fff; border:1px solid var(--ring); border-radius:12px; padding:10px 14px; font-weight:700; cursor:pointer;
}
.lp-cat-select .value{ color:var(--textcat); }
.lp-cat-select .chev{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; opacity:.75 }

.lp-cat-options{
  display:none; list-style:none; margin:6px 0 0; padding:6px;
  border:1px solid var(--ring); border-radius:12px; background:#fff; box-shadow:0 10px 24px rgba(0,0,0,.08);
}
.lp-cat-options.open{ display:block; }
.lp-cat-options li{ padding:10px 12px; border-radius:10px; cursor:pointer; }
.lp-cat-options li:hover{ background:#f8fafc; }

/* Grid */
.lp-cat-grid{ display:grid; grid-template-columns: 1.05fr .95fr; gap:24px; align-items:start; }
.lp-preview{ position:sticky; top:12px; }
.lp-preview img{ width:100%; display:block; border-radius:16px; background:#f1f5f9; /*aspect-ratio:4/3;*/ object-fit:cover; }

/* Listado */
.lp-list{ display:flex; flex-direction:column; gap:12px; }
.lp-card{
  /*border:1px solid var(--ring);*/ border-radius:16px; padding:16px; background:#fff;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.lp-card:hover{ transform:translateY(-1px); box-shadow:0 8px 24px rgba(0,0,0,.06); border-color:#e2e8f0; }
.lp-card h3{ margin:0 0 6px; font-size:1.15rem; letter-spacing:.2px; color:#0f172a; }
.lp-card p{ margin:0 0 10px; color:#475569; line-height:1.45; font-size:.98rem; }
.lp-card a{
  display:inline-flex; align-items:center; gap:8px; font-weight:700; color:#fff; background: var(--brandgradiant);
  padding:10px 14px; border-radius:999px; text-decoration:none; font-size:.94rem;
}
.lp-card a svg{ width:18px; height:18px; fill:none; stroke:#fff; stroke-width:2; transition:transform .2s; }
.lp-card a:hover svg{ transform:translateX(2px); }

/* Responsive */
@media (max-width: 900px){
  .lp-cat-grid{ grid-template-columns: 1fr; }
  .lp-preview{ order:2; position:static; }
}
@media (max-width: 680px){
  .lp-tabs{ display:none; }
  .lp-cat-select{ display:flex; }
  .lp-preview{ display:none; }
  .lp-card{ display:grid; /*grid-template-columns: 120px 1fr;*/ gap:12px; align-items:center; }
  .lp-card .thumb{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:10px; background:#f1f5f9; }
}


/* =========================
   ABOUT — Hero + Team cards
   ========================= */
#about{
  --lp-primary: var(--brand);
  --lp-primary-2: color-mix(in oklab, var(--lp-primary), white 14%);
  --lp-ink: #1b1b1f;
  --lp-muted: color-mix(in oklab, var(--lp-ink), white 60%);
  --lp-surface: #fff;
  --lp-border: rgba(0,0,0,.08);
  --wrap: 1200px;
  --pad: 22px;
  --radius: 18px;
  --photo-size: 300px;
}

/* Hero */
#about .about-hero{
  position:relative; min-height:54vh; display:grid; place-items:center;
  padding: clamp(28px,5vw,64px) var(--pad); background:#e9dfe4; overflow:hidden;
}
#about .hero-bg{ position:absolute; inset:0; background-size:cover; background-position:center; filter:saturate(.95) contrast(.95) }
#about .hero-fade{ position:absolute; inset:0; background:linear-gradient(to bottom, rgba(0,0,0,.38) 0%, rgba(0,0,0,.22) 36%, transparent 68%) }
#about .hero-inner{ position:relative; z-index:1; text-align:center; color:#fff; width:100%; max-width:var(--wrap); margin:0 auto }
#about .hero-eyebrow{ letter-spacing:.16em; text-transform:uppercase; opacity:.9; font-size:.85rem }
#about .hero-title{
  margin:.35rem 0 .5rem; font-weight:800; letter-spacing:.2px;
  font-size:clamp(2rem,1.4rem + 3vw,3.2rem); line-height:1.05; text-shadow:0 12px 40px rgba(0,0,0,.28)
}
#about .hero-sub{ margin:0 auto; max-width:62ch; font-size:clamp(1rem,.95rem + .35vw,1.2rem); opacity:.98 }

/* Team grid */
#about .about-team{ width:100%; }
#about .team-head{ text-align:center; margin-bottom:clamp(16px,3.4vw,28px) }
#about .team-title{ margin:0; font-weight:800; letter-spacing:.2px; font-size:clamp(1.6rem,1.1rem + 1.6vw,2.3rem);color: var(--brand); }
#about .team-sub{ margin:.3rem 0 0; color:var(--lp-muted) }

#about .team-grid{ display:grid; gap:clamp(16px,2.4vw,22px); grid-template-columns: repeat(3, minmax(0, 1fr)); max-width:var(--wrap);margin: 0 auto 100px auto; }
@media (max-width: 1020px){ #about .team-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px){ #about .team-grid{ grid-template-columns: 1fr; } }

#about .team-card{
  background: var(--lp-surface);
  border: 1px solid color-mix(in oklab, var(--lp-primary), transparent 88%);
  border-radius: var(--radius);
  overflow: hidden; box-shadow: 0 10px 26px rgba(0,0,0,.06);
  transition: transform .18s ease, box-shadow .18s ease; position:relative;
}
#about .team-card::after{
  content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background: linear-gradient(120deg,
    color-mix(in oklab, var(--lp-primary), transparent 92%) 0%,
    transparent 30%,
    color-mix(in oklab, var(--lp-primary), transparent 95%) 100%);
  opacity:.8; mask:linear-gradient(#000, transparent 60%);
}
#about .team-card:hover{ transform:translateY(-3px); box-shadow:0 16px 40px rgba(0,0,0,.10) }

#about .team-photo{
  width: var(--photo-size); height: var(--photo-size); margin: 16px auto 10px;
  position:relative; background:#f3f3f6; border:1px solid var(--lp-border);
  box-shadow: 0 12px 28px rgba(0,0,0,.08); overflow:hidden;
}
#about .team-photo::before{
  content:""; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none;
  background:
    radial-gradient(60% 60% at 15% 15%, color-mix(in oklab, var(--lp-primary), white 20%) 0%, transparent 60%),
    radial-gradient(70% 70% at 85% 85%, color-mix(in oklab, var(--lp-primary), white 10%) 0%, transparent 70%);
  filter: blur(10px); opacity:.5;
}
#about .team-photo img{ width:100%; height:100%; object-fit:cover; display:block; transform: scale(1.02); transition: transform .35s ease }
#about .team-card:hover .team-photo img{ transform: scale(1.06) }

#about[data-photo="square"] .team-photo{ border-radius: 16px; }
#about[data-photo="circle"] .team-photo{ border-radius: 999px; }
#about[data-photo="oval"] .team-photo{ border-radius: 16px; }
#about[data-photo="oval"] .team-photo img{
  -webkit-mask-image: radial-gradient(ellipse 62% 48% at 50% 50%, #000 98%, transparent 100%);
          mask-image: radial-gradient(ellipse 62% 48% at 50% 50%, #000 98%, transparent 100%);
}

#about .team-body{ padding: 0 16px 16px; text-align:center; color:var(--lp-ink) }
#about .team-body h3{ margin:.2rem 0 .15rem; font-weight:800; letter-spacing:.2px; font-size:clamp(1.12rem,.95rem + .55vw,1.45rem) }
#about .team-role{ margin:0 0 .5rem; color:var(--lp-muted) }
#about .team-intro{ margin:0 0 .6rem; }
#about .team-high{ list-style:none; margin:0 0 .6rem; padding:0; display:grid; gap:.45rem; text-align:left }
#about .team-high li{ padding-left:20px; position:relative }
#about .team-high li::before{ content:"•"; position:absolute; left:4px; color:var(--lp-primary); font-weight:800 }
#about .team-tags{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center }
#about .team-tags span{ font-size:.8rem; padding:6px 10px; border-radius:999px; border:1px solid var(--lp-border); color:var(--lp-muted) }

@media (max-width: 600px){ #about{ --photo-size: 240px; } }

#about .full-bleed{
  position:relative;
}


#about .about-quote.full-bleed{
  background:var(--bgcot); color:var(--brand); text-align:center; padding: clamp(28px,6vw,50px) 0; position:relative;
}
#about .about-quote.full-bleed::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0));
  pointer-events:none;
}
#about .about-quote .quote-inner{
  max-width:980px; margin:0 auto; font-style:italic;
  font-size: clamp(1.1rem,1rem + .6vw,1.6rem); 
}
#about .about-cta.full-bleed{
  color:#494949; text-align:center; padding: clamp(46px,9vw,120px) 0;
}
#about .about-cta .cta-title{
  margin:0 0 .9rem; font-size: clamp(1.7rem,1.2rem + 1.6vw,2.5rem); font-weight:800; letter-spacing:.2px
}
#about .about-cta .cta-btn{
  display:inline-block; padding:10px 16px; border-radius:999px; color:#fff; text-decoration:none; font-weight:700;
  border:1px solid rgba(255,255,255,.92); box-shadow:0 10px 28px rgba(0,0,0,.18);background: var(--brand);
}
#about .reveal{ opacity:0; transform: translateY(10px); transition: opacity .45s ease, transform .45s ease }
#about .reveal.in{ opacity:1; transform:none }


/*

Separado


*/


.nav-controls .btn-prev{
    background: none;
    border-radius: 18px;
    color: var(--lp-ink);
    border: solid 1px #b1b1b1;
}

/* =========================
   BLOG — Índice y Posts
   ========================= */
#lp-blog{max-width:1200px; margin:0 auto; padding:56px 20px 72px;min-height: 100vh;min-height: 100dvh;}

.blog-hero{display:grid; gap:12px; margin-bottom:20px;}
.blog-hero h1{font-size:clamp(28px,3.4vw,40px); margin:0;}
.blog-hero p{color:var(--muted); margin:0 0 6px 0;}

.blog-controls{display:flex; gap:10px; flex-wrap:wrap;}
.blog-controls .search,
.blog-controls select{
  background:#f3f3f3; border:none; color:var(--color-gray-900);
  padding:10px 12px; border-radius:12px; outline:none; min-width:200px; flex:1 1 220px;
}
.blog-controls .search:focus,
.blog-controls select:focus{ border-color:var(--brand); box-shadow:0 0 0 4px var(--ring); }

.blog-grid{display:grid; grid-template-columns:repeat(12,1fr); gap:16px; margin-top:10px;}
@media (max-width:960px){ .blog-grid{grid-template-columns:repeat(6,1fr);} }
@media (max-width:640px){ .blog-grid{grid-template-columns:repeat(2,1fr);} }


.blog-grid .card{
  grid-column: span 4;
  display:flex; flex-direction:column;
  /*background: var(--brandgradiant);*/
  border:1px solid #b4b4b1;
  border-radius:18px; 
  overflow:hidden;
  text-decoration:none; color:inherit; cursor:pointer;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.blog-grid .card:hover{ transform: translateY(-2px); border-color:#343446; box-shadow: 0 10px 24px rgba(0,0,0,.25); }
.blog-grid .card:focus-visible{ outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--ring); }

.blog-grid .card .media{aspect-ratio: 16/9; height: 200px;}
.blog-grid .card img{width:100%; height:100%; object-fit:cover; display:block;}
.blog-grid .card .body{padding:14px 14px 16px; display:flex; flex-direction:column; gap:8px;}
.blog-grid .meta{display:flex; gap:10px; color:var(--muted); font-size:12.5px;}
.tags{display:flex; flex-wrap:wrap; gap:6px; margin-top:2px;}
.tag{font-size:12px; color:#d8d8e2; 
  background: var(--brandgradiant);padding:6px 10px; border-radius:999px; border:2px solid var(--brand);}
.blog-grid .card h3{font-size:18px; margin:2px 0 6px; color:#252525;}
.blog-grid .card p{color:#b4b4b1; margin:0;}
.blog-grid .card a.more{margin-top:auto; display:inline-flex; align-items:center; gap:8px; padding:10px 12px;
  border:1px solid #30303a; border-radius:12px; text-decoration:none; color:#fff; background:#1a1a22;}
.blog-grid .card a.more:hover{border-color:#404050; background:#202028;}

.pagination{display:flex; gap:8px; justify-content:center; margin:26px 0 0;}
.pagination button{
  background: var(--brandgradiant); color:#ddd; border:1px solid var(--brand); padding:10px 14px; border-radius:10px; cursor:pointer;
}
.pagination button[disabled]{opacity:.5; cursor:not-allowed;}
.pagination .is-active{border-color:var(--brand); box-shadow:0 0 0 3px var(--ring);}

.blog-subscribe{margin-top:48px; padding:22px; border-radius:16px; border:1px solid #2a2a34; background:
  radial-gradient(1200px 400px at 0% 0%, rgba(124,37,91,.12), transparent 60%), #121217;}
.blog-subscribe h2{margin:0 0 10px 0;}
.subscribe-form{display:flex; gap:10px; flex-wrap:wrap;}
.subscribe-form input{flex:1 1 280px; background:#0f0f14; border:1px solid #2a2a34; color:#fff; padding:10px 12px; border-radius:10px;}
.subscribe-form button{background:var(--brand); border:none; color:#fff; padding:10px 16px; border-radius:10px; cursor:pointer;}
.subscribe-form button:hover{filter:brightness(1.06);}



/* Wrapper centrado y legible */
.post-wrapper{
  max-width: 920px;
  margin: 0 auto;
  padding: 56px 20px 84px;
}

/* Estructura principal */
.post{
  display:flex;
  flex-direction:column;
  gap:22px;
}

/* Hero */
.post-hero h1{
  font-size: clamp(28px, 3.6vw, 44px);
  letter-spacing: -0.02em;
  line-height:1.16;
  margin:0 0 8px;
  color: var(--brand);
}
.post-meta{
  color:var(--muted);
  font-size:14px;
}

/* Imagen de portada */
.post-cover{
  border-radius: 18px;
  overflow:hidden;
}
.post-cover img{
  display:block;
  width:100%;
  height:auto;
}

/* Cuerpo */
.post-body{
  color:var(--color-negro-tx1);
  line-height: 1.75;
  font-size: 15px;
}
.post-body p{ margin: 0 0 14px; }
.post-body h2{
  margin: 30px 0 10px;
  font-size: clamp(20px, 2.2vw, 24px);
}
.post-body ul,
.post-body ol{
  padding-left: 22px;
  margin: 8px 0 14px;
}
.post-body li{ margin: 6px 0; }

/* Tip / callout */
.post-tip{
  border:1px solid #2a2a34;
  border-radius: 14px;
  padding: 12px 14px;
  margin: 14px 0;
}

/* Citas */
.post-body blockquote{
  margin: 16px 0;
  padding: 12px 16px;
  border-left: 3px solid var(--brand);
  background: #15151a;
  color:#e7e7f0;
  border-radius: 8px;
}

/* Reglas y pie de figura */
.post-body hr{
  border:0;
  height:1px;
  background: linear-gradient(90deg, transparent, #333349, transparent);
  margin: 26px 0;
}
.figure{
  margin: 16px 0;
}
.figure figcaption{
  color: var(--muted);
  font-size: 13px;
  margin-top: 6px;
}

/* Enlaces del texto */
.post-body a{
  color:var(--text-p-color);
  text-underline-offset: 3px;
  text-decoration-color: rgba(255,255,255,.35);
  text-decoration: none;
  background: #fff;
  border: var(--brand) solid 1px;
  font-family: var(--font-ui-v2);
  font-size:   var(--font-btn-size);
  font-weight: var(--font-btn-weight);

}
.post-body a:hover{
  text-decoration-color: rgba(255,255,255,.85);
  background: var(--brandgradiant);
  color:#fff;
}

/* Compartir */
.post-share{
  display:flex; flex-wrap:wrap; gap:10px; margin-top: 6px;
}
.post-share a{
  border:none;
  border-radius: 10px;
  padding: 8px 10px;
  text-decoration: none;
  color:#fff;
  background:var(--brand);
}

/* Prev / Next */
.post-nav{
  display:flex; gap:10px; margin-top: 10px;
}
.post-nav a{
  flex:1;
  border:none;
  padding: 12px;
  color:var(--brand);
  text-decoration:none;
}
.post-nav a:hover{ border-color:#404050; }

/* ========== GALERÍA EN POSTS ========== */
.post .spot .gallery{
  --gap: 12px;
  --radius: 14px;
  --shadow: 0 6px 20px rgba(0,0,0,.08);

  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--gap);
  margin-block: 12px 24px;
}

@media (min-width: 600px){
  .post .spot .gallery{
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
}
@media (min-width: 1024px){
  .post .spot .gallery{
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
  }
}

/* Soporta img directa o envuelta en <a> o <figure> */
.post .spot .gallery > *{
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: #f4f4f6;            /* fallback en lo que carga la imagen */
  box-shadow: var(--shadow);
  isolation: isolate;
}

/* Altura/recorte consistente (16:10; ajusta si prefieres 4:3 o 1:1) */
.post .spot .gallery > *{
  aspect-ratio: 1 / 1;
}

/* Imágenes responsivas */
.post .spot .gallery img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  transform: scale(1);            /* base para hover */
  transition: transform .35s ease, filter .35s ease;
  will-change: transform;
}

/* Enlaces (para lightbox futuro) */
.post .spot .gallery a{
  display: block;
  cursor: zoom-in;                 /* sugiere ampliación */
  height: 100%;
}

/* Hover/Focus accesible */
.post .spot .gallery > *:hover img{
  transform: scale(1.035);
  filter: saturate(1.03);
}
.post .spot .gallery a:focus-visible{
  outline: 2px solid var(--accent, #7C255B);
  outline-offset: 3px;
  border-radius: calc(var(--radius) + 2px);
}

/* Etiquetas opcionales (si quisieras colocar una) */
.post .spot .gallery .tag{
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
  font-size: 12px;
  line-height: 1;
  padding: 6px 8px;
  border-radius: 999px;
  background: rgba(0,0,0,.55);
  color: #fff;
  backdrop-filter: blur(4px);
}
/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .post .spot .gallery img{
    transition: none;
  }
  .post .spot .gallery > *{
    transition: none;
  }
}
/* ===== LISTA DE HOTELES / PUNTOS ===== */
.post-list {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0;
  display: grid;
  gap: 0.5rem;
}

.post-list li {
  position: relative;
  padding-left: 1.6em;
  font-size: 1.05rem;
  line-height: 1.5;
  background: #fff;
  border-radius: 8px;
  padding-block: 0.4em;
  padding-inline-start: 1.6em;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}

/* Icono o bullet decorativo */
.post-list li::before {
  content: "•";
  position: absolute;
  left: 0.6em;
  color: var(--accent, #7C255B);
  font-size: 1.4em;
  line-height: 1;
  top: 50%;
  transform: translateY(-50%);
}
/* ===== VIDEO EMBED EN POSTS ===== */
.post-video {
  margin: 2rem 0;
}

.post-video .video-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;              /* mantiene proporción 16:9 */
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,.15);
  background: #000;                  /* fallback mientras carga el iframe */
}

.post-video iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Hover con sutil brillo */
.post-video .video-embed:hover {
  box-shadow: 0 10px 28px rgba(0,0,0,.25);
  transform: translateY(-1px);
  transition: transform .25s ease, box-shadow .25s ease;
}

/* Reset en móviles para evitar animaciones innecesarias */
@media (hover: none) {
  .post-video .video-embed:hover {
    transform: none;
    box-shadow: 0 8px 24px rgba(0,0,0,.15);
  }
}
  .post-figure {
  margin: 0;              /* elimina márgenes por defecto */
  padding: 0;
  display: block;
  max-width: 100%;        /* evita que el figure se expanda más del contenedor */
}

.post-figure img {
  display: block;         /* elimina espacios indeseados */
  max-width: 100%;        /* asegura que no se desborde */
  height: auto;           /* mantiene proporción */
  border-radius: 6px;     /* opcional, esquinas redondeadas */
  object-fit: cover;      /* si necesitas que recorte en lugar de deformar */
}

    .downloads-hero{
      display:grid; gap:1rem; place-items:center; text-align:center; padding:4rem 1.5rem 2rem;
    }
    .downloads-hero h1{ font-size:clamp(2rem,5vw,3.5rem); line-height:1.05; margin:0; color: var(--brand)}
    .downloads-hero p{ max-width:62ch; opacity:.8; margin:.75rem 0 0; color: var(--color-gray-900)}
    .downloads-grid{
      --col: minmax(260px, 1fr);
      display:grid; gap:2rem; grid-template-columns:repeat(2,var(--col));
      padding:2rem 1.5rem 4rem; max-width:1100px; margin:0 auto;
    }
    @media (max-width:860px){ .downloads-grid{ grid-template-columns:1fr; } }
    .doc-card{
      background:var(--lp-surface, #efe8eb); border-radius:1.25rem; padding:1.25rem;
      box-shadow:0 6px 24px rgba(0,0,0,.06);
      display:grid; gap:1rem; align-content:start;color: black;
    }
    .doc-card h2{ font-size:clamp(1.6rem,3vw,2.4rem); margin:.25rem 0 .25rem; }
    .doc-card .thumb{ aspect-ratio: 16 / 9; overflow:hidden; border-radius:.9rem; background:#ddd; }
    .doc-card img{ width:100%; height:100%; object-fit:cover; display:block; }
    .doc-actions{ display:flex; gap:.75rem; flex-wrap:wrap; }
    .doc-actions a{text-decoration: none;
    }
    
    .vendors-grid{--w:min(1100px, 100%);max-width:var(--w);margin:1rem auto 4rem;padding:0 1.25rem;
      display:grid;gap:2rem;grid-template-columns:repeat( auto-fit, minmax(220px,1fr) );}
    .vendor-card{position:relative;isolation:isolate;border-radius:1.1rem;overflow:hidden;background:#eee;
      box-shadow:0 8px 24px rgba(0,0,0,.06)}
    .vendor-card a{display:block;color:inherit;text-decoration:none;outline:none}
    .vendor-thumb{aspect-ratio:1/1;display:block;width:100%;height:auto;object-fit:cover;transition:transform .45s ease}
    .vendor-card:hover .vendor-thumb,.vendor-card:focus-within .vendor-thumb{transform:scale(1.06)}
    .vendor-overlay{position:absolute;inset:auto .75rem .75rem .75rem;background:rgba(255,255,255,.9);
      backdrop-filter:saturate(140%) blur(2px);padding:.75rem .9rem;border-radius:.75rem;
      display:flex;justify-content:space-between;align-items:center;gap:.75rem}
    .vendor-name{font-weight:700;font-size:1.05rem;letter-spacing:.2px; color: var(--color-gray-900);}


    /* Reusa tus estilos existentes */
    .downloads-hero{
      display:grid; gap:1rem; place-items:center; text-align:center; padding:4rem 1.5rem 2rem;
    }
    .downloads-hero h1{ font-size:clamp(2rem,5vw,3.5rem); line-height:1.05; margin:0; color: var(--brand); }
    .downloads-hero p{ max-width:62ch; opacity:.8; margin:.75rem 0 0; color: var(--color-gray-900); }

    .downloads-grid{
      --col: minmax(260px, 1fr);
      display:grid; gap:2rem; grid-template-columns:repeat(2,var(--col));
      padding:2rem 1.5rem 4rem; max-width:1100px; margin:0 auto;
    }
    @media (max-width:860px){ .downloads-grid{ grid-template-columns:1fr; } }

    .doc-card{
      background:var(--lp-surface, #efe8eb); border-radius:1.25rem; padding:1.25rem;
      box-shadow:0 6px 24px rgba(0,0,0,.06);
      display:grid; gap:.75rem; align-content:start; color:black; position:relative;
    }
    .doc-card h2{ font-size:clamp(1.6rem,3vw,2.2rem); margin:.25rem 0 0; color:var(--brand); }
    .doc-meta{ color: var(--color-gray-900); opacity:.85; }
    .doc-actions{ display:flex; gap:.75rem; flex-wrap:wrap; }
    .doc-actions a{ text-decoration:none; }

    /* Mock de “portada” sin imagen: solo texto centrado */
    .doc-mock {
  display: block;
  position: relative;
  text-decoration: none;
  padding: 1.5rem 2rem;
  border-radius: 1rem;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  background: linear-gradient(135deg, #7C255B, #B86BA0);
  color: #fff;
}

.doc-mock h3 {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  position: relative;
  z-index: 2;
}


.doc-mock:hover::before {
  transform: scale(1);
}

.doc-mock:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0,0,0,0.2);
}


    /* Badge de estado */
    .badge{
      position:absolute; top:.9rem; right:.9rem;
      background:#fff; border:1px solid #e2d5da; border-radius:.6rem;
      padding:.3rem .55rem; font-weight:700; font-size:.9rem;
    }
    .badge.done{ background:#d9efe3; border-color:#b5e1cb; color:#246b49; } /* ¡LISTO! */
    .badge.progress{ background:#ffe9d6; border-color:#ffd2ad; color:#a05a16; } /* En progreso */

.resource-block{display:grid;gap:2rem;place-items:center;text-align:center;padding:4rem 1.5rem 5rem}
    .resource-block h1{font-size:clamp(2rem,5vw,3.2rem);margin:0;color:var(--brand)}
    .resource-card{background:var(--lp-surface,#efe8eb);border-radius:1.25rem;padding:2rem;
      box-shadow:0 8px 24px rgba(0,0,0,.06);max-width:760px;width:100%;display:grid;gap:1.25rem}
    .resource-thumb{aspect-ratio:16/11;border-radius:1rem;overflow:hidden;background:#d7dfea}
    .resource-thumb img{width:100%;height:100%;object-fit:cover;display:block}
    .resource-card h2{margin:.25rem 0 0;font-size:1.25rem;font-weight:600;color:var(--color-gray-900)}
    .resource-actions{margin-top:.25rem;display:flex;justify-content:center}


     .hero-brief{display:grid;gap:.75rem;place-items:center;text-align:center;padding:3.5rem 1.25rem 1.75rem}
    .hero-brief h1{margin:0;font-size:clamp(2rem,5vw,3.4rem);line-height:1.05;color:var(--brand)}
    .hero-brief p{opacity:.85;max-width:62ch;margin:.25rem 0 0;color:var(--color-gray-900)}

    .section-grid{--max:1100px;max-width:var(--max);margin:0 auto;padding:1rem 1.25rem 3rem;display:grid;gap:2rem}
    .card .inner{padding:1.25rem}

    /* Sección 1: checklist + botón */
    .grid-a{grid-template-columns: 1fr minmax(220px, 300px);align-items:center}
    .grid-a .media{aspect-ratio:1/1;max-width:520px;border-radius:.75rem;overflow:hidden;margin:0 auto}
    .grid-a img{width:100%;height:100%;object-fit:cover;display:block}
    .note{font-size:.95rem;opacity:.9;max-width:78ch;margin:1.25rem auto 0}

    /* Sección 2: texto + imagen + botón */
    .grid-b{grid-template-columns: 1.1fr 1fr;align-items:center}
    .grid-b .media-wide{border-radius:.75rem;overflow:hidden}
    .grid-b .media-wide img{width:100%;height:auto;display:block}
    .lead{font-size:1.25rem;line-height:1.45;margin:0 0 .75rem}
    .muted{opacity:.9}

    @media (max-width: 960px){
      .grid-a, .grid-b{grid-template-columns:1fr}
      .grid-b .media-wide{order:-1}
      .grid-a .media{max-width:none;width:100%}
    }

    .note{
        color: var(--color-gray-900);
    }

    .lp-ribbon{
  display:block;            /* hace el <a> de ancho completo */
  background: var(--brandgradiant);
  color:#fff; text-decoration:none;
  padding:12px 16px; 
  box-shadow: 0 4px 18px rgba(0,0,0,.08) inset, 0 2px 10px rgba(0,0,0,.06);
}
.lp-ribbon:hover{ filter: brightness(1.05); }
.lp-ribbon .ribbon-inner{
  max-width:1200px; margin:0 auto;
  display:flex; align-items:center; justify-content:center; gap:16px;
}
#lp-ribbon-msg{ font-weight:700; letter-spacing:.04em; text-align:center; }

/*-------------------------------------------------
--------------------------------------------------
---------------------------------------------------*/
:root{
  --collage-gap: 16px;
  --collage-radius-xl: 18px;
  --collage-chip-radius: 999px;
  --collage-chip-bg: #fff;
  --collage-chip-fg: #111;
  --collage-chip-float: 22px;          /* cuánto “sale” el chip */
  --collage-shadow-sm: 0 2px 6px rgba(0,0,0,.08);
  --collage-shadow-md: 0 8px 24px rgba(0,0,0,.12);
  --collage-accent: var(--c-accent, #7C255B);
  --collage-maxw: 1200px;     /* cámbialo a 1040/1280/etc. */
  --collage-side-pad: 16px;   /* sangría lateral en móviles/desktop */
}

/* Contenedor del masonry centrado */
#collage .masonry-grid{
  max-width: var(--collage-maxw);
  margin-inline: auto;                 /* centra */
  padding-inline: var(--collage-side-pad);
}

/* (opcional) que el H1/sub también sigan el mismo ancho centrado */
#collage .collage-hero{
  max-width: var(--collage-maxw);
  margin-inline: auto;
  padding-inline: var(--collage-side-pad);
}

.masonry-grid{
  column-gap: var(--collage-gap);
  column-count: 1;
  /*padding-block: 10px 40px;*/
}
@media (min-width:640px){ .masonry-grid{ column-count:2; } }
@media (min-width:960px){ .masonry-grid{ column-count:3; } }
@media (min-width:1280px){ .masonry-grid{ column-count:4; } }

.tile{
  display:inline-block;
  width:100%;
  /* agregamos espacio extra para el chip flotante */
  margin: 0 0 calc(var(--collage-gap) + var(--collage-chip-float));
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  position: relative;
  opacity: 0;
  transform: translateY(6px) scale(.995);
  transition: opacity .35s ease, transform .35s ease;
}
.tile.is-in{ opacity:1; transform:none; }

.tile a{
  display:block; position:relative;
  border-radius: var(--collage-radius-xl);
  overflow:hidden;                         /* mantiene el recorte del borde */
  box-shadow: var(--collage-shadow-sm);
  background:#1f1f1f;                      /* placeholder oscuro */
}

.tile .media{
  position:relative;
  width:100%;
  aspect-ratio: var(--collage-ar, 4/3);
}
.tile img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; display:block;
  transition: transform .5s ease;
}

.tile figcaption{
  position:absolute;
  left:50%;
  bottom: calc(-1 * var(--collage-chip-float)); /* fuera del <a>, ya no se corta */
  transform: translateX(-50%);
  background: var(--collage-chip-bg);
  color: var(--collage-chip-fg);
  padding:10px 16px;
  border-radius: var(--collage-chip-radius);
  font-size:14px; line-height:1; white-space:nowrap;
  box-shadow: var(--collage-shadow-md);
  pointer-events:none;                      /* el clic pasa al card */
  z-index: 2;
}

.tile a:hover img{ transform: scale(1.04); }
.tile a:focus-visible{ outline:3px solid var(--collage-accent); outline-offset:2px; }

@media (prefers-color-scheme: dark){
  :root{ --collage-chip-bg:#fff; --collage-chip-fg:#0b0b0b; }
  .tile a{ background:#1b1b1b; box-shadow: 0 10px 24px rgba(0,0,0,.25); }
}

#vendors{
  min-height: 100dvh;
  min-height: 100vh;
}

#site-footer { position: relative; }

.wa-fab{
  position: fixed;      
  right: 24px;
  bottom: 24px;
  z-index: 20;

  width: 64px; height: 64px; border-radius: 50%;
  background: #25D366;      /* verde WhatsApp */
  display: grid; place-items: center;
  box-shadow: 0 8px 24px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.12);
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease;
}
.wa-fab svg{ width: 28px; height: 28px; fill: #fff; }

.wa-fab::before{
  content:"";
  position:absolute; inset:-18px; border-radius:50%;
  background: radial-gradient(ellipse at center, rgba(37,211,102,.25), transparent 60%);
  filter: blur(2px);
  z-index:-1;
}

.wa-fab:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(0,0,0,.22), 0 4px 10px rgba(0,0,0,.12);
}
/* estilos básicos del form rápido */
.lp-formfast{ padding: 56px 24px; 
    background: var(--brandgradiant);}
.lp-ff-wrap{ max-width: 600px; margin: 0 auto; }
.lp-ff-head h2{ font-size: clamp(28px, 3vw, 44px); margin: 0 0 8px; }
.lp-ff-head p{ font-weight: 600; opacity:.95; margin: 0 0 24px; }

#lp-ff-form{ display:grid; gap: 16px; max-width: 880px; }
.ff-row{ display:flex; flex-direction:column; gap: 6px; }
.ff-row .req{ font-style: normal; opacity:.8; font-size:.9em }
#lp-ff-form input{
  height: 18px; padding: 10px 14px; border: 1px solid #ddd; border-radius: 6px;
  font-size: 16px; background:#fff;
}
.ff-actions{ display:flex; align-items:center; gap:16px; margin-top: 6px; }
.btn{ padding: 12px 20px; border-radius: 6px; border: 0; background:#fff; cursor:pointer; }
.btn.is-loading{ opacity:.7; cursor: progress; }
.ff-status{ min-height: 1em; font-weight:600; }

/* ===== Tokens de color (ajusta a tu brand) ===== */
:root{
  --lp-bg: #fff;
  --lp-text: #111827;          /* slate-900 */
  --lp-subtext: #6b7280;       /* slate-500 */
  --lp-primary: #e44a5e;       /* acento */
  --lp-border: rgba(17,24,39,.10);
  --lp-border-strong: rgba(17,24,39,.16);
  --lp-shadow-1: 0 1px 2px rgba(17,24,39,.06);
  --lp-shadow-2: 0 12px 24px -12px rgba(17,24,39,.18);
  --lp-tint: rgba(228,74,94,.06);  /* para hovers/zebra */
}

/* ===================== CTA ===================== */
/* Contenedor: SIN cambiar HTML, solo .cta */
.cta{
  padding: clamp(16px, 3.2vw, 28px);
  border-radius: 18px;
  background: var(--lp-bg);
  border: 1px solid var(--lp-border);
  box-shadow: var(--lp-shadow-1), var(--lp-shadow-2);
  color: var(--lp-text);
  display: grid;
  gap: .6rem;
}

/* Títulos y párrafos dentro del CTA */
.cta h3{
  margin: 0;
  font-size: clamp(1.125rem, 1rem + .6vw, 1.5rem);
  letter-spacing: .2px;
}
.cta p{
  margin: 0;
  color: var(--lp-subtext);
  line-height: 1.55;
}

/* Asume que el último <p> contiene los botones/enlaces */
.cta > p:last-child{
  margin-top: .35rem;
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}

/* Botones/enlaces dentro del CTA (no requiere cambiar clases) */
.cta a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .7rem 1rem;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
  border: 2px solid transparent;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease, border-color .12s ease;
}

/* Si ya usas .btn, se aplica el estilo primario */
.cta a.btn{
  background: var(--lp-primary);
  color: #fff;
  border-color: var(--lp-primary);
  box-shadow: 0 1px 1px rgba(0,0,0,.05);
}
.cta a.btn:hover{ transform: translateY(-1px); box-shadow: 0 6px 16px -8px rgba(17,24,39,.32); }
.cta a.btn:active{ transform: translateY(0); }

/* Variante “outline” si tu HTML ya trae .outline */
.cta a.outline{
  background: transparent;
  color: var(--lp-primary);
  border-color: var(--lp-primary);
}
.cta a.outline:hover{ background: var(--lp-tint); }

/* Accesibilidad: focus visible */
.cta a:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px rgba(228,74,94,.18);
}

/* Responsive: en móvil, botones a 100% */
@media (max-width: 520px){
  .cta{ padding: 18px; }
  .cta > p:last-child a{ flex: 1 1 100%; }
}

/* =================== TABLE WRAP =================== */
/* Contenedor con scroll horizontal suave, esquinas y sombra */
.table-wrap{
  margin: 1rem 0;
  background: var(--lp-bg);
  border: 1px solid var(--lp-border);
  border-radius: 16px;
  box-shadow: var(--lp-shadow-1);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  /* pistas visuales de scroll en extremos */
  background-image:
    linear-gradient(to right, rgba(0,0,0,.08), rgba(0,0,0,0)),
    linear-gradient(to left, rgba(0,0,0,.08), rgba(0,0,0,0));
  background-position: left center, right center;
  background-repeat: no-repeat;
  background-size: 12px 100%, 12px 100%;
  /* se ocultan si no hay overflow */
  background-attachment: local, local;
}

/* Tabla base */
.table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 720px; /* fuerza scroll en pantallas pequeñas */
  font-size: 0.95rem;
}

/* Celdas */
.table th,
.table td{
  padding: .85rem 1rem;
  vertical-align: top;
  border-bottom: 1px solid var(--lp-border);
}

/* Encabezado pegajoso y con fondo sólido */
.table thead th{
  position: sticky;
  top: 0;
  z-index: 1;
  text-align: left;
  font-weight: 700;
  letter-spacing: .2px;
  background: var(--lp-bg);
  color: var(--lp-text);
  border-bottom: 1px solid var(--lp-border-strong);
}

/* Zebra + hover */
.table tbody tr:nth-child(even) td{ background: rgba(17,24,39,.02); }
.table tbody tr:hover td{ background: var(--lp-tint); }

/* Links dentro de la tabla */
.table a{
  color: var(--lp-primary);
  text-underline-offset: .15em;
  text-decoration-thickness: 2px;
}
.table a:hover{
  text-decoration: underline;
}

/* Redondeo visual en la primera y última columna (arriba) */
.table thead th:first-child{ border-top-left-radius: 16px; }
.table thead th:last-child{ border-top-right-radius: 16px; }

/* Ajustes finos en pantallas pequeñas */
@media (max-width: 600px){
  .table{ min-width: 640px; }
  .table th, .table td{ padding: .75rem .9rem; }
}