/* ============================================================
   BLOQUES. Web por bloques (26-oct-2026): secciones de GTR, proyectos y los bloques
   normales de WordPress con la imagen de GTR. Diseños del copy aprobado de Raúl (23-oct).
   ============================================================ */

/* ---------- Página hecha con bloques ---------- */
.bloques { padding-bottom: var(--e-8); }
.bloques:not(.bloques--portada) { padding-top: var(--e-6); }
.bloques--portada { padding-bottom: 0; }
.bloques > * { margin-block: 0; }
.bloques > * + * { margin-top: var(--e-5); }
.bloques > .gtr-seccion, .bloques > .alignfull { max-width: none !important; margin-inline: 0 !important; }
.bloques > .gtr-seccion + *, .bloques > * + .gtr-seccion { margin-top: 0; }
.bloques > .alignwide { width: min(100% - 2*var(--e-5), var(--ancho)); margin-inline: auto !important; }
.bloques > :where(:not(.gtr-seccion):not(.alignfull):not(.alignwide)) { width: min(100% - 2*var(--e-5), 860px); margin-inline: auto !important; }
.bloques h1 { font-size: clamp(2rem, 4vw, var(--t-3xl)); }
.bloques h2 { font-size: var(--t-2xl); }
.bloques > h2, .bloques > .wp-block-group > h2 { margin-top: var(--e-7); }
.bloques p { color: var(--texto); }
.bloques a:not(.btn):not(.wp-block-button__link):not(.enlace-flecha):not(.proyecto-tarjeta) { color: var(--blanco); text-decoration: underline; text-decoration-color: var(--rojo); text-underline-offset: 3px; }
.bloques strong { color: var(--blanco); }
.bloques__titulo { margin-bottom: var(--e-5); }

/* ---------- Estilos GTR de bloques normales ---------- */
p.is-style-rotulo { display: flex; align-items: center; gap: var(--e-2); font-family: var(--f-dato); font-size: var(--t-xs); letter-spacing: .18em; text-transform: uppercase; color: var(--rojo) !important; margin-bottom: 0; }
p.is-style-rotulo::before { content: ""; width: 22px; height: 1px; background: currentColor; flex: none; }
p.is-style-rotulo + h1, p.is-style-rotulo + h2, p.is-style-rotulo + h3 { margin-top: var(--e-3) !important; }
p.is-style-rotulo mark { margin-left: auto; background: none; color: var(--verde-dato); font-size: inherit; }
p.is-style-rotulo mark::before { content: "● "; }
p.is-style-destacado { color: var(--blanco) !important; font-weight: 600; font-size: var(--t-l); }
p.is-style-nota { color: var(--texto-suave) !important; font-size: var(--t-s); }
p.is-style-firma { color: var(--texto-suave) !important; font-size: var(--t-s); }
p.is-style-firma strong { color: var(--blanco); }
p.is-style-entrada { font-size: var(--t-l); color: var(--texto) !important; }
h1.is-style-grande, h2.is-style-grande { font-size: clamp(2.2rem, 5vw, 3.6rem); letter-spacing: -0.02em; }
.has-pequeno-font-size { font-size: var(--t-s) !important; } .has-grande-font-size { font-size: var(--t-xl) !important; } .has-titular-font-size { font-size: var(--t-3xl) !important; }

/* tarjetas */
.wp-block-group.is-style-tarjeta, .wp-block-group.is-style-tarjeta-whatsapp {
    background: var(--panel); border: 1px solid var(--linea); border-radius: var(--radio); padding: var(--e-5);
}
.wp-block-group.is-style-tarjeta-whatsapp { border-color: rgba(57,217,138,.45); display: flex; flex-direction: column; height: 100%; }
.wp-block-group.is-style-tarjeta-whatsapp .wp-block-buttons { margin-top: auto; padding-top: var(--e-4); }
.wp-block-group.is-style-tarjeta-whatsapp .wp-block-button, .wp-block-group.is-style-tarjeta-whatsapp .wp-block-button__link { width: 100%; }
.is-style-tarjeta > * + *, .is-style-tarjeta-whatsapp > * + * { margin-top: var(--e-2); }
.is-style-tarjeta h3, .is-style-tarjeta-whatsapp h3 { font-size: var(--t-xl); margin: var(--e-2) 0 0; }
.is-style-tarjeta p:last-child, .is-style-tarjeta-whatsapp p:last-child { margin-bottom: 0; }
.wp-block-column > .is-style-tarjeta + .is-style-tarjeta { margin-top: var(--e-4); }
.wp-block-group.is-style-franja { background: var(--negro); border-block: 1px solid var(--linea-suave); padding: var(--e-7) var(--e-5); }
.wp-block-columns { gap: var(--e-4); margin-bottom: 0; }
.wp-block-column { min-width: 0; }

/* listas */
ul.is-style-etiquetas { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--e-2); }
ul.is-style-etiquetas li { margin: 0; padding: 6px 14px; border: 1px solid var(--linea); border-radius: 999px; font-size: var(--t-s); color: var(--blanco); background: var(--panel); }
ul.is-style-comprobada { list-style: none; padding: 0; }
ul.is-style-comprobada li { padding-left: 1.6em; position: relative; margin: 6px 0; }
ul.is-style-comprobada li::before { content: "✓"; position: absolute; left: 0; color: var(--verde-dato); font-weight: 700; }
ul.is-style-linea-tiempo, ol.is-style-linea-tiempo { list-style: none; padding: 0; margin-top: var(--e-5); display: grid; grid-auto-flow: column; grid-auto-columns: minmax(130px, 1fr); gap: var(--e-4); overflow-x: auto; padding-top: 22px; position: relative; }
.is-style-linea-tiempo::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 1px; background: var(--rojo); opacity: .7; }
.is-style-linea-tiempo li { position: relative; margin: 0; font-size: var(--t-s); color: var(--texto-suave); line-height: 1.45; }
.is-style-linea-tiempo li::before { content: ""; position: absolute; top: -21px; left: 0; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--rojo); background: var(--grafito); }
.is-style-linea-tiempo li strong { display: block; font-family: var(--f-dato); color: var(--blanco); font-size: var(--t-xs); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 4px; }

/* botones */
.wp-block-buttons { display: flex; flex-wrap: wrap; gap: var(--e-3); }
.wp-block-button__link, .wp-element-button {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2); min-height: 48px; padding: 0 var(--e-5) !important;
    border-radius: var(--radio-s); border: 1px solid var(--rojo-boton); background: var(--rojo-boton); color: #fff !important;
    font-family: var(--f-titulo); font-weight: 700; font-size: var(--t-s); letter-spacing: .06em; text-transform: uppercase; text-decoration: none !important;
    transition: transform .2s var(--curva), box-shadow .2s var(--curva), background .2s;
}
.wp-block-button__link:hover { background: var(--rojo-boton-2); transform: translateY(-1px); box-shadow: 0 10px 30px -8px var(--rojo-halo); }
.is-style-whatsapp .wp-block-button__link { background: #1fbf5b; border-color: #1fbf5b; color: #04170b !important; }
.is-style-whatsapp .wp-block-button__link::before { content: ""; width: 18px; height: 18px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2Zm0 18.2a8.2 8.2 0 0 1-4.2-1.1l-.3-.2-3 .8.8-2.9-.2-.3A8.2 8.2 0 1 1 12 20.2Z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2Zm0 18.2a8.2 8.2 0 0 1-4.2-1.1l-.3-.2-3 .8.8-2.9-.2-.3A8.2 8.2 0 1 1 12 20.2Z'/%3E%3C/svg%3E") center/contain no-repeat; }
.is-style-whatsapp .wp-block-button__link:hover { background: #25d366; box-shadow: 0 10px 30px -8px rgba(37,211,102,.4); }
.is-style-hueco .wp-block-button__link { background: transparent; border-color: var(--linea); color: var(--blanco) !important; }
.is-style-hueco .wp-block-button__link:hover { border-color: var(--rojo); background: var(--rojo-fondo); }
.is-style-flecha .wp-block-button__link { background: none; border: 0; padding: 0 !important; min-height: 0; text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--blanco) !important; border-bottom: 1px solid var(--rojo); border-radius: 0; }
.is-style-flecha .wp-block-button__link::after { content: "→"; color: var(--rojo); }
.is-style-flecha .wp-block-button__link:hover { transform: none; box-shadow: none; background: none; }

/* fotos, galerías, texto con foto, citas, tablas, separador */
.bloques .wp-block-image img, .bloques .wp-block-gallery img, .bloques .wp-block-media-text__media img { border-radius: var(--radio); }
.wp-block-image.is-style-vertical img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }
.wp-block-image figcaption, .wp-block-gallery figcaption { font-size: var(--t-xs); color: var(--texto-tenue); font-family: var(--f-dato); }
.wp-block-media-text { gap: var(--e-7); }
.wp-block-media-text .wp-block-media-text__content { padding: 0 !important; }
.wp-block-quote { border-left: 2px solid var(--rojo); margin-inline: 0; padding-left: var(--e-5); }
.wp-block-quote p { font-family: var(--f-titulo); font-size: var(--t-xl); color: var(--blanco); line-height: 1.35; }
.wp-block-quote cite { font-size: var(--t-s); color: var(--texto-suave); font-style: normal; }
.wp-block-separator { border: 0; border-top: 1px solid var(--linea); opacity: 1; }
.bloques .wp-block-table table { width: 100%; border-collapse: collapse; background: var(--panel); border: 1px solid var(--linea); border-radius: var(--radio-s); font-size: var(--t-s); }
.bloques .wp-block-table td, .bloques .wp-block-table th { border: 0; border-bottom: 1px solid var(--linea-suave); padding: 10px 12px; text-align: left; }

/* preguntas (bloque Detalles) */
.wp-block-details { border-bottom: 1px solid var(--linea); padding: 0; margin: 0 !important; }
.wp-block-details summary { cursor: pointer; list-style: none; padding: var(--e-4) 0; font-family: var(--f-titulo); font-weight: 600; color: var(--blanco); display: flex; justify-content: space-between; gap: var(--e-4); }
.wp-block-details summary::-webkit-details-marker { display: none; }
.wp-block-details summary::after { content: "+"; color: var(--rojo); font-family: var(--f-dato); font-size: var(--t-l); line-height: 1; transition: transform .2s var(--curva); }
.wp-block-details[open] summary::after { transform: rotate(45deg); }
.wp-block-details > :not(summary) { padding-bottom: var(--e-4); margin: 0; color: var(--texto); }
.bloques > .wp-block-details + .wp-block-details { margin-top: 0; }

/* colores de la paleta de theme.json (la web no carga los de WordPress en las paginas sin bloques) */
.has-blanco-color { color: var(--blanco) !important; } .has-texto-color { color: var(--texto) !important; } .has-suave-color { color: var(--texto-suave) !important; }
.has-rojo-color { color: var(--rojo) !important; } .has-verde-color { color: var(--verde-dato) !important; }
.has-panel-background-color { background: var(--panel) !important; } .has-fondo-background-color { background: var(--grafito) !important; }
.has-background { padding: var(--e-5); border-radius: var(--radio); }

/* ---------- Portada: cabecera con frases que rotan (copy de Raúl: titulo mas pequeño, sin rojo, boton separado) ---------- */
.hero__frases { display: grid; font-size: clamp(2rem, 4.4vw, 3.5rem) !important; line-height: 1.08; letter-spacing: -0.025em; margin-bottom: 0; max-width: 17em; }
.hero__frase { grid-area: 1 / 1; opacity: 0; transform: translateY(8px); transition: opacity .7s var(--curva), transform .7s var(--curva); }
.hero__frase.activa { opacity: 1; transform: none; }
.hero__boton { margin-top: var(--e-7); }
@media (prefers-reduced-motion: reduce) { .hero__frase { transition: none; } }

/* ---------- Franja de confianza (diseño de Raúl: dato grande, explicación en mayúsculas) ---------- */
.franja-confianza__bloque--dato b { font-family: var(--f-titulo); font-size: clamp(1.6rem, 2.6vw, 2.2rem); letter-spacing: -0.01em; line-height: 1.15; }
.franja-confianza__bloque--dato span { margin-top: var(--e-2); }

/* ---------- Cabeceras de seccion ---------- */
.cabecera-seccion .cabecera-seccion__destacado { color: var(--blanco); font-weight: 600; margin-top: var(--e-3); }
.cabecera-seccion__destacado + p { margin-top: 2px !important; }

/* ---------- Proyectos: tarjeta, carrusel y listado ---------- */
.proyecto-tarjeta { position: relative; display: block; overflow: hidden; border-radius: var(--radio); border: 1px solid var(--linea); background: var(--panel); aspect-ratio: 4 / 5; isolation: isolate; scroll-snap-align: start; }
.proyecto-tarjeta img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .6s var(--curva); }
.proyecto-tarjeta::after { content: ""; position: absolute; inset: 45% 0 0; z-index: -1; background: linear-gradient(180deg, transparent, rgba(6,7,8,.88)); }
.proyecto-tarjeta:hover img { transform: scale(1.04); }
.proyecto-tarjeta__texto { position: absolute; left: var(--e-5); right: var(--e-5); bottom: var(--e-5); display: grid; gap: var(--e-2); }
.proyecto-tarjeta__texto b { font-family: var(--f-titulo); font-size: var(--t-xl); color: var(--blanco); line-height: 1.2; }
.proyecto-tarjeta__texto .enlace-flecha { font-family: var(--f-texto); font-weight: 400; color: var(--texto); }
.carrusel__mandos { display: flex; align-items: center; gap: var(--e-3); flex: none; }
.carrusel__contador { font-size: var(--t-s); color: var(--texto-suave); margin-right: var(--e-2); } .carrusel__contador b { color: var(--blanco); font-weight: 500; }
.carrusel__flecha { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--linea); background: transparent; color: var(--blanco); cursor: pointer; font-size: 18px; transition: border-color .2s, background .2s; }
.carrusel__flecha:hover:not(:disabled) { border-color: var(--blanco); }
.carrusel__flecha:disabled { opacity: .35; cursor: default; }
.carrusel__pista { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 2 * var(--e-4)) / 3); gap: var(--e-4); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; overscroll-behavior-x: contain; }
.carrusel__pista::-webkit-scrollbar { display: none; }
.carrusel__pista:focus-visible { outline-offset: 6px; }
.carrusel__pie { display: flex; justify-content: space-between; align-items: center; gap: var(--e-5); margin-top: var(--e-5); }
.carrusel__barra { width: 50px; height: 2px; background: var(--linea); position: relative; overflow: hidden; }
.carrusel__barra i { position: absolute; inset: 0 auto 0 0; width: 40%; background: var(--rojo); transition: width .3s var(--curva), transform .3s var(--curva); }
.carrusel__pie .enlace-flecha { border-bottom: 1px solid var(--rojo); padding-bottom: 2px; }
.proyectos-rejilla { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e-4); }
@media (max-width: 980px) { .carrusel__pista { grid-auto-columns: calc((100% - var(--e-4)) / 2); } .proyectos-rejilla { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) {
    .carrusel__pista { grid-auto-columns: 85%; }
    .carrusel .cabecera-seccion { flex-direction: column; align-items: flex-start; }
    .carrusel__mandos { display: none; }
    .proyectos-rejilla { grid-template-columns: 1fr; }
}

/* hoja de un proyecto */
.proyecto__cabecera { padding-top: var(--e-6); }
.proyecto__cabecera h1 { font-size: clamp(2rem, 4.4vw, 3.4rem); margin-top: var(--e-3); }
.proyecto__foto { margin-block: var(--e-5) 0; }
.proyecto__foto img { width: 100%; max-height: 78vh; object-fit: cover; border-radius: var(--radio); }
.proyecto__cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--e-7); padding-block: var(--e-7); align-items: start; }
.proyecto__piezas { order: 2; position: sticky; top: calc(var(--cabecera) + var(--e-5)); }
.proyecto__piezas h2 { font-size: var(--t-xs); margin-bottom: var(--e-3); }
.proyecto__piezas ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-2); }
.proyecto__piezas li { padding-bottom: var(--e-2); border-bottom: 1px solid var(--linea-suave); color: var(--texto); }
.proyecto__piezas li:last-child { border-bottom: 0; }
.proyecto__piezas a { color: var(--blanco); text-decoration: underline; text-decoration-color: var(--rojo); text-underline-offset: 3px; }
.proyecto__historia { padding: 0 !important; }
.proyecto__historia > * { width: auto !important; margin-inline: 0 !important; max-width: 70ch; }
.proyecto__historia p { font-size: var(--t-l); line-height: 1.7; }
.proyecto__galeria { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e-3); padding-bottom: var(--e-7); }
.proyecto__galeria img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radio-s); transition: opacity .2s; }
.proyecto__galeria a:hover img { opacity: .85; }
@media (max-width: 980px) { .proyecto__cuerpo { grid-template-columns: 1fr; } .proyecto__piezas { order: 0; position: static; } .proyecto__galeria { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Escúchalo: tarjetas con marca, coche, línea y OPF ---------- */
.tarjeta-sonido { display: flex; flex-direction: column; }
.tarjeta-sonido__cuerpo { flex: 1; align-content: space-between; }
.tarjeta-sonido__marca { display: block; color: var(--rojo); font-size: var(--t-xs); letter-spacing: .14em; text-transform: uppercase; margin-bottom: 4px; }
.tarjeta-sonido__cuerpo h3 a { color: var(--blanco); }
.tarjeta-sonido__linea { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); font-size: var(--t-s); color: var(--texto-suave); margin-top: 4px; }
.etiqueta-opf { font-family: var(--f-dato); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; padding: 2px 8px; border: 1px solid var(--linea); border-radius: 999px; color: var(--texto); }
.sonidos-seccion__pie { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--e-5); margin-top: var(--e-6); padding-top: var(--e-5); border-top: 1px solid var(--linea-suave); }
.sonidos-seccion__nota { display: flex; gap: var(--e-3); margin: 0; max-width: 72ch; font-size: var(--t-s); color: var(--texto-suave); }
.sonidos-seccion__nota > span:first-child { flex: none; width: 20px; height: 20px; border: 1px solid var(--texto-tenue); border-radius: 50%; display: grid; place-items: center; font-family: var(--f-dato); font-size: 11px; margin-top: 2px; }
.sonidos-seccion__nota b { color: var(--blanco); font-weight: 600; }
.sonidos-seccion__pie .enlace-flecha { flex: none; border-bottom: 1px solid var(--rojo); padding-bottom: 2px; }
@media (max-width: 640px) { .sonidos-seccion__pie { flex-direction: column; } }

/* ---------- Asesoramiento ---------- */
.asesoramiento { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-6); padding: var(--e-7); }
.asesoramiento > div:first-child { flex: 1 1 420px; }
.asesoramiento h2 { margin: 0; font-size: var(--t-2xl); }
.asesoramiento p { margin: var(--e-3) 0 0; color: var(--texto-suave); max-width: 62ch; }
.asesoramiento__accion { display: grid; gap: var(--e-3); justify-items: center; text-align: center; max-width: 260px; }
.asesoramiento__accion small { font-size: var(--t-xs); color: var(--texto-tenue); line-height: 1.5; }
@media (max-width: 640px) { .asesoramiento { padding: var(--e-5); } .asesoramiento__accion { max-width: none; width: 100%; } .asesoramiento__accion .btn { width: 100%; } }

/* ---------- Formulario «Hola, soy...» ---------- */
.formulario-frase { background: var(--panel); border: 1px solid var(--linea); border-radius: var(--radio); padding: var(--e-6); display: grid; gap: var(--e-5); }
.formulario-frase__rotulo { font-size: var(--t-xs); letter-spacing: .18em; text-transform: uppercase; color: var(--texto-suave); }
.frase { margin: 0; font-family: var(--f-titulo); font-size: clamp(1.15rem, 2.2vw, 1.6rem); line-height: 2.1; color: var(--blanco) !important; }
.formulario-frase { margin-top: 0; }
.formulario-frase .frase input.frase__campo { height: auto; border-radius: 0; box-shadow: none; }
.formulario-frase .frase input.frase__campo, .frase__campo { display: inline-block; width: 11em; max-width: 100%; border: 0; border-bottom: 1px solid var(--linea); background: transparent; color: var(--blanco); padding: 0 4px; font: inherit; line-height: 1.4; transition: border-color .2s; }
.frase__campo::placeholder { color: var(--texto-tenue); }
.formulario-frase .frase input.frase__campo:focus { outline: none; border-color: transparent; border-bottom-color: var(--rojo); }
.formulario-frase .frase input.frase__campo.lleno { border-bottom-color: var(--verde-dato); }
.formulario-frase .formulario-contacto__acepto { display: flex; }
.formulario-frase textarea { width: 100%; background: var(--grafito); border: 1px solid var(--linea); border-radius: var(--radio-s); padding: var(--e-3) var(--e-4); color: var(--blanco); resize: vertical; }
.formulario-frase__pie { display: flex; justify-content: space-between; align-items: center; gap: var(--e-4); flex-wrap: wrap; }
.formulario-frase__nota { margin: 0; font-size: var(--t-xs); color: var(--texto-tenue) !important; }
@media (max-width: 640px) {
    .formulario-frase { padding: var(--e-5); }
    .frase { line-height: 1.6; } .frase > span { display: block; margin-top: var(--e-3); } .frase > span:first-child { margin-top: 0; }
    .formulario-frase .frase input.frase__campo { display: block; width: 100%; margin-top: var(--e-2); }
    .frase > .frase__punto { display: none !important; }
    .formulario-frase__pie .btn { width: 100%; }
}

/* ---------- Pie: marca y formas de pago ---------- */
.pie__marca p b { display: block; color: var(--blanco); font-weight: 600; margin-top: 2px; }
.pie__marca .enlace-flecha { border-bottom: 1px solid var(--rojo); padding-bottom: 2px; margin-bottom: var(--e-4); }
.pie__pagos { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-4); padding-block: var(--e-5); border-top: 1px solid var(--linea-suave); }
.pie__pagos-titulo { font-size: var(--t-xs); letter-spacing: .16em; text-transform: uppercase; color: var(--texto-tenue); }
.pie__pagos ul { display: flex; flex-wrap: wrap; gap: var(--e-2); list-style: none; margin: 0; padding: 0; }
.pie__pagos li { padding: 4px 12px; border: 1px solid var(--linea); border-radius: var(--radio-xs); font-size: var(--t-xs); font-weight: 600; color: var(--texto); }

/* ---------- Avisos que solo salen en el editor ---------- */
.gtr-bloque-aviso { padding: var(--e-5); border: 1px dashed var(--linea); border-radius: var(--radio); color: var(--texto-suave); font-size: var(--t-s); text-align: center; background: var(--panel); }