/* Estilos básicos aproximados al diseño */
.fd-section{display:flex;gap:30px;align-items:center;max-width:1100px;margin:40px auto;padding:20px}
.fd-left{flex:1;padding-left:20px}
.fd-left h4{color:#2a56b8;margin:0;font-weight:700}
.fd-left h2{font-size:28px;margin:10px 0}
.fd-left p{color:#555}
.fd-figure{width:260px;height:420px;background:url('../img/model.png') center/cover no-repeat;border-radius:10px}

/* Make card relative so we can place the image behind it on mobile */
.fd-card{flex:1;background:#fff;padding:30px;border-radius:12px;box-shadow:0 6px 20px rgba(29,39,54,0.06);position:relative;overflow:hidden}

/* Default: no pseudo background image (desktop uses .fd-figure) */
.fd-card::before{content:'';display:none}

/* Mobile: hide the left figure and use the image as a subtle background of the card */
@media (max-width:900px){
  .fd-section{flex-direction:column}
  .fd-row{flex-direction:column}

  /* hide the separate figure under the text */
  .fd-figure{display:none}

  /* show the image as a background behind the card with low opacity */
  .fd-card{
    background: rgba(255,255,255,0.92); /* slightly translucent so background image is visible */
  }
  .fd-card::before{
    display:block;
    position:absolute;
    inset:0;
    background-image:url('../img/model.png');
    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;
    opacity:0.12; /* adjust to taste */
    transform:scale(1.03); /* slight scale so edges aren't obvious */
    z-index:0;
    border-radius:12px;
    pointer-events:none;
  }

  /* place the card content above the pseudo element */
  .fd-card > *{position:relative;z-index:1}
}

.fd-card h3{margin:0 0 6px}
.fd-card p{color:#777;margin-bottom:16px}
#fd-form label{display:block;margin-bottom:12px;color:#333;font-size:14px}
#fd-form input[type="text"],#fd-form input[type="email"],#fd-form select,#fd-form textarea{width:100%;padding:10px;border:1px solid #e6e9ef;border-radius:6px;box-sizing:border-box}
#fd-form .fd-row{display:flex;gap:12px}
#fd-form .fd-row label{flex:1}
#fd-form textarea{min-height:120px;resize:vertical}
.fd-counter{font-size:12px;color:#999;text-align:right;margin-top:6px}
.fd-actions{display:flex;align-items:center;gap:16px;margin-top:12px}
.fd-submit{background:#0b73ff;color:#fff;padding:10px 18px;border-radius:8px;border:none;cursor:pointer}
#fd-result{font-size:14px;color:#2a7a2a}