/* Packers España — Checkout Stripe embebido
*
* Criterio: este archivo pone MAQUETACIÓN. La tipografía y el color de texto los
* pone el tema (Ubuntu / Alfa Slab One), de modo que los ajustes de Texto del
* módulo de Divi siguen mandando sobre el formulario.
*
* Los colores de marca salen de variables. Para cambiarlos sin tocar el plugin,
* en Divi → Opciones del tema → CSS personalizado:
*
* .pec-app { --pec-accent: #22372B; --pec-accent-2: #FBB800; }
*/
.pec-app {
--pec-accent: #22372B; /* verde Packers España */
--pec-accent-2: #FBB800; /* dorado */
--pec-surface: #F5F0E8; /* crema */
--pec-border: rgba(14, 22, 18, 0.22);
--pec-radius: 6px;
/* Tamaño base del formulario. El tema pone 14px en y 16px en ,
* así que igualamos el de los párrafos. Para que mande Divi en su lugar,
* basta con poner --pec-font-size: inherit en el CSS personalizado. */
--pec-font-size: 16px;
max-width: 640px;
margin: 0 auto;
font-size: var(--pec-font-size);
color: inherit;
}
/* ---- Títulos ----
* OJO: aquí NO se declara font-family. El tema da Alfa Slab One a los
* y cualquier declaración propia ganaría por especificidad y la anularía.
* Solo añadimos caja alta y espaciado. */
.pec-app .pec-h {
text-transform: uppercase;
letter-spacing: 0.015em;
font-size: 1.15em;
line-height: 1.3;
margin: 0 0 8px;
}
.pec-app .pec-done .pec-h {
font-size: 1.05em; /* el mensaje de gracias es más largo */
}
.pec-app .pec-lead {
margin: 0 0 18px;
}
/* ---- Campos ---- */
.pec-row {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin-bottom: 14px;
}
.pec-field {
display: flex;
flex-direction: column;
flex: 1 1 200px;
}
.pec-field-sm {
flex: 0 0 120px;
}
.pec-field > span {
font-size: 0.8em;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
margin-bottom: 5px;
opacity: 0.65;
}
.pec-field input,
.pec-field select {
width: 100%;
box-sizing: border-box;
font: inherit;
color: inherit;
padding: 11px 13px;
border: 1px solid var(--pec-border);
border-radius: var(--pec-radius);
background: #fff;
}
.pec-field input:focus,
.pec-field select:focus {
outline: 2px solid var(--pec-accent-2);
outline-offset: 1px;
border-color: var(--pec-accent);
}
.pec-hp {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
/* ---- Botones ---- */
.pec-btn {
display: inline-block;
font: inherit;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
background: var(--pec-accent);
color: #fff;
border: 0;
border-radius: var(--pec-radius);
padding: 13px 26px;
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease;
}
.pec-btn:hover:not(:disabled) {
background: var(--pec-accent-2);
color: var(--pec-accent);
}
.pec-btn:disabled {
opacity: 0.6;
cursor: default;
}
.pec-link {
background: none;
border: 0;
padding: 0;
margin: 0 0 14px;
font: inherit;
font-size: 0.9em;
color: inherit;
text-decoration: underline;
cursor: pointer;
opacity: 0.8;
}
.pec-link:hover {
opacity: 1;
}
/* ---- Bloques de información ---- */
.pec-summary,
.pec-recap {
background: var(--pec-surface);
border-left: 4px solid var(--pec-accent-2);
padding: 12px 14px;
border-radius: 4px;
margin-bottom: 14px;
}
.pec-muted {
opacity: 0.7;
font-size: 0.9em;
}
.pec-note {
font-size: 0.85em;
opacity: 0.7;
margin-top: 14px;
}
.pec-alert {
padding: 11px 14px;
border-radius: 5px;
margin-bottom: 16px;
font-size: 0.92em;
}
.pec-alert-test,
.pec-alert-warn {
background: var(--pec-surface);
border: 1px solid var(--pec-accent-2);
color: inherit;
}
.pec-alert-error {
background: #fdecec;
border: 1px solid #f5b5b5;
color: #922;
}
.pec-checkout {
min-height: 320px;
}
.pec-done {
background: var(--pec-surface);
border-left: 4px solid var(--pec-accent);
padding: 20px;
border-radius: 4px;
}
@media (max-width: 480px) {
.pec-field-sm {
flex: 1 1 100%;
}
}