/* ============================================================
   PROYECTO.CSS — Subpágina de caso de éxito
   Paleta Eclipse: navy + dorado. Secciones alternas claro/oscuro.
   v6
   ============================================================ */

/* ============================================================
   LAYOUT BASE
   ============================================================ */

.Main_Proyecto {
       background:   linear-gradient(180deg, #050B1F 0%, #0E0B24 34%, #050B1F 72%, #080515 100%);
       overflow:     hidden;
}

/* ============================================================
   BOTÓN GHOST (reutilizable en subpágina)
   ============================================================ */

.A_BtnGhost {
       display:         inline-flex;
       align-items:     center;
       gap:             0.6rem;
       padding:         0.9rem 1.8rem;
       background:      transparent;
       color:           var(--blanco-opaco1);
       font-family:     var(--font-body);
       font-size:       var(--fs-base);
       font-weight:     var(--fw-semibold);
       text-decoration: none;
       border:          1px solid var(--blanco-opaco3);
       border-radius:   var(--radius-full);
       transition:      border-color var(--t-fast), color var(--t-fast);
}

.A_BtnGhost:hover {
       border-color: var(--dorado-borde);
       color:        var(--blanco);
}

/* Ghost sobre fondo claro */
.S_ProyCta .A_BtnGhost {
       color:        var(--texto-oscuro);
       border-color: var(--gris-borde);
}

.S_ProyCta .A_BtnGhost:hover {
       border-color: var(--dorado2);
       color:        var(--dorado2);
}

/* ============================================================
   1. HERO DEL PROYECTO (incluye ficha resumen)
   ============================================================ */

.S_ProyHero {
       position:        relative;
       display:         flex;
       flex-direction:  column;
       max-width:       100%;
       margin:          0;
       overflow:        hidden;
       padding-bottom:  var(--gap-2xl);
}

/* Imagen de fondo — muy presente */
.D_ProyHeroBg {
       position:       absolute;
       inset:          0;
       background:     url('img/trabajo-patymia-desktop.webp') center 30% / cover no-repeat;
       opacity:        0.350;
       z-index:        0;
       pointer-events: none;
}

/* Overlay direccional: oscuro izquierda donde va el texto, semitransparente centro-derecha */
.S_ProyHero::before {
       content:    '';
       position:   absolute;
       inset:      0;
       background: linear-gradient(
           100deg,
           rgba(5,11,31,0.90) 0%,
           rgba(5,11,31,0.65) 42%,
           rgba(5,11,31,0.50) 65%,
           rgba(5,11,31,0.72) 100%
       );
       z-index:    1;
       pointer-events: none;
}

/* Fade hacia abajo para que la ficha quede integrada */
.S_ProyHero::after {
       content:    '';
       position:   absolute;
       bottom:     0;
       left:       0;
       right:      0;
       height:     220px;
       background: linear-gradient(to bottom, transparent 0%, rgba(5,11,31,0.96) 100%);
       z-index:    1;
       pointer-events: none;
}

/* Fila superior: texto + mockup */
.D_ProyHeroContent {
       position:              relative;
       z-index:               2;
       display:               grid;
       grid-template-columns: 1.05fr 0.95fr;
       align-items:           center;
       gap:                   var(--gap-xl);
       width:                 100%;
       max-width:             var(--max-width);
       margin:                0 auto;
       padding:               calc(var(--gap-2xl) + 4rem) var(--px-section) var(--gap-xl);
}

.D_ProyHeroInner {
       position:  relative;
       z-index:   2;
       max-width: 620px;
}

/* Ficha resumen — dentro del hero, debajo */
.S_ProyHero .D_ProyFichaGrid {
       position:              relative;
       z-index:               2;
       display:               grid;
       grid-template-columns: repeat(4, 1fr);
       gap:                   1px;
       width:                 calc(100% - var(--px-section) * 2);
       max-width:             var(--max-width);
       margin:                0 auto;
       background:            rgba(255,255,255,0.08);
       border:                1px solid rgba(255,255,255,0.12);
       border-radius:         var(--radius-lg);
       overflow:              hidden;
}

.A_ProyVolver {
       display:         inline-flex;
       align-items:     center;
       gap:             0.5rem;
       margin-bottom:   var(--gap-md);
       color:           var(--dorado1);
       font-family:     var(--font-body);
       font-size:       var(--fs-sm);
       font-weight:     var(--fw-semibold);
       text-decoration: none;
       transition:      gap var(--t-fast);
}

.A_ProyVolver:hover {
       gap: 0.85rem;
}

.P_ProyEyebrow {
       margin-bottom:  var(--gap-sm);
       color:          var(--blanco-opaco2);
       font-family:    var(--font-body);
       font-size:      var(--fs-sm);
       font-weight:    var(--fw-semibold);
       letter-spacing: 0.08em;
       text-transform: uppercase;
}

.H1_ProyHero {
       margin-bottom: var(--gap-md);
       font-family:   var(--font-display);
       font-size:     var(--fs-hero);
       font-weight:   var(--fw-black);
       line-height:   1.02;
       color:         var(--blanco);
       max-width:     13ch;
}

.P_ProyHeroDesc {
       max-width:     50ch;
       margin-bottom: var(--gap-lg);
       color:         var(--blanco-opaco1);
       font-family:   var(--font-body);
       font-size:     var(--fs-md);
       line-height:   1.75;
}

.D_ProyHeroBotones {
       display:   flex;
       flex-wrap: wrap;
       gap:       var(--gap-sm);
}

/* Mockup browser */
.D_ProyHeroMockup {
       position:      relative;
       z-index:       2;
       margin:        0;
       border-radius: var(--radius-lg);
       overflow:      hidden;
       background:    rgba(255,255,255,0.06);
       border:        1px solid rgba(255,255,255,0.14);
       box-shadow:    0 28px 80px rgba(0,0,0,0.50);
}

.D_ProyHeroMockup img {
       display:    block;
       width:      100%;
       height:     auto;
       object-fit: contain;
}

.D_ProyBrowserBar {
       display:               grid;
       grid-template-columns: auto auto auto 1fr;
       align-items:           center;
       gap:                   0.45rem;
       padding:               0.78rem 1rem;
       background:            rgba(255,255,255,0.08);
       border-bottom:         1px solid rgba(255,255,255,0.12);
}

.D_ProyBrowserBar span {
       width:         0.62rem;
       height:        0.62rem;
       border-radius: var(--radius-full);
       background:    var(--dorado1);
}

.D_ProyBrowserBar span:nth-child(2) { background: var(--verde1); }
.D_ProyBrowserBar span:nth-child(3) { background: var(--morado1); }

.D_ProyBrowserBar small {
       justify-self: end;
       color:        var(--blanco-opaco2);
       font-family:  var(--font-body);
       font-size:    var(--fs-xs);
}

.D_ProyHeroMockup figcaption {
       padding:     0.85rem 1rem;
       color:       var(--blanco-opaco2);
       font-family: var(--font-body);
       font-size:   var(--fs-sm);
       background:  rgba(5,11,31,0.72);
}

/* ============================================================
   3 + 4. BLOQUES TEXTO + IMAGEN — fondo claro
   ============================================================ */

/* Ficha items — dentro del hero */
.D_ProyFichaItem {
       display:        flex;
       flex-direction: column;
       gap:            0.4rem;
       padding:        var(--gap-lg);
       background:     rgba(5,11,31,0.70);
       backdrop-filter: blur(6px);
}

.Span_FichaLabel {
       color:          var(--dorado1);
       font-family:    var(--font-body);
       font-size:      var(--fs-xs);
       font-weight:    var(--fw-bold);
       letter-spacing: 0.08em;
       text-transform: uppercase;
}

.Span_FichaValue {
       color:       var(--blanco);
       font-family: var(--font-body);
       font-size:   var(--fs-base);
       font-weight: var(--fw-medium);
}

.S_ProyBloque {
       background:     var(--gris-claro);
       border-top:     1px solid var(--gris-borde);
       border-bottom:  1px solid var(--gris-borde);
       padding:        var(--gap-2xl) var(--px-section);
       display:        flex;
       flex-direction: column;
       align-items:    center;
}

.D_ProyBloqueInner {
       display:               grid;
       grid-template-columns: 1fr 1fr;
       align-items:           center;
       gap:                   var(--gap-xl);
       width:                 100%;
       max-width:             var(--max-width);
       margin:                0 auto;
}

.D_ProyBloqueInner--invertido .D_ProyTextoCol {
       order: 2;
}

/* Kicker */
.P_ProyKicker {
       display:        flex;
       align-items:    center;
       gap:            0.7rem;
       margin-bottom:  var(--gap-sm);
       color:          var(--dorado2);
       font-family:    var(--font-body);
       font-size:      var(--fs-sm);
       font-weight:    var(--fw-bold);
       letter-spacing: 0.06em;
       text-transform: uppercase;
}

.Span_KickerNum {
       display:         inline-flex;
       align-items:     center;
       justify-content: center;
       width:           2rem;
       height:          2rem;
       background:      rgba(212,146,14,0.12);
       border:          1px solid rgba(212,146,14,0.35);
       border-radius:   var(--radius-full);
       font-size:       var(--fs-xs);
       color:           var(--dorado2);
       flex-shrink:     0;
}

/* Títulos y párrafos — versión oscura (default) */
.H2_ProyTitulo {
       margin-bottom: var(--gap-md);
       font-family:   var(--font-display);
       font-size:     var(--fs-3xl);
       font-weight:   var(--fw-bold);
       line-height:   1.1;
       color:         var(--blanco);
}

.P_ProyParrafo {
       margin-bottom: var(--gap-md);
       color:         var(--blanco-opaco1);
       font-family:   var(--font-body);
       font-size:     var(--fs-md);
       line-height:   1.8;
}

.P_ProyParrafo--centro {
       max-width:  60ch;
       margin:     0 auto var(--gap-md);
       text-align: center;
}

/* Texto negro en secciones claras */
.S_ProyBloque .H2_ProyTitulo,
.S_ProyColorimetria .H2_ProyTitulo,
.S_ProyTestimonio .Blockquote_Proy,
.S_ProyCta .H2_ProyCta {
       color: var(--texto-oscuro);
}

.S_ProyBloque .P_ProyParrafo,
.S_ProyColorimetria .P_ProyParrafo,
.S_ProyCta .P_ProyCtaDesc {
       color: var(--texto-gris);
}

.S_ProyBloque .Ul_ProyDolores li,
.S_ProyBloque .D_ProyFeature p,
.S_ProyBloque .D_ProyFeature b {
       color: var(--texto-oscuro);
}

.S_ProyBloque .D_ProyFeature b {
       color: var(--texto-oscuro);
}

/* Lista de dolores */
.Ul_ProyDolores {
       list-style:     none;
       display:        flex;
       flex-direction: column;
       gap:            var(--gap-sm);
       margin-top:     var(--gap-md);
}

.Ul_ProyDolores li {
       display:     flex;
       align-items: flex-start;
       gap:         0.7rem;
       color:       var(--texto-oscuro);
       font-family: var(--font-body);
       font-size:   var(--fs-base);
       line-height: 1.6;
}

.Ul_ProyDolores i {
       color:      #DC2626;
       margin-top: 0.18em;
       flex-shrink: 0;
}

/* Imagen en bloques */
.D_ProyImagen {
       margin:        0;
       border-radius: var(--radius-lg);
       overflow:      hidden;
       box-shadow:    var(--shadow-card);
       background:    #FFFFFF;
       border:        1px solid var(--gris-borde);
}

.D_ProyImagen img {
       display:    block;
       width:      100%;
       height:     auto;
       object-fit: contain;
}

.D_ProyImagen--angled {
       transform: rotate(1deg);
}

.D_ProyImagen--phone {
       max-width:    260px;
       justify-self: center;
}

.D_ProyImagen--phone img {
       max-height:  480px;
       object-fit:  contain;
}

/* Features (bloque 02) */
.D_ProyFeatures {
       display:        flex;
       flex-direction: column;
       gap:            var(--gap-md);
       margin-top:     var(--gap-lg);
}

.D_ProyFeature {
       display:     flex;
       align-items: flex-start;
       gap:         var(--gap-md);
       font-family: var(--font-body);
       font-size:   var(--fs-base);
       line-height: 1.65;
}

.D_ProyFeature i {
       display:         inline-flex;
       align-items:     center;
       justify-content: center;
       width:           2.6rem;
       height:          2.6rem;
       flex-shrink:     0;
       background:      rgba(212,146,14,0.12);
       border-radius:   var(--radius-md);
       color:           var(--dorado2);
       font-size:       1rem;
       margin-top:      0.1em;
}

/* ============================================================
   5. COMPOSICIÓN — oscura
   ============================================================ */

.S_ProyComposicion {
       background:     var(--fondo2);
       padding:        var(--gap-2xl) var(--px-section);
       display:        flex;
       flex-direction: column;
       align-items:    center;
}

.D_ProyCompHead {
       text-align:    center;
       margin-bottom: var(--gap-xl);
       max-width:     var(--max-width);
       width:         100%;
}

.D_ProyCompHead .P_ProyKicker {
       justify-content: center;
       color:           var(--dorado1);
}

.D_ProyCompHead .Span_KickerNum {
       color:        var(--dorado1);
       border-color: rgba(245,184,66,0.35);
       background:   rgba(245,184,66,0.12);
}

.D_ProyCompGrid {
       display:               grid;
       grid-template-columns: repeat(3, 1fr);
       gap:                   var(--gap-lg);
       max-width:             var(--max-width);
       width:                 100%;
}

.D_ProyCompCard {
       display:        flex;
       flex-direction: column;
       gap:            var(--gap-sm);
       padding:        var(--gap-lg);
       background:     var(--degradado-card-d);
       border:         1px solid var(--blanco-opaco3);
       border-radius:  var(--radius-lg);
       transition:     transform var(--t-mid), border-color var(--t-mid);
}

.D_ProyCompCard:hover {
       transform:    translateY(-6px);
       border-color: var(--dorado-borde);
}

.Span_CompIcon {
       display:         inline-flex;
       align-items:     center;
       justify-content: center;
       width:           3.2rem;
       height:          3.2rem;
       background:      var(--degradado-badge);
       border-radius:   var(--radius-md);
       color:           #FFFFFF;
       font-size:       1.3rem;
}

.H3_ProyComp {
       font-family: var(--font-display);
       font-size:   var(--fs-xl);
       font-weight: var(--fw-bold);
       color:       var(--blanco);
}

.D_ProyCompCard p {
       color:       var(--blanco-opaco1);
       font-family: var(--font-body);
       font-size:   var(--fs-base);
       line-height: 1.75;
}

/* ============================================================
   6. COLORIMETRÍA — fondo claro
   ============================================================ */

.S_ProyColorimetria {
       background:            var(--gris-claro);
       border-top:            1px solid var(--gris-borde);
       border-bottom:         1px solid var(--gris-borde);
       display:               grid;
       grid-template-columns: 0.9fr 1.1fr;
       align-items:           center;
       gap:                   var(--gap-xl);
       padding:               var(--gap-2xl) var(--px-section);
       max-width:             100%;
}

/* Contenido interno centrado */
.D_ProyColorText {
       max-width: 520px;
}

.D_ProyColorGrid {
       display:               grid;
       grid-template-columns: repeat(2, 1fr);
       gap:                   var(--gap-md);
}

.D_ProyColor {
       display:             grid;
       grid-template-columns: auto 1fr;
       grid-template-areas:
           "swatch name"
           "swatch note";
       align-items:         center;
       column-gap:          var(--gap-md);
       padding:             var(--gap-md);
       background:          #FFFFFF;
       border:              1px solid var(--gris-borde);
       border-radius:       var(--radius-lg);
       box-shadow:          var(--shadow-sm);
}

.D_ProyColor span {
       grid-area:     swatch;
       width:         clamp(3rem, 6vw, 4rem);
       aspect-ratio:  1;
       border-radius: 0.9rem;
       background:    var(--c);
       border:        1px solid rgba(0,0,0,0.10);
       box-shadow:    inset 0 0 0 1px rgba(255,255,255,0.14);
}

.D_ProyColor strong {
       grid-area:   name;
       color:       var(--texto-oscuro);
       font-family: var(--font-display);
       font-size:   var(--fs-lg);
       line-height: 1.1;
}

.D_ProyColor small {
       grid-area:   note;
       color:       var(--texto-gris);
       font-family: var(--font-body);
       font-size:   var(--fs-sm);
}

/* ============================================================
   7. GALERÍA — oscura, layout reestructurado
   ============================================================ */

.S_ProyGaleria {
       background:     var(--fondo1);
       padding:        var(--gap-2xl) var(--px-section);
       display:        flex;
       flex-direction: column;
       align-items:    center;
       gap:            var(--gap-xl);
}

.S_ProyGaleria .D_ProyCompHead {
       margin-bottom: 0;
}

/* Grid: imagen featured a la izquierda + columna derecha */
.D_ProyGaleriaGrid {
       display:               grid;
       grid-template-columns: 1.4fr 1fr;
       gap:                   var(--gap-md);
       width:                 100%;
       max-width:             var(--max-width);
       align-items:           stretch;
}

/* Columna derecha: dos filas */
.D_ProyGaleriaCol {
       display:        flex;
       flex-direction: column;
       gap:            var(--gap-md);
}

.D_ProyGalItem {
       position:      relative;
       margin:        0;
       border-radius: var(--radius-lg);
       overflow:      hidden;
       border:        1px solid var(--blanco-opaco3);
       background:    #0D1627;
}

.D_ProyGalItem--featured {
       min-height: clamp(22rem, 36vw, 36rem);
}

.D_ProyGaleriaCol .D_ProyGalItem {
       flex:       1;
       min-height: clamp(10rem, 17vw, 17rem);
}

.D_ProyGalItem img {
       display:          block;
       width:            100%;
       height:           100%;
       object-fit:       contain;
       object-position:  center center;
       background-color: #0D1627;
       transition:       transform 0.55s ease;
}

.D_ProyGalItem:hover img {
       transform: scale(1.025);
}

.D_ProyGalItem figcaption {
       position:    absolute;
       left:        0;
       right:       0;
       bottom:      0;
       padding:     var(--gap-md);
       background:  linear-gradient(transparent, rgba(5,11,31,0.92));
       color:       var(--blanco);
       font-family: var(--font-body);
       font-size:   var(--fs-sm);
       font-weight: var(--fw-medium);
}

/* ============================================================
   8. RESULTADOS — fondo proceso (oscuro con tono)
   ============================================================ */

.S_ProyResultados {
       position:   relative;
       background: var(--fondo-proceso);
       border-top: 1px solid var(--blanco-opaco3);
       padding:    var(--gap-2xl) 0;
}

.D_ProyResInner {
       max-width: var(--max-width);
       margin:    0 auto;
       padding:   0 var(--px-section);
}

.P_ProyKicker--claro {
       color: var(--dorado1);
}

.P_ProyKicker--claro .Span_KickerNum {
       color:        var(--dorado1);
       border-color: rgba(245,184,66,0.35);
       background:   rgba(245,184,66,0.12);
}

.D_ProyMetricas {
       display:               grid;
       grid-template-columns: repeat(4, 1fr);
       gap:                   var(--gap-lg);
       margin-top:            var(--gap-xl);
}

.D_ProyMetrica {
       display:         flex;
       flex-direction:  column;
       align-items:     center;
       justify-content: center;
       gap:             0.4rem;
       padding:         var(--gap-lg);
       min-height:      10rem;
       background:      rgba(255,255,255,0.03);
       border:          1px solid var(--blanco-opaco3);
       border-radius:   var(--radius-lg);
       text-align:      center;
}

.Span_MetricaNum {
       font-family:             var(--font-display);
       font-size:               clamp(2rem, 4vw, 3.2rem);
       font-weight:             var(--fw-black);
       background:              var(--degradado-badge);
       -webkit-background-clip: text;
       background-clip:         text;
       -webkit-text-fill-color: transparent;
}

.Span_MetricaLabel {
       color:       var(--blanco-opaco1);
       font-family: var(--font-body);
       font-size:   var(--fs-sm);
       line-height: 1.5;
}

/* ============================================================
   9. TESTIMONIO — fondo claro
   (sin borde inferior: se une visualmente con el CTA)
   ============================================================ */

.S_ProyTestimonio {
       background:     var(--gris-claro);
       border-top:     1px solid var(--gris-borde);
       padding:        var(--gap-2xl) var(--px-section) var(--gap-xl);
       display:        flex;
       justify-content: center;
}

.D_ProyTestimonio {
       position:      relative;
       margin:        0;
       padding:       var(--gap-xl);
       background:    #FFFFFF;
       border:        1px solid var(--gris-borde);
       border-radius: var(--radius-lg);
       box-shadow:    var(--shadow-card);
       text-align:    center;
       max-width:     760px;
       width:         100%;
}

.I_ProyComillas {
       color:         var(--dorado2);
       font-size:     2rem;
       margin-bottom: var(--gap-md);
       opacity:       0.85;
       display:       block;
}

.Blockquote_Proy {
       margin:      0 0 var(--gap-lg);
       font-family: var(--font-display);
       font-size:   var(--fs-xl);
       font-style:  italic;
       line-height: 1.55;
       color:       var(--texto-oscuro);
}

.D_ProyTestiAutor {
       display:        flex;
       flex-direction: column;
       gap:            0.2rem;
}

.Span_TestiNombre {
       color:       var(--dorado2);
       font-family: var(--font-body);
       font-size:   var(--fs-md);
       font-weight: var(--fw-bold);
}

.Span_TestiCargo {
       color:       var(--texto-gris);
       font-family: var(--font-body);
       font-size:   var(--fs-sm);
}

/* ============================================================
   10. CTA FINAL — fondo claro, sin borde superior
   (va pegado al testimonio: mismo fondo, sin divider)
   ============================================================ */

.S_ProyCta {
       background:     var(--gris-claro);
       padding:        0 var(--px-section) var(--gap-2xl);
       display:        flex;
       justify-content: center;
}

.D_ProyCtaInner {
       position:      relative;
       padding:       var(--gap-2xl) var(--gap-xl);
       background:    #FFFFFF;
       border:        1px solid var(--gris-borde);
       border-radius: var(--radius-lg);
       box-shadow:    var(--shadow-card);
       text-align:    center;
       overflow:      hidden;
       max-width:     860px;
       width:         100%;
}

/* Acento dorado suave de fondo */
.D_ProyCtaInner::after {
       content:    '';
       position:   absolute;
       top:        -60%;
       left:       50%;
       transform:  translateX(-50%);
       width:      70%;
       height:     100%;
       background: radial-gradient(circle, rgba(212,146,14,0.08) 0%, transparent 70%);
       filter:     blur(40px);
       pointer-events: none;
       z-index:    0;
}

.H2_ProyCta {
       position:      relative;
       z-index:       1;
       margin-bottom: var(--gap-md);
       font-family:   var(--font-display);
       font-size:     var(--fs-3xl);
       font-weight:   var(--fw-bold);
       color:         var(--texto-oscuro);
}

.P_ProyCtaDesc {
       position:    relative;
       z-index:     1;
       max-width:   52ch;
       margin:      0 auto var(--gap-lg);
       color:       var(--texto-gris);
       font-family: var(--font-body);
       font-size:   var(--fs-md);
       line-height: 1.75;
}

.D_ProyCtaBotones {
       position:        relative;
       z-index:         1;
       display:         flex;
       flex-wrap:       wrap;
       justify-content: center;
       gap:             var(--gap-sm);
}

/* Altura mínima consistente en botones */
.D_ProyHeroBotones .A_BtnPrimario,
.D_ProyHeroBotones .A_BtnGhost,
.D_ProyCtaBotones .A_BtnPrimario,
.D_ProyCtaBotones .A_BtnGhost {
       min-height: 3rem;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

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

    .D_ProyColorText {
        max-width: none;
        text-align: center;
    }

    .D_ProyColorText .P_ProyKicker {
        justify-content: center;
    }
}

@media only screen and (max-width: 980px) {
    .D_ProyHeroContent {
        grid-template-columns: 1fr;
        gap:                   var(--gap-lg);
        text-align:            center;
        padding-bottom:        var(--gap-lg);
    }

    .D_ProyHeroInner { order: 2; max-width: none; }
    .D_ProyHeroMockup { order: 1; max-width: 480px; margin: 0 auto; }

    .A_ProyVolver { justify-content: center; }
    .H1_ProyHero  { max-width: none; margin-left: auto; margin-right: auto; }
    .D_ProyHeroBotones { justify-content: center; }

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

    .D_ProyBloqueInner {
        grid-template-columns: 1fr;
        gap:                   var(--gap-lg);
    }

    .D_ProyBloqueInner--invertido .D_ProyTextoCol { order: 0; }
    .D_ProyImagen--angled { transform: none; }
    .D_ProyImagen--phone  { max-width: 220px; }

    .D_ProyCompGrid { grid-template-columns: 1fr; }

    .D_ProyGaleriaGrid { grid-template-columns: 1fr; }

    .D_ProyGaleriaCol { flex-direction: row; }

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

@media only screen and (max-width: 640px) {
    .D_ProyHeroContent {
        padding-top: calc(var(--gap-2xl) + 3rem);
    }

    .S_ProyHero .D_ProyFichaGrid { grid-template-columns: 1fr; }

    .D_ProyColorGrid { grid-template-columns: 1fr; }

    .D_ProyGaleriaCol { flex-direction: column; }

    .D_ProyMetricas { grid-template-columns: 1fr; }

    .D_ProyBrowserBar small {
        max-width:     10rem;
        overflow:      hidden;
        text-overflow: ellipsis;
        white-space:   nowrap;
    }

    .D_ProyHeroBotones .A_BtnPrimario,
    .D_ProyHeroBotones .A_BtnGhost,
    .D_ProyCtaBotones .A_BtnPrimario,
    .D_ProyCtaBotones .A_BtnGhost {
        width:           100%;
        justify-content: center;
    }

    .D_ProyCtaInner { padding: var(--gap-xl) var(--gap-lg); }
    .D_ProyTestimonio { padding: var(--gap-lg); }
}

/* ============================================================
   ACCESIBILIDAD
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    .D_ProyGalItem img { transition: none; }
    .D_ProyCompCard    { transition: none; }
}