tiene que ocupar la fila entera para que el campo no se encoja. */
.q-form label > .combobox { display: block; }
/* ==========================================================================
14. Aportes (/donaciones)
==========================================================================
El formulario es el mismo de siempre, con sus clases del marco antiguo
(.field, .input, .amount-grid, .trust, .btn--accent) y sus estilos en línea.
Se viste con .p-cform, igual que /contacto, y aquí se añade lo que ese
formulario tiene de propio: la rejilla de montos y la línea de confianza. */
/* Las variables que nombran los estilos en línea del formulario. Sin esto,
`border-top: 1px solid var(--color-line)` no resuelve y el
desaparece,
y los `margin: var(--space-3)` se quedan en cero. Van sobre .p-don para no
filtrarse al resto del marco. */
.p-don {
--color-line: var(--p-line-2);
--space-2: 1rem; --space-3: 1.5rem; --space-4: 2rem; --space-5: 3rem;
--fs-h2: clamp(1.6rem, 1.1rem + 2vw, 2.5rem);
}
/* Dos columnas separadas por un hilo, sin encajonar ninguna: el formulario se
apoya en la página como el de /contacto. */
.p-don { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(2rem, 1.2rem + 3vw, 4rem); align-items: start; }
.p-don__form { position: relative; }
.p-don__form::before {
content: ''; position: absolute; top: 0; bottom: 0; left: calc(clamp(2rem, 1.2rem + 3vw, 4rem) / -2);
width: 1px; background: var(--p-line-2);
}
@media (max-width: 940px) {
/* En celular, aportar primero y el porqué después: es a lo que se viene. */
.p-don { grid-template-columns: 1fr; gap: clamp(2.4rem, 2rem + 2vw, 3.4rem); }
.p-don__why { order: 2; }
.p-don__form::before { display: none; }
}
/* --- Columna «Por qué aportar» -------------------------------------------- */
/* Tres destinos, en renglones con filete. El icono va en oro y sin caja. */
.p-dest { list-style: none; margin: 2.2rem 0 0; padding: 0; border-top: 1px solid var(--p-line); }
.p-dest li {
display: grid; grid-template-columns: 2rem 1fr; gap: .35rem 1rem;
padding-block: 1.25rem; border-bottom: 1px solid var(--p-line);
}
.p-dest__ic { grid-row: 1 / span 2; align-self: start; margin-top: .1rem; color: var(--p-oro); }
.p-dest__ic svg { width: 22px; height: 22px; }
.p-dest h3 { font-size: 1.24rem; color: var(--p-navy); }
.p-dest p { color: var(--p-ink-2); font-size: .92rem; line-height: 1.72; text-align: justify; hyphens: auto; }
.p-don__unica { margin: 2rem 0 1.1rem; color: var(--p-ink-2); font-size: .92rem; line-height: 1.7; }
/* --- Lo propio del formulario de aporte ----------------------------------- */
.p-cform .donate__panel { display: block; }
.p-cform .donate__panel > h3 {
font-size: 1.6rem; color: var(--p-navy);
padding-bottom: .9rem; margin-bottom: 1.4rem; border-bottom: 2px solid var(--p-oro);
}
/* Rótulo suelto («Selecciona un monto mensual»): el formulario lo trae fuera de
un .field, con su tamaño en línea; aquí solo se le da el color de los demás. */
.p-cform .donate__panel > label { color: var(--p-navy); }
/* Los cuatro montos en una fila; en cuanto no caben, de a dos. */
.p-cform .amount-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(108px, 1fr)); gap: .6rem; margin-bottom: 1.1rem; }
/* En celular auto-fit metía tres arriba y dejaba el cuarto solo abajo; con dos
columnas fijas quedan dos filas parejas. */
@media (max-width: 560px) { .p-cform .amount-grid { grid-template-columns: 1fr 1fr; } }
.p-cform .amount-opt { position: relative; }
.p-cform .amount-opt input { position: absolute; opacity: 0; pointer-events: none; }
.p-cform .amount-opt label {
display: block; text-align: center; padding: .85rem .5rem; cursor: pointer;
border: 1px solid var(--p-line-2); border-radius: var(--p-r-sm); background: var(--p-paper);
font-family: var(--p-display); font-size: 1.28rem; font-weight: 700; letter-spacing: .01em; color: var(--p-navy);
transition: border-color var(--p-t), background var(--p-t), color var(--p-t), box-shadow var(--p-t);
}
.p-cform .amount-opt label:hover { border-color: var(--p-line-2); background: var(--p-azul-soft); }
.p-cform .amount-opt input:checked + label {
border-color: var(--p-azul); background: var(--p-azul-soft); color: var(--p-azul);
box-shadow: inset 0 0 0 1px var(--p-azul);
}
/* El foco del teclado se ve en la ficha, porque el radio está oculto. */
.p-cform .amount-opt input:focus-visible + label { outline: 3px solid var(--p-oro); outline-offset: 2px; }
/* Pares de campos que el formulario ya trae agrupados. */
.p-cform .field__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.1rem; }
@media (max-width: 560px) { .p-cform .field__row { grid-template-columns: 1fr; } }
/* Líneas de confianza: el aviso del comprobante y el sello de Reveniu. */
.p-cform .trust { display: flex; align-items: center; gap: .55rem; color: var(--p-ink-2); font-size: .84rem; line-height: 1.5; }
.p-cform .trust svg { width: 17px; height: 17px; flex: none; color: #1F7A4D; }
/* El botón de aporte es .btn--accent: rojo, no azul como el de /contacto. */
.p-cform .btn--accent { background: var(--p-rojo); box-shadow: 0 10px 24px rgba(209,75,69,.3); }
.p-cform .btn--accent:hover { background: var(--p-rojo-hot); box-shadow: 0 14px 30px rgba(209,75,69,.38); }
/* La tarjeta de datos bancarios trae sus propios estilos; solo se la separa. */
.p-don .transf { margin-top: .2rem; }
/* ==========================================================================
15. Ficha de miembro (/miembros/{slug})
==========================================================================
La ficha no abre con banda: empieza en blanco, con el retrato al lado del
nombre, como estaba antes de migrar a este diseño. Lo que cambia es la
tipografía del marco nuevo, la fotografía sin recuadro y los dos textos
corridos con los dos márgenes rectos. */
.p-mprof-sec { padding-top: clamp(1.5rem, 1rem + 1.6vw, 2.4rem); }
/* Migas de pan para una página que no abre sobre negro: las de .p-crumb están
pensadas en blancos translúcidos y aquí no se leerían. */
.p-crumb--ink { color: var(--p-ink-3); }
.p-crumb--ink a { color: var(--p-ink-2); }
.p-crumb--ink a:hover { color: var(--p-azul); }
.p-crumb--ink span { color: var(--p-line-2); }
.p-mprof {
display: grid; grid-template-columns: clamp(210px, 26vw, 320px) minmax(0, 1fr);
gap: clamp(1.8rem, 1.2rem + 3vw, 4rem); align-items: start;
}
/* Retrato en color: en el directorio las fichas van en blanco y negro, y llegar
aquí es lo que devuelve el color. El marco de oro desplazado le da fondo sin
encajonarlo; la foto va por encima para que solo asomen los cantos de abajo
y de la derecha. */
.p-mprof__ph { position: relative; margin: 0; }
.p-mprof__ph img {
position: relative; z-index: 1;
display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 12%;
border-radius: var(--p-r); box-shadow: var(--p-sh);
}
.p-mprof__ph::before {
content: ''; position: absolute; z-index: 0; inset: 16px -16px -16px 16px;
border: 1px solid rgba(201,169,97,.6); border-radius: var(--p-r);
}
/* text-wrap:balance reparte las dos líneas: sin él «GARCÍA-HUIDOBRO» se partía
por su propio guion y el apellido quedaba a caballo entre dos renglones. */
.p-mprof h1 {
margin-top: .55rem; font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.1rem);
color: var(--p-navy); text-wrap: balance;
}
/* El resumen de una línea va más grande y más oscuro que la reseña: es lo que
se lee de pasada, como en la ficha anterior. */
.p-mprof__lead { margin-top: 1.1rem; max-width: 66ch; color: var(--p-ink); font-size: 1.1rem; line-height: 1.75; }
/* La reseña larga, separada del resumen por el filete de oro y en medida de
lectura: es lo que hace legible un párrafo de 900 caracteres. */
.p-mbio { margin-top: 1.7rem; padding-top: 1.5rem; border-top: 2px solid var(--p-oro); max-width: 74ch; }
.p-mbio p { color: var(--p-ink-2); font-size: 1rem; line-height: 1.85; }
/* Los dos textos corridos de la ficha, con los dos márgenes rectos. */
.p-mprof__lead, .p-mbio p { text-align: justify; hyphens: auto; }
/* Redes: hoy ninguna ficha las trae, pero el campo existe en la tabla. */
.p-mprof__soc { display: flex; gap: .6rem; margin-top: 1.8rem; }
.p-mprof__soc a {
display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
border: 1px solid var(--p-line-2); color: var(--p-ink-2); transition: var(--p-t);
}
.p-mprof__soc a:hover { border-color: var(--p-oro); color: var(--p-oro); background: var(--p-oro-soft); }
.p-mprof__soc svg { width: 17px; height: 17px; }
@media (max-width: 760px) {
/* Apilado, el retrato a media columna: a ancho completo se comía la
pantalla entera antes de llegar al nombre. */
.p-mprof { grid-template-columns: 1fr; gap: 1.7rem; }
.p-mprof__ph { width: min(62%, 240px); }
.p-mprof__ph::before { inset: 12px -12px -12px 12px; }
}
/* ==========================================================================
16. Pantallas táctiles
==========================================================================
Lo que se pulsa con el dedo necesita más superficie que lo que se apunta con
el ratón. Va colgado de (pointer: coarse) y no de un ancho: una tableta de
1024 px se toca igual que un teléfono, y un portátil de 1024 px no. Solo
cambia la superficie sensible; el dibujo se queda como está. */
@media (pointer: coarse) {
/* Enlaces del pie: eran renglones de 32 px de alto. */
.q-foot__col a { padding-block: .6rem; }
.q-foot__soc a { width: 44px; height: 44px; }
.q-foot__bot a { display: inline-block; padding-block: .5rem; }
/* Cintillo superior: iconos de 26 px y un enlace de 20. */
.p-top__soc a { width: 34px; height: 34px; }
.p-top__link { display: inline-flex; align-items: center; height: 34px; }
/* Migas de pan. */
.p-crumb a { padding-block: .45rem; }
/* Desplegable de comuna y región: el chevrón medía 28×28. */
.p-body .combobox__toggle { width: 42px; height: 42px; right: .15rem; }
/* Puntos del carrusel de la portada: la barra sigue midiendo 4 px, pero el
borde transparente le da 28 de alto sensible sin que se note. */
.p-hero__dots button {
height: 28px; border-block: 12px solid transparent;
background-clip: content-box;
}
.p-hero__dots button.is-on { background-clip: content-box; }
/* Datos de contacto de la portada: correo, teléfono y dirección medían 24 px
de alto, y son justo los que se pulsan para llamar o escribir. */
.q-info__list a { padding-block: .5rem; }
/* Redes: las de la portada, las de la ficha de miembro y las de contacto. */
.q-info__soc a, .p-mprof__soc a, .p-cinfo__soc a { width: 44px; height: 44px; }
}
/* ==========================================================================
17. Portadas en el teléfono
==========================================================================
Medido a 390×844: la banda de /nosotros ocupaba el 59 % de la pantalla y la
de la portada el 76 %, así que había que desplazarse para llegar a lo que la
página venía a contar. En un teléfono la cabecera tiene que presentar y
apartarse. No se quita ni una palabra: bajan el cuerpo de letra, los aires y
la altura mínima, que es de donde salía el bulto.
Va a 560 px y no a los 700 del resto de reglas móviles: entre 561 y 700 —los
teléfonos grandes de lado y las tabletas chicas— la banda todavía cabe. */
@media (max-width: 560px) {
/* --- Bandas de página (/eventos, /archivo, /nosotros, /donaciones,
/contacto, álbum y colección) --------------------------------- */
.p-phead { min-height: 220px; padding-block: 2.1rem; }
/* Un titular de tres líneas a 38 px se comía media pantalla él solo. */
.p-phead h1,
.p-phead--sub h1,
.p-phead--about h1 { font-size: clamp(1.7rem, 1.05rem + 3.1vw, 2.2rem); line-height: 1; }
.p-crumb { margin-bottom: .8rem; font-size: .74rem; }
/* La bajada pasa a ser lo que es en un teléfono: la letra pequeña de la
cabecera, no un segundo titular. */
.p-phead__lead { font-size: .88rem; line-height: 1.6; margin-top: .75rem; }
/* Fichas de vidrio de la agenda. */
.p-phead__meta { margin-top: 1.1rem; gap: .4rem; }
.p-phead__meta li { font-size: .72rem; padding: .34rem .62rem; }
.p-phead__count { margin-top: 1rem; font-size: .72rem; }
/* --- Héroe de la portada (/) ------------------------------------------ */
/* El texto del héroe vive en una capa absoluta (.p-hero__body, inset:0)
apoyada abajo, porque las diapositivas del carrusel van superpuestas y el
escenario necesita una altura propia. Si el contenido no cabe en esa
altura, no empuja: se desborda hacia arriba y se mete debajo del
encabezado, que es pegajoso y va por delante (z-index 60). Medido a
320 px, el titular ya asomaba 4 px por debajo de la cabecera.
Se arregla por los dos lados: el contenido pide menos alto —los dos
botones se ponen en una fila cuando caben, en vez de uno sobre otro, que
eran 127 px— y el escenario da algo más. El aire de abajo no se toca:
son los 80 px que dejan sitio a los puntos del carrusel. */
/* Las diapositivas dejan de estar superpuestas «al aire» y pasan a una sola
celda de rejilla: siguen una encima de otra, pero ahora ocupan sitio, así
que el escenario mide lo que mide la diapositiva más alta y el texto
nunca tiene que salirse de la caja. Es lo que quita el solape de raíz, sin
números mágicos: si mañana un evento trae un título más largo, la portada
crece sola en vez de meterse bajo el encabezado. */
.p-hero__stage { display: grid; min-height: 420px; }
/* Cada diapositiva se apoya abajo dentro de la celda: el escenario lo marca
la más alta y las cortas siguen con el texto pegado al pie de la foto,
como en el diseño de escritorio. */
.p-hero__slide {
position: relative; grid-area: 1 / 1;
display: flex; flex-direction: column; justify-content: center;
}
/* Sin los puntos indicadores, el aire de abajo ya no tiene que reservarles
sitio: eran los 5rem que separaban el texto de la barra de controles. */
.p-hero__body { position: relative; inset: auto; padding-block: 1.7rem 2.4rem; }
/* Los tres rectángulos que marcan la diapositiva actual se quitan en el
teléfono. Las flechas ya estaban ocultas desde 700 px, así que la barra
de controles entera se va: los botones siguen en el documento —el guion
del carrusel los usa para marcar cuál está activa— pero no se pintan. */
.p-hero__ctrl { display: none; }
/* Las diapositivas de evento son las que mandan sobre la altura: título
largo y cuatro fichas de datos que a 320 px caen una por renglón. */
.p-hero h2.p-hero__t { font-size: clamp(1.6rem, 1rem + 3.4vw, 2.3rem); }
.p-hero__meta { gap: .3rem; margin-top: .9rem; }
.p-hero__meta li { font-size: .7rem; padding: .26rem .58rem; }
.p-hero__meta svg { width: 13px; height: 13px; }
.p-hero h1, .p-hero h2.p-hero__t { font-size: clamp(1.95rem, 1.15rem + 4.3vw, 2.9rem); margin-top: .85rem; }
.p-hero__sub { font-size: .86rem; line-height: 1.58; margin-top: .75rem; }
.p-hero__tag { font-size: .66rem; padding: .3rem .7rem; }
.p-hero__cta { margin-top: 1.1rem; gap: .5rem; }
/* flex:1 1 auto en lugar del 1 1 100% de la regla de 700 px: los dos caben
en una fila desde ~360 px y, donde no caben, cada uno se sigue yendo a su
renglón a ancho completo. */
.p-hero__cta .p-btn { flex: 1 1 auto; padding: .78rem 1.05rem; font-size: .84rem; }
}
/* ==========================================================================
18. Pie de página en el teléfono
==========================================================================
Apilado en una sola columna, el pie eran cuatro bloques seguidos y unos
700 px de desplazamiento para tres listas de cuatro enlaces cortos. Aquí se
reordena: la marca arriba a ancho completo, las dos listas cortas en paralelo
y los datos de contacto abajo, también a ancho completo porque el correo no
cabe en media columna. No cambia ni un texto ni un enlace. */
@media (max-width: 560px) {
.q-foot { padding-top: 2.2rem; }
.q-foot__grid { grid-template-columns: 1fr 1fr; gap: 1.7rem 1.2rem; padding-bottom: 1.9rem; }
/* El bloque de marca (logotipo, lema y redes) y el de contacto ocupan la
fila entera; «Movimiento» y «Participa» se reparten la de en medio. */
.q-foot__grid > div:first-child,
.q-foot__col:last-child { grid-column: 1 / -1; }
/* Un filete separa la marca de las listas: sin él los cuatro bloques se
leían como una sola lista larga. */
.q-foot__grid > div:first-child { padding-bottom: 1.6rem; border-bottom: 1px solid rgba(255,255,255,.12); }
.q-foot__logo { width: 158px; }
.q-foot__grid > div > p { margin-top: .8rem; font-size: .85rem; line-height: 1.65; }
.q-foot__soc { margin-top: 1rem; }
.q-foot h4 { margin-bottom: .5rem; font-size: .84rem; }
.q-foot__col a { font-size: .86rem; }
/* Los datos de contacto, ya a ancho completo, se separan de las dos listas
con su propio filete para que no parezcan una tercera columna suelta. */
.q-foot__col:last-child { padding-top: 1.4rem; border-top: 1px solid rgba(255,255,255,.12); }
/* Abajo, el aviso y el acceso en dos renglones: en una sola línea el
«Acceder» quedaba colgado al otro extremo de un texto de dos líneas. */
.q-foot__bot { flex-direction: column; align-items: flex-start; gap: .2rem; padding-block: 1rem; }
}
/* ==========================================================================
19. Ficha de actividad (/eventos/{slug})
==========================================================================
La página venía del marco antiguo mientras la agenda que lleva hasta ella ya
estaba en este diseño. Se viste igual que /donaciones: banda arriba, dos
columnas debajo —contenido y datos— y el formulario del panel colgado de
.p-cform sin tocarle un campo. */
/* Las variables de app.css que nombran los estilos en línea del formulario y de
la tarjeta; van sobre .p-evd para no filtrarse al resto del marco. */
.p-evd {
--color-line: var(--p-line-2);
--space-2: 1rem; --space-3: 1.5rem; --space-4: 2rem; --space-5: 3rem; --space-6: 4rem;
}
/* --- Banda ---------------------------------------------------------------- */
/* La imagen de la actividad suele ser un afiche con texto: recortada a una
franja se destroza. Aquí va desenfocada y solo pone el color; la buena se ve
entera más abajo, en la columna de contenido. */
/* El desenfoque deja los bordes transparentes, así que la imagen tiene que
sobresalir de la banda. Se hace estirando la caja (inset negativo) y no con
un transform: escalada, la capa transformada ensanchaba el documento cuatro
píxeles en pantallas de 320 px pese al recorte de la banda. */
.p-phead__ph--soft {
filter: blur(24px) saturate(1.35) brightness(.68);
inset: -44px; width: auto; height: auto; transform: none; animation: none;
}
.p-phead--ev { min-height: clamp(280px, 34vh, 400px); }
/* Tipo y estado, en las fichas de vidrio de las demás bandas. El estado lleva
un punto de color, como las tarjetas de la agenda. */
.p-evd__tags { margin-top: 0; margin-bottom: 1.1rem; }
.p-evd__estado::before {
content: ''; width: 7px; height: 7px; border-radius: 50%; flex: none;
background: var(--p-ink-3);
}
.p-evd__estado.is-open::before { background: #38B26B; }
.p-evd__estado.is-live::before { background: var(--p-oro); }
.p-evd__estado.is-soon::before { background: var(--p-azul-hot); }
.p-evd__estado.is-closed::before,
.p-evd__estado.is-done::before { background: rgba(255,255,255,.4); }
/* --- Dos columnas --------------------------------------------------------- */
.p-evd { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: clamp(1.8rem, 1.2rem + 2.6vw, 3.4rem); align-items: start; }
@media (max-width: 940px) { .p-evd { grid-template-columns: minmax(0, 1fr); } }
/* La fotografía, entera y sin recortar: es lo que anuncia la actividad. */
.p-evd__media { margin: 0 0 clamp(1.8rem, 1.2rem + 2vw, 2.6rem); }
.p-evd__media img { display: block; width: 100%; height: auto; border-radius: var(--p-r); box-shadow: var(--p-sh); }
.p-evd__bloque { margin-top: clamp(2.4rem, 1.8rem + 2.4vw, 3.6rem); }
.p-evd__h2 { margin-top: .7rem; margin-bottom: 1.1rem; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); color: var(--p-navy); }
.p-evd__prosa p { color: var(--p-ink-2); font-size: 1rem; line-height: 1.85; text-align: justify; hyphens: auto; }
.p-evd__prosa p + p { margin-top: .9rem; }
.p-evd__nota { margin: 0 0 1.2rem; color: var(--p-ink-2); font-size: .92rem; line-height: 1.7; }
.p-evd__nota b { color: var(--p-navy); }
/* --- Sesiones ------------------------------------------------------------- */
/* Veinticuatro renglones seguidos son un muro: el filete y el icono en oro dan
dónde apoyar la vista, y en pantalla ancha van a dos columnas. */
.p-evd__ses { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 2rem; border-top: 1px solid var(--p-line); }
@media (max-width: 720px) { .p-evd__ses { grid-template-columns: 1fr; } }
.p-evd__ses li { display: grid; grid-template-columns: 1.6rem 1fr; gap: .1rem .8rem; padding-block: .85rem; border-bottom: 1px solid var(--p-line); }
.p-evd__ses-ic { grid-row: 1 / span 2; align-self: start; margin-top: .15rem; color: var(--p-oro); }
.p-evd__ses-ic svg { width: 17px; height: 17px; }
/* El rótulo y el detalle van uno debajo del otro: el marcado los trae dentro de
un mismo
, así que en línea se pegaban («9 de julio de 2026 18:30 hrs»). */
.p-evd__ses b { display: block; font-family: var(--p-sans); font-size: .95rem; font-weight: 700; color: var(--p-navy); }
.p-evd__ses span { display: block; margin-top: .15rem; font-size: .86rem; color: var(--p-ink-2); }
.p-evd__ses .is-cancel { opacity: .55; }
.p-evd__ses .is-cancel b { text-decoration: line-through; }
/* --- Avisos --------------------------------------------------------------- */
.p-aviso {
display: flex; align-items: flex-start; gap: .7rem; margin-bottom: 1.4rem;
padding: .9rem 1.1rem; border-radius: var(--p-r-sm);
font-size: .92rem; line-height: 1.6;
}
.p-aviso svg { width: 18px; height: 18px; flex: none; margin-top: .15rem; }
.p-aviso--info { background: var(--p-azul-soft); border: 1px solid #B9CDF3; color: var(--p-azul); }
.p-aviso--error { background: #FCEDEC; border: 1px solid #EFC3C0; color: #9B2C25; }
.p-aviso--aviso { background: var(--p-oro-soft); border: 1px solid #E4CE9A; color: #7A5200; }
.p-aviso b { font-weight: 800; }
/* --- Columna de datos ----------------------------------------------------- */
.p-evd__aside { position: sticky; top: calc(var(--p-head) + 1.2rem); }
@media (max-width: 940px) { .p-evd__aside { position: static; } }
.p-evd__card { background: var(--p-paper); border: 1px solid var(--p-line); border-radius: var(--p-r-lg); padding: clamp(1.3rem, 1rem + 1vw, 1.8rem); }
.p-evd__precio {
font-family: var(--p-display); font-size: clamp(1.9rem, 1.5rem + 1.4vw, 2.6rem); line-height: 1;
color: var(--p-navy); padding-bottom: 1.1rem; border-bottom: 2px solid var(--p-oro);
}
.p-evd__precio small { display: block; margin-top: .5rem; font-family: var(--p-sans); font-size: .8rem; font-weight: 700; letter-spacing: .04em; color: var(--p-ink-2); }
.p-evd__datos { list-style: none; margin: 1.3rem 0 0; padding: 0; display: grid; gap: 1.1rem; }
.p-evd__datos li { display: grid; grid-template-columns: 1.5rem 1fr; gap: .1rem .75rem; }
.p-evd__datos svg { grid-row: 1 / span 2; align-self: start; margin-top: .15rem; width: 17px; height: 17px; color: var(--p-oro); }
.p-evd__datos b { display: block; font-family: var(--p-sans); font-size: .94rem; font-weight: 700; color: var(--p-navy); }
.p-evd__datos span { display: block; margin-top: .2rem; font-size: .86rem; line-height: 1.6; color: var(--p-ink-2); }
.p-evd__cta { width: 100%; margin-top: 1.5rem; }
.p-evd__cta[disabled] { background: var(--p-paper-2); border-color: var(--p-line-2); color: var(--p-ink-3); cursor: not-allowed; }
.p-evd__cta[disabled]:hover { transform: none; }
.p-evd__trust { display: flex; align-items: center; gap: .55rem; margin: 1.1rem 0 0; font-size: .82rem; line-height: 1.5; color: var(--p-ink-2); }
.p-evd__trust svg { width: 17px; height: 17px; flex: none; color: #1F7A4D; }
/* --- Lo propio del formulario de inscripción ------------------------------ */
/* Lo pinta el panel evento por evento: además de los campos fijos puede traer
preguntas de opción múltiple, casillas y cuadrículas. */
.p-cform .value-card { background: none; border: 0; box-shadow: none; padding: 0 !important; }
.p-cform .field__hint { margin-top: .8rem; font-size: .85rem; color: var(--p-ink-2); }
.p-cform .opts { display: flex; flex-direction: column; gap: .5rem; }
.p-cform .opt-row { display: flex; align-items: center; gap: .6rem; font-size: .92rem; color: var(--p-ink); cursor: pointer; }
.p-cform .opt-row input { width: 17px; height: 17px; accent-color: var(--p-azul); flex: none; }
.p-cform .table-wrap { overflow-x: auto; }
.p-cform .table { width: 100%; border-collapse: collapse; }
.p-cform .table th, .p-cform .table td { padding: .5rem .6rem; border-bottom: 1px solid var(--p-line); text-align: left; }
.p-cform .table th { font-size: .8rem; font-weight: 700; color: var(--p-navy); }