/* ============================================================
   GangasOfertas.com - Estilo Cartoon Vibrante
   Inspirado en el arte del canal de Telegram
   ============================================================ */

*,*::before,*::after{box-sizing:border-box}

:root{
  --azul-cielo:#87ceeb;
  --azul-cielo-claro:#b0e0f0;
  --azul-cielo-oscuro:#5ba3c0;
  --azul-fondo:#e8f4f8;
  --azul-oscuro:#2a5a8a;
  --azul-medio:#4a8ab0;
  --naranja:#ff9900;
  --naranja-oscuro:#e68a00;
  /* El naranja de marca (#ff9900) da 2.6:1 sobre blanco: no sirve como color de
     texto. Este tono mas oscuro llega a 5.1:1 y se usa para texto y enlaces.
     El naranja claro se reserva para bordes, rellenos y texto sobre fondo oscuro. */
  --naranja-texto:#a35c00;
  --amarillo:#ffd700;
  --rojo:#e63946;
  --blanco:#ffffff;
  --gris-claro:#f0f4f8;
  --gris-borde:#d0d8e0;
  --texto-oscuro:#1a1a2e;
  --texto-claro:#2a3a4a;
  --verde:#27ae60;
  --sombra:0 8px 24px rgba(0,0,0,.1);
  --sombra-hover:0 12px 32px rgba(0,0,0,.15);
  --borde-redondo:20px;
  --borde-boton:30px;
}

body{
  font-family:'Segoe UI',Arial,Helvetica,sans-serif;
  margin:0;
  background:var(--azul-cielo);
  background-image:
    linear-gradient(180deg,var(--azul-cielo) 0%,var(--azul-cielo-claro) 50%,var(--azul-fondo) 100%);
  color:var(--texto-oscuro);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}

a{color:inherit}

.wrap{max-width:1200px;margin:0 auto;padding:0 24px}

/* ---------- Hero ---------- */
.hero{
  background:linear-gradient(135deg,var(--azul-cielo-oscuro) 0%,var(--azul-cielo) 100%);
  padding:50px 24px 30px;
  text-align:center;
  position:relative;
  overflow:visible;
}

.hero::before{
  content:'';
  position:absolute;
  top:-50%;
  right:-10%;
  width:400px;
  height:400px;
  background:radial-gradient(circle,rgba(255,255,255,.3) 0%,transparent 70%);
  border-radius:50%;
}

.hero-badge{
  display:inline-block;
  background:var(--naranja);
  color:var(--texto-oscuro);
  padding:8px 16px;
  border-radius:var(--borde-boton);
  font-weight:800;
  font-size:14px;
  margin-bottom:16px;
  box-shadow:0 4px 12px rgba(255,153,0,.3);
  position:relative;
}

.hero h1{
  font-size:clamp(28px,5vw,42px);
  font-weight:900;
  margin:0 0 12px;
  text-transform:uppercase;
  letter-spacing:1px;
  color:var(--texto-oscuro);
  text-shadow:2px 2px 0 rgba(255,255,255,.5);
  line-height:1.2;
  position:relative;
}

.hero h1 em{
  color:var(--rojo);
  font-style:normal;
}

.hero p{
  font-size:17px;
  color:var(--texto-oscuro);
  max-width:700px;
  margin:0 auto 24px;
  position:relative;
}

.hero-btns{
  display:flex;
  gap:14px;
  justify-content:center;
  flex-wrap:wrap;
  position:relative;
}

.btn-primary{
  display:inline-block;
  background:linear-gradient(135deg,var(--naranja) 0%,var(--naranja-oscuro) 100%);
  color:var(--texto-oscuro);
  padding:14px 28px;
  border-radius:var(--borde-boton);
  text-decoration:none;
  font-weight:800;
  font-size:16px;
  text-transform:uppercase;
  letter-spacing:.5px;
  transition:all .3s ease;
  box-shadow:0 4px 12px rgba(255,153,0,.3);
}

.btn-primary:hover{
  background:linear-gradient(135deg,var(--amarillo) 0%,var(--naranja) 100%);
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(255,153,0,.5);
}

.btn-ghost{
  display:inline-block;
  background:var(--blanco);
  color:var(--texto-oscuro);
  border:2px solid var(--azul-cielo-oscuro);
  padding:14px 28px;
  border-radius:var(--borde-boton);
  text-decoration:none;
  font-weight:700;
  font-size:16px;
  transition:all .3s ease;
}

.btn-ghost:hover{
  background:var(--azul-cielo-oscuro);
  color:var(--blanco);
  border-color:var(--azul-cielo-oscuro);
  transform:translateY(-2px);
}

/* ---------- Navegacion principal (todas las paginas) ---------- */
.nav,
.hero .nav,
header .nav{
  display:flex !important;
  flex-wrap:wrap;
  justify-content:center !important;
  gap:6px;
  margin-top:20px;
  width:100%;
  margin-left:auto;
  margin-right:auto;
}

.nav a{
  color:var(--texto-oscuro);
  text-decoration:none;
  background:rgba(255,255,255,.7);
  border:2px solid rgba(255,255,255,.9);
  padding:5px 10px;
  border-radius:20px;
  font-size:11px;
  font-weight:700;
  transition:all .3s ease;
}

.nav a:hover{
  background:var(--naranja);
  color:var(--texto-oscuro);
  border-color:var(--naranja);
  transform:translateY(-2px);
  box-shadow:0 4px 12px rgba(255,153,0,.3);
}

.nav a[aria-current="page"]{
  background:var(--naranja);
  color:var(--texto-oscuro);
  border-color:var(--naranja);
  box-shadow:0 3px 10px rgba(255,153,0,.3);
}

/* ---------- Boton Telegram en cabecera ---------- */
.btn-telegram{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:linear-gradient(135deg,#0088cc 0%,#0066aa 100%);
  color:var(--blanco);
  padding:10px 20px;
  border-radius:25px;
  text-decoration:none;
  font-weight:700;
  font-size:14px;
  transition:all .3s ease;
  box-shadow:0 4px 12px rgba(0,136,204,.3);
  position:absolute;
  top:20px;
  right:20px;
  z-index:100;
}

.btn-telegram:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 16px rgba(0,136,204,.5);
  background:linear-gradient(135deg,#0099dd 0%,#0077bb 100%);
}

.btn-telegram svg{
  width:18px;
  height:18px;
  fill:currentColor;
}

/* ---------- Cabecera de catalogo ---------- */
.cabecera{
  background:linear-gradient(135deg,var(--azul-cielo-oscuro) 0%,var(--azul-cielo) 100%);
  color:var(--texto-oscuro);
  padding:35px 0;
  border-bottom:4px solid var(--naranja);
  position:relative;
  overflow:hidden;
}

.cabecera::before{
  content:'';
  position:absolute;
  top:-50%;
  right:-10%;
  width:400px;
  height:400px;
  background:radial-gradient(circle,rgba(255,255,255,.3) 0%,transparent 70%);
  border-radius:50%;
}

.cabecera h1{
  margin:0 0 8px;
  font-size:32px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:1px;
  color:var(--texto-oscuro);
  text-shadow:2px 2px 0 rgba(255,255,255,.5);
  position:relative;
}

.cabecera p{
  margin:0 0 20px;
  color:var(--texto-oscuro);
  font-size:16px;
  position:relative;
}

.nav{display:flex;flex-wrap:wrap;gap:10px;position:relative}

.nav a{
  color:var(--texto-oscuro);
  text-decoration:none;
  background:rgba(255,255,255,.7);
  border:2px solid rgba(255,255,255,.9);
  padding:10px 18px;
  border-radius:var(--borde-boton);
  font-size:15px;
  font-weight:700;
  transition:all .3s ease;
}

.nav a:hover{
  background:var(--naranja);
  color:var(--texto-oscuro);
  border-color:var(--naranja);
  transform:translateY(-2px);
  box-shadow:0 6px 16px rgba(255,153,0,.4);
}

.nav a[aria-current="page"]{
  background:var(--naranja);
  color:var(--texto-oscuro);
  border-color:var(--naranja);
  box-shadow:0 4px 12px rgba(255,153,0,.4);
}

/* ---------- Rejilla de ofertas ---------- */
main.contenido{padding:35px 0}

.estado{
  background:var(--blanco);
  border:2px solid var(--azul-cielo-oscuro);
  border-radius:var(--borde-redondo);
  padding:28px;
  color:var(--texto-oscuro);
  text-align:center;
  font-size:17px;
}

.rejilla{
  display:grid;
  gap:24px;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
}

.oferta{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  background:var(--blanco);
  border:3px solid var(--azul-cielo-oscuro);
  border-radius:var(--borde-redondo);
  padding:20px;
  box-shadow:var(--sombra);
  transition:all .3s ease;
  position:relative;
  overflow:hidden;
}

.oferta::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:4px;
  background:linear-gradient(90deg,var(--naranja),var(--amarillo),var(--naranja));
}

.oferta:hover{
  transform:translateY(-6px) scale(1.02);
  box-shadow:var(--sombra-hover);
  border-color:var(--naranja);
}

.oferta-img{
  width:100%;
  height:200px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:16px;
  background:linear-gradient(135deg,var(--gris-claro) 0%,#e8eef4 100%);
  border-radius:15px;
  overflow:hidden;
  border:2px solid var(--gris-borde);
}

.oferta-img img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  transition:transform .3s ease;
}

.oferta:hover .oferta-img img{
  transform:scale(1.05);
}

.oferta-cuerpo{flex-grow:1;display:flex;flex-direction:column}

.oferta-titulo{
  font-size:17px;
  font-weight:800;
  line-height:1.4;
  margin-bottom:10px;
  color:var(--texto-oscuro);
}

/* Las tres cifras (precio actual, precio anterior y descuento) se pintan
   siempre, asi que la tarjeta lleva una fila etiquetada por cada una. Al no
   depender de los datos, la composicion es la misma en todas las ofertas. */
.oferta-precios{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin:12px 0;
}

.oferta-precio-caja{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  min-width:0;
  padding:6px 10px;
  border-radius:10px;
  background:var(--gris-claro);
  border:1px solid var(--gris-borde);
}

.oferta-precio-etiqueta{
  flex:0 0 auto;
  font-size:10px;
  font-weight:800;
  letter-spacing:.6px;
  text-transform:uppercase;
  color:#64748b;
}

.oferta-precio{
  min-width:0;
  font-size:24px;
  font-weight:900;
  color:var(--verde);
  text-align:right;
  overflow-wrap:anywhere;
}

/* El precio anterior solo se tacha cuando hay un precio real que tachar */
.oferta-precio-antes{
  min-width:0;
  font-size:16px;
  font-weight:600;
  color:#8a94a3;
  text-align:right;
  overflow-wrap:anywhere;
}

.oferta-precio-antes:not(.es-hueco){
  text-decoration:line-through;
}

.oferta-precio-antes.es-hueco{
  font-size:13px;
  font-weight:700;
  color:#9aa4b2;
}

/* Descuento: la cifra resaltada, el dato que mas llama la atencion */
.oferta-precio-caja--descuento{
  background:linear-gradient(135deg,var(--rojo) 0%,#c0392b 100%);
  border-color:#c0392b;
  box-shadow:0 3px 10px rgba(230,57,70,.35);
}

.oferta-precio-caja--descuento .oferta-precio-etiqueta{
  color:rgba(255,255,255,.9);
}

.oferta-descuento{
  min-width:0;
  font-size:20px;
  font-weight:900;
  color:var(--blanco);
  letter-spacing:.5px;
  line-height:1.25;
  text-align:right;
  overflow-wrap:anywhere;
}

.oferta-descuento.es-hueco{
  font-size:13px;
  font-weight:700;
  letter-spacing:0;
  color:rgba(255,255,255,.9);
}

.oferta-precio-caja--descuento.es-hueco{
  background:linear-gradient(135deg,#a3adba 0%,#8b96a3 100%);
  border-color:#8b96a3;
  box-shadow:0 3px 10px rgba(139,150,163,.3);
}

.oferta-meta{
  color:#667085;
  font-size:14px;
  margin-bottom:8px;
}

.oferta-vistas{
  display:inline-flex;
  align-items:center;
  gap:5px;
  background:linear-gradient(135deg,var(--azul-cielo) 0%,var(--azul-cielo-claro) 100%);
  color:var(--texto-oscuro);
  padding:4px 12px;
  border-radius:20px;
  font-size:12px;
  font-weight:700;
  margin-bottom:12px;
  border:1px solid var(--azul-cielo-oscuro);
}

.oferta-comprar{
  display:block;
  text-align:center;
  background:linear-gradient(135deg,var(--naranja) 0%,var(--naranja-oscuro) 100%);
  color:var(--texto-oscuro);
  padding:14px 20px;
  border-radius:var(--borde-boton);
  text-decoration:none;
  font-weight:800;
  font-size:16px;
  text-transform:uppercase;
  letter-spacing:.5px;
  transition:all .3s ease;
  box-shadow:0 4px 12px rgba(255,153,0,.3);
}

.oferta-comprar:hover{
  background:linear-gradient(135deg,var(--amarillo) 0%,var(--naranja) 100%);
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(255,153,0,.5);
}

/* ---------- Pie ---------- */
.pie{
  margin-top:40px;
  padding:25px 0;
  color:var(--texto-oscuro);
  font-size:14px;
  border-top:2px solid var(--azul-cielo-oscuro);
  text-align:center;
}

.enlace-telegram{
  margin-top:25px;
  display:inline-block;
  background:linear-gradient(135deg,#0088cc 0%,#0066aa 100%);
  color:var(--blanco);
  padding:12px 24px;
  border-radius:var(--borde-boton);
  text-decoration:none;
  font-weight:700;
  transition:all .3s ease;
}

.enlace-telegram:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 16px rgba(0,136,204,.4);
}

/* ---------- Bloqueos de codigo / desarrollo ---------- */
.codigo-fuente{
  background:var(--azul-cielo-oscuro);
  color:var(--amarillo);
  padding:3px 8px;
  border-radius:6px;
  font-size:.9em;
  font-family:'Consolas','Monaco',monospace;
}

/* ---------- 404 ---------- */
.error404{
  max-width:640px;
  margin:0 auto;
  padding:80px 20px;
  text-align:center;
}

.error404 h1{
  font-size:clamp(60px,15vw,120px);
  margin:0;
  background:linear-gradient(135deg,var(--naranja) 0%,var(--amarillo) 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  line-height:1;
  text-shadow:none;
  filter:drop-shadow(4px 4px 0 rgba(0,0,0,.3));
}

.error404 p{
  color:var(--texto-oscuro);
  font-size:18px;
}

/* ---------- Animaciones ---------- */
@keyframes fadeInUp{
  from{
    opacity:0;
    transform:translateY(20px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

.oferta{
  animation:fadeInUp .5s ease forwards;
}

.oferta:nth-child(1){animation-delay:.05s}
.oferta:nth-child(2){animation-delay:.1s}
.oferta:nth-child(3){animation-delay:.15s}
.oferta:nth-child(4){animation-delay:.2s}
.oferta:nth-child(5){animation-delay:.25s}
.oferta:nth-child(6){animation-delay:.3s}

/* ---------- Responsive ---------- */
@media(max-width:768px){
  .cabecera h1{font-size:24px}
  .rejilla{grid-template-columns:1fr}
  .oferta-img{height:180px}
  .oferta-precio{font-size:22px}
  .oferta-descuento{font-size:18px}
}

/* El bloque prefers-reduced-motion vive en assets/icono-tg.css, compartido por las dos paletas. Este duplicado era mas debil: solo cubria transition y animation, y no incluia scroll-behavior. */

/* Objetivo tactil minimo en moviles */
@media (max-width: 640px) {
  .nav a { padding: 9px 13px; font-size: 13px; }
  .oferta-comprar { padding: 14px 26px !important; }
}

/* ==========================================================================
   Pie unificado: rejilla de grupos de enlaces
   ========================================================================== */
.pie .footer-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 24px 22px;
  text-align: left;
  margin: 0 0 26px;
}
.footer-links__grupo { display: flex; flex-direction: column; gap: 7px; }
.footer-links__grupo strong {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--azul-oscuro);
  margin-bottom: 2px;
}
.footer-links__grupo a { color: var(--texto-claro); text-decoration: none; font-size: 14px; }
.footer-links__grupo a:hover,
.footer-links__grupo a:focus-visible { color: var(--naranja-texto); text-decoration: underline; }
.pie__aviso { font-size: 11px; opacity: 0.72; max-width: 74ch; margin: 10px auto 0; }
@media (max-width: 520px) {
  .pie .footer-links { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 20px 14px; }
  .footer-links__grupo a { font-size: 13px; }
}

/* ==========================================================================
   Subnavegacion (listado de categorias dentro de una pagina)
   Se distingue del menu principal para que no se lea como un duplicado.
   ========================================================================== */
.subnav { margin-top: 0; margin-bottom: 30px; }
.subnav a { font-size: 13px; padding: 6px 12px; background: #fff; border-color: var(--gris-borde); }
.subnav a:hover,
.subnav a:focus-visible { border-color: var(--naranja); color: var(--naranja-texto); }

/* ==========================================================================
   Bloque editorial de las paginas de catalogo
   generar_categorias.py escribe el texto de cada categoria DESPUES de las
   tarjetas. Antes no existia: las paginas eran solo una lista de productos y
   no tenian nada propio que ofrecer al lector ni al crawler.

   El bloque va abajo a proposito. La intencion de quien llega a una pagina de
   categoria es ver precios: si lo primero que encuentra son 600-800 palabras
   antes de ver un producto, se va. El texto queda despues para quien quiera
   leerlo, y no se pierde seo por el orden porque un crawler recorre la pagina
   entera; lo que si cambia es la UX, y aqui manda la intencion de compra.
   ========================================================================== */
.editorial {
  background: #fff;
  border: 1px solid var(--gris-borde);
  border-radius: 14px;
  padding: 28px 26px;
  margin-bottom: 32px;
}
.editorial__h2 {
  font-size: 26px;
  line-height: 1.25;
  margin: 0 0 16px;
  color: var(--azul-oscuro);
}
.editorial h3 {
  font-size: 19px;
  line-height: 1.35;
  margin: 28px 0 10px;
  color: var(--azul-oscuro);
}
.editorial p {
  margin: 0 0 14px;
  line-height: 1.75;
  color: var(--texto-oscuro);
}
.editorial a { color: var(--naranja-texto); }
.editorial__lista { margin: 0 0 8px; padding-left: 22px; }
.editorial__lista li { margin-bottom: 10px; line-height: 1.7; }
.editorial__rel {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--gris-borde);
  font-size: 14px;
}
.editorial__nota {
  font-size: 13px;
  color: var(--texto-claro);
  margin-bottom: 0;
}

/* FAQ: mismo patron que en la portada, con el acordeon ya presente en el
   HTML (antes solo existia si JavaScript lo escribia). */
.editorial .faq { margin-top: 4px; }
.editorial .faq details {
  background: #f7f9fc;
  border: 1px solid var(--gris-borde);
  border-radius: 10px;
  margin-bottom: 10px;
}
.editorial .faq details[open] { border-color: var(--naranja); }
.editorial .faq summary {
  padding: 14px 18px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}
.editorial .faq summary::after { content: "\FF0B"; color: var(--naranja-texto); flex-shrink: 0; }
.editorial .faq details[open] summary::after { content: "\2212"; }
.editorial .faq summary::-webkit-details-marker { display: none; }
.editorial .faq p { padding: 0 18px 14px; margin: 0; font-size: 15px; }

/* La descripcion del producto la escribe el bot con el ASIN; en el catalogo
   solo aparece en el feed general, y ahi molesta si se corta a media frase. */
.oferta-descripcion {
  font-size: 13px;
  line-height: 1.6;
  color: var(--texto-claro);
  margin-top: 8px;
}

@media (max-width: 640px) {
  .editorial { padding: 22px 18px; }
  .editorial__h2 { font-size: 22px; }
}

/* ==========================================================================
   Cabecera del bloque de ofertas
   El listado va antes que el texto editorial (ver generar_categorias.py): la
   intencion de quien llega a una pagina de categoria es ver precios. El texto
   queda debajo, ya separado, para quien quiera leerlo.
   ========================================================================== */
.catalogo__cabecera { margin-bottom: 20px; }
.catalogo__cabecera h2 {
  font-size: 20px;
  line-height: 1.3;
  margin: 0 0 6px;
  color: var(--azul-oscuro);
}
.catalogo__cabecera p { margin: 0; font-size: 14px; color: var(--texto-claro); line-height: 1.6; }
.catalogo__cabecera a { color: var(--naranja-texto); }

/* El texto editorial ahora llega despues de un listado que puede ser largo
   (general.html son 100 tarjetas). Sin este corte visual parece un final de
   pagina en lugar de una seccion nueva. */
.editorial--final { margin-top: 40px; }