/* Banner Google AI Pro - kit de variantes. Fuente: banner-gemini.html */
/* ===============================================================
   BASE
   Direccion visual: tinta casi negra y una sola fuente de color,
   el propio destello. Nada de degradado violeta sobre oscuro.
   =============================================================== */

/* El contenedor de consulta va AFUERA del banner: un elemento no puede
   responder a su propio container query. Sin esto, el banner se quedaba
   en su proporcion de escritorio y el texto se salia en celular. */
/* Sin esto el padding del lienzo se SUMA al 100% de ancho y el contenido queda
   fuera del recuadro: el lienzo medía 785px dentro de un banner de 720 y el
   "Ver que incluye" caía 25px afuera. Tu sitio con Tailwind ya lo pone global,
   pero el componente tiene que valerse solo en cualquier pagina. */
.gp-marco, .gp-marco *, .gp-marco *::before, .gp-marco *::after { box-sizing: border-box; }

.gp-marco { container-type: inline-size; width: 100%; }

.gp-banner {
  --gp-tinta: #080B14;
  --gp-rojo: #EA4335;
  --gp-ambar: #FBBC04;
  --gp-verde: #34A853;
  --gp-azul: #4285F4;
  --gp-ratio: 2 / 1;     /* lo pisa cada variante */
  --gp-col: 60%;         /* ancho de la columna de texto */

  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: var(--gp-ratio);
  overflow: hidden;
  border: 0;
  border-radius: 20px;
  padding: 0;
  margin: 0;
  cursor: pointer;
  text-align: left;
  background: var(--gp-tinta);
  isolation: isolate;
  transition: transform .4s cubic-bezier(.16, 1, .3, 1), box-shadow .4s cubic-bezier(.16, 1, .3, 1);
  box-shadow: 0 1px 2px rgba(8, 11, 20, .3), 0 18px 44px -24px rgba(8, 11, 20, .9);
}

/* El color entra por la derecha, donde esta el destello, y muere antes de
   llegar al texto: asi el precio siempre cae sobre fondo oscuro. */
.gp-banner::before {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(46% 62% at 78% 30%, rgba(66, 133, 244, .40), transparent 70%),
    radial-gradient(38% 50% at 88% 74%, rgba(52, 168, 83, .30), transparent 72%),
    radial-gradient(30% 42% at 70% 8%,  rgba(234, 67, 53, .26), transparent 70%);
}

/* Grano: le quita el aspecto de degradado plano. */
.gp-banner::after {
  content: "";
  position: absolute; inset: 0; z-index: 3;
  pointer-events: none;
  opacity: .14;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

.gp-banner:hover, .gp-banner:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 2px 5px rgba(8, 11, 20, .34), 0 30px 60px -26px rgba(8, 11, 20, .95);
}
.gp-banner:focus-visible { outline: 3px solid var(--gp-azul); outline-offset: 3px; }
.gp-banner:active { transform: translateY(-1px); }

/* Filo con los cuatro colores: ata la pieza sin gritar. */
.gp-filo {
  position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 4;
  background: linear-gradient(90deg, var(--gp-rojo), var(--gp-ambar) 34%, var(--gp-verde) 66%, var(--gp-azul));
}

.gp-destello {
  position: absolute; z-index: 1;
  top: 50%; right: -7cqw;
  width: 46cqw; height: auto;
  transform: translateY(-50%) rotate(-8deg);
  filter: drop-shadow(0 0 28px rgba(66, 133, 244, .45));
  transition: transform .55s cubic-bezier(.16, 1, .3, 1);
  pointer-events: none;
}
.gp-banner:hover .gp-destello { transform: translateY(-50%) rotate(-2deg) scale(1.04); }

.gp-lienzo {
  position: relative; z-index: 2;
  height: 100%; width: var(--gp-col);
  display: flex; flex-direction: column; justify-content: center;
  gap: 1.8cqw;
  padding: 6cqw 4cqw 6cqw 6cqw;
}

.gp-kicker {
  display: inline-flex; align-items: center; gap: .55em;
  align-self: flex-start;
  font-size: clamp(8px, 2.2cqw, 18px);
  font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: #AFBBDA; line-height: 1; white-space: nowrap;
}
.gp-kicker::before {
  content: "";
  width: .46em; height: .46em; border-radius: 50%;
  background: var(--gp-verde);
  box-shadow: 0 0 0 .3em rgba(52, 168, 83, .2);
}

/* Gemini Pro y Nano Banana van EN el banner: son los dos nombres por los que
   la gente pregunta, y dentro de la ficha no los veia nadie. */
.gp-fichas { display: flex; flex-wrap: wrap; gap: 1.2cqw; }
.gp-chip {
  display: inline-flex; align-items: center; gap: .4em;
  font-size: clamp(8px, 2.35cqw, 19px);
  font-weight: 600; line-height: 1; color: #E8EDFA;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 7px; padding: .52em .78em; white-space: nowrap;
}

.gp-precio {
  display: block;
  font-family: "Bricolage Grotesque", "Archivo", ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(28px, 15.5cqw, 150px);
  font-weight: 800; line-height: .84; letter-spacing: -.045em;
  color: #fff; font-variant-numeric: tabular-nums;
  text-shadow: 0 3px 30px rgba(8, 11, 20, .6);
}
.gp-precio small { font-size: .42em; font-weight: 600; letter-spacing: -.02em; opacity: .82; }

.gp-plazo {
  display: block;
  font-family: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(12px, 5.6cqw, 52px);
  font-weight: 600; line-height: 1; letter-spacing: -.015em;
  color: #8FE3B4;
}

.gp-ver {
  align-self: flex-start; margin-top: .8cqw;
  font-size: clamp(9px, 2.8cqw, 22px);
  font-weight: 600; color: #fff;
  border-bottom: 2px solid rgba(255, 255, 255, .3);
  padding-bottom: .28em; line-height: 1.2;
  transition: border-color .25s;
}
.gp-banner:hover .gp-ver { border-bottom-color: var(--gp-azul); }
.gp-ver span { display: inline-block; transition: transform .25s cubic-bezier(.16, 1, .3, 1); }
.gp-banner:hover .gp-ver span { transform: translateX(5px); }

/* ===============================================================
   VARIANTES
   =============================================================== */

/* --- HERO: cabecera de la pagina principal, ancho completo --- */
.gp-banner.es-hero { --gp-ratio: 3 / 1; --gp-col: 56%; border-radius: 24px; }
/* Padding y gaps ajustados: con 5cqw/1.4cqw el contenido pedia 447px dentro de
   un 3:1 de 408px y cortaba "Ver que incluye". Medido, no estimado. */
.es-hero .gp-lienzo { gap: 1cqw; padding: 3.4cqw 4cqw 3.4cqw 5cqw; }
.es-hero .gp-precio { font-size: clamp(30px, 11cqw, 150px); }
.es-hero .gp-plazo  { font-size: clamp(12px, 4cqw, 52px); }
.es-hero .gp-kicker { font-size: clamp(8px, 1.6cqw, 18px); }
.es-hero .gp-chip   { font-size: clamp(8px, 1.7cqw, 19px); }
.es-hero .gp-ver    { font-size: clamp(9px, 2cqw, 22px); }
.es-hero .gp-destello { width: 34cqw; right: -4cqw; }

/* --- TIRA: franja fina para intercalar entre parrafos del blog --- */
.gp-banner.es-tira { --gp-ratio: 5 / 1; --gp-col: 100%; border-radius: 14px; }
.es-tira .gp-lienzo {
  flex-direction: row; align-items: center; justify-content: flex-start;
  gap: 3cqw; padding: 0 5.5cqw 0 3.5cqw;
}
.es-tira .gp-precio { font-size: clamp(22px, 7cqw, 64px); }
.es-tira .gp-plazo  { font-size: clamp(9px, 2.6cqw, 24px); }
.es-tira .gp-kicker { font-size: clamp(7px, 1.5cqw, 14px); }
.es-tira .gp-chip   { font-size: clamp(7px, 1.6cqw, 15px); padding: .45em .65em; }
.es-tira .gp-fichas { flex-wrap: nowrap; }
/* En fila, el align-self:flex-start de la base pegaba el CTA al borde de
   arriba y se salia del recuadro. Los hijos directos van centrados. */
.es-tira .gp-lienzo > * { align-self: center; }
.es-tira .gp-ver {
  margin-top: 0; margin-left: auto; align-self: center;
  font-size: clamp(8px, 1.9cqw, 17px);
  white-space: nowrap;
}
.es-tira .gp-destello { width: 14cqw; right: -6cqw; opacity: .4; }
/* Bloque apilado de texto dentro de la fila. */
.es-tira .gp-bloque { display: flex; flex-direction: column; gap: 1cqw; }
.es-tira .gp-bloque > * { align-self: flex-start; }

/* --- CUADRADO: barra lateral, tarjeta --- */
.gp-banner.es-cuadrado { --gp-ratio: 1 / 1; --gp-col: 100%; }
.es-cuadrado .gp-lienzo { padding: 9cqw 8cqw; gap: 3.5cqw; }
.es-cuadrado .gp-precio { font-size: clamp(30px, 26cqw, 150px); }
.es-cuadrado .gp-plazo  { font-size: clamp(12px, 9cqw, 52px); }
.es-cuadrado .gp-kicker { font-size: clamp(8px, 3.6cqw, 18px); }
.es-cuadrado .gp-chip   { font-size: clamp(8px, 3.7cqw, 19px); }
.es-cuadrado .gp-fichas { gap: 2cqw; }
.es-cuadrado .gp-ver    { font-size: clamp(9px, 4.4cqw, 22px); }
.es-cuadrado .gp-destello { width: 58cqw; right: -20cqw; top: auto; bottom: -18cqw; transform: rotate(-8deg); opacity: .55; }
.es-cuadrado:hover .gp-destello { transform: rotate(-2deg) scale(1.04); }

/* --- ALTO: columna lateral vertical --- */
.gp-banner.es-alto { --gp-ratio: 4 / 5; --gp-col: 100%; }
.es-alto .gp-lienzo { padding: 9cqw 8cqw; gap: 3.5cqw; }
.es-alto .gp-precio { font-size: clamp(30px, 27cqw, 150px); }
.es-alto .gp-plazo  { font-size: clamp(12px, 9.5cqw, 52px); }
.es-alto .gp-kicker { font-size: clamp(8px, 3.8cqw, 18px); }
.es-alto .gp-chip   { font-size: clamp(8px, 3.9cqw, 19px); }
.es-alto .gp-fichas { gap: 2cqw; }
.es-alto .gp-ver    { font-size: clamp(9px, 4.6cqw, 22px); }
.es-alto .gp-destello { width: 62cqw; right: -22cqw; top: auto; bottom: -16cqw; transform: rotate(-8deg); opacity: .5; }
.es-alto:hover .gp-destello { transform: rotate(-2deg) scale(1.04); }

/* El hero solo aguanta 3:1 cuando de verdad es ancho. Entre 470 y 900 px el
   3:1 deja menos alto del que ocupa el texto y cortaba "Ver que incluye". */
@container (min-width: 471px) and (max-width: 900px) {
  .gp-banner.es-hero { --gp-ratio: 2.1 / 1; --gp-col: 62%; }
  .es-hero .gp-precio { font-size: clamp(30px, 13cqw, 150px); }
  .es-hero .gp-plazo  { font-size: clamp(12px, 4.8cqw, 52px); }
  .es-hero .gp-destello { width: 42cqw; right: -6cqw; }
}

/* ===============================================================
   ANGOSTO
   Debajo de 470px cualquier formato horizontal aplasta el texto, asi
   que todos caen al mismo bloque vertical. La tira, que es fila, se
   convierte en columna: es el unico que cambia de estructura.
   =============================================================== */
@container (max-width: 470px) {
  .gp-banner,
  .gp-banner.es-hero,
  .gp-banner.es-tira,
  .gp-banner.es-cuadrado { --gp-ratio: 5 / 4; --gp-col: 100%; border-radius: 18px; }
  .gp-banner.es-alto     { --gp-ratio: 4 / 5; }

  .gp-lienzo,
  .es-tira .gp-lienzo {
    flex-direction: column; align-items: stretch; justify-content: center;
    width: 100%; padding: 7cqw; gap: 3cqw;
  }
  .es-tira .gp-bloque { gap: 3cqw; }

  .gp-precio, .es-hero .gp-precio, .es-tira .gp-precio, .es-cuadrado .gp-precio { font-size: 23cqw; }
  .es-alto .gp-precio { font-size: 26cqw; }
  .gp-plazo,  .es-hero .gp-plazo,  .es-tira .gp-plazo,  .es-cuadrado .gp-plazo  { font-size: 8.4cqw; }
  .gp-kicker, .es-hero .gp-kicker, .es-tira .gp-kicker, .es-cuadrado .gp-kicker { font-size: 3.4cqw; }
  .gp-chip,   .es-hero .gp-chip,   .es-tira .gp-chip,   .es-cuadrado .gp-chip   { font-size: 3.5cqw; border-radius: 6px; padding: .5em .7em; }
  .gp-fichas, .es-tira .gp-fichas { gap: 2cqw; flex-wrap: wrap; }
  .gp-ver,    .es-hero .gp-ver,    .es-tira .gp-ver,    .es-cuadrado .gp-ver    { font-size: 4.2cqw; margin-top: .5cqw; margin-left: 0; align-self: flex-start; }

  .gp-destello,
  .es-hero .gp-destello,
  .es-tira .gp-destello,
  .es-cuadrado .gp-destello {
    width: 52cqw; right: -16cqw; top: auto; bottom: -14cqw;
    transform: rotate(-8deg); opacity: .55;
  }
  .gp-banner:hover .gp-destello { transform: rotate(-2deg) scale(1.04); }
}

/* Respaldo para navegadores sin container queries. */
@media (max-width: 520px) {
  .gp-banner { aspect-ratio: 5 / 4; }
  .gp-banner.es-alto { aspect-ratio: 4 / 5; }
}

@media (prefers-reduced-motion: reduce) {
  .gp-banner, .gp-ver, .gp-ver span, .gp-destello { transition: none; }
  .gp-banner:hover, .gp-banner:focus-visible { transform: none; }
}

/* ===============================================================
   FICHA (una sola por pagina, la comparten todos los banners)
   =============================================================== */
#gp-ficha {
  border: 0; border-radius: 22px; padding: 0;
  width: min(660px, calc(100vw - 2rem));
  max-height: min(88vh, 920px);
  overflow: auto; overscroll-behavior: contain;
  background: #fff; color: #131826;
  box-shadow: 0 36px 90px -30px rgba(8, 11, 20, .62);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.62;
}
#gp-ficha::backdrop { background: rgba(8, 11, 20, .76); backdrop-filter: blur(4px); }

.gp-ficha-cab { position: relative; background: #080B14; color: #fff; padding: 28px 30px 26px; overflow: hidden; }
.gp-ficha-cab::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(60% 130% at 92% 12%, rgba(66, 133, 244, .40), transparent 68%),
    radial-gradient(46% 100% at 100% 88%, rgba(52, 168, 83, .26), transparent 70%);
}
.gp-ficha-cab > * { position: relative; }
.gp-ficha-cab h2 {
  margin: 0 0 7px;
  font-family: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(21px, 4.4vw, 29px);
  font-weight: 800; letter-spacing: -.025em; line-height: 1.14; max-width: 22ch;
}
.gp-ficha-precio { font-size: clamp(15px, 3.4vw, 19px); font-weight: 700; color: #8FE3B4; font-variant-numeric: tabular-nums; }
.gp-cab-filo {
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, #EA4335, #FBBC04 34%, #34A853 66%, #4285F4);
}

.gp-cerrar {
  position: absolute; top: 15px; right: 15px;
  width: 38px; height: 38px; display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, .24); border-radius: 50%;
  background: rgba(255, 255, 255, .07); color: #fff;
  font-size: 19px; line-height: 1; cursor: pointer;
  transition: background .2s, border-color .2s;
}
.gp-cerrar:hover { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .48); }
.gp-cerrar:focus-visible { outline: 2px solid #4285F4; outline-offset: 2px; }

.gp-cuerpo { padding: 26px 30px 30px; }

.gp-titulo {
  font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: #6C7793; margin: 28px 0 13px;
}
.gp-titulo:first-child { margin-top: 0; }

/* Los dos nombres que nadie reconoce van en tarjeta y explicados. */
.gp-destacados { display: grid; gap: 13px; }
.gp-destacado {
  position: relative; padding: 17px 19px 17px 54px;
  border: 1px solid #E5E9F2; border-radius: 15px;
  background: linear-gradient(180deg, #FCFDFF, #F4F6FB);
}
.gp-destacado::before {
  content: ""; position: absolute; left: 0; top: 14px; bottom: 14px;
  width: 3px; border-radius: 0 3px 3px 0;
}
.gp-destacado.es-gemini::before { background: linear-gradient(180deg, #EA4335, #4285F4); }
.gp-destacado.es-banana::before { background: linear-gradient(180deg, #FBBC04, #34A853); }
.gp-destacado-icono { position: absolute; top: 16px; left: 17px; font-size: 21px; line-height: 1; }
.gp-destacado h4 { margin: 0 0 5px; font-size: 17px; font-weight: 750; letter-spacing: -.012em; color: #131826; }
.gp-destacado p { margin: 0; font-size: 14.5px; color: #3D4860; }
.gp-extra { display: block; margin-top: 9px; font-size: 13px; font-weight: 600; color: #2C6BD4; }

.gp-incluye { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.gp-incluye li { display: grid; grid-template-columns: 1.7em 1fr; gap: 11px; align-items: start; font-size: 15px; }
.gp-incluye i { font-style: normal; color: #7B8499; }
.gp-emoji { font-size: 19px; line-height: 1.35; }

.gp-como { font-size: 15px; margin: 0; padding: 16px 18px; background: #F4F6FB; border-radius: 13px; border-left: 3px solid #4285F4; }

/* La tabla es lo que evita los reclamos: por eso va como tabla, no como parrafo. */
.gp-tabla-caja { overflow-x: auto; }
.gp-tabla { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 300px; }
.gp-tabla th, .gp-tabla td { padding: 10px 12px; text-align: left; }
.gp-tabla thead th { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #6C7793; border-bottom: 2px solid #E5E9F2; }
.gp-tabla tbody tr + tr td { border-top: 1px solid #EEF1F7; }
.gp-tabla td:last-child, .gp-tabla th:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.gp-tabla td:last-child { font-weight: 750; }
.gp-tabla tbody tr:last-child td { color: #8B94A9; font-weight: 500; }

.gp-nota { font-size: 13.5px; color: #59637B; margin: 13px 0 0; }
.gp-nota strong { color: #131826; }

.gp-comprar {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  margin-top: 28px; padding: 16px 22px; border-radius: 13px;
  background: #128C7E; color: #fff;
  font-size: 16px; font-weight: 700; text-decoration: none;
  transition: background .2s, transform .2s;
}
.gp-comprar:hover { background: #0E7267; transform: translateY(-1px); }
.gp-comprar:focus-visible { outline: 3px solid #128C7E; outline-offset: 3px; }

/* ---------------------------------------------------------------
   Solo para esta pagina de muestra. No copies esto a tu sitio.
   --------------------------------------------------------------- */
body {
  margin: 0; padding: 36px 20px 70px;
  background: #EEF1F7;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  color: #131826;
}
.kit { max-width: 1280px; margin: 0 auto; }
.kit h1 {
  font-family: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  font-size: 26px; font-weight: 800; letter-spacing: -.03em; margin: 0 0 4px;
}
.kit .sub { color: #6C7793; font-size: 14.5px; margin: 0 0 34px; }
.caso { margin: 0 0 40px; }
.caso > h2 {
  font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: #8B94A9; margin: 0 0 4px;
}
.caso > .nota { font-size: 13.5px; color: #6C7793; margin: 0 0 13px; }
.caso > .nota code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px; background: #E2E7F0; padding: 2px 6px; border-radius: 5px;
}
.ancho-848 { max-width: 848px; }
.ancho-720 { max-width: 720px; }
.ancho-375 { max-width: 375px; }
.ancho-300 { max-width: 300px; }
.lado { display: flex; gap: 22px; align-items: flex-start; flex-wrap: wrap; }
.lado > div { flex: 0 0 300px; }
/* ===============================================================
   Colocacion dentro de nekoworld.store: el banner va arriba del
   todo, centrado y con el mismo ancho util que el resto del sitio.
   =============================================================== */
.gp-marco.gp-top {
  max-width: 1100px;
  margin: 14px auto 6px;
  padding: 0 clamp(14px, 4vw, 28px);
}
.gp-marco.gp-top .gp-banner { cursor: pointer; }
@media (max-width: 700px) {
  .gp-marco.gp-top { margin: 10px auto 4px; padding: 0 14px; }
}