/* ÓPTICA FIJA — Página de Solicitud de presupuesto / Contacto. Todo scopeado a .of-contacto. */
.of-contacto{
  --of-red:#E02B20; --of-red-dark:#B81F17; --of-black:#000; --of-ink:#1A1A1A;
  --of-muted:#6B6B6B; --of-white:#fff; --of-surface:#F7F6F5; --of-border:#E6E4E1;
  font-family:'Albert Sans',Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;
  color:var(--of-ink);line-height:1.5;
}
.of-contacto *{box-sizing:border-box}
/* Sin subrayados en ningún enlace (regla global de la web), incluidos los que pinta Gravity Forms */
.of-contacto a,.of-contacto a:hover,.of-contacto a:focus,
.of-c-form .gform_wrapper a,.of-c-form .gform_wrapper a:hover,.of-c-form .gform_wrapper a:focus{text-decoration:none !important}
.of-c-form .gform_wrapper a{color:var(--of-red);font-weight:600}
.of-c-form .gform_wrapper a:hover{color:var(--of-red-dark)}
.of-c-wrap{max-width:1160px;margin:0 auto;padding:0 clamp(20px,5vw,64px)}

/* ---------- HERO ---------- */
.of-c-hero{background:var(--of-white);padding:clamp(16px,2.5vw,30px) 0 clamp(28px,4vw,44px);text-align:center}
.of-c-h1{font-size:clamp(2rem,5vw,3.25rem);font-weight:800;line-height:1.08;letter-spacing:-.01em;margin:0 0 18px;color:var(--of-ink);text-transform:none}
.of-c-red{color:var(--of-red)}
.of-c-lead{max-width:760px;margin:0 auto;font-size:clamp(1.05rem,2vw,1.1875rem);font-weight:500;line-height:1.6;color:var(--of-muted)}
.of-contacto .of-c-lead strong{color:var(--of-red);font-weight:700}
.of-c-quick{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:26px}
.of-c-chip{display:inline-flex;align-items:center;gap:9px;padding:11px 18px;border:1px solid var(--of-border);border-radius:999px;
  background:var(--of-white);color:var(--of-ink);font-weight:600;font-size:.97rem;text-decoration:none;
  transition:border-color .2s ease,color .2s ease,background .2s ease}
.of-c-chip svg{width:18px;height:18px;color:var(--of-red);flex:0 0 auto}
.of-c-chip:hover,.of-c-chip:focus-visible{border-color:var(--of-red);color:var(--of-red);background:#FBF3F2}

/* ---------- MAIN: formulario + aside ---------- */
.of-c-main{background:var(--of-surface);padding:clamp(40px,6vw,72px) 0}
.of-c-grid{display:grid;grid-template-columns:1.7fr 1fr;gap:28px;align-items:start}
@media(max-width:920px){ .of-c-grid{grid-template-columns:1fr;gap:22px} }

.of-c-formcard,.of-c-card{background:var(--of-white);border:1px solid var(--of-border);border-radius:18px;
  box-shadow:0 1px 3px rgba(0,0,0,.05),0 14px 34px rgba(0,0,0,.05)}
.of-c-formcard{padding:clamp(24px,3.4vw,40px)}
.of-c-h2{font-size:clamp(1.5rem,3vw,2rem);font-weight:800;line-height:1.15;margin:0 0 10px;color:var(--of-ink);text-transform:none}
.of-c-formsub{margin:0 0 24px;color:var(--of-muted);font-size:1.0625rem;line-height:1.6}
.of-contacto .of-c-formsub strong{color:var(--of-red);font-weight:700}
.of-c-formerr{color:var(--of-ink)}
.of-c-formerr a{color:var(--of-red);font-weight:700;text-decoration:none}

/* ---------- ASIDE (datos de contacto) ---------- */
.of-c-aside{position:sticky;top:108px}
@media(max-width:920px){ .of-c-aside{position:static} }
.of-c-card{padding:clamp(22px,2.6vw,30px)}
.of-c-cardtitle{font-size:1.2rem;font-weight:800;margin:0 0 18px;color:var(--of-ink);text-transform:none}
.of-c-info{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px}
.of-c-info-row{display:flex;gap:14px;align-items:flex-start}
.of-c-info-ic{flex:0 0 auto;width:42px;height:42px;border-radius:12px;background:#FBF3F2;display:flex;align-items:center;justify-content:center}
.of-c-info-ic svg{width:20px;height:20px;color:var(--of-red)}
.of-c-info-txt{display:flex;flex-direction:column;gap:2px;min-width:0;padding-top:1px}
.of-c-info-k{font-size:.8rem;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--of-muted)}
.of-c-info-txt a{color:var(--of-ink);font-weight:700;text-decoration:none;font-size:1.05rem;word-break:break-word;transition:color .18s ease}
.of-c-info-txt a:hover{color:var(--of-red)}
.of-c-info-v{font-weight:600;color:var(--of-ink);font-size:1rem;line-height:1.45}
.of-c-social{display:flex;gap:10px;margin-top:22px;padding-top:20px;border-top:1px solid var(--of-border)}
.of-c-social a{width:42px;height:42px;border:1px solid var(--of-border);border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:var(--of-ink);text-decoration:none;transition:color .2s ease,border-color .2s ease}
.of-c-social a:hover{color:var(--of-red);border-color:var(--of-red)}
.of-c-social svg{width:18px;height:18px}

/* ---------- MAPA ---------- */
.of-c-map{background:var(--of-white);padding:clamp(36px,5vw,64px) 0}
.of-c-maphead{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-end;justify-content:space-between;margin-bottom:22px}
.of-c-mapaddr{display:flex;align-items:center;gap:9px;margin:8px 0 0;color:var(--of-muted);font-weight:600;font-size:1.0625rem}
.of-c-mapaddr svg{width:19px;height:19px;color:var(--of-red);flex:0 0 auto}
.of-c-dir{display:inline-flex;align-items:center;gap:9px;background:var(--of-red);color:#fff;border:2px solid var(--of-red);
  border-radius:8px;padding:13px 24px;font-weight:700;font-size:1.0625rem;text-decoration:none;white-space:nowrap;
  transition:background .2s ease,color .2s ease}
.of-c-dir svg{width:18px;height:18px;transition:transform .2s ease}
.of-c-dir:hover,.of-c-dir:focus-visible{background:#fff;color:var(--of-red)}
.of-c-dir:hover svg{transform:translateX(4px)}
.of-c-mapframe{position:relative;border-radius:18px;overflow:hidden;border:1px solid var(--of-border);
  box-shadow:0 1px 3px rgba(0,0,0,.05),0 14px 34px rgba(0,0,0,.05);aspect-ratio:16/8;background:var(--of-surface)}
@media(max-width:680px){ .of-c-mapframe{aspect-ratio:4/3} }
.of-c-mapframe iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;filter:grayscale(.12)}

/* ============================================================
   GRAVITY FORMS — reskin scopeado a .of-contacto (form id 1)
   ============================================================ */
/* Tema "orbital" de GF: redefinir sus variables a la marca (el azul por defecto sale de --gf-color-primary) */
.of-c-form .gform_wrapper,
.of-c-form .gform-theme--framework,
.of-c-form .gform-theme--foundation{
  --gf-color-primary:#E02B20;
  --gf-color-primary-rgb:224,43,32;
  --gf-color-primary-contrast:#ffffff;
  --gf-color-primary-darker:#B81F17;
  --gf-color-primary-darkest:#B81F17;
  --gf-color-primary-lighter:#E02B20;
  --gf-color-primary-lightest:#FBF3F2;
  --gf-ctrl-btn-bg-primary:#E02B20;
  --gf-ctrl-btn-bg-primary-hover:#ffffff;
  --gf-ctrl-btn-color-primary:#ffffff;
  --gf-ctrl-btn-color-primary-hover:#E02B20;
  --gf-ctrl-btn-border-color-primary-hover:#E02B20;
  --gf-local-color-primary:#E02B20;
}
.of-c-form .gform_wrapper{margin:0}
.of-c-form .gform_heading{display:none}
.of-c-form .gform_fields{display:grid;grid-template-columns:repeat(2,1fr);gap:18px 18px}
@media(max-width:560px){ .of-c-form .gform_fields{grid-template-columns:1fr} }
.of-c-form .gfield{margin:0;min-width:0}
/* campos anchos: nombre, dirección, mensaje y el de "añadir más productos" ocupan 2 columnas */
.of-c-form .gfield--width-full,
.of-c-form .gfield.gfield--type-name,
.of-c-form .gfield.gfield--type-address,
.of-c-form .gfield.gfield--type-date,
.of-c-form .gfield.gfield--type-textarea,
.of-c-form .gfield.gfield--type-select,
.of-c-form .gfield.gsection,
.of-c-form .gfield.gfield_html{grid-column:1 / -1}

.of-c-form .gfield_label,
.of-c-form .gform_wrapper legend.gfield_label{font-family:inherit;font-weight:600;font-size:.95rem;color:var(--of-ink);margin:0 0 7px;display:block;line-height:1.3}
.of-c-form .gfield_required{color:var(--of-red);margin-left:2px;text-decoration:none}
.of-c-form .gsection .gsection_title{font-weight:800;font-size:1.1rem;color:var(--of-ink);border:0;padding:6px 0 0;margin:6px 0 0}

/* inputs */
.of-c-form .gform_wrapper input[type=text],
.of-c-form .gform_wrapper input[type=email],
.of-c-form .gform_wrapper input[type=tel],
.of-c-form .gform_wrapper input[type=number],
.of-c-form .gform_wrapper input[type=date],
.of-c-form .gform_wrapper input[type=url],
.of-c-form .gform_wrapper textarea,
.of-c-form .gform_wrapper select{
  width:100%;font-family:inherit;font-size:1.0125rem;color:var(--of-ink);background:var(--of-white);
  border:1px solid var(--of-border);border-radius:10px;padding:12px 14px;line-height:1.35;
  height:auto !important;min-height:50px;
  transition:border-color .18s ease,box-shadow .18s ease;-webkit-appearance:none;appearance:none}
.of-c-form .gform_wrapper textarea{min-height:130px;resize:vertical}
.of-c-form .gform_wrapper select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236B6B6B' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:38px}
.of-c-form .gform_wrapper input:focus,
.of-c-form .gform_wrapper textarea:focus,
.of-c-form .gform_wrapper select:focus{outline:none;border-color:var(--of-red);box-shadow:0 0 0 3px rgba(224,43,32,.14)}
.of-c-form .gform_wrapper input::placeholder,
.of-c-form .gform_wrapper textarea::placeholder{color:#9a9a9a}

/* sub-etiquetas de campos compuestos (nombre, dirección, fecha) */
.of-c-form .gform_wrapper .ginput_complex label,
.of-c-form .gform_wrapper .gfield_date_dropdown label,
.of-c-form .gform_wrapper .ginput_container_date label{font-size:.78rem;font-weight:500;color:var(--of-muted);margin-top:5px}
.of-c-form .gform_wrapper .ginput_complex{display:grid;grid-template-columns:1fr 1fr;gap:12px}
/* fecha (Día/Mes/Año): la fila es .ginput_complex pero necesita 3 columnas, no 2 */
.of-c-form .gfield--type-date .ginput_complex{grid-template-columns:repeat(3,1fr)}
.of-c-form .gfield--type-date .gform-grid-col{grid-column:auto;min-width:0}
@media(max-width:560px){ .of-c-form .gform_wrapper .ginput_complex{grid-template-columns:1fr} }
@media(max-width:480px){ .of-c-form .gfield--type-date .ginput_complex{grid-template-columns:1fr} }
.of-c-form .gform_wrapper .ginput_full{grid-column:1 / -1}

/* descripción de campo */
.of-c-form .gfield_description{color:var(--of-muted);font-size:.85rem;margin-top:6px;padding:0}

/* validación */
.of-c-form .gform_wrapper .gfield_error input,
.of-c-form .gform_wrapper .gfield_error textarea,
.of-c-form .gform_wrapper .gfield_error select{border-color:var(--of-red)}
.of-c-form .gform_wrapper .validation_message,
.of-c-form .gform_wrapper .gfield_validation_message{color:var(--of-red);font-size:.85rem;font-weight:600;margin-top:6px;background:none;border:0;padding:2px 0}
.of-c-form .gform_wrapper .gform_validation_errors{background:#FBF3F2;border:1px solid rgba(224,43,32,.3);border-radius:10px;padding:14px 16px;box-shadow:none;margin-bottom:20px}
.of-c-form .gform_wrapper .gform_validation_errors .gform_submission_error{color:var(--of-red);font-weight:700}

/* footer / botón enviar */
.of-c-form .gform_footer{margin:26px 0 0;padding:0}
.of-c-form .gform_wrapper .gform_footer input[type=submit],
.of-c-form .gform_wrapper input.gform_button,
.of-c-form .gform_wrapper .gform_button{
  display:inline-flex !important;align-items:center;justify-content:center;font-family:inherit;font-weight:700;font-size:1.0625rem;line-height:1;
  background:var(--of-red) !important;color:#fff !important;border:2px solid var(--of-red) !important;border-radius:8px !important;
  padding:16px 34px !important;cursor:pointer;width:100%;max-width:none;box-shadow:none !important;
  transition:background .2s ease,color .2s ease,border-color .2s ease}
.of-c-form .gform_wrapper .gform_footer input[type=submit]:hover,
.of-c-form .gform_wrapper input.gform_button:hover,
.of-c-form .gform_wrapper .gform_button:hover,
.of-c-form .gform_wrapper .gform_footer input[type=submit]:focus-visible{background:#fff !important;color:var(--of-red) !important;border-color:var(--of-red) !important}

/* confirmación */
.of-c-form .gform_confirmation_message{background:#FBF3F2;border:1px solid rgba(224,43,32,.25);border-radius:12px;padding:22px 24px;font-size:1.0625rem;font-weight:600;color:var(--of-ink)}

/* checkbox / radio + consentimiento */
.of-c-form .gform_wrapper .gchoice{display:flex;align-items:flex-start;gap:9px;margin:6px 0}
.of-c-form .gform_wrapper .gchoice input{margin-top:3px;accent-color:var(--of-red);width:17px;height:17px;flex:0 0 auto}
.of-c-form .gform_wrapper .gchoice label{font-size:.95rem;color:var(--of-ink);font-weight:500}

/* spinner ajax */
.of-c-form .gform_wrapper .gform_ajax_spinner{margin-left:12px}