/* ============================================================ ESTRUCTURA COMUN DE LA FICHA DE PROYECTO Define el ESQUELETO que comparten todas las fichas. La PERSONALIDAD de cada proyecto (colores, tipografia, texturas) vive en css/proyectos//.css y se aplica redefiniendo SOLO las variables --ficha-*. Un proyecto nunca redefine los roles globales (--color-borde, --color-fondo-alterno...). La clase de proyecto vive en el , asi que hacerlo repintaria tambien la cabecera y el pie, que son compartidos. Por eso la ficha tiene sus propios tokens. ============================================================ */ .ficha { --ficha-color: var(--negro); --ficha-contraste: var(--blanco); --ficha-fondo: var(--blanco); --ficha-alterno: var(--humo); --ficha-borde: var(--linea); --ficha-borde-fuerte: var(--linea-fuerte); --ficha-superficie: var(--blanco); --ficha-texto: var(--color-texto); --ficha-portada: linear-gradient(160deg, var(--negro-claro) 0%, var(--negro) 100%); --ficha-titulos: var(--fuente-titulos); --ficha-radio: var(--radio-lg); background-color: var(--ficha-fondo); color: var(--ficha-texto); } /* Los bloques que viven DENTRO de la ficha toman el color del proyecto; la cabecera y el pie siguen con el global. */ .ficha main .seccion--alterna { background-color: var(--ficha-alterno); } .ficha main .boton--acento { background-color: var(--ficha-color); border-color: var(--ficha-color); color: var(--ficha-contraste); } .ficha h1, .ficha h2, .ficha h3 { font-family: var(--ficha-titulos); } /* ----------------------------- Portada ------------------------------- */ .ficha__portada { position: relative; display: flex; align-items: flex-end; min-height: min(92dvh, 860px); padding-block: calc(var(--alto-cabecera) + var(--espacio-8)) var(--espacio-8); overflow: hidden; color: var(--blanco); } .ficha__portada-fondo { position: absolute; inset: 0; background: var(--ficha-portada); } .ficha__portada-imagen { position: absolute; inset: 0; } .ficha__portada-imagen img { width: 100%; height: 100%; object-fit: cover; } /* Capa libre para que cada proyecto dibuje su textura */ .ficha__portada-textura { position: absolute; inset: 0; pointer-events: none; } .ficha__portada-velo { position: absolute; inset: 0; background: linear-gradient(180deg, var(--velo-medio) 0%, transparent 40%, var(--velo-fuerte) 100%); } .ficha__portada-interior { position: relative; z-index: 1; width: 100%; } .ficha__portada h1 { margin-bottom: var(--espacio-4); color: var(--blanco); font-size: var(--texto-xxl); font-weight: 400; line-height: 1.08; } .ficha__lema { max-width: 48ch; margin-bottom: var(--espacio-6); font-size: var(--texto-md); font-weight: 300; color: var(--sobre-oscuro); } .ficha__etiquetas { display: flex; flex-wrap: wrap; gap: var(--espacio-2); margin-bottom: var(--espacio-5); } .ficha__portada .miga { padding-top: 0; color: var(--sobre-oscuro-suave); } .ficha__portada .miga a { color: var(--sobre-oscuro); } .ficha__acciones { display: flex; flex-wrap: wrap; gap: var(--espacio-3); } /* --------------------------- Barra de datos --------------------------- */ .ficha__resumen { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(50%, 180px), 1fr)); gap: 0; margin: calc(var(--espacio-7) * -1) 0 0; position: relative; z-index: 2; background-color: var(--ficha-superficie); border-radius: var(--ficha-radio); box-shadow: var(--sombra-media); overflow: hidden; } .ficha__resumen-item { padding: var(--espacio-6) var(--espacio-4); text-align: center; border-right: 1px solid var(--ficha-borde); } .ficha__resumen-item:last-child { border-right: 0; } .ficha__resumen-item dt { margin-bottom: var(--espacio-2); font-family: var(--fuente-texto); font-size: var(--texto-xs); letter-spacing: var(--interletrado-etiqueta); text-transform: uppercase; color: var(--color-texto-tenue); } .ficha__resumen-item dd { margin: 0; font-family: var(--ficha-titulos); font-size: var(--texto-md); color: var(--ficha-color); } /* ---------------------------- Dos columnas --------------------------- */ .ficha__cuerpo { display: grid; gap: var(--espacio-8); align-items: start; } @media (min-width: 1024px) { .ficha__cuerpo { grid-template-columns: minmax(0, 1fr) 380px; gap: var(--espacio-9); } } .ficha__contenido > section { margin-bottom: var(--espacio-9); } .ficha__contenido > section:last-child { margin-bottom: 0; } .ficha__panel { padding: var(--espacio-6); background-color: var(--ficha-superficie); border-radius: var(--ficha-radio); box-shadow: var(--sombra-suave); } @media (min-width: 1024px) { .ficha__panel { position: sticky; top: calc(var(--alto-cabecera) + var(--espacio-5)); } } .ficha__panel-precio { padding-bottom: var(--espacio-5); margin-bottom: var(--espacio-5); border-bottom: 1px solid var(--ficha-borde); } .ficha__panel-precio strong { display: block; font-family: var(--ficha-titulos); font-size: var(--texto-lg); font-weight: 400; color: var(--ficha-color); } .ficha__panel-precio span { display: block; font-size: var(--texto-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-texto-tenue); } /* ------------------------ Lista de caracteristicas ------------------- */ .caracteristicas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 0; list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ficha-borde-fuerte); } .caracteristicas li { display: flex; gap: var(--espacio-3); align-items: baseline; padding: var(--espacio-3) 0; border-bottom: 1px solid var(--ficha-borde); font-size: var(--texto-sm); } .caracteristicas li::before { content: ""; flex: 0 0 auto; width: 14px; height: 1px; background-color: var(--ficha-color); } /* -------------------------------- Mapa ------------------------------- */ .mapa { aspect-ratio: 16 / 9; border-radius: var(--ficha-radio); overflow: hidden; background-color: var(--ficha-alterno); } .mapa iframe { display: block; width: 100%; height: 100%; border: 0; } .mapa__aviso { display: grid; place-content: center; gap: var(--espacio-4); height: 100%; padding: var(--espacio-6); text-align: center; font-size: var(--texto-sm); color: var(--color-texto-suave); } .mapa__aviso p { max-width: 46ch; margin: 0 auto; }