/* ==========================================================================
   SWD-2026 · FRONTEND CSS
   ==========================================================================
   Este archivo contiene los estilos del frontend público que NO pertenecen
   a la base global del proyecto y que tampoco son exclusivos del hero.

   Aquí van:

   1. Header público y navegación principal
   2. Footer público e idioma
   3. Vista interna About
   4. Estados interactivos del frontend
   5. Responsive del frontend público

   Aquí NO deben ir:
   - Tokens globales
   - Reset
   - Botones base
   - Hero / home
   - Admin
   - Errores

   ========================================================================== */

/* ==========================================================================
   1. HEADER PÚBLICO Y NAVEGACIÓN PRINCIPAL
   --------------------------------------------------------------------------
   Estilos del header fijo/superpuesto, logo, botón hamburguesa y menú.
   Incluye tanto el comportamiento general como el caso especial de la home,
   donde el header se superpone al hero.
   ========================================================================== */

.site-header,
.site-footer {
  border-color: var(--color-border);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  backdrop-filter: blur(1rem);
  background-color: rgba(10, 10, 10, 0.82);
  border-bottom: 0.1rem solid var(--color-border);
}

.page--home .site-header {
  position: fixed;
  inset: 0 0 auto 0;
  width: 100%;
  background-color: transparent;
  border-bottom: 0;
  backdrop-filter: none;
}

.site-header__inner,
.site-footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md) 0;
}

.site-header__inner {
  position: relative;
  min-height: var(--header-height-mobile);
  flex-wrap: nowrap;
}

.site-logo,
.menu-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 5.6rem;
  height: 5.6rem;
  padding: 0;
  overflow: hidden;
  border-radius: 50%;
  flex-shrink: 0;
  
}

.page--home .site-logo,
.page--home .menu-toggle {
  background-color: rgba(10, 10, 10, 0.58);
  backdrop-filter: blur(0.8rem);
}

.site-logo__image,
.site-logo__svg-wrap,
.site-logo__fallback,
.menu-toggle__svg-wrap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity var(--transition-slow);
}

.site-logo__image--hover,
.site-logo__svg-wrap--hover,
.site-logo__fallback--hover,
.menu-toggle__svg-wrap--hover {
  opacity: 0;
}

.site-logo__svg-wrap,
.site-logo__fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.6rem;
}

.site-logo__svg-wrap svg,
.brand-logo-svg,
.menu-toggle__svg-wrap svg,
.brand-menu-toggle-svg {
  display: block;
  width: 100%;
  height: 100%;
}

.site-logo__svg-wrap--default .logo-swd__dark {
  fill: var(--color-black);
  stroke: none;
}

.site-logo__svg-wrap--default .logo-swd__light {
  fill: var(--color-accent);
  stroke: none;
}

.site-logo__svg-wrap--default .logo-swd__accent {
  fill: var(--color-white);
  stroke: none;
}

.site-logo__svg-wrap--hover .logo-swd__dark {
  fill: var(--color-black);
  stroke: none;
}

.site-logo__svg-wrap--hover .logo-swd__light {
  fill: var(--color-white);
  stroke: none;
}

.site-logo__svg-wrap--hover .logo-swd__accent {
  fill: var(--color-accent);
  stroke: none;
}


.site-logo__fallback,
.menu-toggle__svg-wrap {
  padding: 0;
}

.menu-toggle__artwork {
  position: absolute;
  inset: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: rotate(0deg);
  transition: transform var(--transition-slow);
}

.menu-toggle__svg-wrap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.menu-toggle__svg-wrap--default .menu-toggle-svg__dark {
  fill: var(--color-black);
  stroke: none;
}

.menu-toggle__svg-wrap--default .menu-toggle-svg__accent {
  fill: var(--color-accent);
  stroke: none;
}

.menu-toggle__svg-wrap--default .menu-toggle-svg__light {
  fill: var(--color-white);
  stroke: none;
}

.menu-toggle__svg-wrap--hover .menu-toggle-svg__dark {
  fill: var(--color-black);
  stroke: none;
}

.menu-toggle__svg-wrap--hover .menu-toggle-svg__accent {
  fill: var(--color-white);
  stroke: none;
}

.menu-toggle__svg-wrap--hover .menu-toggle-svg__light {
  fill: var(--color-accent);
  stroke: none;
}

.brand-fallback {
  position: absolute;
  inset: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border: 0.32rem solid var(--color-accent);
  border-radius: 50%;
}

.brand-fallback__shell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: 0.32rem solid var(--color-accent);
  border-radius: 50%;
  background-color: var(--color-black);
}

.brand-fallback__content {
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0.04em;
  transform: translateX(0.08em);
  line-height: 1;
  white-space: nowrap;
}

.brand-fallback__letter,
.brand-fallback__dot {
  display: inline-block;
  font-family: "Kumbh Sans", Arial, Helvetica, sans-serif;
  font-weight: 700;
  line-height: 1;
}

.brand-fallback__letter {
  font-size: 3.4rem;
  color: var(--color-white);
}

.brand-fallback__dot {
  font-size: 2rem;
  color: var(--color-white);
  transform: translateY(-0.62em);
}
.brand-fallback--hover  {
  border-color: var(--color-white);
}
.brand-fallback--hover .brand-fallback__shell {
  border-color: var(--color-white);
}

.brand-fallback--hover .brand-fallback__letter,
.brand-fallback--hover .brand-fallback__dot {
  color: var(--color-accent);
}

.menu-toggle[aria-expanded="true"] .menu-toggle__artwork {
  transform: rotate(90deg);
}

.menu-toggle[aria-expanded="true"] .menu-toggle__svg-wrap--default {
  opacity: 0;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__svg-wrap--hover {
  opacity: 1;
}

.menu-toggle {
  z-index: 71;
  border-color: rgba(242, 194, 48, 0.45);
  background-color: rgba(255, 255, 255, 0.01);
}

.site-nav {
  position: absolute;
  top: calc(100% + var(--space-xs));
  left: 0;
  right: 0;
  z-index: 70;
  padding: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-0.8rem);
  transition:
    opacity var(--transition-base),
    transform var(--transition-base),
    visibility var(--transition-base);
}

.site-nav__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  max-height: calc(100svh - var(--header-height-mobile) - (var(--space-md) * 2));
  padding: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable both-edges;
  border: 0;
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
  box-shadow: none;
  scrollbar-width: auto;
  scrollbar-color: var(--color-accent) rgba(10, 10, 10, 0.46);
}

.site-nav__list::-webkit-scrollbar {
  width: var(--mobile-menu-scrollbar-size);
  height: var(--mobile-menu-scrollbar-size);
}

.site-nav__list::-webkit-scrollbar-track {
  background: rgba(10, 10, 10, 0.36);
  border-radius: 999rem;
  box-shadow: inset 0 0 0 0.1rem rgba(255, 255, 255, 0.05);
}

.site-nav__list::-webkit-scrollbar-thumb {
  background: var(--color-accent);
  border-radius: 999rem;
  border: 0.8rem solid rgba(10, 10, 10, 0.36);
  background-clip: padding-box;
}

.site-nav__list::-webkit-scrollbar-thumb:hover {
  background: var(--color-accent-soft);
  background-clip: padding-box;
}

.site-nav__link {
  display: block;
  width: 100%;
  padding: 1.3rem 1.6rem;
  border: 0.1rem solid var(--color-accent);
  border-radius: var(--radius-pill);
  font-size: 1.6rem;
  font-weight: var(--font-weight-medium);
  line-height: 1.2;
  color: var(--color-off-white);
  background-color: rgba(10, 10, 10, 1);
  backdrop-filter: blur(0.8rem);
}

.site-nav.site-nav--scrollable .site-nav__list {
  gap: 0.4rem;
  padding-right: calc(var(--mobile-menu-scrollbar-size) + 0.6rem);
}

.site-nav.site-nav--scrollable .site-nav__link {
  padding: 0.9rem 1.1rem;
  font-size: 1.3rem;
  background-color: rgba(10, 10, 10, 0.34);
}

.js-enabled .site-nav.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

/* ==========================================================================
   2. FOOTER PÚBLICO E IDIOMA
   --------------------------------------------------------------------------
   Estilos del footer del frontend, navegación secundaria y selector de
   idioma visible en las vistas internas.
   ========================================================================== */

.site-footer {
  margin-top: auto;
  border-top: 0.1rem solid var(--color-border);
  background-color: rgba(0, 0, 0, 0.35);
}

.site-footer__inner {
  flex-direction: column;
  align-items: flex-start;
}

.site-footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}


.site-footer__brand-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 5.2rem;
  height: 5.2rem;
  padding: 0;
  overflow: hidden;
  border-radius: 50%;
  flex-shrink: 0;
}

.site-footer__brand-copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.site-footer__text {
  font-size: var(--font-size-sm);
  color: var(--color-gray-300);
}

.site-footer__meta {
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
}

.site-footer__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-md);
  width: 100%;
}

.site-footer__nav {
  width: 100%;
}

.site-footer__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
}

.site-footer__link {
  font-size: var(--font-size-sm);
  color: var(--color-off-white);
}

.site-footer__language {
  width: 100%;
  max-width: 9.6rem;
}

.site-footer__language-select {
  width: 100%;
  min-height: 4.4rem;
  padding: 0 var(--space-xl) 0 var(--space-md);
  border: 0.1rem solid var(--color-border);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  color: var(--color-off-white);
  background-color: rgba(255, 255, 255, 0.02);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--color-accent) 50%),
    linear-gradient(135deg, var(--color-accent) 50%, transparent 50%);
  background-position:
    calc(100% - 2rem) calc(50% - 0.2rem),
    calc(100% - 1.4rem) calc(50% - 0.2rem);
  background-size:
    0.6rem 0.6rem,
    0.6rem 0.6rem;
  background-repeat: no-repeat;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  transition:
    color var(--transition-base),
    border-color var(--transition-base),
    background-color var(--transition-base),
    box-shadow var(--transition-base);
}

.site-footer__language-select option {
  color: var(--color-white);
  background-color: var(--color-black-soft);
}

/* ==========================================================================
   3. VISTA INTERNA ABOUT
   --------------------------------------------------------------------------
   Maquetación específica de la vista "About me": grid principal, bloque de
   texto, zona de acciones y figura decorativa/fotografía.
   ========================================================================== */

.about-view {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  padding: 2rem;
  padding-top: 0;
  padding-bottom: 0;
}

.about-view__container {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  width: 100%;
  min-height: 100%;
  justify-content: flex-start;
}

.about-view__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr);
  grid-template-areas:
    "header"
    "copy"
    "side";
  align-content: stretch;
  gap: var(--space-2xl);
  width: min(100%, 108rem);
  height: 100%;
  min-height: 100%;
  padding-top: 0;
  margin: 0 auto;
  flex: 1 1 auto;
}

.about-view__header {
  grid-area: header;
  transform: translateY(1.5rem);
}

.about-view__title {
  margin-bottom: 0;
  font-size: clamp(3rem, 9vw, 4.8rem);
  line-height: var(--line-height-tight);
  text-align: left;
  text-wrap: balance;
}

.about-view__copy {
  grid-area: copy;
  display: grid;
  gap: var(--space-md);
  align-content: start;
  text-align: left;
  transform: translateY(1.5rem);
}

.about-view__text {
  max-width: 52ch;
  color: var(--color-gray-100);
}

.about-view__side {
  grid-area: side;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  gap: var(--space-lg);
  min-height: 100%;
  height: 100%;
  justify-items: stretch;
  align-self: stretch;
}

.about-view__actions {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  transform: translateY(1rem);
}

.about-view__button {
  width: auto;
  margin: 0 auto;
}

.about-view__media {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  min-height: 0;
  height: 100%;
  align-self: stretch;
}

.about-view__image-wrap {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  isolation: isolate;
  align-self: end;
}

.about-view__image-wrap::after {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: 0;
  z-index: 0;
  height: 1.4rem;
}

.about-view__image {
  position: relative;
  z-index: 1;
  width: 80%;
  max-width: 80%;
  height: auto;
  margin: 0 auto;
  object-fit: contain;
  object-position: center bottom;
  transition:
    opacity var(--transition-slow),
    filter var(--transition-slow);
}

.about-view__image--default {
  opacity: 1;
}

.about-view__image--hover {
  position: absolute;
  inset: auto auto 0 50%;
  width: 80%;
  max-width: 80%;
  opacity: 0;
  transform: translateX(-50%);
}

.about-view__image-wrap:hover .about-view__image--default,
.about-view__image-wrap:focus-within .about-view__image--default {
  opacity: 0;
}

.about-view__image-wrap:hover .about-view__image--hover,
.about-view__image-wrap:focus-within .about-view__image--hover {
  opacity: 1;
}

/* ==========================================================================
   4. ESTADOS INTERACTIVOS DEL FRONTEND
   --------------------------------------------------------------------------
   Hover y focus de elementos interactivos exclusivos del frontend público:
   logo, botón hamburguesa, links del menú, links del footer y selector.
   ========================================================================== */

@media (hover: hover) and (pointer: fine) {

  .site-logo:hover .site-logo__image--default,
  .site-logo:focus-visible .site-logo__image--default,
  .site-logo:hover .site-logo__svg-wrap--default,
  .site-logo:focus-visible .site-logo__svg-wrap--default,
  .site-logo:hover .site-logo__fallback--default,
  .site-logo:focus-visible .site-logo__fallback--default,
  .site-footer__brand-link:hover .site-logo__image--default,
  .site-footer__brand-link:focus-visible .site-logo__image--default,
  .site-footer__brand-link:hover .site-logo__svg-wrap--default,
  .site-footer__brand-link:focus-visible .site-logo__svg-wrap--default,
  .site-footer__brand-link:hover .site-logo__fallback--default,
  .site-footer__brand-link:focus-visible .site-logo__fallback--default,
  .menu-toggle:hover .menu-toggle__svg-wrap--default,
  .menu-toggle:focus-visible .menu-toggle__svg-wrap--default {
    opacity: 0;
  }

  .site-logo:hover .site-logo__image--hover,
  .site-logo:focus-visible .site-logo__image--hover,
  .site-logo:hover .site-logo__svg-wrap--hover,
  .site-logo:focus-visible .site-logo__svg-wrap--hover,
  .site-logo:hover .site-logo__fallback--hover,
  .site-logo:focus-visible .site-logo__fallback--hover,
  .site-footer__brand-link:hover .site-logo__image--hover,
  .site-footer__brand-link:focus-visible .site-logo__image--hover,
  .site-footer__brand-link:hover .site-logo__svg-wrap--hover,
  .site-footer__brand-link:focus-visible .site-logo__svg-wrap--hover,
  .site-footer__brand-link:hover .site-logo__fallback--hover,
  .site-footer__brand-link:focus-visible .site-logo__fallback--hover,
  .menu-toggle:hover .menu-toggle__svg-wrap--hover,
  .menu-toggle:focus-visible .menu-toggle__svg-wrap--hover,
  .menu-toggle[aria-expanded="true"] .menu-toggle__svg-wrap--hover {
    opacity: 1;
  }

  .site-nav__link:hover,
  .site-nav__link:focus-visible,
  .site-footer__link:hover,
  .site-footer__link:focus-visible,
  .site-footer__language-select:hover,
  .site-footer__language-select:focus-visible {
    color: var(--color-accent);
    border-color: rgba(242, 194, 48, 0.45);
  }

  .contact-view__social-link:hover .contact-social-icon__layer--default,
  .contact-view__social-link:focus-visible .contact-social-icon__layer--default,
  .site-footer__social-link:hover .contact-social-icon__layer--default,
  .site-footer__social-link:focus-visible .contact-social-icon__layer--default {
    opacity: 0;
    transform: scale(0.96);
  }

  .contact-view__social-link:hover .contact-social-icon__layer--hover,
  .contact-view__social-link:focus-visible .contact-social-icon__layer--hover,
  .site-footer__social-link:hover .contact-social-icon__layer--hover,
  .site-footer__social-link:focus-visible .contact-social-icon__layer--hover {
    opacity: 1;
    transform: scale(1);
  }

  .contact-view__social-link:hover .contact-view__social-icon,
  .contact-view__social-link:focus-visible .contact-view__social-icon,
  .site-footer__social-link:hover .site-footer__social-icon,
  .site-footer__social-link:focus-visible .site-footer__social-icon {
    border-color: rgba(242, 194, 48, 0.45);
    box-shadow: 0 0 0 0.1rem rgba(242, 194, 48, 0.16);
  }
}

/* ==========================================================================
   5. RESPONSIVE DEL FRONTEND PÚBLICO
   --------------------------------------------------------------------------
   Ajustes para tablet y escritorio del header, footer, navegación y About.
   ========================================================================== */

@media (min-width: 768px) {

  .site-header,
  .page--home .site-header {
    background-color: rgba(0, 0, 0, 0.5);
    border-bottom: 0.1rem solid var(--color-border);
    backdrop-filter: blur(1rem);
  }

  .site-header__inner {
    min-height: auto;
  }

  .menu-toggle {
    display: none;
  }

  .site-nav {
    position: static;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    width: auto;
    padding: 0;
  }

  .site-nav__list {
    flex-direction: row;
    align-items: center;
    gap: var(--space-lg);
    max-height: none;
    padding: 0;
    overflow: visible;
    scrollbar-width: thin;
  }

  .site-nav__list::-webkit-scrollbar {
    width: 0.8rem;
    height: 0.8rem;
  }

  .site-nav__link,
  .site-nav.site-nav--scrollable .site-nav__link {
    width: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    font-size: 1.7rem;
    font-weight: var(--font-weight-medium);
    background: transparent;
    backdrop-filter: none;
  }

  .site-footer__inner {
    flex-direction: row;
    align-items: center;
  }

  .site-footer__brand {
    flex-direction: row;
    align-items: center;
    gap: var(--space-md);
  }

  .site-footer__actions {
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    width: auto;
    margin-left: auto;
  }

  .site-footer__nav,
  .site-footer__language {
    width: auto;
  }

  .about-view__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas:
      "header header"
      "side copy";
    align-items: stretch;
    gap: var(--space-xl) var(--space-2xl);
    min-height: 100%;
    height: 100%;
  }

  .about-view__header {
    align-self: start;
  }

  .about-view__copy {
    align-self: start;
    padding-bottom: var(--space-lg);
  }

  .about-view__side {
    align-content: stretch;
    justify-items: stretch;
    height: 100%;
  }

  .about-view__media {
    justify-content: center;
    align-items: flex-end;
    min-height: 0;
    height: 100%;
    width: 100%;
  }

  .about-view__image-wrap {
    width: 100%;
    max-width: none;
    margin: 0;
  }

  .skills-view__grid {
    gap: clamp(2.8rem, 4vw, 4rem);
  }

  .skills-view__intro {
    max-width: 68ch;
  }

  .skills-cloud__list {
    gap: 1.4rem 1.6rem;
  }

  .skills-detail {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: clamp(2rem, 3vw, 3rem);
    padding: clamp(2.2rem, 3.6vw, 3rem);
  }

  .skills-detail__media {
    justify-content: center;
  }

  .skills-detail__icon {
    width: 10rem;
    height: 10rem;
    border-radius: 2.6rem;
  }

  .skills-detail__meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .skills-detail__text {
    min-height: 4.8rem;
  }

}

@media (min-width: 1024px) {
  .about-view__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .about-view__image-wrap {
    width: 100%;
    max-width: none;
  }
}

@media (min-width: 768px) and (max-width: 1023.98px) and (orientation: portrait) {

  .about-view__image,
  .about-view__image--hover {
    width: 100%;
    max-width: 100%;
  }

  .about-view__grid {
    gap: 20rem 1rem;
  }
}

/* ==========================================================================
   6. VISTAS INTERNAS · CONTACTO Y CV
   ========================================================================== */

.section-view {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
}

.section-view__container {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  width: 100%;
  min-height: 100%;
}

.section-view__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-xl);
  width: min(100%, 112rem);
  margin: 0 auto;
  flex: 1 1 auto;
}

.section-view__header {
  display: grid;
  gap: var(--space-sm);
  transform: translateY(1.5rem);
}

.section-view__eyebrow {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.section-view__title {
  margin-bottom: 0;
  font-size: clamp(3rem, 9vw, 4.8rem);
  line-height: var(--line-height-tight);
  text-wrap: balance;
}

.section-view__text {
  max-width: 62ch;
  color: var(--color-gray-100);
}

.contact-view {
  display: grid;
  gap: var(--space-xl);
}

.contact-view__hero {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-height: clamp(54rem, 78vh, 76rem);
  margin-inline: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at top left, rgba(128, 255, 182, 0.18), transparent 32%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0.66)),
    rgba(6, 10, 8, 0.96);
}

.contact-view__hero-map,
.contact-view__hero-map iframe,
.contact-view__hero-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.contact-view__hero-map {
  pointer-events: none;
}

.contact-view__hero-map iframe {
  border: 0;
  filter: saturate(0.9) contrast(1.05) brightness(0.78);
}

.contact-view__hero-fallback {
  background:
    radial-gradient(circle at 18% 18%, rgba(128, 255, 182, 0.22), transparent 22%),
    radial-gradient(circle at 82% 22%, rgba(128, 255, 182, 0.12), transparent 18%),
    linear-gradient(180deg, rgba(5, 10, 7, 0.76), rgba(5, 10, 7, 0.94));
}

.contact-view__hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(5, 10, 7, 0.34), rgba(5, 10, 7, 0.82)),
    linear-gradient(90deg, rgba(5, 10, 7, 0.82), rgba(5, 10, 7, 0.38));
}

.contact-view__hero-shell {
  position: relative;
  z-index: 2;
  display: grid;
  gap: var(--space-lg);
  min-height: inherit;
  padding: clamp(3.6rem, 7vw, 6.4rem) clamp(2rem, 5vw, 4.8rem);
  align-content: start;
}

.contact-view__hero-copy {
  display: grid;
  gap: var(--space-md);
  align-content: start;
  transform: translateY(1.5rem);
}

.contact-view__title {
  color: var(--color-off-white);
  text-shadow: 0 0.8rem 2.4rem rgba(0, 0, 0, 0.28);
}

.contact-view__intro {
  margin: 0;
  max-width: 62ch;
  text-shadow: 0 0.8rem 2rem rgba(0, 0, 0, 0.26);
}

.contact-view__hero-form-wrap {
  display: grid;
  gap: var(--space-md);
  align-content: start;
}

.contact-view__flash {
  padding: 1.2rem 1.4rem;
  border-radius: 1.6rem;
  font-size: var(--font-size-sm);
  backdrop-filter: blur(1.2rem);
}

.contact-view__flash--success {
  color: #d6ffe3;
  border: 0.1rem solid rgba(76, 175, 80, 0.35);
  background: rgba(76, 175, 80, 0.12);
}

.contact-view__flash--error {
  color: #ffd9d9;
  border: 0.1rem solid rgba(239, 68, 68, 0.35);
  background: rgba(239, 68, 68, 0.12);
}

.contact-view__details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-lg);
  width: min(100%, 112rem);
  margin: 0 auto;
}

.contact-view__card,
.cv-view__sheet {
  display: grid;
  gap: var(--space-md);
  min-width: 0;
  padding: var(--space-lg);
  border: 0.1rem solid rgba(255, 255, 255, 0.08);
  border-radius: 2.4rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.015)),
    rgba(10, 10, 10, 0.52);
  box-shadow: var(--shadow-sm);
}

.contact-view__card--hero-form {
  backdrop-filter: blur(1.6rem);
}

.contact-view__card--direct,
.contact-view__card--social,
.contact-view__card--cv {
  min-width: 0;
  overflow: visible;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.contact-view__card--image {
  min-width: 50%;
  min-height: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  align-content: end;
  align-items: end;
  align-self: stretch;
  overflow: visible;
}

.contact-view__card--direct {
  grid-column: 1 / -1;
  order: 1;
}

.contact-view__card--social {
  grid-column: 1 / -1;
  order: 2;
}

.contact-view__card--image {
  grid-column: 1;
  order: 3;
}

.contact-view__card--cv {
  grid-column: 2;
  order: 4;
  align-content: start;
}

.contact-view__card-title,
.cv-view__section-title {
  margin: 0;
  font-size: clamp(2rem, 4vw, 2.4rem);
  line-height: 1.2;
}

.contact-form,
.contact-form__field,
.cv-view__section {
  display: grid;
  gap: var(--space-sm);
}

.contact-form__grid {
  display: grid;
  gap: var(--space-md);
}

.contact-form__label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.contact-form__input,
.contact-form__textarea {
  width: 100%;
  min-height: 4.8rem;
  padding: 0 1.4rem;
  border: 0.1rem solid rgba(255, 255, 255, 0.12);
  border-radius: 1.6rem;
  color: var(--color-off-white);
  background: rgba(255, 255, 255, 0.03);
}

.contact-form__textarea {
  min-height: 15rem;
  padding-top: 1.2rem;
  padding-bottom: 1.2rem;
  resize: vertical;
}

.contact-form__input::placeholder,
.contact-form__textarea::placeholder {
  color: rgba(255, 255, 255, 0.48);
}

.contact-form__field.is-invalid .contact-form__input,
.contact-form__field.is-invalid .contact-form__textarea {
  border-color: rgba(239, 68, 68, 0.7);
}

.contact-form__error {
  margin: 0;
  font-size: var(--font-size-xs);
  color: #ff9e9e;
}

.contact-form__actions,
.contact-view__cv-actions,
.cv-view__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  min-width: 0;
}

.contact-form__submit,
.contact-view__cv-button {
  width: 100%;
  min-width: 0;
}

.contact-view__channels,
.contact-view__social-list,
.site-footer__social-list,
.cv-view__contact-list {
  display: grid;
  gap: var(--space-sm);
  max-width: max-content;
  align-items: center;
}

.contact-view__social-list,
.site-footer__social-list,
.cv-view__contact-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.contact-view__channel,
.contact-view__social-link,
.site-footer__social-link {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  min-width: max-content;
  min-height: 5.2rem;
  padding: 1rem 1.2rem;
  border: 0.1rem solid rgba(255, 255, 255, 0.08);
  border-radius: 1.8rem;
  color: var(--color-off-white);
}

.contact-view__channel {
  background: #111111;
}


.contact-view__social-link,
.site-footer__social-link {
  border: transparent;
  background: transparent;
}

.contact-view__channel-label,
.cv-view__contact-label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent-soft);
}

.contact-view__channel-value,
.contact-view__social-label,
.contact-view__cv-text {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
}

.contact-view__social-icon,
.site-footer__social-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  overflow: hidden;
  border: 0.1rem solid transparent;
  border-radius: 999rem;
  color: var(--color-black);
  background: var(--color-accent);
  flex-shrink: 0;
  isolation: isolate;
  transition:
    border-color var(--transition-base),
    box-shadow var(--transition-base);
}

.site-footer__social-icon {
  display: none;
}

.contact-social-icon__layer {
  position: absolute;
  inset: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  transition:
    opacity var(--transition-base),
    transform var(--transition-base);
}

.contact-social-icon__layer--default {
  opacity: 1;
  transform: scale(1);
}

.contact-social-icon__layer--hover {
  opacity: 0;
  transform: scale(0.96);
}

.contact-social-icon__fallback,
.contact-social-icon__emoji,
.contact-social-icon__class,
.contact-social-icon__svg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 1.4rem;
  font-weight: var(--font-weight-bold);
}

.contact-social-icon__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.contact-view__image-wrap,
.cv-view__portrait-wrap {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  height: 100%;
  overflow: visible;
  border-radius: 0;
}

.contact-view__image {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
  object-position: center bottom;
}

.contact-view__cv-text {
  display: none;
  margin: 0;
}

.cv-view__header,
.cv-view__body {
  display: grid;
  gap: var(--space-lg);
}

.cv-view__role {
  color: var(--color-accent-soft);
}

.cv-view__empty {
  display: grid;
  gap: var(--space-md);
}

/* ==========================================================================
   6.1 CONTACTA · MÓVIL BASE
   ========================================================================== */

.contact-view__hero-form-wrap .contact-view__card--hero-form {
  padding-top: clamp(2rem, 5vw, 3.2rem);
  padding-bottom: clamp(2rem, 5vw, 3.2rem);
}

@media (max-width: 767.98px) {
 

  .contact-view__card--direct,
  .contact-view__card--social,
  .contact-view__card--cv {
    max-width: 48rem;
    justify-items: center;
    justify-self: center;
    text-align: center;
  }

  .contact-view__card--image {
    grid-column: 1;
    width: min(100%, 32rem);
    justify-self: center;
  }

  .contact-view__cv-actions {
    justify-content: center;
    width: 100%;
  }

  .contact-view__channels,
  .contact-view__social-list {
    width: max-content;
    max-width: min(100%, 48rem);
    justify-items: stretch;
    justify-self: center;
    align-items: stretch;
    margin-inline: auto;
    padding: 0;
  }

  .contact-view__social {
    width: 100%;
    display: grid;
    justify-items: center;
  }

  .contact-view__channel,
  .contact-view__social-link {
    width: 100%;
    min-width: 0;
    justify-content: flex-start;
    text-align: left;
    box-sizing: border-box;
  }

  .contact-view__channel-label,
  .contact-view__channel-value,
  .contact-view__social-label {
    text-align: left;
  }
}

/* ==========================================================================
   6.2 CONTACTA · TABLET HORIZONTAL
   ========================================================================== */

@media (min-width: 768px) {
  .contact-form__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .contact-form__field--full {
    grid-column: 1 / -1;
  }

  .contact-form__submit,
  .contact-view__cv-button {
    width: auto;
  }

  .contact-view__details {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: stretch;
  }

  .contact-view__card--direct,
  .contact-view__card--image,
  .contact-view__card--cv,
  .contact-view__card--social {
    grid-column: span 1;
  }

  .contact-view__card--direct {
    grid-column: 1 / span 2;
    grid-row: 1 / span 2;
    order: 1;
  }

  .contact-view__card--image {
    grid-column: 5;
    grid-row: 1 / span 2;
    order: 2;
  }

  .contact-view__card--cv {
    grid-column: 4;
    grid-row: 1 / span 2;
    order: 3;
  }

  .contact-view__card--social {
    grid-column: 3;
    grid-row: 1 / span 2;
    order: 4;
  }

  .contact-view__cv-text {
    display: block;
  }

  .contact-view__channels {
    grid-template-columns: minmax(0, 1fr);
  }

  .site-footer__social-list,
  .cv-view__body {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cv-view__header {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }
}

/* ==========================================================================
   6.3 CONTACTA · TABLET VERTICAL
   ========================================================================== */

@media (min-width: 768px) and (max-width: 1199.98px) and (orientation: portrait) {
  .contact-view__details {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: stretch;
  }

  .contact-view__card--direct {
    position: relative;
    grid-column: 1;
    grid-row: 1 / span 2;
    order: 1;
    z-index: 1;
  }

  .contact-view__card--image {
    grid-column: 1;
    grid-row: 1 / span 2;
    order: 2;
    z-index: 0;
    pointer-events: none;
    align-self: stretch;
    justify-self: stretch;
  }

  .contact-view__image-wrap {
    justify-content: flex-end;
    align-items: flex-end;
  }

  .contact-view__image {
    width: min(100%, 26rem);
    height: auto;
    max-height: 100%;
    margin-left: auto;
    object-position: right bottom;
  }

  .contact-view__card--social {
    grid-column: 2;
    grid-row: 1;
    order: 3;
    z-index: 1;
  }

  .contact-view__card--cv {
    grid-column: 2;
    grid-row: 2;
    order: 4;
    z-index: 1;
    align-content: start;
  }

  .contact-view__cv-actions {
    justify-content: center;
  }

  .contact-view__cv-text {
    display: none;
  }
}

/* ==========================================================================
   6.4 CONTACTA · DESKTOP
   ========================================================================== */

@media (min-width: 1200px) {
  .contact-view__hero-shell {
    grid-template-columns: minmax(0, 1fr) minmax(34rem, 42rem);
    gap: clamp(2.4rem, 4vw, 5.6rem);
    align-items: start;
  }

  .contact-view__hero-copy {
    padding-top: clamp(2rem, 4vw, 4rem);
    max-width: 58rem;
  }



  .contact-view__card--direct {
    order: 1;
  }

  .contact-view__card--social {
    order: 2;
  }

  .contact-view__card--cv {
    order: 3;
    align-content: center;
    justify-items: center;
  }

  .contact-view__card--image {
    order: 4;
  }

  .contact-view__card--cv .contact-view__cv-actions {
    justify-content: center;
    align-items: center;
    width: 100%;
  }
}


/* ==========================================================================
   7. VISTA INTERNA SKILLS
   ========================================================================== */

.skills-view {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  padding: 2rem;
  padding-top: 0;
  padding-bottom: 0;
}

.skills-view .section-view__container {
  justify-content: center;
}

.skills-view__grid {
  min-height: 100%;
  align-content: center;
  justify-items: center;
  gap: clamp(2.4rem, 5vw, 3.6rem);
}

.skills-view__header {
  width: 100%;
  max-width: 74rem;
}

.skills-view__title {
  text-align: left;
}

.skills-view__intro {
  max-width: 64ch;
  margin: 0;
}

.skills-cloud {
  display: grid;
  width: 100%;
  justify-items: center;
  gap: var(--space-lg);
}

.skills-cloud__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  align-content: center;
  gap: 1.1rem 1.2rem;
  width: 100%;
  max-width: 96rem;
  margin: 0 auto;
}

.skills-cloud__tag {
  --skills-tag-border: rgba(255, 255, 255, 0.08);
  --skills-tag-color: rgba(229, 231, 235, 0.68);
  --skills-tag-surface:
    radial-gradient(circle at top left, rgba(242, 194, 48, 0.04), transparent 62%),
    rgba(255, 255, 255, 0.02);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 4.8rem;
  padding: 0.95rem 1.7rem;
  border: 0.1rem solid var(--skills-tag-border);
  border-radius: 999rem;
  font-size: 1.7rem;
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  text-align: center;
  color: var(--skills-tag-color);
  background: var(--skills-tag-surface);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(0.8rem);
  transition:
    transform var(--transition-base),
    color var(--transition-base),
    border-color var(--transition-base),
    background var(--transition-base),
    box-shadow var(--transition-base),
    filter var(--transition-base);
  cursor: pointer;
}

.skills-cloud__tag-text {
  display: block;
  white-space: nowrap;
}

.skills-cloud__tag--xs {
  --skills-tag-border: rgba(255, 255, 255, 0.06);
  --skills-tag-color: rgba(229, 231, 235, 0.48);
  --skills-tag-surface:
    radial-gradient(circle at top left, rgba(242, 194, 48, 0.02), transparent 64%),
    rgba(255, 255, 255, 0.012);
  min-height: 3.8rem;
  padding: 0.6rem 1.1rem;
  font-size: 1.25rem;
}

.skills-cloud__tag--sm {
  --skills-tag-border: rgba(255, 255, 255, 0.08);
  --skills-tag-color: rgba(229, 231, 235, 0.58);
  --skills-tag-surface:
    radial-gradient(circle at top left, rgba(242, 194, 48, 0.04), transparent 62%),
    rgba(255, 255, 255, 0.018);
  min-height: 4.2rem;
  padding: 0.8rem 1.4rem;
  font-size: 1.5rem;
}

.skills-cloud__tag--md {
  --skills-tag-border: rgba(242, 194, 48, 0.16);
  --skills-tag-color: rgba(255, 248, 230, 0.84);
  --skills-tag-surface:
    radial-gradient(circle at top left, rgba(242, 194, 48, 0.08), transparent 60%),
    rgba(255, 255, 255, 0.035);
  min-height: 4.8rem;
  padding: 0.95rem 1.7rem;
  font-size: 1.7rem;
}

.skills-cloud__tag--lg {
  --skills-tag-border: rgba(242, 194, 48, 0.28);
  --skills-tag-color: rgba(255, 232, 176, 0.96);
  --skills-tag-surface:
    radial-gradient(circle at top left, rgba(242, 194, 48, 0.13), transparent 58%),
    rgba(255, 255, 255, 0.045);
  min-height: 5.2rem;
  padding: 1rem 2rem;
  font-size: 2rem;
}

.skills-cloud__tag--xl {
  --skills-tag-border: rgba(242, 194, 48, 0.4);
  --skills-tag-color: var(--color-accent);
  --skills-tag-surface:
    radial-gradient(circle at top left, rgba(242, 194, 48, 0.2), transparent 56%),
    rgba(255, 255, 255, 0.06);
  min-height: 5.8rem;
  padding: 1.1rem 2.4rem;
  font-size: clamp(2rem, 4vw, 2.6rem);
}

.skills-cloud__tag--featured {
  box-shadow:
    0 0 0 0.1rem rgba(242, 194, 48, 0.1),
    0 1rem 2.6rem rgba(0, 0, 0, 0.14);
}

.skills-cloud__tag.is-active {
  transform: translateY(-0.12rem);
  box-shadow:
    0 0 0 0.1rem rgba(242, 194, 48, 0.12),
    0 1.2rem 3rem rgba(0, 0, 0, 0.18);
}

.skills-detail {
  display: grid;
  gap: var(--space-lg);
  padding: clamp(2rem, 5vw, 2.8rem);
  border: 0.1rem solid rgba(255, 255, 255, 0.08);
  border-radius: 3rem;
  background:
    radial-gradient(circle at top left, rgba(242, 194, 48, 0.08), transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.015)),
    rgba(10, 10, 10, 0.58);
  box-shadow: var(--shadow-sm);
}

.skills-detail__media {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.skills-detail__icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 8.4rem;
  height: 8.4rem;
  overflow: hidden;
  border: 0.1rem solid rgba(242, 194, 48, 0.22);
  border-radius: 2.2rem;
  color: var(--color-accent);
  background:
    radial-gradient(circle at top left, rgba(242, 194, 48, 0.14), transparent 58%),
    rgba(255, 255, 255, 0.03);
  flex-shrink: 0;
}

.skills-detail__icon svg,
.skills-detail__icon img,
.skills-detail__icon i,
.skills-detail__icon .skill-icon__fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.skills-detail__icon svg,
.skills-detail__icon i {
  width: 3.4rem;
  height: 3.4rem;
}

.skills-detail__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.skill-icon__fallback {
  font-size: 2.6rem;
  font-weight: var(--font-weight-bold);
}

.skills-detail__body {
  display: grid;
  gap: var(--space-md);
  min-width: 0;
}

.skills-detail__eyebrow-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
}

.skills-detail__eyebrow {
  margin: 0;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-accent-soft);
}

.skills-detail__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0.4rem 1rem;
  border: 0.1rem solid rgba(242, 194, 48, 0.34);
  border-radius: 999rem;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
  background: rgba(242, 194, 48, 0.08);
}

.skills-detail__badge.is-hidden,
.skills-detail__stat.is-hidden {
  display: none;
}

.skills-detail__title {
  margin: 0;
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  line-height: 1.08;
  text-wrap: balance;
}

.skills-detail__text {
  margin: 0;
  max-width: 62ch;
  color: var(--color-gray-100);
}

.skills-detail__text.is-empty {
  display: none;
}

.skills-detail__meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-sm);
}

.skills-detail__stat {
  display: grid;
  gap: 0.3rem;
  min-width: 0;
  padding: 1.1rem 1.3rem;
  border: 0.1rem solid rgba(255, 255, 255, 0.08);
  border-radius: 1.6rem;
  background: rgba(255, 255, 255, 0.025);
}

.skills-detail__stat-label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent-soft);
}

.skills-detail__stat-value {
  font-size: clamp(1.6rem, 3vw, 1.9rem);
  font-weight: var(--font-weight-semibold);
  color: var(--color-off-white);
}

.skills-view__empty {
  max-width: 72rem;
}

.skills-view__empty-title,
.skills-view__empty-text {
  margin: 0;
}

.skills-view__empty-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

@media (hover: hover) and (pointer: fine) {

  .skills-cloud__tag:hover,
  .skills-cloud__tag:focus-visible {
    transform: translateY(-0.2rem);
    box-shadow:
      0 0 0 0.1rem rgba(242, 194, 48, 0.12),
      0 1.2rem 3rem rgba(0, 0, 0, 0.16);
    filter: brightness(1.06);
  }
}

@media (min-width: 1024px) {
  .skills-cloud__list {
    gap: 1.6rem 1.8rem;
  }

  .skills-detail__title {
    max-width: 14ch;
  }
}

@media print {

  .site-header,
  .site-footer,
  .cv-view__actions {
    display: none !important;
  }

  .site,
  .site-main,
  .site-main--inner,
  .cv-view,
  .cv-view__sheet {
    background: #fff !important;
    color: #000 !important;
    box-shadow: none !important;
  }
}

/* ========================================================================== 
   9. VISTAS INTERNAS · PROJECTS
   --------------------------------------------------------------------------
   Listado visual de proyectos y detalle individual con galería, bloques de
   contenido y comportamiento diferenciado para dispositivos táctiles y no
   táctiles.
   ========================================================================== */

.projects-listing {
  padding-top: var(--space-lg);
  padding-bottom: var(--space-2xl);
}

.projects-listing__header,
.project-detail__header {
  width: min(100%, 112rem);
  margin: 0 auto;
}

.projects-listing__header {
  margin-bottom: var(--space-xl);
}

.projects-listing__description {
  max-width: 58ch;
}

.projects-listing__empty,
.project-detail__block,
.project-detail__gallery,
.project-detail__actions {
  width: min(100%, 112rem);
  margin: 0 auto;
}

.projects-listing__empty,
.project-detail__block,
.project-detail__gallery {
  padding: var(--space-lg);
  border: 0.1rem solid rgba(255, 255, 255, 0.08);
  border-radius: 2.4rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.015)),
    rgba(10, 10, 10, 0.52);
  box-shadow: var(--shadow-sm);
}

.projects-listing__empty {
  display: grid;
  gap: var(--space-sm);
  place-items: center;
  text-align: center;
}

.projects-listing__empty-title {
  margin: 0;
  font-size: clamp(2.2rem, 7vw, 3.2rem);
}

.projects-listing__grid {
  padding-top: var(--font-size-4xl);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(3.2rem, 8vw, 4.8rem);
  width: min(100%, 112rem);
  margin: 0 auto;
  padding-bottom: var(--space-lg);
}

/* Enlace raíz de cada proyecto: convierte toda la tarjeta en un área clicable sin alterar los colores heredados. */
.projects-folder-card {
  display: flex;
  justify-content: center;
  width: 100%;
  color: inherit;
  flex: 0 0 auto;
}

/* Contenedor relativo del efecto: fija el ancho útil de la tarjeta, define la altura total disponible para la animación y guarda variables compartidas para carpeta e imagen. */
.projects-folder-card__visual {
  --projects-folder-width: min(25rem, calc(100vw - 8rem));
  --projects-folder-height: calc(var(--projects-folder-width) * 0.6);
  --projects-folder-image-gap: 3px;
  position: relative;
  display: block;
  width: var(--projects-folder-width);
  min-height: calc(var(--projects-folder-height) + 8rem);
  margin: 0 auto;
  isolation: isolate;
}

/* Base compartida de las dos capas animadas: coloca carpeta e imagen en absoluto y define la transición suave de movimiento, giro y sombra. */
.projects-folder-card__image-shell,
.projects-folder-card__folder {
  position: absolute;
  transition:
    transform var(--transition-slow),
    box-shadow var(--transition-slow),
    opacity var(--transition-slow),
    border-color var(--transition-slow);
}

/* Marco de la imagen principal: se coloca exactamente detrás de la carpeta, solo 3px más pequeño en ancho y alto para quedar totalmente oculto antes del hover. */
.projects-folder-card__image-shell {
  top: calc(100% - var(--projects-folder-height) + (var(--projects-folder-image-gap) / 2));
  right: calc(var(--projects-folder-image-gap) / 2);
  z-index: 1;
  width: calc(var(--projects-folder-width) - var(--projects-folder-image-gap));
  height: calc(var(--projects-folder-height) - var(--projects-folder-image-gap));
  overflow: hidden;
  border: 0.1rem solid rgba(255, 255, 255, 0.12);
  border-radius: 1.8rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)),
    rgba(10, 10, 10, 0.62);
  box-shadow: 0 1.2rem 2.8rem rgba(0, 0, 0, 0.34);
  transform-origin: left bottom;
}

/* Imagen principal del proyecto: rellena por completo el marco oculto y recorta la foto para que siempre encaje sin deformarse. */
.projects-folder-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Cuerpo de la carpeta: es la capa delantera visible, pinta la carpeta en color accent y tapa la imagen hasta que se activa la animación. */
.projects-folder-card__folder {
  inset: auto auto 0 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--projects-folder-width);
  height: var(--projects-folder-height);
  padding: calc(var(--space-xl) + 1.2rem) var(--space-lg) var(--space-lg);
  border: 0.1rem solid rgba(0, 0, 0, 0.16);
  border-radius: 1.8rem;
  background: var(--color-accent);
  box-shadow: 0 1.4rem 3rem rgba(0, 0, 0, 0.24);
  transform-origin: left bottom;
}

/* Solapa superior de la carpeta: dibuja la pestaña frontal para reforzar visualmente que la tarjeta es una carpeta y la mantiene en color accent. */
.projects-folder-card__folder::before {
  content: "";
  position: absolute;
  top: -1.5rem;
  left: 1.8rem;
  width: clamp(7.2rem, 24vw, 9.4rem);
  height: 2.4rem;
  border-radius: 1.4rem 1.4rem 0 0;
  background: var(--color-accent);
}

/* Título visible del proyecto: centra el nombre dentro de la carpeta y lo mantiene por encima del fondo con un z-index superior. */
.projects-folder-card__folder-title {
  position: relative;
  z-index: 1;
  max-width: 16ch;
  margin: 0;
  font-size: clamp(2rem, 5.8vw, 2.8rem);
  font-weight: var(--font-weight-bold);
  line-height: 1.1;
  text-align: center;
  color: var(--color-black);
  text-wrap: balance;
}

@media (hover: none),
(pointer: coarse) {

  /* En dispositivos táctiles la carpeta se muestra ya en el estado final, girada a la izquierda, porque no existe hover fiable. */
  .projects-folder-card__folder {
    transform: rotate(-15deg) translate3d(-0.4rem, 0, 0);
  }

  /* En dispositivos táctiles la imagen se muestra ya desplazada su ancho completo a la derecha y media altura hacia arriba, girada a la derecha y asomando por detrás de la carpeta. */
  .projects-folder-card__image-shell {
    opacity: 1;
    transform: translate3d(0%, -100%, 0) rotate(15deg);
  }
}

@media (hover: hover) and (pointer: fine) {

  /* En dispositivos no táctiles la carpeta arranca cerrada y sin giro, tapando por completo la imagen hasta que haya hover. */
  .projects-folder-card__folder {
    top: -15px;
    transform: rotate(0deg) translate3d(0, 0, 0);
  }

  /* En dispositivos no táctiles la imagen arranca en su posición oculta, detrás de la carpeta y sin desplazamiento visible. */
  .projects-folder-card__image-shell {
    top: -15px;
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(0deg);
  }

  /* En hover o focus visible, la carpeta gira 45 grados a la izquierda y aumenta su sombra para reforzar el efecto de apertura. */
  .projects-folder-card:hover .projects-folder-card__folder,
  .projects-folder-card:focus-visible .projects-folder-card__folder {
    top: 100px;
    transform: rotate(-15deg) translate3d(-0.4rem, 0, 0);
    box-shadow: 0 2rem 4rem rgba(0, 0, 0, 0.28);
  }

  /* En hover o focus visible, la imagen sale desde detrás de la carpeta desplazándose todo su ancho a la derecha y media altura hacia arriba mientras gira a la derecha. */
  .projects-folder-card:hover .projects-folder-card__image-shell,
  .projects-folder-card:focus-visible .projects-folder-card__image-shell {
    top: 100px;
    opacity: 1;
    transform: translate3d(0%, -100%, 0) rotate(15deg);
  }
}

.projects-folder-card__folder,
.projects-folder-card__image-shell {
  transition:
    top 0.4s ease,
    transform 0.4s ease,
    box-shadow 0.4s ease,
    opacity 0.4s ease;
}

.project-detail {
  padding-top: var(--space-lg);
  padding-bottom: var(--space-2xl);
}


.project-detail__header {
  margin-bottom: var(--space-xl);
}

.project-detail__client {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-xs);
  flex-wrap: wrap;
  margin: 0;
  color: var(--color-gray-100);
}

.project-detail__client-label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.project-detail__excerpt {
  max-width: 62ch;
}

.project-detail__gallery {
  display: grid;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

.project-detail__gallery-main {
  position: relative;
  overflow: hidden;
  border-radius: 1.8rem;
  background:
    radial-gradient(circle at top left, rgba(242, 194, 48, 0.12), transparent 28%),
    rgba(10, 10, 10, 0.88);
  aspect-ratio: 16 / 10;
}

.project-detail__main-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.project-detail__gallery-thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.8rem, 1fr));
  gap: var(--space-sm);
}

.project-detail__thumb {
  display: block;
  padding: 0;
  overflow: hidden;
  border: 0.1rem solid rgba(255, 255, 255, 0.12);
  border-radius: 1.4rem;
  background: rgba(255, 255, 255, 0.03);
  box-shadow: var(--shadow-sm);
}

.project-detail__thumb-image {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.project-detail__content {
  display: grid;
  gap: var(--space-lg);
}

.project-detail__block {
  display: grid;
  gap: var(--space-sm);
}

.project-detail__block-title {
  margin: 0;
  font-size: clamp(2rem, 5vw, 2.6rem);
  line-height: 1.2;
}

.project-detail__block-text {
  max-width: none;
}

.project-detail__actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-sm);
  width: min(100%, 64rem);
  margin: 0 auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.project-detail__action-link {
  width: 100%;
  justify-content: center;
  text-align: center;
}

@media (hover: hover) and (pointer: fine) {

  .project-detail__thumb:hover,
  .project-detail__thumb:focus-visible {
    border-color: rgba(242, 194, 48, 0.45);
    transform: translateY(-0.2rem);
  }
}

@media (min-width: 768px) {

  .projects-listing {
    padding-top: var(--space-xl);
  }

  .projects-listing__grid {
    margin-top: var(--space-lg);
    padding-top: var(--space-3xl);
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 5.6rem 4rem;
  }

  .projects-folder-card {
    width: auto;
  }

  .projects-folder-card__visual {
    --projects-folder-width: 30rem;
    --projects-folder-height: calc(var(--projects-folder-width) * 0.6);
    min-height: calc(var(--projects-folder-height) + 8rem);
  }

  .project-detail__gallery {
    grid-template-columns: minmax(0, 1fr) 22rem;
    align-items: start;
  }

  .project-detail__gallery-thumbs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .project-detail__actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: min(100%, 112rem);
  }
}

@media (min-width: 1024px) {
  .projects-listing__grid {
    justify-content: center;
    gap: 6.4rem 4.8rem;
  }

  .projects-folder-card__visual {
    --projects-folder-width: 32rem;
    --projects-folder-height: calc(var(--projects-folder-width) * 0.6);
  }

  .project-detail__header {
    margin-bottom: var(--space-2xl);
  }

  .project-detail__gallery {
    grid-template-columns: minmax(0, 1fr) 26rem;
    gap: var(--space-lg);
  }

  .project-detail__gallery-thumbs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: start;
  }

  .project-detail__content {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-lg);
    align-items: start;
  }

  .project-detail__block--description {
    grid-column: 1 / -1;
  }

  .project-detail__actions {
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    align-self: start;
  }
}

/* ========================================================================== 
   10. RESPONSIVE DEL FRONTEND PÚBLICO
   --------------------------------------------------------------------------
   Ajustes para tablet y desktop de navegación, footer y vistas internas.
   ========================================================================== */

/* Legal pages */
.legal-page__container {
  display: grid;
  gap: 1.6rem;
}

.legal-page__hero {
  display: grid;
  gap: 1rem;
}

.legal-page__hero-panel,
.legal-page__surface,
.legal-page__summary-card,
.legal-page__card {
  border: 0.1rem solid rgba(255, 255, 255, 0.1);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02)),
    rgba(10, 10, 10, 0.9);
  box-shadow: 0 1.8rem 4.2rem rgba(0, 0, 0, 0.22);
}

.legal-page__hero-panel {
  display: grid;
  gap: 0.95rem;
  padding: 1.5rem;
  border: 0;
  border-radius: 2rem;
  background: transparent;
  box-shadow: none;
}

.legal-page__eyebrow {
  margin: 0;
  font-size: 1.2rem;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.legal-page__title {
  margin: 0;
}

.legal-page__intro {
  max-width: 68ch;
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
}

.legal-page__summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.legal-page__summary-card {
  display: grid;
  gap: 0.35rem;
  padding: 1.2rem;
  border-radius: 1.6rem;
}

.legal-page__summary-card--accent {
  border-color: rgba(242, 194, 48, 0.28);
  background:
    linear-gradient(180deg, rgba(242, 194, 48, 0.12), rgba(255, 255, 255, 0.02)),
    rgba(10, 10, 10, 0.92);
}

.legal-page__summary-label {
  margin: 0;
  font-size: 1.2rem;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.68);
}

.legal-page__summary-value {
  font-size: clamp(2rem, 4vw, 2.8rem);
  line-height: 1;
  color: var(--color-white);
}

.legal-page__surface {
  padding: 1.5rem;
  border-radius: 2rem;
}

.legal-page__content {
  display: grid;
  gap: 1rem;
}

.legal-page__card {
  display: grid;
  gap: 0.7rem;
  padding: 1.3rem;
  border-radius: 1.6rem;
}

.legal-page__card-topline {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.legal-page__card-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 4.4rem;
  padding: 0.45rem 0.9rem;
  border-radius: 999rem;
  border: 0.1rem solid rgba(242, 194, 48, 0.24);
  background: rgba(242, 194, 48, 0.08);
  color: var(--color-accent);
  font-size: 1.2rem;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.08em;
}

.legal-page__card-title {
  margin: 0;
  font-size: clamp(1.8rem, 2.3vw, 2.2rem);
  line-height: 1.2;
}

.legal-page__card-text {
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.75;
}

/* Contact legal consent */
.contact-form__consent {
  display: grid;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.contact-form__consent-label {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.95rem;
  color: var(--color-white);
}

.contact-form__checkbox {
  width: 1rem;
  height: 1rem;
  margin-top: 0.2rem;
  accent-color: var(--color-accent);
  flex: 0 0 auto;
}

.contact-form__consent-note {
  margin: 0;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.75);
}

.contact-form__consent-link {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 0.15rem;
}

.contact-form__consent-link:hover,
.contact-form__consent-link:focus-visible {
  color: var(--color-accent-soft);
}

.contact-form__consent.is-invalid {
  padding: 0.85rem;
  border-radius: 1rem;
  border: 1px solid rgba(255, 113, 113, 0.5);
  background: rgba(255, 113, 113, 0.08);
}

/* Cookies */
.cookie-banner {
  position: fixed;
  inset-inline: 1rem;
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 1200;
  max-height: calc(100dvh - max(2rem, env(safe-area-inset-top) + env(safe-area-inset-bottom) + 2rem));
  opacity: 0;
  transform: translateY(0.85rem);
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.cookie-banner.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.cookie-banner[hidden] {
  display: none;
}

.cookie-banner__panel {
  max-width: 72rem;
  max-height: inherit;
  margin: 0 auto;
  padding: 1rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: 1.4rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(10, 10, 10, 0.96);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.38);
  backdrop-filter: blur(10px);
}

.cookie-banner__content,
.cookie-banner__preferences {
  display: grid;
  gap: 1rem;
}

.cookie-banner__preferences {
  display: grid;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(-0.45rem);
  pointer-events: none;
  transition: max-height 0.28s ease, opacity 0.22s ease, transform 0.22s ease, margin-top 0.22s ease, padding-top 0.22s ease;
}

.cookie-banner__preferences.is-rendered {
  display: grid;
}

.cookie-banner__preferences.is-open {
  max-height: 40rem;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.cookie-banner__eyebrow {
  margin: 0 0 0.25rem;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.cookie-banner__title {
  margin: 0;
  font-size: 1.05rem;
}

.cookie-banner__description,
.cookie-banner__links,
.cookie-banner__preference-text {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.6;
}

.cookie-banner__note {
  margin: 0;
  color: rgba(255, 255, 255, 0.68);
  line-height: 1.55;
}

.cookie-banner__link {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 0.15rem;
}

.cookie-banner__link:hover,
.cookie-banner__link:focus-visible {
  color: var(--color-accent-soft);
}

.cookie-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.cookie-banner__button {
  min-width: 10rem;
}

.cookie-banner__preferences {
  margin-top: 0;
  padding-top: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.cookie-banner__preferences.is-open {
  margin-top: 1rem;
  padding-top: 1rem;
}

.cookie-banner__preferences[hidden] {
  display: none;
}

.cookie-banner__preference {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.95rem 1rem;
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.cookie-banner__preference-title {
  margin: 0 0 0.25rem;
  font-size: 0.98rem;
}

.cookie-banner__toggle {
  width: 1.1rem;
  height: 1.1rem;
  accent-color: var(--color-accent);
  flex: 0 0 auto;
}

.cookie-banner__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  background: rgba(242, 194, 48, 0.14);
  color: var(--color-accent);
  font-size: 0.8rem;
  font-weight: 600;
}

.cookie-preferences-toggle {
  display: none;
}

@media (min-width: 768px) {
  .legal-page__hero {
    grid-template-columns: minmax(0, 1.7fr) minmax(22rem, 0.7fr);
    align-items: stretch;
  }

  .legal-page__hero-panel,
  .legal-page__surface {
    padding: 1.8rem;
  }

  .legal-page__content {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .legal-page__card:first-child {
    grid-column: 1 / -1;
  }

  .cookie-banner__content {
    grid-template-columns: minmax(0, 1.6fr) auto;
    align-items: end;
  }

  .cookie-banner__actions {
    justify-content: flex-end;
  }
}

@media (max-width: 767.98px) {
  .cookie-banner {
    inset-inline: 0.75rem;
    bottom: max(0.75rem, env(safe-area-inset-bottom));
    max-height: calc(100dvh - max(1.5rem, env(safe-area-inset-top) + env(safe-area-inset-bottom) + 1.5rem));
  }

  .cookie-banner__panel {
    padding: 0.9rem;
  }

  .cookie-banner__content,
  .cookie-banner__preferences {
    gap: 0.85rem;
  }

  .cookie-banner__actions {
    gap: 0.65rem;
  }

  .cookie-banner__button {
    width: 100%;
    min-width: 0;
  }

  .cookie-banner__preference {
    flex-direction: column;
    align-items: flex-start;
  }

  .cookie-banner__preferences.is-open {
    max-height: none;
  }
}


@media (hover: none), (pointer: coarse) {
  .site-header {
    backdrop-filter: none;
    background-color: rgba(10, 10, 10, 0.9);
  }

  .page--home .site-logo,
  .page--home .menu-toggle {
    backdrop-filter: none;
    background-color: rgba(10, 10, 10, 0.72);
  }

  .site-nav__link,
  .contact-view__flash,
  .contact-view__card--hero-form,
  .skills-cloud__tag,
  .cookie-banner__panel {
    backdrop-filter: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-nav,
  .site-logo__image,
  .site-logo__svg-wrap,
  .site-logo__fallback,
  .menu-toggle__svg-wrap,
  .menu-toggle__artwork,
  .about-view__image,
  .skills-cloud__tag,
  .cookie-banner,
  .cookie-banner__preferences {
    transition: none !important;
  }
}

.page--validation {
  min-height: 100dvh;
  background:
    radial-gradient(circle at top, rgba(242, 194, 48, 0.12), transparent 34%),
    linear-gradient(180deg, rgba(15, 17, 21, 0.98), rgba(10, 10, 10, 1));
}

.validation-view {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: clamp(2.4rem, 5vw, 4rem) 1.6rem;
}

.validation-view__section {
  width: min(100%, 64rem);
}

.validation-view__card {
  display: grid;
  gap: 1.6rem;
  justify-items: center;
  text-align: center;
  padding: clamp(2.4rem, 4vw, 3.6rem);
  border-radius: 2.8rem;
  border: 0.1rem solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015)),
    rgba(10, 10, 10, 0.68);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(1.6rem);
}


.validation-view__brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 8.8rem;
  height: 8.8rem;
  border-radius: 50%;
  transition:
    transform var(--transition-base),
    box-shadow var(--transition-base);
}

.validation-view__brand-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.validation-view__close {
  min-width: 16rem;
  padding: 1.3rem 2rem;
  border: 0.1rem solid var(--color-accent);
  border-radius: var(--radius-pill);
  font-size: 1.6rem;
  font-weight: var(--font-weight-semibold);
  line-height: 1.2;
  color: var(--color-black);
  background-color: var(--color-accent);
  box-shadow: var(--shadow-sm);
}

.validation-view__close:hover,
.validation-view__close:focus-visible,
.validation-view__brand:hover,
.validation-view__brand:focus-visible {
  transform: translateY(-0.1rem);
}

.validation-view__close:hover,
.validation-view__close:focus-visible {
  color: var(--color-black);
  background-color: var(--color-accent-soft);
}

.validation-view__brand:focus-visible,
.validation-view__close:focus-visible {
  outline: 0.2rem solid var(--color-accent);
  outline-offset: 0.3rem;
}

.validation-view__eyebrow {
  margin: 0;
  color: var(--color-accent);
  font-size: var(--font-size-xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.validation-view__title {
  margin: 0;
  color: var(--color-off-white);
  font-size: clamp(2.8rem, 4vw, 4rem);
  line-height: 1.1;
}

.validation-view__flash {
  width: min(100%, 48rem);
}

@media (max-width: 47.99rem) {
  .validation-view {
    padding-inline: 1.2rem;
  }

  .validation-view__card {
    border-radius: 2.4rem;
    padding: 2.2rem 1.6rem;
  }

  .validation-view__brand {
    width: 7.2rem;
    height: 7.2rem;
  }

  .validation-view__close {
    width: 100%;
  }

  .validation-view__flash {
    width: 100%;
  }
}