/* Buscador de la cabecera (buscador.js). Fino y sutil (Genaro, 7/10): fondo gris clarito sin borde, esquinas apenas redondeadas y, al tocarlo, el azul de la marca. */
.cp-buscar { position: relative; flex: 0 1 260px; margin: 0 0 0 auto; display: flex; align-items: center; }
.cp-buscar-lupa { position: absolute; left: 11px; width: 15px; height: 15px; color: rgba(20,22,26,0.42); pointer-events: none; transition: color 150ms ease; }
.cp-buscar input { width: 100%; height: 36px; font-family: Archivo, sans-serif; font-size: 14px; color: #14161A; background: rgba(20,22,26,0.055); border: 1px solid transparent; border-radius: 6px; padding: 0 12px 0 33px; -webkit-appearance: none; appearance: none; caret-color: auto; transition: background 150ms ease, border-color 150ms ease, box-shadow 150ms ease; }
.cp-buscar input::placeholder { color: rgba(20,22,26,0.45); }
.cp-buscar input:hover { background: rgba(20,22,26,0.08); }
.cp-buscar input:focus { outline: none; background: #FFFFFF; border-color: #0E3B63; box-shadow: 0 0 0 3px rgba(14,59,99,0.12); }
.cp-buscar:focus-within .cp-buscar-lupa { color: #0E3B63; }
.cp-buscar input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
/* En el celular: renglón propio debajo del logo. 16 px de letra: con menos, el iPhone hace zoom al tocarla. */
@media (max-width: 760px) { .cp-buscar { order: 3; flex: 1 1 100%; margin: 0; } .cp-buscar input { height: 38px; font-size: 16px; } }

.cp-resultados { position: fixed; z-index: 60; background: #FFFFFF; border: 1px solid rgba(20,22,26,0.1); border-radius: 8px; box-shadow: 0 12px 32px rgba(20,22,26,0.14); max-height: min(70vh, 540px); overflow-y: auto; font-family: Archivo, sans-serif; }
.cp-res { display: flex; align-items: center; gap: 12px; padding: 10px 12px; color: #14161A; border-bottom: 1px solid rgba(20,22,26,0.08); text-decoration: none; }
.cp-res:hover, .cp-res:focus { background: #F2F5F7; color: #14161A; }
.cp-res-foto { flex: 0 0 52px; height: 52px; background: #FFFFFF; display: flex; }
.cp-res-foto img { width: 100%; height: 100%; object-fit: contain; display: block; }
.cp-res-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cp-res-marca { font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(20,22,26,0.55); }
.cp-res-nombre { font-size: 15px; font-weight: 600; line-height: 1.25; }
.cp-res-precio { flex: 0 0 auto; font-family: Chivo, sans-serif; font-weight: 800; font-size: 16px; letter-spacing: -0.02em; color: #0E3B63; }
.cp-res-todas { display: block; padding: 13px 12px; text-align: center; font-weight: 600; font-size: 14px; background: #0E3B63; color: #FFFFFF; text-decoration: none; }
.cp-res-todas:hover { background: #14161A; color: #FFFFFF; }
.cp-res-vacio { padding: 18px 16px; }
.cp-res-vacio p { margin: 0 0 6px; font-size: 16px; color: #14161A; }
.cp-res-vacio .cp-res-ayuda { margin-bottom: 14px; font-size: 14px; color: rgba(20,22,26,0.65); }
.cp-res-wa { display: inline-block; background: #E4F222; color: #14161A; font-weight: 600; font-size: 15px; padding: 13px 18px; text-decoration: none; }
.cp-res-nota { padding: 14px 16px; font-size: 14px; color: rgba(20,22,26,0.6); }

/* Día de la Madre (hasta el domingo 18/10): el ítem del menú se destaca con los colores de la sección (rosa y bordó);
   desde el lunes 19 buscador.js pone html.sin-madre y desaparece solo. En el celular el menú se achica para que entre. */
.cp-madre { background: #F2DAD6; color: #5A2235 !important; font-weight: 600; padding: 5px 9px; white-space: nowrap; }
.cp-madre:hover { background: #5A2235; color: #FFFFFF !important; }
html.sin-madre .cp-madre, html.sin-madre [data-madre] { display: none !important; }
@media (max-width: 420px) { header nav { gap: 14px !important; font-size: 14px !important; } }

/* Recorrer el stock (20/10): tres portadas por estilo de juego (inicio y catálogo) y "Jugá con la paleta de tu ídolo".
   Sin fotos de los jugadores (derecho de imagen): la foto de su paleta y el nombre grande. */
.cp-estilos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: rgba(255,255,255,0.3); }
.cp-estilo { position: relative; background: #0E3B63; color: #FFFFFF; border: 0; border-radius: 0; padding: clamp(18px,2.4vw,32px) clamp(14px,2vw,28px) clamp(20px,2.6vw,34px); text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 8px; font-family: Archivo, sans-serif; text-decoration: none; transition: background 150ms ease; box-shadow: inset 0 -3px 0 transparent; }
.cp-estilo:hover { background: #0d3357; color: #FFFFFF; }
.cp-estilo:focus-visible { outline: 2px solid #E4F222; outline-offset: -4px; }
.cp-estilo[aria-pressed="true"] { background: #0a2e4f; box-shadow: inset 0 -3px 0 #E4F222; }
.cp-estilo svg { display: block; margin-bottom: 4px; }
.cp-estilo-eyebrow { font-weight: 500; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.62); }
.cp-estilo-nombre { font-family: Chivo, sans-serif; font-weight: 700; font-size: clamp(19px,2.4vw,32px); letter-spacing: -0.01em; text-transform: uppercase; line-height: 1; }
.cp-estilo[aria-pressed="true"] .cp-estilo-nombre { color: #E4F222; }
.cp-estilo-texto { margin: 0; font-size: 15px; line-height: 1.5; color: #DCE6EA; max-width: 34ch; }
.cp-estilo-n { margin-top: auto; padding-top: 6px; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #E4F222; }
@media (max-width: 640px) {
  .cp-estilo { gap: 6px; }
  .cp-estilo svg { width: 28px; height: 42px; }
  .cp-estilo-texto, .cp-estilo-eyebrow { display: none; }
  .cp-estilo-nombre { font-size: 17px; }
}

.cp-idolos { background: #FFFFFF; color: #14161A; padding: clamp(40px,6vw,80px) 0 clamp(40px,6vw,72px); }
.cp-idolos-cabeza { max-width: 1440px; margin: 0 auto; padding: 0 clamp(20px,4vw,64px) clamp(20px,2.6vw,32px); display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; }
.cp-idolos-eyebrow { font-weight: 500; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: #0E3B63; margin-bottom: 10px; }
.cp-idolos-titulo { margin: 0; font-family: Chivo, sans-serif; font-weight: 900; font-size: clamp(28px,4vw,52px); line-height: 0.98; letter-spacing: -0.03em; text-transform: uppercase; max-width: 16ch; }
.cp-idolos-nota { margin: 0; font-size: 15px; line-height: 1.55; color: rgba(20,22,26,0.7); max-width: 44ch; }
.cp-idolos-fila { max-width: 1440px; margin: 0 auto; padding: 0 clamp(20px,4vw,64px); display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 12px; }
.cp-idolo { display: flex; flex-direction: column; background: #F2F5F7; color: #14161A; text-decoration: none; border: 1px solid rgba(20,22,26,0.1); transition: border-color 150ms ease, transform 150ms ease; }
.cp-idolo:hover { border-color: #0E3B63; color: #14161A; transform: translateY(-2px); }
.cp-idolo:focus-visible { outline: 2px solid #0E3B63; outline-offset: 2px; }
.cp-idolo-cabeza { padding: 16px 16px 0; display: flex; flex-direction: column; gap: 2px; }
.cp-idolo-pais { display: flex; align-items: center; gap: 8px; font-weight: 500; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(20,22,26,0.6); }
.cp-idolo-pais::before { content: ""; width: 14px; height: 2px; background: #E4F222; box-shadow: 0 0 0 1px #0E3B63 inset; }
.cp-idolo-nombre { font-weight: 400; font-size: 15px; color: #0E3B63; margin-top: 8px; }
.cp-idolo-apellido { font-family: Chivo, sans-serif; font-weight: 700; font-size: clamp(22px,1.9vw,28px); line-height: 0.95; letter-spacing: -0.015em; text-transform: uppercase; color: #0E3B63; white-space: nowrap; }
.cp-idolo-foto { display: block; position: relative; height: 180px; margin: 12px 0 0; background: #FFFFFF; }
.cp-idolo-pie { flex: 1; background: #0E3B63; color: #FFFFFF; padding: 12px 16px 14px; display: flex; flex-direction: column; gap: 4px; }
.cp-idolo-paleta { font-size: 14px; font-weight: 500; line-height: 1.3; }
.cp-idolo-marca { font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.7); }
.cp-idolo-ver { margin-top: 4px; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #E4F222; }
/* En el celular, una fila que se desliza (de a una tarjeta y media para que se note que sigue). */
@media (max-width: 640px) {
  .cp-idolo-apellido { font-size: 30px; }
  .cp-idolos-fila { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 66%; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 20px; -webkit-overflow-scrolling: touch; padding-bottom: 6px; scrollbar-width: none; }
  .cp-idolos-fila::-webkit-scrollbar { display: none; }
  .cp-idolo { scroll-snap-align: start; }
  .cp-idolo:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) { .cp-idolo, .cp-estilo { transition: none; } .cp-idolo:hover { transform: none; } }
/* En el inicio las portadas de estilo van grandes: en el celular, una debajo de la otra y con su texto. */
@media (max-width: 640px) {
  .cp-estilos--grande { grid-template-columns: 1fr; }
  .cp-estilos--grande .cp-estilo { display: grid; grid-template-columns: 40px 1fr; column-gap: 16px; align-items: start; padding: 20px; }
  .cp-estilos--grande .cp-estilo svg { grid-row: 1 / span 4; width: 34px; height: 51px; }
  .cp-estilos--grande .cp-estilo-texto, .cp-estilos--grande .cp-estilo-eyebrow { display: block; }
  .cp-estilos--grande .cp-estilo-nombre { font-size: 24px; }
}