@font-face {
  font-family: 'Asikue';
  src: url('vendor/fonts/asikue/AsikueTrial-Regular.otf') format('opentype');
  font-weight: 400;
}
@font-face {
  font-family: 'Asikue';
  src: url('vendor/fonts/asikue/AsikueTrial-Medium.otf') format('opentype');
  font-weight: 500;
}
@font-face {
  font-family: 'Asikue';
  src: url('vendor/fonts/asikue/AsikueTrial-SemiBold.otf') format('opentype');
  font-weight: 600;
}
@font-face {
  font-family: 'Asikue';
  src: url('vendor/fonts/asikue/AsikueTrial-Bold.otf') format('opentype');
  font-weight: 700;
}
@font-face {
  font-family: 'Asikue';
  src: url('vendor/fonts/asikue/AsikueTrial-ExtraBold.otf') format('opentype');
  font-weight: 800;
}
@font-face {
  font-family: 'Nunito';
  src: url('vendor/fonts/nunito/Nunito-Regular.ttf') format('truetype');
  font-weight: 400;
}
@font-face {
  font-family: 'Nunito';
  src: url('vendor/fonts/nunito/Nunito-Medium.ttf') format('truetype');
  font-weight: 500;
}
@font-face {
  font-family: 'Nunito';
  src: url('vendor/fonts/nunito/Nunito-SemiBold.ttf') format('truetype');
  font-weight: 600;
}
@font-face {
  font-family: 'Nunito';
  src: url('vendor/fonts/nunito/Nunito-Bold.ttf') format('truetype');
  font-weight: 700;
}

:root {
  --naranja: #e8672e;
  --amarillo: #f3ca40;
  --terracota: #c64c36;
  --crema: #fdf3ea;
  --negro: #000000;
  --radio-pildora: 9999px;
  --radio-tarjeta: 18px;
  --radio-panel: 32px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Nunito', system-ui, sans-serif;
  background: var(--naranja);
  color: var(--negro);
}

.titulo {
  font-family: 'Asikue', 'Nunito', sans-serif;
  font-weight: 800;
}

/* ===== Nav ===== */
.nav-wrap {
  position: sticky;
  top: 1rem;
  z-index: 50;
  max-width: 48rem;
  margin: 0 auto;
  padding: 0 1rem;
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  border-radius: var(--radio-pildora);
  padding: 0.75rem 1.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.nav .logo-mark img {
  height: 28px;
  width: auto;
  display: block;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.icon-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  width: 32px;
  border-radius: 50%;
  background: var(--naranja);
  color: #fff;
  transition: filter 0.15s ease;
}
.icon-circle:hover {
  filter: brightness(0.95);
}
.icon-circle svg {
  width: 15px;
  height: 15px;
}

.btn-ordenar {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: var(--radio-pildora);
  background: var(--negro);
  color: #fff;
  font-weight: 600;
  font-size: 0.875rem;
  padding: 0.5rem 1.25rem;
  text-decoration: none;
}
.btn-ordenar:hover {
  background: #1a1a1a;
}
.btn-ordenar svg {
  width: 16px;
  height: 16px;
}

/* ===== Hero ===== */
.hero {
  text-align: center;
  padding: 5rem 1.5rem 2.5rem;
}
.hero h1 {
  color: #fff;
  font-size: 2.5rem;
  line-height: 0.95;
  letter-spacing: -0.02em;
}
.hero p {
  margin-top: 0.75rem;
  color: #fff;
  font-size: 1.125rem;
  font-weight: 500;
  max-width: 32rem;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 768px) {
  .hero h1 {
    font-size: 3.75rem;
  }
}

/* ===== Formulario ===== */
.form-section {
  padding: 0 1.5rem 4rem;
  text-align: center;
}
.form-card {
  max-width: 36rem;
  margin: 0 auto;
  background: #fff;
  border-radius: 2rem;
  padding: 2rem;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
}
.form-card h2 {
  font-size: 1.5rem;
}
@media (min-width: 768px) {
  .form-card h2 {
    font-size: 2.25rem;
  }
}
.form-card .subtitulo {
  margin-top: 0.75rem;
  font-size: 0.875rem;
  color: rgba(0, 0, 0, 0.6);
}

.barra-progreso-wrap {
  margin-top: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.barra-progreso-track {
  flex: 1;
  height: 0.75rem;
  border-radius: var(--radio-pildora);
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  overflow: hidden;
}
.barra-progreso-fill {
  height: 100%;
  background: var(--naranja);
  width: 0%;
  transition: width 0.3s ease;
}
.barra-progreso-pct {
  font-size: 0.875rem;
  font-weight: 700;
  width: 3rem;
  text-align: right;
}

.registro-form {
  margin-top: 2rem;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 768px) {
  .form-row.dos-columnas {
    grid-template-columns: 1fr 1fr;
  }
}

.campo label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.campo input,
.campo select,
.campo textarea {
  width: 100%;
  border-radius: var(--radio-tarjeta);
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: #fff;
  color: var(--negro);
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  font-family: inherit;
}
.campo input::placeholder,
.campo textarea::placeholder {
  color: rgba(0, 0, 0, 0.3);
}
.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  outline: none;
  border-color: var(--naranja);
}

.campo .error-msg {
  display: none;
  color: #c62828;
  font-size: 0.75rem;
  margin-top: 0.25rem;
}
.campo .error-msg.show {
  display: block;
}
.campo input.campo-invalido,
.campo select.campo-invalido {
  border-color: #c62828;
}

.gusto-hint {
  font-size: 0.75rem;
  color: rgba(0, 0, 0, 0.4);
  margin-bottom: 0.5rem;
}
.gusto-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}
.gusto-opcion {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 14px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  cursor: pointer;
}
.gusto-opcion.activo {
  border-color: var(--naranja);
  background: rgba(232, 103, 46, 0.05);
}
.gusto-opcion input[type='checkbox'] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  margin: 0;
  padding: 0;
  border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, 0.2);
  background: #fff;
}
.gusto-opcion input[type='checkbox']:checked {
  background: var(--naranja);
  border-color: var(--naranja);
}

.honeypot-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.btn-registrar {
  width: 100%;
  border: none;
  border-radius: var(--radio-pildora);
  background: var(--negro);
  color: #fff;
  font-weight: 700;
  font-size: 0.875rem;
  padding: 0.85rem;
  cursor: pointer;
  transition: background 0.15s ease;
}
.btn-registrar:hover {
  background: var(--naranja);
}
.btn-registrar:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.mensaje-error-form {
  border-radius: 10px;
  background: #fdecea;
  border: 1px solid #f5c6c2;
  color: #c62828;
  font-size: 0.875rem;
  padding: 0.6rem 0.9rem;
}

.mensaje-exito {
  margin-top: 2.5rem;
  text-align: center;
}
.mensaje-exito h3 {
  font-size: 1.5rem;
}
.mensaje-exito p {
  margin-top: 0.75rem;
  color: rgba(0, 0, 0, 0.7);
}

.popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  z-index: 100;
}
.popup-card {
  background: #fff;
  border-radius: var(--radio-tarjeta);
  padding: 2rem;
  max-width: 24rem;
  width: 100%;
  text-align: center;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}
.popup-card h3 {
  font-size: 1.5rem;
  color: var(--naranja);
}
.popup-card p {
  margin-top: 0.75rem;
  color: rgba(0, 0, 0, 0.7);
}
.popup-card .btn-registrar {
  margin-top: 1.5rem;
}

/* ===== Tobo de pollo ===== */
.tobo-wrap {
  display: flex;
  justify-content: center;
  padding: 0 1.5rem;
}
.tobo-wrap img {
  width: 340px;
  max-width: 90vw;
  height: auto;
  margin-bottom: -2rem;
  position: relative;
  z-index: 10;
}
@media (min-width: 768px) {
  .tobo-wrap img {
    width: 480px;
    margin-bottom: -8rem;
  }
}

/* ===== Info block ===== */
.info-section {
  background: var(--amarillo);
  border-radius: 12% 12% 0 0;
  padding: 15% 1.5rem 6rem;
  text-align: center;
}
.info-section h2 {
  color: var(--terracota);
  font-size: 1.875rem;
  max-width: 40rem;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .info-section h2 {
    font-size: 3rem;
  }
}

.info-grid {
  margin-top: 4rem;
  max-width: 72rem;
  margin-left: auto;
  margin-right: auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  text-align: center;
}
@media (min-width: 768px) {
  .info-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.info-card {
  background: #fff;
  border-radius: 24px;
  padding: 2rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  text-decoration: none;
  color: inherit;
  display: block;
}
.info-card h3 {
  color: var(--naranja);
  font-size: 1.5rem;
}
.info-card p {
  margin-top: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.copyright {
  margin-top: 4rem;
  font-size: 0.875rem;
  text-align: center;
}
.copyright a {
  color: inherit;
  text-decoration: underline;
}