/* ==========================================================================
   MediaLab — /prompting
   Curso «Prompting Publicitario». Usa el sistema de ../iacomunicacion/curso.css
   y sólo agrega las maquetas de anuncio, dibujadas en CSS: sin fotos ajenas,
   la comparación y el caso se muestran con un producto abstracto (una botella).
   Prefijo «p-» para las piezas nuevas.
   ========================================================================== */

/* --------------------------------------------------------------------------
   01 · El producto: una botella dibujada con dos cajas
   -------------------------------------------------------------------------- */
.p-botella {
  --alto: 150px;
  position: relative;
  display: block;
  width: calc(var(--alto) * .44);
  height: var(--alto);
  margin: 0 auto;
  border-radius: calc(var(--alto) * .09) calc(var(--alto) * .09) calc(var(--alto) * .06) calc(var(--alto) * .06);
  background: linear-gradient(100deg, #F4EFE6 0 18%, #FFFFFF 26%, #E6DDCF 40%, #CFC2AE 100%);
  box-shadow: inset -6px 0 12px rgba(0, 0, 0, .12);
}
/* Tapa */
.p-botella::before {
  content: "";
  position: absolute;
  left: 30%; right: 30%;
  bottom: 100%;
  height: calc(var(--alto) * .17);
  border-radius: 3px 3px 0 0;
  background: linear-gradient(100deg, #2A2438, #0F0147 60%, #221B3A);
}
/* Etiqueta */
.p-botella i {
  position: absolute;
  left: 14%; right: 14%;
  top: 38%;
  height: 30%;
  background: var(--tinta);
}
.p-botella i::after {
  content: "";
  position: absolute;
  left: 22%; right: 22%;
  top: 44%;
  height: 2px;
  background: var(--naranja);
}

/* --------------------------------------------------------------------------
   02 · Comparación: anuncio genérico vs anuncio dirigido
   -------------------------------------------------------------------------- */
.p-comparar .c-caso { gap: 0; }
.p-anuncio {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  display: grid;
  place-items: center;
  /* Tamaño de un anuncio en el feed: más grande abruma la comparación */
  width: min(100%, 360px);
  margin: 0 auto var(--e5);
}

/* El genérico: todo grita a la vez */
.p-anuncio--ruido { background: #FFE14D; }
.p-anuncio--ruido .p-botella { --alto: 110px; }
.p-ruido {
  position: absolute;
  font-family: "Arial Black", Impact, sans-serif;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}
.p-ruido--1 { top: 6%; left: 6%; font-size: clamp(22px, 3vw, 38px); color: #E4002B; transform: rotate(-6deg); text-shadow: 2px 2px 0 #1A1A1A; }
.p-ruido--2 {
  top: 20%; right: 6%;
  display: grid; place-items: center;
  width: 30%; aspect-ratio: 1;
  border-radius: 50%;
  background: #E4002B; color: #FFE14D;
  font-size: clamp(14px, 1.7vw, 22px);
  transform: rotate(12deg);
}
.p-ruido--3 { bottom: 18%; left: 6%; padding: 4px 8px; background: #1FA14A; color: #FFFFFF; font-size: clamp(11px, 1.2vw, 15px); transform: rotate(-3deg); }
.p-ruido--4 { bottom: 6%; right: 6%; padding: 6px 10px; background: #1A1A1A; color: #FFE14D; font-size: clamp(13px, 1.5vw, 19px); }
.p-ruido--5 { top: 38%; left: 4%; font-family: Georgia, serif; font-style: italic; font-size: clamp(10px, 1.1vw, 13px); color: #3B37D8; transform: rotate(-90deg); transform-origin: left top; }

/* El dirigido: una luz, un producto, una frase */
.p-anuncio--dirigido {
  background: radial-gradient(120% 80% at 70% 20%, #2B1D6B 0%, var(--tinta) 55%, #07002A 100%);
}
.p-anuncio--dirigido .p-botella {
  --alto: 190px;
  box-shadow: inset -10px 0 18px rgba(0, 0, 0, .22), 0 30px 40px -18px rgba(0, 0, 0, .7);
  -webkit-box-reflect: below 6px linear-gradient(transparent 70%, rgba(255, 255, 255, .18));
}
.p-luz {
  position: absolute;
  top: -20%; right: -10%;
  width: 70%; aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 196, 140, .35), transparent 65%);
}
.p-titular {
  position: absolute;
  top: 8%; left: 0; right: 0;
  text-align: center;
  font-family: Anton, sans-serif;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: clamp(16px, 1.8vw, 24px);
  color: var(--blanco);
}
.p-marca {
  position: absolute;
  bottom: 6%; left: 0; right: 0;
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .4em;
  color: var(--naranja);
}

/* --------------------------------------------------------------------------
   03 · Caso: de una foto a una tanda de anuncios
   -------------------------------------------------------------------------- */
.p-caso {
  display: grid;
  grid-template-columns: 3fr auto 7fr;
  gap: var(--e5);
  align-items: center;
  margin: var(--e8) 0 var(--e7);
}
.p-original {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--e5);
  aspect-ratio: 4 / 5;
  background: #D9D6D0;
  /* La foto del celular: luz plana y un poco de ruido */
  background-image: radial-gradient(rgba(0, 0, 0, .06) 1px, transparent 1px);
  background-size: 4px 4px;
}
.p-original .p-botella { --alto: 120px; box-shadow: none; }
.p-original .etiqueta { color: #4A4A55; }
.p-flecha { color: var(--naranja); }
.p-flecha svg { width: 44px; height: 20px; }

.p-tanda {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--e3);
}
.p-var {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--e4);
}
.p-var .p-botella { --alto: 78px; }
.p-var em {
  font-style: normal;
  font-family: Anton, sans-serif;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 13px;
}
.p-var--tinta  { background: radial-gradient(circle at 70% 20%, #2B1D6B, #07002A 70%); color: var(--blanco); }
.p-var--naranja { background: linear-gradient(160deg, #FF5A3C, #C8161B); color: var(--blanco); }
.p-var--arena  { background: linear-gradient(180deg, #F3E9D8, #D9C3A0); color: var(--tinta); }
.p-var--azul   { background: linear-gradient(200deg, #6E8BFF, #3B37D8); color: var(--blanco); }
.p-var--piedra { background: #ECECEC; color: var(--tinta); }
.p-var--negro  { background: radial-gradient(circle at 50% 30%, #3A3A3A, #0B0B0B 70%); color: #E9C98B; }
.p-var--negro .p-botella i { background: #0B0B0B; }
.p-var--negro .p-botella i::after { background: #E9C98B; }

.p-caso-pasos { max-width: 820px; }

/* --------------------------------------------------------------------------
   04 · Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1099px) {
  .p-caso { grid-template-columns: 1fr; justify-items: center; }
  .p-original { width: min(260px, 70%); }
  .p-flecha { transform: rotate(90deg); }
  .p-tanda { width: 100%; }
}
@media (max-width: 699px) {
  .p-anuncio--dirigido .p-botella { --alto: 150px; }
  .p-tanda { gap: var(--e2); }
  .p-var .p-botella { --alto: 56px; }
  .p-var em { font-size: 11px; }
}