/* GANAN — contacto.css
   Estilos propios de esta pagina. Lo compartido esta en base.css */

/* ===== HEADER ===== */

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

.hero-bg-wrap{
    position: relative;
    /* Crea contexto de apilado propio para que el detalle de fondo no se
       cuele por detras del fondo de la pagina. */
    isolation: isolate;
    /* 'clip' y no 'hidden': el detalle de la derecha se sale 200px y sacaba
       barra de scroll horizontal. 'overflow-x: hidden' obligaria al eje
       vertical a volverse desplazable y cortaria el sangrado superior del
       otro detalle; 'clip' recorta solo en horizontal. */
    overflow-x: clip;
    background: #1b1b1b;
  }

/* Detalle decorativo. 'pointer-events: none' para que no estorbe al
   formulario. */
.contacto-deco{
    position: absolute;
    left: -400px;
    top: -300px;
    z-index: 0;
    pointer-events: none;
  }

/* Segundo detalle, anclado abajo a la derecha. */
.contacto-deco2{
    position: absolute;
    right: -200px;
    bottom: -200px;
    z-index: 0;
    pointer-events: none;
  }

/* El contenido, por encima del detalle. '.hero' ya es relativo; estos dos no
   lo eran y la imagen los habria tapado. */
.form-wrap,
.social{
    position: relative;
    z-index: 1;
  }

.hero{
    position: relative;
    padding: 90px 24px 60px;
    text-align: center;
    overflow: hidden;
  }

.hero h1{
    font-size: var(--fs-display);
    color: var(--gold-light);
    letter-spacing: 1px;
    position: relative;
  }

.hero p{
    margin-top: 18px;
    color: var(--muted);
    font-size: var(--fs-sm);
    position: relative;
  }

/* ===== FORM CARD ===== */

.form-wrap{
    display:flex;
    justify-content:center;
    padding: 0 24px 70px;
  }

.card{
    width: 100%;
    max-width: 720px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 44px 48px;
  }

.card h2{
    color: var(--gold-light);
    font-size: var(--fs-h3);
    margin-bottom: 30px;
    font-weight: normal;
  }

.field{
    margin-bottom: 22px;
  }

.field label{
    display:block;
    font-size: var(--fs-sm);
    color: var(--cream);
    margin-bottom: 8px;
  }

.field input,
  .field select,
  .field textarea{
    width: 100%;
    background: var(--input-bg);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 6px;
    padding: 13px 14px;
    color: var(--cream);
    /* 16px como minimo, y no es estetico: Safari en iPhone amplia la pagina
       al enfocar un campo cuya letra baje de 16px. Con 14 hacia zoom en los
       cuatro. */
    font-size: var(--fs-sm);
    font-family: inherit;
    outline: none;
    transition: border-color .2s;
  }

.field input:focus,
  .field select:focus,
  .field textarea:focus{
    border-color: var(--gold);
  }

.field select{
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'><path d='M1 1l6 6 6-6' stroke='%23c9a25e' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 16px center;
    cursor: pointer;
  }

.field select option{
    background: var(--input-bg);
    color: var(--cream);
  }

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

.form-actions{
    display:flex;
    justify-content:flex-end;
    margin-top: 8px;
  }

.btn-submit{
    background: var(--gold);
    color: #171512;
    border: none;
    padding: 14px 30px;
    font-size: var(--fs-base);
    font-weight: 600;
    cursor: pointer;
    transition: background .2s, transform .1s;
  }

.btn-submit:hover{ background: var(--gold-light); }

.btn-submit:active{ transform: translateY(1px); }

.form-status{
    margin-top: 14px;
    font-size: var(--fs-sm);
    color: var(--gold-light);
    text-align: right;
    min-height: 18px;
  }

/* ===== SOCIAL ===== */

.social{
    display:flex;
    justify-content:center;
    align-items:center;
    gap: 60px;
    padding: 20px 24px 90px;
  }

.social-item{
    display:flex;
    flex-direction: column;
    align-items:center;
    gap: var(--sp-2);
    transition: transform .2s;
  }

.social-item:hover{ transform: translateY(-3px); }

.social-icon{
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display:flex;
    align-items:center;
    justify-content:center;
    color: var(--gold-light);
  }

.social-icon-img{
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

.social-item strong{
    font-size: var(--fs-base);
    color: var(--cream);
  }

.social-item span{
    font-size: var(--fs-sm);
    color: var(--muted);
  }

.social-divider{
    width: 1px;
    height: 70px;
    background: rgba(201,169,110,0.3);
  }

/* ===== FOOTER ===== */

/* ===== RESPONSIVE ===== */

@media (max-width: 980px){}

@media (max-width: 640px){
.hero{ padding: 60px 20px 40px; }.card{ padding: 32px 24px; }.form-actions{ justify-content: center; }

.btn-submit{ width: 100%; }

.social{ gap: var(--sp-4); flex-wrap: wrap; padding: 20px 24px 60px; }

.social-divider{ display: none; }
}

/* En pantallas medias y pequenas los -400px dejarian el detalle casi entero
   fuera de la vista, asi que se recoge a la mitad. */
@media (max-width: 820px) {
  .contacto-deco { left: -200px; }
}

@media (max-width: 640px) {
  .contacto-deco { left: -100px; top: -120px; }

  /* Menos negativo = sube: de -200 a -100 lo levanta 100px. */
  .contacto-deco2 { bottom: -100px; }
}