/**
 * ogotowil.css
 * Estilos de la página de contacto Otowil (hero + columna de info + formulario).
 */

:root {
  --otw-pink: #E8005A;
  --otw-pink-dark: #c70d50;
  --otw-pink-soft: rgba(232, 0, 90, 0.1);
  --otw-green: #22C55E;
  --otw-green-dark: #1fa659;
  --otw-green-soft: rgba(34, 197, 94, 0.1);
  --otw-card-bg: white;
  --otw-card-border: #E5E7EB;
  --otw-cream-icon: rgba(232, 0, 90, 0.2);
  --otw-text: #1C1C1C;
  --otw-muted: #4A4A4A;
  --otw-input-border: #E5E7EB;
  --otw-input-bg: #ffffff;
  --otw-radius: 16px;
  --otw-radius-sm: 8px;

  --font-inter:    'Inter', sans-serif;
  --font-display:  'Playfair Display';
}

/* ============================ HERO ============================ */

.otw-contact-hero {
  position: relative;      
  background: none;  
  padding: 34px 0;
  margin-bottom: 28px;
}

/* Fondo a todo el ancho de la ventana */
.otw-contact-hero::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 50%;     
  width: 100vw;
  margin-left: -50vw;       
  background: linear-gradient(135deg, #1c1c1c 0%, #2e2e2e 50%, #3a2a1a 100%);
  z-index: 0;
}

/* El contenido queda por encima y en su posición de siempre */
.otw-contact-hero .otw-hero-inner {
  position: relative;
  z-index: 1;
}

.otw-contact-hero .otw-hero-inner {
  margin: 0 auto;
  padding: 0px;
}
.otw-contact-hero .otw-hero-title {
  color: #fff;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 48px;
  line-height: 48px;
  letter-spacing: -0.5px;

}

/* ========================== LAYOUT =========================== */
.otw-contact-wrapper {
  margin: 40px 0px;
}
.otw-contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 24px;
  align-items: start;
}

/* ===================== COLUMNA DE INFO ======================= */
.otw-info-col {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.otw-card {
  background: var(--otw-card-bg);
  border: 1px solid var(--otw-card-border);
  border-radius: var(--otw-radius);
  padding: 22px 22px 24px;
}
.otw-card-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 16px;
}
.otw-ci-icon {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--otw-cream-icon);
}
.otw-ci-icon svg {
  width: 20px;
  height: 20px;
  display: block;
}
.otw-ci-icon--green {
  background: var(--otw-green-soft);
  color: var(--otw-green-dark);
}
.otw-ci-icon--pink {
  background: var(--otw-pink-soft);
  color: var(--otw-pink);
}
.otw-ci-icon--cream {
  background: var(--otw-cream-icon);
  color: #b89b6a;
}

.otw-card-titles {
  padding-top: 2px;
}
.otw-card-title {
  margin: 0 0 4px;
  color: var(--otw-text);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  letter-spacing: -0.5px;
}
.otw-card-sub, .otw-card-value{
  color: var(--otw-text)!important;
  margin: 0;
  font-family: var(--font-inter);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.5%;

}
.otw-card-value {
  display: block;
  margin-top: 8px;
  text-decoration: none;
}
a.otw-card-value:hover {
  color: var(--otw-pink)!important;
}
.otw-card-value--pink {
  color: var(--otw-pink)!important;
}

/* Botones de las tarjetas */
.otw-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 16px;
  padding: 12px 16px;
  border-radius: var(--otw-radius-sm);
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition:
  background-color 0.15s ease,
  color 0.15s ease,
  border-color 0.15s ease;
  font-family: var(--font-inter);
  font-weight: 600;
  font-size: 18px;
  line-height: 28px;
  letter-spacing: -0.5px;
  text-transform: uppercase;
  box-shadow: 0px 5px 7px 0px #0000000D


}
.otw-btn svg {
  width: 18px;
  height: 18px;
}
.otw-btn--whatsapp {
  background: var(--otw-green);
  color: #fff !important;
}
.otw-btn--whatsapp:hover {
  background: var(--otw-green-dark);
  color: #fff !important;
}
.otw-btn--mail {
  background: transparent;
  color: var(--otw-pink)!important;
  border-color: var(--otw-pink);
  border: solid 2px!important;
}
.otw-btn--mail:hover {
  background: var(--otw-pink);
  color: #fff !important;
}

/* Redes sociales */
.otw-social {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}
.otw-social a {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--otw-cream-icon);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--otw-text)!important;
  transition:
  background-color 0.15s ease,
  color 0.15s ease;
}
.otw-social a:hover {
  background: var(--otw-pink);
  color: #fff;
}
.otw-social a svg {
  width: 18px;
  height: 18px;
}

/* ====================== COLUMNA FORM ======================== */
.otw-form-col {
  min-width: 0;
}
.otw-form-card {
  background: var(--otw-card-bg);
  border: 1px solid var(--otw-card-border);
  border-radius: var(--otw-radius);
  padding: 28px 28px 30px;
}
.otw-form-title {
  margin: 0 0 22px;
  color: var(--otw-text);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 20px;
  line-height: 28px;
  letter-spacing: -0.5px;
}

.otw-contact-form {
  width: 100%;
}
.otw-form-fields {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.otw-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.otw-field {
  display: flex;
  flex-direction: column;
}
.otw-field--full {
  width: 100%;
}
.otw-label {
  color: #6B7280!important;
  margin-bottom: 3px;
  font-family: var(--font-inter);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.5%;
}
.otw-req {
  color: var(--otw-pink);
}
.otw-opt {
  color: #6B7280;
  font-weight: 400;
}

.otw-input,
.otw-select,
.otw-textarea {
  width: 100%;
  background: var(--otw-input-bg);
  border: 1px solid var(--otw-input-border);
  border-radius: var(--otw-radius-sm);
  padding: 11px 14px;
  font-size: 0.95rem;
  color: var(--otw-text);
  line-height: 1.4;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
  -webkit-appearance: none;
  appearance: none;
}
.otw-input::placeholder,
.otw-textarea::placeholder {
  color: #b3afaa;
}
.otw-input:focus,
.otw-select:focus,
.otw-textarea:focus {
  outline: none;
  border-color: var(--otw-pink);
  box-shadow: 0 0 0 3px rgba(230, 0, 126, 0.12);
}
.otw-textarea {
  min-height: 75px;
  resize: vertical;
}

/* Select con flecha custom */
.otw-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.298388 0.293939C0.484624 0.11476 0.734379 0.0168494 0.992769 0.0217247C1.25116 0.0266 1.49704 0.133862 1.67639 0.319939L6.49939 5.43934L11.3224 0.319939C11.4101 0.223291 11.5162 0.145223 11.6346 0.0903618C11.753 0.0355006 11.8812 0.00496242 12.0116 0.000556106C12.142 -0.00385021 12.272 0.0179649 12.3938 0.0647096C12.5157 0.111454 12.6269 0.182177 12.7209 0.272688C12.8148 0.363198 12.8897 0.471654 12.941 0.591629C12.9923 0.711604 13.019 0.840658 13.0195 0.971143C13.0201 1.10163 12.9944 1.23089 12.944 1.35126C12.8937 1.47164 12.8197 1.58069 12.7264 1.67194L7.20139 7.52194C7.11044 7.6163 7.00139 7.69136 6.88078 7.74262C6.76016 7.79389 6.63045 7.82031 6.49939 7.82031C6.36833 7.82031 6.23861 7.79389 6.118 7.74262C5.99738 7.69136 5.88834 7.6163 5.79739 7.52194L0.272388 1.67194C0.0932086 1.4857 -0.00470156 1.23595 0.00017372 0.977557C0.005049 0.719167 0.112311 0.473283 0.298388 0.293939Z' fill='%234B5563'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 14px 8px;
  padding-right: 38px;
  cursor: pointer;
}

/* ======================== DROPZONE ========================== */
.otw-dropzone {
  position: relative;
  border: 1px dashed var(--otw-input-border);
  border-radius: 12px;
  background: var(--otw-input-bg);
  padding: 16px 16px;
  text-align: center;
  cursor: pointer;
  transition:
  border-color 0.15s ease,
  background-color 0.15s ease;
}
.otw-dropzone:hover,
.otw-dropzone--dragover {
  border-color: var(--otw-pink);
  background: #fffafc;
}
.otw-dropzone .otw-file-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.otw-dropzone-icon {
  display: inline-flex;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  background: var(--otw-cream-icon);
  color: var(--otw-pink);
  margin-bottom: 10px;
}
.otw-dropzone-icon svg {
  width: 20px;
  height: 20px;
}
.otw-dropzone-text {
  margin: 0;
  color: var(--otw-muted);
  font-family: var(--font-inter);
  font-weight: 400;
  font-size: 14px;
  line-height: 100%;
  letter-spacing: -0.5px;
}
.otw-dropzone-link {
  color: var(--otw-pink);
  font-family: var(--font-inter);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.5px;
}
.otw-dropzone-hint {
  margin: 10px 0 0;
  font-family: var(--font-inter);
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.5px;
  color: #4A4A4A99;
}

.otw-dropzone-file {
  margin: 8px 0 0;
  font-size: 0.85rem;
  color: var(--otw-text);
  font-weight: 600;
  word-break: break-all;
}
.otw-dropzone--has-file {
  border-style: solid;
  border-color: var(--otw-green);
}

/* ========================= SUBMIT =========================== */
.otw-form-footer {
  margin-top: 24px;
}
.otw-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 14px 18px;
  border: none;
  border-radius: var(--otw-radius-sm);
  background: var(--otw-pink);
  color: #fff;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.15s ease;
  font-family: var(--font-inter);
  font-weight: 600;
  font-size: 18px;
  line-height: 28px;
  letter-spacing: -0.5px;
  box-shadow: 0px 5px 7px 0px rgba(0, 0, 0, 0.05);
}
.otw-submit:hover {
  background: var(--otw-pink-dark);
}
.otw-submit svg {
  width: 18px;
  height: 18px;
}

/* Honeypot anti-spam */
.otw-contact-form input[name="url"] {
  display: none !important;
}


/* ---------------- Prefijo +54 fijo (teléfono) ---------------- */
.otw-input-group {
  display: flex;
  align-items: stretch;
  background: var(--otw-input-bg);
  border: 1px solid var(--otw-input-border);
  border-radius: var(--otw-radius-sm);
  overflow: hidden;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}
.otw-input-group:focus-within {
  border-color: var(--otw-pink);
  box-shadow: 0 0 0 3px rgba(230, 0, 126, 0.12);
}
.otw-input-prefix {
  display: flex;
  align-items: center;
  padding: 0 12px;
  font-size: 0.95rem;
  color: var(--otw-text);
  background: var(--otw-pink-soft);
  border-right: 1px solid var(--otw-input-border);
  white-space: nowrap;
  user-select: none;
}
.otw-input-group .otw-input {
  border: none;
  border-radius: 0;
}
.otw-input-group .otw-input:focus {
  border: none;
  box-shadow: none;
}

/* ---------------- Hover de los íconos SVG / FA ---------------- */
/* Transición suave del color del ícono */
.otw-btn svg path,
.otw-social a svg path,
.otw-social a i {
  transition:
    fill 0.15s ease,
    color 0.15s ease;
}
/* "Mandanos un mail": el ícono pasa a blanco sobre fondo rosa.
   (la propiedad CSS fill gana sobre el atributo fill="#..." del SVG) */
.otw-btn--mail:hover svg path {
  fill: #fff;
}
/* Redes: el ícono (SVG o Font Awesome) pasa a blanco al hover */
.otw-social a:hover svg path {
  fill: #fff;
}
.otw-social a:hover i {
  color: #fff !important;
}

/* ====================== NOTIFICACIONES ====================== */
.otw-notifications {
  border-radius: var(--otw-radius-sm);
  padding: 12px 16px;
  margin-bottom: 18px;
  font-size: 0.9rem;
}
.otw-notifications ul {
  margin: 0;
  padding-left: 0px;
}
.otw-notifications.otw-notif--ok {
  background: var(--otw-green-soft);
  color: var(--otw-green-dark);
}
.otw-notifications.otw-notif--error {
  background: #fdeaea;
  color: #c0392b;
}

/* ======================= RESPONSIVE ========================= */
@media (max-width: 991px) {
  .otw-contact-grid {
    grid-template-columns: 1fr;
  }
  .otw-contact-hero .otw-hero-title {
    font-size: 30px;
    font-weight: 500;
    font-size: 30px;
    line-height: 100%;
    letter-spacing: -0.5px;

  }
  #contact div#inner-wrapper {
    padding: 0px;
  }
  .otw-contact-wrapper {
    padding: 0px 20px;
  }
  .otw-contact-hero .otw-hero-inner {
    padding: 0px 20px;
  }
  .otw-card-title{
    font-weight: 500;
    font-size: 20px;
    line-height: 28px;
    letter-spacing: -0.5px;
  }
  .otw-card-sub,.otw-card-value, .otw-label, .otw-dropzone-text, .otw-dropzone-link{
    font-weight: 400;
    font-size: 16px;
    line-height: 22px;
    letter-spacing: 0%;
  }
  .otw-dropzone-hint{
    font-size: 16px;
  }
  .otw-card-title {
      margin: 0 0 8px;
  }

}

@media (max-width: 575px) {
  .otw-row-2 {
    grid-template-columns: 1fr;
  }
  .otw-form-card {
    padding: 20px 18px 22px;
  }
  .otw-card {
    padding: 18px;
  }
}

#contact #wrapper .breadcrumb {
  display: none;
}
#contact #wrapper {
  padding-top: 0px !important;
}