.cm-site {
–cm-vino: #7A1E1E;
–cm-terracota: #C0392B;
–cm-rosa: #E8B4B0;
–cm-crema: #FAF3EA;
–cm-carbon: #2D2D2D;
–cm-blanco: #FFFFFF;
–cm-borde: rgba(45, 45, 45, 0.16);
color: var(–cm-carbon);
background: var(–cm-crema);
font-family: Inter, «Helvetica Neue», Arial, sans-serif;
line-height: 1.5;
overflow: hidden;
}
.cm-site *, .cm-site *::before, .cm-site *::after { box-sizing: border-box; }
.cm-site a { color: inherit; }
.cm-wrap { width: min(1180px, calc(100% – 40px)); margin: 0 auto; }
.cm-topbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
padding: 22px 0;
border-bottom: 1px solid var(–cm-borde);
}
.cm-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.cm-brand-mark { display: grid; grid-template-columns: repeat(2, 11px); gap: 3px; transform: rotate(45deg); }
.cm-brand-mark span { width: 11px; height: 11px; display: block; border-radius: 3px; }
.cm-brand-mark span:nth-child(1) { background: var(–cm-vino); }
.cm-brand-mark span:nth-child(2) { background: var(–cm-terracota); border-radius: 50%; }
.cm-brand-mark span:nth-child(3) { background: var(–cm-rosa); border-radius: 50%; }
.cm-brand-mark span:nth-child(4) { background: var(–cm-vino); }
.cm-brand-copy { line-height: 1.15; }
.cm-brand-copy strong { display: block; font-size: 0.91rem; letter-spacing: 0.01em; }
.cm-brand-copy span { font-size: 0.73rem; opacity: 0.68; }
.cm-nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 20px; }
.cm-nav a { font-size: 0.82rem; font-weight: 700; text-decoration: none; }
.cm-nav a:hover, .cm-nav a:focus-visible { color: var(–cm-terracota); }
.cm-hero {
display: grid;
grid-template-columns: minmax(0, 1.12fr) minmax(330px, 0.88fr);
align-items: center;
gap: clamp(38px, 7vw, 92px);
min-height: 670px;
padding: 70px 0 84px;
}
.cm-kicker {
display: inline-flex;
align-items: center;
gap: 9px;
margin: 0 0 22px;
color: var(–cm-vino);
font-size: 0.75rem;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.cm-kicker::before { content: «»; width: 28px; height: 3px; background: var(–cm-terracota); }
.cm-hero h1 {
max-width: 760px;
margin: 0;
color: var(–cm-vino);
font-family: Georgia, «Times New Roman», serif;
font-size: clamp(3.05rem, 7.1vw, 6.7rem);
font-weight: 500;
letter-spacing: -0.055em;
line-height: 0.9;
}
.cm-hero h1 em { color: var(–cm-terracota); font-style: normal; }
.cm-lead { max-width: 650px; margin: 30px 0 0; font-size: clamp(1rem, 1.5vw, 1.22rem); line-height: 1.65; }
.cm-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.cm-button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 50px;
padding: 13px 22px;
border: 2px solid var(–cm-vino);
border-radius: 999px;
font-size: 0.88rem;
font-weight: 800;
text-decoration: none;
transition: transform 160ms ease, background 160ms ease, color 160ms ease;
}
.cm-button:hover, .cm-button:focus-visible { transform: translateY(-2px); }
.cm-button–primary { color: var(–cm-blanco) !important; background: var(–cm-vino); }
.cm-button–secondary { color: var(–cm-vino) !important; background: transparent; }
.cm-button–secondary:hover, .cm-button–secondary:focus-visible { color: var(–cm-blanco) !important; background: var(–cm-vino); }
.cm-building {
position: relative;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
aspect-ratio: 0.87;
padding: 10px;
background: var(–cm-carbon);
box-shadow: 24px 24px 0 var(–cm-rosa);
}
.cm-room { position: relative; display: flex; align-items: flex-end; padding: 20px; overflow: hidden; }
.cm-room:nth-child(1) { background: var(–cm-vino); color: var(–cm-blanco); }
.cm-room:nth-child(2) { background: var(–cm-rosa); color: var(–cm-vino); }
.cm-room:nth-child(3) { background: var(–cm-crema); color: var(–cm-vino); }
.cm-room:nth-child(4) { background: var(–cm-terracota); color: var(–cm-blanco); }
.cm-room span { position: relative; z-index: 2; max-width: 130px; font-size: clamp(0.85rem, 1.2vw, 1.02rem); font-weight: 800; line-height: 1.2; }
.cm-room::after { content: «»; position: absolute; border: 7px solid currentColor; opacity: 0.28; }
.cm-room:nth-child(1)::after { width: 90px; height: 90px; top: 22px; right: 22px; border-radius: 50%; }
.cm-room:nth-child(2)::after { width: 76px; height: 104px; top: -7px; right: 25px; border-radius: 40px 40px 0 0; }
.cm-room:nth-child(3)::after { width: 95px; height: 56px; top: 26px; right: -14px; }
.cm-room:nth-child(4)::after { width: 84px; height: 84px; top: 20px; right: 20px; transform: rotate(45deg); }
.cm-building-label {
position: absolute;
right: -22px;
bottom: 28px;
z-index: 3;
width: 142px;
padding: 13px 15px;
color: var(–cm-blanco);
background: var(–cm-vino);
font-size: 0.72rem;
font-weight: 900;
letter-spacing: 0.08em;
line-height: 1.25;
text-transform: uppercase;
}
.cm-intro { padding: 92px 0; background: var(–cm-blanco); }
.cm-intro-grid { display: grid; grid-template-columns: 0.72fr 1.28fr; gap: clamp(30px, 8vw, 110px); }
.cm-section-label { margin: 0; color: var(–cm-terracota); font-size: 0.74rem; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; }
.cm-intro h2, .cm-paths h2, .cm-principles h2, .cm-final h2 {
margin: 0;
color: var(–cm-vino);
font-family: Georgia, «Times New Roman», serif;
font-size: clamp(2.15rem, 4.3vw, 4.15rem);
font-weight: 500;
letter-spacing: -0.045em;
line-height: 1;
}
.cm-intro-copy p { margin: 26px 0 0; font-size: 1.05rem; line-height: 1.75; }
.cm-paths { padding: 90px 0 105px; }
.cm-paths-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: 42px; }
.cm-paths-head p { max-width: 390px; margin: 0; opacity: 0.76; }
.cm-card-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.cm-card {
position: relative;
min-height: 285px;
padding: 30px;
border: 1px solid var(–cm-borde);
background: rgba(255,255,255,0.36);
text-decoration: none;
transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}
.cm-card:hover, .cm-card:focus-visible { transform: translateY(-5px); background: var(–cm-blanco); box-shadow: 0 18px 45px rgba(73,31,26,0.12); }
.cm-card-number { color: var(–cm-terracota); font-size: 0.74rem; font-weight: 900; letter-spacing: 0.12em; }
.cm-card h3 { max-width: 370px; margin: 58px 0 14px; color: var(–cm-vino); font-size: clamp(1.45rem, 2.6vw, 2.25rem); line-height: 1.05; }
.cm-card p { max-width: 440px; margin: 0; opacity: 0.76; }
.cm-arrow { position: absolute; top: 27px; right: 30px; color: var(–cm-vino); font-size: 1.65rem; }
.cm-principles { padding: 95px 0; color: var(–cm-blanco); background: var(–cm-vino); }
.cm-principles h2 { max-width: 760px; color: var(–cm-blanco); }
.cm-principle-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; margin-top: 58px; }
.cm-principle { padding-top: 22px; border-top: 4px solid var(–cm-rosa); }
.cm-principle:nth-child(2) { border-color: var(–cm-terracota); }
.cm-principle:nth-child(3) { border-color: var(–cm-crema); }
.cm-principle strong { display: block; margin-bottom: 12px; font-size: 1.12rem; }
.cm-principle p { margin: 0; opacity: 0.82; line-height: 1.65; }
.cm-final { position: relative; padding: 100px 0; text-align: center; background: var(–cm-rosa); }
.cm-final h2 { max-width: 850px; margin: 0 auto; }
.cm-final p { max-width: 620px; margin: 24px auto 30px; }
.cm-foot { display: flex; justify-content: space-between; gap: 24px; padding: 25px 0; font-size: 0.72rem; opacity: 0.72; }
@media (max-width: 860px) {
.cm-nav { display: none; }
.cm-hero { grid-template-columns: 1fr; min-height: auto; padding-top: 56px; }
.cm-building { width: min(520px, calc(100% – 22px)); margin: 10px auto 0; }
.cm-intro-grid { grid-template-columns: 1fr; }
.cm-paths-head { align-items: flex-start; flex-direction: column; }
.cm-principle-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
.cm-wrap { width: min(100% – 28px, 1180px); }
.cm-brand-copy span { display: none; }
.cm-hero { padding: 48px 0 68px; }
.cm-hero h1 { font-size: clamp(3.05rem, 15vw, 4.5rem); }
.cm-actions { align-items: stretch; flex-direction: column; }
.cm-button { width: 100%; }
.cm-building { box-shadow: 13px 13px 0 var(–cm-rosa); }
.cm-room { padding: 13px; }
.cm-building-label { right: -8px; bottom: 15px; }
.cm-intro, .cm-paths, .cm-principles, .cm-final { padding-top: 70px; padding-bottom: 70px; }
.cm-card-grid { grid-template-columns: 1fr; }
.cm-card { min-height: 245px; padding: 24px; }
.cm-card h3 { margin-top: 46px; }
.cm-foot { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
.cm-site *, .cm-site *::before, .cm-site *::after { scroll-behavior: auto !important; transition: none !important; }
}
Propuesta conceptual · 2026
105 historias que no caben en un aula.
Una propuesta para convertir la vida de los Colegios Mayores en una comunicación reconocible, contemporánea y conectada.
Convivencia
Formación
Cultura
Comunidad
Espacios que conectan
El punto de partida
La universidad también sucede fuera del aula.
Los Colegios Mayores son espacios de formación, convivencia, cultura y experiencias compartidas. Esta propuesta busca mostrar todo lo que ocurre dentro —y fuera— de sus paredes mediante una identidad común, flexible y capaz de poner a las personas en el centro.
Explorar el proyecto
Cuatro puertas de entrada.
Estrategia, identidad y contenidos concebidos como partes de un mismo sistema de comunicación.
01 · ESTRATEGIA↗
Propuesta de comunicación
Posicionamiento, públicos, objetivos, territorios editoriales, canales y plan de implantación.
02 · IDENTIDAD↗
Guía de marca
Logotipos, colores, tipografías, iconos, patrones y recursos para construir una presencia coherente.
03 · CONTENIDOS↗
Creatividades para redes
Publicaciones, carruseles, stories, reels y un sistema audiovisual adaptable a distintos formatos.
04 · EXPERIENCIA↗
Otros trabajos
Una selección de proyectos de comunicación, cultura, festivales, diseño y contenidos digitales.
Una forma de contar
Una comunidad diversa. Una historia compartida.
Personas antes que instituciones
Experiencias, rostros y voces capaces de explicar el valor cotidiano de la vida colegial.
Identidad común, personalidad propia
Un sistema reconocible que conecta a los colegios sin borrar aquello que hace diferente a cada comunidad.
Todo lo que no cabe en un aula
Cultura, convivencia, deporte, solidaridad, talento y crecimiento personal.
Vienes por una carrera. Te llevas mucho más.
Una propuesta pensada para ordenar la comunicación, activar la participación y hacer visible todo lo que aporta la experiencia de un Colegio Mayor.
Descubrir la estrategia
javirives 