/* ══════════════════════════════════════════════════════════
   ENCUESTA / SORTEO DE LA FICHA — "Tú eliges la receta"

   Se carga SOLO cuando hay una campania viva para la ficha
   (ver el gate en views/layout/productos/ver.php). El copy, las
   recetas y el premio no estan aca: salen de /encuesta/api.php.

   Origen: layout-draft-pdp.html, que sigue siendo el banco de
   pruebas. Si se toca uno, tocar el otro.
   ══════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════
   SORTEO "TU ELIGES LA RECETA"  (reemplaza la barra de Stories)
   La disposicion es la de la referencia: a la izquierda el anuncio
   con la fecha, en el medio las dos recetas para votar, y a la
   derecha el premio con la licuadora recortada (PNG sin fondo, en
   asset/img/, sacado de la foto de catalogo).
   Lo que NO se toma de la referencia son los colores: van los de
   Oster, los mismos que ya usa la ficha (navy #001438, dorado
   #A48E6E) mas los azules del newsletter de oster.cl. Fria
   y caliente se distinguen con azul contra dorado, no con azul
   contra naranja.
   El formulario no vive en la banda: al votar se abre el popup,
   que es el que pide Nombre y Email igual que oster.cl.
   ══════════════════════════════════════════════════════════ */
/* En mobile el menu de abajo (.nav-abajo) queda vacio: sus links viven
   dentro del .navbar-collapse, que abajo de 992px Bootstrap esconde, y
   lo unico que sobrevive es el padding del navbar. Eso es la linea
   blanca que aparecia entre el menu y la banda del sorteo. Se apaga la
   barra entera: en mobile no muestra nada. */
@media (max-width: 991.98px) {
  .nav-abajo { display: none; }
}

.pdp-v2 .pdp-sorteo-bar {
  --so-navy:   #001438;
  --so-navy-2: #002B69;
  --so-blue:   #085693;
  --so-blue-2: #0B6BB5;
  --so-gold:   #A48E6E;
  --so-gold-2: #C7B694;
  --so-bronze: #6E5B3F;
  --so-orange:   #e66a1b;
  --so-orange-2: #8A3C07;

  position: relative;
  margin-bottom: 28px;
  padding: 0;
  color: #fff;
  overflow: hidden;
  /* Cuatro tramos, como la foto "LICUA / CALIENTA": azul, celeste
     sobre la receta fria, naranja sobre la caliente, y de vuelta al
     azul antes de la licuadora. Los dos lavados van en opacidad sobre
     el navy, nunca a color pleno, y el naranja va en la capa de arriba
     asi que en la zona donde se cruzan (atras de la "o") se apoya
     sobre el celeste en vez de mezclarse con el: interpolar celeste
     con naranja da un gris sucio, superponerlos no.
     Las medidas van en calc y no en %: la banda es de ancho completo
     pero las tarjetas cuelgan del .container, que esta centrado. El
     origen es el centro; la "o" cae a +47px, la tarjeta fria va de
     -148px a +27px y la caliente de +67px a +242px. */
  background:
    /* naranja: entra sobre la caliente y se apaga antes del premio */
    linear-gradient(90deg,
      rgba(230,106,27,0)    calc(50% - 20px),
      rgba(230,106,27,0.34) calc(50% + 110px),
      rgba(230,106,27,0.72) calc(50% + 200px),
      rgba(230,106,27,0.38) calc(50% + 320px),
      rgba(230,106,27,0)    calc(50% + 470px)),
    /* celeste: abre despues del anuncio y baña la fria */
    linear-gradient(90deg,
      rgba(43,131,214,0)    calc(50% - 440px),
      rgba(43,131,214,0.30) calc(50% - 260px),
      rgba(43,131,214,0.70) calc(50% - 80px),
      rgba(43,131,214,0.34) calc(50% + 30px),
      rgba(43,131,214,0)    calc(50% + 100px)),
    linear-gradient(112deg, var(--so-navy) 0%, var(--so-navy) 48%, #001C4C 74%, var(--so-navy-2) 100%);
}
/* Resplandor dorado atras de la licuadora, para que la derecha no
   quede plana. Arranca donde el naranja ya se apago, asi que no se
   pisan. Es el mismo dorado de los aros de la ficha. */
.pdp-v2 .pdp-sorteo-bar::after {
  content: '';
  position: absolute; right: -4%; top: -60%;
  width: 42%; height: 240%;
  background: radial-gradient(ellipse at center, rgba(164,142,110,0.26) 0%, rgba(164,142,110,0) 66%);
  pointer-events: none;
}
.pdp-v2 .pdp-sorteo-bar .container { position: relative; z-index: 1; }

/* La licuadora va pegada al piso (align-items:end), pero los textos y
   las tarjetas se centran contra ella: antes colgaban del borde de
   abajo y quedaban hundidos */
.pdp-v2 .sorteo-grid {
  display: grid;
  /* La primera columna se lleva un poco mas de ancho: los tres datos de
     abajo (canal, fecha y hora) tienen que entrar en un solo renglon */
  grid-template-columns: minmax(0,1.16fr) minmax(0,1.12fr) minmax(0,0.88fr);
  gap: 20px;
  align-items: end;
}

/* ── 1) El anuncio ── */
.pdp-v2 .sorteo-copy { align-self: center; padding: 14px 0; }
/* Sin rayitas al costado y sin dorado en la tipografia: el dorado
   queda para los detalles (los circulos, el aro de la tarjeta caliente,
   la linea del premio), nunca para el texto */
.pdp-v2 .sorteo-kicker {
  margin: 0 0 3px;
  color: rgba(255,255,255,0.85);
  font-size: 13px; font-weight: 900; letter-spacing: 2.5px; text-transform: uppercase;
}
.pdp-v2 .sorteo-title { margin: 0 0 7px; font-size: 34px; line-height: 1; font-weight: 900; letter-spacing: -0.5px; text-transform: uppercase; color: #fff; }
.pdp-v2 .sorteo-sub { margin: 0 0 13px; font-size: 14px; font-weight: 600; letter-spacing: 0.3px; color: rgba(255,255,255,0.82); text-transform: uppercase; }
.pdp-v2 .sorteo-sub strong { color: #fff; font-weight: 900; white-space: nowrap; }
/* El canal es el primero de los tres datos y se escribe igual que los
   otros dos: circulo dorado y texto blanco. Sin recuadro encima. */
.pdp-v2 .sorteo-meta .meta-canal { letter-spacing: 0.8px; }
.pdp-v2 .sorteo-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 9px 12px; margin: 0; padding: 0; list-style: none; }
.pdp-v2 .sorteo-meta li { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; white-space: nowrap; }
/* Circulo blanco con aro dorado y dibujo de linea navy: es el mismo
   tratamiento que los iconos de la solapa Destacados (.hl-chip-ic) */
.pdp-v2 .sorteo-ic {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  border-radius: 50%; border: 2px solid transparent;
  background-image: linear-gradient(#fff, #fff), linear-gradient(135deg, #e3d2b3 0%, var(--so-gold) 45%, #7c684c 100%);
  background-origin: border-box; background-clip: padding-box, border-box;
}
.pdp-v2 .sorteo-ic svg { display: block; fill: none; stroke: var(--so-navy); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pdp-v2 .sorteo-meta .sorteo-ic { width: 26px; height: 26px; }
.pdp-v2 .sorteo-meta .sorteo-ic svg { width: 14px; height: 14px; }

/* ── 2) Las dos recetas ── */
.pdp-v2 .sorteo-options { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; align-self: center; padding: 14px 0; }
.pdp-v2 .sorteo-o { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--so-navy); border: 1px solid rgba(255,255,255,0.25); font-size: 10px; font-weight: 700; }
.pdp-v2 .sorteo-opt {
  position: relative; display: block; width: 100%; height: 118px;
  padding: 0; border: 0; border-radius: 14px;
  /* Sin overflow:hidden: era lo que cortaba al ras el circulo del icono,
     que asoma por arriba. El redondeo lo hace cada capa por su cuenta. */
  cursor: pointer; color: #fff; text-align: center;
  background: var(--so-navy-2);
  box-shadow: 0 6px 18px rgba(0,0,0,0.30);
  transition: transform var(--pdp2-transition), box-shadow var(--pdp2-transition);
}
.pdp-v2 .sorteo-opt:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0,0,0,0.4); }
.pdp-v2 .sorteo-opt .opt-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 14px; }
/* El tinte es lo que separa fria de caliente: azul Oster contra dorado Oster */
.pdp-v2 .sorteo-opt .opt-tint { position: absolute; inset: 0; border-radius: 14px; }
/* El degrade de la fria va de navy a azul Oster: el #0B6BB5 con el que
   cerraba tiraba a celeste y ese tono no es de la marca */
.pdp-v2 .sorteo-opt.opt-fria .opt-tint     { background: linear-gradient(90deg, rgba(0,43,105,0.20) 0%, rgba(0,43,105,0.85) 48%, rgba(8,86,147,0.95) 100%); }
/* La caliente ya no va en dorado: el degrade cierra en el naranja
   #e66a1b, el mismo al que abre la banda. El fondo de la tarjeta pasa
   de navy a un marron calido: es lo que se ve por el lado transparente
   del tinte cuando la foto de la receta no carga (el onerror la
   esconde), y navy ahi cortaba el naranja al medio. */
.pdp-v2 .sorteo-opt.opt-caliente          { background: #5F2A10; }
.pdp-v2 .sorteo-opt.opt-caliente .opt-tint { background: linear-gradient(270deg, rgba(96,38,6,0.20) 0%, rgba(138,60,7,0.85) 48%, rgba(230,106,27,0.95) 100%); }
.pdp-v2 .sorteo-opt .opt-body { position: relative; z-index: 2; display: block; padding: 20px 12px 17px; }
.pdp-v2 .sorteo-opt .opt-kicker { display: block; font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; }
.pdp-v2 .sorteo-opt .opt-name { display: block; margin-bottom: 9px; font-size: 21px; line-height: 1; font-weight: 900; letter-spacing: -0.3px; text-transform: uppercase; text-shadow: 0 3px 10px rgba(0,0,0,0.35); }
/* Boton fantasma: vidrio apenas tenido, borde blanco marcado y sombra
   propia. Relleno blanco no iba: sobre la foto de la receta se aplasta
   y parece una etiqueta, no un boton. El borde de 1.5px, el brillo de
   arriba (inset) y la sombra de abajo son los que le dan el relieve;
   en hover se llena de blanco y en el click se hunde 1px. */
.pdp-v2 .sorteo-opt .opt-cta {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 118px; padding: 9px 18px; border-radius: 6px;
  background: rgba(255,255,255,0.14);
  border: 1.5px solid rgba(255,255,255,0.88);
  color: #fff;
  font-size: 12px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase;
  text-shadow: 0 1px 5px rgba(0,0,0,0.35);
  box-shadow: 0 6px 14px rgba(0,0,0,0.32), inset 0 1px 0 rgba(255,255,255,0.30);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  transition: background var(--pdp2-transition), color var(--pdp2-transition),
              border-color var(--pdp2-transition), box-shadow var(--pdp2-transition),
              transform var(--pdp2-transition);
}
.pdp-v2 .sorteo-opt:hover .opt-cta {
  background: #fff; border-color: #fff; color: var(--so-navy);
  text-shadow: none;
  box-shadow: 0 9px 20px rgba(0,0,0,0.38), inset 0 1px 0 rgba(255,255,255,0.9);
}
.pdp-v2 .sorteo-opt:active .opt-cta {
  transform: translateY(1px);
  box-shadow: 0 3px 8px rgba(0,0,0,0.34), inset 0 1px 0 rgba(255,255,255,0.25);
}
/* Ya votada: se marca con el azul de Oster (el cyan no es de la marca).
   El aro blanco del sello es para que se despegue de la tarjeta fria,
   que ya es azul: sin el, circulo azul sobre fondo azul no se ve. */
.pdp-v2 .sorteo-opt .opt-check {
  position: absolute; z-index: 3; right: 9px; top: 9px;
  display: flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--so-blue-2); color: #fff; font-size: 10px;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.92);
  opacity: 0; transform: scale(0.6);
  transition: opacity var(--pdp2-transition), transform var(--pdp2-transition);
}
/* Aro azul con una linea blanca por dentro: el azul solo se pierde
   contra el tinte de la receta fria, que es del mismo azul */
.pdp-v2 .sorteo-opt.is-selected {
  outline: 3px solid var(--so-blue-2); outline-offset: -3px;
  box-shadow: inset 0 0 0 5px rgba(255,255,255,0.9), 0 6px 18px rgba(0,0,0,0.30);
}
.pdp-v2 .sorteo-opt.is-selected:hover { box-shadow: inset 0 0 0 5px rgba(255,255,255,0.9), 0 10px 24px rgba(0,0,0,0.4); }
.pdp-v2 .sorteo-opt.is-selected .opt-check { opacity: 1; transform: scale(1); }
.pdp-v2 .sorteo-opt.is-selected .opt-cta,
.pdp-v2 .sorteo-opt.is-selected:hover .opt-cta {
  background: var(--so-blue-2); color: #fff; border-color: var(--so-blue-2);
  text-shadow: none;
  box-shadow: 0 6px 14px rgba(0,0,0,0.32), inset 0 1px 0 rgba(255,255,255,0.25);
}

/* ── 3) El premio ── */
.pdp-v2 .sorteo-prize { display: flex; align-items: flex-end; justify-content: flex-end; gap: 4px; }
.pdp-v2 .sorteo-prize .prize-txt { align-self: center; padding: 14px 0; text-align: right; }
.pdp-v2 .sorteo-prize .prize-kicker {text-align:center;margin: 0 0 8px; padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,0.8); font-size: 17px; font-weight: 900; line-height: 1.1; text-transform: uppercase; }
.pdp-v2 .sorteo-prize .prize-kicker span { color: #fff; }
.pdp-v2 .sorteo-prize .prize-item {text-align:center;margin: 0; font-size: 14px; font-weight: 700; line-height: 1.15; text-transform: uppercase; }
.pdp-v2 .sorteo-prize .prize-item strong { display: block; font-size: 34px; font-weight: 900; letter-spacing: 0.5px; color: #fff; }
/* La licuadora se apoya en el piso de la banda, como en la referencia.
   El margen de arriba es lo que le da aire: como es el elemento mas
   alto, es ella la que fija el alto de la banda */
.pdp-v2 .sorteo-prize .prize-img { width: auto; height: 152px; margin-top: 14px; object-fit: contain; filter: drop-shadow(0 10px 22px rgba(0,0,0,0.45)); }

@media (max-width: 1199px) {
  /* Aca el .container pasa a 960px: la "o" queda a +44px del centro y
     la tarjeta caliente, que se achica, de +64px a +212px */
  .pdp-v2 .pdp-sorteo-bar {
    background:
      linear-gradient(90deg,
        rgba(230,106,27,0)    calc(50% - 18px),
        rgba(230,106,27,0.34) calc(50% + 96px),
        rgba(230,106,27,0.72) calc(50% + 175px),
        rgba(230,106,27,0.38) calc(50% + 280px),
        rgba(230,106,27,0)    calc(50% + 410px)),
      linear-gradient(90deg,
        rgba(43,131,214,0)    calc(50% - 385px),
        rgba(43,131,214,0.30) calc(50% - 228px),
        rgba(43,131,214,0.70) calc(50% - 70px),
        rgba(43,131,214,0.34) calc(50% + 26px),
        rgba(43,131,214,0)    calc(50% + 88px)),
      linear-gradient(112deg, var(--so-navy) 0%, var(--so-navy) 48%, #001C4C 74%, var(--so-navy-2) 100%);
  }
  .pdp-v2 .sorteo-title { font-size: 29px; }
  .pdp-v2 .sorteo-opt .opt-name { font-size: 18px; }
  .pdp-v2 .sorteo-prize .prize-img { height: 152px; }
  .pdp-v2 .sorteo-prize .prize-item strong { font-size: 24px; }
}
/* Abajo de 992 no entran las tres columnas: el anuncio arriba con el
   premio al lado, y las dos recetas debajo ocupando todo el ancho */
@media (max-width: 991px) {
  /* Apilado las recetas quedan al medio: si el lavado sigue siendo
     horizontal le pega al premio y al anuncio. Pasa a ser una mancha
     redonda apoyada sobre cada tarjeta (a la altura de las recetas,
     que ahora estan en el medio) y se funde en el azul para todos
     lados. */
  .pdp-v2 .pdp-sorteo-bar {
    padding: 13px 0 0; margin-bottom: 16px;
    background:
      radial-gradient(ellipse 54% 24% at 75% 58%,
        rgba(230,106,27,0.72) 0%,
        rgba(230,106,27,0.34) 54%,
        rgba(230,106,27,0)    100%),
      radial-gradient(ellipse 54% 24% at 25% 58%,
        rgba(43,131,214,0.70) 0%,
        rgba(43,131,214,0.32) 54%,
        rgba(43,131,214,0)    100%),
      linear-gradient(150deg, var(--so-navy) 0%, var(--so-navy) 52%, #001C4C 78%, var(--so-navy-2) 100%);
  }
  .pdp-v2 .sorteo-copy { padding: 0; }
  /* Una columna sola y las tres partes en fila. Apilado el orden se
     invierte respecto del escritorio: primero el premio (participa y
     gana + la licuadora), que es el gancho y tiene que estar arriba de
     todo apenas se abre la pagina; en el medio los dos botones para
     votar, que es la accion y no puede quedar al final de todo; y
     abajo el anuncio a todo el ancho (asi el titulo y los tres datos
     entran de largo en vez de partirse en una columna angosta).
     El orden del HTML es anuncio > recetas > premio, asi que las tres
     partes se ubican a mano con grid-row. */
  .pdp-v2 .sorteo-grid { grid-template-columns: minmax(0,1fr); gap: 12px; }
  /* A todo el ancho el anuncio va centrado, como el premio y las
     recetas: alineado a la izquierda quedaba descolgado del resto.
     Va ultimo, asi que es el que cierra la banda: lleva el aire de
     abajo que antes ponian las recetas */
  .pdp-v2 .sorteo-copy    { grid-column: 1; grid-row: 3; padding: 0 0 16px; text-align: center; }
  .pdp-v2 .sorteo-meta    { justify-content: center; }
  /* En el medio, entre el premio y el anuncio: pierde el aire de abajo
     (ya no cierra la banda) y el margen de arriba que lo despegaba de
     los tres datos, porque ahora arriba tiene la licuadora */
  .pdp-v2 .sorteo-options { grid-column: 1; grid-row: 2; padding: 0; margin-top: 0; }
  /* Arriba de todo: la licuadora ya no se apoya en el piso de la banda,
     asi que pierde el margen de arriba que la despegaba del menu */
  .pdp-v2 .sorteo-prize   { grid-column: 1; grid-row: 1; padding-bottom: 0; }
  /* Con el ancho completo los tres datos entran en un renglon */
  .pdp-v2 .sorteo-meta { flex-wrap: nowrap; }
  /* El premio deja de estar pegado a la derecha: queda centrado, con la
     licuadora al lado del texto */
  .pdp-v2 .sorteo-prize { justify-content: center; gap: 10px; }
  .pdp-v2 .sorteo-prize .prize-img { height: 132px; margin-top: 0; }
  .pdp-v2 .sorteo-prize .prize-txt { padding: 0 0 10px; }
  /* Apilado el premio tiene el ancho entero: TITAN es la palabra que
     tiene que pesar, asi que sube de 22px a 30px */
  .pdp-v2 .sorteo-prize .prize-item strong { font-size: 30px; }
}
@media (max-width: 640px) {
  .pdp-v2 .sorteo-title { font-size: 25px; }
  .pdp-v2 .sorteo-sub { font-size: 12px; margin-bottom: 10px; }
  /* En mobile la columna es angosta y los tres datos se apilan: se los
     achica para que las tres filas ocupen lo que ocupaba una */
  .pdp-v2 .sorteo-meta { gap: 6px 10px; }
  .pdp-v2 .sorteo-meta li { font-size: 11px; gap: 6px; }
  .pdp-v2 .sorteo-meta .sorteo-ic { width: 21px; height: 21px; border-width: 1.5px; }
  .pdp-v2 .sorteo-meta .sorteo-ic svg { width: 11px; height: 11px; }
  .pdp-v2 .sorteo-prize .prize-kicker { font-size: 14px; }
  .pdp-v2 .sorteo-prize .prize-item strong { font-size: 26px; }
  .pdp-v2 .sorteo-prize .prize-img { height: 112px; }
  .pdp-v2 .sorteo-options { gap: 6px; }
  .pdp-v2 .sorteo-opt { height: 104px; }
  .pdp-v2 .sorteo-opt .opt-body { padding: 18px 8px 15px; }
  .pdp-v2 .sorteo-opt .opt-kicker { font-size: 10px; }
  .pdp-v2 .sorteo-opt .opt-name { font-size: 16px; margin-bottom: 7px; }
  .pdp-v2 .sorteo-opt .opt-cta { min-width: 0; width: 100%; padding: 7px 8px; font-size: 11px; letter-spacing: 0.4px; }
}
/* Abajo de 375px los tres datos no entran en un renglon a 11px: se
   achican un punto en vez de partirse en tres lineas (a 320px pasan a
   necesitar 278px de los 290px que hay) */
@media (max-width: 374px) {
  .pdp-v2 .sorteo-meta { gap: 6px 8px; }
  .pdp-v2 .sorteo-meta li { font-size: 10px; gap: 5px; letter-spacing: 0.2px; }
  .pdp-v2 .sorteo-meta .sorteo-ic { width: 18px; height: 18px; }
  .pdp-v2 .sorteo-meta .sorteo-ic svg { width: 10px; height: 10px; }
}

/* ══════════════════════════════════════════════════════════
   POPUP DEL SORTEO
   Es el paso 2: se abre al votar. Tarjeta blanca con el boton
   navy, igual que el newsletter de oster.cl.
   ══════════════════════════════════════════════════════════ */
.pdp-v2 .sorteo-modal { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.pdp-v2 .sorteo-modal[hidden] { display: none; }
.pdp-v2 .sorteo-modal .modal-bg { position: absolute; inset: 0; background: rgba(0,20,56,0.72); animation: sorteoFade 0.2s ease both; }
.pdp-v2 .sorteo-modal .modal-card {
  position: relative; width: 100%; max-width: 420px;
  background: #fff; border-radius: 12px; overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.45);
  animation: sorteoRise 0.25s cubic-bezier(0.22,0.61,0.36,1) both;
}
@keyframes sorteoFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes sorteoRise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.pdp-v2 .sorteo-modal .modal-close {
  position: absolute; z-index: 2; top: 8px; right: 8px;
  width: 30px; height: 30px; border: 0; border-radius: 50%;
  background: rgba(255,255,255,0.25); color: #fff; font-size: 20px; line-height: 1; cursor: pointer;
}
.pdp-v2 .sorteo-modal .modal-close:hover { background: rgba(255,255,255,0.45); }
.pdp-v2 .sorteo-modal .modal-head { padding: 18px 20px 16px; background: #001438; color: #fff; text-align: center; }
.pdp-v2 .sorteo-modal .modal-vote { display: inline-flex; align-items: center; margin-bottom: 9px; padding: 5px 12px; border-radius: 999px; background: rgba(255,255,255,0.14); font-size: 11px; font-weight: 800; letter-spacing: 0.8px; text-transform: uppercase; }
.pdp-v2 .sorteo-modal .modal-head h4 { margin: 0 0 5px; font-size: 19px; font-weight: 900; text-transform: uppercase; }
.pdp-v2 .sorteo-modal .modal-head p { margin: 0; font-size: 13px; line-height: 1.4; color: rgba(255,255,255,0.82); }
.pdp-v2 .sorteo-modal .modal-head p strong { color: #fff; }
.pdp-v2 .sorteo-modal .modal-body { padding: 18px 20px 20px; }
.pdp-v2 .sorteo-modal .form-field { width: 100%; height: 44px; margin-bottom: 10px; padding: 0 14px; border: 1px solid #d1d1d1; border-radius: 6px; background: #fff; color: #001438; font-family: inherit; font-size: 14px; }
.pdp-v2 .sorteo-modal .form-field::placeholder { color: #818181; }
.pdp-v2 .sorteo-modal .form-field:focus { outline: none; border-color: #001438; box-shadow: 0 0 0 3px rgba(0,20,56,0.12); }
/* El campo apagado desde el admin no se dibuja. Va explicito porque hay resets
   que le ponen display a input/select y le ganan al [hidden] del navegador. */
.pdp-v2 .sorteo-modal .form-field[hidden] { display: none; }
/* El pais es un select y tiene que verse igual que los inputs: misma altura,
   mismo borde, y la flechita dibujada a mano porque la del sistema cambia de
   forma en cada navegador. */
.pdp-v2 .sorteo-modal select.form-field {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  padding-right: 38px; line-height: 42px; cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23001438' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 12px 8px;
}
.pdp-v2 .sorteo-modal select.form-field:invalid { color: #818181; }   /* mientras no eligio nada, gris de placeholder */
.pdp-v2 .sorteo-modal .form-tyc { display: flex; align-items: flex-start; gap: 8px; margin: 2px 0 14px; font-size: 11px; line-height: 1.4; font-weight: 400; color: #474747; cursor: pointer; }
.pdp-v2 .sorteo-modal .form-tyc input { margin-top: 2px; flex: 0 0 auto; accent-color: #001438; }
.pdp-v2 .sorteo-modal .form-submit {
  width: 100%; height: 46px; border: 0; border-radius: 10px;   /* radio 10px, el mismo del boton de oster.cl */
  background: #001438; color: #fff;
  font-family: inherit; font-size: 15px; font-weight: 900; letter-spacing: 0.8px; text-transform: uppercase;
  cursor: pointer; transition: background var(--pdp2-transition);
}
.pdp-v2 .sorteo-modal .form-submit:hover { background: #002B69; }
.pdp-v2 .sorteo-modal .form-msg { display: none; margin: 10px 0 0; font-size: 12px; font-weight: 700; color: #C0392B; text-align: center; }
.pdp-v2 .sorteo-modal .form-msg.is-on { display: block; }
/* El gracias es la unica pantalla que la persona se queda leyendo: el resto
   del popup lo pasa de largo. Por eso va con el cuerpo mas grande que el
   formulario, no con el mismo 13px. */
.pdp-v2 .sorteo-modal .modal-done { padding: 30px 26px 30px; text-align: center; }
.pdp-v2 .sorteo-modal .modal-done .done-ic { display: inline-flex; align-items: center; justify-content: center; width: 58px; height: 58px; margin-bottom: 14px; border-radius: 50%; background: var(--so-blue, #085693); color: #fff; font-size: 25px; }
.pdp-v2 .sorteo-modal .modal-done h4 { margin: 0 0 10px; font-size: 24px; line-height: 1.15; font-weight: 900; color: #001438; text-transform: uppercase; }
.pdp-v2 .sorteo-modal .modal-done p { margin: 0 0 16px; font-size: 16px; line-height: 1.55; color: #383838; }
.pdp-v2 .sorteo-modal .modal-done .done-btn { display: inline-block; padding: 12px 28px; border: 0; border-radius: 10px; background: #001438; color: #fff; font-family: inherit; font-size: 14px; font-weight: 800; text-transform: uppercase; cursor: pointer; }

/* El gracias: cuando aparece, la cabecera navy del paso 1 se esconde
   (ver sorteoDoneAnuncio en el JS). El anuncio del sorteo y el boton de
   Instagram salen del admin; si la campania no tiene fecha, no se dibujan. */
.pdp-v2 .sorteo-modal .modal-head[hidden] { display: none; }
.pdp-v2 .sorteo-modal .modal-done .done-anuncio { margin: 0 0 18px; padding: 14px 16px; border: 1px solid #e3e9f2; border-radius: 10px; background: #f4f7fb; font-size: 16px; line-height: 1.55; color: #001438; }
.pdp-v2 .sorteo-modal .modal-done .done-anuncio b { font-weight: 900; }
/* La cuenta de Instagram es una palabra mas de la frase: se subraya y se
   colorea, pero no se despega en una caja aparte. El icono va pegado al
   arroba y baja un pelo para apoyarse en la linea del texto. */
.pdp-v2 .sorteo-modal .modal-done .done-ig { display: inline; color: #DD2A7B; font-weight: 900; text-decoration: none; white-space: nowrap; border-bottom: 1px solid rgba(221,42,123,0.35); }
.pdp-v2 .sorteo-modal .modal-done .done-ig:hover,
.pdp-v2 .sorteo-modal .modal-done .done-ig:focus { color: #8134AF; text-decoration: none; border-bottom-color: rgba(129,52,175,0.55); }
.pdp-v2 .sorteo-modal .modal-done .done-ig i { margin-right: 4px; font-size: 1.05em; vertical-align: -1px; }
.pdp-v2 .sorteo-modal .modal-done .done-prueba { margin: -6px 0 16px; font-size: 12px; font-weight: 700; color: #a07000; }
.pdp-v2 .sorteo-modal .modal-done .done-prueba[hidden],
.pdp-v2 .sorteo-modal .modal-done .done-anuncio[hidden] { display: none; }

@media (max-width: 480px) {
  /* Iba pegado abajo, como hoja deslizante. Va centrado en la pantalla,
     igual que en desktop: overflow-y para que si el teclado achica la
     ventana la tarjeta se pueda scrollear en vez de cortarse. */
  .pdp-v2 .sorteo-modal { padding: 12px; align-items: center; overflow-y: auto; }
  .pdp-v2 .sorteo-modal .modal-card { max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .pdp-v2 .sorteo-opt, .pdp-v2 .sorteo-modal .modal-card, .pdp-v2 .sorteo-modal .modal-bg { transition: none; animation: none; }
}