:root {
  --ink: #251b17;
  --red: #af0715;
  --paper: #ffdaaa;
  --paper-dark: #f1c99b;
  --edge: #9b643f;
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--ink);
  /* The sides of the poster use the dark texture supplied for the contest. */
  background-color: #161310;
  background-image: url('../img/fondo-sides-v2.webp');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  font-family: 'Arial Narrow', 'Liberation Sans Narrow', 'Roboto Condensed', Arial, sans-serif;
}

img {
  max-width: 100%;
  height: auto;
}

button,
input {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
.dropzone:focus-visible {
  outline: 3px solid #a6000f;
  outline-offset: 4px;
}

[hidden] {
  display: none !important;
}

.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.poster {
  position: relative;
  isolation: isolate;
  max-width: 860px;
  margin: 0 auto;
  min-height: 100vh;
  padding: 23px 82px 50px;
  /* Paper belongs to the poster, not to the entire browser window. */
  background-color: #ffdab0;
  background-image: url('../img/fondo-main-v2.webp');
  background-position: center top;
  background-repeat: repeat-y;
  background-size: 100% auto;
}

.poster__frame {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  border: 72px solid transparent;
  border-image-source: url('../img/marco-cuerdas-v2.webp');
  border-image-slice: 135 102 137 102;
  border-image-width: 72px 70px 72px 70px;
  border-image-repeat: stretch;
}

.poster__content {
  position: relative;
  z-index: 2;
}

/* Breakpoint-specific picture sources must preserve the former image layout. */
picture.media-swap { display: contents; }

/* The logo sits below the top rope, in normal document flow. */
.masthead {
  position: relative;
  z-index: 5;
  text-align: center;
  margin-top: 27px;
  margin-bottom: 6px;
}

.logo-link {
  display: inline-block;
  line-height: 0;
  max-width: 100%;
}

.brand-logo {
  width: 260px;
  max-width: 66vw;
  display: block;
  filter: drop-shadow(0 1px 0 rgba(60, 32, 12, .06));
}

.hero {
  text-align: center;
}

.hero__headline {
  display: block;
  width: 98%;
  margin: 35px auto 3px;
}

.hero__art {
  display: block;
  width: 111%;
  max-width: none;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  margin: 0 auto;
}

.entry {
  text-align: center;
}

.entry__title img {
  display: block;
  width: 91%;
  margin: 14px auto 7px;
}

.ornament {
  display: block;
  width: 85%;
  margin: 14px auto 13px;
}

.entry__intro {
  max-width: 510px;
  margin: 0 auto 31px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  line-height: 1.55;
  font-weight: 500;
}

.fields-instruction {
  margin: 2px auto 14px;
  width: 96%;
  color: #9e0613;
  font: 900 13px/1.35 Arial, Helvetica, sans-serif;
  text-align: center;
  letter-spacing: .025em;
}

.fields-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 19px 24px;
  margin: 0 auto;
  width: 95%;
  text-align: left;
  align-items: start;
}

.phone-field-stack { min-width: 0; }

.field {
  position: relative;
  min-width: 0;
  border: 1.5px solid #95623f;
  border-radius: 8px;
  background: #fff0d7;
  box-shadow: 0 2px 8px rgba(84, 39, 17, .15);
  min-height: 82px;
  padding: 9px 11px 9px 43px;
}

.field label {
  display: block;
  font: 900 12px/1.25 Arial, Helvetica, sans-serif;
  color: #241612;
  white-space: nowrap;
}

.required { color: #b10919; }
.field__control { display: block; }

.field-icon {
  position: absolute;
  width: 25px;
  height: 25px;
  left: 11px;
  top: 31px;
  color: #2a211b;
}

/* Input is a real WHITE rectangle; not transparent parchment or pale autofill. */
.field input {
  display: block;
  appearance: none;
  background: #ffffff;
  border: 1.5px solid #c6a184;
  border-radius: 5px;
  outline: none;
  box-shadow: inset 0 1px 2px rgba(55, 27, 9, .1);
  width: 100%;
  height: 35px;
  min-height: 35px;
  padding: 0 9px;
  margin: 5px 0 0;
  color: #261b16;
  font: 600 13px/1.3 Arial, Helvetica, sans-serif;
}

.field input::placeholder {
  color: #75655a;
  opacity: 1;
  font-weight: 500;
}

.field input[type=date] {
  appearance: auto;
  color-scheme: light;
  color: #342921;
  font-size: 12px;
  min-width: 0;
}
.field input[type=date]:invalid { color: #786b60; }

/* Native browser autofill must keep the requested white textbox. */
.field input:-webkit-autofill,
.field input:-webkit-autofill:hover,
.field input:-webkit-autofill:focus {
  -webkit-box-shadow: inset 0 1px 2px rgba(55, 27, 9, .08), 0 0 0 1000px #ffffff inset;
  -webkit-text-fill-color: #261b16;
  caret-color: #261b16;
}

.field:focus-within {
  background: #fff0d7;
  border-color: var(--red);
  box-shadow: 0 0 0 2px rgba(175, 7, 21, .21), 0 3px 12px rgba(84, 39, 17, .14);
}
.field input:focus-visible {
  border-color: #af0715;
  box-shadow: 0 0 0 2px rgba(175,7,21,.18);
  outline: 0;
}
.field--invalid, .field--invalid:focus-within {
  border-color: #b60019;
  box-shadow: 0 0 0 2px rgba(182, 0, 25, .19);
}
.field--invalid input { border: 2px solid #b60019; }

/* Immediate, strongly visible duplicate feedback UNDER the phone textbox. */
.phone-inline-error {
  display: block;
  margin: 8px 0 0;
  padding: 10px 12px;
  background: #fff5ee;
  color: #b00019;
  border-left: 5px solid #b00019;
  border-radius: 5px;
  font: 900 13px/1.4 Arial, Helvetica, sans-serif;
  overflow-wrap: anywhere;
}

.ornament--form {
  width: 85%;
  margin: 17px auto 3px;
}

.upload-title {
  font-family: Impact, 'Arial Narrow', 'Liberation Sans Narrow', sans-serif;
  font-weight: 900;
  font-stretch: condensed;
  letter-spacing: .3px;
  font-size: 24px;
  margin: 0;
}

.upload-description {
  font-family: Arial, sans-serif;
  font-size: 13px;
  margin: 7px 0 18px;
}

.dropzone {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 7px;
  min-height: 133px;
  width: 92%;
  margin: 0 auto;
  padding: 17px 12px;
  border: 2px dashed rgba(166, 15, 25, .38);
  border-radius: 14px;
  background: rgba(255, 255, 255, .88);
  transition: border-color .15s ease, background .15s ease;
}

.dropzone:hover,
.dropzone.drag-active,
.dropzone:focus-visible {
  border-color: var(--red);
  background: rgba(255, 247, 229, .58);
}

.upload-symbol {
  color: #a80b16;
  flex-shrink: 0;
}

.dropzone-primary {
  font-size: 15px;
  font-weight: 800;
}

.dropzone-secondary {
  font-family: Arial, sans-serif;
  font-size: 11px;
  color: #55413a;
  line-height: 1.6;
}

.browse-link {
  color: #9c0813;
  text-decoration: underline;
  font-weight: 700;
}

.photo-preview {
  max-width: 190px;
  max-height: 165px;
  object-fit: contain;
  border-radius: 8px;
  margin: 0 auto;
}

.filename {
  max-width: 90%;
  overflow-wrap: anywhere;
  font: 12px Arial, sans-serif;
}

.remove-photo {
  padding: 5px 10px;
  margin: 7px auto 0;
  border: 0;
  background: none;
  color: var(--red);
  text-decoration: underline;
  cursor: pointer;
}

.error {
  color: #a90b0d;
  font: 700 12px Arial, sans-serif;
}

.social-title {
  font-family: Impact, 'Arial Narrow', sans-serif;
  font-size: 23px;
  font-weight: 900;
  letter-spacing: .3px;
  margin: 23px 0 19px;
}

.star {
  font-family: Georgia, serif;
  color: var(--red);
  font-size: 22px;
  vertical-align: middle;
  padding: 0 6px;
}

.social-links {
  width: 94%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
  margin: 0 auto;
}

.social-link {
  color: #1e1917;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 15px;
  min-width: 0;
  min-height: 61px;
  text-align: left;
  padding: 8px 13px;
  border: 1.5px solid rgba(144, 77, 39, .34);
  border-radius: 5px;
  background: rgba(255, 244, 220, .3);
  font-size: 16px;
  font-weight: 800;
  transition: background .15s, transform .15s;
}

.social-link:hover {
  background: #fff0d8b8;
  transform: translateY(-1px);
}

.social-icon {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  flex-shrink: 0;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  font-family: Arial, sans-serif;
  font-size: 33px;
  font-weight: 800;
}

.social-icon--facebook {
  background: #1b69c8;
  padding-top: 5px;
}

.social-icon--instagram {
  background: linear-gradient(40deg, #ffc339, #fd3b43 44%, #d8157e 75%, #7742c5);
}

.social-arrow {
  margin-left: auto;
  color: var(--red);
  font-size: 17px;
}

.consents {
  width: 94%;
  margin: 23px auto 14px;
  text-align: left;
  display: grid;
  gap: 12px;
}

.check {
  font: 12px/1.5 Arial, Helvetica, sans-serif;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: #765c4d;
  cursor: pointer;
}

.check input {
  width: 18px;
  height: 18px;
  min-width: 18px;
  accent-color: #a60816;
  margin: 0;
  cursor: pointer;
}

.submit-button {
  display: block;
  max-width: 375px;
  width: 67%;
  height: auto;
  padding: 0;
  margin: 17px auto 6px;
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: transform .16s ease, filter .16s ease;
}

.submit-button:hover {
  transform: translateY(-2px);
  filter: brightness(1.09);
}

.submit-button:active {
  transform: translateY(1px);
}

.submit-button:disabled {
  opacity: .6;
  cursor: wait;
}

.submit-button img {
  width: 100%;
  display: block;
}

.submit-status {
  padding: 12px 14px;
  margin: 12px auto;
  max-width: 95%;
  border: 1px solid #8c5a43;
  border-radius: 8px;
  background: #fff0d8;
  font: 700 12px/1.5 Arial, sans-serif;
}

.disclaimer {
  font: 10px/1.4 Arial, sans-serif;
  color: #8b5e45;
  margin: 10px 0 0;
}

/* Desktop and large monitors: narrow centered parchment + dark side panels. */
@media (min-width:701px) {
  .poster {
    width: 630px;
    max-width: 100%;
    padding: 17px 60px 38px;
    box-shadow: 0 0 23px rgba(0, 0, 0, .36);
  }

  .poster__frame {
    inset: 0 8px;
    border-width: 53px 51px;
    border-image-width: 53px 51px 53px 51px;
  }

  .masthead {
    margin-top: 12px;
    margin-bottom: 4px;
  }

  .brand-logo {
    width: 180px;
  }

  .hero__headline {
    width: 94%;
    margin-top: 20px;
    margin-bottom: 2px;
  }

  .hero__art {
    width: 107%;
  }

  .entry__title img {
    margin-top: 8px;
    margin-bottom: 5px;
  }

  .ornament {
    margin-top: 10px;
    margin-bottom: 10px;
  }

  .entry__intro {
    margin-bottom: 23px;
    font-size: 11px;
  }

  .fields-grid { gap: 17px 20px; }
  .fields-instruction { font-size: 12px; margin-bottom: 11px; }
  .field { min-height: 78px; padding: 8px 9px 8px 38px; }
  .field label { font-size: 11px; }
  .field-icon { width: 22px; height: 22px; top: 30px; left: 10px; }
  .field input { font-size: 12px; height: 33px; min-height: 33px; padding: 0 7px; }
  .field input[type=date] { font-size: 12px; }
  .phone-inline-error { font-size: 12px; }

  .ornament--form {
    margin-top: 12px;
    margin-bottom: 3px;
  }

  .upload-title {
    font-size: 21px;
  }

  .social-title {
    font-size: 21px;
  }
}

@media (max-width:700px) {
  /* A phone fills the viewport. Avoid downloading the invisible dark side texture. */
  body { background-image: none; background-attachment: scroll; }
  .poster {
    background-image: url('../img/mobile/fondo-main-900.webp');
    max-width: 100%;
    padding: 20px 47px 35px;
  }

  .poster__frame {
    border-width: 52px 43px;
    border-image-slice: 130 102 137 102;
    border-image-width: 54px 42px 54px 42px;
  }

  .masthead {
    margin-top: 24px;
  }

  .brand-logo {
    width: 225px;
  }

  .hero__headline {
    margin-top: 24px;
  }

  .hero__art {
    width: 115%;
  }

  .entry__title img {
    margin-top: 12px;
    width: 98%;
  }

  .ornament {
    width: 97%;
  }

  .entry__intro {
    font-size: 11px;
    margin-bottom: 23px;
  }

  .fields-grid {
    width: 100%;
    gap: 15px;
  }

  .field { padding-left: 38px; padding-right: 8px; }
  .field-icon { left: 9px; width: 23px; }
  .field label { font-size: 12px; }
  .field input { font-size: 13px; }

  .social-links {
    width: 100%;
    gap: 11px;
  }

  .social-link {
    gap: 8px;
    padding: 8px;
    font-size: 12px;
  }

  .social-icon {
    width: 37px;
    height: 37px;
    font-size: 28px;
  }

  .social-icon--instagram svg {
    width: 20px;
    height: 20px;
  }

  .consents {
    width: 100%;
  }
}

@media (max-width:490px) {
  /* Transparent rope edge optimized for ~390px phones; design stays unchanged. */
  .poster__frame {
    border-image-source: url('../img/mobile/marco-cuerdas-750.webp');
    border-image-slice: 95 74 100 74;
  }
  .poster {
    padding: 18px 30px 26px;
  }

  .poster__frame {
    border-width: 43px 27px;
    border-image-width: 43px 30px 43px 30px;
  }

  .masthead {
    margin-top: 23px;
    margin-bottom: 4px;
  }

  .brand-logo {
    width: 190px;
    max-width: 67vw;
  }

  .hero__headline {
    width: 108%;
    max-width: none;
    margin: 23px 0 4px;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
  }

  .hero__art {
    width: 118%;
  }

  .entry__title img {
    width: 113%;
    max-width: none;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    margin: 10px 0 4px;
  }

  .ornament {
    width: 109%;
    max-width: none;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 13px;
    margin-bottom: 13px;
  }

  .entry__intro {
    font-size: 11px;
    line-height: 1.5;
    margin: 0 auto 18px;
  }

  .fields-grid {
    grid-template-columns: 1fr;
    gap: 12px;
    width: 96%;
  }

  .fields-instruction { font-size: 12px; margin: 1px auto 12px; }
  .field { min-height: 91px; padding: 11px 13px 11px 50px; }
  .field-icon { left: 14px; width: 25px; height: 25px; top: 36px; }
  .field label { font-size: 14px; }
  .field input { font-size: 16px; height: 42px; min-height: 42px; padding: 0 11px; margin-top: 7px; }
  .field input[type=date] { font-size: 16px; }
  .phone-inline-error { font-size: 14px; line-height: 1.4; padding: 11px 12px; }

  .ornament--form {
    margin-top: 15px;
    margin-bottom: 5px;
  }

  .upload-title {
    font-size: 21px;
  }

  .upload-description {
    font-size: 12px;
    line-height: 1.4;
    margin: 7px 0 15px;
  }

  .dropzone {
    width: 100%;
    min-height: 152px;
  }

  .dropzone-primary {
    font-size: 14px;
  }

  .dropzone-secondary {
    font-size: 10px;
  }

  .social-title {
    font-size: 19px;
    margin: 20px 0 14px;
  }

  .star {
    font-size: 15px;
    padding: 0 2px;
  }

  .social-links {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .social-link {
    padding: 7px;
    gap: 7px;
    min-height: 52px;
    font-size: 12px;
  }

  .social-icon {
    width: 31px;
    height: 31px;
    font-size: 24px;
  }

  .social-icon--instagram svg {
    width: 18px;
    height: 18px;
  }

  .social-arrow {
    font-size: 11px;
  }

  .check {
    font-size: 11px;
    gap: 8px;
  }

  .submit-button {
    width: 92%;
  }

  .disclaimer {
    font-size: 9px;
  }
}

@media (max-width:360px) {
  .poster {
    padding-left: 26px;
    padding-right: 26px;
  }

  .poster__frame {
    border-image-width: 39px 25px 39px 25px;
  }

  .social-link {
    gap: 5px;
    font-size: 11px;
    padding: 6px;
  }

  .social-icon {
    width: 28px;
    height: 28px;
  }
}

@media (prefers-reduced-motion:reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition: none !important;
  }
}
/* Integration-only elements: do not alter the landing page's visual layout. */
.honeypot-field {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.turnstile-container:not([hidden]) {
  display: flex;
  justify-content: center;
  margin: 14px auto;
}
.submit-button:disabled {
  opacity: .65;
  cursor: wait;
}

/* =======================================================================
   CHARROS CONTEST RULES — CONSOLIDATED COMPONENT

   The two images contain the entire artwork, text, numbers and logos.
   Only the close button and submission controls are HTML overlays.
   Desktop and mobile share the same button structure. Coordinates refer
   to artwork-relative positions, so resizing cannot shift the X.
   ======================================================================= */

body.rules-modal-open {
  overflow: hidden;
}

.rules-dialog {
  display: none;
  width: min(1020px, 93vw, calc(90dvh * 1330 / 1182));
  max-width: none;
  max-height: 94dvh;
  margin: auto;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: #21120a;
  overflow: visible;
}
.rules-dialog[open] {
  display: block;
}
.rules-dialog::backdrop {
  background: rgba(7, 3, 3, .82);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

/* Width and height of the artboard always match the active poster. */
.rules-artboard {
  position: relative;
  width: 100%;
  aspect-ratio: 1330 / 1182;
  isolation: isolate;
  container-type: inline-size;
}
.rules-picture {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.rules-poster {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* The printed black circle on desktop is centered at x=95.75%, y=5.33%.
   Center the control on those image coordinates — never by right offset. */
.rules-close {
  position: absolute;
  z-index: 5;
  left: 95.75%;
  top: 5.33%;
  transform: translate(-50%, -50%);
  width: 5.0%;
  height: auto;
  aspect-ratio: 1;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #ee1942;
  cursor: pointer;
  transition: filter .18s ease, transform .18s ease;
}
.rules-close svg {
  display: block;
  width: 54%;
  height: 54%;
  fill: none;
  stroke: currentColor;
  stroke-width: 3.6;
  stroke-linecap: square;
  pointer-events: none;
}
.rules-close:hover {
  transform: translate(-50%, -50%) scale(1.08);
  filter: brightness(1.2);
}
.rules-close:active {
  transform: translate(-50%, -50%) scale(.98);
}
.rules-close:focus-visible,
.rules-continue:focus-visible,
.rules-cancel:focus-visible,
.rules-agreement:has(input:focus-visible) {
  outline: 3px solid #c20b19;
  outline-offset: 3px;
}
.rules-close:focus-visible {
  border-radius: 50%;
}

/* All three footer elements sit in the unprinted lower parchment area. */
.rules-footer {
  position: absolute;
  z-index: 4;
  left: 17%;
  top: 79.4%;
  width: 66%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: .7cqw;
}
.rules-agreement {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: .9cqw;
  padding: .25cqw .5cqw;
  margin: 0;
  max-width: 100%;
  border: 0;
  background: transparent;
  color: #251407;
  text-align: center;
  font: 700 1.85cqw/1.2 Georgia, 'Times New Roman', serif;
  cursor: pointer;
}
.rules-agreement input {
  flex: none;
  width: 2.15cqw;
  height: 2.15cqw;
  min-width: 17px;
  min-height: 17px;
  margin: 0;
  cursor: pointer;
  accent-color: #ab0610;
}
.rules-continue,
.rules-cancel {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.rules-continue {
  width: 58%;
  transition: transform .18s ease, filter .18s ease, opacity .18s ease;
}
.rules-continue img,
.rules-cancel img {
  display: block;
  width: 100%;
  height: auto;
}
.rules-continue:not(:disabled):hover {
  transform: translateY(-2px) scale(1.03);
  filter: drop-shadow(0 4px 5px rgba(60, 0, 0, .26));
}
.rules-continue:not(:disabled):active {
  transform: scale(.985);
}
.rules-continue:disabled {
  cursor: not-allowed;
  opacity: .59;
  filter: saturate(.55);
}
.rules-cancel {
  width: 30%;
  min-height: 20px;
  padding: .15cqw;
  transition: opacity .18s ease;
}
.rules-cancel:hover {
  opacity: .67;
}

/* MOBILE: the vertical poster includes all printed text and artwork.
   The mobile X is a real dark circle; desktop's circle is printed. */
@media (max-width: 949px) {
  .rules-dialog {
    width: min(470px, 97vw);
    max-height: 92dvh;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-color: #916239 #130a08;
    scrollbar-width: thin;
    background: #0a0604;
  }
  .rules-artboard {
    aspect-ratio: 719 / 2048;
  }
  .rules-close {
    left: 92.15%;
    top: 2.25%;
    width: 8.7%;
    min-width: 33px;
    min-height: 33px;
    border: 2px solid #cc9a5f;
    background: #21140f;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .3);
  }
  .rules-close svg {
    width: 55%;
    height: 55%;
  }
  .rules-footer {
    left: 11%;
    top: 85%;
    width: 78%;
    gap: .85cqw;
  }
  .rules-agreement {
    gap: 1.5cqw;
    padding: 1.5cqw 0;
    font-size: clamp(11px, 3.7cqw, 17px);
  }
  .rules-agreement input {
    width: clamp(17px, 5cqw, 22px);
    height: clamp(17px, 5cqw, 22px);
  }
  .rules-continue {
    width: 86%;
  }
  .rules-cancel {
    width: 63%;
    min-height: 42px;
    padding: 10px 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rules-dialog *,
  .rules-dialog *::before,
  .rules-dialog *::after {
    transition: none !important;
  }
}

/* No desktop/mobile CSS override patches. The image occupies the artwork aspect only. */
.rules-poster:not([src]) { visibility: hidden; }


/* One-entry policy note: subtle, legible, and part of regular document flow. */
.phone-entry-note {
  width: 93%;
  margin: 9px auto 0;
  font: 800 clamp(10px, 1.45vw, 12px)/1.45 Arial, Helvetica, sans-serif;
  color: #7d1a1b;
  letter-spacing: .03em;
  text-align: center;
}

/* Charros result posters: full original artwork with interactive transparent HTML areas.
   The artwork scales as one unit; click areas are artwork-relative percentages. */
.result-dialog {
  position: fixed;
  z-index: 2147483600;
  padding: 0;
  width: min(96vw, 950px);
  max-width: none;
  max-height: 96dvh;
  margin: auto;
  border: 0;
  background: transparent;
  color: #26120f;
  overflow-x: hidden;
  overflow-y: auto;
  box-shadow: none;
  text-align: center;
  overscroll-behavior: contain;
}
.result-dialog:focus { outline: none; }
.result-dialog::backdrop {
  background: rgba(8, 4, 3, .86);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.result-dialog:has(.result-artboard:not([hidden])) {
  width: min(97vw, 1080px, 114dvh);
  overflow: visible;
}
.result-artboard {
  width: 100%;
  aspect-ratio: 1374 / 1145;
  position: relative;
  isolation: isolate;
  container-type: inline-size;
}
/* Result artwork and controls scale together on desktop and mobile. The
   X and button remain separate from the poster artwork, never flattened. */
.result-art-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}
.result-art-control {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: filter .15s ease;
}
/* Center of the preprinted upper-right circle: x 94.45%, y 6.95%. The
   hit area stays >=44px, but the visible cross scales with the poster. */
.result-art-control--close {
  left: 94.45%;
  top: 6.95%;
  transform: translate(-50%, -50%);
  width: 6.4%;
  min-width: 44px;
  min-height: 44px;
  aspect-ratio: 1;
  border-radius: 50%;
}
.result-close-cross {
  position: relative;
  display: block;
  width: clamp(20px, 4.15cqw, 45px);
  height: clamp(20px, 4.15cqw, 45px);
}
.result-close-cross::before,
.result-close-cross::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 86%;
  height: 17%;
  border-radius: 3px;
  background: #f20f45;
  box-shadow: 0 1px 0 #6d061c;
}
.result-close-cross::before { transform: translate(-50%, -50%) rotate(45deg); }
.result-close-cross::after { transform: translate(-50%, -50%) rotate(-45deg); }

/* The click target IS the vintage button image (instead of an invisible region
   over a button baked into the poster). Position is relative to poster art. */
.result-art-control--action {
  left: 50%;
  top: 82.2%;
  transform: translate(-50%, -50%);
  width: 46.2%;
  min-height: 44px;
  border-radius: 12px;
}
.result-dialog[data-result="success"] .result-art-control--action { top: 83.6%; }
.result-art-button-image {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.result-art-control:hover { filter: brightness(1.11); }
.result-art-control:active { filter: brightness(.88); }
.result-art-control:focus-visible {
  outline: 3px solid #fff6d5;
  outline-offset: 2px;
  box-shadow: 0 0 0 6px #a80618;
}
@media (max-width: 600px) {
  .result-dialog:has(.result-artboard:not([hidden])) { width: min(97vw, 560px); }
  .result-art-control--action { width: 56%; min-height: 44px; }
  .result-art-control--close { min-width: 44px; min-height: 44px; }
}
/* Real server errors not represented by an image must still match Charros. */
.result-card {
  width: 100%;
  min-height: min(64dvh, 530px);
  padding: clamp(28px, 4.5vw, 46px) clamp(17px, 5vw, 52px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 9px solid #17100f;
  outline: 3px solid #ad7542;
  outline-offset: -14px;
  border-radius: 18px;
  background: #ffddb1 url('../img/fondo-main-v2.webp') center top / cover;
  box-shadow: inset 0 0 0 3px #d4a76a, 0 20px 50px rgba(0,0,0,.6);
}
.result-card__logo { display:block; width: min(230px, 60%); height: auto; margin: 0 auto 12px; }
.result-card__eyebrow {
  color: #7a2415;
  font: 900 clamp(13px, 2vw, 17px)/1.3 Georgia, 'Times New Roman', serif;
  letter-spacing: .04em;
  margin: 7px auto 14px;
}
.result-card__title {
  max-width: 750px;
  margin: 6px auto 20px;
  padding: 13px 25px;
  border: 4px double #ffddb1;
  outline: 3px solid #83110e;
  border-radius: 18px;
  background: #ac0710;
  color: #fff1d0;
  font: 900 clamp(29px, 5vw, 52px)/1.05 Georgia, 'Times New Roman', serif;
  text-wrap: balance;
}
.result-card__message {
  max-width: 680px;
  color: #25140e;
  font: 700 clamp(18px, 2.8vw, 24px)/1.45 Georgia, 'Times New Roman', serif;
  margin: 10px auto 25px;
  overflow-wrap: anywhere;
}
.result-card__button {
  width: fit-content;
  max-width: 96%;
  min-height: 55px;
  padding: 12px 30px;
  border: 4px double #ffdda9;
  outline: 3px solid #240c08;
  border-radius: 15px;
  background: #ad0310;
  color: #fff6e1;
  font: 900 clamp(17px, 2.5vw, 23px)/1.2 Georgia, 'Times New Roman', serif;
  cursor: pointer;
}
.result-card__button:hover { background: #d00816; }
.result-card__button:focus-visible { outline: 4px solid #b00413; outline-offset: 6px; }
@media (max-width: 490px) {
  .result-dialog { width: calc(100vw - 14px); }
  .result-card { min-height: 410px; padding: 28px 14px; border-width: 6px; }
  .result-card__title { font-size: clamp(28px, 7vw, 36px); padding: 12px 10px; }
  .result-card__message { font-size: 17px; }
  .phone-entry-note { width: 95%; font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .result-art-control { transition: none; }
}

/* Photo upload processing state. */
.dropzone.is-processing { border-color: #ae281d; background: rgba(255,255,255,.94); }
.dropzone.is-processing .upload-symbol { animation: charros-photo-pulse .9s ease-in-out infinite alternate; }
.photo-progress { display: block; font: 700 12px/1.5 Arial, sans-serif; color: #693820; text-align: center; }
.photo-progress[hidden] { display: none; }
@keyframes charros-photo-pulse { from { opacity: .4; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .dropzone.is-processing .upload-symbol { animation: none; } }

/* Final database error poster: supplied 1374 x 1145 image and genuine
   transparent button. The close X and action scale with the artboard, so both
   remain aligned on mobile/desktop. This layout is independent of Baserow. */
.result-dialog[data-result="notConfigured"] .result-artboard {
  aspect-ratio: 1374 / 1145;
}
/* The center of the black ring in THIS final image is x=1304/1374,
   y=72/1145. The existing duplicate/success posters use other coordinates. */
.result-dialog[data-result="notConfigured"] .result-art-control--close {
  left: 94.91%;
  top: 6.29%;
  width: 5.3%;
}
/* Under the horizontal divider, above the bottom desert decorations. */
.result-dialog[data-result="notConfigured"] .result-art-control--action {
  left: 50%;
  top: 79.9%;
  width: 44%;
}
@media (max-width: 600px) {
  .result-dialog:has(.result-artboard:not([hidden])) {
    width: min(97vw, 560px, 114dvh);
  }
  .result-dialog[data-result="notConfigured"] .result-art-control--action {
    width: 49%;
  }
}

/* Result modal v4 - poster and fallback must never appear simultaneously. */
#result-artboard[hidden], #result-fallback[hidden] { display: none !important; }
.result-dialog[data-result="duplicate"] #result-fallback,
.result-dialog[data-result="success"] #result-fallback,
.result-dialog[data-result="notConfigured"] #result-fallback { display: none !important; }