/* Tema claro · Equis Mobile
   Va DESPUES de styles.css y solo cambia color, nunca estructura.
   La portada y los bloques de foto siguen oscuros a proposito: los renders de
   Apple estan iluminados para fondo claro y las fotos de camara son oscuras;
   mezclarlos en un mismo plano ensucia las dos cosas. */
:root{
  --negro:#FFFFFF;
  --carbon:#FFFFFF;
  --superficie:#F5F5F7;
  --linea:rgba(0,0,0,.12);
  --texto:#1D1D1F;
  --tenue:#6E6E73;
  --lima:#B8FF2E;          /* se queda para el boton */
  --verde-texto:#3E6E00;   /* el lima no se lee sobre blanco */
}
html{background:#0A0A0D}
body{background:#FFFFFF;color:#1D1D1F}
/* La barra arranca transparente sobre la foto del hero y toma el fondo claro al
   pasarlo (como en /outlet). Antes una franja blanca cortaba la portada. */
.barra{background:transparent;border-bottom:1px solid transparent;
  transition:background .25s ease,border-color .25s ease}
.barra img{filter:none}
.barra-cupos{color:rgba(255,255,255,.82)}
.barra-cupos b{color:var(--lima)}
.barra .mini-cta{background:var(--lima);color:#0A0A0A}

.barra.solida{background:rgba(255,255,255,.82);border-bottom-color:rgba(0,0,0,.1)}
.barra.solida img{filter:invert(1)}
.barra.solida .barra-cupos{color:#1D1D1F}
.barra.solida .barra-cupos b{color:var(--verde-texto)}
.barra.solida .mini-cta{background:#1D1D1F;color:#fff}
.eyebrow{color:var(--verde-texto)}
.mini-cta{background:#1D1D1F;color:#fff}
.cta{background:#1D1D1F;color:#fff}
.cta-fantasma{border-color:rgba(0,0,0,.25);color:#1D1D1F}
.enlace{color:var(--verde-texto)}
.paso .n{background:var(--verde-texto);color:#fff}
.resumen .abono b{color:var(--verde-texto)}

/* la portada y los lienzos siguen oscuros, como bloques sobre el blanco */
.portada{border-radius:0}
.portada-velo{background:linear-gradient(180deg,rgba(10,10,10,.5) 0%,rgba(10,10,10,.05) 32%,rgba(10,10,10,.72) 78%,rgba(10,10,10,.92) 100%)}
.portada h1,.portada .frase,.hero-precio b{color:#fff}
.portada h1 .fino{color:rgba(255,255,255,.62)}
.portada .frase{color:rgba(255,255,255,.78)}
.hero-precio{color:rgba(255,255,255,.65)}
.portada .cta{background:var(--lima);color:#0A0A0A}
.portada .cta-fantasma{border-color:rgba(255,255,255,.3);color:#fff}
.portada .eyebrow{color:var(--lima)}

/* los bloques de foto tambien van a sangre, como el del diafragma */
.lienzo{border-radius:0;margin:0;max-width:none;overflow:hidden}
/* el diafragma va a sangre: ocupa todo el ancho, sin esquinas */
.apertura{border-radius:0;margin:0;max-width:none;width:100%}
.lienzo::after{background:linear-gradient(180deg,rgba(10,10,10,.45) 0%,rgba(10,10,10,0) 28%,rgba(10,10,10,.78) 72%,rgba(10,10,10,.94) 100%)}
.lienzo-texto h2{color:#fff}
.lienzo-texto h2 .fino{color:rgba(255,255,255,.62)}
.lienzo-texto p{color:rgba(255,255,255,.78)}
.lienzo-texto .eyebrow{color:var(--lima)}

.marcador{background:var(--superficie);border-color:rgba(0,0,0,.08)}
.rejilla i{background:#7A2E42}
.rejilla i.tomado{background:rgba(0,0,0,.10)}
.escaparate{background:var(--superficie);border-color:rgba(0,0,0,.08)}
.escaparate::before{opacity:.35}
.escaparate-foto{background:#FFFFFF}
.conmutador{background:#FFFFFF;border-color:rgba(0,0,0,.12)}
.conmutador button[aria-selected="true"]{background:#1D1D1F;color:#fff}
.capacidades button{background:#FFFFFF;border-color:rgba(0,0,0,.12)}
.capacidades button[aria-selected="true"]{border-color:#1D1D1F;background:#FFFFFF}
.paso,.ficha{background:var(--superficie);border-color:rgba(0,0,0,.08)}
.duo{background:linear-gradient(135deg,#F0E6E9,#F5F5F7);border-color:rgba(0,0,0,.08)}
/* el talon vive sobre la foto oscura: conserva su paleta */
.tamanos-foto{-webkit-mask-image:linear-gradient(180deg,#000 74%,rgba(0,0,0,.4) 90%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 74%,rgba(0,0,0,.4) 90%,transparent 100%)}
/* la ventana de la tienda se queda oscura: lleva foto a sangre */
.dialogo .cta{background:var(--lima);color:#0A0A0A}
footer{border-top-color:rgba(0,0,0,.1)}

/* en celular los bloques de foto van a sangre, sin esquinas redondeadas */
@media(max-width:760px){
  .lienzo{border-radius:0;max-width:none}
}