/* Componentes de Situ (botones, etiquetas, tarjetas de plan, posts). Requiere situ-variables.css */

/* ---------- Boton ---------- */
.st-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-3) var(--space-6);border-radius:var(--radius-md);border:2px solid transparent;font-family:var(--font-texto);font-size:16px;line-height:20px;font-weight:700;text-decoration:none;cursor:pointer;transition:background-color .15s ease,border-color .15s ease}
.st-btn:focus-visible{outline:2px solid var(--foco);outline-offset:2px}
.st-btn svg{width:20px;height:20px;flex:none}
.st-btn--primario,.st-btn--whatsapp{background:var(--verde);color:var(--en-verde)}
.st-btn--primario:hover,.st-btn--whatsapp:hover{background:var(--verde-hover)}
.st-btn--oscuro{background:var(--tinta);color:var(--fondo)}
.st-btn--contorno{background:transparent;color:var(--tinta);border-color:var(--tinta)}
.st-btn--contorno:hover{background:var(--verde-suave)}
.st-btn--grande{padding:var(--space-4) var(--space-8);font-size:18px}

/* ---------- Etiqueta ---------- */
.st-tag{display:inline-flex;align-items:center;gap:var(--space-1);padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);font-family:var(--font-mono);font-size:12px;line-height:16px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;background:var(--verde-suave);color:var(--tinta)}
.st-tag--verde{background:var(--verde);color:var(--en-verde)}
.st-tag--noche{background:var(--noche);color:var(--en-noche)}

/* ---------- TarjetaPlan ---------- */
.st-plan{display:flex;flex-direction:column;gap:var(--space-4);padding:var(--space-6);background:var(--superficie);color:var(--tinta);border:1px solid var(--linea);border-radius:var(--radius-md);font-family:var(--font-texto);min-width:0}
.st-plan__nombre{font-family:var(--font-display);font-size:18px;line-height:24px;font-weight:800;margin:0}
.st-plan__desc{margin:0;font-size:14px;line-height:20px;color:var(--tinta-media)}
.st-plan__precio{font-family:var(--font-display);font-size:40px;line-height:40px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;margin:0}
.st-plan__precio small{font-family:var(--font-texto);font-size:14px;font-weight:500;letter-spacing:0;color:var(--tinta-media)}
.st-plan__lista{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-2);font-size:15px;line-height:22px}
.st-plan__lista li{display:flex;gap:var(--space-2)}
.st-plan__lista li::before{content:"";flex:none;width:10px;height:14px;margin-top:4px;background:var(--verde);clip-path:polygon(0 30%,100% 0,100% 70%,0 100%)}
.st-plan .st-btn{margin-top:auto}
.st-plan--destacado{background:var(--noche);color:var(--en-noche);border-color:var(--noche)}
.st-plan--destacado .st-plan__desc,.st-plan--destacado .st-plan__precio small{color:var(--en-noche);opacity:.8}

/* ---------- PostRedes ---------- */
.st-post{position:relative;width:360px;aspect-ratio:1/1;max-width:100%;overflow:hidden;border-radius:var(--radius-lg);display:flex;flex-direction:column;justify-content:space-between;padding:var(--space-8);box-sizing:border-box;font-family:var(--font-texto)}
.st-post--noche{background:var(--noche);color:var(--en-noche)}
.st-post--verde{background:var(--verde);color:var(--en-verde)}
.st-post__kicker{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;position:relative}
.st-post__titulo{font-family:var(--font-display);font-weight:800;font-size:34px;line-height:36px;letter-spacing:-.02em;margin:0;position:relative;text-wrap:balance}
.st-post__titulo em{font-style:normal;color:var(--verde)}
.st-post--verde .st-post__titulo em{color:var(--en-verde);text-decoration:underline;text-decoration-thickness:4px;text-underline-offset:6px}
.st-post__pie{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);font-size:13px;position:relative}
.st-post__pie img{height:28px;width:auto}
.st-post__plano{position:absolute;right:-40px;top:-20px;width:170px;height:260px;background:var(--verde);clip-path:polygon(0 22%,100% 0,100% 78%,0 100%);opacity:.14}
.st-post--verde .st-post__plano{background:var(--en-verde);opacity:.08}

/* ---------- TarjetaPresentacion ---------- */
.st-tarjeta{width:324px;aspect-ratio:9/5;max-width:100%;border-radius:var(--radius-sm);box-sizing:border-box;padding:var(--space-6);display:flex;flex-direction:column;justify-content:space-between;font-family:var(--font-texto);box-shadow:var(--sombra-1);position:relative;overflow:hidden}
.st-tarjeta--frente{background:var(--noche);color:var(--en-noche);align-items:flex-start}
.st-tarjeta--frente img{height:40px;width:auto}
.st-tarjeta--reverso{background:#ffffff;color:#0a151c}
.st-tarjeta__nombre{font-family:var(--font-display);font-weight:800;font-size:18px;line-height:22px;margin:0}
.st-tarjeta__rol{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#46575e;margin:2px 0 0}
.st-tarjeta__datos{font-size:12px;line-height:18px;margin:0}
.st-tarjeta__slogan{font-size:12px;line-height:16px;opacity:.85}
.st-tarjeta__plano{position:absolute;right:0;top:0;bottom:0;width:22%;background:#00cc84;clip-path:polygon(40% 0,100% 0,100% 100%,0 100%)}