/* Lo propio de Contacto (sin D2, sin la letra, sin el parche del cromo).
Trasladado de la maqueta aprobada (contacto.html) por
herramientas/trasladar-contacto.mjs. No se edita a mano: se cambia la maqueta
y se vuelve a trasladar. */
/* ══ EL SALTO AL CONTENIDO ═════════════════════════════════════════════ */
.co-saltar{position:absolute;left:-9999px;top:0;z-index:60;background:var(--acento-fuerte);
color:var(--sobre-acento);padding:var(--e-2) var(--e-3);font-size:var(--txt-s);font-weight:700}
.co-saltar:focus{left:var(--pad-pagina)}
/* ══ LAS MIGAS ═════════════════════════════════════════════════════════
El relleno superior compensa la barra, que va en absoluto. El separador
va en --gris-suave y no en --linea: es texto generado y le toca 4,5, no 3.
En --linea daba 1,27 en claro. */
.co-migas{padding-top:calc(var(--e-2) + 6em)}
.co-migas ol{display:flex;flex-wrap:wrap;gap:var(--e-1);list-style:none;margin:0;padding:0;
font-size:var(--txt-s);color:var(--gris-fuerte);align-items:center}
.co-migas li{display:inline-flex;align-items:center}
.co-migas li+li::before{content:"/";margin-right:var(--e-1);color:var(--gris-suave)}
.co-migas a{color:var(--gris-fuerte);text-decoration:none;
display:inline-flex;align-items:center;min-height:24px}
.co-migas a:hover{color:var(--azul-texto-hover);text-decoration:underline}
.co-migas span{display:inline-flex;align-items:center;min-height:24px}
/* ══ LA CABECERA ═══════════════════════════════════════════════════════
Sin carrusel y sin fotografía enmarcada: una sola columna de texto sobre
el lavado. El lavado se mide contra ESTA fotografía —z— y si se cambia,
se vuelve a medir. Dos valores, y el reparto lo marca la escala
tipográfica y no el ancho: la entrada mide 26 px por encima de 640 y 18
por debajo, y esos ocho píxeles cambian su umbral de 3 a 4,5. */
/* Sin fotografía y sin lavado: el texto va sobre el fondo de la página. */
.co-cab{position:relative;container-type:inline-size;
padding:var(--e-5) 0 var(--e-6)}
@media (max-width:640px){.co-cab{padding-bottom:var(--e-5)}}
/* Dos columnas desde 900. Encargo del Director, 20-09, en tres pasos del
mismo día: los atajos subieron de una banda propia a la cabecera, los
datos subieron después, y al final **los dos bloques se intercambiaron**.
El orden que queda —atajos bajo la entrada, datos a la derecha— es el que
lee bien: la entrada dice «hay un camino más corto» y lo siguiente que se
ve, en la misma columna y sin cambiar de lado, son los dos caminos
cortos. Los datos, que son la alternativa, se apartan a su columna.
Y la columna izquierda es la ancha porque ahora lleva lo que más texto
tiene. */
/* Las dos columnas entran a 1280 y no a 900, y el número no es de gusto:
es el primer ancho de ventana en el que la caja del formulario tiene
dentro los 460 px que necesita para poner sus campos de dos en dos.
Con el corte a 900, entre 900 y 1279 la caja se quedaba en una sola
columna y crecía 300 px por debajo del final de la columna izquierda:
medido el 20-09, 1063 contra 1367 a 1280. Debajo de 1280 la página se
apila —texto arriba, formulario abajo a todo lo ancho— y el formulario
recupera sus dos columnas porque ahí la caja mide 740 por dentro.
Es la misma lección del 18-09 con otro disfraz: lo que decide no es el
ancho de la ventana sino el de la caja, y aquí hay que hacer que los dos
cortes se pongan de acuerdo. */
.co-cab__rej{display:grid;gap:var(--e-5)}
@media (min-width:1280px){
.co-cab__rej{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
column-gap:var(--e-5);align-items:start}
}
.co-cab__tit{margin:0;font-size:var(--tit-l);line-height:1.04;letter-spacing:-.03em;
font-weight:800;color:var(--tinta);max-width:16ch;text-wrap:balance}
.co-cab__baj{margin:var(--e-3) 0 0;font-size:var(--txt-xl);line-height:1.45;
color:var(--tinta);max-width:52ch}
@media (max-width:640px){.co-cab__baj{font-size:var(--txt-l)}}
/* ══ LOS ATAJOS ════════════════════════════════════════════════════════
Dentro de la cabecera desde el 20-09, en su columna izquierda y debajo
de la entrada, que es a donde llega quien acaba de leerla. Van ANTES
del formulario a propósito: la página que encamina bien es la que te
ahorra rellenarla.
**En tarjeta desde el 20-09**, por encargo del Director, y en tarjeta
de PANEL BLANCO: «las tarjetas hazlas con el mismo peso que el form».
Se probaron cuatro maneras sobre la pantalla entera —filete arriba,
panel, filete fino, panel con canto— y la decisión fue ésta.
Deroga lo que decía esta nota hasta hoy, que era lo contrario: que la
única caja blanca de la pantalla tenía que ser la del formulario, para
no dar el mismo peso a lo que te ahorra escribir y a lo que te pide
escribir. El argumento sigue siendo cierto y la decisión es otra: **el
Director quiere que los dos atajos pesen lo mismo que el formulario**,
porque encaminar bien a quien viene a comprobar una constancia le vale
tanto como recibir el mensaje. Es su llamada, y va escrita para que no
se deshaga sin querer.
La tarjeta usa el mismo material que .co-caja: fondo var(--panel) y el
mismo relleno. El borde va transparente en reposo y solo se tiñe al
pasar por encima, para que la tarjeta no cambie de tamaño al hacerlo. */
.co-atajos{padding:0}
@media (max-width:899.98px){.co-atajos{padding-top:var(--e-3)}}
.co-atajos__tit{margin:var(--e-2) 0 0;font-size:var(--tit-m);line-height:1.1;
letter-spacing:-.02em;font-weight:800;color:var(--tinta)}
/* Apilados, no en fila: lado a lado el texto del primer atajo se quedaba en
220 px y hacía cinco renglones de tres palabras. */
.co-atajos__lista{list-style:none;margin:var(--e-4) 0 0;padding:0;display:grid;gap:var(--e-3)}
.co-atajos{margin-top:var(--e-5)}
/* El aire entre tarjetas baja de 40 a 24: con caja propia, cada tarjeta ya
se cierra sola y no necesita que el hueco haga de separador. */
.co-atajo{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--e-4);
align-items:start;position:relative;background:var(--panel);
padding:var(--e-4);border:var(--borde) solid transparent}
@media (max-width:640px){.co-atajo{padding:var(--e-3)}}
/* LA TARJETA YA NO ES UN ENLACE · Director, 08-10-2026. Hasta ese día la
tarjeta entera era el objetivo —un enlace estirado con ::after— y el anillo
de foco lo dibujaba ella. Lo vio en el borrador y pidió lo contrario: «crea
los botones abajo y el enlace solo son los botones». El enlace de cada
atajo es ahora un botón azul de la base (.ep-btn--solido), con su propio
anillo de foco, el heredado de .co-cab a. */
.co-atajo__disco{width:64px;height:64px;border-radius:50%;
border:var(--marca) solid var(--acento-fuerte);color:var(--acento-fuerte);
display:grid;place-items:center}
.co-atajo__disco .co-ico{width:32px;height:32px}
@media (max-width:560px){
.co-atajo{grid-template-columns:minmax(0,1fr);gap:var(--e-2)}
.co-atajo__disco{width:56px;height:56px}
.co-atajo__disco .co-ico{width:28px;height:28px}
}
.co-atajo h3{margin:0;font-size:var(--txt-l);line-height:1.25;font-weight:700;color:var(--tinta)}
.co-atajo p{margin:var(--e-1) 0 0;font-size:var(--txt-m);line-height:1.6;color:var(--gris-fuerte)}
.co-atajo .ep-btn{margin-top:var(--e-3);gap:var(--e-1)}
.co-atajo .ep-btn svg{width:1em;height:1em;flex:none;transition:transform .2s}
.co-atajo .ep-btn:hover svg,.co-atajo .ep-btn:focus-visible svg{transform:translateX(3px)}
@media (prefers-reduced-motion:reduce){.co-atajo .ep-btn svg{transition:none}}
/* ══ EL CRISTAL · Director, 08-10-2026 ═════════════════════════════════
Lo vio sobre un borrador (BORRADORES/contacto-cristal.html) y lo aprobó
entero. Es la receta de las tarjetas de Sistemas de gestión y de Ejecución
de proyectos: el acento al 9 % en claro y el azul de texto al 10 % en
oscuro.
· Los DOS atajos, en cristal azulado. Suben 4 px y ganan sombra con el
cursor encima o con el foco en su botón; ya no tiñen el borde.
· La caja del formulario, en el mismo cristal: «las tarjetas hazlas con el
mismo peso que el form» (20-09) sigue valiendo. Va aquí y no en la hoja
compartida con Postula, que decide lo suyo en su borrador. Los campos NO
cambian.
· Sin cristal: el titular, el bloque de datos y los avisos del formulario.
Esta página no tiene fotografía detrás: el cristal aquí no desenfoca nada,
se ve como un tinte liso. En papel, nada de esto. NO ESTÁ MEDIDO. */
@media screen{
.co-atajo{border-radius:3px;
background:color-mix(in srgb,var(--acento-fuerte) 9%,transparent);
backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);
transition:box-shadow .25s ease,background-color .25s ease,transform .25s ease}
[data-tema=oscuro] .co-atajo{background:color-mix(in srgb,var(--azul-texto) 10%,transparent)}
.co-atajo:hover,.co-atajo:has(a:focus-visible){transform:translateY(-4px);
box-shadow:0 6px 12px rgba(6,11,39,.18),0 8px 8px -4px rgba(42,43,59,.15);
background:color-mix(in srgb,var(--acento-fuerte) 14%,transparent)}
[data-tema=oscuro] .co-atajo:hover,[data-tema=oscuro] .co-atajo:has(a:focus-visible){
background:color-mix(in srgb,var(--azul-texto) 16%,transparent)}
.co-cab .co-caja{border-radius:3px;
background:color-mix(in srgb,var(--acento-fuerte) 9%,transparent);
backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4)}
[data-tema=oscuro] .co-cab .co-caja{background:color-mix(in srgb,var(--azul-texto) 10%,transparent)}
@media (prefers-reduced-motion:reduce){
.co-atajo{transition:none}
.co-atajo:hover,.co-atajo:has(a:focus-visible){transform:none}
}
}
/* ══ EL FORMULARIO, EN LA COLUMNA DERECHA ══════════════════════════════
Encargo del Director, 20-09: «el form va en ese lado». La página entera
cabe ahora en la cabecera —no hay banda debajo— y son dos columnas de
largo parecido: a la izquierda lo que se lee, a la derecha lo que se
rellena.
**La caja blanca sigue siendo la del formulario.** Es el mismo argumento
que sostiene la regla de Nosotros: la caja se la lleva lo que pide que
hagas algo, no lo que explica. */
.co-form__tit{margin:0;font-size:var(--tit-m);line-height:1.1;
letter-spacing:-.02em;font-weight:800;color:var(--tinta)}
/* ══ EL FORMULARIO ═════════════════════════════════════════════════════
El rótulo va ENCIMA y visible, nunca dentro de la caja: un marcador de
posición desaparece al escribir, justo cuando hace falta comprobar qué
se estaba rellenando. La ayuda va debajo, en gris fuerte sobre el fondo
de la página, y se ata al campo con aria-describedby. */
/* El relleno de la caja es de 40 y no de 64, y no es solo por compactar:
con 64 la caja se quedaba en 568 px de ancho útil a 1440 y el formulario
no llegaba a los 520 que necesita para ponerse en dos columnas. Veinticuatro
píxeles de relleno menos valen cuatro renglones de formulario menos. */
/* ══════════════════════════════════════════════════════════════════════
INICIO DEL FORMULARIO COMPARTIDO · lo hereda gen-postula.mjs
De aquí al FIN, esta hoja no es sólo de Contacto: «gen-postula.mjs» la
extrae tal cual y la emite en su propia página. Las dos pantallas llevan
el MISMO componente —rótulo, caja, ayuda, dos columnas por contenedor,
subgrid, el anillo de foco hacia dentro, la casilla de datos y el resumen
desplegable—, y se hereda en vez de copiarse para que no envejezcan por
separado: el día que se retoque el foco aquí, Postula lo recibe sola.
**Si tocas estas marcas, mira antes gen-postula.mjs**, que revienta si no
las encuentra.
══════════════════════════════════════════════════════════════════════ */
.co-caja{background:var(--panel);padding:var(--e-4);container-type:inline-size;max-width:820px}
@media (max-width:640px){.co-caja{padding:var(--e-3)}}
/* ── EL FORMULARIO, COMPACTO ──────────────────────────────────────────
Encargo del Director, 20-09: «se ve muy separado». Tenía razón y el
problema era doble.
Uno: el aire entre campos era de 40 px —el mismo que separa SECCIONES— y
cada campo trae tres renglones propios (rótulo, caja, ayuda). Baja a 24.
Dos, y es el que de verdad lo arregla: los cuatro campos cortos —nombre,
empresa, correo y teléfono— ocupaban un renglón entero cada uno en una
caja de 660 px de ancho útil. De dos en dos, el formulario pierde cuatro
renglones sin quitar un solo campo.
El corte va por CONTENEDOR y no por ventana: lo que decide si caben dos
columnas es el ancho de la caja, que a 900 px de ventana es la mitad de
lo que mide a 1440. Con @media, a 900 se habrían apretado a 250 px.
El umbral bajó de 520 a 460 el 20-09. A 1280 de ventana la caja tiene
474 px por dentro: con 520 se quedaba a 46 px de conseguir las dos
columnas y el formulario crecía 300 px por debajo de la columna de al
lado. A 460, cada campo corto mide 225 px, que es estrecho pero se
rellena; 300 px de desnivel no se arreglan solos. */
/* Aire de 16 entre FILAS y de 24 entre COLUMNAS. Encargo del Director,
20-09: «el espacio entre filas lo reducimos para que no se vea muy
espacioso y vacío». No son el mismo número porque no separan lo mismo:
dos campos lado a lado necesitan que se vea que son dos, y dos campos uno
encima de otro ya se distinguen por sus rótulos. Dentro de cada campo el
aire sigue siendo de 8 —rótulo, caja, ayuda—, que es lo que los mantiene
leyéndose como una sola cosa. */
.co-form{margin:var(--e-4) 0 0;display:grid;gap:var(--e-2)}
@container (min-width:460px){
.co-form{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--e-3)}
.co-campo--ancho,.co-aviso,.co-resumen,.co-form__acc,.co-form__nota{grid-column:1/-1}
/* Los dos campos de una fila comparten sus TRES renglones —rótulo, caja y
ayuda—, así que las cajas quedan a la misma altura aunque un rótulo
ocupe dos renglones y el otro uno. Sin esto, «Nombre y apellido
(obligatorio)» partía en dos y su caja bajaba 24 px respecto a la de
«Empresa»: dos campos hermanos descuadrados. Con @supports porque
subgrid no está en todas partes; donde no esté, se ve como antes. */
@supports (grid-template-rows:subgrid){
.co-form{grid-auto-rows:auto}
.co-campo{grid-row:span 3;grid-template-rows:subgrid}
}
}
.co-campo{display:grid;gap:var(--e-1);align-content:start}
.co-campo__rot{font-size:var(--txt-m);line-height:1.4;font-weight:700;color:var(--tinta);
overflow-wrap:anywhere}
/* «(obligatorio)» en palabra y no en asterisco: un asterisco obliga a buscar
la leyenda, y a un lector de pantalla no le dice nada por sí solo. */
.co-campo__req{font-weight:400;color:var(--gris-fuerte)}
.co-campo__ayuda{font-size:var(--txt-s);line-height:1.5;color:var(--gris-fuerte);
overflow-wrap:anywhere}
/* «min-width:0» no es adorno. Un trae un ancho propio —el de unos
veinte caracteres— y, como aquí es hijo de una rejilla, ese ancho propio
se convierte en el mínimo de su columna: «width:100%» no lo baja. Con la
letra del navegador en 32, ese mínimo pasa de 380 px y la página se iba
de lado hasta 108 px a 320. Medido el 21-09 en Postula, y estaba también
aquí: los dos formularios son el mismo, y por eso se arregla aquí.
El rótulo va «anywhere» por lo de siempre: «apellidos» a 32 px mide más
que media pantalla de móvil. */
.co-campo input,.co-campo select,.co-campo textarea{
min-width:0;
width:100%;box-sizing:border-box;font:inherit;font-size:var(--txt-m);line-height:1.5;
color:var(--tinta);background:var(--fondo);
border:var(--marca) solid var(--gris);border-radius:0;
padding:calc(var(--e-2) - 1px) var(--e-2);min-height:44px}
/* 96 px y no 120: encargo del Director, 20-09 —«el campo de texto lo
hacemos menos alto para que se vea armonioso»—. Cuatro renglones siguen
dejando ver lo escrito de un vistazo, y el que escriba más lo estira,
que para eso está resize:vertical. */
/* Se estira, pero no sin fin: con el tope de 500 letras (08-10-2026) una caja
que crece indefinidamente no tiene sentido. 240 px son unos diez renglones;
lo que no quepa, se desplaza dentro. Lo vio el Director en el borrador. */
.co-campo textarea{min-height:96px;max-height:240px;resize:vertical}
.co-campo select{appearance:none;
background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
linear-gradient(135deg,currentColor 50%,transparent 50%);
background-position:calc(100% - 20px) calc(50% + 2px),calc(100% - 14px) calc(50% + 2px);
background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:var(--e-5)}
.co-campo input:hover,.co-campo select:hover,.co-campo textarea:hover{border-color:var(--tinta)}
/* El anillo de foco va HACIA DENTRO, como el de los mandos del carrusel:
con desplazamiento positivo se sale de la caja del campo y aterriza sobre
el panel, donde el azul de marca tiene menos margen. Lección del 20-09:
el estado se mide aparte del reposo. */
.co-campo input:focus-visible,.co-campo select:focus-visible,.co-campo textarea:focus-visible{
outline:var(--marca) solid var(--acento-fuerte);outline-offset:-4px;border-color:var(--tinta)}
/* El aviso de datos. Sin esto el formulario no sale: Ley 29733, y hay
guarda en el guion. */
.co-aviso{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--e-2);
align-items:start;margin-top:var(--e-1)}
.co-aviso input{width:24px;height:24px;min-height:24px;margin:0;accent-color:var(--acento-fuerte)}
.co-aviso label{font-size:var(--txt-s);line-height:1.6;color:var(--gris-fuerte)}
.co-aviso a{color:var(--azul-texto)}
.co-aviso a:hover{color:var(--azul-texto-hover)}
/* ══ EL RESUMEN DE DATOS ═══════════════════════════════════════════════
nativo: se abre con teclado, funciona sin guion y no hay estado
que programar. El triángulo del navegador se cambia por un signo propio
para que la cejilla se lea como el resto de la casa y no como un control
del sistema operativo. */
.co-resumen{margin-top:var(--e-2);border-top:var(--borde) solid var(--linea);
padding-top:var(--e-2)}
.co-resumen summary{display:inline-flex;align-items:center;gap:var(--e-1);
min-height:44px;cursor:pointer;list-style:none;
font-family:var(--f-mono);font-size:var(--mono);letter-spacing:.1em;
text-transform:uppercase;font-weight:700;color:var(--azul-texto)}
.co-resumen summary::-webkit-details-marker{display:none}
.co-resumen summary::before{content:"+";font-family:var(--f-mono);font-weight:700;
font-size:var(--txt-m);line-height:1;width:1em;text-align:center}
.co-resumen[open] summary::before{content:"–"}
.co-resumen summary:hover{color:var(--azul-texto-hover)}
.co-resumen summary:focus-visible{outline:2px solid var(--acento-fuerte);outline-offset:2px}
.co-resumen__cuerpo{padding:0 0 var(--e-2) calc(1em + var(--e-1))}
.co-resumen__cuerpo ul{margin:0;padding:0 0 0 var(--e-2);list-style:disc}
.co-resumen__cuerpo li{font-size:var(--txt-s);line-height:1.6;color:var(--gris-fuerte);
margin-bottom:var(--e-1)}
/* El aviso de datos sensibles no es un renglón más de la lista: va aparte y
con filete, porque es lo único de este bloque que le pide algo al lector. */
.co-resumen__ojo{margin:var(--e-2) 0 0;padding-left:var(--e-2);
border-left:var(--marca) solid var(--acento-fuerte);
font-size:var(--txt-s);line-height:1.6;color:var(--tinta)}
.co-resumen__mas{margin:var(--e-2) 0 0;font-size:var(--txt-s);line-height:1.6}
.co-resumen__mas a{color:var(--azul-texto);min-height:24px;display:inline-block}
.co-resumen__mas a:hover{color:var(--azul-texto-hover)}
/* «(se abre en otra pestaña)» se escribe, no se insinúa con un ícono: quien
usa lector de pantalla también tiene derecho a saberlo antes de pulsar. */
.co-resumen__mas span{color:var(--gris-fuerte)}
.co-form__acc{margin-top:var(--e-2)}
/* La nota de la maqueta. No es adorno: quien abra este archivo tiene que
saber que el botón no manda nada todavía, y quien lo construya tiene que
ver a dónde van los envíos. Se retira cuando el sitio exista. */
.co-form__nota{margin:var(--e-3) 0 0;font-size:var(--txt-s);line-height:1.6;
color:var(--gris-fuerte);border-left:var(--marca) solid var(--linea);padding-left:var(--e-2)}
/* SIN AYUDAS, SIN SU RENGLÓN · 21-09. Al salir las ayudas —primero de
Contacto y el mismo día de Postula—, cada campo tiene dos renglones
—rótulo y caja— y no tres. El componente reserva tres por si un campo
trae ayuda, y el tercero vacío dejaba un hueco de 8 px más su calle bajo
cada caja. Con esta clase cada campo ocupa dos, y entre filas queda sólo
la calle de 16: «reducir la separación entre cada fila», encargo del
Director. Está dentro del bloque compartido porque las dos pantallas la usan. */
.co-form--sin-ayudas .co-campo{grid-row:span 2}
/* EL CONTADOR DE LETRAS · Director, 08-10-2026: «¿podemos ayudar al usuario con
un contador de caracteres?». Va bajo la caja de texto largo, a la derecha:
«0 / 500», solo cifras. Es un tercer renglón del campo, así que ese campo
vuelve a ocupar tres; va solo en su fila y no descuadra a ningún hermano.
En el marcado va oculto y lo enseña el guion de los estados: sin guion no
hay quien cuente. No se anuncia a los lectores de pantalla —el tope ya lo
dice el propio campo—. */
.co-form--sin-ayudas .co-campo--cuenta{grid-row:span 3}
/* EL CAMPO TRAMPA · 08-10-2026, con el visto bueno del Director a «defensas que
no se ven» contra el correo basura. Un campo de texto que nadie ve ni alcanza
—fuera de la pantalla, sin tabulador y oculto a los lectores de pantalla— y
que los programas que rellenan formularios sí rellenan. Si llega con algo, la
función que envía contesta «recibido» y no manda nada. No es display:none:
algunos programas se saltan lo que no se dibuja. */
.co-trampa{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.co-campo__cuenta{margin:0;justify-self:end;font-family:var(--f-mono);font-size:var(--mono);
letter-spacing:.06em;line-height:1.5;color:var(--gris-fuerte);font-variant-numeric:tabular-nums}
/* ══ FIN DEL FORMULARIO COMPARTIDO ═════════════════════════════════════ */
/* ══ LOS DATOS DIRECTOS ════════════════════════════════════════════════
Debajo de los atajos, en la columna izquierda. Encargo del Director,
20-09, después de tres movimientos del mismo día: «los datos de teléfono,
correo y dirección van debajo de la sección PUEDE QUE NO HAGA FALTA».
**La dirección NO va**, y no es un olvido: el Director la retiró en la
primera tanda de decisiones de esta pantalla —«no va»— y sigue viviendo
en el pie heredado y en el panel de menú. Si la quiere aquí, entra; hasta
entonces manda la decisión escrita. Es el mismo movimiento que hizo el
contador en Nosotros, y por el mismo motivo: había aire muerto debajo del
texto y un bloque suelto abajo que no necesitaba banda propia.
**Se va también su titular.** Con los datos arriba y el formulario abajo,
«O por tu cuenta» ya no contrapone nada: lo que hace el rótulo de cada
dato —TELÉFONO, CORREO— es suficiente, y un titular de más habría vuelto
a convertir esto en una sección.
En fila, con el mismo idioma que el contador de Nosotros: filete arriba,
rótulo en monoespaciada y el dato debajo. */
/* DOS columnas y no cuatro. Se probó con cuatro y el correo —26 caracteres—
no cabía en los 170 px que le tocaban: se salía de su celda y se montaba
encima del horario. Con dos, cada dato tiene 380 px a 1440.
**El teléfono salió el 20-09**, por encargo del Director: «redunda con
whatsapp». Era el mismo número escrito dos veces, con dos rótulos
distintos, uno al lado del otro. Y en su celda entró el logotipo, que es
lo que hacía falta en esta columna: la página no tenía marca en ninguna
parte salvo la barra de arriba y el pie.
**Y los filetes se fueron el 20-09**, por encargo del Director:
«eliminamos esas líneas de separación». Tenían sentido cuando esto era
una reja de cuatro celdas repartidas en dos filas —el filete era lo que
decía dónde empezaba cada dato—. Con los tres datos en una sola columna,
uno debajo de otro, el rótulo en monoespaciada ya lo dice solo, y cuatro
filetes negros pesaban más que los tres renglones que separaban.
Queda la pareja más simple que puede quedar: **el logotipo a la
izquierda, los tres datos en columna a la derecha.** */
.co-datos{margin-top:var(--e-5);display:grid;gap:var(--e-4)}
/* Las dos columnas NO son iguales: la del logotipo se topa a lo que mide
el logotipo y todo lo demás se lo queda la de los datos. Con mitad y
mitad, el horario —«Lunes a viernes, de 9:00 a. m. a 6:00 p. m.»— partía
en dos renglones y dejaba «p. m.» solo abajo. */
@media (min-width:560px){
.co-datos{grid-template-columns:minmax(0,220px) minmax(0,1fr);
column-gap:var(--e-4)}}
/* Los tres datos, uno debajo de otro, con 24 de aire entre ellos y 8 entre
el rótulo y el dato. Encargo del Director, 20-09: «reducimos el
espaciado entre las líneas de esa sección». Venían con 40 y 16, que son
las medidas de separar SECCIONES; estos tres renglones son una sola
cosa. */
.co-datos dl{margin:0;display:grid;gap:var(--e-3)}
/* El logotipo va centrado contra la columna de datos de al lado: es lo
único que hay en su celda y a media altura hace pareja con los tres
renglones, en vez de dejar un hueco debajo.
La palabra la dibuja el archivo con «currentColor»: en claro el gris de
marca #606062, que es el del logotipo original; en oscuro ese gris queda
casi invisible y va el gris claro del tema. Un logotipo está exento de la
medida de contraste. */
.co-datos__marca{align-self:center;color:#606062}
[data-tema=oscuro] .co-datos__marca{color:var(--gris-fuerte)}
.co-datos__marca svg{display:block;width:100%;max-width:220px;height:auto}
@media (max-width:559px){.co-datos__marca svg{max-width:200px}}
.co-datos dt{font-family:var(--f-mono);font-size:var(--mono);letter-spacing:.14em;
text-transform:uppercase;font-weight:700;line-height:1;color:var(--gris-fuerte)}
/* overflow-wrap en el dato: un correo de 26 caracteres se salía de la
columna en vez de pasar de renglón.
El ícono y el dato van en reja y no en línea corrida, porque en línea
corrida el ícono se cuenta como una palabra más y el correo parte por
donde no debe. La primera columna se encoge al ícono; la segunda puede
encogerse hasta cero —minmax(0,1fr)—, que es lo que le permite partir. */
.co-datos dd{margin:var(--e-1) 0 0;font-size:var(--txt-m);line-height:1.5;
color:var(--tinta);overflow-wrap:anywhere}
.co-datos dd:has(.co-ico--dato){display:grid;
grid-template-columns:auto minmax(0,1fr);gap:var(--e-1);align-items:center}
/* El ícono no se mide contra el fondo como texto: es adorno del rótulo que
ya está escrito encima, y va marcado aria-hidden. Aun así lleva el gris
fuerte, que pasa de sobra. */
.co-ico--dato{flex:none;width:24px;height:24px;color:var(--gris-fuerte)}
.co-datos dd a{color:var(--azul-texto);text-decoration:none;
display:inline-block;min-width:0;min-height:24px}
.co-datos dd a:hover{color:var(--azul-texto-hover);text-decoration:underline}
/* El horario dice cuándo hay alguien; no dice en cuánto se contesta. */
.co-cab a:focus-visible,.co-migas a:focus-visible{
outline:2px solid var(--acento-fuerte);outline-offset:3px}
/* ══ PAPEL ═════════════════════════════════════════════════════════════ */
@media print{
:root,:root[data-tema=oscuro]{
--tinta:#121315;--gris:#3f434a;--gris-fuerte:#3f434a;--fondo:#fff;--panel:#fff;
--linea:#c8ccd2;--acento:#121315;--acento-fuerte:#121315;--azul-texto:#121315;
--marca-inactiva:#8b9097}
body,.co-caja,.co-atajos,.co-cab{background:#fff;color:#121315}
.co-caja{border:var(--borde) solid #c8ccd2}
.ep-btn,.ep-btn--solido{background:transparent;color:#121315;
border:var(--marca) solid #121315}
/* El formulario se imprime: una hoja con los campos en blanco es una
ficha que alguien puede rellenar a mano y escanear. Lo que NO se
imprime es el botón, que en papel no hace nada. */
.co-form__acc,.co-form__nota{display:none}
.co-cab__tit{font-size:var(--tit-m);max-width:42ch}
.co-atajo,.co-campo,.co-datos dl>div{break-inside:avoid}
/* En papel una sola columna: la cabecera de pantalla es de dos, pero una
hoja A4 no tiene ancho para poner el formulario al lado del texto. */
.co-cab__rej{grid-template-columns:minmax(0,1fr)}
/* En papel el formulario vuelve a una columna: una ficha para rellenar a
mano necesita renglones largos, no dos columnas estrechas. */
.co-form{grid-template-columns:minmax(0,1fr)}
.co-atajos{break-inside:auto}
}
/* ══ LOS ESTADOS DEL FORMULARIO · estados-formulario.mjs ═══════════════ */
/* «hidden» pierde contra cualquier regla que ponga un display, y el
formulario lleva display:grid: sin esto, la confirmación aparecía DEBAJO
del formulario en vez de en su lugar. Se vio en la fotografía. */
.co-caja [hidden]{display:none!important}
.co-caja{--co-mal:#a4161a}
[data-tema=oscuro] .co-caja{--co-mal:#ffb4ab}
/* El resumen de errores: filete de marca en rojo, no fondo rojo —el texto
tiene que leerse, y el rojo ya lo llevan los enlaces—. */
.co-errores{grid-column:1/-1;margin:0 0 var(--e-2);padding:var(--e-3);
border-left:var(--marca) solid var(--co-mal);background:var(--fondo)}
.co-errores:focus{outline:none}
.co-errores h3{margin:0;font-size:var(--txt-l);line-height:1.3;font-weight:700;color:var(--tinta)}
.co-errores ul{margin:var(--e-2) 0 0;padding:0 0 0 var(--e-3);display:grid;gap:var(--e-1)}
.co-errores li{font-size:var(--txt-m);line-height:1.5}
.co-errores a{color:var(--co-mal);font-weight:700;text-underline-offset:2px}
.co-errores a:focus-visible{outline:var(--marca) solid var(--tinta);outline-offset:2px}
/* El error del campo, dentro del rótulo, en su propio renglón. */
.co-campo__error{display:block;margin-top:var(--e-1);font-size:var(--txt-s);line-height:1.5;
font-weight:700;color:var(--co-mal);overflow-wrap:anywhere}
.co-campo [aria-invalid=true]{border-color:var(--co-mal);box-shadow:inset 0 0 0 1px var(--co-mal)}
.co-campo:has([aria-invalid=true]) .co-cv__zona{border-color:var(--co-mal);border-style:solid}
.co-aviso .co-campo__error{grid-column:1/-1}
/* No llegó: encima del botón, con las dos salidas que no dependen de él. */
.co-fallo{grid-column:1/-1;margin:0;padding:var(--e-3);border-left:var(--marca) solid var(--co-mal);
background:var(--fondo);font-size:var(--txt-m);line-height:1.6;color:var(--tinta)}
.co-fallo:focus{outline:none}
.co-fallo b{display:block;margin-bottom:var(--e-1);font-size:var(--txt-l);line-height:1.3}
.co-fallo a{color:var(--azul-texto);overflow-wrap:anywhere}
/* Llegó: la confirmación ocupa la caja entera. Un solo acento —el icono—,
el titular, lo que se envió en una ficha como la de las convocatorias, y
una línea de salida. */
.co-hecho{display:grid;gap:var(--e-3);align-content:start}
.co-hecho:focus{outline:none}
.co-hecho__ico{width:48px;height:48px;color:var(--acento-fuerte)}
.co-hecho h2{margin:0;font-size:var(--tit-m);line-height:1.1;letter-spacing:-.02em;font-weight:800;
color:var(--tinta)}
.co-hecho p{margin:0;font-size:var(--txt-m);line-height:1.6;color:var(--tinta);overflow-wrap:anywhere}
.co-hecho__ficha{margin:0;padding:var(--e-3) 0;display:grid;gap:var(--e-2);
border-top:var(--borde) solid var(--linea);border-bottom:var(--borde) solid var(--linea)}
.co-hecho__ficha dt{font-family:var(--f-mono);font-size:var(--mono);letter-spacing:.14em;
text-transform:uppercase;font-weight:700;line-height:1;color:var(--gris-fuerte)}
.co-hecho__ficha dd{margin:var(--e-1) 0 0;font-size:var(--txt-m);line-height:1.5;font-weight:700;
color:var(--tinta);overflow-wrap:anywhere}
.co-hecho a{color:var(--azul-texto)}
.co-hecho a:hover{color:var(--azul-texto-hover)}
.co-hecho__acc{display:flex;flex-wrap:wrap;gap:var(--e-2)}
/* El botón de contorno heredado se pensó para . Puesto en un