:root {
  color-scheme: light;
  /* Misma paleta de marca que el resto del sitio (ver formulario/styles.css). */
  --color-cream: #E8DFD1;
  --color-card: #F6EEDD;
  --color-ink: #17140F;
  --color-olive: #53624E;
  --color-gold: #B9862F;
  --color-shadow: rgba(23, 20, 15, 0.14);
  --color-line: rgba(23, 20, 15, 0.12);
  --color-ink-muted: #5B564C;
  --color-gold-text: #7A5720;
  --font-family: "Inter", sans-serif;
  /* Misma fuente en todo el sitio -- ver bienvenida/styles.css. */
  --font-display: "Emblema Headline 1 Basic", "Fraunces", "Inter", sans-serif;
}

@font-face {
  font-family: "Emblema Headline 1 Basic";
  src: url("assets/Emblema-Headline1-Basic.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--color-cream);
  color: var(--color-ink);
  font-family: var(--font-family);
}

/* Enlace fijo para volver al landing -- ver mismo comentario en
   talento/styles.css. */
.volver-link {
  position: fixed;
  top: 18px;
  left: 20px;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  background: rgba(23, 20, 15, 0.55);
  color: #fff;
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  backdrop-filter: blur(2px);
}

.volver-link:hover,
.volver-link:focus-visible {
  background: rgba(23, 20, 15, 0.75);
}

.volver-link.is-on-light {
  background: var(--color-card);
  border-color: var(--color-gold);
  color: var(--color-ink);
  box-shadow: 0 4px 14px var(--color-shadow);
}

.volver-link.is-on-light:hover,
.volver-link.is-on-light:focus-visible {
  background: #fff;
}

.volver-link-icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.lang-toggle {
  position: fixed;
  top: 18px;
  right: 20px;
  z-index: 10;
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  border-radius: 999px;
  background: rgba(23, 20, 15, 0.35);
  backdrop-filter: blur(2px);
  transition: background-color 200ms ease, border-color 200ms ease;
}

.lang-toggle.is-on-light {
  border-color: var(--color-gold);
  background: var(--color-card);
  box-shadow: 0 4px 14px var(--color-shadow);
}

.lang-toggle.is-on-light .lang-toggle-btn {
  color: var(--color-ink-muted);
}

.lang-toggle.is-on-light .lang-toggle-btn:hover {
  color: var(--color-ink);
}

.lang-toggle.is-on-light .lang-toggle-btn.is-active {
  background: var(--color-gold);
  color: var(--color-ink);
}

.lang-toggle-btn {
  padding: 7px 14px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: rgba(255, 255, 255, 0.75);
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: color 160ms ease, background-color 160ms ease;
}

.lang-toggle-btn:hover {
  color: #fff;
}

.lang-toggle-btn.is-active {
  background: rgba(255, 255, 255, 0.92);
  color: var(--color-gold-text);
}

/* Hero con foto propia de la página (ver assets/hero-barra.jpg). Más alto
   que el default (menos recorte de "cover") y "center 46%" para que se
   vean las estanterías con botellas, sin las linternas de arriba ni los
   taburetes de abajo. */
.pv-hero {
  text-align: center;
  padding: 96px 20px 116px;
  background:
    linear-gradient(180deg, rgba(23, 20, 15, 0.55) 0%, rgba(23, 20, 15, 0.72) 100%),
    var(--hero-image, none) center 46% / cover no-repeat;
  color: #fff;
}

/* Wordmark en texto real (--font-display, misma solución que el resto del
   sitio) en vez de la imagen vieja del logo (lavictoria.png). */
.pv-logo {
  display: block;
  margin: 0 auto 20px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.3rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.65);
}

.pv-eyebrow {
  display: inline-block;
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
}

.pv-hero h1 {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.pv-lede {
  margin: 0 auto;
  max-width: 48ch;
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
}

/* El hero (dentro de .pv-page) necesita ir de punta a punta -- el ancho
   máximo vive solo en .pv-body, no acá, o la foto queda encajonada. */

.pv-body {
  max-width: 680px;
  margin: 0 auto;
  padding: 56px 20px calc(56px + env(safe-area-inset-bottom, 0px));
}

/* Título arriba de las tarjetas: son la única forma de elegir categoría (ya
   no hay <select> de respaldo), así que tiene que quedar claro que hay que
   elegir una. */
.pv-categorias-label {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(23, 20, 15, 0.75);
}

/* Categorías: tarjetas con ícono, mismo patrón que talento/ y artistas/. */
.pv-categorias {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-bottom: 20px;
}

/* Confirmación de qué se eligió -- ahora junto a la etiqueta, antes de las
   tarjetas (no colgando debajo de ellas), y como una línea chica en vez de
   una píldora grande -- es solo una confirmación, no necesita tanto peso. */
.pv-categoria-elegida {
  margin: 0 0 14px;
  font-size: 0.85rem;
  color: var(--color-gold-text);
}

.pv-categoria-elegida strong {
  font-weight: 700;
}

/* position: relative para el indicador tipo radio-button de ::after --
   sin él las tarjetas se veían como simples fichas informativas, no
   quedaba claro que había que tocar una para elegir la categoría. */
.pv-categoria {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 20px 44px 20px 18px;
  border: 1px solid var(--color-line);
  border-top: 3px solid var(--color-gold);
  border-radius: 14px;
  background: var(--color-card);
  box-shadow: 0 8px 20px var(--color-shadow);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 150ms ease, box-shadow 150ms ease;
}

/* Círculo vacío = sin elegir, punto relleno = elegido -- mismo lenguaje
   visual que un radio button nativo. */
.pv-categoria::after {
  content: "";
  position: absolute;
  top: 18px;
  right: 18px;
  width: 18px;
  height: 18px;
  border: 2px solid var(--color-gold);
  border-radius: 50%;
  opacity: 0.5;
  transition: opacity 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
}

.pv-categoria.is-selected::after {
  opacity: 1;
  background: var(--color-gold);
  box-shadow: inset 0 0 0 3px #fff;
}

.pv-categoria:hover,
.pv-categoria:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 12px 26px var(--color-shadow);
}

.pv-categoria.is-selected {
  background: #fff;
  box-shadow: 0 12px 26px var(--color-shadow);
}

.pv-categoria.is-selected .pv-categoria-name {
  color: var(--color-gold);
}

.pv-categoria-icon {
  width: 26px;
  height: 26px;
  margin-bottom: 2px;
  color: var(--color-gold);
}

.pv-categoria-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

.pv-categoria-desc {
  font-size: 0.85rem;
  line-height: 1.4;
  color: rgba(23, 20, 15, 0.6);
}

.pv-form-section h2 {
  margin: 0 0 24px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

.pv-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.pv-full {
  grid-column: 1 / -1;
}

.pv-form label {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
}

.pv-form input,
.pv-form select,
.pv-form textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--color-line);
  border-radius: 10px;
  background: #fff;
  font-family: inherit;
  font-size: 16px;
  color: var(--color-ink);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.pv-form select {
  appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 8l5 5 5-5' stroke='%23B9862F' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 12px;
  cursor: pointer;
}

.pv-form input:focus,
.pv-form select:focus,
.pv-form textarea:focus {
  outline: none;
  border-color: var(--color-gold);
  box-shadow: 0 0 0 3px rgba(185, 134, 47, 0.16);
}

.pv-hint {
  grid-column: 1 / -1;
  margin: 8px 0 0;
  font-size: 0.78rem;
  color: var(--color-ink-muted);
}

.pv-hint-error {
  color: var(--color-gold-text);
  font-weight: 600;
}

.select-input-group {
  display: flex;
  gap: 8px;
}

.select-input-group select {
  flex: 0 0 auto;
  width: auto;
  max-width: 58%;
  text-overflow: ellipsis;
}

.select-input-group input {
  flex: 1;
  min-width: 0;
}

/* Teléfono con prefijo de país (librería intl-tel-input, ver index.html). */
.pv-form .iti {
  display: block;
  width: 100%;
}

.pv-form .iti__tel-input {
  border-radius: 10px;
}

.pv-form textarea {
  resize: vertical;
  min-height: 70px;
}

.pv-consent {
  margin-top: 4px;
}

.pv-checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

/* Checkbox propio en vez del nativo del navegador (un cuadrado blanco
   "flotando" que no tenía nada que ver con la marca). Tick como imagen SVG
   de fondo (mismo patrón que .th-checkbox/.td-checkbox en dashboard.css)
   en vez de un ::after rotado -- un <input> es un elemento reemplazado y
   los navegadores no combinan bien flexbox + contenido generado ahí
   adentro, lo que dejaba el tick cortado/mal centrado.
   background-position:center sí es consistente. */
.pv-checkbox input {
  appearance: none;
  -webkit-appearance: none;
  /* Ver mismo comentario en talento/styles.css: sin esto, el modo oscuro
     forzado de algunos navegadores reemplaza el checkbox dibujado a mano
     por el control nativo del sistema, descuadrado respecto al texto. */
  forced-color-adjust: none;
  margin: 0;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border: 2px solid var(--color-gold);
  border-radius: 5px;
  background-color: #fff;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
  transition: background-color 120ms ease;
}

.pv-checkbox input:checked {
  background-color: var(--color-gold);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='4 12.5 9.5 18 20 5'/></svg>");
  background-size: 12px 12px;
}

.pv-checkbox input:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
}

.pv-checkbox span {
  font-size: 0.85rem;
  line-height: 1.5;
  color: rgba(23, 20, 15, 0.75);
}

.pv-checkbox a {
  color: var(--color-olive);
}

.pv-submit {
  grid-column: 1 / -1;
  justify-self: start;
  margin-top: 8px;
  padding: 13px 26px;
  border: none;
  border-radius: 999px;
  background: var(--color-gold);
  color: #fff;
  font-family: inherit;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: opacity 150ms ease;
}

.pv-submit:hover {
  opacity: 0.88;
}

.pv-submit:active {
  opacity: 0.75;
}

.pv-nota {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 0.78rem;
  color: var(--color-ink-muted);
}

.pv-mensaje {
  grid-column: 1 / -1;
  /* Ver mismo comentario en talento/styles.css: sin esto, el modo oscuro
     forzado de algunos navegadores deja el texto invisible aunque el
     ícono (::before) se vea normal. */
  forced-color-adjust: none;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 14px 18px;
  border-radius: 10px;
  border: 1.5px solid rgba(83, 98, 78, 0.35);
  background: rgba(83, 98, 78, 0.12);
  color: #2F5B41;
  font-size: 0.95rem;
  font-weight: 600;
  animation: pv-mensaje-fade-in 0.25s ease;
}

.pv-mensaje[hidden] {
  display: none;
}

.pv-mensaje::before {
  content: "\2713";
  flex-shrink: 0;
  font-weight: 700;
}

.pv-mensaje.is-error::before {
  content: "\26A0";
}

@keyframes pv-mensaje-fade-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.pv-mensaje.is-error {
  border-color: rgba(185, 134, 47, 0.45);
  background: rgba(185, 134, 47, 0.15);
  color: var(--color-gold-text);
}

.pv-footer {
  padding: 40px 20px calc(40px + env(safe-area-inset-bottom, 0px));
  text-align: center;
  font-size: 0.8rem;
  color: var(--color-ink-muted);
}

.pv-footer a {
  color: inherit;
}

@media (max-width: 360px) {
  .volver-link {
    padding: 10px;
  }

  .volver-link span {
    display: none;
  }
}

@media (max-width: 520px) {
  .pv-form {
    grid-template-columns: 1fr;
  }

  .pv-categorias {
    grid-template-columns: 1fr;
  }

  .select-input-group {
    flex-direction: column;
  }

  .select-input-group select {
    max-width: 100%;
  }
}

/* Oculto para personas, visible en el HTML/DOM -- ver comentario gemelo en
   talento/styles.css .tl-hp. */
.pv-hp {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  left: -9999px;
}