/* ==================================================
CONFIGURACIÓN GENERAL
================================================== */

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

html {
min-height: 100%;
}

body {
min-height: 100vh;
font-family: Arial, Helvetica, sans-serif;
color: #1d2d38;
background:
radial-gradient(
circle at top left,
rgba(101, 180, 176, 0.13),
transparent 38%
),
linear-gradient(
135deg,
#f7fafb 0%,
#edf4f6 100%
);
}

/* ==================================================
CONTENEDOR PRINCIPAL
================================================== */

.thank-you-page {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 40px 24px;
}

/* ==================================================
TARJETA
================================================== */

.thank-you-card {
position: relative;
width: 100%;
max-width: 680px;
padding: 54px 44px 46px;
overflow: hidden;
text-align: center;
background-color: #ffffff;
border: 1px solid rgba(26, 65, 82, 0.08);
border-radius: 24px;
box-shadow:
0 24px 65px rgba(26, 65, 82, 0.10),
0 4px 14px rgba(26, 65, 82, 0.05);
}

.thank-you-card::before {
content: "";
position: absolute;
top: 0;
left: 50%;
width: 110px;
height: 4px;
border-radius: 0 0 8px 8px;
background: linear-gradient(
90deg,
#2e7186,
#68b3ae
);
transform: translateX(-50%);
}

/* ==================================================
ICONO DE CONFIRMACIÓN
================================================== */

.confirmation-icon {
width: 82px;
height: 82px;
margin: 0 auto 25px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: linear-gradient(
135deg,
#2e7186 0%,
#68b3ae 100%
);
box-shadow:
0 13px 28px rgba(46, 113, 134, 0.22);
}

.confirmation-icon svg {
width: 39px;
height: 39px;
fill: #ffffff;
}

/* ==================================================
TEXTOS
================================================== */

.clinic-name {
margin-bottom: 13px;
color: #56848f;
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
}

.thank-you-card h1 {
margin-bottom: 17px;
color: #173646;
font-size: clamp(1.8rem, 4vw, 2.35rem);
font-weight: 700;
line-height: 1.2;
}

.thank-you-message {
max-width: 515px;
margin: 0 auto;
color: #586b76;
font-size: 1.08rem;
line-height: 1.75;
}

/* ==================================================
BOTONES
================================================== */

.thank-you-actions {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 13px;
margin-top: 32px;
}

.thank-you-button {
display: inline-flex;
min-height: 50px;
align-items: center;
justify-content: center;
padding: 13px 25px;
border-radius: 999px;
font-size: 0.97rem;
font-weight: 700;
line-height: 1.2;
text-decoration: none;
transition:
transform 0.25s ease,
box-shadow 0.25s ease,
background-color 0.25s ease,
border-color 0.25s ease;
}

.thank-you-button:hover {
transform: translateY(-2px);
}

.thank-you-button:focus-visible {
outline: 3px solid rgba(46, 113, 134, 0.28);
outline-offset: 4px;
}

.thank-you-button-primary {
color: #ffffff;
background: linear-gradient(
135deg,
#2e7186 0%,
#68b3ae 100%
);
box-shadow:
0 10px 22px rgba(46, 113, 134, 0.18);
}

.thank-you-button-primary:hover {
box-shadow:
0 14px 28px rgba(46, 113, 134, 0.25);
}


/* ==================================================
DISEÑO PARA MÓVILES
================================================== */

@media (max-width: 600px) {

.thank-you-page {
padding: 24px 16px;
}

.thank-you-card {
padding: 43px 23px 35px;
border-radius: 20px;
}

.confirmation-icon {
width: 72px;
height: 72px;
margin-bottom: 22px;
}

.confirmation-icon svg {
width: 34px;
height: 34px;
}

.thank-you-message {
font-size: 1rem;
}

.thank-you-actions {
flex-direction: column;
gap: 10px;
margin-top: 27px;
}

.thank-you-button {
width: 100%;
}

}

/* ==================================================
ACCESIBILIDAD: REDUCIR ANIMACIONES
================================================== */

@media (prefers-reduced-motion: reduce) {

.thank-you-button {
transition: none;
}

.thank-you-button:hover {
transform: none;
}

}