/* Falber Studio: ajustes sobre el template Onda (onda.css).
   Va sin @layer a propósito: así le gana a todas las capas del template. */

/* ---------- Paleta FALBER ---------- */
:root {
  --color-1: #0b0c0e; /* carbón: bandas oscuras y texto */
  --color-2: #f4f5f6; /* blanco hueso: bandas claras y texto sobre negro */
  --color-3: #bfc2c5; /* platino: acento (reemplaza al violeta) */
  --color-4: #e6e8ea; /* tarjetas claras */
  --color-5: #93969b; /* texto apagado sobre negro */
  --color-6: #45494e; /* texto secundario sobre claro */
  --color-7: #202226; /* grafito bajo las imágenes */
}

:focus-visible { outline-color: #6e7378; }

/* El platino no contrasta con texto claro: los botones llevan texto carbón. */
.m-btn { color: var(--color-1); transition: color .35s; }
@media (hover: hover) {
  .m-btn:hover { color: var(--color-2); }
  .m-icon:hover { color: var(--color-1); }
}

/* ---------- Hero y footer: el avatar no gira (es una cara, no una textura) ---------- */
#hero .hero__img,
#footer .footer__img { animation: none; }

/* ---------- Proyectos: toda la tarjeta es un link ---------- */
#work .case__link { position: absolute; inset: 0; z-index: 3; border-radius: inherit; }
#work .case__link:focus-visible { outline: 3px solid var(--color-3); outline-offset: -6px; }
#work .case__go { display: inline-flex; gap: .4em; margin-top: 4px; font-weight: 600; color: var(--color-3); }
/* Las capturas de sitios tienen textos grandes propios: el degradado arranca más arriba y es más denso para que el título no compita con ellos. */
#work .case__media::after { inset: 25% 0 0; background: linear-gradient(to top, color-mix(in srgb, var(--color-1) 94%, transparent) 30%, transparent); }

/* ---------- Servicios ---------- */
/* El recuadro de la imagen cambia de proporción según la pantalla (≈1,36 a 1,9): las capturas de interfaz se anclan arriba para no perder el título ni los números. */
#capabilities .service__media img.is-top { object-position: 20% top; }

/* ---------- Secciones claras: acentos en carbón para que se vean ---------- */
#method .method__arc { stroke: var(--color-1); }
#method .method__station { background: var(--color-1); }
#method .method__runner { border-color: var(--color-1); }
#method .m-dot, #studio .m-dot, #faq .m-dot { background: var(--color-1); }
#faq .faq__mark::after { background: var(--color-1); }

/* ---------- Sobre mí ---------- */
#studio .studio__values { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 32px; }
#studio .studio__values h3 { font-family: var(--font-1); font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
#studio .studio__values p { margin-top: 6px; color: var(--color-6); font-size: 15px; line-height: 1.45; }
/* Tarjeta de datos: filas etiqueta | valor, iguales en escritorio y celular */
#studio .studio__roles { gap: 16px; padding: clamp(22px, 2vw, 30px); border-radius: var(--radius-1); background: var(--color-1); color: var(--color-2); }
#studio .studio__roles h3 { color: var(--color-3); font-size: clamp(30px, 2.7vw, 42px); font-weight: 800; line-height: 0.95; letter-spacing: -0.03em; text-transform: uppercase; }
#studio .studio__roles h3 .m-dot { background: var(--color-3); }
#studio .studio__facts { display: grid; gap: 12px; }
#studio .studio__facts div { display: grid; grid-template-columns: 6.5em minmax(0, 1fr); gap: 14px; align-items: baseline; }
#studio .studio__facts dt { color: var(--color-5); font-size: 14px; }
#studio .studio__facts dd { margin: 0; font-size: 15px; font-weight: 500; line-height: 1.35; }
#studio .studio__roles .m-link { margin-top: 2px; color: var(--color-2); }
@media (max-width: 640px) { #studio .studio__values { grid-template-columns: 1fr; } }

/* ---------- Contacto: banda platino con texto carbón ---------- */
#contact { color: var(--color-1); }
#contact :focus-visible { outline-color: var(--color-1); }
#contact .contact__title .m-dot { background: var(--color-1); }
#contact .m-btn { background: var(--color-1); color: var(--color-2); }
#contact .m-btn::after { background: #2a2d32; }
#contact .contact__places a { text-decoration: underline; text-underline-offset: 3px; }
#contact .contact__legal { margin-top: 4px; color: var(--color-6); }
#contact .contact__legal a { color: var(--color-1); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Footer: bloque de marca donde estaba el newsletter ---------- */
#footer .footer__brand { color: var(--color-5); max-width: 22rem; }
#footer .footer__brand strong { display: block; margin-bottom: 6px; color: var(--color-2); font-family: var(--font-1); font-size: 22px; letter-spacing: -0.02em; }

/* ---------- Páginas legales (privacidad): lectura simple, sin animaciones ---------- */
.legal { background: var(--color-2); color: var(--color-1); }
.legal .m-dot { background: var(--color-1); }
.legal__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 72ch; margin: 0 auto; padding: 24px 16px; }
.legal__brand { color: var(--color-1); font-family: var(--font-1); font-size: 24px; font-weight: 800; letter-spacing: -0.04em; text-decoration: none; }
.legal__body { max-width: 72ch; margin: 0 auto; padding: 24px 16px 64px; font-size: 17px; line-height: 1.6; }
.legal__title { font-family: var(--font-1); font-size: clamp(38px, 6vw, 64px); font-weight: 800; line-height: 0.95; letter-spacing: -0.045em; }
.legal__updated { margin-top: 12px; color: var(--color-6); font-size: 15px; }
.legal__body h2 { margin-top: 40px; font-family: var(--font-1); font-size: clamp(22px, 2.4vw, 28px); font-weight: 700; letter-spacing: -0.02em; }
.legal__body p, .legal__body ul { margin-top: 12px; }
.legal__body ul { padding-left: 1.2em; }
.legal__body li + li { margin-top: 8px; }
.legal__body a { color: var(--color-1); text-decoration: underline; text-underline-offset: 3px; }
.legal__foot { max-width: 72ch; margin: 0 auto; padding: 24px 16px 40px; border-top: 1px solid var(--color-4); color: var(--color-6); }