/* ======================================
   CONTACTO · ONLINE NAVARRA
====================================== */

.contacto-page { width: 100%; background: #fff; }

/* HERO */
.contacto-hero .comp-hero__fondo {
   background: linear-gradient(115deg, #260018 0%, #720052 45%, #c00087 100%);
}

.contacto-hero .comp-hero__inner {
   grid-template-columns: minmax(0, 1.15fr) minmax(330px, .85fr);
   gap: 60px;
}

.contacto-hero .comp-hero__texto {
   width: auto;
   max-width: 720px;
   padding-left: clamp(45px, 5.5vw, 85px);
   transform: translateY(-30px);
}
.contacto-hero .comp-eyebrow,
.contacto-hero .comp-hero__texto > p:not(.comp-eyebrow) { color: #fff; }

.contacto-hero h1 {
   max-width: 720px;
   margin: 0 0 24px;
   color: #fff;
   font-size: clamp(3.1rem, 4.5vw, 4.5rem);
   line-height: 1;
   font-weight: 800;
   letter-spacing: -2.2px;
}

.contacto-hero h1 > span {
   display: block;
   background: linear-gradient(90deg, #fff 0%, #ff9bdc 45%, #ffd400 100%);
   -webkit-background-clip: text;
   background-clip: text;
   -webkit-text-fill-color: transparent;
   color: transparent;
}

.contacto-hero .comp-hero__texto > p:last-child {
   max-width: 610px;
   margin: 0;
   font-size: 1.04rem;
   line-height: 1.65;
   color: rgba(255,255,255,.92);
}

.contacto-hero .punto-bote {
   display: inline-block;
   width: 13px;
   height: 13px;
   margin-left: 8px;
   border-radius: 50%;
   background: #ffd400;
   -webkit-text-fill-color: #ffd400;
   vertical-align: baseline;
   animation: contacto-punto-bote 1.8s ease-in-out infinite;
}

@keyframes contacto-punto-bote {
   0%, 100% { transform: translateY(0); }
   45% { transform: translateY(-10px); }
   65% { transform: translateY(0); }
   78% { transform: translateY(-4px); }
}

.contacto-hero__imagen {
   position: relative;
   z-index: 3;
   display: flex;
   align-items: flex-end;
   justify-content: center;
   align-self: stretch;
   overflow: visible;
}

.contacto-hero__imagen img {
   display: block;
   width: min(480px, 94%);
   height: auto;
   margin-bottom: -45px;
}

/* CONTACTO */
.contacto-bloque { padding: 105px 0 115px; }

.contacto-layout {
   display: grid;
   grid-template-columns: minmax(280px, .72fr) minmax(0, 1.28fr);
   gap: clamp(65px, 8vw, 120px);
   align-items: start;
}

.contacto-info {
   position: sticky;
   top: 110px;
   text-align: left;
}

.contacto-info .comp-kicker {
   margin: 0 0 14px;
   color: #c00087;
}

.contacto-info h2 {
   max-width: 480px;
   margin: 0 0 22px;
   color: #29274c;
   font-size: clamp(2.5rem, 4vw, 3.35rem);
   line-height: 1.06;
   font-weight: 800;
   letter-spacing: -1px;
}

.contacto-info h2 .grad {
   background: linear-gradient(90deg, #c00087 0%, #6b0f94 100%);
   -webkit-background-clip: text;
   background-clip: text;
   -webkit-text-fill-color: transparent;
   color: transparent;
}

.contacto-info__intro {
   max-width: 440px;
   margin: 0 0 44px;
   color: #666174;
   font-size: 17px;
   line-height: 1.7;
}

.contacto-datos {
   border-top: 1px solid #e2dee5;
}

.contacto-dato {
   padding: 25px 0;
   border-bottom: 1px solid #e2dee5;
}

.contacto-dato__label {
   display: block;
   margin-bottom: 8px;
   color: #c00087;
   font-size: 12px;
   line-height: 1;
   font-weight: 800;
   letter-spacing: .1em;
}

.contacto-dato a {
   display: inline-block;
   margin-bottom: 5px;
   color: #29274c;
   font-size: 1.22rem;
   line-height: 1.3;
   font-weight: 750;
   text-decoration: none;
}

.contacto-dato a:hover { color: #c00087; }
.contacto-dato p { margin: 0; color: #777381; font-size: 14px; line-height: 1.5; }

/* FORMULARIO */
.contacto-form-wrap {
   min-width: 0;
   padding: 42px 46px;
   background: #f8f6fa;
   border-radius: 24px;
   text-align: left;
}

.contacto-form {
   width: 100%;
   margin: 0;
   text-align: left;
}

.contacto-form__cabecera {
   margin-bottom: 30px;
}

.contacto-form__cabecera h2 {
   margin: 0 0 6px;
   color: #29274c;
   font-size: 2.15rem;
   line-height: 1.1;
   font-weight: 800;
}

.contacto-form__cabecera p {
   margin: 0;
   color: #777381;
   font-size: 14px;
}

.contacto-form__grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 20px 24px;
}

.contacto-field {
   display: flex;
   flex-direction: column;
   min-width: 0;
}

.contacto-field--full {
   grid-column: 1 / -1;
}

.contacto-field label {
   margin: 0 0 7px;
   color: #383657;
   font-size: 13px;
   font-weight: 700;
   text-align: left;
}

.contacto-field label span {
   color: #c00087;
}

.contacto-field input,
.contacto-field textarea {
   box-sizing: border-box;
   width: 100%;
   margin: 0;
   padding: 13px 14px;
   border: 1px solid #d7d2dc;
   border-radius: 8px;
   background: #fff;
   color: #383657;
   font: 400 14px "Manrope", sans-serif;
}

.contacto-field input {
   height: 48px;
}

.contacto-field textarea {
   min-height: 150px;
   resize: vertical;
}

.contacto-field input:focus,
.contacto-field textarea:focus {
   outline: none;
   border-color: #c00087;
   box-shadow: 0 0 0 3px rgba(192,0,135,.07);
}

.contacto-field input::placeholder {
   color: #aaa5ae;
   font-size: 13px;
}

/* LEGAL */
.contacto-legal {
   margin-top: 22px;
   padding: 16px 0 0;
   border: 0;
   border-top: 1px solid #ddd8e0;
   background: transparent;
   color: #777381;
   font-size: 11px;
   line-height: 1.55;
}

.contacto-legal__titulo {
   margin: 0 0 5px !important;
   color: #383657 !important;
   font-size: 11px;
   font-weight: 700;
}

.contacto-legal p {
   margin: 0 0 4px;
   color: inherit;
}

.contacto-legal a {
   color: #383657;
   font-weight: 700;
   text-decoration: underline;
}

.contacto-check {
   display: flex !important;
   align-items: center;
   gap: 9px;
   width: 100% !important;
   margin: 16px 0 0 !important;
   color: #666270 !important;
   font-size: 12px !important;
   line-height: 1.4 !important;
}

.contacto-check input[type="checkbox"] {
   flex: 0 0 16px;
   width: 16px !important;
   height: 16px;
   margin: 0 !important;
   padding: 0 !important;
   accent-color: #c00087;
}

.contacto-check a {
   color: #383657 !important;
   font-weight: 700;
   text-decoration: underline;
   border: 0 !important;
}

.contacto-btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 9px;
   min-height: 48px;
   margin-top: 24px;
   padding: 0 24px;
   border: 0;
   border-radius: 999px;
   background: #c00087;
   color: #fff;
   font: 700 14px "Manrope", sans-serif;
   cursor: pointer;
   transition: .2s ease;
}

.contacto-btn:hover {
   background: #29274c;
   transform: translateY(-2px);
}

.contacto-btn span {
   font-size: 17px;
}

/* RESPONSIVE */
@media (max-width: 900px) {
   @media (max-width: 900px) {
   .contacto-hero .comp-hero__inner { grid-template-columns: 1fr; gap: 20px; padding-top: 2rem; }
   .contacto-hero .comp-hero__texto {order: 1; padding: 55px 7% 0;}
   .contacto-hero__imagen {
      order: 2;
      min-height: 0;
      align-self: auto;
      justify-content: center;
      margin-top: 5px;
   }

   .contacto-hero__imagen img {
      width: min(340px, 60%);
      margin-bottom: -65px;
   }
}
   .contacto-hero__visual { margin: 0 7%; padding: 25px 0 80px; border-left: 0; border-top: 1px solid rgba(255,255,255,.35); }
   .contacto-layout { grid-template-columns: 1fr; gap: 45px; }
   .contacto-info { position: static; }
}

@media (max-width: 600px) {
   .contacto-bloque { padding: 30px 0 30px; }
   .contacto-hero h1 { font-size: clamp(2.45rem, 11vw, 3.25rem); letter-spacing: -1.4px; }
   .contacto-hero__imagen {
   min-height: auto;
   align-self: auto;
}

.contacto-hero__imagen img {
   width: min(380px, 65%);
   margin-bottom: -65px;
}
   .contacto-form-wrap { padding: 26px 22px; border-radius: 18px; }
   .contacto-form__grid { grid-template-columns: 1fr; }
   .contacto-field--full { grid-column: auto; }
   .contacto-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
   .contacto-hero .punto-bote { animation: none; }
}