/* ========================================================= Cía Manzanera — v7: Dossier institucional Grafito oscuro + tipografía de cartel (color de acento en pruebas — ver el interruptor justo abajo) ========================================================= */ :root{ --graphite: #17191b; --graphite-2: #1f2224; --graphite-3: #292d30; --white: #f5f3ef; --muted: #9a958d; --line: #33373a; /* ========================================================= INTERRUPTOR DE COLOR — para probar los tonos verdeazulados --------------------------------------------------------- --signal es el color de acento de toda la web: botones, números, el punto de la pieza actual en el menú, enlaces destacados, la barra de piezas, etc. Es el único sitio que hay que tocar para probar un color en toda la web a la vez. Ahora mismo está puesto en el verde-azulado claro (3E949E). Para volver al naranja original, cambia la línea de abajo por: --signal: #ff5a1f; Para probar el verde-azulado oscuro en su lugar: --signal: #1a5757; ========================================================= */ --signal: #3e949e; /* Los dos tonos que diste, siempre disponibles como variables por si quieres usarlos en un sitio muy concreto (por ejemplo, solo en las líneas divisorias) en vez de en todo --signal. Ver ejemplo de uso más abajo, en "--line". */ --project-teal-dark: #1a5757; --project-teal-light: #3e949e; --font-display: "Anton", "Arial Narrow", sans-serif; --font-body: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, sans-serif; --container: 1200px; --gap: clamp(1.1rem, 3vw, 2.4rem); --ease: cubic-bezier(.2,.7,.2,1); } /* ========================================================= Modo claro / oscuro Oscuro es el tema por defecto (data-theme="dark" en ). El botón de la cabecera alterna el atributo y lo guarda en localStorage. ========================================================= */ :root, html[data-theme="dark"]{ --graphite: #17191b; --graphite-2: #1f2224; --graphite-3: #292d30; --white: #f5f3ef; --muted: #9a958d; --line: #33373a; --surface-a: 23,25,27; } html[data-theme="light"]{ --graphite: #f5f3ef; --graphite-2: #ffffff; --graphite-3: #ece8e0; --white: #17191b; --muted: #6b665e; --line: #ddd7cb; --surface-a: 245,243,239; } *, *::before, *::after{ box-sizing: border-box; } html{ scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } *, *::before, *::after{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } } body{ margin: 0; background: var(--graphite); color: var(--white); font-family: var(--font-body); font-weight: 400; line-height: 1.6; -webkit-font-smoothing: antialiased; transition: background .25s var(--ease), color .25s var(--ease); } img{ max-width: 100%; display: block; } a{ color: inherit; text-decoration: none; } h1,h2,h3{ font-family: var(--font-display); font-weight: 400; text-transform: uppercase; letter-spacing: .01em; line-height: 1.02; margin: 0; } p{ margin: 0 0 1.1em; color: var(--muted); } p:last-child{ margin-bottom: 0; } ul, ol{ margin: 0; padding: 0; list-style: none; } em{ font-style: italic; color: var(--signal); } .sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); } .skip-link{ position: absolute; left: 1rem; top: -60px; background: var(--signal); color: var(--graphite); padding: .6em 1.1em; font-size: .85rem; font-weight: 600; z-index: 999; transition: top .2s var(--ease); } .skip-link:focus{ top: 1rem; } :focus-visible{ outline: 2px solid var(--signal); outline-offset: 2px; } /* ========================================================= Header ========================================================= */ .masthead{ position: sticky; top: 0; z-index: 100; background: rgba(var(--surface-a),.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); } .masthead-inner{ max-width: var(--container); margin: 0 auto; padding: 1.1rem var(--gap); display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .brand{ display: flex; align-items: center; gap: .6rem; } .brand-mark{ color: var(--signal); display:block; } .brand-mark-img{ display:block; height:34px; width:auto; } .brand-mark-img.for-dark{ display: none; } .brand-mark-img.for-light{ display: block; } html[data-theme="dark"] .brand-mark-img.for-dark{ display: block; } html[data-theme="dark"] .brand-mark-img.for-light{ display: none; } .brand-text{ font-family: var(--font-display); text-transform: uppercase; font-size: 1.15rem; letter-spacing: .02em; } .nav-toggle{ display: none; background: none; border: 1px solid var(--line); color: var(--white); font-family: var(--font-body); font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; padding: .5em 1em; cursor: pointer; } .nav{ display: flex; align-items: center; gap: clamp(.8rem, 1.6vw, 1.7rem); } .nav a{ font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); } .nav a:hover, .nav a.is-current{ color: var(--white); } .nav a.is-current{ color: var(--signal); } .nav a.nav-cta{ background: var(--signal); color: var(--graphite); padding: .55rem 1.1rem; font-weight: 600; } .nav a.nav-cta:hover{ background: var(--white); } /* Utilidades de cabecera: idioma (desplegable) + tema — separados, sin barra divisoria */ .nav-utils{ display: flex; align-items: center; gap: 1.2rem; } .lang-dropdown{ position: relative; } .lang-dropdown-btn{ display: inline-flex; align-items: center; gap: .4rem; background: none; border: 1px solid var(--line); color: var(--white); font-family: var(--font-body); font-size: .76rem; letter-spacing: .04em; text-transform: uppercase; padding: .5em .8em; cursor: pointer; transition: border-color .2s var(--ease); } .lang-dropdown-btn:hover{ border-color: var(--signal); } .lang-caret{ width: 10px; height: 10px; flex: none; transition: transform .2s var(--ease); } .lang-dropdown.is-open .lang-caret{ transform: rotate(180deg); } .lang-dropdown-menu{ position: absolute; top: calc(100% + .6rem); left: 0; z-index: 60; min-width: 9rem; margin: 0; padding: .4rem; background: var(--graphite-2); border: 1px solid var(--line); box-shadow: 0 12px 28px rgba(0,0,0,.28); } .lang-dropdown-menu[hidden]{ display: none; } .lang-dropdown-menu li{ padding: .6em .8em; font-size: .82rem; letter-spacing: .01em; color: var(--muted); cursor: pointer; transition: color .15s var(--ease), background .15s var(--ease); } .lang-dropdown-menu li:hover{ color: var(--white); background: var(--graphite-3); } .lang-dropdown-menu li.is-active{ color: var(--signal); } .theme-toggle{ display: inline-flex; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem; background: none; border: 1px solid var(--line); color: var(--white); cursor: pointer; padding: 0; transition: border-color .2s var(--ease); } .theme-toggle:hover{ border-color: var(--signal); } .theme-toggle svg{ width: 15px; height: 15px; } .theme-toggle .icon-sun{ display: none; } .theme-toggle .icon-moon{ display: block; } html[data-theme="light"] .theme-toggle .icon-sun{ display: block; } html[data-theme="light"] .theme-toggle .icon-moon{ display: none; } /* ========================================================= Botones ========================================================= */ .btn{ display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-body); font-size: .88rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; padding: .95em 1.9em; border: 1px solid transparent; cursor: pointer; transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); } .btn-solid{ background: var(--signal); color: var(--graphite); } .btn-solid:hover{ background: var(--white); } .btn-line{ border-color: var(--white); color: var(--white); } .btn-line:hover{ background: var(--white); color: var(--graphite); } .btn-block{ width: 100%; } /* ========================================================= Contenedor / secciones ========================================================= */ .wrap{ max-width: var(--container); margin: 0 auto; padding: 0 var(--gap); } section{ padding: clamp(3.5rem,7vw,6rem) 0; } .kicker{ display: block; font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: var(--signal); margin-bottom: 1rem; } .page-title{ font-size: clamp(2.6rem, 7vw, 4.6rem); } .section-lead{ max-width: 62ch; font-size: 1.02rem; margin-top: 1.1rem; } .rule{ border: none; border-top: 1px solid var(--line); } /* ========================================================= Portada (index) ========================================================= */ .cover{ min-height: calc(100svh - 65px); display: flex; align-items: center; padding: clamp(2.5rem,6vw,4rem) 0; background: linear-gradient(180deg, rgba(255,90,31,.06), transparent 40%), var(--graphite); position: relative; } /* Portada: foto de fondo a pantalla completa, igual que en la configuración de referencia (fondo, no panel añadido). */ .cover--photo{ background-size: cover; background-position: center; align-items: flex-start; padding-top: clamp(2.4rem, 6vw, 4rem); } .cover--photo::before{ content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.75) 0%, rgba(0,0,0,.45) 55%, rgba(0,0,0,.2) 100%); } .cover--photo .wrap{ position: relative; z-index: 1; max-width: 25rem; margin-left: clamp(1.6rem, 9vw, 5.5rem); margin-right: auto; } .cover--photo .cover-lead{ color: #f5f3ef; } .cover-title{ font-size: clamp(2.6rem, 6.4vw, 5rem); } .cover-title em{ font-style: normal; color: var(--signal); } .cover-subtitle{ font-family: var(--font-body); text-transform: uppercase; font-size: .95rem; letter-spacing: .08em; color: var(--white); margin-top: .9rem; } .cover-lead{ max-width: 56ch; font-size: 1.15rem; margin: 1.6rem 0 2.2rem; color: var(--white); } .cover-actions{ display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 2rem; } /* ========================================================= Barra de piezas (ticker tras la portada) ========================================================= */ .ticker{ border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--graphite-2); overflow: hidden; padding: .9rem 0; } .ticker-track{ display: flex; align-items: center; gap: 2.6rem; width: max-content; animation: ticker-scroll 38s linear infinite; } @media (prefers-reduced-motion: reduce){ .ticker-track{ animation: none; overflow-x: auto; } } .ticker-item{ display: flex; align-items: center; gap: .7rem; font-family: var(--font-display); text-transform: uppercase; font-size: 1.05rem; letter-spacing: .02em; color: var(--muted); white-space: nowrap; } .ticker-item span.dot{ color: var(--signal); font-family: var(--font-body); } .ticker-item:hover{ color: var(--white); } @keyframes ticker-scroll{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } } /* ========================================================= Franja de cifras ========================================================= */ .stat-strip{ display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .stat-cell{ padding: 1.8rem 1rem; text-align: center; border-left: 1px solid var(--line); } .stat-cell:first-child{ border-left: none; } .stat-num{ display: block; font-family: var(--font-display); font-size: clamp(2rem, 4vw, 2.8rem); color: var(--signal); } .stat-label{ display: block; font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin-top: .4rem; } /* ========================================================= Tiras de proyectos — banda ancha con foto y título encima, usado en Proyectos y en Inicio (mismo componente en ambos) ========================================================= */ .piece-strip-list{ display: flex; flex-direction: column; gap: clamp(.7rem,1.6vw,1rem); margin-top: clamp(2.2rem,4vw,3.2rem); } .piece-strip{ position: relative; display: block; aspect-ratio: 21/8; min-height: 9rem; background-size: cover; background-position: center; overflow: hidden; } .piece-strip.has-photo::after{ content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.1) 60%, rgba(0,0,0,0) 100%); } .piece-strip-title{ position: absolute; left: clamp(1.2rem,3vw,2rem); bottom: clamp(1rem,2.5vw,1.6rem); z-index: 1; font-family: var(--font-display); text-transform: uppercase; font-size: clamp(1.6rem, 4vw, 2.6rem); color: #f5f3ef; } .piece-strip.has-photo .piece-strip-title{ color: #f5f3ef; } .piece-strip:not(.has-photo) .piece-strip-title{ color: var(--graphite); } .piece-strip img{ width: 100%; height: 100%; object-fit: cover; } .piece-strip:hover .piece-strip-title{ text-decoration: underline; } @media (max-width: 640px){ .piece-strip{ aspect-ratio: 4/3; } } /* Botón "ver más / ver todos" que cierra una sección resumida en Inicio */ .section-more{ margin-top: clamp(1.6rem,3vw,2.4rem); } /* ========================================================= Página de pieza individual ========================================================= */ .piece-block{ position: relative; aspect-ratio: 16/7; display: flex; align-items: flex-end; padding: clamp(1.6rem,4vw,3rem); margin-bottom: clamp(2rem,4vw,3rem); background-size: cover; background-position: center; overflow: hidden; } .piece-block.has-photo::after{ content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.15) 55%, rgba(0,0,0,0) 100%); } .piece-block-title{ position: relative; z-index: 1; font-size: clamp(2.4rem, 7vw, 5rem); color: var(--graphite); } .piece-block.has-photo .piece-block-title{ color: #f5f3ef; } /* Galería de fotos adicionales de cada pieza */ .piece-gallery{ display: grid; grid-template-columns: repeat(4, 1fr); gap: .7rem; margin: clamp(2rem,4vw,3rem) 0; } .piece-gallery img{ width: 100%; height: 100%; aspect-ratio: 4/5; object-fit: cover; } @media (max-width: 720px){ .piece-gallery{ grid-template-columns: repeat(2, 1fr); } } /* Vídeo (trailer) embebido */ .piece-video{ margin: clamp(2rem,4vw,3rem) 0; } .piece-video .video-frame{ position: relative; width: 100%; aspect-ratio: 16/9; background: var(--graphite-2); border: 1px solid var(--line); } .piece-video iframe{ position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .video-pending{ display: flex; align-items: center; justify-content: center; text-align: center; height: 100%; padding: 1.5rem; font-size: .85rem; font-style: italic; color: var(--muted); border: 1px dashed var(--line); } .piece-meta-row{ display: flex; flex-wrap: wrap; gap: 1.6rem; margin: 0 0 2rem; padding-bottom: 1.6rem; border-bottom: 1px solid var(--line); } .piece-meta-row div{ font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); } .piece-meta-row strong{ display: block; color: var(--white); font-size: .95rem; text-transform: none; letter-spacing: 0; margin-top: .3rem; font-family: var(--font-body); font-weight: 500; } .piece-desc-col{ max-width: 62ch; font-size: 1.03rem; } .piece-desc-col p{ color: var(--white); } .credits{ margin-top: 2rem; padding-top: 1.6rem; border-top: 1px dashed var(--line); } .credits div{ margin-bottom: .8rem; } .credits dt{ font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); } .credits dd{ margin: .2rem 0 0; font-size: .95rem; color: var(--white); } .piece-nav{ display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; padding: 2rem 0; margin-top: 3rem; border-top: 1px solid var(--line); } .piece-nav a{ font-size: .85rem; text-transform: uppercase; letter-spacing: .03em; } .piece-nav .dir{ display: block; font-size: .68rem; color: var(--muted); margin-bottom: .3rem; } .piece-nav a:hover{ color: var(--signal); } .placeholder-note{ display: inline-block; margin-top: 1.4rem; font-size: .85rem; font-style: italic; color: var(--muted); border-left: 2px solid var(--signal); padding-left: .8rem; } /* ========================================================= Compañía — equipo ========================================================= */ .team-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.4rem,3vw,2.4rem); margin-top: clamp(3.2rem,7vw,5rem); } .team-grid--single{ grid-template-columns: 1fr; max-width: 56ch; } .team-card{ border-top: 3px solid var(--signal); padding-top: 1.4rem; } .team-card p + p{ margin-top: 1em; } /* ========================================================= Crédito fotográfico — "© Nombre" en la esquina de cada foto ========================================================= */ .photo-credit{ display: block; font-size: .68rem; letter-spacing: .02em; font-style: italic; color: var(--muted); margin-top: .4rem; } /* Solo la portada grande de cada pieza lleva el crédito superpuesto (no hay "debajo" posible ahí, es una foto a sangre completa). En miniaturas (tiras de Proyectos, tarjetas de Otros) no se añade crédito. */ .photo-credit--overlay{ position: absolute; z-index: 2; right: 0; bottom: 0; margin-top: 0; font-style: normal; color: rgba(245,243,239,.85); text-shadow: 0 1px 6px rgba(0,0,0,.7); padding: .3em .6em; } .gallery-item{ position: relative; display: flex; flex-direction: column; } .gallery-item img{ flex: 1; } /* ========================================================= Lightbox — ampliar las fotos de la galería de cada proyecto al pulsarlas, con botón de cierre. ========================================================= */ .piece-gallery img{ cursor: zoom-in; transition: opacity .2s var(--ease); } .piece-gallery img:hover{ opacity: .82; } .lightbox-overlay{ position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: clamp(1.2rem,5vw,3.4rem); background: rgba(10,10,10,.94); opacity: 0; visibility: hidden; transition: opacity .25s var(--ease); } .lightbox-overlay.is-open{ opacity: 1; visibility: visible; } .lightbox-overlay img{ max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; box-shadow: 0 10px 50px rgba(0,0,0,.6); } .lightbox-close{ position: absolute; top: clamp(.9rem,2.4vw,1.8rem); right: clamp(.9rem,2.4vw,1.8rem); width: 2.6rem; height: 2.6rem; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(245,243,239,.4); background: rgba(23,25,27,.65); color: var(--white); font-size: 1.7rem; line-height: 1; cursor: pointer; transition: border-color .2s var(--ease), color .2s var(--ease); } .lightbox-close:hover{ border-color: var(--signal); color: var(--signal); } .bio-photo{ position: relative; margin: clamp(1.6rem,3vw,2.4rem) 0; max-width: 30rem; } .bio-photo img{ width: 100%; display: block; aspect-ratio: 4/5; object-fit: cover; object-position: center 12%; } .compania-logo{ height: 44px !important; width: auto !important; margin: .6rem 0 1.8rem; opacity: .92; } .bio-layout{ display: flex; gap: clamp(2rem,4.5vw,3.4rem); align-items: flex-start; } .bio-layout .bio-photo{ flex: 0 0 clamp(14rem,27vw,19rem); margin-top: 0; } .bio-layout .bio-text{ flex: 1; min-width: 0; max-width: 46rem; padding-top: .3rem; } @media (max-width: 720px){ .bio-layout{ flex-direction: column; gap: 1.4rem; } .bio-layout .bio-photo{ flex-basis: auto; max-width: 16rem; } } /* ========================================================= Descripción + vídeo lado a lado (para que el vídeo nunca quede como lo último de la página) ========================================================= */ .piece-desc-video{ display: flex; gap: clamp(1.6rem,3vw,2.6rem); align-items: flex-start; margin-bottom: clamp(1.6rem,3vw,2.4rem); } .piece-desc-video--solo{ display: block; } .piece-desc-col{ flex: 1.15; min-width: 0; } .piece-video-col{ flex: 1; min-width: 0; position: sticky; top: 5.5rem; } .piece-video-col .video-frame{ position: relative; width: 100%; aspect-ratio: 16/9; background: var(--graphite-2); border: 1px solid var(--line); } .piece-video-col iframe{ position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* Igual que .piece-video-col pero para piezas sin tráiler: una foto fija junto al texto en vez de un vídeo embebido. */ .piece-photo-col{ flex: 1; min-width: 0; position: sticky; top: 5.5rem; } .piece-photo-col img{ width: 100%; display: block; object-fit: cover; aspect-ratio: 4/5; } @media (max-width: 860px){ .piece-desc-video{ flex-direction: column; } .piece-video-col, .piece-photo-col{ position: static; width: 100%; } } /* ========================================================= Recorrido (trayectoria de cada pieza, agrupada por año) ========================================================= */ .piece-recorrido{ margin: clamp(2rem,4vw,3rem) 0; padding-top: clamp(1.6rem,3vw,2.2rem); border-top: 1px solid var(--line); } .recorrido-year{ display: flex; gap: 1.4rem; padding: .9rem 0; border-bottom: 1px dashed var(--line); } .recorrido-year:last-child{ border-bottom: none; } .recorrido-year-label{ flex: 0 0 4rem; font-family: var(--font-display); color: var(--signal); font-size: 1.05rem; } .recorrido-year ul{ margin: 0; padding: 0; list-style: none; flex: 1; } .recorrido-year li{ font-size: .92rem; padding: .15em 0; color: var(--white); } /* ========================================================= Premios estructurados (año/certamen + lista de galardones) ========================================================= */ .awards-block{ margin-top: 1.4rem; } .awards-heading{ font-weight: 600; font-size: .92rem; margin-bottom: .5em; } .awards-block ul{ margin: 0; padding-left: 1.1em; } .awards-block li{ font-size: .92rem; margin-bottom: .3em; } /* ========================================================= Icono de contacto en la cabecera ========================================================= */ .contact-icon{ display: inline-flex; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem; border: 1px solid var(--line); color: var(--white); transition: border-color .2s var(--ease), color .2s var(--ease); } .contact-icon:hover{ border-color: var(--signal); color: var(--signal); } .contact-icon svg{ width: 15px; height: 15px; } /* Variación visual en la galería: la primera foto ocupa más espacio */ .gallery-item--big{ grid-column: span 2; grid-row: span 2; } .gallery-item--big img{ aspect-ratio: 4/4; } @media (max-width: 720px){ .gallery-item--big{ grid-column: span 2; grid-row: span 1; } .gallery-item--big img{ aspect-ratio: 4/3; } } /* ========================================================= "Leer más" — biografías con parte resumida y parte ampliable ========================================================= */ .bio-toggle{ display: inline-flex; align-items: center; gap: .4rem; background: none; border: none; color: var(--signal); font-family: var(--font-body); font-size: .85rem; font-weight: 600; letter-spacing: .01em; cursor: pointer; padding: .8em 0 0; } .bio-toggle:hover{ text-decoration: underline; } .bio-toggle .chev{ font-size: .7em; transition: transform .2s var(--ease); } .bio-toggle[aria-expanded="true"] .chev{ transform: rotate(180deg); } .bio-more[hidden]{ display: none; } .bio-more{ margin-top: 1em; } /* Enlace "Conocer más" — versión resumida de la compañía en Inicio, enlaza a la página Compañía en vez de desplegar el acordeón */ .bio-link{ display: inline-flex; align-items: center; gap: .4rem; color: var(--signal); font-size: .85rem; font-weight: 600; letter-spacing: .01em; padding-top: .8em; } .bio-link:hover{ text-decoration: underline; } /* ========================================================= Etiqueta discreta "Colaboración" — piezas creadas con otro artista ========================================================= */ .collab-tag{ font-size: .74rem; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); opacity: .55; margin: 1.6rem 0 -.4rem; } .team-card h3{ font-size: 1.6rem; } .team-role{ font-size: .74rem; letter-spacing: .05em; text-transform: uppercase; color: var(--signal); margin: .6rem 0 1rem; } .team-card p{ font-size: .95rem; } /* ========================================================= Talleres ========================================================= */ .workshop-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.4rem,3vw,2.2rem); margin-top: clamp(2rem,4vw,3rem); } .workshop-card{ background: var(--graphite-2); border: 1px solid var(--line); padding: 1.8rem; } .workshop-card--placeholder{ border-style: dashed; background: transparent; } .workshop-card h3{ font-size: 1.4rem; margin: .8rem 0 .6rem; } .workshop-meta{ font-size: .78rem; color: var(--signal); margin-top: 1rem !important; } /* ========================================================= Agenda ========================================================= */ .agenda-table{ width: 100%; border-collapse: collapse; margin-top: clamp(2rem,4vw,3rem); font-size: .95rem; } .agenda-table th{ text-align: left; font-weight: 600; font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); padding: 0 .6rem 1.1rem; border-bottom: 2px solid var(--signal); } .agenda-table th:last-child, .agenda-table td:last-child{ text-align: right; } .agenda-table td{ padding: 1rem .6rem; border-bottom: 1px solid var(--line); color: var(--white); } .agenda-table td:first-child{ color: var(--signal); font-weight: 600; white-space: nowrap; } .agenda-table td:nth-child(3){ color: var(--muted); } .agenda-table td:last-child{ color: var(--muted); white-space: nowrap; } /* ========================================================= Otros — acordeón de subgrupos (audiovisuales / workshops / noticias) ========================================================= */ .accordion{ border-top: 1px solid var(--line); margin-top: clamp(2.2rem,4vw,3.2rem); } .accordion-item{ border-bottom: 1px solid var(--line); } .accordion-item summary{ list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.7rem .2rem; font-family: var(--font-display); text-transform: uppercase; font-size: clamp(1.2rem, 2.6vw, 1.7rem); } .accordion-item summary::-webkit-details-marker{ display: none; } .accordion-item summary .plus{ font-family: var(--font-body); font-size: 1.6rem; color: var(--signal); transition: transform .2s var(--ease); flex: none; } .accordion-item[open] summary .plus{ transform: rotate(45deg); } .accordion-body{ padding: .4rem .2rem 2.2rem; max-width: 70ch; } .accordion-body p{ font-size: .95rem; } .av-list{ display: grid; gap: 1.2rem; margin-top: 1rem; } .av-item{ border: 1px solid var(--line); display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; padding: .8rem 1.4rem .8rem .8rem; } .av-item-photo{ position: relative; flex: none; width: 88px; height: 88px; overflow: hidden; background: var(--graphite-3); } .av-item-photo img{ width: 100%; height: 100%; object-fit: cover; display: block; } .av-item-body{ flex: 1; min-width: 12rem; } .av-item h3{ font-size: 1.1rem; font-family: var(--font-body); font-weight: 600; text-transform: none; letter-spacing: 0; margin:0 0 .25rem; color: var(--white); } .av-item .tag{ font-size: .7rem; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); } a.av-item{ text-decoration: none; color: inherit; transition: border-color .2s var(--ease); } a.av-item:hover{ border-color: var(--signal); } a.av-item:hover h3{ color: var(--signal); text-decoration: underline; } .news-list{ margin-top: 1rem; } .news-group{ margin-top: 1.8rem; } .news-group:first-child{ margin-top: 0; } .news-group-title{ font-family: var(--font-body); font-weight: 600; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--signal); margin: 0 0 .3rem; } .news-group .news-list-inner{ border-top: 1px dashed var(--line); } .news-item{ padding: 1rem 0; border-bottom: 1px dashed var(--line); font-size: .92rem; } .news-item a{ color: var(--white); text-decoration: underline; text-underline-offset: 3px; } .news-item a:hover{ color: var(--signal); } .news-item-meta{ font-size: .7rem; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin-top: .3rem; } .news-item-desc{ margin: .5rem 0 0; font-size: .85rem; color: var(--muted); } /* ========================================================= Inicio — tarjetas de proyecto (versión mega-página con fotos) ========================================================= */ /* Anclas internas de la mega-página de inicio: compensar la cabecera fija. Estas dos reglas van DESPUÉS de .wrap a propósito: .wrap fija el padding horizontal, y aquí solo tocamos el vertical (arriba/abajo) para no pisarlo, dando aire real entre una sección y la siguiente. */ .home-section{ scroll-margin-top: 5.5rem; padding-top: clamp(3rem,6vw,5rem); padding-bottom: clamp(3rem,6vw,5rem); } .home-divider{ border-top: 1px solid var(--line); } /* ========================================================= Contacto ========================================================= */ .contact-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); margin-top: clamp(2rem,4vw,3rem); } .contact-grid > div:first-child{ display: flex; flex-direction: column; min-height: 100%; } .contact-email{ display: inline-block; font-family: var(--font-display); font-size: 1.6rem; color: var(--signal); margin: 1rem 0 1.6rem; } .contact-social{ display: flex; gap: 1.2rem; } .contact-social a{ display: inline-flex; align-items: center; gap: .5rem; font-size: .85rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); } .contact-social a:hover{ color: var(--white); } .contact-social svg{ width: 22px; height: 22px; flex: none; } /* Logo de la compañía, agrandado para ocupar el hueco que queda libre bajo el texto de contacto (misma altura aproximada que el formulario de al lado). */ .contact-logo{ margin-top: auto; padding-top: 2rem; flex: 1; display: flex; align-items: center; justify-content: center; } .contact-logo img{ height: clamp(90px, 15vw, 180px); width: auto; display: block; margin: 0 auto; opacity: .55; transition: opacity .15s var(--ease); } .contact-logo:hover img{ opacity: .85; } @media (max-width: 900px){ .contact-grid > div:first-child{ min-height: 0; } .contact-logo{ padding-top: 1.6rem; flex: none; justify-content: center; } .contact-logo img{ height: clamp(70px, 22vw, 110px); } } .contact-form{ display: flex; flex-direction: column; gap: 1.1rem; } .form-row{ display: flex; flex-direction: column; gap: .5rem; } .form-row label{ font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); } .form-row input, .form-row textarea{ border: 1px solid var(--line); background: var(--graphite-2); font-family: var(--font-body); font-size: .95rem; padding: .8em .9em; resize: vertical; color: var(--white); } .form-row input:focus, .form-row textarea:focus{ outline: none; border-color: var(--signal); } .form-status{ font-size: .82rem; color: var(--signal); min-height: 1.2em; margin: 0; } /* ========================================================= Footer ========================================================= */ .site-footer{ border-top: 1px solid var(--line); padding: 2.2rem 0 2.6rem; } .footer-inner{ display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; font-size: .74rem; letter-spacing: .03em; text-transform: uppercase; color: var(--muted); } .footer-copyright{ flex-basis: 100%; text-align: center; opacity: .7; } /* ========================================================= Reveal ========================================================= */ .reveal{ opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease), transform .6s var(--ease); } .reveal.is-visible{ opacity: 1; transform: translateY(0); } /* ========================================================= Responsive ========================================================= */ @media (max-width: 900px){ .team-grid, .workshop-grid, .contact-grid{ grid-template-columns: 1fr; } .stat-strip{ grid-template-columns: 1fr 1fr; } .stat-cell:nth-child(3){ border-left: none; } } @media (max-width: 640px){ .nav-toggle{ display: inline-flex; } .nav{ position: fixed; top: 4.1rem; right: var(--gap); left: var(--gap); background: var(--graphite-2); border: 1px solid var(--line); flex-direction: column; align-items: flex-start; gap: 1rem; padding: 1.3rem 1.5rem; transform: translateY(-8px); opacity: 0; visibility: hidden; transition: all .2s var(--ease); } .nav.is-open{ transform: translateY(0); opacity: 1; visibility: visible; } .nav-utils{ order: -1; border-bottom: 1px solid var(--line); padding: 0 0 1.1rem; margin: 0 0 .6rem; width: 100%; justify-content: space-between; } .agenda-table thead{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .agenda-table, .agenda-table tbody, .agenda-table tr, .agenda-table td{ display: block; width: 100%; } .agenda-table{ border-top: 1px solid var(--line); } .agenda-table tr{ padding: 1rem 0; border-bottom: 1px solid var(--line); } .agenda-table td{ padding: .25rem 0; white-space: normal; text-align: left !important; border: 0; } .agenda-table td:before{ content: attr(data-label); display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: .15rem; } .agenda-table td:first-child{ padding-top: 0; } .piece-nav{ flex-direction: column; } }