/* ========================================================================== Taveras Solutions · sistema "La casa" -------------------------------------------------------------------------- Letras y paleta de cursos.eriktaveras.com (Taller) con la estructura de workshops.eriktaveras.com (Cartel): cabecera de tinta, regla de 3px, hojas con sombra dura y banda verde a sangre. El verde se parte en tres, como en el resto de la casa: - #047857 es FUNCIONAL: texto, botón, check. 5.48:1 con blanco encima. - #10b981 es DECORATIVO: la marca, un subrayado, un punto. Nunca texto. - #34D399 es el acento sobre la tinta (9.7:1). Móvil primero. Cortes: 600 / 760 / 1000 / 1240. ========================================================================== */ :root { color-scheme: light; --papel: #F1F2EE; --papel-2: #E6E8E2; --papel-3: #FFFFFF; --papel-4: #F7F8F5; --tinta: #101318; --tinta-2: #353B44; --suave: #4A515B; --tenue: #5C636D; --tinta-clara: #A7AEA7; --papel-sobre-tinta: #D5D9D3; --linea: #D4D8D1; --linea-media: #C3C8C0; --linea-fuerte: #9CA39B; --linea-oscura: #353B44; --verde: #10b981; --verde-ink: #047857; --verde-hondo: #064E3B; --verde-claro: #34D399; --verde-bg: #E2F4EB; --verde-linea: #B5DCC6; --verde-texto: #C9E9D8; --ambar-bg: #F7E6B8; --rojo-ink: #8E2A17; --display: 'Big Shoulders Display', 'Arial Narrow', 'Roboto Condensed', sans-serif; --sans: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif; --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --ancho: 1280px; --margen: 20px; --tap: 48px; --ease: cubic-bezier(0.22, 1, 0.36, 1); --plano: linear-gradient(rgba(16, 19, 24, 0.055) 1px, transparent 1px), linear-gradient(90deg, rgba(16, 19, 24, 0.055) 1px, transparent 1px); --plano-oscuro: linear-gradient(rgba(241, 242, 238, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(241, 242, 238, 0.045) 1px, transparent 1px); } @media (min-width: 760px) { :root { --margen: 32px; } } @media (min-width: 1240px) { :root { --margen: 40px; } } /* ---------- Idioma --------------------------------------------------------- Las dos versiones van en la página. Se esconde la que no toca. El atributo lo pone un script en antes de pintar. `data-lang` es el marcado viejo del formulario de evaluación. */ html[data-idioma="es"] .i-en, html[data-idioma="en"] .i-es, html[data-idioma="es"] [data-lang="en"], html[data-idioma="en"] [data-lang="es"] { display: none !important; } /* ---------- Base ---------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--papel); color: var(--tinta); font-family: var(--sans); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; font-synthesis: style; overflow-x: clip; } h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote, pre { margin: 0; padding: 0; } ul, ol { list-style: none; } h1, h2, h3 { text-wrap: balance; } p { text-wrap: pretty; } img, svg { display: block; max-width: 100%; } button, input, textarea, select { font: inherit; color: inherit; } a { color: var(--verde-ink); text-underline-offset: 3px; } a:hover { color: var(--verde-hondo); } strong { font-weight: 700; } ::selection { background: var(--verde-claro); color: var(--tinta); } :focus-visible { outline: 3px solid var(--tinta); outline-offset: 2px; box-shadow: 0 0 0 5px var(--papel); } .banda--tinta :focus-visible, .banda--verde :focus-visible, .cabecera :focus-visible, .pie :focus-visible, .terminal :focus-visible { outline-color: var(--verde-claro); box-shadow: none; } .saltar { position: absolute; left: 12px; top: -60px; z-index: 50; padding: 12px 16px; background: var(--verde-claro); color: var(--tinta); font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-decoration: none; } .saltar:focus { top: 12px; } .oculto-visual { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .envoltura { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 var(--margen); } /* ---------- Tipografía ---------------------------------------------------- */ .rotulo { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: 0.12em; line-height: 1.4; text-transform: uppercase; } .rotulo--tenue { color: var(--tenue); font-weight: 500; } .rotulo--verde { color: var(--verde-ink); } .rotulo--papel { color: var(--papel); } .banda--tinta .rotulo--verde, .banda--verde .rotulo--verde, .formulario__cabeza .rotulo--verde { color: var(--verde-claro); } .titular { font-family: var(--display); font-weight: 800; font-size: clamp(54px, 13vw, 112px); line-height: 0.88; letter-spacing: -0.005em; } .titular--caso { font-size: clamp(50px, 11.5vw, 104px); } .titular__acento { color: var(--verde-ink); } .titular-seccion { font-family: var(--display); font-weight: 800; font-size: clamp(44px, 8.4vw, 80px); line-height: 0.9; } .titular-seccion--grande { font-size: clamp(52px, 10vw, 104px); line-height: 0.88; } .titular-seccion--medio { font-size: clamp(40px, 6.4vw, 64px); line-height: 0.92; } .bajada { font-size: clamp(18px, 2.4vw, 23px); line-height: 1.45; font-weight: 500; color: var(--tinta-2); } .regla { height: 3px; background: var(--tinta); } .rotulo-linea { display: flex; align-items: center; gap: 16px; } .rotulo-linea > .rotulo { white-space: nowrap; } .rotulo-linea__trazo { flex: 1 1 auto; min-width: 24px; height: 2px; background: var(--tinta); } .banda--tinta .rotulo-linea__trazo { background: rgba(241, 242, 238, 0.32); } .enlace-mono { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tinta); text-decoration: underline; text-decoration-color: var(--verde); text-decoration-thickness: 2px; text-underline-offset: 6px; white-space: nowrap; } .enlace-mono:hover { color: var(--verde-ink); } .banda--tinta .enlace-mono { color: var(--papel); } .banda--tinta .enlace-mono:hover { color: var(--verde-claro); } /* ---------- Iconos -------------------------------------------------------- */ .icono { flex: 0 0 auto; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .icono--chico { width: 16px; height: 16px; stroke-width: 2; } .icono--flecha { width: 18px; height: 18px; stroke-width: 2.4; stroke-linecap: square; stroke-linejoin: miter; } .icono--grande { width: 30px; height: 30px; stroke-width: 1.6; } /* ---------- Botones ------------------------------------------------------- */ .boton { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 56px; padding: 0 26px; border: 2px solid transparent; border-radius: 0; font-family: var(--sans); font-size: 17px; font-weight: 700; line-height: 1.2; text-decoration: none; cursor: pointer; transition: background-color 0.15s var(--ease), color 0.15s var(--ease), border-color 0.15s var(--ease); } .boton--primario { background: var(--verde-ink); color: #FFFFFF; } .boton--primario:hover { background: var(--verde-hondo); color: #FFFFFF; } .boton--contorno { background: var(--papel-3); border-color: var(--tinta); color: var(--tinta); } .boton--contorno:hover { background: var(--tinta); color: var(--papel); } .boton--claro { background: var(--verde-claro); color: var(--tinta); } .boton--claro:hover { background: #6EE7B7; color: var(--tinta); } .boton--contorno-claro { background: transparent; border-color: var(--papel); color: var(--papel); } .boton--contorno-claro:hover { background: var(--papel); color: var(--tinta); } .boton--ancho { width: 100%; } .boton--chico { min-height: 44px; padding: 0 18px; font-size: 15px; } .boton--reparte { justify-content: space-between; } .acciones { display: flex; flex-direction: column; gap: 10px; } @media (min-width: 600px) { .acciones { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px; } } /* ---------- Etiquetas ----------------------------------------------------- */ .chip { display: inline-flex; align-items: center; gap: 10px; padding: 7px 12px; background: var(--papel-3); border: 2px solid var(--verde-ink); color: var(--verde-ink); font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.12em; line-height: 1.3; text-transform: uppercase; } .chip::before { content: ""; flex: none; width: 8px; height: 8px; background: var(--verde); } @media (min-width: 760px) { .chip { font-size: 12px; } } .etiquetas { display: flex; flex-wrap: wrap; gap: 6px; } .etiqueta { display: inline-flex; align-items: center; padding: 4px 8px; background: var(--papel-3); border: 1px solid var(--linea-fuerte); font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.1em; line-height: 1.4; text-transform: uppercase; } .etiqueta--verde { background: var(--verde-bg); border-color: var(--verde-linea); color: var(--verde-ink); } .etiqueta--oscura { background: transparent; border-color: var(--verde-claro); color: var(--verde-claro); } /* ---------- Hoja con sombra dura (de workshops) --------------------------- */ .hoja { position: relative; padding: 0 10px 10px 0; } .hoja::before { content: ""; position: absolute; left: 10px; top: 10px; right: 0; bottom: 0; background: var(--tinta); } .hoja--verde::before { background: var(--verde-ink); } .hoja__cuerpo { position: relative; height: 100%; background: var(--papel-3); border: 3px solid var(--tinta); } @media (min-width: 1000px) { .hoja { padding: 0 14px 14px 0; } .hoja::before { left: 14px; top: 14px; } } /* ---------- Cabecera ------------------------------------------------------ */ .cabecera { position: relative; z-index: 20; background: var(--tinta); color: var(--papel); } .cabecera__fila { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; } @media (min-width: 1000px) { .cabecera__fila { min-height: 76px; } } .marca { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; color: var(--papel); text-decoration: none; } .marca:hover { color: var(--papel); } .marca__simbolo { width: 22px; height: 25px; } .marca__nombre { font-family: var(--mono); font-size: 13px; font-weight: 600; letter-spacing: 0.16em; } .marca__separador { width: 1px; height: 18px; background: var(--linea-oscura); } .marca__apellido { font-family: var(--mono); font-size: 13px; font-weight: 500; letter-spacing: 0.16em; color: var(--tinta-clara); } .marca__separador, .marca__apellido { display: none; } @media (min-width: 420px) { .marca__separador, .marca__apellido { display: block; } } .cabecera__nav { display: none; } .cabecera__herramientas { display: flex; align-items: center; gap: 8px; } .cabecera__cta { display: none; } .nav__enlace { display: flex; align-items: center; min-height: 44px; padding: 0 14px; color: var(--papel); font-size: 15px; font-weight: 500; text-decoration: none; } .nav__enlace:hover { color: var(--verde-claro); } .nav__enlace[aria-current="page"] { font-weight: 600; text-decoration: underline; text-decoration-color: var(--verde); text-decoration-thickness: 2px; text-underline-offset: 8px; } .idioma { display: flex; border: 1.5px solid var(--linea-oscura); } .idioma__boton { min-width: 44px; min-height: 40px; padding: 0 8px; border: 0; background: transparent; color: var(--tinta-clara); font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.12em; cursor: pointer; } .idioma__boton:hover { color: var(--papel); } .idioma__boton[aria-pressed="true"] { background: var(--papel); color: var(--tinta); } .cabecera__menu { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; background: var(--verde-claro); color: var(--tinta); cursor: pointer; } .cabecera__menu .icono { width: 22px; height: 22px; stroke-width: 2.4; stroke-linecap: square; } .cabecera__menu .icono--cerrar { display: none; } .cabecera__menu[aria-expanded="true"] .icono--abrir { display: none; } .cabecera__menu[aria-expanded="true"] .icono--cerrar { display: block; } .cabecera__panel { display: none; border-top: 1px solid var(--linea-oscura); padding: 8px 0 20px; } .cabecera__panel.esta-abierto { display: block; } .cabecera__panel .nav__enlace { padding: 0; min-height: 52px; border-bottom: 1px solid var(--linea-oscura); font-size: 18px; } .cabecera__panel .boton { margin-top: 16px; width: 100%; } @media (min-width: 1000px) { .cabecera__nav { display: flex; align-items: center; gap: 2px; } .cabecera__cta { display: inline-flex; } .cabecera__menu, .cabecera__panel, .cabecera__panel.esta-abierto { display: none; } .cabecera__herramientas { gap: 16px; margin-left: 10px; } } /* ---------- Secciones ----------------------------------------------------- */ .seccion { padding: 56px 0; } @media (min-width: 760px) { .seccion { padding: 80px 0; } } @media (min-width: 1000px) { .seccion { padding: 104px 0; } } .seccion--plano { background-image: var(--plano); background-size: 32px 32px; } .seccion--gris { background: var(--papel-2); } .seccion--filo-arriba { border-top: 1.5px solid var(--tinta); } .seccion--filo-abajo { border-bottom: 1.5px solid var(--tinta); } .banda--tinta { background-color: var(--tinta); background-image: var(--plano-oscuro); background-size: 32px 32px; color: var(--papel); } .banda--verde { background: var(--verde-hondo); color: var(--papel); } .rejilla { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; } @media (min-width: 1000px) { .rejilla { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 48px; } .col-4 { grid-column: span 4; } .col-5 { grid-column: span 5; } .col-6 { grid-column: span 6; } .col-7 { grid-column: span 7; } .col-8 { grid-column: span 8; } .col-9 { grid-column: span 9; } .rejilla--abajo { align-items: end; } .rejilla--centro { align-items: center; } } .cabeza-seccion { display: grid; gap: 18px; margin-top: 24px; } @media (min-width: 1000px) { .cabeza-seccion { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 48px; align-items: end; margin-top: 30px; } .cabeza-seccion > :first-child { grid-column: span 7; } .cabeza-seccion > :last-child { grid-column: span 5; } } .cabeza-seccion__texto { font-size: 19px; line-height: 1.55; color: var(--tinta-2); } /* ---------- Hero ---------------------------------------------------------- */ .hero { padding: 40px 0 56px; background-image: var(--plano); background-size: 32px 32px; border-bottom: 1.5px solid var(--tinta); } @media (min-width: 760px) { .hero { padding: 72px 0 80px; } } @media (min-width: 1000px) { .hero { padding: 96px 0 104px; } } .hero__texto { display: flex; flex-direction: column; align-items: flex-start; } .hero__texto .titular { margin-top: 24px; } .hero__texto .regla { align-self: stretch; margin: 26px 0 22px; } .hero__texto .bajada { max-width: 640px; } .hero__texto .acciones { align-self: stretch; margin-top: 28px; } @media (min-width: 600px) { .hero__texto .acciones { align-self: flex-start; } } @media (min-width: 1000px) { .hero__texto .titular { margin-top: 30px; } .hero__texto .regla { margin: 36px 0 30px; } .hero__texto .acciones { margin-top: 36px; } } .hero__esquema { margin-top: 40px; } @media (min-width: 1000px) { .hero__esquema { margin-top: 72px; } } /* La placa: la .ficha de cursos en vertical */ .placa { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); background: var(--papel-3); border: 2px solid var(--tinta); } .placa__dato { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-bottom: 1px solid var(--linea); } .placa__dato + .placa__dato { border-left: 1px solid var(--linea); } .placa__dato--ancho { grid-column: 1 / -1; border-left: 0 !important; } .placa__rotulo { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tenue); } .placa__valor { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; font-weight: 600; } .placa__cifra { font-family: var(--display); font-size: clamp(38px, 9vw, 48px); font-weight: 800; line-height: 1; } .placa__unidad { font-size: 15px; } .placa__persona { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: var(--papel-4); } .placa__foto { width: 48px; height: 48px; object-fit: cover; border: 1.5px solid var(--tinta); } .placa__persona p { font-size: 15px; line-height: 1.4; color: var(--tinta-2); } .placa__persona strong { color: var(--tinta); } @media (min-width: 1000px) { .placa { grid-template-columns: minmax(0, 1fr); } .placa__dato { padding: 18px 22px; } .placa__dato + .placa__dato { border-left: 0; } .placa__unidad { font-size: 16px; } .placa__persona { padding: 16px 22px; } } /* ---------- Esquema numerado (de cursos) --------------------------------- */ .esquema { padding: 22px 18px 24px; } @media (min-width: 1000px) { .esquema { padding: 30px 40px 34px; } } .esquema__cabeza { display: flex; align-items: center; gap: 14px; } .esquema__cabeza > .rotulo { white-space: nowrap; } .esquema__nota { display: none; white-space: nowrap; } @media (min-width: 760px) { .esquema__nota { display: block; } } .esquema__piezas { display: flex; flex-direction: column; margin-top: 22px; } .esquema__paso { display: flex; flex-direction: column; } .esquema__pieza { display: grid; grid-template-columns: 28px 72px minmax(0, 1fr); align-items: center; gap: 12px; } .esquema__numero { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 1.5px solid var(--tinta); border-radius: 50%; background: var(--papel); font-family: var(--mono); font-size: 11px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; } .esquema__caja { display: flex; align-items: center; justify-content: center; height: 56px; background: var(--papel-3); border: 1.5px solid var(--tinta); } .esquema__caja .icono { width: 26px; height: 26px; stroke-width: 1.6; } .esquema__texto { font-family: var(--mono); font-size: 13px; line-height: 1.35; color: var(--tinta-2); } .esquema__texto strong { font-weight: 600; color: var(--tinta); } .esquema__conector { display: flex; align-items: center; justify-content: center; width: 72px; height: 24px; margin-left: 40px; color: var(--verde-ink); } .esquema__conector svg { width: 22px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transform: rotate(90deg); } .esquema__paso--central .esquema__numero { background: var(--verde-ink); border-color: var(--verde-ink); color: #FFFFFF; } .esquema__paso--central .esquema__caja { background: var(--verde-bg); border-color: var(--verde-ink); color: var(--verde-hondo); } .esquema__paso--central .esquema__texto, .esquema__paso--central .esquema__texto strong { color: var(--verde-hondo); font-weight: 600; } @media (min-width: 1000px) { .esquema__piezas { flex-direction: row; align-items: flex-start; margin-top: 26px; } .esquema__paso { flex: 1 1 44px; flex-direction: row; align-items: flex-start; min-width: 0; } .esquema__paso:first-child { flex-basis: 0; } .esquema__pieza { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 0; } .esquema__caja { align-self: stretch; height: 96px; } .esquema__caja .icono { width: 32px; height: 32px; } .esquema__texto { text-align: center; } .esquema__texto strong { display: block; } .esquema__conector { flex: 0 0 auto; width: 44px; height: 96px; margin: 38px 0 0; } .esquema__conector svg { width: 26px; transform: none; } } /* ---------- Servicios ----------------------------------------------------- */ .servicios { display: grid; gap: 40px; margin-top: 40px; } @media (min-width: 760px) { .servicios { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 32px; } } @media (min-width: 1000px) { .servicios { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 64px; } } .servicio { display: flex; flex-direction: column; gap: 16px; padding-top: 20px; border-top: 3px solid var(--tinta); } .servicio--verde { border-top-color: var(--verde-ink); } .servicio__cabeza { display: flex; align-items: center; justify-content: space-between; } .servicio__cabeza .icono { width: 30px; height: 30px; stroke-width: 1.6; color: var(--verde-ink); } .servicio__titulo { font-family: var(--display); font-weight: 800; font-size: clamp(36px, 7vw, 44px); line-height: 0.95; } .servicio__texto { font-size: 17px; color: var(--tinta-2); } .numero-cuadro { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: var(--tinta); color: var(--papel); font-family: var(--display); font-size: 20px; font-weight: 800; line-height: 1; } .numero-cuadro--verde { background: var(--verde-ink); color: #FFFFFF; } .lista-cuadros { border-top: 1px solid var(--linea); } .lista-cuadros li { display: flex; align-items: center; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--linea); font-size: 16px; font-weight: 500; line-height: 1.4; } .lista-cuadros li::before, .lista-marcas li::before { content: ""; flex: none; width: 13px; height: 13px; border: 1.5px solid var(--verde-ink); border-radius: 3px; } .lista-marcas { display: flex; flex-direction: column; gap: 8px; font-size: 15px; } .lista-marcas li { display: flex; align-items: flex-start; gap: 10px; line-height: 1.45; } .lista-marcas li::before { width: 12px; height: 12px; margin-top: 5px; } /* ---------- Pasos (banda verde) ------------------------------------------ */ .pasos-banda { display: grid; gap: 36px; } @media (min-width: 1000px) { .pasos-banda { grid-template-columns: 400px minmax(0, 1fr); gap: 72px; align-items: start; } } .pasos-banda__cabeza { display: flex; flex-direction: column; gap: 14px; } .pasos-banda__cabeza .titular-seccion { color: var(--papel); font-size: clamp(42px, 6vw, 60px); line-height: 0.92; } .pasos { display: grid; gap: 24px; } @media (min-width: 600px) { .pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; } } @media (min-width: 1240px) { .pasos { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .paso { display: flex; flex-direction: column; gap: 8px; padding-top: 16px; border-top: 3px solid var(--verde-claro); } .paso__numero { font-family: var(--mono); font-size: 13px; font-weight: 600; letter-spacing: 0.12em; color: var(--verde-claro); } .paso__titulo { font-size: 21px; font-weight: 700; line-height: 1.2; } .paso__texto { font-size: 16px; line-height: 1.5; color: var(--verde-texto); } /* ---------- Caso destacado (banda de tinta) ------------------------------ */ .destacado { margin-top: 40px; } @media (min-width: 1000px) { .destacado { margin-top: 64px; } } .destacado__texto { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; } .destacado__titulo { font-family: var(--display); font-weight: 800; font-size: clamp(48px, 9vw, 72px); line-height: 0.9; color: var(--papel); } .destacado__resumen { font-size: 19px; line-height: 1.55; color: var(--papel-sobre-tinta); } .lista-checks { align-self: stretch; border-top: 1px solid rgba(241, 242, 238, 0.16); } .lista-checks li { display: flex; align-items: flex-start; gap: 14px; padding: 13px 0; border-bottom: 1px solid rgba(241, 242, 238, 0.16); font-size: 17px; line-height: 1.45; } .lista-checks .icono { width: 18px; height: 18px; margin-top: 3px; stroke-width: 2.2; color: var(--verde-claro); } .destacado__texto .acciones { align-self: stretch; margin-top: 8px; } @media (min-width: 600px) { .destacado__texto .acciones { align-self: flex-start; } } .terminal { background: #0A0C10; border: 1.5px solid rgba(241, 242, 238, 0.32); min-width: 0; } .terminal__barra { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-bottom: 1.5px solid rgba(241, 242, 238, 0.16); } .terminal__punto { width: 10px; height: 10px; background: var(--linea-oscura); } .terminal__punto--verde { background: var(--verde); } .terminal__titulo { margin-left: 10px; font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tinta-clara); } .terminal__cuerpo { padding: 20px 18px 24px; font-family: var(--mono); font-size: 12.5px; line-height: 2; color: var(--papel-sobre-tinta); white-space: pre-wrap; overflow-x: auto; } @media (min-width: 760px) { .terminal__cuerpo { padding: 26px 24px 30px; font-size: 14.5px; } } .t-ok, .t-prompt { color: var(--verde-claro); } .t-info { color: var(--tinta-clara); } .t-sync { color: var(--ambar-bg); } .t-ai { color: var(--verde-linea); } .t-cursor { display: inline-block; width: 10px; height: 18px; vertical-align: -3px; background: var(--verde-claro); animation: parpadeo 1.1s steps(1) infinite; } @keyframes parpadeo { 50% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .t-cursor { animation: none; } } /* ---------- Tarjetas de caso --------------------------------------------- */ .tarjetas-caso { display: grid; gap: 28px; } @media (min-width: 760px) { .tarjetas-caso { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1000px) { .tarjetas-caso { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; } } .tarjeta-caso { display: flex; flex-direction: column; } .tarjeta-caso__cabeza { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 0 18px; background: var(--tinta); color: var(--papel); } .tarjeta-caso__cabeza .rotulo { font-size: 11px; } .tarjeta-caso__numero { color: var(--verde-claro); } .tarjeta-caso__cuerpo { flex: 1 1 auto; display: flex; flex-direction: column; gap: 16px; padding: 24px 22px 20px; } .tarjeta-caso__titulo { font-family: var(--display); font-weight: 800; font-size: clamp(38px, 7vw, 46px); line-height: 0.92; } .tarjeta-caso__titulo a { color: inherit; text-decoration: none; } .tarjeta-caso__titulo a:hover { color: var(--verde-ink); } .tarjeta-caso__texto { font-size: 16px; color: var(--tinta-2); } .tarjeta-caso .etiquetas { margin-top: auto; padding-top: 6px; } .tarjeta-caso .etiqueta { font-size: 10.5px; } /* ---------- Open source --------------------------------------------------- */ .repo-destacado { display: flex; flex-direction: column; gap: 14px; padding: 22px 20px; background: var(--papel-3); border: 2px solid var(--tinta); color: var(--tinta); text-decoration: none; } .repo-destacado:hover { border-color: var(--verde-ink); } @media (min-width: 760px) { .repo-destacado { padding: 26px 26px 24px; } } .repo-destacado__nombre { font-family: var(--mono); font-size: clamp(17px, 3vw, 22px); font-weight: 600; overflow-wrap: anywhere; } .repo-destacado__cifras { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 28px; } .cifra { display: inline-flex; align-items: baseline; gap: 8px; } .cifra__numero { font-family: var(--display); font-weight: 800; font-size: clamp(52px, 10vw, 64px); line-height: 0.9; } .cifra__unidad { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tenue); } .repo-destacado__texto { font-size: 16px; line-height: 1.5; color: var(--tinta-2); } .repo-destacado .enlace-mono { color: var(--tinta); } .repos { border-top: 1.5px solid var(--tinta); } .repo { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 4px 16px; padding: 16px 0; border-bottom: 1px solid var(--linea-media); color: var(--tinta); text-decoration: none; } a.repo:hover .repo__nombre { color: var(--verde-ink); text-decoration: underline; text-decoration-color: var(--verde); text-decoration-thickness: 2px; } .repo__numero { grid-row: span 2; font-family: var(--display); font-weight: 800; font-size: 34px; line-height: 1; } .repo__nombre { font-family: var(--mono); font-size: 15px; font-weight: 600; overflow-wrap: anywhere; } .repo__estrellas { grid-column: 3; grid-row: 1; justify-self: end; font-family: var(--mono); font-size: 14px; font-weight: 600; white-space: nowrap; } .repo__texto { grid-column: 2 / -1; font-size: 15px; line-height: 1.45; color: var(--suave); } .repo__lenguaje { display: none; } @media (min-width: 760px) { .repo { grid-template-columns: 60px minmax(0, 1fr) 150px 80px; gap: 2px 20px; padding: 20px 0; } .repo__numero { font-size: 40px; } .repo__nombre { font-size: 16px; } .repo__texto { grid-column: 2; grid-row: 2; } .repo__lenguaje { display: block; grid-column: 3; grid-row: 1 / span 2; font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tenue); } .repo__estrellas { grid-column: 4; grid-row: 1 / span 2; } } /* ---------- Equipo -------------------------------------------------------- */ .personas { display: grid; gap: 28px; } @media (min-width: 600px) { .personas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; } } .persona { display: flex; flex-direction: column; gap: 14px; } .persona__foto { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 30%; border: 2px solid var(--tinta); background: var(--papel-2); } .persona__iniciales { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 4 / 3; border: 2px solid var(--tinta); background-color: var(--papel-3); background-image: var(--plano); background-size: 24px 24px; font-family: var(--display); font-weight: 800; font-size: clamp(88px, 16vw, 128px); line-height: 1; color: var(--verde-ink); } .persona__nombre { font-family: var(--display); font-weight: 800; font-size: 40px; line-height: 1; } .persona__rol { margin-top: 4px; color: var(--verde-ink); font-size: 11px; } .persona__texto { font-size: 16px; color: var(--tinta-2); } /* ---------- Contacto ------------------------------------------------------ */ .contacto__texto { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; } .contacto__texto .regla { align-self: stretch; } .contacto__texto p { max-width: 520px; font-size: 20px; line-height: 1.5; color: var(--tinta-2); } .chips-contacto { display: flex; flex-wrap: wrap; gap: 10px; } .chip-contacto { display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 16px; background: var(--papel-3); border: 1.5px solid var(--tinta); color: var(--tinta); font-family: var(--mono); font-size: 13px; font-weight: 500; text-decoration: none; overflow-wrap: anywhere; } .chip-contacto:hover { background: var(--tinta); color: var(--papel); } .chip-contacto .icono { color: var(--verde-ink); } .chip-contacto:hover .icono { color: var(--verde-claro); } .chip-contacto--mono { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; } .aviso-enviado { display: flex; align-items: flex-start; gap: 14px; align-self: stretch; padding: 16px 18px; background: var(--verde-bg); border: 2px solid var(--verde-ink); color: var(--verde-hondo); } .aviso-enviado .icono { width: 22px; height: 22px; stroke-width: 2.2; color: var(--verde-ink); margin-top: 2px; } .aviso-enviado strong { display: block; color: var(--tinta); } /* ---------- Formulario ---------------------------------------------------- */ .formulario__cabeza { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 0 20px; background: var(--tinta); } .formulario__cuerpo { display: flex; flex-direction: column; gap: 18px; padding: 22px 18px 24px; } @media (min-width: 760px) { .formulario__cabeza { padding: 0 26px; } .formulario__cuerpo { padding: 28px 26px 30px; } } .formulario__doble { display: grid; gap: 18px; } @media (min-width: 600px) { .formulario__doble { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } } .campo { display: flex; flex-direction: column; gap: 7px; } .campo__rotulo { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; } .campo__entrada { width: 100%; min-height: 52px; padding: 0 14px; border: 1.5px solid var(--tinta); border-radius: 0; background: var(--papel-4); font-size: 16px; color: var(--tinta); } .campo__entrada::placeholder { color: var(--tenue); opacity: 1; } .campo__entrada:focus { outline: 3px solid var(--verde-ink); outline-offset: 0; background: var(--papel-3); box-shadow: none; } .campo__entrada--area { min-height: 140px; padding: 14px; line-height: 1.5; resize: vertical; } .formulario__pie { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--tenue); } .boton .icono--flecha { color: currentColor; } /* ---------- Página de caso ------------------------------------------------ */ .migas { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .migas a { color: var(--verde-ink); } .migas__separador { color: var(--linea-fuerte); } .caso-hero__chip { margin-top: 32px; } .caso-hero .titular { margin-top: 24px; } .caso-hero .regla { margin: 28px 0 24px; } @media (min-width: 1000px) { .caso-hero .regla { margin: 36px 0 30px; } } .ficha { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); background: var(--papel-3); border: 2px solid var(--tinta); } .ficha__dato { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-bottom: 1px solid var(--linea); } .ficha__dato:nth-child(even) { border-left: 1px solid var(--linea); } .ficha__dato:nth-last-child(-n+2) { border-bottom: 0; } .ficha__rotulo { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tenue); } .ficha__valor { font-size: 16px; font-weight: 600; line-height: 1.35; } @media (min-width: 760px) { .ficha__dato { padding: 14px 20px; } .ficha__valor { font-size: 17px; } } .filas { border-top: 3px solid var(--tinta); } .fila { padding: 32px 0 36px; border-bottom: 1px solid var(--linea-media); } @media (min-width: 1000px) { .fila { padding: 44px 0 48px; } } .fila__cabeza { display: flex; align-items: flex-start; gap: 18px; } .fila__numero { font-family: var(--display); font-weight: 800; font-size: clamp(56px, 10vw, 80px); line-height: 0.8; } .fila__numero--verde { color: var(--verde-ink); } .fila__titulos { display: flex; flex-direction: column; gap: 6px; padding-top: 2px; } .fila__titulo { font-family: var(--display); font-weight: 800; font-size: clamp(34px, 5vw, 44px); line-height: 0.95; } .fila.rejilla { gap: 22px; } @media (min-width: 1000px) { .fila.rejilla { gap: 48px; } } .fila__cuerpo { display: flex; flex-direction: column; gap: 20px; } .fila__texto { font-size: clamp(18px, 2vw, 21px); line-height: 1.5; color: var(--tinta-2); } .cajas { display: grid; gap: 12px; } @media (min-width: 760px) { .cajas { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } } .caja { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; background: var(--papel-3); border: 1.5px dashed var(--linea-fuerte); } .caja__rotulo { font-size: 11px; color: var(--rojo-ink); } .caja__texto { font-size: 17px; font-weight: 600; line-height: 1.35; } .caja--hecha { background: var(--verde-bg); border: 1.5px solid var(--verde-ink); } .caja--hecha .caja__rotulo { color: var(--verde-ink); } .resultados { display: grid; gap: 28px; } @media (min-width: 760px) { .resultados { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .resultado { display: flex; flex-direction: column; gap: 10px; padding-top: 16px; border-top: 3px solid var(--verde-claro); } .resultado__cifra { font-family: var(--display); font-weight: 800; font-size: 44px; line-height: 0.95; } .resultado__texto { font-size: 17px; line-height: 1.5; color: var(--verde-texto); } .extra { margin-top: 40px; } .extra .lista-cuadros { margin-top: 18px; } @media (min-width: 760px) { .extra .lista-cuadros { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; } } .nota-caso { margin-top: 20px; font-size: 15px; color: var(--tenue); } .cta__acciones { display: flex; flex-direction: column; gap: 12px; } .cta__acciones .boton { min-height: 64px; font-size: 18px; } .cta__titulo { color: var(--papel); } .cta__texto { max-width: 560px; font-size: 20px; line-height: 1.5; color: var(--papel-sobre-tinta); } /* ---------- Páginas sueltas: legal, error, gracias ------------------------ */ .pagina-simple { padding: 48px 0 72px; } @media (min-width: 1000px) { .pagina-simple { padding: 80px 0 104px; } } .legal { max-width: 760px; } .legal__titulo { margin-top: 18px; font-family: var(--display); font-weight: 800; font-size: clamp(46px, 9vw, 80px); line-height: 0.9; } .legal__fecha { margin-top: 16px; } .legal .regla { margin: 28px 0 8px; } .legal__cuerpo h2 { margin-top: 36px; font-family: var(--display); font-weight: 800; font-size: clamp(28px, 4.5vw, 36px); line-height: 1; } .legal__cuerpo p, .legal__cuerpo li { margin-top: 14px; font-size: 17px; line-height: 1.65; color: var(--tinta-2); } .legal__cuerpo ul { margin-top: 6px; } .legal__cuerpo li { display: flex; gap: 12px; margin-top: 8px; } .legal__cuerpo li::before { content: ""; flex: none; width: 10px; height: 10px; margin-top: 9px; border: 1.5px solid var(--verde-ink); border-radius: 2px; } .legal__cuerpo strong { color: var(--tinta); } .legal__aviso-idioma { margin-top: 20px; padding: 12px 16px; background: var(--papel-3); border: 1.5px dashed var(--linea-fuerte); font-size: 15px; color: var(--tinta-2); } .legal__volver { margin-top: 40px; } .error-pagina { display: flex; align-items: center; min-height: calc(100vh - 64px - 140px); padding: 56px 0 72px; background-image: var(--plano); background-size: 32px 32px; } .error-pagina__codigo { font-family: var(--display); font-weight: 800; font-size: clamp(120px, 28vw, 240px); line-height: 0.8; color: var(--verde-ink); } .error-pagina__texto { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; } .error-pagina__texto .regla { align-self: stretch; } .gracias { max-width: 880px; } .gracias__sello { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; background: var(--verde-ink); color: #FFFFFF; } .gracias__sello .icono { width: 34px; height: 34px; stroke-width: 2.4; } .gracias .titular-seccion--grande { margin-top: 26px; } .gracias .regla { margin: 28px 0 24px; } .gracias__pasos { display: grid; gap: 16px; margin-top: 36px; } @media (min-width: 760px) { .gracias__pasos { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .gracias__paso { display: flex; flex-direction: column; gap: 8px; padding: 18px; background: var(--papel-3); border: 1.5px solid var(--tinta); } .gracias__paso--hecho { background: var(--verde-bg); border-color: var(--verde-ink); } .gracias__paso .rotulo { font-size: 11px; } .gracias__paso p { font-size: 16px; font-weight: 600; line-height: 1.4; } .gracias .acciones { margin-top: 36px; } /* ---------- Pie ----------------------------------------------------------- */ .pie { background: var(--tinta); color: var(--papel); border-top: 3px solid var(--verde); } .pie__arriba { display: flex; flex-direction: column; gap: 24px; padding: 32px 0 26px; border-bottom: 1px solid rgba(241, 242, 238, 0.16); } .pie__marca { display: flex; align-items: center; gap: 14px; } .pie__marca .marca__simbolo { width: 30px; height: 33px; color: var(--papel); } .pie__nombre { display: block; font-family: var(--mono); font-size: 14px; font-weight: 600; letter-spacing: 0.16em; } .pie__lema { display: block; font-size: 14px; color: var(--tinta-clara); } .pie__casa { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .pie__casa > .rotulo { width: 100%; font-size: 11px; font-weight: 500; color: var(--tinta-clara); } .pie__sitio { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1.5px solid var(--linea-oscura); color: var(--papel); font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; } .pie__sitio:hover { border-color: var(--verde-claro); color: var(--verde-claro); } .pie__abajo { display: flex; flex-direction: column-reverse; gap: 12px; padding: 18px 0 24px; } .pie__copy { font-size: 14px; color: var(--tinta-clara); } .pie__enlaces { display: flex; flex-wrap: wrap; align-items: center; gap: 0 20px; } .pie__enlace { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--papel); font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; } .pie__enlace:hover { color: var(--verde-claro); } .pie__enlace--verde { color: var(--verde-claro); } .pie__enlace--verde:hover { color: #6EE7B7; } .pie__punto { width: 7px; height: 7px; border-radius: 50%; background: var(--verde-claro); } .pie__corte { display: none; width: 1px; height: 18px; background: var(--linea-oscura); } @media (min-width: 1000px) { .pie__arriba { flex-direction: row; align-items: center; justify-content: space-between; padding: 40px 0 32px; } .pie__casa > .rotulo { width: auto; margin-right: 10px; } .pie__abajo { flex-direction: row; align-items: center; justify-content: space-between; min-height: 72px; padding: 0; } .pie__corte { display: block; } } /* ---------- Ajustes de composición --------------------------------------- */ .titular-seccion--casos { max-width: 900px; margin-top: 26px; color: var(--papel); } .rejilla--tras-rotulo { margin-top: 24px; } @media (min-width: 1000px) { .rejilla--tras-rotulo { margin-top: 30px; } } .caso-hero__acciones { margin-top: 26px; } .caso-hero__etiquetas { margin-top: 28px; } .nota-caso--banda { color: var(--verde-texto); } .cta__texto-col { display: flex; flex-direction: column; gap: 18px; } .tarjetas-caso--tras-rotulo { margin-top: 28px; } @media (min-width: 1000px) { .tarjetas-caso--tras-rotulo { margin-top: 36px; } } .boton--contorno-claro:hover .rotulo { color: var(--verde-ink); } .icono--enlace { width: 15px; height: 15px; margin-left: 8px; stroke-width: 2.2; stroke-linecap: square; stroke-linejoin: miter; } .icono--antes { margin-left: 0; margin-right: 8px; } /* ---------- Logos de plataformas y tecnologías --------------------------- Una tinta, como el resto de la casa. El color de la marca solo aparece al pasar por encima de su pieza (--marca viene en línea desde la plantilla). */ .logo { flex: none; width: 20px; height: 20px; } .logo--etiqueta { width: 12px; height: 12px; margin-right: 6px; } .etiqueta--oscura .logo--etiqueta { color: var(--verde-claro); } .esquema__caja .logo { width: 26px; height: 26px; } .esquema__paso--central .esquema__caja .logo { color: var(--verde-hondo); } @media (min-width: 1000px) { .esquema__caja .logo { width: 34px; height: 34px; } } .placa__stack { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 4px 0 0; } .placa__herramienta { display: inline-flex; align-items: center; gap: 7px; font-size: 16px; font-weight: 600; } .placa__herramienta .logo { width: 16px; height: 16px; } .repo__lenguaje .logo--etiqueta, .repo-destacado__rotulo .logo--etiqueta { width: 13px; height: 13px; margin-right: 7px; vertical-align: -2px; display: inline-block; } .stack-grupos { display: grid; gap: 36px; margin-top: 40px; } .stack-grupo { display: grid; gap: 18px; } .stack-grupo__cabeza { display: flex; flex-direction: column; gap: 6px; } .stack-grupo__titulo { font-family: var(--display); font-weight: 800; font-size: 36px; line-height: 1; } .stack-grupo__texto { font-size: 15px; line-height: 1.45; color: var(--tenue); } @media (min-width: 1000px) { .stack-grupos { gap: 0; margin-top: 56px; } .stack-grupo { grid-template-columns: 240px minmax(0, 1fr); gap: 40px; align-items: center; padding: 28px 0; border-top: 1.5px solid var(--tinta); } .stack-grupo:last-child { border-bottom: 1.5px solid var(--tinta); } } .logos { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; } .logo-pieza { display: flex; flex-direction: column; gap: 8px; min-width: 0; } .logo-pieza__caja { display: flex; align-items: center; justify-content: center; height: 72px; background: var(--papel-3); border: 1.5px solid var(--tinta); color: var(--tinta); transition: color 0.2s var(--ease), background-color 0.2s var(--ease); } .logo-pieza__caja .logo { width: 30px; height: 30px; } .logo-pieza__nombre { font-family: var(--mono); font-size: 11.5px; font-weight: 500; line-height: 1.3; text-align: center; color: var(--tinta-2); } .logo-pieza:hover .logo-pieza__caja { color: var(--marca, var(--verde-ink)); background: var(--papel-4); } @media (min-width: 1000px) { .logos { grid-template-columns: repeat(8, minmax(0, 1fr)); } .logo-pieza__caja { height: 84px; } .logo-pieza__caja .logo { width: 34px; height: 34px; } } @media (prefers-reduced-motion: reduce) { .logo-pieza__caja { transition: none; } } /* ---------- Open source: totales, destacados y lista --------------------- */ .totales-os { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 32px 0 0; background: var(--papel-3); border: 2px solid var(--tinta); } .totales-os__dato { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; } .totales-os__dato:nth-child(odd) { border-right: 1px solid var(--linea); } .totales-os__dato:nth-child(-n+2) { border-bottom: 1px solid var(--linea); } .totales-os__dato dd { margin: 0; } .totales-os__cifra { font-family: var(--display); font-weight: 800; font-size: clamp(40px, 8vw, 56px); line-height: 1; } .totales-os__perfil { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--tinta); font-family: var(--mono); font-size: 14px; font-weight: 600; text-decoration: underline; text-decoration-color: var(--verde); text-decoration-thickness: 2px; text-underline-offset: 6px; overflow-wrap: anywhere; } .totales-os__perfil:hover { color: var(--verde-ink); } .totales-os__perfil .logo { width: 22px; height: 22px; } @media (min-width: 760px) { .totales-os { grid-template-columns: repeat(4, minmax(0, 1fr)); } .totales-os__dato { padding: 18px 22px; border-bottom: 0 !important; border-right: 1px solid var(--linea); } .totales-os__dato:last-child { border-right: 0; } .totales-os__dato--marca { justify-content: space-between; } } .repos-destacados { display: grid; gap: 20px; margin-top: 28px; } @media (min-width: 760px) { .repos-destacados { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 760px) and (max-width: 999px) { .repos-destacados > :first-child { grid-column: 1 / -1; } } @media (min-width: 1000px) { .repos-destacados { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 32px; } } .repo-destacado__rotulo { display: flex; align-items: center; } .repo-destacado__nombre a { color: var(--tinta); text-decoration: none; } .repo-destacado__nombre a:hover { color: var(--verde-ink); text-decoration: underline; text-decoration-color: var(--verde); text-decoration-thickness: 2px; } .repo-destacado__pie { display: flex; flex-wrap: wrap; align-items: center; gap: 0 18px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--linea); } .repo-destacado__fecha { margin-left: auto; font-size: 11px; } .repos-destacados + .repos { margin-top: 40px; } .open-source__cierre { margin-top: 32px; } .boton .logo { width: 20px; height: 20px; } /* ---------- Frenos contra bots ------------------------------------------- */ /* El campo trampa: fuera de pantalla, nunca display:none (algunos bots lo detectan y lo saltan). */ .campo-trampa { position: absolute !important; left: -10000px !important; top: auto; width: 1px; height: 1px; overflow: hidden; } .formulario__error { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; background: #F8D9D2; border: 2px solid var(--rojo-ink); color: var(--rojo-ink); font-size: 15px; font-weight: 600; line-height: 1.45; } .formulario__error .icono { width: 18px; height: 18px; margin-top: 2px; } /* La casilla de ALTCHA con la ropa de la casa. */ altcha-widget { display: block; --altcha-max-width: 100%; --altcha-border-width: 1.5px; --altcha-border-radius: 0; --altcha-border-color: var(--tinta); --altcha-color-base: var(--papel-4); --altcha-color-base-content: var(--tinta); --altcha-color-neutral: var(--linea); --altcha-color-neutral-content: var(--tinta-2); --altcha-color-primary: var(--verde-ink); --altcha-color-primary-content: #FFFFFF; --altcha-color-success: var(--verde-ink); --altcha-color-success-content: #FFFFFF; --altcha-color-error: var(--rojo-ink); --altcha-color-error-content: #FFFFFF; --altcha-checkbox-border-color: var(--tinta); --altcha-checkbox-border-width: 1.5px; --altcha-checkbox-border-radius: 3px; --altcha-checkbox-size: 22px; --altcha-spinner-color: var(--verde-ink); --altcha-shadow: none; --altcha-padding: 14px; font-family: var(--sans); font-size: 16px; color: var(--tinta); } .formulario__reto { min-height: 56px; } .formulario__cabeza .rotulo { line-height: 1.3; } .formulario__cabeza .rotulo--verde { white-space: nowrap; } .esta-enviando { opacity: 0.7; cursor: progress; pointer-events: none; }