/* * EENDA * Marketing, Desarrollo & Consulting * www.eenda.com * © 2026 */ /* * style.css — Front de tamarco.es * * Se carga DESPUÉS de bootstrap.min.css y solo redefine lo que necesita. La * paleta sale del logotipo (rojo + negro) sobre grises acero. Tipografías * propias, servidas desde /static/media/webfonts/: ninguna petición a * terceros. * * Las reglas responsive están en responsive.css. */ /* ------------------------------------------------------------------ * Tipografías * ------------------------------------------------------------------ */ @font-face{ font-family: "Playfair Display"; font-style: normal; font-weight: 400 900; font-display: swap; src: url("/static/media/webfonts/playfair/playfair-display-latin.woff2") format("woff2"); } @font-face{ font-family: "Playfair Display"; font-style: italic; font-weight: 400 900; font-display: swap; src: url("/static/media/webfonts/playfair/playfair-display-italic-latin.woff2") format("woff2"); } @font-face{ font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/static/media/webfonts/inter/inter-latin.woff2") format("woff2"); } /* ------------------------------------------------------------------ * Tokens * ------------------------------------------------------------------ */ :root{ --tm-ink: #0e0f11; /* fondo oscuro principal */ --tm-ink-2: #16181c; /* superficies oscuras */ --tm-ink-3: #24272d; /* bordes en oscuro */ --tm-steel: #8a9099; /* texto secundario en oscuro */ --tm-mist: #f4f4f2; /* fondo claro alternativo */ --tm-paper: #ffffff; --tm-line: #e3e3df; --tm-text: #1b1c1f; --tm-muted: #5d6169; --tm-red: #e30613; /* rojo del logotipo */ --tm-red-dark: #b7050f; --tm-red-soft: #ff5560; /* rojo sobre fondo oscuro (contraste AA) */ --tm-display: "Playfair Display", Georgia, "Times New Roman", serif; --tm-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --tm-radius: 4px; --tm-ease: cubic-bezier(.22, .61, .36, 1); --tm-topbar: 38px; --tm-header: 84px; --bs-font-sans-serif: var(--tm-body); } /* ------------------------------------------------------------------ * Base * ------------------------------------------------------------------ */ /* * Sin overflow-x en : cualquier valor distinto de visible deja de * propagar el overflow del body al viewport y el bloqueo de scroll del * offcanvas de Bootstrap (body{overflow:hidden}) se comporta de otra manera. * Lo que asoma por los lados (cinta, hero escalado) ya lo recorta cada * contenedor con su propio overflow:hidden. */ html{ scroll-behavior: smooth; } body.front-end{ background: var(--tm-paper); color: var(--tm-text); font-family: var(--tm-body); font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img{ max-width: 100%; height: auto; } a{ color: inherit; text-decoration: none; transition: color .2s; } a:hover{ color: var(--tm-red); } h1, h2, h3, h4, .h1, .h2, .h3{ font-family: var(--tm-display); font-weight: 700; line-height: 1.12; letter-spacing: -.01em; margin-bottom: .5em; } h1{ font-size: clamp(2.4rem, 5.2vw, 4.4rem); font-weight: 800; } h2{ font-size: clamp(1.9rem, 3.4vw, 2.9rem); } h3{ font-size: 1.3rem; } p{ margin-bottom: 1.1em; } .lead{ font-size: 1.15rem; font-weight: 400; color: var(--tm-muted); max-width: 62ch; } section{ padding: clamp(4.5rem, 9vw, 7.5rem) 0; } .seccion__cabecera{ max-width: 760px; margin-bottom: clamp(2.5rem, 5vw, 4rem); } /* * Cabecera con acción a la derecha. Rejilla de dos columnas: el antetítulo * ocupa toda la primera fila y el botón se centra respecto al H2 (segunda * fila), no respecto al bloque entero. display:contents saca a los hijos del *
envolvente para que participen en la rejilla sin tocar el marcado. */ .seccion__cabecera--doble{ max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 2rem; } .seccion__cabecera--doble > div{ display: contents; } .seccion__cabecera--doble .antetitulo{ grid-column: 1 / -1; } .seccion__cabecera--doble h2{ margin-bottom: 0; grid-column: 1; } .seccion__cabecera--doble .btn{ grid-column: 2; } /* Franjas oscuras */ .oscuro{ background: var(--tm-ink); color: #fff; } .oscuro .lead{ color: var(--tm-steel); } .oscuro .antetitulo{ color: var(--tm-red-soft); } /* Antetítulo con filete y numeración de franja */ .antetitulo{ display: inline-flex; align-items: center; gap: .7rem; font-size: .78rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--tm-red); margin-bottom: 1.2rem; } .antetitulo::before{ content: ""; width: 2.2rem; height: 2px; background: currentColor; } .antetitulo__numero{ font-family: var(--tm-display); font-style: italic; font-weight: 600; letter-spacing: 0; text-transform: none; font-size: .95rem; } /* Etiquetas (píldoras) */ .etiquetas{ display: flex; flex-wrap: wrap; gap: .55rem; margin: 1.6rem 0 0; padding: 0; list-style: none; } .etiquetas li{ font-size: .82rem; font-weight: 500; border: 1px solid var(--tm-line); padding: .4rem .8rem; border-radius: 999px; color: var(--tm-muted); } /* Salto al contenido */ .skip-link{ position: absolute; top: .5rem; left: .5rem; z-index: 100; background: var(--tm-ink); color: #fff; padding: .6rem 1rem; } /* ------------------------------------------------------------------ * Botones (sobre los de Bootstrap) * ------------------------------------------------------------------ */ .btn{ display: inline-flex; align-items: center; gap: .6rem; padding: .95rem 1.6rem; border-radius: var(--tm-radius); font-weight: 600; font-size: .95rem; letter-spacing: .02em; line-height: 1.2; border: 1px solid transparent; transition: transform .25s var(--tm-ease), background .25s, color .25s, border-color .25s; } .btn:hover{ transform: translateY(-2px); } .btn__flecha{ transition: transform .25s var(--tm-ease); } .btn:hover .btn__flecha{ transform: translateX(3px); } .btn-brand{ background: var(--tm-red); color: #fff; } .btn-brand:hover, .btn-brand:focus-visible{ background: var(--tm-red-dark); color: #fff; } .btn-ghost{ border-color: rgba(255, 255, 255, .35); color: #fff; } .btn-ghost:hover, .btn-ghost:focus-visible{ border-color: #fff; color: #fff; } .btn-dark{ --bs-btn-bg: var(--tm-ink); --bs-btn-border-color: var(--tm-ink); --bs-btn-hover-bg: #000; --bs-btn-hover-border-color: #000; } /* ------------------------------------------------------------------ * Barra superior * ------------------------------------------------------------------ */ .topbar{ background: var(--tm-ink); color: var(--tm-steel); font-size: .82rem; } .topbar .container{ display: flex; justify-content: space-between; align-items: center; min-height: var(--tm-topbar); gap: 1rem; } .topbar__datos{ display: flex; gap: 1.4rem; white-space: nowrap; } .topbar a{ color: #fff; font-weight: 500; } .topbar a:hover{ color: var(--tm-red-soft); } /* ------------------------------------------------------------------ * Cabecera * ------------------------------------------------------------------ */ .site-header-sentinel{ position: absolute; top: 0; height: 1px; width: 1px; pointer-events: none; } .site-header{ position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .94); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--tm-line); transition: box-shadow .3s; } .site-header.is-stuck{ box-shadow: 0 10px 30px -20px rgba(0, 0, 0, .35); } .site-header .navbar > .container{ min-height: var(--tm-header); } .site-brand__logo{ width: 150px; height: auto; display: block; } .site-nav .nav-link{ font-size: .92rem; font-weight: 500; color: var(--tm-text); padding: .6rem 0; margin-left: 2rem; position: relative; } .site-nav .nav-link::after{ content: ""; position: absolute; left: 0; right: 0; bottom: .2rem; height: 2px; background: var(--tm-red); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--tm-ease); } .site-nav .nav-link:hover::after, .site-nav .nav-link.is-active::after{ transform: scaleX(1); } .site-nav .nav-link:hover, .site-nav .nav-link.is-active{ color: var(--tm-text); } .site-nav .dropdown-menu{ --bs-dropdown-border-color: var(--tm-line); --bs-dropdown-border-radius: 0; --bs-dropdown-padding-y: .6rem; --bs-dropdown-item-padding-x: 1.2rem; --bs-dropdown-item-padding-y: .55rem; --bs-dropdown-link-hover-bg: var(--tm-mist); --bs-dropdown-link-hover-color: var(--tm-red); --bs-dropdown-link-active-bg: var(--tm-mist); --bs-dropdown-link-active-color: var(--tm-red); --bs-dropdown-font-size: .9rem; min-width: 260px; box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .25); } .site-menu__cta .btn{ padding: .7rem 1.1rem; font-size: .9rem; } .site-menu__cta .btn:hover{ background: var(--tm-red); border-color: var(--tm-red); } /* Botón del menú móvil */ .site-toggle{ background: none; border: 0; width: 44px; height: 44px; padding: 0; } .site-toggle span{ display: block; width: 24px; height: 2px; background: var(--tm-ink); margin: 5px auto; } /* ------------------------------------------------------------------ * Hero * ------------------------------------------------------------------ */ .hero{ position: relative; isolation: isolate; overflow: hidden; min-height: min(86vh, 820px); display: flex; align-items: center; color: #fff; padding: clamp(5rem, 12vw, 9rem) 0; } .hero__media{ position: absolute; inset: 0; z-index: -2; } .hero__media img{ width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); } .hero__scrim{ position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(10, 11, 13, .92) 0%, rgba(10, 11, 13, .72) 45%, rgba(10, 11, 13, .35) 100%); } .hero__inner{ display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 3rem; align-items: end; } .hero .antetitulo{ color: var(--tm-red-soft); } .hero__subtitular{ display: block; color: var(--tm-red-soft); font-style: italic; font-weight: 600; } .hero__texto{ font-size: 1.12rem; color: rgba(255, 255, 255, .78); max-width: 56ch; } .hero__acciones{ display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; } .hero__datos{ border-left: 1px solid rgba(255, 255, 255, .18); padding-left: 2rem; display: grid; gap: 1.4rem; } .hero__datos strong{ font-family: var(--tm-display); font-size: 2.2rem; display: block; line-height: 1; } .hero__datos small{ display: block; color: rgba(255, 255, 255, .65); font-size: .85rem; margin-top: .35rem; letter-spacing: .02em; } /* ------------------------------------------------------------------ * Cinta de especialidades * ------------------------------------------------------------------ */ .cinta{ background: var(--tm-red); color: #fff; overflow: hidden; padding: .9rem 0; font-size: .8rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; white-space: nowrap; } .cinta__lista{ display: inline-flex; gap: 3rem; list-style: none; margin: 0; padding: 0 1.5rem; animation: cinta 45s linear infinite; } .cinta__lista li::after{ content: "·"; margin-left: 3rem; opacity: .6; } @keyframes cinta{ to{ transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce){ .cinta__lista{ animation: none; } } /* ------------------------------------------------------------------ * 01 Intro * ------------------------------------------------------------------ */ .intro__figura{ margin: 0; position: relative; } .intro__figura img{ aspect-ratio: 4 / 5; object-fit: cover; width: 100%; filter: saturate(.85) contrast(1.05); } .intro__figura figcaption{ position: absolute; left: 0; bottom: 0; background: var(--tm-ink); color: #fff; padding: 1rem 1.4rem; font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; } .intro__figura::after{ content: ""; position: absolute; top: -1.2rem; right: -1.2rem; width: 45%; height: 45%; border: 2px solid var(--tm-red); z-index: -1; } .prosa--intro p:first-child{ font-size: 1.15rem; color: var(--tm-muted); } .prosa--intro p:first-child strong{ color: var(--tm-text); } .prosa--intro p{ max-width: none; } /* ------------------------------------------------------------------ * 02 Servicios * ------------------------------------------------------------------ */ .servicios{ background: var(--tm-mist); } .servicios__rejilla{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--tm-line); border: 1px solid var(--tm-line); } .servicio{ background: #fff; padding: 2.2rem 2rem 2.4rem; transition: background .3s, color .3s; } .servicio:hover{ background: var(--tm-ink); color: #fff; } .servicio__numero{ font-family: var(--tm-display); font-size: .95rem; color: var(--tm-red); font-style: italic; margin-bottom: 1.2rem; display: block; } .servicio h3{ font-size: 1.25rem; margin-bottom: .6rem; } .servicio p{ font-size: .95rem; color: var(--tm-muted); margin: 0; transition: color .3s; } .servicio:hover p{ color: var(--tm-steel); } .servicios__nota{ margin: 2rem 0 0; font-size: .92rem; color: var(--tm-muted); } /* ------------------------------------------------------------------ * 03 Sectores * ------------------------------------------------------------------ */ .sectores__lista{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 2rem; } .sectores__lista li{ padding: 1.1rem 0; border-bottom: 1px solid var(--tm-ink-3); font-family: var(--tm-display); font-size: 1.3rem; display: flex; align-items: baseline; gap: .9rem; } .sectores__lista li::before{ content: ""; width: 8px; height: 8px; background: var(--tm-red); flex: none; transform: translateY(-3px); } /* ------------------------------------------------------------------ * 04 Instalaciones * ------------------------------------------------------------------ */ .maquinaria{ list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .6rem 1.5rem; font-size: .93rem; } .maquinaria li{ display: flex; gap: .7rem; align-items: baseline; color: var(--tm-muted); } .maquinaria b{ color: var(--tm-text); font-weight: 600; min-width: 1.4rem; font-variant-numeric: tabular-nums; } .instalaciones__figura{ margin: 0; display: grid; gap: 1rem; } .instalaciones__figura img{ width: 100%; aspect-ratio: 16 / 7; object-fit: cover; } .cifras{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } .cifras div{ border: 1px solid var(--tm-line); padding: 1.2rem 1rem; } .cifras strong{ font-family: var(--tm-display); font-size: 1.9rem; display: block; line-height: 1; } .cifras small{ color: var(--tm-muted); font-size: .8rem; } /* ------------------------------------------------------------------ * 05 Trabajos * ------------------------------------------------------------------ */ .trabajos__mosaico{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 240px; gap: 1rem; } .trabajos__mosaico figure{ margin: 0; position: relative; overflow: hidden; background: var(--tm-ink-2); } .trabajos__mosaico figure:first-child{ grid-column: span 2; grid-row: span 2; } .trabajos__mosaico figure:nth-child(4){ grid-row: span 2; } .trabajos__mosaico img{ width: 100%; height: 100%; object-fit: cover; filter: saturate(.8); transition: transform .8s var(--tm-ease), filter .4s; } .trabajos__mosaico figure:hover img{ transform: scale(1.05); filter: saturate(1); } .trabajos__mosaico figcaption{ position: absolute; inset: auto 0 0 0; padding: 2.5rem 1.2rem 1.1rem; font-size: .85rem; font-weight: 500; background: linear-gradient(to top, rgba(0, 0, 0, .85), transparent); } /* ------------------------------------------------------------------ * 06 Calidad * ------------------------------------------------------------------ */ .cita{ margin: 1.5rem 0; padding-left: 1.5rem; border-left: 3px solid var(--tm-red); } .cita p{ font-family: var(--tm-display); font-size: 1.35rem; line-height: 1.45; color: var(--tm-text); margin-bottom: .8rem; } .cita cite{ display: block; font-style: normal; font-size: .85rem; color: var(--tm-muted); } .certificado{ background: var(--tm-mist); border: 1px solid var(--tm-line); padding: 2rem; } .certificado img{ width: 180px; margin: 0 auto 1.2rem; display: block; } .certificado dl{ margin: 0; font-size: .88rem; display: grid; grid-template-columns: auto 1fr; gap: .35rem 1rem; } .certificado dt{ color: var(--tm-muted); font-weight: 400; } .certificado dd{ margin: 0; font-weight: 600; } /* ------------------------------------------------------------------ * 07 FAQ * ------------------------------------------------------------------ */ .faq{ background: var(--tm-mist); } .faq__item{ border-top: 1px solid var(--tm-line); padding: 1.2rem 0; } .faq__item:last-child{ border-bottom: 1px solid var(--tm-line); } .faq__pregunta{ cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1rem; align-items: center; } .faq__pregunta::-webkit-details-marker{ display: none; } .faq__pregunta h3{ font-size: 1.2rem; margin: 0; } .faq__icono{ position: relative; width: 14px; height: 14px; flex: none; } .faq__icono::before, .faq__icono::after{ content: ""; position: absolute; background: var(--tm-red); transition: transform .3s; } .faq__icono::before{ left: 0; top: 6px; width: 14px; height: 2px; } .faq__icono::after{ left: 6px; top: 0; width: 2px; height: 14px; } .faq__item[open] .faq__icono::after{ transform: rotate(90deg); } .faq__respuesta{ margin-top: .9rem; color: var(--tm-muted); max-width: 60ch; } .faq__respuesta p{ margin: 0 0 .7rem; color: inherit; } .faq__respuesta > :last-child{ margin-bottom: 0; } .faq__respuesta a{ color: var(--tm-text); text-decoration: underline; } /* ------------------------------------------------------------------ * 08 Contacto * ------------------------------------------------------------------ */ .contacto{ position: relative; overflow: hidden; } .contacto::before{ content: "TM"; position: absolute; right: -2rem; top: 50%; transform: translateY(-50%); font-family: var(--tm-display); font-weight: 800; font-size: 28rem; line-height: 1; color: rgba(255, 255, 255, .03); pointer-events: none; } .contacto .container{ position: relative; } .contacto__datos{ display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem 2rem; margin: 0; } .contacto__datos dt{ font-size: .75rem; letter-spacing: .18em; text-transform: uppercase; color: var(--tm-steel); margin-bottom: .4rem; font-weight: 600; } .contacto__datos dd{ margin: 0; } .contacto__datos a:hover{ color: var(--tm-red-soft); } /* ------------------------------------------------------------------ * Pie * ------------------------------------------------------------------ */ .site-footer{ background: #08090a; color: var(--tm-steel); font-size: .9rem; padding: 4rem 0 0; } .site-footer__top{ padding-bottom: 3rem; border-bottom: 1px solid var(--tm-ink-3); } .site-footer__logo{ width: 140px; filter: brightness(0) invert(1); opacity: .9; margin-bottom: 1.2rem; } .site-footer__iso{ width: 140px; opacity: .9; margin-top: 1rem; } .site-footer__titulo{ font-size: .75rem; letter-spacing: .18em; text-transform: uppercase; color: #fff; margin-bottom: 1rem; font-weight: 600; } .site-footer__lista{ display: grid; gap: .5rem; } .site-footer a:hover{ color: #fff; } .site-footer__horario{ margin-top: 1rem; font-size: .85rem; } .site-footer__bottom{ display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; padding: 1.4rem 0; font-size: .8rem; } .site-footer__copy{ margin: 0; } .site-footer__legal{ display: flex; gap: 1.4rem; margin: 0; } /* Cierre: crédito de EENDA en blanco */ .site-credito{ background: var(--tm-paper); color: var(--tm-muted); font-size: .8rem; text-align: center; padding: 1.1rem 0; } .site-credito p{ margin: 0; } .site-credito__corazon{ color: var(--tm-red); vertical-align: -2px; margin: 0 .15rem; animation: latido 1.6s ease-in-out infinite; } .site-credito a{ color: var(--tm-text); font-weight: 600; } .site-credito a:hover{ color: var(--tm-red); } @keyframes latido{ 0%, 100%{ transform: scale(1); } 14%{ transform: scale(1.25); } 28%{ transform: scale(1); } 42%{ transform: scale(1.18); } 70%{ transform: scale(1); } } @media (prefers-reduced-motion: reduce){ .site-credito__corazon{ animation: none; } } /* ================================================================== * PÁGINAS INTERIORES * ================================================================== */ /* ------------------------------------------------------------------ * Cabecera de página (blocks/pagehead) * ------------------------------------------------------------------ */ .pagehead{ padding: clamp(3rem, 6vw, 5rem) 0 clamp(3rem, 6vw, 4.5rem); } .pagehead__titulo{ font-size: clamp(2.2rem, 4.6vw, 3.8rem); max-width: 18ch; margin-bottom: .4em; } .pagehead__texto{ max-width: 66ch; margin: 0; } .migas{ margin-bottom: 1.6rem; font-size: .8rem; color: var(--tm-steel); } .migas ol{ list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; } .migas li + li::before{ content: "/"; margin-right: .5rem; opacity: .5; } .migas a:hover{ color: #fff; } .migas [aria-current]{ color: #fff; } /* ------------------------------------------------------------------ * Contenido de página * ------------------------------------------------------------------ */ .pagina{ padding: clamp(3.5rem, 7vw, 6rem) 0; } .prosa p{ max-width: 68ch; } .prosa .lead{ color: var(--tm-text); } .prosa a{ color: var(--tm-red); text-decoration: underline; text-underline-offset: .2em; } .prosa a:hover{ color: var(--tm-red-dark); } .text-muted{ color: var(--tm-muted) !important; } /* HTML que viene del editor del panel */ .prosa--editor ul, .prosa--editor ol{ padding-left: 1.3rem; max-width: 68ch; } .prosa--editor li{ margin-bottom: .45rem; } .prosa--editor li::marker{ color: var(--tm-red); } .prosa--editor h2, .prosa--editor h3{ margin-top: 1.6em; } .prosa--editor img{ max-width: 100%; height: auto; } .prosa--editor > :last-child{ margin-bottom: 0; } .prosa--lead p{ font-size: 1.15rem; color: var(--tm-muted); } .prosa--primero-lead > p:first-child{ font-size: 1.15rem; } /* Lista con marca roja */ .lista-marcas{ list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; } .lista-marcas li{ position: relative; padding-left: 1.4rem; max-width: 68ch; } .lista-marcas li::before{ content: ""; position: absolute; left: 0; top: .7em; width: 8px; height: 8px; background: var(--tm-red); } .lista-marcas a{ color: var(--tm-text); text-decoration: underline; text-underline-offset: .2em; } /* Cifras en línea / columna */ .cifras--linea{ grid-template-columns: repeat(3, 1fr); max-width: 640px; } .cifras--columna{ grid-template-columns: 1fr 1fr; margin-bottom: 1.5rem; } /* Figuras apiladas (columna lateral) */ .figura-apilada{ margin: 0 0 2rem; display: grid; gap: 1rem; } .figura-apilada img{ width: 100%; aspect-ratio: 4 / 3; object-fit: cover; filter: saturate(.85); } .figura-apilada img + img{ aspect-ratio: 3 / 4; } /* Enlaces relacionados */ .enlaces-relacionados__titulo{ font-size: .75rem; letter-spacing: .18em; text-transform: uppercase; color: var(--tm-muted); font-weight: 600; margin-bottom: .6rem; } .enlaces-relacionados ul{ list-style: none; margin: 0; padding: 0; } .enlaces-relacionados li{ border-top: 1px solid var(--tm-line); } .enlaces-relacionados li:last-child{ border-bottom: 1px solid var(--tm-line); } .enlaces-relacionados a{ display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .9rem 0; font-family: var(--tm-display); font-size: 1.15rem; font-weight: 700; } .enlaces-relacionados a .btn__flecha{ color: var(--tm-red); flex: none; transition: transform .25s var(--tm-ease); } .enlaces-relacionados a:hover{ color: var(--tm-red); } .enlaces-relacionados a:hover .btn__flecha{ transform: translateX(4px); } .enlaces-relacionados--ancho ul{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 3rem; } /* Misión: bloques numerados */ .mision{ padding: clamp(2rem, 4vw, 3.5rem) 0; border-top: 1px solid var(--tm-line); } .mision:first-child{ border-top: 0; padding-top: 0; } .mision__titulo{ font-size: clamp(1.8rem, 3vw, 2.4rem); margin: 0; } /* Instalaciones */ .panoramica{ margin: 0; } .panoramica img{ width: 100%; aspect-ratio: 3 / 1; object-fit: cover; } .maquinaria--pagina{ font-size: 1rem; gap: .8rem 2rem; } .tarjeta-datos{ background: var(--tm-ink); color: #fff; padding: 1.8rem; } .tarjeta-datos__titulo{ font-size: .75rem; letter-spacing: .18em; text-transform: uppercase; color: var(--tm-steel); font-weight: 600; margin-bottom: .8rem; } .galeria-doble{ display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; } .galeria-doble figure{ margin: 0; } .galeria-doble img{ width: 100%; aspect-ratio: 16 / 7; object-fit: cover; } .galeria-doble figcaption{ font-size: .85rem; color: var(--tm-muted); margin-top: .6rem; } /* Calidad: valores numerados */ .valores{ list-style: none; margin: 2rem 0; padding: 0; counter-reset: valor; } .valores li{ display: grid; grid-template-columns: 3.5rem 1fr; gap: 1rem; padding: 1.6rem 0; border-top: 1px solid var(--tm-line); } .valores li:last-child{ border-bottom: 1px solid var(--tm-line); } .valores__numero{ font-family: var(--tm-display); font-style: italic; font-size: 1.6rem; color: var(--tm-red); line-height: 1; } .valores h2{ margin-bottom: .4rem; } .valores p{ margin: 0; color: var(--tm-muted); max-width: 62ch; } .certificado--pegado{ position: sticky; top: calc(var(--tm-header) + 1.5rem); } /* ------------------------------------------------------------------ * Galería de trabajos * ------------------------------------------------------------------ */ .filtro{ display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; } .filtro__boton{ font: inherit; font-size: .85rem; font-weight: 500; color: var(--tm-text); background: #fff; border: 1px solid var(--tm-line); border-radius: 999px; padding: .5rem 1rem; cursor: pointer; transition: background .2s, color .2s, border-color .2s; } .filtro__boton span{ color: var(--tm-muted); font-size: .78rem; margin-left: .3rem; } .filtro__boton:hover{ border-color: var(--tm-ink); } .filtro__boton.is-active{ background: var(--tm-ink); color: #fff; border-color: var(--tm-ink); } .filtro__boton.is-active span{ color: var(--tm-steel); } .galeria__rejilla{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; } .galeria__item{ margin: 0; } .galeria__item[hidden]{ display: none; } .galeria__item a{ display: block; overflow: hidden; background: var(--tm-mist); aspect-ratio: 4 / 3; } .galeria__item img{ width: 100%; height: 100%; object-fit: cover; filter: saturate(.85); transition: transform .7s var(--tm-ease), filter .3s; } .galeria__item a:hover img{ transform: scale(1.05); filter: saturate(1); } .galeria__item figcaption{ font-size: .85rem; color: var(--tm-muted); margin-top: .6rem; line-height: 1.4; } .galeria__vacio{ color: var(--tm-muted); } /* Visor (dialog nativo) */ .visor{ border: 0; padding: 0; background: rgba(8, 9, 10, .96); color: #fff; width: 100vw; height: 100dvh; max-width: none; max-height: none; } .visor::backdrop{ background: rgba(8, 9, 10, .96); } .visor[open]{ display: grid; grid-template-rows: 100%; justify-items: center; } .visor__figura{ margin: 0; width: min(100%, 1400px); height: 100dvh; display: grid; grid-template-rows: minmax(0, 1fr) auto; padding: 4rem 4.5rem 2rem; box-sizing: border-box; } .visor__figura img{ width: 100%; height: 100%; max-height: 100%; object-fit: contain; min-height: 0; } .visor__figura figcaption{ padding-top: 1rem; display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; align-items: baseline; font-size: .9rem; } .visor__categoria{ font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--tm-red-soft); font-weight: 600; } .visor__titulo{ font-family: var(--tm-display); font-size: 1.15rem; } .visor__contador{ margin-left: auto; color: var(--tm-steel); font-variant-numeric: tabular-nums; } .visor__cerrar, .visor__nav{ position: absolute; background: none; border: 0; color: #fff; cursor: pointer; padding: .8rem; opacity: .8; transition: opacity .2s, transform .2s; } .visor__cerrar:hover, .visor__nav:hover{ opacity: 1; } .visor__cerrar:focus-visible, .visor__nav:focus-visible{ outline: 2px solid var(--tm-red-soft); outline-offset: 2px; opacity: 1; } .visor__cerrar{ top: 1rem; right: 1rem; } .visor__nav{ top: 50%; transform: translateY(-50%); } .visor__nav--anterior{ left: .5rem; } .visor__nav--siguiente{ right: .5rem; } .visor__nav:hover{ transform: translateY(-50%) scale(1.1); } /* ------------------------------------------------------------------ * Formulario de contacto * ------------------------------------------------------------------ */ .contacto__datos--pagina{ grid-template-columns: 1fr; gap: 1.6rem; } .contacto__datos--pagina dt{ color: var(--tm-muted); } .contacto__datos--pagina a:hover{ color: var(--tm-red); } .formulario .form-label{ font-size: .85rem; font-weight: 600; margin-bottom: .35rem; } .formulario .form-control{ border-radius: var(--tm-radius); border-color: var(--tm-line); padding: .8rem 1rem; font-size: 1rem; } .formulario .form-control:focus{ border-color: var(--tm-ink); box-shadow: 0 0 0 3px rgba(14, 15, 17, .12); } .formulario .form-check-input:checked{ background-color: var(--tm-red); border-color: var(--tm-red); } .formulario .form-check-input:focus{ box-shadow: 0 0 0 3px rgba(227, 6, 19, .2); border-color: var(--tm-red); } .formulario .form-check-label a{ text-decoration: underline; text-underline-offset: .2em; } .formulario__trampa{ position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .response:empty{ display: none; } .response .success, .response .error{ display: block; padding: 1rem 1.2rem; margin-bottom: 1.5rem; border-left: 3px solid; font-weight: 500; } .response .success{ background: #edf7ee; border-color: #2e7d32; color: #1b5e20; } .response .error{ background: #fdecec; border-color: var(--tm-red); color: var(--tm-red-dark); } /* ------------------------------------------------------------------ * Documentos legales * ------------------------------------------------------------------ */ .legal__indice{ position: sticky; top: calc(var(--tm-header) + 1.5rem); align-self: start; } .legal__indice-titulo{ font-size: .75rem; letter-spacing: .18em; text-transform: uppercase; color: var(--tm-muted); font-weight: 600; margin-bottom: .8rem; } .legal__indice ol{ list-style: none; margin: 0; padding: 0; counter-reset: indice; font-size: .9rem; } .legal__indice li{ counter-increment: indice; border-top: 1px solid var(--tm-line); } .legal__indice li:last-child{ border-bottom: 1px solid var(--tm-line); } .legal__indice a{ display: flex; gap: .8rem; padding: .6rem 0; } .legal__indice a::before{ content: counter(indice, decimal-leading-zero); font-family: var(--tm-display); font-style: italic; color: var(--tm-red); } .legal__fecha{ font-size: .8rem; color: var(--tm-muted); margin-top: 1.2rem; } .legal__seccion{ padding: 0 0 2.5rem; scroll-margin-top: calc(var(--tm-header) + 1.5rem); } .legal__seccion h2{ font-size: 1.6rem; display: flex; gap: .8rem; align-items: baseline; } .legal__numero{ font-family: var(--tm-display); font-style: italic; font-weight: 600; font-size: 1rem; color: var(--tm-red); } .prosa--legal p, .prosa--legal li{ color: var(--tm-text); } .ficha{ display: grid; grid-template-columns: max-content 1fr; gap: .5rem 1.5rem; margin: 1rem 0 1.5rem; font-size: .95rem; } .ficha dt{ color: var(--tm-muted); font-weight: 400; } .ficha dd{ margin: 0; } .pendiente{ display: inline-block; background: #fff3cd; color: #7a5a00; border: 1px dashed #d9a400; padding: 0 .4rem; font-size: .85em; font-weight: 600; } .tabla-cookies{ width: 100%; border-collapse: collapse; font-size: .9rem; margin: 1rem 0 1.5rem; } .tabla-cookies th, .tabla-cookies td{ text-align: left; vertical-align: top; padding: .7rem .8rem; border-bottom: 1px solid var(--tm-line); } .tabla-cookies th{ font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--tm-muted); font-weight: 600; } .tabla-cookies code{ color: var(--tm-text); background: var(--tm-mist); padding: .1rem .35rem; }