/*
 * Sirena Navidad: landing "Expertos del toque navideño"
 *
 * Las medidas salen del PSD (3289 px de ancho): calc(var(--u) * N) son N px del PSD.
 * El diseño escala con la pantalla hasta 1600 px y los max() ponen el piso en móvil.
 */

:root {
  /* --escala encoge o agranda el landing completo sin tocar las proporciones del PSD */
  --escala: 1;
  --u: calc(min(100vw, 1600px) * var(--escala) / 3289);
  --sn-brown: #bc8562;
  --sn-brown-dark: #a26d4b;
  --sn-frame: #cea085;
  --sn-wall: #c58a68;
  --sn-yellow: #fee64c;
  --sn-gray: #9f9f9f;
  --sn-ink: #585858;
  --sn-red: #9b2c24;
  --sn-font: "Montserrat", Arial, sans-serif;
}

#int-content {
  position: relative;
  background-color: var(--sn-wall);
  font-family: var(--sn-font);
  color: #fff;
}

#int-content section {
  position: relative;
  overflow: hidden;
}

.sn-container {
  position: relative;
  width: calc(var(--u) * 2800);
  margin: 0 auto;
}


/* barras con el logo */

.sn-bar {
  padding: max(14px, calc(var(--u) * 70)) 0;
  background-color: var(--sn-yellow);
  text-align: center;
  line-height: 0;
}

.sn-bar .logo-main {
  display: inline-block;
  width: max(130px, calc(var(--u) * 420));
}

.sn-bar .logo-main img {
  display: block;
  width: 100%;
  height: auto;
}


/* hero */

.sn-hero {
  padding: max(8px, calc(var(--u) * 50));
  background-color: var(--sn-frame);
}

.sn-hero-frame {
  padding: max(28px, calc(var(--u) * 80)) 0 max(28px, calc(var(--u) * 108));
  background-color: var(--sn-brown);
  text-align: center;
}

.sn-hero-title {
  margin: 0;
  line-height: 0;
}

.sn-hero-title img {
  display: inline-block;
  width: max(min(86%, 520px), calc(var(--u) * 1904));
  height: auto;
}


/* sección del arbolito */

.sn-main {
  padding: max(40px, calc(var(--u) * 301)) 0 max(48px, calc(var(--u) * 122));
  background: var(--sn-wall) url("../images/bg-navidad.jpg") no-repeat center bottom / cover;
}

.sn-head {
  text-align: center;
}

.sn-sparkles {
  display: block;
  width: max(150px, calc(var(--u) * 618));
  height: auto;
  margin: 0 auto;
}

.sn-head-title {
  margin: max(10px, calc(var(--u) * 24)) 0 0;
  font-family: var(--sn-font);
  font-size: max(2.1rem, calc(var(--u) * 145));
  font-weight: 800;
  font-style: italic;
  line-height: 1;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: #fff;
}


/* formulario */

.sn-main .sn-container > p:empty {
  display: none;
}

.sn-main .wpcf7 {
  margin-top: max(40px, calc(var(--u) * 236));
}

.sn-form-col {
  width: calc(var(--u) * 1597);
}

.sn-form-full {
  margin-top: max(18px, calc(var(--u) * 78));
}

.sn-form-title {
  margin: 0 0 max(28px, calc(var(--u) * 113));
  font-family: var(--sn-font);
  font-size: max(1.45rem, calc(var(--u) * 100));
  font-weight: 600;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  color: #fff;
}

.sn-form-title strong {
  display: block;
  font-size: 1.15em;
  font-weight: 800;
  font-style: italic;
}

.sn-form-title::after {
  content: "";
  display: block;
  width: max(150px, calc(var(--u) * 705));
  height: max(2px, calc(var(--u) * 9));
  margin: max(14px, calc(var(--u) * 50)) auto 0;
  background-color: #fff;
}

.sn-field {
  text-align: center;
}

.sn-field + .sn-field {
  margin-top: max(18px, calc(var(--u) * 78));
}

.sn-label {
  display: block;
  margin: 0 0 max(8px, calc(var(--u) * 26));
  font-size: max(1rem, calc(var(--u) * 56));
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
  text-wrap: balance;
  color: #fff;
}

@media (min-width: 960px) {
  .sn-label-wide {
    max-width: calc(var(--u) * 2500);
    margin-left: auto;
    margin-right: auto;
  }
}

.sn-main .wpcf7-form-control-wrap {
  display: block;
  position: relative;
}

.sn-input,
.sn-select,
.sn-textarea {
  display: block;
  width: 100%;
  margin: 0;
  border: 0;
  border-radius: 0;
  outline: 0;
  box-shadow: none;
  background-color: #fff;
  font-family: var(--sn-font);
  font-weight: 500;
  color: var(--sn-ink);
  text-align: center;
  -webkit-appearance: none;
  appearance: none;
  transition: box-shadow .2s;
}

.sn-input,
.sn-select {
  height: max(3rem, calc(var(--u) * 135));
  padding: 0 1em;
  font-size: max(1rem, calc(var(--u) * 52));
}

.sn-input::placeholder,
.sn-textarea::placeholder {
  color: var(--sn-gray);
  opacity: 1;
  text-transform: uppercase;
}

.sn-select {
  padding: 0 max(2.75rem, calc(var(--u) * 340));
  text-align-last: center;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 72'%3E%3Cpath d='M4 4l56 62 56-62' fill='none' stroke='%239f9f9f' stroke-width='6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right max(1rem, calc(var(--u) * 200)) center;
  background-size: max(1.1rem, calc(var(--u) * 119)) auto;
}

.sn-select:has(option[value=""]:checked) {
  color: var(--sn-gray);
  text-transform: uppercase;
}

.sn-select option {
  color: var(--sn-ink);
  text-transform: none;
}

.sn-textarea {
  height: max(8rem, calc(var(--u) * 291));
  padding: max(14px, calc(var(--u) * 55)) max(16px, calc(var(--u) * 120));
  font-size: max(.95rem, calc(var(--u) * 46));
  line-height: 1.3;
  text-align: left;
  resize: vertical;
}

.sn-textarea::placeholder {
  text-align: center;
}

.sn-input:focus,
.sn-select:focus,
.sn-textarea:focus {
  box-shadow: inset 0 0 0 3px var(--sn-brown);
}

.sn-main .wpcf7-not-valid {
  box-shadow: inset 0 0 0 3px var(--sn-red);
}

.sn-main .wpcf7-not-valid-tip {
  display: inline-block;
  margin-top: .5em;
  padding: .25em .75em;
  background-color: var(--sn-red);
  font-size: max(.8rem, calc(var(--u) * 36));
  font-weight: 600;
  color: #fff;
}


/* uploader (Drag and Drop Multiple File Upload for CF7) */

.sn-main .codedropz-upload-wrapper {
  text-align: center;
}

.sn-main .codedropz-upload-handler {
  position: relative;
  margin: 0;
  border: 0;
  border-radius: 0;
  background-color: #fff;
  transition: box-shadow .2s;
}

.sn-main .codedropz-upload-handler.codedropz-dragover,
.sn-main .codedropz-upload-handler:focus-within {
  box-shadow: inset 0 0 0 4px var(--sn-brown);
}

.sn-main .codedropz-upload-container {
  padding: max(24px, calc(var(--u) * 97)) 1em max(24px, calc(var(--u) * 87));
}

.sn-main .codedropz-upload-inner,
.sn-main .codedropz-btn-wrap {
  position: static;
  margin: 0;
}

.sn-main .codedropz-upload-inner::before {
  content: "";
  display: block;
  width: max(64px, calc(var(--u) * 268));
  aspect-ratio: 268 / 210;
  margin: 0 auto max(10px, calc(var(--u) * 36));
  background: url("../images/icon-folder.png") no-repeat center / contain;
}

.sn-main .codedropz-upload-inner > :first-child {
  margin: 0;
  font-family: var(--sn-font);
  font-size: max(1rem, calc(var(--u) * 56));
  font-weight: 500;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--sn-gray);
}

.sn-main .codedropz-upload-inner > span,
.sn-main .dnd-upload-counter {
  display: none;
}

/* el botón "Buscar fotos" se estira sobre toda la caja: click en cualquier parte abre el selector */
.sn-main .cd-upload-btn {
  position: static;
  display: block;
  padding: 0;
  border: 0;
  background: none;
  font-size: 0;
  color: transparent;
}

.sn-main .cd-upload-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.sn-main .dnd-upload-status {
  margin-top: 8px;
  padding: 8px 12px;
  background-color: #fff;
  text-align: left;
}

.sn-main .dnd-upload-status .dnd-upload-details .name {
  font-size: 14px;
  color: var(--sn-ink);
}

.sn-main .dnd-upload-status .dnd-upload-details .name em {
  color: var(--sn-gray);
}

.sn-main .dnd-upload-status .dnd-upload-details .dnd-progress-bar {
  background: #eee;
}

.sn-main .dnd-upload-status .dnd-upload-details .dnd-progress-bar span {
  background: var(--sn-brown);
}

.sn-main .dnd-upload-status .dnd-upload-details span.has-error {
  margin-top: .25em;
  font-size: 13px;
  font-weight: 600;
  color: var(--sn-red);
}

.sn-main .codedropz-upload-wrapper span.has-error-msg {
  display: inline-block;
  margin-top: .5em;
  padding: .25em .75em;
  background-color: var(--sn-red);
  font-size: 14px;
  font-weight: 600;
  color: #fff;
}


/* términos */

.sn-field.sn-terms {
  margin-top: max(20px, calc(var(--u) * 60));
}

.sn-main .wpcf7-acceptance .wpcf7-list-item {
  display: block;
  margin: 0;
}

.sn-main .wpcf7-acceptance label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: max(12px, calc(var(--u) * 64));
  cursor: pointer;
}

.sn-main .wpcf7-acceptance input {
  flex: none;
  width: max(2rem, calc(var(--u) * 155));
  height: max(2rem, calc(var(--u) * 155));
  margin: 0;
  border: max(3px, calc(var(--u) * 12)) solid #fff;
  border-radius: max(4px, calc(var(--u) * 16));
  background: transparent no-repeat center / 72%;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

.sn-main .wpcf7-acceptance input:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12.5l5 5L20 6.5' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.sn-main .wpcf7-acceptance input:focus-visible {
  outline: 3px solid var(--sn-yellow);
  outline-offset: 3px;
}

.sn-main .wpcf7-list-item-label {
  font-size: max(.85rem, calc(var(--u) * 44));
  line-height: 1.25;
  text-align: center;
  text-transform: uppercase;
  /* esta línea cae sobre la parte clara de la foto: la sombra la despega del fondo */
  text-shadow: 0 1px 3px rgba(0, 0, 0, .45);
  color: #fff;
}

.sn-main .wpcf7-list-item-label a {
  font-weight: 700;
  text-decoration: underline;
  color: #fff;
}


/* enviar */

.sn-submit-wrap {
  position: relative;
  margin-top: max(24px, calc(var(--u) * 79));
  text-align: center;
}

.sn-submit {
  display: inline-block;
  width: max(220px, calc(var(--u) * 940));
  height: max(3.25rem, calc(var(--u) * 150));
  margin: 0;
  padding: 0 1em;
  border: 0;
  border-radius: 0;
  background-color: var(--sn-brown);
  font-family: var(--sn-font);
  font-size: max(1.35rem, calc(var(--u) * 62));
  font-weight: 900;
  line-height: 1;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: #fff;
  cursor: pointer;
  transition: background-color .2s, opacity .2s;
}

.sn-submit:hover,
.sn-submit:focus-visible {
  background-color: var(--sn-brown-dark);
}

.sn-submit:disabled {
  opacity: .6;
  cursor: not-allowed;
}

.sn-main .wpcf7-spinner {
  position: absolute;
  top: 50%;
  margin: -12px 0 0 16px;
}

.sn-main .wpcf7 form .wpcf7-response-output {
  margin: max(20px, calc(var(--u) * 60)) 0 0;
  padding: 1em 1.5em;
  border: 0;
  background-color: var(--sn-brown);
  font-size: max(1rem, calc(var(--u) * 56));
  font-weight: 600;
  text-align: center;
  color: #fff;
}

.sn-main .wpcf7 form.invalid .wpcf7-response-output,
.sn-main .wpcf7 form.unaccepted .wpcf7-response-output,
.sn-main .wpcf7 form.failed .wpcf7-response-output,
.sn-main .wpcf7 form.aborted .wpcf7-response-output,
.sn-main .wpcf7 form.spam .wpcf7-response-output {
  background-color: var(--sn-red);
}


/* condiciones */

.sn-conditions {
  padding: max(40px, calc(var(--u) * 100)) 0 max(44px, calc(var(--u) * 120));
  background-color: var(--sn-brown);
  text-align: center;
}

.sn-conditions .sn-container {
  width: calc(var(--u) * 2450);
}

.sn-conditions-title {
  margin: 0;
  font-family: var(--sn-font);
  font-size: max(1.1rem, calc(var(--u) * 68));
  font-weight: 700;
  font-style: italic;
  line-height: 1.2;
  text-transform: none;
  color: #fff;
}

.sn-conditions .sn-conditions-list {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: max(1.05rem, calc(var(--u) * 68));
  font-weight: 400;
  font-style: italic;
  line-height: 1.2;
}

.sn-conditions-list li::before {
  content: "• ";
}


/* tablet y móvil */

@media (max-width: 959px) {
  .sn-container,
  .sn-conditions .sn-container {
    width: auto;
    padding: 0 max(20px, 5vw);
  }

  .sn-form-col {
    width: 100%;
  }

  .sn-br-desk {
    display: none;
  }

  .sn-main {
    background-image: url("../images/bg-navidad-m.jpg");
    background-size: 100% auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  [class*="uk-animation-"] {
    animation: none !important;
  }
}