/* RESET */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

.required{

    color:var(--accent);

    margin-left:4px;

}

/* COLORS */

:root{

    /*
     * These variables are the main visual controls for the questionnaire.
     * Change these first when matching a new PDF or brand guide.
     */

    --background:#F8F7F4;

    --card:#FFFFFF;

    --text:#242424;

    --secondary:#6B6B6B;

    --border:#E5E5E5;

    --accent:#B39A74;

    --hover:#A28762;

    --radius:12px;

    /* Keep the form aligned like a printed questionnaire page. */
    --page-width:920px;
    --page-padding:40px;
    --grid-gap:1rem;

    border-radius:var(--radius);
}

/* BODY */

body{

    font-family:"Roboto",sans-serif;

    background:var(--background);

    color:var(--text);

    overflow-x:hidden;

}

/* CENTER EVERYTHING */

.welcome{

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:40px;

}

/* LOGO */

.logo{

    width:160px;

    margin-bottom:40px;

}

/* TITLE */


/* TITLE FOR FIRST PAGE */
h1{

    font-size:18px;
    letter-spacing:.30em;
    font-weight:600;
    text-transform: uppercase;
    margin-bottom: 10px;

}

/* SUBTITLE FOR FIRST PAGE */
h2{
    font-size: 12.5px;
    letter-spacing: .15em;
    font-family: "Roboto", sans-serif;
    text-transform: uppercase;
    font-weight: 200;
    color:#A28762;
    margin-bottom: 5px;

}

/* LABELS FOR REST OF FORM */

.section-title{
    font-family: "Roboto", sans-serif; /* or whatever you're using */
    font-size: 2rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 600;
    color: #1d1d1d;
}

/* INTRO */

.intro{

    line-height:1.9;

    color:#666;

    margin-bottom:40px;

}

/* DETAILS */

.details{

    margin-bottom:10px;

}

/* BUTTON */

button{

    background:#222;

    color:white;

    padding:18px 42px;

    border:none;

    font-size:15px;

    letter-spacing:.08em;

    text-transform:uppercase;

    cursor:pointer;

    transition:.3s;

}

button:hover{

    background:#A38A64;

    transform:translateY(-2px);

}

button:active{

    transform:translateY(0);

}

button:hover{

    background:var(--accent);

}

.app{

    max-width:var(--page-width);

    margin:auto;

    min-height:100vh;

    display:flex;

    flex-direction:column;

}

/* Paso 1 follows the PDF's compact Roboto section-heading treatment. */
.client-step .section-title,
.client-step fieldset > legend{
    font-family:"Roboto",sans-serif;
    font-size:14px;
    line-height:1.35;
    letter-spacing:.08em;
    font-weight:600;
}

.client-step h3{
    font-family:"Roboto",sans-serif;
    font-size:12px;
    line-height:1.35;
    letter-spacing:.08em;
    font-weight:500;
    text-transform: uppercase;
    margin-bottom: 10px;
}

/* Paso 1: keep the client heading, date, and fields visually close together. */
.client-step .branding{margin-bottom:1rem;}
.client-step .questionnaire-date{margin-bottom:1rem;}
.client-step .two-column{column-gap:.5rem;}
.client-step .question-inline{column-gap:4px;}
.client-step .branding{align-items:center;}
.client-step .question-inline label{
    font-family: "Montserrat", sans-serif;
    font-size: 12px;
    font-weight: 100;
    text-transform:uppercase;
    letter-spacing: .1em;
}

.client-step .question-inline input{
    font-family:"Roboto",sans-serif;
    font-weight:300;
}

.client-step .two-column{
    row-gap:14px;
}

/* Keep Nombre, Email, Dirección, and Teléfono using the same compact field layout. */
.client-step .two-column > .question-inline:nth-child(1),
.client-step .two-column > .question-inline:nth-child(2),
.client-step .two-column > .question-inline:nth-child(3),
.client-step .two-column > .question-inline:nth-child(4){
    grid-template-columns:90px minmax(0,1fr);
    column-gap:4px;
}

.client-step .two-column > .question-inline:nth-child(5){
    grid-template-columns:250px minmax(0,1fr);
    column-gap:4px;
}

.client-step .two-column > .question-inline:nth-child(5) label{
    white-space:nowrap;
}

/* Dirección and Teléfono use their own compact label/input geometry. */
.client-step .two-column > .question-inline:nth-child(2),
.client-step .two-column > .question-inline:nth-child(4){
    grid-template-columns:90px minmax(0,1fr);
    column-gap:4px;
}

.stepText{
    width:min(100%, 1080px);
    margin:0 auto;
    background:var(--card);
    min-height:100vh;
}

header{

    padding:var(--page-padding);

    width:min(100%, var(--page-width));
    margin:0 auto;

}

.questionnaire-header {
    display: flex;
    align-items: center;
    gap: 16px;
}

.header-logo {
    width: 32px;   /* Adjust to match the PDF */
    height: auto;
}

.progress-container{

    height:8px;

    background:#E5E5E5;

    border-radius:20px;

    overflow:hidden;

    margin:30px 0;

}

#progressBar{

    width:10%;

    height:100%;

    background:#222;

    transition:.4s;

}

main{

    flex:1;

    padding:var(--page-padding);

    width:min(100%, var(--page-width));
    margin:0 auto;

}

.step{

    display:none;

}

.step.active{

    display:block;

}

.branding {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 2rem;
}

.branding-photo {
    width:180px;
    height:125px;
    object-fit:cover;
    object-position:center 62%;
    border-radius:2px;
    flex:0 0 auto;
}

.branding-text {
    display: flex;
    flex-direction: column;
}

.branding-logo {
    width: 200px;   /* adjust until it matches the PDF */
    height: auto;
    align-items: center;
}

/* ALL TEXT FIELDS */

.question-inline {
    display: grid;
    grid-template-columns: minmax(120px, 170px) minmax(0, 1fr);
    column-gap: 16px;
    font-weight: 100;

}

.question-inline label {
    margin: 0;
}

.question-inline input {
    width: 100%;
    max-width: 100%;
}

/* Keep the final two client details on their own full-width lines. */
.two-column > .question-inline:nth-last-child(-n+2){
    grid-column:1 / -1;
}

.questionnaire-date{

    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:30px;

}

.date-label{

    font-family:'Roboto', sans-serif;
    letter-spacing:.10em;
    text-transform:uppercase;
    font-size:12px;
}

.current-date{
    font-family:'Roboto',sans-serif;
    font-size:12px;
    color:#444;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
textarea{

    border:none;

    border-bottom:2px dotted #686868;

    background:transparent;

    padding:4px 0;

    border-radius:0;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="date"]:focus,
textarea:focus{

    outline:none;

    border-color:#A38A64;

}



.question{

    width: 100%;

    display:flex;

    flex-direction:column;

    margin-bottom:15px;

}

.question label{

    margin-bottom:20px;

    font-size:14px;

    letter-spacing:.08em;

    text-transform:uppercase;

    color:#555;

}

.question input,
.question textarea,
.questionDetalles input,
.questionDetalles textarea{

    background:transparent;

    border:none;

    border-bottom:2px dotted #686868;

    padding:4px 0;

    border-radius:0;

    box-shadow:none;

    width: 100%;

}

.question input:focus,
.question textarea:focus {

    outline: none;
    border-color: #A38A64;
    box-shadow: 0 8px 25px rgba(0,0,0,.05);

}

.question textarea,
.questionDetalles textarea{

    min-height:50px;

    resize:vertical;

    font-family: inherit;

}

.questionDetalles{
    margin-bottom: 20px;
}

.questionDetalles label{

    display: block;

    margin-bottom:12px;

    font-size:14px;

    letter-spacing:.08em;

    color:#555;

}

.questionDetalles input[type="checkbox"]{

    width: auto;
    min-height: auto;
    padding: 0;
    margin-right: 8px;
    font-weight: 100;

}

.questionDetalles input:focus,
.questionDetalles textarea:focus{

    outline:none;

    border-color:#A38A64;

    box-shadow:0 8px 25px rgba(0,0,0,.05);

}

.checkbox-inline label{

    display:flex;

    align-items:center;

    gap:8px;

    text-transform:uppercase;

}

.radio-group-inline{

    display:flex;
    gap:40px;

}

.radio-group-inline label{

    display:flex;
    align-items:center;
    gap:8px;

}

::placeholder{

    color:#D6D6D6;

}

.two-column{

    display:grid;

    grid-template-columns:repeat(2,1fr);
    margin-bottom: 30px;
    column-gap:1rem;

}

/*
 * Reusable three-column layout.
 *
 * Every direct child is allowed to shrink inside its grid cell. This is
 * important for checkbox labels, long Spanish words, and future follow-up
 * inputs. Do not add fixed widths to children placed in this grid.
 */
.three-column{

    display:grid;

    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:var(--grid-gap);
    width:100%;
    align-items:start;
}

.three-column > *{
    min-width:0;
}

.checkbox-group{
    width:100%;
    max-width:100%;
}

/* Every questionnaire section should use the full printable content width. */
.step .checkbox-group{
    width:100%;
    max-width:100%;
}

.three-column > label,
.three-column > .other-option{
    min-width:0;
    overflow-wrap:anywhere;
}

/* Keep every checkbox label visually centered with its checkbox. */
.three-column > label{
    display:flex;
    align-items:center;
    gap:8px;
    line-height:1.35;
}

/*
 * Paso 1 has two distinct grid areas in the PDF. Keeping separate class
 * hooks means their spacing can be changed independently later.
 */
.client-step .property-grid{
    column-gap:2.25rem;
    row-gap:1rem;
    margin-bottom:1.5rem;
}

.client-step .nature-grid{
    column-gap:2.25rem;
    row-gap:1.25rem;
}

.client-step .nature-grid > label{
    line-height:1.45;
    padding-right:.5rem;
}

/* THIS IS JUST FOR IMAGE CARDS */
.image-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    justify-content:stretch;
    gap:0;
}

@media (max-width:768px){

    .form-grid{

        grid-template-columns:1fr;

    }

}

.cover-page{
    flex-direction:column;
    min-height:100vh;
    padding:0;
    width:calc(100% + (var(--page-padding) * 2));
    margin-left:calc(-1 * var(--page-padding));
}

.cover-page.active{
    display:flex;
}

.cover-logo{
    width:300px;
    margin-bottom:0;
}

.cover-intro-text{
    margin-top:1.25rem;
    color:var(--accent);
    font-size:1.35rem;
    letter-spacing:.25em;
    text-transform:uppercase;
    text-align:center;
    font-family: "Montserrat", sans-serif;
    padding: 20px;
}

.cover-info{

    position:absolute;

    top:45px;

    left:50%;

    transform:translateX(-50%);
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    align-items:center;
    width:calc(100% - 64px);
    gap:1rem;
    text-align:center;
}

.cover-info a,
.cover-info span{
    color:rgb(0, 0, 0);
    text-decoration:none;
    font-size:.9rem;
    letter-spacing:.08em;
}

.cover-info a:hover{
    text-decoration: underline;
}


#coverstart{
    position:absolute;
    bottom:45px;
    left:50%;
    transform:translateX(-50%);
}

.cover-header{
    width:100%;
    background:white;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content: center;
    padding:1rem 0;

}

.cover-hero{
    position:relative;
    height:560px;
    overflow:hidden;
}

.cover-image{
    width:100%;
    height:100%;

    /* Fill the entire cover area without exposing a background around it. */
    object-fit:cover;
    object-position:center;

    display:block;
}


.cover-content{

    position:absolute;

    top:120px;

    left:50%;

    transform:translateX(-50%);
}

/* TESTING */
.cover-content{
    position:absolute;
    top:120px;
    left:50%;
    transform:translateX(-50%);

    width:90%;
    width:calc(100% - 64px);
    text-align:center;
}

/* Match Paso 2 and Paso 9 headings to Paso 1's Datos del Cliente title. */
.project-details-step > h1,
.additional-step > h1{
    font-family:"Roboto",sans-serif;
    font-size:12px;
    line-height:1.35;
    letter-spacing:.08em;
    font-weight:500;
    text-transform:uppercase;
}

.cover-title{
    font-size:clamp(1.8rem,4vw,2.35rem);
    letter-spacing:.12em;
    font-weight: 600;
    width:100%;
    text-align:center;
    white-space:nowrap;
}

#coverstart{

    position:absolute;

    bottom:60px;

    left:50%;

    transform:translateX(-50%);
}
.grid{
    display:grid;
    gap:10px;
}

.radio-group{

    border:none;

    margin-bottom:22px;

}

.radio-group legend{

    margin-bottom:20px;

    font-size:14px;

    text-transform:uppercase;

    letter-spacing:.08em;

    color:#555;

}

.radio-group label{

    display:block;

    margin-bottom:16px;

    cursor:pointer;

}

.checkbox-group{
    border:none;
    margin-bottom:10px;
    width: 300px;

}

.checkbox-group legend{

    font-family: 'Roboto', sans-serif;

    margin-bottom:20px;

    font-size:14px;

    text-transform:uppercase;

    letter-spacing:.08em;

    color:#555;

    font-weight: 600;

}

.lowercase-legend legend{
    text-transform: none;
    font-weight: 100;
}

.checkbox-group label{

    display:flex;
    align-items:center;
    gap:8px;

    text-transform: uppercase;

    margin-bottom:5px;

    cursor:pointer;
    font-weight: 100;

}


.helper-text{

    margin-top:8px;

    font-size:.85rem;

    color:var(--secondary);

    line-height:1.5;

}

.required{

    color:var(--accent);

    margin-left:3px;

    font-weight:600;

}

footer{

    display:flex;

    justify-content:space-between;

    padding:40px;

    width:min(100%, 920px);
    margin:0 auto;

}

.checkbox-group label{

    display:flex;

    align-items:flex-start;

    gap:10px;

    text-transform:uppercase;

    cursor:pointer;

}

.hidden{

    display:none;

}
.hidden-input{
    margin-top:12px;
}

.other-option{

    display:flex;

    flex-direction:column;

    gap:10px;

}



.image-card label{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:.5rem;

    width:100%;
}


.image-card{
    width:100%;

    display:flex;
    flex-direction:column;
    align-items:center;

    text-align:center;

    padding:10px;
    /* The card is a layout wrapper; the image itself is the visual element. */
    border:none;
    border-radius:0;
}

/* Keep native checkboxes aligned consistently with their label text. */
.checkbox-group input[type="checkbox"],
.three-column input[type="checkbox"]{
    margin:0;
    flex:0 0 auto;
}

.image-card img{
    width:100%;
    max-width:none;
    height:auto;
    aspect-ratio:4 / 3;
    object-fit:cover;
    border-radius:8px;
    margin-bottom:18px;
}

.card-footer{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:.5rem;

    width:100%;
}

.image-card input[type="checkbox"] {
    width: auto;
    min-height: auto;
    margin: 0;
}

.image-card input[type="text"] {

    margin-top: 12px;

    text-transform: uppercase;

}

.image-card span {
    margin: 0;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.image-info {

    display: flex;
    align-items: center;
    gap: 10px;

}

.other-placeholder{
    width:100%;
    height:auto;
    aspect-ratio:4 / 3;

    display:flex;
    justify-content:center;
    align-items:center;

    border:2px dashed #D8D8D8;
    border-radius:8px;

    color:#888;

    margin-bottom:12px;

}


/* ==========================================
   RESET
========================================== */


/* ==========================================
   VARIABLES
========================================== */


/* ==========================================
   TYPOGRAPHY
========================================== */


/* ==========================================
   LAYOUT
========================================== */


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


/* ==========================================
   PROGRESS BAR
========================================== */


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


/* ==========================================
   BUTTONS
========================================== */


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

@media (max-width: 900px){
    .stepText{width:100%;}
    header,main,footer{padding-left:28px;padding-right:28px;}
    .three-column,.image-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
    .question-inline{grid-template-columns:minmax(120px, 160px) minmax(0,1fr);}
    .question-inline input{width:100%;}
}

.image-grid > .image-card{
    min-width:0;
}

.step .image-grid{width:100%;}

/* Paso 5: use each card's full width so the image details remain visible. */
.style-step .image-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
    row-gap:1rem;
    column-gap:0;
    width:100%;
    justify-items:stretch;
}

.style-step .image-card{
    /* Reduce inner whitespace so each image can use more of its column. */
    padding:10px;
    border:none;
    border-radius:0;
    width:100%;
    align-items:stretch;
}

.style-step .image-card img,
.style-step .other-placeholder{
    width:100%;
    max-width:none;
    height:auto;
    aspect-ratio:4 / 3;
}

.style-step .image-card img{display:block;}

.three-column > .checkbox-group{
    width:auto;
    min-width:0;
}

/* Prevent the last page action from colliding with navigation. */
.step:last-child #submitBtn{
    display:none;
}

/* Keep the final actions in the same left/right arrangement as navigation. */
footer #previous{order:1;}
footer #submitBtn{order:2;}
footer #next{order:3;}

@media (max-width: 680px){
    body{font-size:15px;}
    header,main,footer{width:100%;padding-left:18px;padding-right:18px;}
    header{padding-top:22px;padding-bottom:8px;}
    main{padding-top:24px;padding-bottom:24px;}

    /* The approved cover composition stays intact; only its scale adapts. */
    .cover-page{width:100%;margin-left:0;}
    .cover-header{padding:.75rem 12px;}
    .cover-logo{width:min(250px, 78vw);max-width:100%;}
    .cover-hero{height:calc(100svh - 92px);min-height:540px;}
    .cover-image{max-width:100%;object-position:center 65%;}
    .cover-info{top:28px;width:calc(100% - 32px);display:grid;gap:3px;text-align:center;}
    .cover-info a,.cover-info span{font-size:.72rem;overflow-wrap:anywhere;}
    .cover-content{top:135px;width:calc(100% - 32px);}
    .cover-title{font-size:clamp(1.65rem,8vw,2.35rem);letter-spacing:.08em;line-height:1.15;white-space:normal;}
    #coverstart{bottom:34px;width:calc(100% - 36px);max-width:360px;padding:16px 14px;white-space:normal;}

    .branding{align-items:center;gap:18px;margin-bottom:28px;text-align:center;}
    .branding-text{min-width:0;align-items:center;}
    .branding-text h1{font-size:15px;letter-spacing:.2em;overflow-wrap:anywhere;}
    .branding-text h2{font-size:11px;}
    .branding-photo{width:110px;height:92px;max-width:36vw;}
    .questionnaire-date{justify-content:center;flex-wrap:wrap;}
    h3,.section-title{text-align:center;line-height:1.35;}

    .two-column,.three-column,.image-grid,.form-grid{grid-template-columns:1fr;column-gap:0;}
    .question-inline{grid-template-columns:1fr;gap:6px;margin-bottom:22px;}
    .question-inline label{line-height:1.45;}
    .question-inline input,.question input,.question textarea,.questionDetalles input,.questionDetalles textarea{width:100%;max-width:100%;min-width:0;}
    input[type="text"],input[type="email"],input[type="tel"],input[type="date"],textarea{font-size:16px;}
    .checkbox-group{width:100%;max-width:100%;}
    .checkbox-group label,.radio-group label,.radio-group-inline label{min-height:42px;align-items:center;line-height:1.35;}
    .radio-group-inline{flex-wrap:wrap;gap:12px 24px;}
    .image-card{max-width:360px;margin:0 auto;padding:16px;}
    .image-card img,.other-placeholder{width:100%;max-width:280px;height:auto;aspect-ratio:9/7;}

    footer{justify-content:center;gap:12px;flex-wrap:wrap;padding-top:24px;padding-bottom:30px;}
    footer button{flex:1 1 150px;max-width:260px;padding:15px 18px;}
    #submitBtn{display:block;width:100%;max-width:360px;margin:28px auto 0;padding:17px 20px;}
    .toast{max-width:calc(100vw - 32px);}
}

@media (max-width: 420px){
    .branding{flex-direction:column-reverse;}
    .branding-photo{width:150px;max-width:65vw;height:100px;}
    footer button{max-width:none;width:100%;}
}