/**
* DSC Funnels — Estilos públicos (landing + thank-you N1/N2)
*
* Cubre TODO el HTML que emite el motor, no el HTML libre de la campaña:
* - Formulario: .dsc-funnel-form / .dsc-funnel-field / .dsc-funnel-terms /
* .dsc-funnel-submit / .dsc-funnel-msg / .req / .dsc-funnel-hp
* (ver includes/public/class-landing-renderer.php::render_form)
* - Thank-you: .dscf-wrap / .dscf-card / .dscf-btn / .dscf-gift
* (public/templates/thankyou-n1.php y thankyou-n2.php)
*
* REGLAS DE LA HOJA
* 1. Especificidad BAJA a propósito (una clase, o clase + elemento). El
* `landing_css` de cada campaña se inyecta DESPUÉS en el documento, así que
* con la misma especificidad la campaña siempre gana. Sin !important salvo
* en el honeypot y en prefers-reduced-motion.
* 2. Cero color repetido: todo sale de las variables `--dscf-*` de :root. Una
* campaña cambia su paleta redefiniendo :root (o .dsc-funnel-form) en su
* `landing_css`, sin tocar una sola regla de este archivo.
* 3. El objetivo es que una campaña NUEVA se vea presentable sin escribir CSS.
*
* @package DSC_Funnels
* @since 1.7.0
*/
/* ==========================================================================
1. Variables de marca
========================================================================== */
:root {
/* Marca DSC — paleta aprobada "Deep Ink + Signal Amber".
El CTA va en ámbar con texto ink: es el color de conversión. */
--dscf-accent: #F5A623;
--dscf-accent-dark: #DB8E12;
--dscf-on-accent: #0C1B2A;
--dscf-brand: #143A5A; /* navy-700 DSC */
--dscf-brand-dark: #10263A; /* ink-800 */
--dscf-brand-light: #EAF1F8; /* mist */
--dscf-brand-contrast: #FFFFFF;
/* Texto y superficies */
--dscf-ink: #16202B; /* charcoal */
--dscf-muted: #566274; /* muted */
--dscf-line: #E6E3DC; /* line */
--dscf-surface: #FFFFFF;
--dscf-bg: #F7F6F3; /* paper */
--dscf-disabled-bg: #F1EFEA;
/* Estados */
--dscf-error: #D64545;
--dscf-error-bg: #FBEDED;
--dscf-error-line: #F0C9C9;
--dscf-success: #3F7D5B;
--dscf-success-bg: #EDF4F0;
--dscf-success-line: #C7DED2;
/* Tipografía y forma */
--dscf-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
--dscf-font-size: 16px;
--dscf-line-height: 1.55;
--dscf-radius: 10px;
--dscf-radius-sm: 8px;
/* Espaciado */
--dscf-gap: 18px;
--dscf-gap-sm: 8px;
--dscf-pad: 32px;
/* Sombras y foco */
--dscf-shadow: 0 2px 12px rgba(0, 0, 0, .06);
--dscf-shadow-btn: 0 8px 18px -10px rgba(0, 0, 0, .45);
--dscf-ring: 0 0 0 4px rgba(0, 169, 157, .22);
--dscf-ring-error: 0 0 0 4px rgba(192, 57, 43, .18);
/* Transiciones (se anulan en prefers-reduced-motion) */
--dscf-t: .18s ease;
}
/* El anillo de foco se deriva del color de marca cuando el navegador soporta
color-mix: así una campaña que cambie --dscf-brand cambia también su foco. */
@supports (color: color-mix(in srgb, red 50%, transparent)) {
:root {
--dscf-ring: 0 0 0 4px color-mix(in srgb, var(--dscf-brand) 22%, transparent);
--dscf-ring-error: 0 0 0 4px color-mix(in srgb, var(--dscf-error) 18%, transparent);
}
}
/* ==========================================================================
2. Página completa (thank-you N1/N2 y landings que usen el wrapper)
--------------------------------------------------------------------------
Las plantillas de agradecimiento son documentos HTML propios (no pasan por
el theme). `body.dscf-page` da la base; `.dscf-wrap` la repite para que la
página se vea bien aunque el no lleve la clase.
========================================================================== */
body.dscf-page {
margin: 0;
padding: 0;
background: var(--dscf-bg);
color: var(--dscf-ink);
font-family: var(--dscf-font);
font-size: var(--dscf-font-size);
line-height: var(--dscf-line-height);
-webkit-font-smoothing: antialiased;
}
.dscf-wrap {
box-sizing: border-box;
max-width: 640px;
margin: 0 auto;
padding: 40px 20px;
color: var(--dscf-ink);
font-family: var(--dscf-font);
line-height: var(--dscf-line-height);
}
.dscf-wrap *,
.dsc-funnel-form * {
box-sizing: border-box;
}
.dscf-card {
background: var(--dscf-surface);
border: 1px solid var(--dscf-line);
border-radius: var(--dscf-radius);
padding: var(--dscf-pad);
box-shadow: var(--dscf-shadow);
}
.dscf-card h1 {
margin: 0 0 12px;
color: var(--dscf-brand);
font-size: 26px;
line-height: 1.25;
font-weight: 700;
}
.dscf-card h2 {
margin: 24px 0 10px;
color: var(--dscf-ink);
font-size: 19px;
line-height: 1.3;
font-weight: 700;
}
.dscf-card p {
margin: 0 0 14px;
color: var(--dscf-ink);
}
.dscf-card p:last-child {
margin-bottom: 0;
}
.dscf-card a {
color: var(--dscf-brand-dark);
}
/* Texto secundario / nota al pie de tarjeta */
.dscf-note {
margin-top: 18px;
color: var(--dscf-muted);
font-size: 13px;
line-height: 1.5;
}
/* Bloque de regalos N1 (checklist + video) */
.dscf-gift {
display: flex;
flex-wrap: wrap;
gap: var(--dscf-gap-sm);
margin: 24px 0;
}
/* Fila de acciones al pie de la tarjeta */
.dscf-actions {
display: flex;
flex-wrap: wrap;
gap: var(--dscf-gap-sm);
margin-top: 28px;
}
/* --------------------------------------------------------------------------
Botón de las páginas de agradecimiento (.dscf-btn)
-------------------------------------------------------------------------- */
.dscf-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--dscf-gap-sm);
margin: 0;
padding: 13px 22px;
border: 0;
border-radius: var(--dscf-radius-sm);
background: var(--dscf-brand);
color: var(--dscf-brand-contrast);
font-family: inherit;
font-size: 15px;
font-weight: 700;
line-height: 1.2;
text-align: center;
text-decoration: none;
cursor: pointer;
box-shadow: var(--dscf-shadow-btn);
transition: background var(--dscf-t), transform var(--dscf-t), box-shadow var(--dscf-t);
-webkit-tap-highlight-color: transparent;
}
.dscf-btn:hover {
background: var(--dscf-brand-dark);
color: var(--dscf-brand-contrast);
transform: translateY(-1px);
}
.dscf-btn:active {
transform: translateY(0);
}
.dscf-btn:focus-visible {
outline: 2px solid transparent;
box-shadow: var(--dscf-ring);
}
/* Variante secundaria: `.secondary` es la que ya emiten las plantillas;
`--secondary` queda como alias para HTML nuevo. */
.dscf-btn.secondary,
.dscf-btn--secondary {
background: var(--dscf-ink);
}
.dscf-btn.secondary:hover,
.dscf-btn--secondary:hover {
background: #000;
}
/* Variante fantasma (enlaces de bajo énfasis) */
.dscf-btn--ghost {
background: transparent;
color: var(--dscf-brand-dark);
border: 1.5px solid var(--dscf-line);
box-shadow: none;
}
.dscf-btn--ghost:hover {
background: var(--dscf-brand-light);
color: var(--dscf-brand-dark);
border-color: var(--dscf-brand);
}
.dscf-btn[hidden] {
display: none;
}
/* ==========================================================================
3. Formulario del embudo (.dsc-funnel-form)
========================================================================== */
.dsc-funnel-form {
display: block;
max-width: 560px;
margin: 24px 0 0;
color: var(--dscf-ink);
font-family: var(--dscf-font);
font-size: var(--dscf-font-size);
line-height: var(--dscf-line-height);
text-align: left;
}
/* Dentro de una tarjeta de agradecimiento el form ocupa todo el ancho. */
.dscf-card .dsc-funnel-form {
max-width: none;
}
/* ==========================================================================
4. Campos (.dsc-funnel-field — el renderer emite un por campo)
========================================================================== */
.dsc-funnel-field {
display: block;
margin: 0 0 var(--dscf-gap);
padding: 0;
}
.dsc-funnel-field label {
display: block;
margin: 0 0 6px;
color: var(--dscf-ink);
font-size: 14px;
font-weight: 600;
line-height: 1.35;
}
/* Asterisco de campo obligatorio */
.req {
color: var(--dscf-error);
font-weight: 700;
}
.dsc-funnel-field input,
.dsc-funnel-field select,
.dsc-funnel-field textarea {
display: block;
width: 100%;
margin: 0;
padding: 13px 14px;
border: 1.5px solid var(--dscf-line);
border-radius: var(--dscf-radius-sm);
background: var(--dscf-surface);
color: var(--dscf-ink);
font-family: inherit;
/* 16px evita el zoom automático de iOS al enfocar. */
font-size: 16px;
line-height: 1.4;
transition: border-color var(--dscf-t), box-shadow var(--dscf-t);
}
.dsc-funnel-field input:hover,
.dsc-funnel-field select:hover,
.dsc-funnel-field textarea:hover {
border-color: var(--dscf-muted);
}
.dsc-funnel-field input:focus,
.dsc-funnel-field select:focus,
.dsc-funnel-field textarea:focus {
outline: 2px solid transparent;
outline-offset: 0;
border-color: var(--dscf-brand);
box-shadow: var(--dscf-ring);
}
.dsc-funnel-field input::placeholder,
.dsc-funnel-field textarea::placeholder {
color: #9aa4b0;
opacity: 1;
}
.dsc-funnel-field input:disabled,
.dsc-funnel-field select:disabled,
.dsc-funnel-field textarea:disabled {
background: var(--dscf-disabled-bg);
color: var(--dscf-muted);
cursor: not-allowed;
}
.dsc-funnel-field textarea {
min-height: 120px;
resize: vertical;
}
/* Select con flecha propia (evita el look nativo dispar entre navegadores). */
.dsc-funnel-field select {
appearance: none;
-webkit-appearance: none;
padding-right: 40px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%235b6470' d='M6 8.5 1 3.5h10z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 14px center;
cursor: pointer;
}
/* El renderer añade además un modificador por tipo al mismo
:
.dsc-funnel-field-text / -email / -tel / -select / -textarea.
No se estilan aquí a propósito: quedan como gancho libre para el
`landing_css` de cada campaña (p. ej. poner dos campos en una fila). */
/* Estado inválido (lo pone funnel.js tras validar en blur/submit) */
.dsc-funnel-field.has-error label {
color: var(--dscf-error);
}
.dsc-funnel-field input.is-invalid,
.dsc-funnel-field select.is-invalid,
.dsc-funnel-field textarea.is-invalid {
border-color: var(--dscf-error);
background: var(--dscf-surface);
}
.dsc-funnel-field input.is-invalid:focus,
.dsc-funnel-field select.is-invalid:focus,
.dsc-funnel-field textarea.is-invalid:focus {
border-color: var(--dscf-error);
box-shadow: var(--dscf-ring-error);
}
/* ==========================================================================
5. Error por campo (.dsc-funnel-error — lo crea funnel.js junto al input)
========================================================================== */
.dsc-funnel-error {
display: none;
margin: 6px 0 0;
color: var(--dscf-error);
font-size: 13px;
line-height: 1.4;
font-weight: 600;
}
.dsc-funnel-error.is-visible {
display: block;
animation: dscf-fade-up .22s ease both;
}
/* ==========================================================================
6. Aceptación de términos (.dsc-funnel-terms — es un