/* Arguz — hoja de estilos. * * Paleta de la CONSULTORA, no del producto. Arguz va en azul profundo y * terracota; Moonin en el degradado cyan a violeta. Se mantienen separadas a * propósito: si la marca madre y el producto compartieran firma visual dejarían * de leerse como dos cosas, y aquí se venden servicios, no la plataforma. El * único lugar donde aparece el degradado de Moonin es el filo de 3px de su * bloque. * * El tema se controla con [data-theme] en el y no sólo con * prefers-color-scheme, porque hace falta que el botón pueda imponer una * elección distinta a la del sistema. El script en línea del fija el * atributo antes del primer pintado; sin eso la página parpadea en claro antes * de aplicar el oscuro. */ :root { --ink: #0d1424; --ink-2: #3d4658; --mute: #6b7488; --bg: #ffffff; --bg-alt: #f4f7fd; --card: #ffffff; --field: #f4f7fd; --line: #dfe5f2; --line-soft: #eaeff8; --deep: #16307a; --acc: #2563eb; --acc-wash: #e8effe; --terra: #b4531b; --ok: #127a41; --bad: #b3261e; --sh-sm: 0 1px 3px rgba(16, 26, 51, 0.06); --sh-md: 0 8px 30px rgba(16, 26, 51, 0.08); --sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace; /* Tres radios y sólo tres: 8 para lo pequeño, 12 para tarjetas, 16 para bloques grandes. Un radio distinto por componente se ve improvisado incluso cuando nadie sabe decir por qué. */ --r-sm: 8px; --r-md: 12px; --r-lg: 16px; } /* El oscuro no es el claro invertido. El azul sube de #2563eb a #6f9dff porque el original se apaga sobre fondo oscuro y pierde contraste; el azul profundo pasa a ser un tono claro, ya que como fondo desaparecería; y la profundidad la dan capas elevadas en vez de bordes, que sobre oscuro se ven duros. */ [data-theme='dark'] { --ink: #e9eef8; --ink-2: #b3bdd0; --mute: #8592a8; --bg: #0a1020; --bg-alt: #0e162a; --card: #121b31; --field: #0d1526; --line: #22304d; --line-soft: #1a2440; --deep: #93b4ff; --acc: #6f9dff; --acc-wash: rgba(111, 157, 255, 0.13); --terra: #e08a4f; --ok: #46c37f; --bad: #ff8a80; --sh-sm: 0 1px 3px rgba(0, 0, 0, 0.4); --sh-md: 0 8px 30px rgba(0, 0, 0, 0.45); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .shell { max-width: 1140px; margin: 0 auto; padding-left: calc(28px + env(safe-area-inset-left)); padding-right: calc(28px + env(safe-area-inset-right)); } /* ------------------------------------------------------------------- barra */ header { position: sticky; top: 0; z-index: 30; background: var(--bg); border-bottom: 1px solid var(--line-soft); } @supports (backdrop-filter: blur(1px)) { header { background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: saturate(180%) blur(14px); } } .bar { height: 64px; display: flex; align-items: center; gap: 26px; } /* Marca tipográfica. El logotipo anterior de Arguz está obsoleto y no se usa; el punto en terracota es lo que llevan los documentos de la consultora. */ .brand { font-weight: 600; font-size: 1.25rem; letter-spacing: -0.02em; color: var(--ink); text-decoration: none; white-space: nowrap; } .brand i { color: var(--terra); font-style: normal; } nav.links { display: flex; gap: 24px; margin-left: auto; } nav.links a { color: var(--ink-2); text-decoration: none; font-size: 0.9375rem; font-weight: 500; transition: color 0.16s ease; position: relative; } nav.links a:hover, nav.links a:focus-visible { color: var(--acc); } /* Punto cyan junto a Moonin: dice que ese enlace lleva a otra marca antes de hacer clic. Es el degradado del producto reducido a 5px. */ nav.links a.otra::after { content: ''; position: absolute; top: 50%; right: -10px; width: 5px; height: 5px; border-radius: 50%; background: linear-gradient(135deg, #00a8f0, #6030f0); transform: translateY(-50%); } .tools { display: flex; align-items: center; gap: 10px; } /* Control ES/EN segmentado: una sola pieza con las dos opciones visibles dice qué idiomas hay, cosa que un botón que alterna no dice. */ .lang { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; font-family: var(--mono); font-size: 0.75rem; } .lang button { appearance: none; border: 0; background: transparent; color: var(--mute); padding: 0 9px; height: 34px; cursor: pointer; font: inherit; transition: background 0.16s ease, color 0.16s ease; } .lang button:hover { color: var(--ink); } .lang button[aria-pressed='true'] { background: var(--acc-wash); color: var(--acc); font-weight: 500; } .icon-btn { appearance: none; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: var(--r-sm); background: transparent; color: var(--ink-2); cursor: pointer; transition: border-color 0.16s ease, color 0.16s ease; } .icon-btn:hover { border-color: var(--acc); color: var(--acc); } .icon-btn svg { width: 17px; height: 17px; } /* Un solo botón con los dos iconos: se muestra el que representa el destino, no el estado actual, que es lo que la gente espera de un interruptor. */ [data-theme='dark'] .icon-btn .luna { display: none; } :root:not([data-theme='dark']) .icon-btn .sol { display: none; } .burger { display: none; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px; border-radius: var(--r-sm); font-family: var(--sans); font-size: 0.9375rem; font-weight: 600; text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease, border-color 0.16s ease; } .btn-1 { background: var(--deep); color: #fff; box-shadow: var(--sh-sm); } .btn-1:hover { background: var(--acc); transform: translateY(-1px); box-shadow: var(--sh-md); } [data-theme='dark'] .btn-1 { background: var(--acc); color: #07101f; } [data-theme='dark'] .btn-1:hover { background: var(--deep); } .btn-2 { background: transparent; color: var(--acc); border-color: var(--line); } .btn-2:hover { border-color: var(--acc); transform: translateY(-1px); } .btn:focus-visible, .icon-btn:focus-visible, .lang button:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; } /* ---------------------------------------------------------------- secciones */ section { padding: 86px 0; } section.alt { background: var(--bg-alt); } h1, h2, h3 { letter-spacing: -0.03em; line-height: 1.12; margin: 0; } h1 { font-size: clamp(2.1rem, 5.2vw, 3.4rem); font-weight: 700; max-width: 21ch; } h2 { font-size: clamp(1.6rem, 3.4vw, 2.15rem); font-weight: 700; max-width: 32ch; } /* Etiqueta de categoría sobre el titular, con una raya. Sitúa de qué se trata antes de que el titular tenga que hacerlo, y evita que el hero arranque en frío. Es lo único ALL-CAPS que se permite por sección. */ .eyebrow { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.09em; color: var(--acc); margin: 0 0 18px; } .eyebrow::before { content: ''; width: 16px; height: 1.5px; background: currentColor; flex: 0 0 16px; } .lede { margin: 20px 0 0; font-size: 1.0625rem; color: var(--ink-2); max-width: 62ch; } .note { margin: 16px 0 0; font-size: 0.8125rem; color: var(--mute); max-width: 78ch; } .acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; } /* -------------------------------------------------------------------- hero */ .hero { padding: 74px 0 70px; } .hero p.sub { margin: 22px 0 0; font-size: 1.1875rem; color: var(--ink-2); max-width: 54ch; } /* Tira de datos sin caja: sólo una raya arriba y separadores verticales. Tres tarjetas con borde y sombra pesaban más que el dato que contenían. */ .strip { margin-top: 56px; padding-top: 26px; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); } .strip > div { padding: 0 26px; border-left: 1px solid var(--line-soft); } .strip > div:first-child { border-left: 0; padding-left: 0; } /* El rótulo encima del dato dice por qué el dato importa. Sin él, "15+" es un número sin pregunta. */ .strip small { display: block; font-family: var(--mono); font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.09em; color: var(--mute); margin-bottom: 7px; } .strip b { display: block; font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); font-variant-numeric: tabular-nums; } /* ---------------------------------------------------------------- problema */ .figs { margin-top: 42px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; } /* Terracota sólo aquí: es el color de la alarma, el del costo y el desperdicio. Usarlo decorativo en otra sección le quitaría el significado. */ .fig b { display: block; font-size: clamp(1.9rem, 3.6vw, 2.4rem); font-weight: 700; letter-spacing: -0.04em; color: var(--terra); line-height: 1; font-variant-numeric: tabular-nums; } .fig p { margin: 12px 0 0; font-size: 0.9375rem; color: var(--ink-2); } /* --------------------------------------------------------------- servicios */ /* Los doce servicios NO van como doce tarjetas idénticas. Una grilla de tarjetas iguales es la marca de agua del diseño hecho a plantilla y aplana la jerarquía: los doce parecerían pesar lo mismo. Van en tres familias con el nombre destacado y la descripción como texto corrido, que es cómo se lee una carta de capacidades. */ .group { margin-top: 46px; } .group > h3 { font-family: var(--mono); font-size: 0.6875rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.09em; color: var(--mute); padding-bottom: 14px; border-bottom: 1px solid var(--line); } .svcs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 46px; margin-top: 26px; } .svc h4 { margin: 0; font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); } .svc p { margin: 8px 0 0; font-size: 0.9375rem; color: var(--ink-2); } /* -------------------------------------------------------------- resultados */ .res { margin-top: 42px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } .res > div { border-radius: var(--r-md); background: var(--acc-wash); padding: 28px 26px; } .res b { display: block; font-size: clamp(2.1rem, 4vw, 2.6rem); font-weight: 700; letter-spacing: -0.04em; color: var(--deep); line-height: 1; font-variant-numeric: tabular-nums; } /* «hasta» más chico y liviano que la cifra: al mismo tamaño competía con el número, que es lo único que el ojo debe capturar. El matiz importa para ser honesto, no para ser lo primero que se lee. */ .res b em { display: block; font-family: var(--mono); font-size: 0.6875rem; font-weight: 400; font-style: normal; text-transform: uppercase; letter-spacing: 0.09em; color: var(--mute); margin-bottom: 8px; } .res p { margin: 12px 0 0; font-size: 0.9375rem; color: var(--ink-2); } /* ------------------------------------------------------------------ Moonin */ .product { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); padding: 40px 38px; position: relative; overflow: hidden; box-shadow: var(--sh-sm); } /* El único degradado de Moonin en toda la página, y sólo 3px. Suficiente para que se lea como otra marca sin que la página cambie de identidad. */ .product::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, #00a8f0, #6030f0); } .plist { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 32px; } .plist li { position: relative; padding-left: 24px; font-size: 0.9375rem; color: var(--ink-2); } /* Marca de verificación con dos bordes rotados: el carácter ✓ se alinea distinto en cada fuente y en cada sistema. */ .plist li::before { content: ''; position: absolute; left: 2px; top: 7px; width: 5px; height: 9px; border-right: 2px solid var(--acc); border-bottom: 2px solid var(--acc); transform: rotate(42deg); } /* ------------------------------------------------------------------- stack */ .stack { margin-top: 36px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; } .stack h3 { font-family: var(--mono); font-size: 0.6875rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.09em; color: var(--mute); } .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; } .chips span { font-family: var(--mono); font-size: 0.8125rem; padding: 5px 10px; border-radius: var(--r-sm); background: var(--field); border: 1px solid var(--line-soft); color: var(--ink-2); } /* --------------------------------------------------------- preguntas (GEO) */ /* Las preguntas existen por tres razones: una persona que compara consultoras busca exactamente esto, Google las lee como FAQPage, y son el formato que un modelo de lenguaje puede citar sin interpretar. Van visibles y no sólo en los datos estructurados: contenido que existe para el robot y no para la persona es encubrimiento, y Google lo penaliza con razón. Una columna y no dos: con dos, la fila toma la altura del elemento abierto y la vecina cerrada se estira dejando una caja vacía. */ .faq { margin-top: 32px; max-width: 78ch; display: flex; flex-direction: column; gap: 10px; } .qa { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); padding: 0 18px; transition: border-color 0.18s ease, box-shadow 0.18s ease; } .qa:hover, .qa[open] { border-color: var(--acc); } .qa[open] { box-shadow: var(--sh-sm); } .qa > summary { /* Hacen falta los dos: Safari sigue pintando el triángulo con su marcador propietario aunque list-style ya esté en none. */ list-style: none; cursor: pointer; padding: 16px 30px 16px 0; font-size: 0.9375rem; font-weight: 500; color: var(--ink); position: relative; } .qa > summary::-webkit-details-marker { display: none; } /* Dos trazos en vez de un carácter +: el vertical desaparece al abrirse y queda un menos. Un + rotado se ve torcido en varias fuentes. */ .qa > summary::before, .qa > summary::after { content: ''; position: absolute; right: 2px; top: 50%; background: var(--acc); transition: opacity 0.18s ease, transform 0.18s ease; } .qa > summary::before { width: 11px; height: 1.5px; transform: translateY(-50%); } .qa > summary::after { width: 1.5px; height: 11px; right: 6.75px; transform: translateY(-50%); } .qa[open] > summary::after { opacity: 0; transform: translateY(-50%) rotate(90deg); } .qa > summary:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; border-radius: 4px; } .qa > p { margin: 0; padding: 0 0 18px; font-size: 0.9375rem; line-height: 1.65; color: var(--ink-2); max-width: 66ch; } /* ---------------------------------------------------------------- contacto */ .contact-grid { margin-top: 40px; display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 44px; align-items: start; } .channel { margin-top: 30px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg-alt); padding: 20px 22px; } [data-theme='dark'] .channel { background: var(--card); } .channel small { display: block; font-family: var(--mono); font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.09em; color: var(--mute); margin-bottom: 10px; } .channel .row { display: flex; align-items: center; gap: 14px; } .channel a.mail { font-family: var(--mono); font-size: 1rem; color: var(--ink); text-decoration: none; font-weight: 500; } .channel a.mail:hover { color: var(--acc); } .copy { appearance: none; margin-left: auto; border: 1px solid var(--line); border-radius: var(--r-sm); background: transparent; color: var(--mute); font-family: var(--mono); font-size: 0.6875rem; padding: 6px 10px; cursor: pointer; white-space: nowrap; transition: color 0.16s ease, border-color 0.16s ease; } .copy:hover { color: var(--acc); border-color: var(--acc); } .channel .where { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--line-soft); font-size: 0.8125rem; color: var(--mute); } .nda { margin-top: 26px; font-family: var(--mono); font-size: 0.75rem; line-height: 1.7; color: var(--mute); } /* --------------------------------------------------------------- el formulario */ form.lead { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); padding: 30px 30px 26px; box-shadow: var(--sh-md); } .fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; } .f-wide { grid-column: 1 / -1; } .fields label, .svc-pick > span { display: block; font-size: 0.8125rem; font-weight: 500; color: var(--ink-2); margin-bottom: 6px; } .req { color: var(--acc); } .fields input, .fields select, .fields textarea { width: 100%; font-family: var(--sans); font-size: 0.9375rem; color: var(--ink); background: var(--field); border: 1px solid transparent; border-radius: var(--r-sm); padding: 11px 13px; min-height: 44px; transition: border-color 0.16s ease, background 0.16s ease; } .fields textarea { min-height: 96px; resize: vertical; line-height: 1.6; } .fields input::placeholder, .fields textarea::placeholder { color: var(--mute); } .fields input:focus, .fields select:focus, .fields textarea:focus { outline: none; border-color: var(--acc); background: var(--bg); } /* El campo con error se marca en el borde y con un mensaje, nunca sólo con color: quien no distingue rojo de gris se quedaría sin saber qué corregir. */ .fields input[aria-invalid='true'], .fields select[aria-invalid='true'] { border-color: var(--bad); } .err { display: none; margin: 6px 0 0; font-size: 0.8125rem; color: var(--bad); } .err.on { display: block; } .svc-pick { grid-column: 1 / -1; margin-top: 4px; } .checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 20px; } .checks label { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 0.9375rem; font-weight: 400; color: var(--ink-2); cursor: pointer; min-height: 32px; } .checks input { width: 17px; height: 17px; min-height: 0; accent-color: var(--acc); cursor: pointer; flex: 0 0 17px; } form.lead .btn-1 { width: 100%; margin-top: 22px; min-height: 50px; font-size: 1rem; } form.lead .btn-1[disabled] { opacity: 0.6; cursor: progress; } .fine { margin: 14px 0 0; font-family: var(--mono); font-size: 0.6875rem; color: var(--mute); text-align: center; } .sent { text-align: center; padding: 22px 6px; } .sent .tick { width: 44px; height: 44px; margin: 0 auto 16px; border-radius: 50%; background: var(--acc-wash); display: grid; place-items: center; } .sent .tick::after { content: ''; width: 8px; height: 15px; border-right: 2.5px solid var(--ok); border-bottom: 2.5px solid var(--ok); transform: rotate(42deg) translateY(-2px); } .sent h3 { font-size: 1.125rem; font-weight: 600; } .sent p { margin: 10px 0 0; font-size: 0.9375rem; color: var(--ink-2); } /* --------------------------------------------------------------------- pie */ footer { border-top: 1px solid var(--line-soft); padding: 34px 0; font-size: 0.875rem; color: var(--mute); } .foot { display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: center; } .foot a { color: var(--ink-2); text-decoration: none; } .foot a:hover { color: var(--acc); } .foot .sep { margin-left: auto; } /* -------------------------------------------------------------- responsivo */ /* Cuatro cortes y no uno, porque cada uno resuelve un problema distinto: en 920 no caben los enlaces, en 860 el formulario a dos columnas aprieta, en 720 las grillas de tres y de dos pasan a una, y en 420 las cifras grandes se partían en dos líneas. */ @media (max-width: 920px) { nav.links { display: none; } .burger { display: inline-flex; margin-left: auto; } .tools { gap: 8px; } .bar .btn-1.cta { display: none; } section { padding: 66px 0; } } @media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; gap: 30px; } } @media (max-width: 720px) { .shell { padding-left: calc(20px + env(safe-area-inset-left)); padding-right: calc(20px + env(safe-area-inset-right)); } .strip { grid-template-columns: 1fr; gap: 22px; } .strip > div { padding: 0; border-left: 0; } .figs, .res, .svcs, .stack, .plist, .fields, .checks { grid-template-columns: 1fr; } .figs { gap: 28px; } .product { padding: 30px 22px; } form.lead { padding: 24px 20px 22px; } } @media (max-width: 420px) { .hero { padding: 54px 0 56px; } .qa { padding: 0 15px; } .qa > summary { padding: 15px 28px 15px 0; } } /* Área de toque de 44px sólo en dedos: en escritorio infla los enlaces. */ @media (pointer: coarse) { nav.links a, .foot a, .checks label { min-height: 44px; } } /* ------------------------------------------------------------- menú móvil */ .panel { position: fixed; inset: 64px 0 auto 0; z-index: 29; background: var(--bg); border-bottom: 1px solid var(--line); padding: 14px calc(20px + env(safe-area-inset-left)) 22px; display: none; box-shadow: var(--sh-md); } .panel.on { display: block; } .panel a { display: flex; align-items: center; min-height: 50px; color: var(--ink); text-decoration: none; font-size: 1.0625rem; font-weight: 500; border-bottom: 1px solid var(--line-soft); } .panel a:last-of-type { border-bottom: 0; } .panel .btn { width: 100%; margin-top: 14px; } .veil { position: fixed; inset: 0; z-index: 28; background: rgba(13, 20, 36, 0.42); display: none; } .veil.on { display: block; } body.locked { overflow: hidden; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; animation: none !important; } } /* ================= quienes somos (version discreta) ================= */ /* Una fila por socio en vez de tres tarjetas con biografia. El criterio de Google pide nombre real, cargo y enlace a un tercero verificable; eso cabe en una linea y no necesita ocupar una pantalla. Sin borde ni sombra: la seccion informa, no vende. */ .team-h { font-size: 1.375rem; font-weight: 600; letter-spacing: -0.02em; margin: 0; } .team-lede { margin: 10px 0 0; font-size: 0.9375rem; color: var(--ink-2); max-width: 66ch; } .team { list-style: none; margin: 26px 0 0; padding: 0; max-width: 62ch; border-top: 1px solid var(--line); } .team li { display: flex; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line-soft); } .team img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex: 0 0 52px; } .team li > div { min-width: 0; } .team b { display: block; font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); } .team span { display: block; margin-top: 2px; font-family: var(--mono); font-size: 0.75rem; color: var(--mute); } /* El enlace es lo unico que el criterio verifica, asi que se ve pero no grita. 44px de alto de toque en dedos, que es lo minimo utilizable. */ .team a { margin-left: auto; display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; font-size: 0.8125rem; font-weight: 500; color: var(--acc); text-decoration: none; white-space: nowrap; } .team a:hover { text-decoration: underline; } /* ================= captura del producto ================= */ /* La imagen lleva el ancho completo del bloque y una relacion fija, para que no salte el layout mientras carga: width y height van en el atributo del . */ .shot { margin: 28px 0 0; } .shot img { display: block; width: 100%; height: auto; border-radius: var(--r-md); border: 1px solid var(--line); /* La captura es de tema oscuro y el sitio puede estar en claro: el borde y la sombra la separan del fondo en los dos casos. */ box-shadow: var(--sh-md); } .shot figcaption { margin-top: 12px; font-size: 0.8125rem; color: var(--mute); } @media (max-width: 860px) { } @media (max-width: 620px) { .team span { font-size: 0.6875rem; } }