/* Pampling - Entrega 1 a IT: Home */
/* Plantilla: la de la portada (home) */
/* Cargar despues de las hojas de estilo del sitio. */
/* Generado el 2026-09-29 desde el laboratorio (puerto 3019, sesion #1.01) */

/* >>> UX-HOME-01 | Explora nuestras camisetas: dos filas en monitor y seis prendas en movil | paginas: Portada */
/* UX-HOME-01 - "Explora nuestras camisetas" se queda en 2 filas en monitor y 6 prendas en movil.
   No se borra ninguna tarjeta: se ocultan las que sobran, para que ninguna pierda
   su enlace ni su comportamiento y el cambio se pueda activar y desactivar.
   En produccion lo correcto es que el backend sirva 8 productos en vez de 20.

   Identificacion del bloque: es la unica fila .row.gx-2.gx-lg-3 que lleva su
   titulo como hijo directo. La rejilla de BESTSELLERS tiene las mismas clases
   pero su titulo (h1) esta fuera de la fila, asi que no la toca. */

/* Monitor (>=992px): 4 por fila -> se ven 8 = 2 filas */
@media (min-width: 992px) {
  .row.gx-2.gx-lg-3:not(.ux-seccion):has(> h2.titulo_h1) > div.col-lg-3:nth-of-type(n + 9) { display: none; }
}

/* Tablet (768-991px): 3 por fila -> se ven 6 = 2 filas
   Movil (<768px):     2 por fila -> se ven 6 = 3 filas */
@media (max-width: 991.98px) {
  .row.gx-2.gx-lg-3:not(.ux-seccion):has(> h2.titulo_h1) > div.col-lg-3:nth-of-type(n + 7) { display: none; }
}


/* >>> UX-HOME-04 | Encaje visual de las secciones nuevas | paginas: Portada */
/* UX-HOME-04 - Encaje de las dos secciones nuevas en la home. */

/* Aire entre secciones */
.ux-seccion { margin-top: 40px; }
@media (max-width: 767.98px) { .ux-seccion { margin-top: 28px; } }

/* Fila del boton de cada seccion nueva */
.ux-seccion__mas { padding-top: 20px; }

/* Sudaderas: 12 en monitor (3 filas de 4), 6 en tablet (2 filas de 3) y en
   movil (3 filas de 2). Antes 4. Alejandro, 2026-09-23. */
@media (max-width: 991.98px) {
  .ux-seccion--sudaderas > div.col-lg-3:nth-of-type(n + 7) { display: none; }
}

/* Licencias: 8 en monitor (2 filas), 6 en tablet (2 filas), 6 en movil (3 filas) */
@media (max-width: 991.98px) {
  .ux-seccion--licencias > div.col-lg-3:nth-of-type(n + 7) { display: none; }
}


/* >>> UX-HOME-06 | Los cinco servicios, deslizables en movil | paginas: Portada */
/* =========================================================
   UX-HOME-06 - Los cinco servicios, deslizables en movil
   =========================================================
   En movil el sitio los pinta al 29% de ancho en dos filas, 3 + 2, y el
   bloque se come mas de 400px de alto para cinco frases cortas. Pasa a una
   sola fila que se desliza con el dedo.

   Cada tarjeta mide el 40% del ancho, a proposito: caben dos enteras y
   asoma un trozo de la tercera. Si cupieran exactas, nadie sabria que hay
   mas; el trozo que asoma es lo que avisa de que se puede deslizar.

   Los selectores llevan .container-fluid-gris delante porque el sitio usa
   ".container .item-servicios" y su hoja va despues de la del laboratorio:
   con la misma fuerza, perderiamos.                                       */

@media (max-width: 940px) {
  .container-fluid-gris .container .item-servicios {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 16px;
    padding-left: 16px;
    padding-right: 16px;
    text-align: left;
    /* Sin barra en movil: con el dedo no hace falta y el trozo que asoma ya
       avisa. Pero con raton no hay dedo, y sin barra no habria forma de
       moverlo: ver el bloque de abajo. */
    scrollbar-width: none;
  }
  .container-fluid-gris .container .item-servicios::-webkit-scrollbar { display: none; }
}

/* Con raton (una tablet con teclado, una ventana estrecha de ordenador, o el
   propio laboratorio) se ensena una barra fina, porque si no el bloque no se
   puede mover. En pantallas tactiles no aparece: ahi se desliza con el dedo. */
@media (max-width: 940px) and (hover: hover) and (pointer: fine) {
  .container-fluid-gris .container .item-servicios {
    scrollbar-width: thin;
    scrollbar-color: #c9c9c9 transparent;
    padding-bottom: 6px;
  }
  .container-fluid-gris .container .item-servicios::-webkit-scrollbar { display: block; height: 6px; }
  .container-fluid-gris .container .item-servicios::-webkit-scrollbar-thumb { background: #c9c9c9; border-radius: 6px; }
  .container-fluid-gris .container .item-servicios::-webkit-scrollbar-track { background: transparent; }

  .container-fluid-gris .container .bloque-servicio {
    flex: 0 0 40%;
    width: 40%;
    max-width: 180px;
    margin: 0 0 30px;
    padding: 0 4px;
    display: block;
    scroll-snap-align: start;
  }

  /* El ultimo necesita aire a la derecha, o queda pegado al borde al
     llegar al final del deslizamiento */
  .container-fluid-gris .container .bloque-servicio:last-child { margin-right: 4px; }
}


/* >>> UX-HOME-07 | Huecos de la portada, a la medida de Scuffers | paginas: Portada */
/* =========================================================
   UX-HOME-07 - Huecos de la portada, a la medida de Scuffers
   =========================================================
   Las cinco rejillas de producto de la portada (Cada dia, camisetas,
   sudaderas, licencias y bestsellers) con los mismos huecos que el
   listado (UX-CAT-50): casi de borde a borde, tarjetas a 4, texto pegado
   a la foto y 19 entre filas. Y cada seccion separada de la siguiente
   por 100, para que se lean como bloques y no como una lista seguida.

   Varias reglas llevan !important porque la hoja home.css de la web lo
   pone en esos mismos huecos (titulos y tarjetas).                    */

/* --- Rejillas ---------------------------------------------------------- */

/* Tarjetas a 4 entre si (antes 8 en movil, 16 en ordenador; 24 en Cada dia) */
.container.px21 > div.row.gx-2,
.style_section_bestsellers .bloque > div.row.gx-2,
h2.ux-daily-drops-title ~ div.row,
.frame-producto > div.row.gx-2 { --bs-gutter-x: 4px; }

/* Entre filas: 19 (antes 10 en movil y 15 en ordenador) */
.container.px21 > div.row.gx-2 > div.col-6,
.style_section_bestsellers .bloque > div.row.gx-2 > div.col-6,
h2.ux-daily-drops-title ~ div.row > div.col-6,
.frame-producto > div.row.gx-2 > div.col-6 { padding-bottom: 19px !important; }

/* Tarjeta: foto -> nombre 4 y nombre -> precio 2 (antes 12 y 9 en movil,
   9 y 5 en ordenador). Mismo corte de 540px que en el listado. */
@media (max-width: 540px) {
  .container div.row.gx-2 div.product-imagen { margin-bottom: 2px; }
  .container div.row.gx-2 div.precios { margin-top: 3px; }
}
@media (min-width: 541px) {
  .container div.row.gx-2 div.product-imagen { margin-bottom: 5px; }
  .container div.row.gx-2 div.precios { margin-top: 7px; }
}

/* La tarjeta de Cada dia esta fuera de .container y trae otros margenes
   (foto sin margen, texto a 5, precio a 10): mismo resultado, 4 y 2. */
@media (max-width: 540px) {
  h2.ux-daily-drops-title ~ div.row div.product-textos { margin-top: 0; }
  h2.ux-daily-drops-title ~ div.row p.nombre-producto { margin-top: 0; }
  h2.ux-daily-drops-title ~ div.row div.precios { margin-top: 4px; }
}
@media (min-width: 541px) {
  h2.ux-daily-drops-title ~ div.row div.product-textos { margin-top: 2px; }
  h2.ux-daily-drops-title ~ div.row div.precios { margin-top: 11px; }
}

/* --- Titulo, rejilla y "Ver mas" ---------------------------------------- */

/* Rejilla -> Ver mas: 24 (antes 30 en movil y 35 en ordenador) */
.container.px21 > div.row.ux-seccion__mas { padding-top: 5px; }

/* Entre una seccion y la siguiente: 24 en movil y 33 en ordenador (antes 60
   y 72). Se probaron 100, 72, 56 y 32/44; el 2026-09-24 Alejandro pidio
   bajar de 32 a 24, y lo mismo en ordenador (44 -> 33). Sigue siendo mas
   que titulo -> rejilla (14 y 33 en ordenador, igual), para que cada titulo
   se lea con sus productos y no con la seccion de arriba.
   Ver mas -> titulo: 0 + 24 del titulo (9 + 24 en ordenador). La web le pone
   32 encima; !important por si su regla lo lleva, como las de home.css. */
.container.px21 > div.row.ux-seccion { margin-top: 0; }
.container.px21 > div.row.ux-seccion > h2.titulo_h1 { margin-top: 24px !important; }
/* Cada dia -> Explora nuestras camisetas: 19 de la ultima fila + 5 del
   titulo = 24 (14 en ordenador = 33). !important porque home.css de la web pone
   ese margen (32) con !important. */
.container-fluid.gap-3 + .container.px21 > div.row.gx-2:first-child { margin-top: 0; }
.container-fluid.gap-3 + .container.px21 > div.row.gx-2:first-child > h2.titulo_h1 { margin-top: 5px !important; }
@media (min-width: 992px) {
  .container.px21 > div.row.ux-seccion { margin-top: 9px; }
  .container-fluid.gap-3 + .container.px21 > div.row.gx-2:first-child > h2.titulo_h1 { margin-top: 14px !important; }
}

/* --- Movil ------------------------------------------------------------ */
@media (max-width: 991.98px) {
  /* Titulo -> rejilla: 14 (antes 28) */
  .container.px21 > div.row.gx-2 > h2.titulo_h1,
  .style_section_bestsellers .bloque > h1.titulo_h1 { margin-bottom: 14px !important; }
  /* En Cada dia el bloque ya mete 16 (gap-3) entre titulo y rejilla */
  h2.ux-daily-drops-title { margin-bottom: calc(14px - 1rem) !important; }

  /* Margen lateral: 7 (antes 21; 12 en Cada dia) */
  .container.px21 > div.row.gx-2 { margin-left: -16px; margin-right: -16px; }
  .style_section_bestsellers .bloque > div.row.gx-2 { margin-left: -17px; margin-right: -16px; }
  /* La fila de Cada dia va centrada en una columna flex, que anula los
     margenes negativos: aqui el margen se pone con relleno. */
  h2.ux-daily-drops-title ~ div.row { margin-left: 0; margin-right: 0; padding-left: 5px; padding-right: 5px; }
}

/* --- Ordenador --------------------------------------------------------- */
@media (min-width: 992px) {
  /* Titulo -> rejilla: 33 (antes 28) */
  .container.px21 > div.row.gx-2 > h2.titulo_h1,
  .style_section_bestsellers .bloque > h1.titulo_h1 { margin-bottom: 33px !important; }
  h2.ux-daily-drops-title { margin-bottom: calc(33px - 1rem) !important; }

  /* Margen lateral: 17 (antes 21; 12 en Cada dia) */
  .container.px21 > div.row.gx-2 { margin-left: -6px; margin-right: -6px; }
  .style_section_bestsellers .bloque > div.row.gx-2 { margin-left: -7px; margin-right: -6px; }
  h2.ux-daily-drops-title ~ div.row { margin-left: 0; margin-right: 0; padding-left: 15px; padding-right: 15px; }
}

/* --- Con mucha categoria ----------------------------------------------- */
/* Los mismos huecos que las demas secciones (Alejandro, 2026-09-23):
   arriba y del boton a las opiniones, 32 en movil y 44 en ordenador;
   titulo -> categorias 14 y 33; categorias -> boton 24. Antes 60, 20/60,
   24/29 y 64/49. El bloque de Trustpilot no se toca: en el laboratorio sale
   vacio, pero en la web tiene las resenas (240 de alto en movil, 170 en
   ordenador). */
h2.titulo_h1.text-uppercase { margin-top: 32px; margin-bottom: 14px; }
/* El bloque gris de antes dejaba 40 de margen por debajo en movil */
.container-fluid-gris.px21:has(+ .container.px21 h2.text-uppercase) > .container { margin-bottom: 0; }
.container-fluid-gris.px21 + .container.px21:has(h2.text-uppercase) { margin-bottom: 0; }
/* !important: home.css pone el margen de Trustpilot (25) y .pt-20 el relleno
   de la fila del boton (20) con !important. */
.container.px21:has(h2.text-uppercase) > .row.justify-content-center.pt-20 { padding-top: 15px !important; }
.container.px21:has(h2.text-uppercase) + .trustpilot-container-reviews { margin-top: 8px !important; }
/* Relleno de arriba del bloque de opiniones de 24 a 14: dentro, antes de las
   resenas, Trustpilot deja otros 10. Asi boton -> resenas da 32 y 44.
   !important porque home.css pone el relleno (24) asi. */
.container.px21:has(h2.text-uppercase) + .trustpilot-container-reviews { padding-top: 14px !important; }
@media (min-width: 992px) {
  h2.titulo_h1.text-uppercase { margin-top: 44px; margin-bottom: 33px; }
  .container.px21:has(h2.text-uppercase) + .trustpilot-container-reviews { margin-top: 20px !important; }
}


/* --- Menos blanco alrededor de servicios, banners y bestsellers ---------
   Pedido por Alejandro el 2026-09-24: recortar un 25 %. Medido a 430px
   (movil) y 1440px (ordenador). La web pone margin-bottom: 40px a todo
   .container hasta 1300px (globals.css) y 56 encima de los banners hasta
   700px (home.css); por eso esos cortes.                                 */

/* "Ver todo" de licencias -> servicios: 30 en movil (antes 40). El margen
   de 40 del bloque y los 14 de encima de servicios se solapan: manda el
   mayor. En ordenador quedan los 14 de siempre. */
@media (max-width: 1300px) {
  .container.px21:has(+ .container-fluid-gris.p-0) { margin-bottom: 30px; }
}

/* Servicios -> banner: 42 en movil y 26 en ordenador (antes 56 y 35).
   !important porque home.css pone los 56 asi hasta 700px. */
.style_banners_home_grupo .row.section-banners-home { margin-top: 26px; }
@media (max-width: 700px) {
  .container-fluid-gris.p-0 + .style_banners_home_grupo { margin-top: 42px !important; }
}

/* Ultima fila de bestsellers -> bloque gris de "La serigrafia de mejor
   calidad": 44 en movil y 25 en ordenador (antes 59 y 33). Son 19 de la
   fila + el margen, que se solapa con el de encima del bloque gris. */
.style_section_bestsellers + .container-fluid-gris.px21 { margin-top: 6px; }
@media (max-width: 1300px) {
  .container.px21.style_section_bestsellers { margin-bottom: 25px; }
}


/* >>> UX-HOME-08 | Bestsellers: 12 en vez de 20 | paginas: Portada */
/* UX-HOME-08 - Bestsellers: 12 en vez de 20 (3 filas de 4 en monitor, 6 de 2
   en movil). Alejandro, 2026-09-23. */
.style_section_bestsellers .bloque > div.row.gx-2 > div:nth-of-type(n + 13) { display: none; }


/* >>> UX-HOME-11 | Franja de ofertas mas alta en movil | paginas: Portada */
/* =========================================================
   UX-HOME-11 - Franja de ofertas mas alta en movil
   =========================================================
   La franja negra que se desliza bajo la foto principal (Boxers 3x2,
   Calcetines 3x2...) media 44 de alto en movil: 16 de texto y 14 arriba y
   abajo. Pasa a 88 (36 arriba y abajo), con el texto centrado. Alejandro,
   2026-09-24, con dos capturas: primero hasta una linea 24px por debajo
   (68) y despues otros 20px, hasta ocupar el blanco de debajo.

   El titulo "Cada dia" no se mueve respecto a la primera version: la franja
   crece hacia el blanco. Franja -> titulo queda en 13 (antes 33), con un
   margen negativo de 20 abajo (la franja va en una columna flex, donde el
   margen negativo recorta el hueco). Solo hasta 991px; en ordenador no
   cambia.                                                                 */
@media (max-width: 991.98px) {
  #overlap-marquesina { height: auto; margin-bottom: -20px; }
  #overlap-marquesina .ux-mq-track { padding-top: 36px; padding-bottom: 36px; }
}


/* >>> UX-CAB-01 | Cabecera transparente sobre la foto principal y foto de movil mas baja | paginas: Portada */
/* =========================================================
   UX-CAB-01 - Cabecera transparente sobre la foto principal
   (nacio como UX-HOME-10 de Home y catalogo; desde el 2026-09-25 solo esta aqui)
   =========================================================
   Como Cold Culture (coldcultureworldwide.com): la cabecera va encima de la
   foto, sin fondo ni sombra, con menu, logo e iconos en blanco. La barra
   rosa de arriba se queda como esta. Alejandro, 2026-09-23; en movil y en
   ordenador. La cabecera de la web no se queda fija al bajar, asi que solo
   va encima de la foto al principio de la pagina.                      */

/* Fuera del flujo: con top auto se queda justo debajo de la barra rosa y la
   foto sube debajo de ella. */
body > header {
  position: absolute;
  /* la web le pone top: -1px; con auto se queda debajo de la barra rosa */
  top: auto;
  left: 0;
  right: 0;
  z-index: 30;
}

/* Transparente solo si no flota (UX-CAB-03, clase .ux-cab-fija: ahi va en
   blanco, con todo en su color) y si no hay abierto ninguno de los menus que
   se despliegan a todo el ancho: el grande de Catalogo (la web le pone
   .active a #megaMenu) y, desde el 2026-09-29, Snoopy y licencias y
   Comunidad, que se abren igual que el (UX-CAB-08). Con uno de ellos abierto
   la cabecera vuelve a ser blanca con todo en su color, como en la web,
   porque ese menu blanco ocupa todo el ancho y colgaria de una fila
   transparente con letras blancas (Alejandro, 2026-09-24 y 2026-09-29). El
   idioma no la pone blanca: la cabecera se queda en la foto y el va de
   cristal oscuro encima (UX-CAB-07; Alejandro, 2026-09-25 y 2026-09-29). */
body > header:not(.ux-cab-fija):not(:has(#megaMenu.active, li.item-menu:hover ul.sub-menu-basico)) {
  background: transparent !important;
  box-shadow: none !important;
}
body > header:has(#megaMenu.active, li.item-menu:hover ul.sub-menu-basico) {
  background: #ffffff !important;
  box-shadow: none !important;
}

/* "Last Chance" (a.rosa) se queda en su rosa tambien encima de la foto, como
   cuando la cabecera flota (Alejandro, 2026-09-25): el blanco no le afecta. */
/* En blanco solo lo que se ve arriba y solo sin menu a todo el ancho abierto. Todo con ">"
   para no tocar los menus desplegables ni el menu lateral de movil, que
   siguen con fondo blanco. */
header:not(.ux-cab-fija):not(:has(#megaMenu.active, li.item-menu:hover ul.sub-menu-basico)) > .cabecera-principal > .cabecera-menu > .navbar-toggler i,
header:not(.ux-cab-fija):not(:has(#megaMenu.active, li.item-menu:hover ul.sub-menu-basico)) > .cabecera-principal > .cabecera-menu > .menu-general-categorias > .item-menu > .categorias,
header:not(.ux-cab-fija):not(:has(#megaMenu.active, li.item-menu:hover ul.sub-menu-basico)) > .cabecera-principal > .cabecera-menu > .menu-general-categorias > .item-menu > .categorias > a:not(.rosa),
header:not(.ux-cab-fija):not(:has(#megaMenu.active, li.item-menu:hover ul.sub-menu-basico)) > .cabecera-principal > .cabecera-menu > .menu-general-accesos > .barrita-separadora,
header:not(.ux-cab-fija):not(:has(#megaMenu.active, li.item-menu:hover ul.sub-menu-basico)) > .cabecera-principal > .cabecera-menu > .menu-general-accesos .btn-idiomas > .es,
header:not(.ux-cab-fija):not(:has(#megaMenu.active, li.item-menu:hover ul.sub-menu-basico)) > .cabecera-principal > .cabecera-menu > .menu-general-accesos .favorito_header > i { color: #ffffff !important; }
/* Las listas desplegables de Snoopy y licencias y de Comunidad cuelgan del
   mismo bloque que su titulo: vuelven a su color para no heredar el blanco. */
header:not(.ux-cab-fija):not(:has(#megaMenu.active, li.item-menu:hover ul.sub-menu-basico)) > .cabecera-principal > .cabecera-menu > .menu-general-categorias > .item-menu > .categorias > ul.sub-menu-basico { color: #111111; }

/* Logo e iconos son imagenes negras: el mismo filtro que usa Cold Culture
   las deja blancas. */
header:not(.ux-cab-fija):not(:has(#megaMenu.active, li.item-menu:hover ul.sub-menu-basico)) > .cabecera-principal > .cabecera-menu > .logo img,
header:not(.ux-cab-fija):not(:has(#megaMenu.active, li.item-menu:hover ul.sub-menu-basico)) > .cabecera-principal > .cabecera-menu > .menu-general-categorias > .item-menu > img.actions-submenu-categorias,
header:not(.ux-cab-fija):not(:has(#megaMenu.active, li.item-menu:hover ul.sub-menu-basico)) > .cabecera-principal > .cabecera-menu > .menu-general-accesos img.icon-search,
header:not(.ux-cab-fija):not(:has(#megaMenu.active, li.item-menu:hover ul.sub-menu-basico)) > .cabecera-principal > .cabecera-menu > .menu-general-accesos .btn-idiomas img,
header:not(.ux-cab-fija):not(:has(#megaMenu.active, li.item-menu:hover ul.sub-menu-basico)) > .cabecera-principal > .cabecera-menu > .menu-general-accesos a.tag_open_login img,
header:not(.ux-cab-fija):not(:has(#megaMenu.active, li.item-menu:hover ul.sub-menu-basico)) > .cabecera-principal > .cabecera-menu > .menu-general-accesos .cart-container img.cart { filter: brightness(0) invert(1); }

/* Foto principal en movil: 406 de alto (antes el 60% de la pantalla, 506 en
   un movil de 844). Se recorta lo mismo por arriba y por abajo; el texto y
   COMPRAR van en el centro del dibujo y quedan enteros, y la franja de
   arriba, sin texto, queda debajo de la cabecera. Solo hasta 450px: en
   pantallas mas anchas la foto crece y con 406 se cortaria COMPRAR
   (medido: a 554px se cortaban 24px). El movil mas grande habitual es de 430. */
@media (max-width: 450px) {
  .container-fluid.gap-3 > .row.max-width-1900 .banner-carrousel-mobile { height: 406px; }
}
/* Foto centrada en vez de pegada abajo (la web usa 50% 100%): con la cabecera
   encima, entre 451 y 554px el texto "cada dia" quedaba debajo de ella. */
@media (max-width: 554px) {
  .container-fluid.gap-3 > .row.max-width-1900 .banner-carrousel-mobile .imagen-carrousel { background-position: 50% 50%; }
}

/* Sombra suave arriba de la foto, detras de la cabecera, para que el blanco
   se lea: sin ella, algunas palabras del menu de ordenador quedaban a 3,4-4:1
   de contraste sobre la foto (el minimo para texto es 4,5:1). No recibe
   clics: el enlace de la foto sigue funcionando. */
.container-fluid.gap-3 > .row.max-width-1900:first-child { position: relative; }
.container-fluid.gap-3 > .row.max-width-1900:first-child::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 140px;
  background: linear-gradient(rgba(0, 0, 0, .35), rgba(0, 0, 0, 0));
  pointer-events: none;
  z-index: 1;
}


/* >>> UX-CAB-06 | Foto principal mas alta y franja de ofertas mas fina (movil y tablet) | paginas: Portada */
/* =========================================================
   UX-CAB-06 - Foto principal mas alta y franja de ofertas mas fina
   =========================================================
   Alejandro (2026-09-25), con dos capturas del movil: la foto principal
   baja por dentro de la franja negra de ofertas, la franja se estrecha y
   acaba justo donde empezaba el titulo de debajo; despues, el titulo
   baja 12 para tener mas aire.
   En movil y en tablet.

   - La foto crece: en movil, de 406 a 521 (UX-CAB-01 la dejaba en 406);
     de 451 a 554, del 60 % del alto de la pantalla al 60 % + 113; de 555
     a 991, donde la web usa otra foto, del 70 % al 70 % + 113.
     Primero crecio 71, hasta la franja. En la quinta vuelta (otra captura
     del movil: "hasta ahi debe llegar el banner, debajo la franja negra y
     ya el resto de la web") crece 44 mas en movil y 42 en tablet: llega
     hasta donde empezaba el titulo, la franja va debajo y el titulo y todo
     lo de debajo bajan otro tanto.
   - La franja, de 88 (UX-HOME-11, entrega 1: 36 arriba y abajo) a 30: 7
     arriba y abajo, con el mismo texto de 16 (primero se probo con 4 y
     Alejandro le dio 3 mas de aire por cada lado).
   - Entre la franja y el titulo, 12 mas de aire que al principio de esta
     vuelta (Alejandro: "da mas oxigeno entre el texto y la banda"): el
     margen de abajo de la franja pasa de -20 (UX-HOME-11) a -21, y el titulo
     y todo lo de debajo bajan 12. De la franja a las letras del titulo
     quedan 21 en movil y 26 en tablet (del titulo a las tarjetas hay 20 y 24).
   Solo hasta 991px; en ordenador no cambia nada.                        */
@media (max-width: 450px) {
  .container-fluid.gap-3 > .row.max-width-1900 .banner-carrousel-mobile { height: 521px; }
}
@media (min-width: 450.02px) and (max-width: 554px) {
  .container-fluid.gap-3 > .row.max-width-1900 .banner-carrousel-mobile { height: calc(60vh + 113px); }
}
@media (min-width: 555px) and (max-width: 991.98px) {
  .container-fluid.gap-3 > .row.max-width-1900:first-child .banner-carrousel { height: calc(70vh + 113px); }
}
@media (max-width: 991.98px) {
  #overlap-marquesina { margin-bottom: -21px; }
  #overlap-marquesina .ux-mq-track { padding-top: 7px; padding-bottom: 7px; }
}

/* Titulo "Cada dia 1 nueva camiseta por 9'99" en movil, de 32 a 26 (Alejandro: "en los
   laterales tambien hay que dar mas oxigeno, reduciendo el tamano del
   texto"). A 32 ocupaba todo el ancho: a 402px le quedaban 3 a cada lado
   y a 360 se partia en dos lineas. A 26, unos 40 a cada lado a 402 y una
   sola linea desde 360. Solo el primer titulo de la portada; los demas
   no cambian.
   Con la letra mas pequena, el margen de arriba pasa a 19px para que
   de la franja a las letras sigan quedando 21. Con !important porque la web
   se lo pone asi (.ux-daily-drops-title, home.css). */
@media (max-width: 450px) {
  h2.ux-daily-drops-title { font-size: 26px; margin-top: 19px !important; }
}