/* ============================================================
Modo claro forzado (2026-07-30)
El theme no define ningun @media (prefers-color-scheme: dark): la
paleta es fija (beige/negro/dorado). Esto no revierte estilos oscuros
propios --no los hay-- sino que le dice al navegador que renderice sus
propios controles (formularios, scrollbars, autofill, date pickers) en
claro aunque el sistema operativo este en oscuro.
Se acompana de en header.php,
que se aplica antes de que cargue este fichero y evita el parpadeo.
============================================================ */
:root {
color-scheme: light !important;
}
html, body {
color-scheme: light !important;
}
/* ============================================================
Tipografias autohospedadas (RGPD: cero peticiones a Google).
Fuentes variables: un fichero cubre todo el rango de pesos.
Origen: Google Fonts (SIL Open Font License 1.1).
============================================================ */
/* Inter - latin-ext */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 300 700;
font-display: swap;
src: url('../fonts/Inter-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Inter - latin */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 300 700;
font-display: swap;
src: url('../fonts/Inter-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Playfair Display - latin-ext */
@font-face {
font-family: 'Playfair Display';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url('../fonts/PlayfairDisplay-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Playfair Display - latin */
@font-face {
font-family: 'Playfair Display';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url('../fonts/PlayfairDisplay-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ============================================================
SignoPack — Tema premium
Paleta: beige #F3F0EB · negro #1A1A1A · dorado #D4AF37 / #B8976A
Tipografías: Playfair Display (serif), Inter (sans)
============================================================ */
:root {
--sp-beige: #F3F0EB;
--sp-beige-2: #E8E3DA;
--sp-beige-3: #DDD6C8;
--sp-dark: #1A1A1A;
--sp-dark-2: #2A2A2A;
--sp-gold: #D4AF37;
--sp-gold-soft: #B8976A;
--sp-gold-soft-2: #C8A96E;
--sp-white: #FFFFFF;
--sp-muted: #6B6B6B;
--sp-line: rgba(26, 26, 26, 0.08);
--sp-line-strong: rgba(26, 26, 26, 0.15);
--sp-shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.05);
--sp-shadow-md: 0 12px 40px rgba(0, 0, 0, 0.08);
--sp-shadow-lg: 0 30px 80px rgba(0, 0, 0, 0.18);
--sp-radius-sm: 12px;
--sp-radius: 20px;
--sp-radius-lg: 28px;
--sp-font-serif: 'Playfair Display', Georgia, serif;
--sp-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--sp-transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
--sp-content: 1240px;
--sp-prose: 760px;
}
/* ---------- Base ---------- */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
font-family: var(--sp-font-sans);
color: var(--sp-dark);
background: linear-gradient(180deg, #F3F0EB 0%, #ECE6DC 100%);
line-height: 1.65;
overflow-x: hidden;
position: relative;
min-height: 100vh;
}
body::before {
content: '';
position: fixed;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
pointer-events: none;
z-index: 0;
mix-blend-mode: multiply;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: var(--sp-transition); }
a:hover { color: var(--sp-gold-soft); }
p { margin: 0 0 1.1em; }
h1, h2, h3, h4 { font-family: var(--sp-font-serif); color: var(--sp-dark); margin: 0 0 .6em; line-height: 1.18; letter-spacing: -0.01em; }
h1 { font-size: clamp(40px, 6vw, 72px); font-weight: 700; }
h2 { font-size: clamp(32px, 4vw, 52px); font-weight: 700; }
h3 { font-size: clamp(22px, 2.4vw, 30px); font-weight: 700; }
ul, ol { padding-left: 1.2em; margin: 0 0 1em; }
.sp-skip:focus { z-index: 99999; }
::selection { background: var(--sp-gold); color: var(--sp-dark); }
/* ---------- Layout ---------- */
.sp-container { max-width: var(--sp-content); margin: 0 auto; padding: 0 24px; position: relative; z-index: 2; }
@media (max-width: 580px) { .sp-container { padding: 0 18px; } }
.sp-section { padding: clamp(72px, 10vw, 130px) 0; position: relative; z-index: 2; }
.sp-section--tight { padding: 40px 0; }
.sp-section-head { max-width: 760px; margin: 0 0 60px; }
.sp-section-head--center { margin: 0 auto 60px; text-align: center; }
.sp-section-title { font-family: var(--sp-font-serif); font-size: clamp(32px, 4vw, 52px); font-weight: 700; line-height: 1.18; margin: 0 0 18px; }
.sp-section-title--light { color: var(--sp-white); }
.sp-section-lead { font-size: clamp(16px, 1.4vw, 18px); color: rgba(26, 26, 26, 0.72); max-width: 640px; margin: 0; }
.sp-section-lead--light { color: rgba(255, 255, 255, 0.75); margin-left: auto; margin-right: auto; }
.sp-section-head--center .sp-section-lead { margin-left: auto; margin-right: auto; }
.sp-section--dark { background: linear-gradient(135deg, #1A1A1A 0%, #2A2A2A 100%); color: var(--sp-white); }
.sp-section--dark::before { content: ''; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n2'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n2)' opacity='0.04'/%3E%3C/svg%3E"); pointer-events: none; }
.sp-eyebrow {
display: inline-flex; align-items: center; gap: 8px;
font-family: var(--sp-font-sans);
font-size: 12px; font-weight: 600;
letter-spacing: 3px; text-transform: uppercase;
padding: 8px 18px;
border: 1px solid var(--sp-line-strong);
border-radius: 50px;
background: rgba(255, 255, 255, 0.55);
margin: 0 0 18px;
color: var(--sp-dark-2);
}
.sp-eyebrow--gold {
color: var(--sp-gold-soft);
border-color: rgba(184, 151, 106, 0.35);
background: rgba(184, 151, 106, 0.08);
}
.sp-eyebrow--light {
color: var(--sp-gold);
border-color: rgba(212, 175, 55, 0.4);
background: rgba(212, 175, 55, 0.08);
}
/* ---------- Botones ---------- */
.sp-btn, .sp-btn-primary {
display: inline-flex; align-items: center; gap: 10px;
/* El reset global (box-sizing:border-box) vive en el CSS critico inline
de inc/enqueue.php, no en este fichero. Se declara aqui tambien para
que los botones a width:100% no dependan de ese inline si algun dia
se toca. */
box-sizing: border-box;
padding: 16px 32px;
border-radius: 999px;
font-family: var(--sp-font-sans);
font-weight: 600; font-size: 15px;
letter-spacing: 0.3px;
cursor: pointer; border: 0;
transition: var(--sp-transition);
text-decoration: none;
line-height: 1;
}
.sp-btn--block { width: 100%; justify-content: center; }
.sp-btn--dark { background: var(--sp-dark); color: var(--sp-white); box-shadow: 0 10px 30px rgba(26, 26, 26, 0.25); }
.sp-btn--dark:hover { transform: translateY(-3px); color: var(--sp-white); box-shadow: 0 16px 40px rgba(26, 26, 26, 0.35); }
.sp-btn--gold { background: linear-gradient(135deg, #D4AF37 0%, #B8976A 100%); color: var(--sp-dark); box-shadow: 0 10px 30px rgba(212, 175, 55, 0.35); }
.sp-btn--gold:hover { transform: translateY(-3px); color: var(--sp-dark); box-shadow: 0 18px 50px rgba(212, 175, 55, 0.5); }
.sp-btn--ghost { background: transparent; color: var(--sp-dark); border: 2px solid var(--sp-dark); padding: 14px 30px; }
.sp-btn--ghost:hover { background: var(--sp-dark); color: var(--sp-white); transform: translateY(-3px); }
.sp-btn--ghost-light { background: transparent; color: var(--sp-white); border: 2px solid rgba(255, 255, 255, 0.4); padding: 14px 30px; }
.sp-btn--ghost-light:hover { background: var(--sp-white); color: var(--sp-dark); }
.sp-btn-primary { background: var(--sp-white); color: var(--sp-dark); }
.sp-btn-primary--nav { box-shadow: 0 4px 14px rgba(255, 255, 255, 0.2); padding: 12px 24px; font-size: 14px; }
.sp-btn-primary--nav:hover { transform: translateY(-2px); color: var(--sp-dark); box-shadow: 0 8px 24px rgba(255, 255, 255, 0.35); }
.sp-nav-mobile-cta { display: none; }
.sp-nav-overlay { display: none; }
@media (max-width: 900px) { .sp-nav-overlay { display: block; } }
/* ---------- Topbar + Navbar ---------- */
.sp-topbar { background: var(--sp-dark); color: rgba(255, 255, 255, 0.72); font-size: 13px; }
.sp-topbar-inner {
max-width: var(--sp-content); margin: 0 auto;
padding: 8px 24px;
display: flex; gap: 28px; flex-wrap: wrap; align-items: center;
}
.sp-topbar-item { display: inline-flex; gap: 8px; align-items: center; color: inherit; }
.sp-topbar-item:hover { color: var(--sp-gold); }
.sp-topbar-meta { margin-left: auto; }
.sp-navbar-wrapper { position: sticky; top: 0; z-index: 100; padding: 16px 0; transition: var(--sp-transition); }
.sp-navbar-wrapper.is-scrolled { padding: 8px 0; backdrop-filter: blur(16px); background: rgba(243, 240, 235, 0.85); }
.sp-navbar {
max-width: var(--sp-content); margin: 0 auto;
background: rgba(20, 20, 20, 0.94);
backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 100px;
padding: 14px 28px;
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
transition: var(--sp-transition);
}
.sp-nav-container { display: flex; align-items: center; gap: 24px; }
.sp-logo { display: inline-flex; align-items: center; gap: 12px; flex-shrink: 0; }
.sp-logo img { height: 42px; width: auto; filter: brightness(0) invert(1); transition: var(--sp-transition); }
.sp-logo:hover img { transform: scale(1.04); }
@media (max-width: 900px) { .sp-logo img { height: 36px; } }
.sp-nav-menu-wrap { flex: 1; display: flex; justify-content: center; }
.sp-nav-menu { list-style: none; display: flex; gap: 30px; padding: 0; margin: 0; }
.sp-nav-menu a, .sp-nav-link { color: rgba(255, 255, 255, 0.85); font-weight: 500; font-size: 14.5px; letter-spacing: 0.3px; position: relative; padding: 4px 0; }
.sp-nav-menu a:hover, .sp-nav-link:hover { color: var(--sp-white); }
.sp-nav-menu a::after, .sp-nav-link::after { content: ''; position: absolute; left: 0; right: 0; bottom: -3px; height: 2px; background: var(--sp-gold); transform: scaleX(0); transform-origin: left; transition: transform 0.35s ease; }
.sp-nav-menu a:hover::after, .sp-nav-link:hover::after, .current-menu-item > a::after { transform: scaleX(1); }
.sp-nav-toggle { display: none; background: transparent; border: 0; cursor: pointer; width: 40px; height: 40px; flex-direction: column; justify-content: center; gap: 5px; align-items: center; padding: 0; margin-left: auto; position: relative; z-index: 110; }
.sp-nav-toggle span { display: block; width: 22px; height: 2px; background: var(--sp-white); border-radius: 2px; transition: var(--sp-transition); }
.sp-nav-toggle[aria-expanded="true"] { background: rgba(255, 255, 255, 0.08); border-radius: 50%; }
.sp-nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.sp-nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.sp-nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* ---------- Hero ---------- */
.sp-hero { position: relative; padding: 80px 0 100px; overflow: hidden; }
.sp-hero-decoration { position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none; max-width: 100%; }
.sp-hero-decoration--gold { width: 520px; height: 520px; top: -10%; right: -10%; background: radial-gradient(circle, rgba(212, 175, 55, 0.28) 0%, transparent 70%); animation: spFloat 9s ease-in-out infinite; }
.sp-hero-decoration--dark { width: 420px; height: 420px; bottom: -20%; left: -10%; background: radial-gradient(circle, rgba(26, 26, 26, 0.18) 0%, transparent 70%); animation: spFloat 11s ease-in-out infinite reverse; }
.sp-hero-inner {
max-width: var(--sp-content); margin: 0 auto; padding: 0 24px;
display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
gap: 80px; align-items: center; position: relative; z-index: 3;
}
@media (max-width: 580px) { .sp-hero-inner { padding: 0 18px; } }
.sp-hero-title { font-size: clamp(40px, 6vw, 72px); margin: 0 0 24px; }
.sp-hero-title-accent { color: var(--sp-gold-soft); font-style: italic; display: inline-block; }
.sp-hero-lead { font-size: clamp(17px, 1.4vw, 19px); line-height: 1.7; color: rgba(26, 26, 26, 0.78); max-width: 540px; margin: 0 0 36px; }
.sp-hero-lead strong { color: var(--sp-dark); font-weight: 700; }
.sp-hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin: 0 0 28px; }
.sp-hero-bullets { list-style: none; padding: 0; margin: 24px 0 0; display: flex; flex-wrap: wrap; gap: 18px 28px; font-size: 14.5px; color: rgba(26, 26, 26, 0.7); }
.sp-hero-bullets li { display: inline-flex; gap: 8px; align-items: center; }
.sp-hero-bullets svg { color: var(--sp-gold-soft); }
.sp-hero-visual { position: relative; min-height: 480px; }
.sp-hero-card {
position: absolute;
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.85);
border-radius: var(--sp-radius);
box-shadow: var(--sp-shadow-md);
transition: var(--sp-transition);
}
.sp-hero-card--main {
top: 30px; left: 30px; right: 30px;
padding: 22px 24px;
max-width: 380px;
animation: spFloat 6s ease-in-out infinite;
}
.sp-hero-card-head { display: flex; gap: 6px; margin-bottom: 18px; }
.sp-hero-card-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(26, 26, 26, 0.15); }
.sp-hero-card-dot:first-child { background: #ff5e57; }
.sp-hero-card-dot:nth-child(2) { background: #ffbd2e; }
.sp-hero-card-dot:nth-child(3) { background: #28ca42; }
.sp-hero-card-body { display: grid; gap: 12px; }
.sp-hero-card-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid rgba(26, 26, 26, 0.05); font-size: 14px; }
.sp-hero-card-row:last-child { border: 0; }
.sp-hero-card-label { color: rgba(26, 26, 26, 0.5); font-weight: 500; }
.sp-hero-card-value { font-weight: 600; color: var(--sp-dark); }
.sp-hero-card-pill { padding: 4px 10px; border-radius: 50px; font-size: 12px; font-weight: 600; }
.sp-hero-card-pill--ok { background: rgba(184, 151, 106, 0.15); color: var(--sp-gold-soft); }
.sp-hero-card--floating, .sp-hero-card--gold {
display: flex; align-items: center; gap: 12px;
padding: 16px 20px;
font-size: 14px; color: var(--sp-dark);
}
.sp-hero-card--floating { bottom: 110px; right: 0; animation: spFloat 7s ease-in-out infinite reverse; }
.sp-hero-card--gold { bottom: 20px; left: 0; background: rgba(212, 175, 55, 0.18); border-color: rgba(212, 175, 55, 0.35); animation: spFloat 8s ease-in-out infinite; }
.sp-hero-card-icon { display: inline-flex; width: 42px; height: 42px; border-radius: 12px; background: var(--sp-dark); color: var(--sp-gold); align-items: center; justify-content: center; flex-shrink: 0; }
.sp-hero-card--gold .sp-hero-card-icon { background: var(--sp-gold); color: var(--sp-dark); }
.sp-hero-card--floating strong, .sp-hero-card--gold strong { display: block; font-weight: 700; font-size: 15px; }
.sp-hero-card--floating small, .sp-hero-card--gold small { color: rgba(26, 26, 26, 0.6); font-size: 12.5px; }
@keyframes spFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-18px); }
}
/* ---------- Strip marcas ---------- */
.sp-strip { padding: 50px 0; background: rgba(255, 255, 255, 0.45); border-top: 1px solid var(--sp-line); border-bottom: 1px solid var(--sp-line); position: relative; z-index: 2; }
.sp-strip-label { text-align: center; font-size: 13px; letter-spacing: 3px; text-transform: uppercase; color: rgba(26, 26, 26, 0.5); margin: 0 0 18px; }
.sp-strip-marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); }
.sp-strip-track { display: inline-flex; gap: 48px; white-space: nowrap; animation: spMarquee 35s linear infinite; padding: 4px 0; font-family: var(--sp-font-serif); font-weight: 700; font-size: 22px; letter-spacing: 4px; color: rgba(26, 26, 26, 0.28); }
@keyframes spMarquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
/* ---------- Valor ---------- */
.sp-valor-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 28px; }
.sp-valor-card {
background: rgba(255, 255, 255, 0.55);
backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.7);
border-radius: var(--sp-radius);
padding: 36px 32px;
transition: var(--sp-transition);
box-shadow: var(--sp-shadow-sm);
}
.sp-valor-card:hover { transform: translateY(-8px); border-color: rgba(184, 151, 106, 0.3); box-shadow: var(--sp-shadow-md); background: rgba(255, 255, 255, 0.75); }
.sp-valor-icon { display: inline-flex; width: 56px; height: 56px; align-items: center; justify-content: center; border-radius: 14px; background: var(--sp-dark); color: var(--sp-gold); margin: 0 0 22px; }
.sp-valor-card:hover .sp-valor-icon { background: var(--sp-gold); color: var(--sp-dark); }
.sp-valor-title { font-family: var(--sp-font-serif); font-size: 22px; font-weight: 700; margin: 0 0 12px; color: var(--sp-dark); }
.sp-valor-text { font-size: 15.5px; line-height: 1.7; color: rgba(26, 26, 26, 0.72); margin: 0; }
/* ---------- Pasos ---------- */
.sp-pasos-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; position: relative; }
.sp-paso-card {
position: relative;
background: rgba(255, 255, 255, 0.6);
backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.75);
border-radius: var(--sp-radius);
padding: 44px 34px 40px;
overflow: hidden;
transition: var(--sp-transition);
box-shadow: var(--sp-shadow-sm);
}
.sp-paso-card:hover { transform: translateY(-12px); border-color: rgba(184, 151, 106, 0.3); box-shadow: var(--sp-shadow-md); background: rgba(255, 255, 255, 0.8); }
.sp-paso-bg { position: absolute; top: -14px; right: -8px; font-family: var(--sp-font-serif); font-size: 140px; font-weight: 700; line-height: 1; color: rgba(184, 151, 106, 0.07); pointer-events: none; transition: var(--sp-transition); }
.sp-paso-card:hover .sp-paso-bg { color: rgba(184, 151, 106, 0.14); }
.sp-paso-num { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 14px; background: linear-gradient(135deg, var(--sp-gold-soft-2) 0%, var(--sp-gold-soft) 100%); color: var(--sp-white); font-family: var(--sp-font-sans); font-weight: 700; font-size: 16px; box-shadow: 0 6px 20px rgba(184, 151, 106, 0.35); margin: 0 0 24px; transition: var(--sp-transition); }
.sp-paso-card:hover .sp-paso-num { transform: scale(1.08) rotate(-4deg); box-shadow: 0 10px 30px rgba(184, 151, 106, 0.55); }
.sp-paso-title { position: relative; z-index: 1; font-family: var(--sp-font-serif); font-size: 22px; font-weight: 700; line-height: 1.3; margin: 0 0 12px; }
.sp-paso-text { position: relative; z-index: 1; font-size: 15.5px; line-height: 1.7; color: rgba(26, 26, 26, 0.72); margin: 0; }
.sp-paso-line { display: block; width: 40px; height: 3px; background: linear-gradient(90deg, var(--sp-gold-soft-2), transparent); border-radius: 2px; margin-top: 24px; transition: width 0.4s ease; position: relative; z-index: 1; }
.sp-paso-card:hover .sp-paso-line { width: 80px; }
/* ---------- Servicios ---------- */
.sp-servicios-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; }
.sp-servicio-card {
display: block;
background: var(--sp-dark);
color: var(--sp-white);
border-radius: var(--sp-radius);
padding: 36px 30px;
transition: var(--sp-transition);
box-shadow: var(--sp-shadow-sm);
position: relative;
overflow: hidden;
}
.sp-servicio-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(212, 175, 55, 0) 0%, rgba(212, 175, 55, 0.12) 100%); opacity: 0; transition: var(--sp-transition); }
.sp-servicio-card:hover { transform: translateY(-12px); color: var(--sp-white); box-shadow: var(--sp-shadow-lg); }
.sp-servicio-card:hover::before { opacity: 1; }
.sp-servicio-icon { display: inline-flex; width: 64px; height: 64px; border-radius: 16px; background: rgba(212, 175, 55, 0.15); color: var(--sp-gold); align-items: center; justify-content: center; margin: 0 0 22px; position: relative; z-index: 1; transition: var(--sp-transition); }
.sp-servicio-card:hover .sp-servicio-icon { background: var(--sp-gold); color: var(--sp-dark); transform: rotate(-6deg); }
.sp-servicio-title { color: var(--sp-white); font-family: var(--sp-font-serif); font-size: 22px; font-weight: 700; margin: 0 0 12px; position: relative; z-index: 1; }
.sp-servicio-desc { color: rgba(255, 255, 255, 0.72); font-size: 15px; line-height: 1.65; margin: 0 0 22px; position: relative; z-index: 1; }
.sp-servicio-link { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--sp-gold); position: relative; z-index: 1; transition: gap 0.4s ease; }
.sp-servicio-card:hover .sp-servicio-link { gap: 14px; }
/* ---------- Planes ---------- */
.sp-planes-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.sp-plan-card {
background: rgba(255, 255, 255, 0.65);
backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.85);
border-radius: var(--sp-radius);
padding: 30px 22px;
display: flex; flex-direction: column;
box-shadow: var(--sp-shadow-sm);
transition: var(--sp-transition);
position: relative;
}
.sp-plan-card:hover { transform: translateY(-10px); box-shadow: var(--sp-shadow-md); }
.sp-plan-card--featured { background: var(--sp-dark); color: var(--sp-white); border-color: var(--sp-dark); transform: scale(1.03); box-shadow: 0 30px 60px rgba(26, 26, 26, 0.28); z-index: 2; }
.sp-plan-card--featured:hover { transform: translateY(-10px) scale(1.03); }
.sp-plan-badge { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, var(--sp-gold), var(--sp-gold-soft)); color: var(--sp-dark); padding: 6px 14px; border-radius: 50px; font-size: 10.5px; font-weight: 700; letter-spacing: 1.3px; text-transform: uppercase; box-shadow: 0 8px 24px rgba(212, 175, 55, 0.4); white-space: nowrap; }
.sp-plan-name { font-family: var(--sp-font-serif); font-size: 22px; font-weight: 700; margin: 0 0 4px; color: inherit; line-height: 1.1; }
.sp-plan-card--featured .sp-plan-name { color: var(--sp-white); }
.sp-plan-tag { font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: rgba(26, 26, 26, 0.5); margin: 0 0 18px; line-height: 1.3; }
.sp-plan-card--featured .sp-plan-tag { color: var(--sp-gold); }
.sp-plan-price { display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; margin: 0 0 14px; }
.sp-plan-price-num { font-family: var(--sp-font-serif); font-size: 36px; font-weight: 700; line-height: 1; }
.sp-plan-price-num--text { font-size: 26px; }
.sp-plan-price-unit { font-size: 12.5px; color: rgba(26, 26, 26, 0.6); }
.sp-plan-card--featured .sp-plan-price-unit { color: rgba(255, 255, 255, 0.6); }
.sp-plan-price-sub { width: 100%; font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--sp-gold-soft); margin-top: 2px; }
.sp-plan-card--featured .sp-plan-price-sub { color: var(--sp-gold); }
.sp-plan-desc { font-size: 13px; line-height: 1.55; color: rgba(26, 26, 26, 0.72); margin: 0 0 18px; }
.sp-plan-card--featured .sp-plan-desc { color: rgba(255, 255, 255, 0.72); }
.sp-plan-features { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 8px; flex: 1; }
.sp-plan-features li { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; line-height: 1.5; color: rgba(26, 26, 26, 0.85); }
.sp-plan-card--featured .sp-plan-features li { color: rgba(255, 255, 255, 0.85); }
.sp-plan-features svg { color: var(--sp-gold-soft); flex-shrink: 0; margin-top: 2px; width: 14px; height: 14px; }
.sp-plan-card--featured .sp-plan-features svg { color: var(--sp-gold); }
.sp-plan-cta { width: 100%; justify-content: center; padding: 13px 18px; font-size: 13.5px; }
.sp-planes-note { text-align: center; margin: 36px auto 0; color: rgba(26, 26, 26, 0.6); font-size: 14px; }
.sp-planes-note a { color: var(--sp-gold-soft); font-weight: 600; }
@media (max-width: 1200px) {
.sp-planes-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.sp-plan-card { padding: 36px 28px; }
.sp-plan-name { font-size: 26px; }
.sp-plan-tag { font-size: 13px; }
.sp-plan-price-num { font-size: 44px; }
.sp-plan-price-num--text { font-size: 32px; }
.sp-plan-desc { font-size: 14.5px; }
.sp-plan-features li { font-size: 14px; }
.sp-plan-features svg { width: 16px; height: 16px; }
.sp-plan-cta { padding: 16px 32px; font-size: 15px; }
.sp-plan-card--featured { transform: scale(1.02); }
.sp-plan-card--featured:hover { transform: translateY(-10px) scale(1.02); }
}
@media (max-width: 760px) {
.sp-planes-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
}
@media (max-width: 520px) {
.sp-planes-grid { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
.sp-plan-card--featured { transform: none; }
.sp-plan-card--featured:hover { transform: translateY(-6px); }
}
/* ---------- Calculadora ---------- */
.sp-calc { padding-top: 0; }
.sp-calc-shell {
display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 60px;
background: linear-gradient(135deg, #1A1A1A 0%, #2A2A2A 100%);
color: var(--sp-white);
border-radius: var(--sp-radius-lg);
padding: 72px 60px;
box-shadow: var(--sp-shadow-lg);
overflow: hidden;
position: relative;
min-width: 0;
}
.sp-calc-shell::before { content: ''; position: absolute; top: -30%; left: -10%; width: 500px; height: 500px; background: radial-gradient(circle, rgba(212, 175, 55, 0.18) 0%, transparent 70%); filter: blur(60px); pointer-events: none; }
.sp-calc-intro { position: relative; z-index: 1; }
.sp-calc-intro .sp-section-title { color: var(--sp-white); }
.sp-calc-intro .sp-section-lead { color: rgba(255, 255, 255, 0.72); }
.sp-calc-bullets { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 10px; }
.sp-calc-bullets li { display: flex; gap: 10px; align-items: center; color: rgba(255, 255, 255, 0.85); font-size: 14px; }
.sp-calc-bullets svg { color: var(--sp-gold); }
.sp-calc-form { position: relative; z-index: 1; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--sp-radius); padding: 32px; display: grid; gap: 20px; min-width: 0; }
.sp-calc-form input, .sp-calc-form select { width: 100%; max-width: 100%; }
.sp-calc-field { display: flex; flex-direction: column; gap: 8px; }
.sp-calc-field label { font-size: 13px; font-weight: 600; letter-spacing: 0.6px; color: rgba(255, 255, 255, 0.85); }
.sp-calc-field input, .sp-calc-field select {
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 12px;
padding: 14px 16px;
color: var(--sp-white);
font-size: 15px; font-family: inherit;
transition: var(--sp-transition);
}
.sp-calc-field input:focus, .sp-calc-field select:focus { outline: none; border-color: var(--sp-gold); background: rgba(212, 175, 55, 0.08); }
.sp-calc-field option { background: var(--sp-dark); color: var(--sp-white); }
.sp-calc-submit { justify-content: center; margin-top: 6px; background: linear-gradient(135deg, var(--sp-gold), var(--sp-gold-soft)); color: var(--sp-dark); }
.sp-calc-submit:hover { color: var(--sp-dark); }
.sp-calc-result { grid-column: 1 / -1; position: relative; z-index: 1; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(212, 175, 55, 0.3); border-radius: var(--sp-radius); padding: 32px; min-width: 0; }
.sp-calc-result-name { font-family: var(--sp-font-serif); font-size: 36px; color: var(--sp-gold); margin: 8px 0 12px; }
.sp-calc-result-savings { font-size: 16px; color: rgba(255, 255, 255, 0.85); margin: 0 0 8px; }
.sp-calc-result-pack { font-size: 13.5px; color: rgba(212, 175, 55, 0.85); margin: 0 0 24px; letter-spacing: 0.3px; }
.sp-calc-table-wrap { overflow-x: auto; }
.sp-calc-table { width: 100%; border-collapse: collapse; min-width: 520px; }
.sp-calc-table th, .sp-calc-table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid rgba(255, 255, 255, 0.1); font-size: 14px; }
.sp-calc-table thead th { font-weight: 700; color: var(--sp-gold); letter-spacing: 0.5px; text-transform: uppercase; font-size: 12px; }
.sp-calc-table-total td { font-weight: 700; color: var(--sp-white); }
.sp-calc-table .sp-best { background: rgba(212, 175, 55, 0.15); color: var(--sp-gold); }
.sp-calc-result-note { font-size: 13px; color: rgba(255, 255, 255, 0.55); margin: 18px 0; }
.sp-calc-result-note a { color: var(--sp-gold); font-weight: 600; }
/* ---------- FAQ ---------- */
.sp-faq-container { display: grid; grid-template-columns: 1fr 1.5fr; gap: 60px; }
.sp-faq-list { display: flex; flex-direction: column; gap: 12px; }
.sp-faq-item {
background: rgba(255, 255, 255, 0.55);
border: 1px solid var(--sp-line);
border-radius: var(--sp-radius-sm);
padding: 22px 26px;
transition: var(--sp-transition);
}
.sp-faq-item[open] { border-color: var(--sp-gold-soft); background: rgba(255, 255, 255, 0.85); box-shadow: var(--sp-shadow-sm); }
.sp-faq-q { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; cursor: pointer; font-family: var(--sp-font-serif); font-weight: 700; font-size: 18px; color: var(--sp-dark); list-style: none; }
.sp-faq-q::-webkit-details-marker { display: none; }
.sp-faq-toggle { width: 28px; height: 28px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--sp-line-strong); border-radius: 50%; transition: var(--sp-transition); font-weight: 400; font-size: 18px; color: var(--sp-dark-2); }
.sp-faq-item[open] .sp-faq-toggle { transform: rotate(45deg); background: var(--sp-gold-soft); color: var(--sp-white); border-color: transparent; }
.sp-faq-a { padding-top: 16px; color: rgba(26, 26, 26, 0.78); font-size: 15.5px; line-height: 1.7; }
/* ---------- CTA ---------- */
.sp-cta-section { padding: 60px 0 120px; }
.sp-cta-container { position: relative; max-width: 880px; margin: 0 auto; padding: 0 24px; text-align: center; }
.sp-cta-container::before {
content: '';
position: absolute; inset: 0;
background: linear-gradient(135deg, #1A1A1A 0%, #2A2A2A 100%);
border-radius: var(--sp-radius-lg);
box-shadow: var(--sp-shadow-lg);
z-index: 0;
}
.sp-cta-container { padding: 80px 50px; color: var(--sp-white); }
.sp-cta-container > * { position: relative; z-index: 2; }
.sp-cta-glow { position: absolute; top: -40%; left: 50%; transform: translateX(-50%); width: 380px; height: 380px; background: radial-gradient(circle, rgba(212, 175, 55, 0.28) 0%, transparent 70%); border-radius: 50%; filter: blur(50px); z-index: 1 !important; }
.sp-cta-heading { font-family: var(--sp-font-serif); font-size: clamp(28px, 3.5vw, 44px); font-weight: 700; color: var(--sp-white); margin: 0 0 16px; }
.sp-cta-subtext { font-size: 17px; color: rgba(255, 255, 255, 0.75); line-height: 1.7; max-width: 560px; margin: 0 auto 32px; }
.sp-cta-button { display: inline-flex; align-items: center; gap: 10px; padding: 18px 42px; border-radius: 50px; background: linear-gradient(135deg, var(--sp-gold) 0%, var(--sp-gold-soft) 100%); color: var(--sp-dark); font-weight: 700; font-size: 16px; box-shadow: 0 10px 30px rgba(212, 175, 55, 0.35); transition: var(--sp-transition); }
.sp-cta-button:hover { color: var(--sp-dark); transform: translateY(-4px); box-shadow: 0 16px 40px rgba(212, 175, 55, 0.55); }
/* ---------- Footer ---------- */
.sp-footer { background: var(--sp-dark); color: rgba(255, 255, 255, 0.7); position: relative; padding: 100px 0 30px; overflow: hidden; }
.sp-footer-decoration { position: absolute; top: -10%; right: -10%; width: 480px; height: 480px; background: radial-gradient(circle, rgba(212, 175, 55, 0.18) 0%, transparent 70%); filter: blur(80px); pointer-events: none; }
.sp-footer-cta { max-width: var(--sp-content); margin: 0 auto 80px; padding: 0 24px; position: relative; z-index: 2; }
.sp-footer-cta-inner { background: linear-gradient(135deg, rgba(212, 175, 55, 0.16), rgba(184, 151, 106, 0.06)); border: 1px solid rgba(212, 175, 55, 0.25); border-radius: var(--sp-radius-lg); padding: 56px 50px; text-align: center; }
.sp-footer-cta-title { color: var(--sp-white); font-family: var(--sp-font-serif); font-size: clamp(28px, 3vw, 40px); font-weight: 700; margin: 0 0 12px; }
.sp-footer-cta-sub { color: rgba(255, 255, 255, 0.75); font-size: 16.5px; max-width: 540px; margin: 0 auto 28px; }
.sp-footer-cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.sp-footer-grid { max-width: var(--sp-content); margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 50px; position: relative; z-index: 2; }
.sp-footer-logo img { height: 38px; width: auto; filter: brightness(0) invert(1); margin: 0 0 18px; }
.sp-footer-tagline { color: rgba(255, 255, 255, 0.62); font-size: 15px; line-height: 1.65; max-width: 360px; margin: 0 0 20px; }
.sp-footer-address { font-style: normal; display: grid; gap: 8px; font-size: 14px; }
.sp-footer-address a, .sp-footer-address span { display: inline-flex; gap: 8px; align-items: center; color: rgba(255, 255, 255, 0.7); }
.sp-footer-address a:hover { color: var(--sp-gold); }
.sp-footer-title { color: var(--sp-white); font-family: var(--sp-font-serif); font-size: 18px; font-weight: 700; margin: 0 0 18px; }
.sp-footer-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.sp-footer-list a { color: rgba(255, 255, 255, 0.7); font-size: 14.5px; }
.sp-footer-list a:hover { color: var(--sp-gold); }
.sp-footer-social { display: flex; gap: 10px; margin-top: 16px; }
.sp-footer-social a { width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, 0.07); color: rgba(255, 255, 255, 0.85); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; }
.sp-footer-social a:hover { background: var(--sp-gold); color: var(--sp-dark); }
.sp-footer-bottom { max-width: var(--sp-content); margin: 60px auto 0; padding: 24px 24px 0; border-top: 1px solid rgba(255, 255, 255, 0.08); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px; color: rgba(255, 255, 255, 0.5); position: relative; z-index: 2; }
.sp-whatsapp-fab { position: fixed; bottom: 24px; right: 24px; width: 58px; height: 58px; border-radius: 50%; background: #25D366; color: var(--sp-white); display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 14px 36px rgba(37, 211, 102, 0.45); z-index: 90; transition: var(--sp-transition); }
.sp-whatsapp-fab:hover { transform: translateY(-4px) scale(1.05); color: var(--sp-white); }
/* ---------- Page (genéricas) ---------- */
.sp-page-hero { padding: 70px 0 30px; }
.sp-page-hero--small { padding: 50px 0 10px; }
.sp-page-title { font-family: var(--sp-font-serif); font-size: clamp(36px, 5vw, 60px); font-weight: 700; line-height: 1.1; margin: 16px 0 18px; max-width: 920px; }
.sp-page-lead { font-size: clamp(17px, 1.4vw, 19px); line-height: 1.7; color: rgba(26, 26, 26, 0.75); max-width: 700px; }
.sp-page-meta { color: rgba(26, 26, 26, 0.6); font-size: 14.5px; }
.sp-breadcrumbs ol { list-style: none; padding: 0; margin: 0 0 12px; display: flex; gap: 8px; flex-wrap: wrap; font-size: 13px; color: rgba(26, 26, 26, 0.6); }
.sp-breadcrumbs li:not(:last-child)::after { content: '/'; margin-left: 8px; opacity: 0.5; }
.sp-breadcrumbs a { color: var(--sp-dark-2); }
.sp-breadcrumbs a:hover { color: var(--sp-gold-soft); }
.sp-prose { max-width: var(--sp-prose); }
.sp-prose h2 { margin-top: 1.6em; }
.sp-prose h3 { margin-top: 1.4em; }
.sp-prose p, .sp-prose li { font-size: 17px; line-height: 1.75; }
.sp-prose img { border-radius: var(--sp-radius); margin: 24px 0; }
.sp-prose a { color: var(--sp-gold-soft); border-bottom: 1px solid rgba(184, 151, 106, 0.3); }
.sp-prose a:hover { color: var(--sp-dark); border-bottom-color: var(--sp-dark); }
.sp-prose blockquote { border-left: 3px solid var(--sp-gold); padding-left: 24px; margin: 24px 0; color: var(--sp-dark-2); font-family: var(--sp-font-serif); font-style: italic; font-size: 22px; line-height: 1.5; }
/* Posts grid (blog) */
.sp-posts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 28px; }
.sp-post-card { background: rgba(255, 255, 255, 0.6); border: 1px solid rgba(255, 255, 255, 0.85); border-radius: var(--sp-radius); overflow: hidden; box-shadow: var(--sp-shadow-sm); transition: var(--sp-transition); display: flex; flex-direction: column; }
.sp-post-card:hover { transform: translateY(-8px); box-shadow: var(--sp-shadow-md); }
.sp-post-thumb img { aspect-ratio: 4 / 3; object-fit: cover; }
.sp-post-body { padding: 26px 28px 30px; flex: 1; display: flex; flex-direction: column; }
.sp-post-meta { font-size: 12.5px; color: rgba(26, 26, 26, 0.55); letter-spacing: 1.2px; text-transform: uppercase; margin: 0 0 10px; }
.sp-post-title { font-family: var(--sp-font-serif); font-size: 22px; font-weight: 700; margin: 0 0 12px; line-height: 1.25; }
.sp-post-title a:hover { color: var(--sp-gold-soft); }
.sp-post-excerpt { color: rgba(26, 26, 26, 0.7); font-size: 14.5px; margin: 0 0 16px; flex: 1; }
.sp-post-link { display: inline-flex; gap: 6px; align-items: center; color: var(--sp-gold-soft); font-weight: 600; font-size: 14px; }
.sp-post-link:hover { gap: 12px; color: var(--sp-dark); }
.sp-pagination { margin-top: 60px; text-align: center; }
.sp-pagination .nav-links { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.sp-pagination .page-numbers { padding: 10px 16px; border-radius: 50px; background: rgba(255, 255, 255, 0.6); border: 1px solid var(--sp-line); font-weight: 600; }
.sp-pagination .page-numbers.current { background: var(--sp-dark); color: var(--sp-white); }
/* Article */
.sp-article-cover { max-width: 1100px; margin: 0 auto; padding: 0 24px; }
.sp-article-cover img { border-radius: var(--sp-radius); box-shadow: var(--sp-shadow-md); aspect-ratio: 16 / 9; object-fit: cover; }
.sp-article-content h2, .sp-article-content h3 { margin-top: 1.8em; }
.sp-tags { font-size: 13px; color: rgba(26, 26, 26, 0.6); }
.sp-tags a { color: var(--sp-gold-soft); margin: 0 4px; }
/* Tabla planes completa */
.sp-tabla-wrap { overflow-x: auto; background: rgba(255, 255, 255, 0.6); border-radius: var(--sp-radius); padding: 12px; box-shadow: var(--sp-shadow-sm); }
.sp-tabla { width: 100%; border-collapse: collapse; min-width: 760px; }
.sp-tabla th, .sp-tabla td { padding: 16px 18px; text-align: center; border-bottom: 1px solid var(--sp-line); }
.sp-tabla thead th { background: var(--sp-dark); color: var(--sp-white); font-weight: 700; font-family: var(--sp-font-serif); font-size: 16px; }
.sp-tabla thead th:first-child { border-top-left-radius: 14px; }
.sp-tabla thead th:last-child { border-top-right-radius: 14px; }
.sp-tabla tbody th { text-align: left; font-weight: 600; color: var(--sp-dark-2); font-size: 14.5px; }
.sp-tabla tbody td { font-size: 14.5px; color: rgba(26, 26, 26, 0.78); }
.sp-tabla tbody tr:nth-child(even) th, .sp-tabla tbody tr:nth-child(even) td { background: rgba(255, 255, 255, 0.4); }
/* Packing tiers */
.sp-packing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; }
.sp-packing-card { background: rgba(255, 255, 255, 0.6); border: 1px solid var(--sp-line); border-radius: var(--sp-radius); padding: 36px 30px; box-shadow: var(--sp-shadow-sm); transition: var(--sp-transition); }
.sp-packing-card:hover { transform: translateY(-6px); border-color: var(--sp-gold-soft); }
.sp-packing-title { font-family: var(--sp-font-serif); font-size: 20px; margin: 0 0 12px; }
.sp-packing-price { display: flex; align-items: baseline; gap: 8px; margin: 0 0 12px; }
.sp-packing-price span { font-family: var(--sp-font-serif); font-size: 36px; font-weight: 700; color: var(--sp-dark); }
.sp-packing-price small { font-size: 13px; color: rgba(26, 26, 26, 0.6); }
.sp-packing-desc { font-size: 14.5px; color: rgba(26, 26, 26, 0.72); line-height: 1.65; margin: 0; }
/* Extras */
.sp-extras-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.sp-extra-card { background: rgba(255, 255, 255, 0.6); border: 1px solid var(--sp-line); border-radius: var(--sp-radius-sm); padding: 26px 24px; transition: var(--sp-transition); }
.sp-extra-card:hover { border-color: var(--sp-gold-soft); transform: translateY(-4px); }
.sp-extra-card h3 { font-size: 18px; margin: 0 0 10px; }
.sp-extra-card p { font-size: 14px; color: rgba(26, 26, 26, 0.72); margin: 0 0 12px; }
.sp-extra-card strong { display: inline-block; padding: 4px 12px; background: var(--sp-dark); color: var(--sp-gold); border-radius: 50px; font-size: 13px; }
/* Onboarding */
.sp-onboarding-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; max-width: 800px; }
.sp-onboarding-list li { background: rgba(255, 255, 255, 0.6); border: 1px solid var(--sp-line); border-left: 4px solid var(--sp-gold-soft); border-radius: 0 var(--sp-radius) var(--sp-radius) 0; padding: 22px 28px; font-size: 16px; line-height: 1.65; }
.sp-onboarding-list strong { color: var(--sp-dark); display: inline-block; margin-right: 8px; }
/* Integraciones */
.sp-integraciones-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; max-width: 880px; margin: 0 auto; }
.sp-integracion-card { background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: var(--sp-radius-sm); padding: 28px 20px; text-align: center; font-family: var(--sp-font-serif); font-size: 18px; color: var(--sp-white); transition: var(--sp-transition); }
.sp-integracion-card:hover { background: rgba(212, 175, 55, 0.12); border-color: var(--sp-gold); color: var(--sp-gold); }
/* Nosotros */
.sp-nosotros-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 60px; align-items: start; }
.sp-nosotros-side { display: grid; gap: 20px; position: sticky; top: 100px; }
.sp-nosotros-card { background: rgba(255, 255, 255, 0.6); border: 1px solid var(--sp-line); border-radius: var(--sp-radius); padding: 28px 26px; box-shadow: var(--sp-shadow-sm); }
.sp-nosotros-card--dark { background: var(--sp-dark); color: var(--sp-white); border: 0; }
.sp-nosotros-card--dark .sp-nosotros-card-title { color: var(--sp-gold); }
.sp-nosotros-card-title { font-family: var(--sp-font-serif); font-size: 18px; font-weight: 700; margin: 0 0 14px; }
.sp-nosotros-card dl { display: grid; grid-template-columns: 110px 1fr; gap: 8px 16px; font-size: 14px; margin: 0; }
.sp-nosotros-card dt { color: rgba(26, 26, 26, 0.6); }
.sp-nosotros-card dd { margin: 0; color: var(--sp-dark); font-weight: 500; }
.sp-nosotros-card--dark p { color: rgba(255, 255, 255, 0.78); font-size: 14.5px; }
/* Contacto */
.sp-contacto-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr); gap: 60px; align-items: start; }
.sp-contacto-info { display: grid; gap: 22px; }
.sp-contacto-block { padding: 22px 24px; background: rgba(255, 255, 255, 0.6); border: 1px solid var(--sp-line); border-radius: var(--sp-radius-sm); }
.sp-contacto-title { display: flex; gap: 8px; align-items: center; font-family: var(--sp-font-serif); font-size: 16px; margin: 0 0 8px; color: var(--sp-dark); }
.sp-contacto-title svg { color: var(--sp-gold-soft); }
.sp-contacto-link { font-size: 18px; font-weight: 600; color: var(--sp-dark); display: block; margin-bottom: 4px; }
.sp-contacto-link:hover { color: var(--sp-gold-soft); }
.sp-contacto-block small { color: rgba(26, 26, 26, 0.6); font-size: 13px; }
.sp-contacto-address { font-style: normal; font-size: 14.5px; color: var(--sp-dark); }
.sp-contacto-mini { font-size: 13px; color: var(--sp-gold-soft); }
.sp-contacto-form-wrap { background: rgba(255, 255, 255, 0.65); border: 1px solid rgba(255, 255, 255, 0.85); border-radius: var(--sp-radius); padding: 40px; box-shadow: var(--sp-shadow-sm); }
.sp-contacto-form-title { font-family: var(--sp-font-serif); font-size: 24px; margin: 0 0 24px; }
.sp-contact-form { display: grid; gap: 18px; }
.sp-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sp-form-field { display: flex; flex-direction: column; gap: 6px; }
.sp-form-field label { font-size: 13px; font-weight: 600; color: var(--sp-dark-2); letter-spacing: 0.3px; }
.sp-form-field input, .sp-form-field select, .sp-form-field textarea {
background: var(--sp-white); border: 1px solid var(--sp-line-strong); border-radius: 12px;
padding: 14px 16px; font-family: inherit; font-size: 15px; color: var(--sp-dark);
transition: var(--sp-transition);
}
.sp-form-field input:focus, .sp-form-field select:focus, .sp-form-field textarea:focus { outline: none; border-color: var(--sp-gold-soft); box-shadow: 0 0 0 3px rgba(184, 151, 106, 0.15); }
.sp-form-field textarea { resize: vertical; min-height: 120px; }
.sp-form-check { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: rgba(26, 26, 26, 0.72); }
.sp-form-check input { margin-top: 4px; }
.sp-form-note { font-size: 12.5px; color: rgba(26, 26, 26, 0.5); margin-top: 6px; }
.sp-form-note code { background: rgba(26, 26, 26, 0.06); padding: 2px 6px; border-radius: 4px; font-size: 11.5px; }
.sp-contacto-map { border-radius: var(--sp-radius); overflow: hidden; box-shadow: var(--sp-shadow-sm); margin-top: 20px; }
/* 404 */
.sp-404-inner { max-width: 720px; text-align: center; }
.sp-404-links { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin: 28px 0 36px; }
.sp-404-search { display: flex; gap: 10px; max-width: 440px; margin: 0 auto; }
.sp-404-search input { flex: 1; padding: 14px 18px; border-radius: 50px; border: 1px solid var(--sp-line-strong); font-size: 15px; }
.sp-404-search input:focus { outline: none; border-color: var(--sp-gold-soft); }
.sp-empty { text-align: center; padding: 80px 20px; color: rgba(26, 26, 26, 0.7); }
/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
.sp-hero-inner { gap: 50px; }
.sp-hero-visual { min-height: 420px; }
.sp-pasos-grid { grid-template-columns: 1fr 1fr; }
.sp-faq-container { grid-template-columns: 1fr; gap: 32px; }
.sp-calc-shell { grid-template-columns: 1fr; padding: 56px 40px; gap: 40px; }
}
@media (max-width: 720px) {
.sp-calc-shell { padding: 44px 28px; gap: 32px; border-radius: 24px; }
.sp-calc-form { padding: 24px 22px; gap: 16px; }
.sp-calc-result { padding: 26px 22px; }
.sp-calc-result-name { font-size: 28px; }
.sp-calc-intro .sp-section-title { font-size: 28px; }
.sp-calc-table th, .sp-calc-table td { padding: 10px 12px; font-size: 13px; }
}
@media (max-width: 480px) {
.sp-calc-shell { padding: 36px 20px; border-radius: 22px; }
.sp-calc-form { padding: 22px 18px; }
.sp-calc-result { padding: 22px 18px; }
}
@media (max-width: 900px) {
.sp-topbar-meta { display: none; }
.sp-nav-toggle { display: flex; }
.sp-nav-overlay { position: fixed; inset: 0; background: rgba(10, 10, 10, 0.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); opacity: 0; pointer-events: none; transition: opacity 0.4s ease; z-index: 95; }
.sp-nav-overlay.is-open { opacity: 1; pointer-events: auto; }
.sp-nav-menu-wrap {
position: fixed; top: 0; right: -100%;
width: 86%; max-width: 360px;
height: 100vh; height: 100dvh; /* dvh evita el salto por la barra del navegador */
background: var(--sp-dark);
padding: 88px 28px calc(40px + env(safe-area-inset-bottom, 0px));
box-shadow: var(--sp-shadow-lg);
transition: right 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
z-index: 100; overflow-y: auto;
box-sizing: border-box;
/* El wrap hereda display:flex del layout de escritorio. Sin fijar
direccion ni alineacion, el y el CTA se reparten en FILA y
ambos se estiran (align-items:stretch por defecto) a toda la
altura del drawer: de ahi la pildora dorada gigante que tapaba
los enlaces. En movil el drawer debe apilar en columna. */
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
}
.sp-nav-menu-wrap.is-open { right: 0; }
.sp-nav-menu { flex-direction: column; gap: 6px; width: 100%; flex: 0 0 auto; }
.sp-nav-menu a, .sp-nav-link { font-size: 18px; padding: 14px 0; display: block; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.sp-nav-menu a::after, .sp-nav-link::after { display: none; }
.sp-nav-mobile-cta {
display: flex !important;
flex: 0 0 auto; /* no crece ni se encoge: altura natural */
align-self: stretch; /* ancho completo del drawer */
align-items: center;
justify-content: center;
gap: 10px;
box-sizing: border-box;
width: 100%;
min-height: 52px; /* objetivo tactil comodo */
margin-top: 24px;
padding: 14px 24px;
border-radius: 999px;
background: linear-gradient(135deg, var(--sp-gold), var(--sp-gold-soft));
color: var(--sp-dark) !important;
font-weight: 700;
font-size: 15px;
line-height: 1.2;
text-decoration: none;
}
.sp-btn-primary--nav { display: none; }
.sp-hero { padding: 40px 0 60px; }
.sp-hero-inner { grid-template-columns: 1fr; gap: 40px; }
.sp-hero-title { font-size: clamp(34px, 8vw, 48px); }
.sp-hero-lead { font-size: 16px; }
/* Hero visual: layout vertical estático en tablet/móvil */
.sp-hero-visual { min-height: auto; max-width: 100%; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sp-hero-card { position: static !important; animation: none !important; max-width: 100% !important; }
.sp-hero-card--main { grid-column: 1 / -1; padding: 22px 24px; }
.sp-hero-card--floating, .sp-hero-card--gold { width: 100%; padding: 16px 18px; }
.sp-pasos-grid { grid-template-columns: 1fr; max-width: 540px; margin: 0 auto; }
.sp-footer-grid { grid-template-columns: 1fr 1fr; }
.sp-nosotros-grid, .sp-contacto-grid { grid-template-columns: 1fr; }
.sp-nosotros-side { position: static; }
.sp-form-row { grid-template-columns: 1fr; }
.sp-section { padding: 70px 0 60px; }
.sp-cta-container { padding: 60px 30px; }
.sp-footer-cta-inner { padding: 40px 28px; }
.sp-strip-track { font-size: 18px; gap: 32px; }
}
@media (max-width: 580px) {
.sp-topbar-inner { font-size: 12px; gap: 14px; padding: 8px 18px; }
.sp-topbar-item:nth-child(2) { display: none; }
.sp-navbar-wrapper { padding: 10px 0; }
.sp-navbar { padding: 10px 14px 10px 16px; border-radius: 100px; }
.sp-logo img { height: 36px !important; }
.sp-nav-toggle { width: 32px; height: 32px; }
.sp-hero { padding: 24px 0 50px; }
.sp-hero-title { font-size: clamp(30px, 9vw, 40px); line-height: 1.12; }
.sp-hero-lead { font-size: 15.5px; }
.sp-hero-bullets { gap: 10px 18px; font-size: 13.5px; }
/* En móvil: solo card principal + 1 más, ocultar la decorativa para no saturar */
.sp-hero-visual { grid-template-columns: 1fr; gap: 12px; }
.sp-hero-card--main { padding: 18px 18px; }
.sp-hero-card--floating { display: flex !important; }
.sp-hero-card--gold { display: flex !important; }
.sp-hero-card-row { font-size: 13px; padding: 8px 0; }
.sp-hero-card-value { font-size: 13px; }
.sp-hero-cta { gap: 10px; }
.sp-hero-cta .sp-btn { width: 100%; justify-content: center; }
.sp-footer-grid { grid-template-columns: 1fr; gap: 36px; }
.sp-footer-bottom { flex-direction: column; text-align: center; }
.sp-section-head { margin-bottom: 36px; }
.sp-page-title { font-size: 34px; }
.sp-cta-container { padding: 50px 22px; }
.sp-footer-cta-actions .sp-btn { width: 100%; justify-content: center; }
.sp-contacto-form-wrap { padding: 28px 22px; }
.sp-whatsapp-fab { width: 52px; height: 52px; bottom: 16px; right: 16px; }
.sp-section { padding: 56px 0 50px; }
.sp-section-title { font-size: 30px; }
.sp-eyebrow { font-size: 11px; letter-spacing: 2px; padding: 6px 14px; }
}
/* ---------- Reduce motion ---------- */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
/* ---------- Print-friendly ---------- */
@media print {
.sp-topbar, .sp-navbar-wrapper, .sp-footer, .sp-whatsapp-fab, .sp-cta-section { display: none !important; }
body { background: #fff; color: #000; }
}
/* ============================================================
UI refresh 2026-07 -- fondos estructurales, iconografia,
elevacion de tarjetas, respiracion y listas visuales.
============================================================ */
/* --- Fondo dot-matrix sutil en heros (gris azulado, se funde con el beige) --- */
.sp-hero,
.sp-page-hero {
background-image:
linear-gradient(180deg, rgba(243, 240, 235, 0) 0%, rgba(243, 240, 235, 0) 70%, var(--sp-beige) 100%),
radial-gradient(circle, rgba(71, 85, 105, 0.13) 1px, transparent 1.6px);
background-size: auto, 26px 26px;
}
/* --- Seccion alterna: rompe el scroll con un gris calido muy claro --- */
.sp-bg-alt {
background: #EDEBE5;
border-top: 1px solid var(--sp-line);
border-bottom: 1px solid var(--sp-line);
}
/* Dentro de paginas de prosa se comporta como panel redondeado */
.sp-prose .sp-bg-alt {
border: 1px solid var(--sp-line);
border-radius: 20px;
padding: clamp(28px, 4vw, 44px);
margin: 2.4em 0;
}
.sp-prose .sp-bg-alt > h2:first-child,
.sp-bg-alt .sp-section-head { margin-top: 0; }
/* --- Elevacion y profundidad de tarjetas --- */
.sp-valor-card {
border: 1px solid var(--sp-line);
border-radius: 18px;
}
.sp-valor-card:hover {
transform: translateY(-6px);
box-shadow: 0 18px 40px -18px rgba(26, 26, 26, 0.28);
}
.sp-servicio-card {
border: 1px solid rgba(212, 175, 55, 0.16);
border-radius: 18px;
}
.sp-servicio-card:hover {
box-shadow: 0 24px 48px -20px rgba(26, 26, 26, 0.5);
border-color: rgba(212, 175, 55, 0.4);
}
.sp-servicio-card:focus-visible {
outline: 2px solid var(--sp-gold);
outline-offset: 3px;
}
/* --- Respiracion: mas aire entre secciones ---
OJO: estas reglas van FUERA de media query y DESPUES de los bloques
@media de arriba. Con la misma especificidad gana la ultima, asi que
los minimos de clamp() son los que mandan en movil: por eso los
minimos son pequenos. Los valores de escritorio no cambian (el termino
vw y el maximo siguen siendo los mismos). */
.sp-section { padding: clamp(48px, 11vw, 150px) 0; }
.sp-section--tight { padding: clamp(28px, 4vw, 48px) 0; }
.sp-page-hero { padding: clamp(44px, 6.5vw, 84px) 0 clamp(28px, 3.5vw, 48px); }
.sp-section-head { margin-bottom: clamp(32px, 6vw, 72px); }
/* --- Listas de especificaciones con check verde --- */
ul.sp-checklist {
list-style: none;
padding-left: 0;
margin-left: 0;
}
ul.sp-checklist li {
position: relative;
padding-left: 36px;
margin: 0 0 14px;
}
ul.sp-checklist li::before {
content: '';
position: absolute;
left: 0;
top: 0.18em;
width: 22px;
height: 22px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232F8A4C' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.1V12a10 10 0 1 1-5.9-9.1'/%3E%3Cpolyline points='22 4 12 14.01 9 11.01'/%3E%3C/svg%3E") no-repeat center / contain;
}
/* ============================================================
Fluent Forms -- integracion con la identidad del theme.
Clases verificadas contra el render real del formulario 3.
============================================================ */
.frm-fluent-form,
.fluent_form_3 {
--ff-radius: 12px;
background: var(--sp-white);
border: 1px solid var(--sp-line);
border-radius: 20px;
padding: clamp(24px, 4vw, 44px);
box-shadow: 0 18px 40px -24px rgba(26, 26, 26, 0.22);
max-width: 720px;
}
/* --- Grupos y etiquetas --- */
.frm-fluent-form .ff-el-group { margin-bottom: 26px; }
.frm-fluent-form .ff-el-input--label label {
font-family: var(--sp-font-sans, 'Inter', sans-serif);
font-size: 15px;
font-weight: 600;
color: var(--sp-dark);
margin-bottom: 8px;
display: inline-block;
line-height: 1.45;
}
.frm-fluent-form .ff-el-is-required.asterisk-right label:after,
.frm-fluent-form .ff-el-is-required label:after { color: var(--sp-gold-soft); }
/* Texto de ayuda bajo la etiqueta */
.frm-fluent-form .ff-el-help-message {
font-size: 13.5px;
line-height: 1.55;
color: var(--sp-muted);
margin: 6px 0 0;
}
/* --- Campos: texto, email, url, select, textarea --- */
.frm-fluent-form input.ff-el-form-control,
.frm-fluent-form select.ff-el-form-control,
.frm-fluent-form textarea.ff-el-form-control {
width: 100%;
background: #FBFAF8;
border: 1px solid var(--sp-line-strong);
border-radius: var(--ff-radius);
padding: 13px 16px;
font-family: inherit;
font-size: 15.5px;
color: var(--sp-dark);
line-height: 1.5;
transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
box-shadow: none;
-webkit-appearance: none;
appearance: none;
}
.frm-fluent-form textarea.ff-el-form-control { min-height: 130px; resize: vertical; }
.frm-fluent-form input.ff-el-form-control::placeholder,
.frm-fluent-form textarea.ff-el-form-control::placeholder { color: rgba(26, 26, 26, 0.38); }
.frm-fluent-form input.ff-el-form-control:hover,
.frm-fluent-form select.ff-el-form-control:hover,
.frm-fluent-form textarea.ff-el-form-control:hover { border-color: rgba(26, 26, 26, 0.28); }
.frm-fluent-form input.ff-el-form-control:focus,
.frm-fluent-form select.ff-el-form-control:focus,
.frm-fluent-form textarea.ff-el-form-control:focus {
outline: none;
background: var(--sp-white);
border-color: var(--sp-gold-soft);
box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.18);
}
/* Flecha propia para los desplegables (sin depender del UA) */
.frm-fluent-form select.ff-el-form-control {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A1A1A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 14px center;
background-size: 18px;
padding-right: 44px;
cursor: pointer;
}
/* --- Checkboxes --- */
.frm-fluent-form .ff-el-form-check { margin-bottom: 10px; }
.frm-fluent-form .ff-el-form-check label.ff-el-form-check-label {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 15px;
line-height: 1.55;
color: rgba(26, 26, 26, 0.82);
cursor: pointer;
font-weight: 400;
}
.frm-fluent-form input.ff-el-form-check-input[type="checkbox"] {
width: 19px;
height: 19px;
margin: 2px 0 0;
flex: 0 0 19px;
border: 1px solid var(--sp-line-strong);
border-radius: 5px;
background: var(--sp-white);
cursor: pointer;
-webkit-appearance: none;
appearance: none;
transition: background 0.2s ease, border-color 0.2s ease;
}
.frm-fluent-form input.ff-el-form-check-input[type="checkbox"]:checked {
background: var(--sp-dark) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D4AF37' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") no-repeat center / 13px;
border-color: var(--sp-dark);
}
.frm-fluent-form input.ff-el-form-check-input[type="checkbox"]:focus-visible {
outline: 2px solid var(--sp-gold);
outline-offset: 2px;
}
/* --- Boton de envio: mismo lenguaje que .sp-btn--dark --- */
.frm-fluent-form .ff-btn-submit,
.frm-fluent-form button.ff-btn.ff-btn-submit {
background: var(--sp-dark);
color: var(--sp-beige);
border: 1px solid var(--sp-dark);
border-radius: 999px;
padding: 15px 34px;
font-family: inherit;
font-size: 15px;
font-weight: 600;
letter-spacing: 0.01em;
cursor: pointer;
transition: var(--sp-transition, all 0.35s ease);
box-shadow: 0 10px 24px -14px rgba(26, 26, 26, 0.6);
}
.frm-fluent-form .ff-btn-submit:hover {
background: var(--sp-gold);
border-color: var(--sp-gold);
color: var(--sp-dark);
transform: translateY(-2px);
box-shadow: 0 16px 30px -16px rgba(212, 175, 55, 0.75);
}
.frm-fluent-form .ff-btn-submit:focus-visible {
outline: 2px solid var(--sp-gold);
outline-offset: 3px;
}
/* --- Bloques HTML propios dentro del formulario (ruta de descalificacion) --- */
.frm-fluent-form .sp-descal {
background: #EDEBE5;
border: 1px solid var(--sp-line);
border-left: 3px solid var(--sp-gold-soft);
border-radius: 14px;
padding: 24px 26px;
margin-bottom: 8px;
}
.frm-fluent-form .sp-descal h3 {
font-family: var(--sp-font-serif);
font-size: 20px;
margin: 0 0 10px;
color: var(--sp-dark);
}
.frm-fluent-form .sp-descal p { margin: 0; font-size: 15px; line-height: 1.65; color: rgba(26, 26, 26, 0.78); }
/* --- Errores y mensajes --- */
.frm-fluent-form .ff-el-is-error input.ff-el-form-control,
.frm-fluent-form .ff-el-is-error select.ff-el-form-control,
.frm-fluent-form .ff-el-is-error textarea.ff-el-form-control {
border-color: #C0392B;
box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.12);
}
.frm-fluent-form .error.text-danger,
.frm-fluent-form .ff-el-is-error .error {
color: #C0392B;
font-size: 13.5px;
margin-top: 6px;
}
.ff-message-success {
background: var(--sp-white);
border: 1px solid var(--sp-line);
border-left: 3px solid #2F8A4C;
border-radius: 16px;
padding: 28px 30px;
color: var(--sp-dark);
}
.ff-message-success h3 { font-family: var(--sp-font-serif); margin: 0 0 10px; }
/* --- Honeypot: invisible pero accesible para el bot --- */
.frm-fluent-form .ff-hpsf-container { position: absolute !important; left: -9999px !important; }
@media (max-width: 580px) {
.frm-fluent-form, .fluent_form_3 { padding: 22px 18px; border-radius: 16px; }
.frm-fluent-form .ff-btn-submit { width: 100%; }
}
/* ---------- Confirmacion del formulario (rutas del embudo) ---------- */
.sp-confirm {
background: var(--sp-white);
border: 1px solid var(--sp-line);
border-left: 3px solid var(--sp-gold-soft);
border-radius: 18px;
padding: 30px 32px;
max-width: 720px;
}
.sp-confirm h3 {
font-family: var(--sp-font-serif);
font-size: 24px;
margin: 0 0 12px;
color: var(--sp-dark);
}
.sp-confirm p { font-size: 15.5px; line-height: 1.7; color: rgba(26, 26, 26, 0.78); margin: 0 0 14px; }
.sp-confirm p:last-child { margin-bottom: 0; }
.sp-confirm-nota { font-size: 14px; color: var(--sp-muted); }
.sp-confirm--recurso { border-left-color: #2F8A4C; }
.sp-confirm .sp-btn { margin-top: 4px; }
/* ============================================================
Escala movil (2026-07-30)
Va al FINAL del fichero a proposito. Varios bloques de arriba
("UI refresh 2026-07", "Fluent Forms", "Confirmacion") redeclaran
selectores fuera de @media y, por cascada, ganaban a los overrides
moviles que hay mas arriba. Poniendo esto al final se resuelve sin
pelear con !important.
Los tamanos base usan clamp() con minimos pensados para escritorio
(h1 40px, h2 32px...). Por debajo de ~700px el termino vw siempre es
menor que el minimo, asi que el minimo gana y la tipografia NO baja:
ese es el motivo de que en movil se vea todo enorme.
============================================================ */
@media (max-width: 768px) {
h1 { font-size: clamp(28px, 7.5vw, 40px); }
h2 { font-size: clamp(24px, 6vw, 32px); }
h3 { font-size: clamp(19px, 4.6vw, 24px); }
.sp-page-title { font-size: clamp(28px, 7.5vw, 40px); }
.sp-section-title { font-size: clamp(24px, 6vw, 32px); }
.sp-cta-heading,
.sp-footer-cta-title { font-size: clamp(23px, 5.6vw, 30px); }
.sp-page-lead,
.sp-section-lead { font-size: 16px; line-height: 1.65; }
body { line-height: 1.6; }
/* Aire vertical: en movil sobraba practicamente el doble */
.sp-section { padding: clamp(44px, 8vw, 60px) 0; }
.sp-section--tight{ padding: 28px 0; }
.sp-section-head { margin-bottom: clamp(28px, 5vw, 40px); }
.sp-page-hero { padding: 40px 0 26px; }
.sp-container { padding: 0 20px; }
/* Contenedores con padding generoso de escritorio */
.sp-cta-container { padding: 44px 22px; }
.sp-footer-cta-inner { padding: 34px 22px; }
.sp-contacto-form-wrap { padding: 24px 20px; }
.sp-confirm { padding: 24px 22px; }
.frm-fluent-form,
.fluent_form_3 { padding: 24px 20px; }
/* Botones a ancho completo sin desbordar (ver box-sizing en .sp-btn) */
.sp-btn, .sp-btn-primary { padding: 14px 24px; font-size: 14.5px; }
.sp-btn--ghost, .sp-btn--ghost-light { padding: 12px 22px; }
}
/* Moviles estrechos: un punto mas de ajuste */
@media (max-width: 380px) {
.sp-container { padding: 0 16px; }
.sp-section { padding: 38px 0; }
h1, .sp-page-title { font-size: 26px; }
h2, .sp-section-title { font-size: 22px; }
.sp-nav-menu-wrap { width: 92%; padding-left: 22px; padding-right: 22px; }
}