/* ============================================================
   PORTAFOLIO FABRICIO GALINDO — styles.css
   Paleta: negro (#0A0805), gris (#1C1A18), dorado (#C9981A), blanco
   Fuentes: Montserrat (display) + Inter (body)
   ============================================================ */


/* ============================================================
   1. VARIABLES
   ============================================================ */

:root {
       --fondo1:          #0A0805;
       --fondo2:          #1C1A18;
       --fondo-card:      #141210;
       --dorado1:         #C9981A;
       --dorado-op:       rgba(201, 152, 26, 0.15);
       --dorado-borde:    rgba(201, 152, 26, 0.35);
       --dorado-glow:     0 0 28px rgba(201, 152, 26, 0.30);
       --blanco:          #FFFFFF;
       --gris1:           rgba(255, 255, 255, 0.65);
       --gris2:           rgba(255, 255, 255, 0.35);
       --degradado-fondo: linear-gradient(180deg, #0A0805 0%, #1C1A18 100%);
       --font-display:    'Montserrat', sans-serif;
       --font-body:       'Inter', sans-serif;
       --header-h:        78px;
       --container:       1180px;
       --section-y:       clamp(2.5rem, 5vw, 4.5rem);
       --space:           clamp(1.2rem, 2vw, 2rem);
}


/* ============================================================
   2. RESET / BASE
   ============================================================ */

* {
       box-sizing: border-box;
}

html {
       scroll-behavior: smooth;
}

body {
       margin:      0;
       background:  var(--fondo1);
       color:       var(--blanco);
       font-family: var(--font-body);
       overflow-x:  hidden;
}

body.menu-open {
       overflow: hidden;
}

img {
       display:   block;
       max-width: 100%;
}

a {
       color:           inherit;
       text-decoration: none;
}

button,
input,
textarea {
       font: inherit;
}

::selection {
       background: var(--dorado1);
       color:      var(--fondo1);
}

body:not(.preload) .anim-abajo {
       opacity:   0;
       transform: translateY(50px);
}

body:not(.preload) .anim-izquierda {
       opacity:   0;
       transform: translateX(-70px);
}

body:not(.preload) .anim-derecha {
       opacity:   0;
       transform: translateX(70px);
}

body:not(.preload) .anim-visible.anim-abajo,
body:not(.preload) .anim-visible.anim-izquierda,
body:not(.preload) .anim-visible.anim-derecha {
       opacity:   1;
       transform: translate(0, 0);
}

html,
body {
       min-width:  300px;
       max-width:  100%;
       overflow-x: hidden;
}

* {
       min-width: 0;
}


/* ============================================================
   3. TIPOGRAFÍA BASE
   ============================================================ */

h1,
h2,
h3,
p {
       margin-top: 0;
}

h1,
h2,
h3 {
       font-family:    var(--font-display);
       letter-spacing: 0;
}

h1 {
       margin-bottom: 1.15rem;
       max-width:     12ch;
       font-size:     clamp(2.45rem, 8vw, 5.9rem);
       line-height:   0.98;
       font-weight:   900;
}

h2 {
       margin-bottom: 1rem;
       font-size:     clamp(2rem, 4.5vw, 4.35rem);
       line-height:   1.02;
       font-weight:   900;
}

h3 {
       margin-bottom: 0.65rem;
       font-size:     clamp(1.15rem, 2vw, 1.45rem);
       line-height:   1.15;
       font-weight:   800;
}

p {
       color:       var(--gris1);
       line-height: 1.75;
}


/* ============================================================
   4. UTILIDADES GLOBALES
   ============================================================ */

#progress-bar {
       position:   fixed;
       top:        0;
       left:       0;
       z-index:    1000;
       width:      0%;
       height:     2px;
       background: var(--dorado1);
       box-shadow: var(--dorado-glow);
}

.D_Container {
       width:         min(100% - 2rem, var(--container));
       margin-inline: auto;
}

.section-pad {
       padding-block: var(--section-y);
}


/* ============================================================
   5. HEADER / NAV
   ============================================================ */

.Header {
       position:   fixed;
       top:        0;
       left:       0;
       z-index:    900;
       width:      100%;
       background: rgba(10, 8, 5, 0.88);
       transition: background 220ms ease, backdrop-filter 220ms ease, border-color 220ms ease;
}

.Header.scrolled {
       background:      rgba(10, 8, 5, 0.76);
       border-bottom:   1px solid rgba(201, 152, 26, 0.18);
       backdrop-filter: blur(16px);
}

.Nav_Principal {
       width:           min(100% - 2rem, var(--container));
       min-height:      var(--header-h);
       margin-inline:   auto;
       display:         flex;
       align-items:     center;
       justify-content: space-between;
       gap:             1rem;
       transition:      min-height 220ms ease;
}

.Header.scrolled .Nav_Principal {
       min-height: 64px;
}

.A_Brand {
       display:        inline-flex;
       align-items:    center;
       gap:            0.7rem;
       color:          var(--blanco);
       font-family:    var(--font-display);
       font-size:      clamp(1rem, 1.8vw, 1.25rem);
       font-weight:    800;
       letter-spacing: 0;
       white-space:    nowrap;
}

.Span_BrandMark {
       display:        inline-grid;
       place-items:    center;
       padding:        0.15rem 0.55rem;
       color:          var(--blanco);
       font-family:    var(--font-display);
       font-weight:    900;
       font-size:      1.5rem;
       letter-spacing: 0.04em;
}

.Nav_Menu {
       position:       fixed;
       top:            0;
       right:          0;
       z-index:        950;
       width:          min(82vw, 22rem);
       min-height:     100vh;
       padding:        6rem 1.2rem 2rem;
       display:        flex;
       flex-direction: column;
       gap:            0.25rem;
       background:     var(--fondo-card);
       border-left:    1px solid var(--dorado-borde);
       transform:      translateX(105%);
       transition:     transform 240ms ease;
}

.Nav_Menu.abierto {
       transform: translateX(0);
}

.A_Nav {
       padding:       0.95rem 1rem;
       color:         var(--gris1);
       font-weight:   600;
       border-radius: 8px;
       transition:    color 180ms ease, background 180ms ease;
}

.A_Nav:hover,
.A_Nav:focus-visible {
       color:      var(--blanco);
       background: var(--dorado-op);
       outline:    none;
}

.Nav_Menu .A_Nav--cta {
       margin-top: 0.7rem;
       color:      var(--dorado1);
       border:     1px solid var(--dorado-borde);
       text-align: center;
}

.Nav_Menu .A_Nav--cta:hover,
.Nav_Menu .A_Nav--cta:focus-visible {
       color:      var(--fondo1);
       background: var(--dorado1);
}

.D_MenuOverlay {
       position:       fixed;
       inset:          0;
       z-index:        930;
       pointer-events: none;
       background:     rgba(10, 8, 5, 0.72);
       opacity:        0;
       transition:     opacity 220ms ease;
}

.D_MenuOverlay.visible {
       pointer-events: auto;
       opacity:        1;
}

.Btn_MenuBars {
       position:        relative;
       z-index:         980;
       width:           2.75rem;
       aspect-ratio:    1;
       display:         inline-flex;
       flex-direction:  column;
       align-items:     center;
       justify-content: center;
       gap:             0.32rem;
       background:      transparent;
       color:           var(--blanco);
       border:          1px solid var(--dorado-borde);
       border-radius:   8px;
       cursor:          pointer;
}

.Btn_MenuBars span {
       width:         1.18rem;
       height:        2px;
       background:    var(--blanco);
       border-radius: 999px;
       transition:    transform 180ms ease, opacity 180ms ease;
}

.Btn_MenuBars[aria-expanded="true"] span:nth-child(1) {
       transform: translateY(0.42rem) rotate(45deg);
}

.Btn_MenuBars[aria-expanded="true"] span:nth-child(2) {
       opacity: 0;
}

.Btn_MenuBars[aria-expanded="true"] span:nth-child(3) {
       transform: translateY(-0.42rem) rotate(-45deg);
}

.A_FooterBrand .Span_BrandMark {
       font-size: 1.7rem;
}


/* ============================================================
   6. HERO
   ============================================================ */

.S_Hero {
       position:       relative;
       height:         100svh;
       padding-top:    var(--header-h);
       padding-bottom: 2rem;
       display:        grid;
       align-items:    center;
       background:     var(--degradado-fondo);
       overflow:       hidden;
}

.S_Hero::before,
.S_Goals::before {
       content:          "";
       position:         absolute;
       inset:            0;
       pointer-events:   none;
       background-image: linear-gradient(rgba(201, 152, 26, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201, 152, 26, 0.06) 1px, transparent 1px);
       background-size:  72px 72px;
       mask-image:       linear-gradient(180deg, transparent, var(--blanco) 20%, var(--blanco) 70%, transparent);
       opacity:          0.45;
}

.D_HeroGrid {
       position:              relative;
       z-index:               1;
       display:               grid;
       grid-template-columns: 1.1fr 0.9fr;
       align-items:           center;
       gap:                   clamp(2rem, 5vw, 4.5rem);
}

.D_HeroCopy {
       max-width: 44rem;
}

.P_Eyebrow,
.P_SectionKicker {
       margin:         0 0 0.9rem;
       color:          var(--dorado1);
       font-size:      0.78rem;
       font-weight:    800;
       letter-spacing: 0.12em;
       text-transform: uppercase;
}

.D_HeroActions {
       display:   flex;
       flex-wrap: wrap;
       gap:       0.85rem;
}

.A_Btn {
       min-height:      3.05rem;
       display:         inline-flex;
       align-items:     center;
       justify-content: center;
       gap:             0.65rem;
       padding:         0.88rem 1.25rem;
       border-radius:   999px;
       font-weight:     800;
       border:          1px solid transparent;
       cursor:          pointer;
       transition:      transform 180ms ease, background 180ms ease, color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.A_Btn:hover,
.A_Btn:focus-visible {
       transform: translateY(-2px);
       outline:   none;
}

.A_Btn--primary {
       color:      var(--fondo1);
       background: var(--dorado1);
       box-shadow: var(--dorado-glow);
}

.A_Btn--primary:hover,
.A_Btn--primary:focus-visible {
       box-shadow: 0 0 36px rgba(201, 152, 26, 0.45);
}

.D_HeroVisual {
       align-self:    center;
       padding:       0.8rem;
       border:        1px solid var(--dorado-borde);
       border-radius: 8px;
       background:    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
       box-shadow:    0 28px 90px rgba(0, 0, 0, 0.45);
}

.D_HeroVisual img {
       width:         100%;
       aspect-ratio:  1.35;
       object-fit:    contain;
       border-radius: 6px;
       background:    rgba(255, 255, 255, 0.92);
}

.A_ScrollCue {
       position:      absolute;
       left:          50%;
       transform:     translateX(-50%);
       bottom:        1rem;
       z-index:       2;
       width:         2.4rem;
       aspect-ratio:  1;
       display:       grid;
       place-items:   center;
       color:         var(--dorado1);
       border:        1px solid var(--dorado-borde);
       border-radius: 50%;
       animation:     cue 1.4s ease-in-out infinite;
}

.D_TagList {
       display:   flex;
       flex-wrap: wrap;
       gap:       0.5rem;
}

.A_Btn--submit {
       width: 100%;
}

.S_Hero .anim-izquierda,
.S_Hero .anim-derecha,
.S_Hero .anim-abajo {
       opacity:    1 !important;
       transform:  none !important;
       transition: none !important;
}

.Span_HeroBadge {
       display:       inline-flex;
       align-items:   center;
       gap:           0.55rem;
       margin-bottom: 1.8rem;
       padding:       0.5rem 1rem;
       border-radius: 999px;
       color:         var(--blanco);
       font-weight:   600;
       font-size:     0.9rem;
       border:        1px solid rgba(46, 160, 90, 0.5);
       background:    rgba(46, 160, 90, 0.12);
}

.Span_HeroBadge i {
       color:     #2ea05a;
       font-size: 0.6rem;
}

.A_Btn--light {
       color:      var(--fondo1);
       background: var(--blanco);
}

.A_Btn--light:hover,
.A_Btn--light:focus-visible {
       box-shadow: 0 0 30px rgba(255, 255, 255, 0.25);
}

.D_HeroVisual {
       border:     none;
       background: none;
       box-shadow: none;
       padding:    0;
       min-height: 1px;
}

.D_HeroCarousel {
       position:      relative;
       width:         100%;
       max-width:     560px;
       margin-inline: auto;
}

.D_HeroSwiper {
       width:         100%;
       padding:       1.2rem 0 0.5rem;
       overflow:      hidden;
       border-radius: 14px;
}

.D_CarSlide {
       width:         100%;
       border:        1px solid var(--dorado-borde);
       border-radius: 12px;
       background:    var(--fondo2, #141210);
       overflow:      hidden;
       transition:    opacity 500ms ease, filter 500ms ease;
}

.swiper-initialized .D_CarSlide:not(.swiper-slide-active) {
       opacity:        0;
       pointer-events: none;
}

.D_HeroSwiper:not(.swiper-initialized) .D_CarSlide ~ .D_CarSlide {
       display: none;
}

.D_CarSlide.swiper-slide-active {
       box-shadow: 0 26px 80px rgba(0, 0, 0, 0.55), 0 0 50px rgba(201, 152, 26, 0.15);
}

.Img_CarMedia {
       width:      100%;
       height:     clamp(180px, 34svh, 360px);
       object-fit: cover;
       display:    block;
       background: rgba(255, 255, 255, 0.92);
}

.D_CarInfo {
       padding: 1rem 1.2rem 1.3rem;
}

.D_CarInfo h3 {
       margin-bottom: 0.45rem;
}

.D_CarInfo p {
       color:         var(--gris1);
       font-size:     0.92rem;
       margin-bottom: 0.85rem;
}

.D_CarInfo .D_TagList {
       display:   flex;
       flex-wrap: wrap;
       gap:       0.5rem;
}

.D_CarInfo .D_TagList span {
       padding:       0.3rem 0.7rem;
       font-size:     0.7rem;
       font-weight:   800;
       color:         var(--dorado1);
       border:        1px solid rgba(201, 152, 26, 0.3);
       border-radius: 999px;
}

.Btn_CarNav {
       position:      absolute;
       top:           38%;
       z-index:       10;
       width:         2.6rem;
       aspect-ratio:  1;
       display:       grid;
       place-items:   center;
       color:         var(--blanco);
       cursor:        pointer;
       border:        1px solid var(--dorado-borde);
       border-radius: 50%;
       background:    rgba(10, 8, 5, 0.85);
       transition:    background 180ms ease, transform 180ms ease;
}

.Btn_CarNav:hover {
       background: var(--dorado1);
       color:      var(--fondo1);
       transform:  scale(1.06);
}

.Btn_CarNav--prev {
       left: 0.4rem;
}

.Btn_CarNav--next {
       right: 0.4rem;
}

.D_CarDots {
       position:   relative;
       margin-top: 1rem;
       text-align: center;
}

.D_CarDots .swiper-pagination-bullet {
       width:      0.6rem;
       height:     0.6rem;
       background: rgba(255, 255, 255, 0.25);
       opacity:    1;
       transition: background 180ms ease, transform 180ms ease;
}

.D_CarDots .swiper-pagination-bullet-active {
       background: var(--dorado1);
       transform:  scale(1.25);
}

.D_ContactCentered .A_Btn--submit {
       justify-self:   center;
       margin-top:     0.6rem;
       padding-inline: 2.6rem;
       letter-spacing: 0.12em;
       text-transform: uppercase;
}


/* ============================================================
   7. SECCIONES
   ============================================================ */

.S_Stats {
       background:   var(--fondo-card);
       border-block: 1px solid rgba(201, 152, 26, 0.16);
}

.D_StatsGrid {
       display:               grid;
       grid-template-columns: repeat(2, 1fr);
}

.D_StatItem {
       min-height:    8.8rem;
       display:       grid;
       align-content: center;
       gap:           0.3rem;
       padding:       1.4rem 1rem;
       border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.D_StatItem:nth-child(odd) {
       border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.D_StatItem strong {
       color:       var(--dorado1);
       font-family: var(--font-display);
       font-size:   clamp(2rem, 5vw, 3.6rem);
       line-height: 1;
}

.D_StatItem span {
       color:       var(--gris1);
       font-weight: 600;
}

.D_SectionCopy {
       max-width: 44rem;
}

.D_ContactHead .P_SectionKicker {
       text-align: center;
}

.D_LangHead .P_SectionKicker {
       text-align: center;
}

.D_CertHead .P_SectionKicker {
       text-align: center;
}

.D_CertHead .P_SectionKicker {
       text-align: center;
}

.D_ProfilePanel {
       min-height:    26rem;
       display:       grid;
       align-content: end;
       gap:           1.4rem;
       padding:       clamp(1.2rem, 3vw, 2rem);
       background:    linear-gradient(180deg, rgba(201, 152, 26, 0.08), rgba(20, 18, 16, 0.98)),
    var(--fondo-card);
}

.D_ProfileAvatar {
       width:         min(100%, 18rem);
       aspect-ratio:  1;
       display:       grid;
       place-items:   center;
       margin-inline: auto;
       color:         var(--dorado1);
       font-size:     clamp(4rem, 12vw, 8rem);
       border:        1px solid var(--dorado-borde);
       border-radius: 50%;
       background:    rgba(10, 8, 5, 0.74);
}

.D_ProfilePanel p {
       margin-bottom: 0;
}

.D_SectionHead {
       max-width:     48rem;
       margin-bottom: clamp(2rem, 4vw, 3.2rem);
}

.D_SectionHead h2,
.D_SkillsFull h2,
.S_Languages h2 {
       max-width: 20ch;
}

.H2_ProjectsTitle {
       font-size: clamp(1.7rem, 3.2vw, 2.8rem);
       max-width: 18ch;
}

.H2_ProjectsTitle {
       max-width: 20ch;
}

.D_ProjGrid {
       display:               grid;
       grid-template-columns: repeat(3, minmax(0, 1fr));
       gap:                   1.4rem;
       margin-top:            2.4rem;
}

.D_ProjGrid .D_ProjItem:last-child:nth-child(3n + 1) {
       grid-column: 2;
}

.D_ProjItem {
       display:        flex;
       flex-direction: column;
       border:         1px solid var(--dorado-borde);
       border-radius:  12px;
       background:     var(--fondo2, #141210);
       overflow:       hidden;
       transition:     transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

.D_ProjItem:hover {
       transform:    translateY(-4px);
       border-color: var(--dorado1);
       box-shadow:   0 22px 60px rgba(0, 0, 0, 0.5), 0 0 36px rgba(201, 152, 26, 0.14);
}

.D_ProjBody {
       padding:        1.1rem 1.2rem 1.3rem;
       display:        flex;
       flex-direction: column;
       flex:           1;
}

.D_ProjBody h3 {
       margin-bottom: 0.5rem;
}

.D_ProjBody p {
       color:         var(--gris1);
       font-size:     0.92rem;
       line-height:   1.6;
       margin-bottom: 0.9rem;
}

.D_ProjTags {
       display:       flex;
       flex-wrap:     wrap;
       gap:           0.45rem;
       margin-bottom: 1rem;
}

.D_ProjTags span {
       padding:       0.28rem 0.65rem;
       font-size:     0.68rem;
       font-weight:   800;
       color:         var(--dorado1);
       border:        1px solid rgba(201, 152, 26, 0.3);
       border-radius: 999px;
}

.D_ProjGrid,
.D_SkillCats,
.D_SoftGrid,
.D_EthicsGrid,
.D_CertGrid,
.D_LangRings,
.D_TimelineList {
       margin-top: clamp(1.8rem, 3.5vw, 2.6rem);
}

.Img_ProjThumb {
       width:        100%;
       aspect-ratio: 1.6;
       object-fit:   cover;
       background:   rgba(255, 255, 255, 0.92);
       display:      block;
}

.A_ProjLink {
       margin-top:  auto;
       align-self:  flex-start;
       display:     inline-flex;
       align-items: center;
       gap:         0.4rem;
       color:       var(--dorado1);
       font-weight: 800;
       font-size:   0.9rem;
       transition:  gap 180ms ease;
}

.A_ProjLink:hover {
       gap: 0.7rem;
}

.S_Skills {
       background: var(--fondo2);
}

.D_SkillsFull {
       position:     relative;
       padding-left: 2.5rem;
}

.D_SkillsFull .D_SkillCats {
       grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
       gap:                   1.8rem 3rem;
}

.Span_SkillsVlabel {
       position:       absolute;
       left:           -1rem;
       top:            9rem;
       transform:      rotate(180deg) translateY(40px);
       writing-mode:   vertical-rl;
       color:          rgba(255, 255, 255, 0.12);
       font-family:    var(--font-display);
       font-weight:    900;
       font-size:      clamp(1.4rem, 2.4vw, 2.4rem);
       letter-spacing: 0.04em;
       user-select:    none;
       pointer-events: none;
       opacity:        0;
       transition:     opacity 800ms ease, transform 800ms cubic-bezier(.22,.61,.36,1);
}

.Span_SkillsVlabel.vlabel-go {
       opacity:        1;
       transform:      rotate(180deg) translateY(0);
}

.D_SkillCats {
       display:               grid;
       grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
       gap:                   1.6rem 2.2rem;
       margin-top:            2rem;
}

.D_SkillCat {
       margin-top:    0;
       display:       grid;
       gap:           1rem;
       align-content: start;
}

.D_SkillCat .D_SkillRow {
       display: grid;
       gap:     0.3rem;
}

.D_SkillCat h4 {
       margin:      0 0 0.4rem;
       color:       var(--blanco);
       font-size:   1.05rem;
       font-weight: 800;
}

.D_SkillCat .D_SkillRow > div:first-child {
       margin-bottom: 0.3rem;
       font-size:     0.85rem;
       font-weight:   600;
}

.D_SkillCat .D_SkillRow b {
       font-size: 0.78rem;
}

.D_SkillCat .D_Bar {
       height: 6px;
}

.D_SkillBars {
       display:    grid;
       gap:        1.2rem;
       margin-top: 2rem;
}

.D_SkillRow > div:first-child {
       display:         flex;
       align-items:     center;
       justify-content: space-between;
       gap:             1rem;
       margin-bottom:   0.5rem;
       color:           var(--blanco);
       font-weight:     800;
}

.D_SkillRow b {
       color:     var(--dorado1);
       font-size: 0.88rem;
}

.D_LangHead {
       text-align: center;
}

.D_LangRings {
       display:         flex;
       flex-wrap:       wrap;
       justify-content: center;
       gap:             clamp(2rem, 6vw, 5rem);
       margin-top:      2.5rem;
}

.D_LangRing {
       position:   relative;
       text-align: center;
       width:      150px;
}

.D_LangRing svg {
       width:     130px;
       height:    130px;
       transform: rotate(-90deg);
}

.D_LangHead,
.D_ContactHead {
       text-align: center;
}

.D_LangHead h2,
.D_ContactHead h2 {
       max-width: none;
}

.D_LangHead {
       margin-inline: auto;
}

.D_LangHead {
       max-width:     none;
       margin-inline: auto;
       text-align:    center;
}

.D_RingBg {
       fill:         none;
       stroke:       rgba(255, 255, 255, 0.12);
       stroke-width: 9;
}

.D_RingFg {
       fill:              none;
       stroke:            var(--dorado1);
       stroke-width:      9;
       stroke-linecap:    round;
       stroke-dasharray:  327;
       stroke-dashoffset: 327;
       filter:            drop-shadow(0 0 8px rgba(201, 152, 26, 0.45));
       transition:        stroke-dashoffset 1100ms cubic-bezier(.22,.61,.36,1);
}

.Span_RingCode {
       position:    absolute;
       top:         65px;
       left:        50%;
       transform:   translate(-50%, -50%);
       color:       var(--blanco);
       font-family: var(--font-display);
       font-weight: 900;
       font-size:   1.5rem;
}

.P_RingName {
       margin:      0.8rem 0 0.2rem;
       color:       var(--blanco);
       font-weight: 800;
}

.P_RingLevel {
       margin:      0;
       color:       var(--dorado1);
       font-size:   0.88rem;
       font-weight: 700;
}

.S_Goals {
       position:   relative;
       overflow:   hidden;
       background: var(--fondo1);
}

.S_Goals h2 {
       color: var(--blanco);
}

.D_GoalsCard {
       position:      relative;
       z-index:       1;
       width:         min(100% - 2rem, var(--container));
       margin-inline: auto;
       padding:       clamp(2rem, 5vw, 3.5rem) clamp(1.6rem, 5vw, 3.5rem);
       border:        1px solid var(--dorado-borde);
       border-radius: 22px;
       background:    var(--fondo2);
}

.H2_GoalsTitle {
       text-align:    center;
       margin-bottom: 2.2rem;
       font-size:     clamp(1.6rem, 3vw, 2.4rem);
       color:         var(--blanco);
}

.Ul_GoalsSteps {
       list-style: none;
       margin:     0;
       padding:    0;
       display:    grid;
       gap:        1.8rem;
}

.D_GoalStep {
       display:               grid;
       grid-template-columns: 3.5rem 1fr;
       align-items:           start;
       gap:                   clamp(1rem, 3vw, 2rem);
}

.Span_GoalNum {
       text-align: center;
}

.Span_GoalNum {
       font-family: var(--font-display);
       font-weight: 900;
       font-size:   clamp(2.4rem, 6vw, 3.6rem);
       line-height: 0.8;
       margin-top:  -0.1em;
       color:       rgba(255, 255, 255, 0.14);
}

.D_GoalText h3 {
       margin-bottom: 0.35rem;
       color:         var(--blanco);
}

.D_GoalText > p:last-child {
       margin:      0;
       color:       var(--gris1);
       font-size:   0.95rem;
       line-height: 1.6;
}

.P_GoalTag {
       margin-top: 0;
}

.P_GoalTag {
       margin:         0 0 0.25rem;
       color:          var(--dorado1);
       font-size:      0.72rem;
       font-weight:    800;
       letter-spacing: 0.08em;
       text-transform: uppercase;
}

.S_Soft {
       background: var(--fondo1);
}

.D_SoftGrid {
       display:     grid;
       gap:         clamp(2rem, 5vw, 4rem);
       align-items: center;
       margin-top:  2.4rem;
}

.D_RadarWrap {
       display:     grid;
       place-items: center;
}

.D_Radar {
       width:     100%;
       max-width: 380px;
       height:    auto;
}

.D_RadarWeb {
       fill:         none;
       stroke:       rgba(255,255,255,0.12);
       stroke-width: 1.5;
}

.D_RadarAxis {
       stroke:       rgba(255,255,255,0.1);
       stroke-width: 1;
}

.D_RadarData {
       fill:         rgba(201,152,26,0.18);
       stroke:       var(--dorado1);
       stroke-width: 2.5;
       filter:       drop-shadow(0 0 10px rgba(201,152,26,0.35));
}

.D_RadarLabel {
       fill:        var(--blanco);
       font-size:   13px;
       font-weight: 700;
}

.D_Radar {
       overflow: visible;
}

.D_RadarData {
       stroke-dasharray:  900;
       stroke-dashoffset: 900;
       fill-opacity:      0;
       transition:        stroke-dashoffset 1400ms cubic-bezier(.22,.61,.36,1),
              fill-opacity 900ms ease 600ms;
}

.D_Radar.radar-go .D_RadarData {
       stroke-dashoffset: 0;
       fill-opacity:      1;
}

.D_RadarLabel {
       opacity:    0;
       transition: opacity 600ms ease 800ms;
}

.D_Radar.radar-go .D_RadarLabel {
       opacity: 1;
}

.Ul_SoftList {
       list-style: none;
       margin:     0;
       padding:    0;
       display:    grid;
       gap:        1rem;
}

.Ul_SoftList li {
       position:     relative;
       padding-left: 1.4rem;
}

.Ul_SoftList li::before {
       content:       "";
       position:      absolute;
       left:          0;
       top:           0.45rem;
       width:         0.6rem;
       height:        0.6rem;
       border-radius: 50%;
       background:    var(--dorado1);
}

.Ul_SoftList h4 {
       margin:    0 0 0.2rem;
       color:     var(--blanco);
       font-size: 1rem;
}

.Ul_SoftList p {
       margin:      0;
       color:       var(--gris1);
       font-size:   0.88rem;
       line-height: 1.5;
}

.Ul_SoftList li {
       opacity:   1;
       transform: none;
}

.S_Values,
.S_Contacto {
       background: var(--fondo2);
}

.S_Values {
       background: var(--fondo2);
}

.D_EthicsGrid {
       display:    grid;
       gap:        clamp(1.5rem, 4vw, 2.5rem);
       margin-top: 2.4rem;
}

.D_EthicsQuote {
       margin:         0;
       padding:        clamp(1.6rem, 4vw, 2.6rem);
       border-radius:  16px;
       background:     var(--dorado1);
       color:          var(--fondo1);
       display:        flex;
       flex-direction: column;
}

.D_EthicsQuote i {
       font-size:     1.6rem;
       opacity:       0.55;
       margin-bottom: 0.8rem;
}

.D_EthicsQuote cite {
       margin-top:  auto;
       font-style:  normal;
       font-weight: 800;
       color:       var(--fondo1);
}

.D_EthicsSide {
       display:         flex;
       flex-direction:  column;
       justify-content: center;
       gap:             1.5rem;
}

.D_EthicsChips {
       display:   flex;
       flex-wrap: wrap;
       gap:       0.6rem;
}

.D_EthicsChips span {
       padding:       0.45rem 1rem;
       border-radius: 999px;
       border:        1px solid var(--dorado1);
       color:         var(--dorado1);
       font-weight:   800;
       font-size:     0.8rem;
}

.P_EthicsBig {
       font-family: var(--font-display);
       font-weight: 900;
       font-size:   clamp(1.3rem, 2.6vw, 1.8rem);
       line-height: 1.25;
       color:       var(--fondo1);
       margin:      0 0 1rem;
}

.P_EthicsSub {
       color:     rgba(10,8,5,0.7);
       font-size: 0.9rem;
       margin:    0 0 1.4rem;
}

.Ul_EthicsList {
       list-style: none;
       margin:     0;
       padding:    0;
       display:    grid;
       gap:        1rem;
}

.Ul_EthicsList li {
       position:     relative;
       padding-left: 1.6rem;
       color:        var(--gris1);
       font-size:    0.95rem;
       line-height:  1.55;
}

.Ul_EthicsList li::before {
       content:     "\f061";
       font-family: "Font Awesome 6 Free";
       font-weight: 900;
       position:    absolute;
       left:        0;
       top:         0.1rem;
       color:       var(--dorado1);
       font-size:   0.8rem;
}

.D_CertCard {
       position: relative;
       overflow: hidden;
}

.D_CertCard::before {
       content: none;
}

.D_CertGrid {
       display:               grid;
       grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
       gap:                   1.2rem;
}

.D_CertCard {
       display:        flex;
       flex-direction: column;
       padding:        1.3rem 1.4rem;
       border-radius:  12px;
}

.D_CertCard h3 {
       margin:    0 0 0.3rem;
       font-size: 1.05rem;
       color:     var(--blanco);
}

.D_CertCard .P_CertOrg {
       margin:      0;
       color:       var(--gris1);
       font-size:   0.85rem;
       line-height: 1.45;
}

.D_CertCard .Span_CertYear {
       margin:      0.55rem 0 0;
       padding:     0;
       border:      none;
       background:  none;
       color:       var(--gris1);
       font-size:   0.8rem;
       font-weight: 600;
}

.D_CertCard .A_CertBtn {
       margin-top:    1rem;
       align-self:    flex-start;
       padding:       0.5rem 1rem;
       border-radius: 999px;
       background:    var(--dorado1);
       color:         var(--fondo1);
       font-weight:   800;
       font-size:     0.82rem;
       box-shadow:    var(--dorado-glow);
       transition:    transform 160ms ease, box-shadow 160ms ease;
}

.D_CertCard .A_CertBtn:hover {
       transform:  translateY(-2px);
       box-shadow: 0 0 28px rgba(201, 152, 26, 0.45);
}

.D_CertMore {
       margin-top: 1.6rem;
       text-align: center;
}

.D_CertMore a {
       color:       var(--dorado1);
       font-weight: 800;
       font-size:   0.95rem;
}

.D_CertMore a:hover {
       text-decoration: underline;
}

.D_CertHead {
       max-width:     none;
       margin-inline: auto;
       text-align:    center;
}

.D_CertGrid {
       justify-content: center;
}

.D_CertCardWrap {
       position:      relative;
       z-index:       1;
       width:         min(100% - 2rem, var(--container));
       margin-inline: auto;
       padding:       clamp(2rem, 5vw, 3.5rem) clamp(1.6rem, 5vw, 3.5rem);
       border:        1px solid var(--dorado-borde);
       border-radius: 22px;
       background:    var(--fondo2);
}

.D_CertHead {
       max-width:     none;
       margin-inline: auto;
       text-align:    center;
}

.D_CertCardWrap .D_CertGrid {
       justify-content: center;
       margin-top:      clamp(1.8rem, 3.5vw, 2.6rem);
}

.D_CertMore {
       text-align: center;
}

.P_CertNote {
       margin:      1.4rem auto 0;
       max-width:   52ch;
       text-align:  center;
       color:       var(--gris1);
       font-size:   0.88rem;
       line-height: 1.5;
}

.D_TimelineList {
       position: relative;
       display:  grid;
       gap:      1rem;
}

.D_TimelineList::before {
       content:    "";
       position:   absolute;
       top:        0;
       bottom:     0;
       left:       0.5rem;
       width:      1px;
       background: var(--dorado-borde);
}

.D_TimelineItem {
       position:      relative;
       margin-left:   2rem;
       padding:       1rem 1.15rem;
       border:        1px solid rgba(201, 152, 26, 0.20);
       border-radius: 8px;
       background:    var(--fondo-card);
}

.D_TimelineItem h3 {
       font-size:     1.05rem;
       margin-bottom: 0.35rem;
}

.D_TimelineItem p {
       font-size:   0.88rem;
       line-height: 1.5;
}

.D_TimelineItem time {
       font-size:     0.78rem;
       margin-bottom: 0.45rem;
}

.D_TimelineItem::before {
       content:       "";
       position:      absolute;
       top:           1.45rem;
       left:          -1.88rem;
       width:         0.75rem;
       aspect-ratio:  1;
       border-radius: 50%;
       background:    var(--dorado1);
       box-shadow:    var(--dorado-glow);
}

.D_TimelineItem time {
       display:       inline-block;
       margin-bottom: 0.65rem;
       color:         var(--dorado1);
       font-weight:   900;
}

.D_TimelineItem p {
       margin-bottom: 0;
}

.D_TimelineList::after {
       content:           "";
       position:          absolute;
       left:              0.5rem;
       bottom:            -2.2rem;
       width:             1px;
       height:            2.2rem;
       background-image:  linear-gradient(var(--dorado-borde) 60%, transparent 0);
       background-size:   1px 8px;
       background-repeat: repeat-y;
}

.D_TimelineItem:nth-child(2).anim-visible {
       transition-delay: 120ms;
}

.D_TimelineItem:nth-child(3).anim-visible {
       transition-delay: 240ms;
}

.D_TimelineItem:nth-child(4).anim-visible {
       transition-delay: 360ms;
}

.D_ContactForm {
       display: grid;
       gap:     1rem;
       padding: clamp(1.1rem, 3vw, 2rem);
}

.D_ContactForm label {
       display:     grid;
       gap:         0.45rem;
       color:       var(--gris1);
       font-size:   0.9rem;
       font-weight: 800;
}

.D_ContactForm input,
.D_ContactForm textarea {
       width:         100%;
       color:         var(--blanco);
       border:        1px solid rgba(255, 255, 255, 0.14);
       border-radius: 8px;
       background:    rgba(10, 8, 5, 0.74);
       padding:       0.95rem 1rem;
       outline:       none;
       transition:    border-color 180ms ease, box-shadow 180ms ease;
}

.D_ContactForm textarea {
       resize:     vertical;
       min-height: 9rem;
}

.D_ContactForm input:focus,
.D_ContactForm textarea:focus {
       border-color: var(--dorado-borde);
       box-shadow:   var(--dorado-glow);
}

.D_ContactCentered {
       max-width:     680px;
       margin-inline: auto;
       text-align:    center;
}

.D_ContactHead {
       margin-bottom: 2rem;
}

.D_ContactCentered .D_ContactForm {
       display:               grid;
       grid-template-columns: 1fr;
       gap:                   0.9rem;
       padding:               0;
       text-align:            left;
}

.D_ContactCentered .D_FormRow {
       display:               grid;
       grid-template-columns: 1fr 1fr;
       gap:                   0.9rem;
}

.D_ContactCentered .D_ContactForm input,
.D_ContactCentered .D_ContactForm textarea {
       width:         100%;
       color:         var(--blanco);
       border:        1px solid rgba(255, 255, 255, 0.18);
       border-radius: 999px;
       background:    rgba(255, 255, 255, 0.03);
       padding:       0.9rem 1.2rem;
       outline:       none;
       transition:    border-color 180ms ease, box-shadow 180ms ease;
}

.D_ContactCentered .D_ContactForm > input,
.D_ContactCentered .D_ContactForm > textarea {
       width: 100%;
}

.D_ContactCentered .D_ContactForm input::placeholder,
.D_ContactCentered .D_ContactForm textarea::placeholder {
       color: rgba(255, 255, 255, 0.45);
}

.D_ContactCentered .D_ContactForm textarea {
       border-radius: 18px;
       resize:        vertical;
       min-height:    8rem;
}

.D_ContactCentered .D_ContactForm input:focus,
.D_ContactCentered .D_ContactForm textarea:focus {
       border-color: var(--dorado-borde);
       box-shadow:   var(--dorado-glow);
}

.D_ContactCentered .P_FormFlash {
       text-align: center;
}

.H2_ContactEcho {
       position:    relative;
       display:     inline-grid;
       line-height: 0.9;
}

.H2_ContactEcho span {
       font-family: var(--font-display);
       font-weight: 900;
       font-size:   clamp(2.6rem, 8vw, 4.5rem);
}

.H2_ContactEcho span:first-child {
       color: var(--blanco);
}

.H2_ContactEcho span:last-child {
       color:      var(--dorado1);
       opacity:    0.85;
       margin-top: -0.15em;
}

.P_ContactSub {
       max-width: 46ch;
       margin:    1rem auto 0;
       color:     var(--gris1);
}

.D_HpField {
       position: absolute;
       left:     -9999px;
}

.P_FormFlash {
       min-height:  1.4rem;
       margin:      0;
       color:       var(--gris1);
       font-weight: 700;
}

.P_FormFlash.ok {
       color: var(--dorado1);
}

.P_FormFlash.error {
       color: var(--blanco);
}

.pp-alt {
       background: var(--fondo2);
}


/* ============================================================
   7b. PÁGINA DE PROYECTO
   ============================================================ */

.S_PpHero {
       padding-top: calc(var(--header-h) + 1.5rem);
}

.A_PpBack {
       display:       inline-flex;
       align-items:   center;
       gap:           .5rem;
       margin-bottom: 1.4rem;
       color:         var(--gris1);
       font-weight:   700;
       font-size:     .9rem;
       transition:    color 160ms ease, gap 160ms ease;
}

.A_PpBack:hover {
       color: var(--dorado1);
       gap:   .8rem;
}

.H1_PpTitle {
       font-size:   clamp(2.2rem,6vw,4rem);
       line-height: 1.02;
       margin:      .2rem 0 .6rem;
}

.P_PpSub {
       color:     var(--gris1);
       font-size: clamp(1rem,2vw,1.2rem);
       max-width: 60ch;
}

.D_PpTags {
       display:   flex;
       flex-wrap: wrap;
       gap:       .5rem;
       margin:    1.2rem 0 2rem;
}

.D_PpTags span {
       padding:       .35rem .85rem;
       border-radius: 999px;
       border:        1px solid var(--dorado-borde);
       background:    var(--dorado-op);
       color:         var(--dorado1);
       font-size:     .78rem;
       font-weight:   800;
}

.D_PpCover {
       border:        1px solid var(--dorado-borde);
       border-radius: 16px;
       overflow:      hidden;
       background:    var(--fondo-card);
}

.D_PpCover img {
       width:      100%;
       max-height: 60vh;
       object-fit: cover;
       display:    block;
       background: rgba(255,255,255,.92);
}

.D_PpNarrow {
       max-width: 820px;
}

.P_PpLead {
       color:       var(--gris1);
       font-size:   clamp(1rem,2vw,1.15rem);
       line-height: 1.7;
}

.D_PpAreas {
       display:               grid;
       grid-template-columns: repeat(auto-fit,minmax(240px,1fr));
       gap:                   1.2rem;
       margin-top:            2rem;
}

.D_PpArea {
       padding:       1.4rem;
       border:        1px solid var(--dorado-borde);
       border-radius: 12px;
       background:    var(--fondo-card);
       transition:    transform 200ms ease, border-color 200ms ease;
}

.D_PpArea:hover {
       transform:    translateY(-4px);
       border-color: var(--dorado1);
}

.Span_PpAreaIcon {
       display:       inline-grid;
       place-items:   center;
       width:         2.6rem;
       aspect-ratio:  1;
       margin-bottom: .9rem;
       border-radius: 50%;
       background:    var(--dorado-op);
       border:        1px solid var(--dorado-borde);
       color:         var(--dorado1);
}

.D_PpArea h3 {
       margin:    0 0 .35rem;
       font-size: 1.05rem;
}

.D_PpArea p {
       margin:      0;
       color:       var(--gris1);
       font-size:   .9rem;
       line-height: 1.55;
}

.D_PpSteps {
       display:    grid;
       gap:        1.6rem;
       margin-top: 2rem;
}

.D_PpStep {
       display:               grid;
       grid-template-columns: 3.5rem 1fr;
       align-items:           start;
       gap:                   clamp(1rem,3vw,2rem);
}

.Span_PpStepNum {
       font-family: var(--font-display);
       font-weight: 900;
       font-size:   clamp(2.2rem,5vw,3.2rem);
       line-height: .8;
       text-align:  center;
       color:       rgba(255,255,255,.14);
}

.P_PpStepFase {
       margin:         0 0 .2rem;
       color:          var(--dorado1);
       font-size:      .72rem;
       font-weight:    800;
       letter-spacing: .08em;
       text-transform: uppercase;
}

.D_PpStepBody h3 {
       margin: 0 0 .3rem;
}

.D_PpStepBody p {
       margin:      0;
       color:       var(--gris1);
       font-size:   .95rem;
       line-height: 1.6;
}

.D_PpTools {
       display:    flex;
       flex-wrap:  wrap;
       gap:        .6rem;
       margin-top: 2rem;
}

.D_PpTools span {
       padding:       .5rem 1rem;
       border-radius: 999px;
       border:        1px solid var(--dorado-borde);
       color:         var(--blanco);
       font-weight:   700;
       font-size:     .85rem;
}

.D_PpRetos {
       display:               grid;
       grid-template-columns: repeat(auto-fit,minmax(280px,1fr));
       gap:                   1.2rem;
       margin-top:            2rem;
}

.D_PpReto {
       padding:       1.3rem;
       border:        1px solid var(--dorado-borde);
       border-radius: 12px;
       background:    var(--fondo-card);
}

.D_PpReto h3 {
       margin:      0 0 .4rem;
       font-size:   1rem;
       display:     flex;
       align-items: center;
       gap:         .5rem;
}

.D_PpReto h3 i {
       color: var(--dorado1);
}

.D_PpReto p {
       margin:      0;
       color:       var(--gris1);
       font-size:   .9rem;
       line-height: 1.55;
}

.Ul_PpResults {
       list-style: none;
       margin:     2rem 0 0;
       padding:    0;
       display:    grid;
       gap:        .9rem;
}

.Ul_PpResults li {
       position:     relative;
       padding-left: 1.8rem;
       color:        var(--gris1);
       line-height:  1.6;
}

.Ul_PpResults li::before {
       content:     "\f00c";
       font-family: "Font Awesome 6 Free";
       font-weight: 900;
       position:    absolute;
       left:        0;
       top:         .15rem;
       color:       var(--dorado1);
       font-size:   .85rem;
}

.D_PpGallery {
       display:               grid;
       grid-template-columns: repeat(auto-fit,minmax(260px,1fr));
       gap:                   1.2rem;
       margin-top:            2rem;
}

.D_PpShot {
       margin:        0;
       border:        1px solid var(--dorado-borde);
       border-radius: 12px;
       overflow:      hidden;
       background:    var(--fondo-card);
}

.D_PpShot img {
       width:        100%;
       aspect-ratio: 1.5;
       object-fit:   cover;
       display:      block;
       background:   rgba(255,255,255,.92);
}

.S_PpCta {
       background: var(--fondo2);
}


/* ============================================================
   8. FOOTER
   ============================================================ */

.Footer {
       padding-block: 2.4rem;
       background:    var(--fondo1);
       border-top:    1px solid rgba(201, 152, 26, 0.16);
}

.D_FooterStack {
       display:        flex;
       flex-direction: column;
       align-items:    center;
       gap:            1.1rem;
       text-align:     center;
}

.Nav_FooterLinks,
.D_SocialLinks {
       display:         flex;
       flex-wrap:       wrap;
       justify-content: center;
       gap:             0.7rem 1rem;
}

.A_FooterLink {
       color:       var(--gris1);
       font-weight: 700;
}

.A_FooterLink:hover {
       color: var(--dorado1);
}

.D_SocialLinks a {
       width:         2.45rem;
       aspect-ratio:  1;
       display:       grid;
       place-items:   center;
       color:         var(--dorado1);
       border:        1px solid var(--dorado-borde);
       border-radius: 50%;
       background:    var(--dorado-op);
}

.D_FooterStack p {
       margin-bottom: 0;
       margin-top:    0.4rem;
       color:         var(--gris1);
       font-size:     0.85rem;
}



/* ============================================================
   7c. REGLAS RESTAURADAS (barras, grids, tarjetas)
   ============================================================ */
.D_Bar {
       position:      relative;
       width:         100%;
       height:        0.72rem;
       overflow:      hidden;
       border-radius: 999px;
       background:    rgba(255, 255, 255, 0.14);
}

.D_Bar span {
       display:       block;
       width:         0%;
       height:        100%;
       border-radius: inherit;
       background:    var(--dorado1);
       box-shadow:    var(--dorado-glow);
       transition:    width 900ms ease;
}

.D_TwoCol {
       display: grid;
       gap:     clamp(2rem, 5vw, 4.5rem);
}

.D_TagList span {
       display:       inline-flex;
       align-items:   center;
       gap:           0.5rem;
       padding:       0.55rem 0.75rem;
       color:         var(--gris1);
       font-size:     0.82rem;
       font-weight:   800;
       border:        1px solid rgba(201, 152, 26, 0.22);
       border-radius: 999px;
       background:    var(--dorado-op);
}


.D_ProfilePanel,
.D_CertCard {
       border:        1px solid rgba(201, 152, 26, 0.20);
       border-radius: 8px;
       background:    var(--fondo-card);
}

.D_CertCard p {
       margin-bottom: 0;
}


/* ============================================================
   10. ANIMACIONES DE ENTRADA
   ============================================================ */

.anim-abajo,
.anim-izquierda,
.anim-derecha {
       transition:  opacity   0.70s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 0.70s cubic-bezier(0.25, 0.46, 0.45, 0.94);
       will-change: opacity, transform;
}

.anim-delay-1 {
       transition-delay: 0.10s;
}

.anim-delay-2 {
       transition-delay: 0.20s;
}

.anim-delay-3 {
       transition-delay: 0.30s;
}

.anim-delay-4 {
       transition-delay: 0.40s;
}

.anim-delay-5 {
       transition-delay: 0.50s;
}


/* ============================================================
   9. KEYFRAMES
   ============================================================ */

@keyframes cue {
       0%, 100% {
              transform: translate(-50%, 0);
       }

       50% {
              transform: translate(-50%, 0.45rem);
       }
}


/* ============================================================
   11. MEDIA QUERIES
   ============================================================ */

@media only screen and (min-width: 480px) {
       .D_Container {
              width: min(100% - 2.5rem, var(--container));
       }

       .D_HeroActions .A_Btn {
              min-width: 10.5rem;
       }
}

@media only screen and (min-width: 768px) {
       .D_StatsGrid {
              grid-template-columns: repeat(4, 1fr);
       }

       .D_StatItem {
              border-bottom: 0;
              border-right:  1px solid rgba(255, 255, 255, 0.08);
       }

       .D_StatItem:last-child {
              border-right: 0;
       }

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

       .D_ContactForm label:nth-of-type(3),
       .D_ContactForm label:nth-of-type(4),
       .A_Btn--submit,
       .P_FormFlash {
              grid-column: 1 / -1;
       }
}

@media only screen and (min-width: 1024px) {
       :root {
              --header-h: 86px;
       }

       .Btn_MenuBars,
       .D_MenuOverlay {
              display: none;
       }

       .Nav_Menu {
              position:       static;
              width:          auto;
              min-height:     auto;
              padding:        0;
              flex-direction: row;
              align-items:    center;
              gap:            0.25rem;
              background:     transparent;
              border-left:    0;
              transform:      none;
       }

       .A_Nav {
              padding: 0.75rem 0.9rem;
       }

       .Nav_Menu .A_Nav--cta {
              margin-top:     0;
              margin-left:    0.55rem;
              padding-inline: 1.05rem;
       }

       .D_HeroGrid {
              grid-template-columns: minmax(0, 0.95fr) minmax(26rem, 0.85fr);
              align-items:           center;
       }

       .D_TwoCol {
              grid-template-columns: minmax(0, 0.95fr) minmax(20rem, 0.75fr);
              align-items:           center;
       }

       .D_CertGrid {
              grid-template-columns: repeat(3, minmax(0, 1fr));
       }

       .D_TimelineList {
              gap: 0;
       }

       .D_TimelineList::before {
              left: 50%;
       }

       .D_TimelineItem {
              width:         calc(50% - 2rem);
              margin-left:   0;
              margin-bottom: 1.1rem;
       }

       .D_TimelineItem:nth-child(odd) {
              justify-self: start;
       }

       .D_TimelineItem:nth-child(even) {
              justify-self: end;
       }

       .D_TimelineItem::before {
              left:  auto;
              right: -2.43rem;
       }

       .D_TimelineItem:nth-child(even)::before {
              right: auto;
              left:  -2.32rem;
       }
}

@media only screen and (min-width: 1280px) {
       .S_Hero {
              min-height: 92vh;
       }

}

@media only screen and (max-width: 1023px) {
       .D_HeroGrid {
              grid-template-columns: 1fr;
       }
}

@media only screen and (max-width: 900px) {
       .D_ProjGrid {
              grid-template-columns: repeat(2, minmax(0, 1fr));
       }

       .D_ProjGrid .D_ProjItem:last-child:nth-child(3n + 1) {
              grid-column: auto;
       }
}

@media only screen and (max-width: 600px) {
       .D_ProjGrid {
              grid-template-columns: 1fr;
       }
}

@media only screen and (max-width: 720px) {
       .D_SkillsFull {
              padding-left: 0;
       }

       .Span_SkillsVlabel {
              display: none;
       }
}

@media only screen and (min-width: 900px) {
       .D_SoftGrid {
              grid-template-columns: 1fr 1fr;
       }
}

@media only screen and (min-width: 900px) {
       .D_EthicsGrid {
              grid-template-columns: 1fr 1fr;
              align-items:           stretch;
       }
}

@media only screen and (min-width: 760px) {
       .D_TimelineList::after {
              left: 50%;
       }
}

@media only screen and (max-width: 560px) {
       .D_ContactCentered .D_FormRow {
              grid-template-columns: 1fr;
       }
}

@media only screen and (max-width:560px) {
       .D_PpStep {
              grid-template-columns: 2.6rem 1fr;
       }
}

@media only screen and (max-width: 1023px) {
       .S_Hero > .D_Container,
       .D_HeroGrid {
              width:         100% !important;
              max-width:     100% !important;
              padding-left:  clamp(1rem, 5vw, 2rem) !important;
              padding-right: clamp(1rem, 5vw, 2rem) !important;
              margin-inline: 0 !important;
              box-sizing:    border-box;
       }
}

@media only screen and (max-width: 1023px) {
       .S_Hero {
              height:                                           100svh;
              /* toda la pantalla */
    padding-top:           var(--header-h);
              /* reserva el header fixed */
    padding-bottom: 0.8rem;
              display:                                          flex;
              align-items:                                      center;
              overflow:                                         hidden;
              box-sizing:                                       border-box;
       }

       .D_HeroGrid {
              grid-template-columns: 1fr;
              gap:                   clamp(0.6rem, 2vh, 1.2rem);
              justify-items:         center;
              align-content:         center;
       }

       /* carrusel arriba, altura limitada por viewport */

       .D_HeroVisual {
              order:     -1;
              width:     100%;
              max-width: 100%;
       }

       .D_HeroCarousel {
              width:         100%;
              max-width:     min(360px, 100%);
              margin-inline: auto;
       }

       .D_HeroSwiper {
              width:     100%;
              max-width: 100%;
              overflow:  hidden;
              padding:   0.3rem 0 0;
       }

       .D_CarSlide {
              width:     100% !important;
              max-width: 100%;
       }

       .Img_CarMedia {
              height: clamp(110px, 20svh, 190px);
       }

       .D_CarInfo {
              padding: 0.6rem 0.85rem 0.75rem;
       }

       .D_CarInfo h3 {
              font-size:     0.95rem;
              margin-bottom: 0.2rem;
       }

       .D_CarInfo p {
              font-size:     0.8rem;
              margin-bottom: 0.45rem;
       }

       .D_CarInfo .D_TagList span {
              font-size: 0.62rem;
              padding:   0.2rem 0.5rem;
       }

       /* contenido abajo */

       .D_HeroCopy {
              order:          1;
              width:          100%;
              max-width:      100%;
              text-align:     center;
              display:        flex;
              flex-direction: column;
              align-items:    center;
              gap:            0.5rem;
              margin-top:     2rem;
       }

       .D_HeroCopy .P_Eyebrow {
              margin:    0;
              font-size: 0.7rem;
       }

       .D_HeroCopy h1 {
              margin:        0;
              max-width:     100%;
              overflow-wrap: break-word;
              font-size:     clamp(1.5rem, 7vw, 2.6rem);
              line-height:   1.0;
       }

       .Span_HeroBadge {
              margin: 0;
       }

       .D_HeroActions {
              justify-content: center;
              width:           60%;
              flex-wrap:       wrap;
              gap:             0.5rem;
              margin:          1rem 0 0 0;
       }

       .D_HeroActions .A_Btn {
              min-height: 2.6rem;
              padding:    0 1.25rem;
              margin-top: .5rem;
       }

       .S_Hero .A_ScrollCue {
              display: none;
       }
}

@media only screen and (max-width: 480px) {
       .Btn_CarNav {
              width: 1.9rem;
       }

       .Btn_CarNav--prev {
              left: 0.15rem;
       }

       .Btn_CarNav--next {
              right: 0.15rem;
       }
}

@media only screen and (max-width: 380px) {
       .D_HeroCopy h1 {
              font-size: clamp(1.4rem, 8vw, 2rem);
       }

       .D_HeroActions {
              flex-direction: column;
              align-items:    stretch;
       }

       .D_HeroActions .A_Btn {
              width: 100%;
       }
}

@media (max-width: 1023px) and (max-height: 680px) {
       .Img_CarMedia {
              height: clamp(85px, 14svh, 130px);
       }

       .D_HeroCopy h1 {
              font-size: clamp(1.4rem, 5.5vh, 2rem);
       }

       .D_HeroCopy {
              gap: 0.4rem;
       }
}


/* ============================================================
   12. ACCESIBILIDAD
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
       *,
       *::before,
       *::after {
              animation-duration:        0.01ms !important;
              animation-iteration-count: 1 !important;
              transition-duration:       0.01ms !important;
              scroll-behavior:           auto !important;
       }

       .anim-abajo,
       .anim-izquierda,
       .anim-derecha {
              opacity:   1;
              transform: none;
       }
}