/* Recreación sin librerías de https://new.kaloni.com/clinica-injerto-de-cabello-mexico */
:root {
  --primary-dark: #0b2545;
  --brand-blue: #13467f;
  --accent-blue: #446ff7;
  --soft-blue: #f0f4f8;
  --light-gray: #d1d5db;
  --border-gray: #e5e7eb;
  --body-color: #212529;
  --muted: rgba(33, 37, 41, .75);
  --transition: .3s cubic-bezier(.25, .8, .25, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font: 400 16px/1.5 "Segoe UI", system-ui, -apple-system, sans-serif; color: var(--body-color); background: #fff; -webkit-tap-highlight-color: transparent; }
button, input, select { margin: 0; font: inherit; }
button { cursor: pointer; }
button, input, select { -webkit-tap-highlight-color: transparent; }
button:disabled { cursor: wait; opacity: .65; }
button:focus-visible, a:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--accent-blue); outline-offset: 4px; }
input, select { caret-color: var(--accent-blue); }
::selection { background: #cbd8ff; color: var(--primary-dark); }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { line-height: 1.2; font-weight: 700; }
p { margin-bottom: 16px; }
img, svg { vertical-align: middle; }
img { max-width: 100%; }
iframe { border: 0; }
a { color: #0d6efd; }
[hidden] { display: none !important; }
.landing { width: 100%; overflow-x: hidden; }
.container { width: 100%; padding-inline: 12px; margin-inline: auto; }
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }

/* El fondo contiene la composición y los textos publicitarios originales. */
.hero { position: relative; width: 100%; min-height: 75vh; background: url("assets/images/banner-desktop.png") center / cover no-repeat; display: flex; align-items: flex-start; }
.hero-container { padding: 0; height: 0; }
.hero-row { display: flex; padding-block: 48px; }
.hero-form-column { width: 50%; margin-left: 50%; padding-inline: 16px; display: flex; flex-direction: column; align-items: flex-end; }
.form-card { background: #fff; border: 1px solid #f8f9fa; border-radius: 16px; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25); color: var(--body-color); }
.hero-form-card { width: 100%; max-width: 500px; padding: 24px; }
.hero-form-heading { text-align: center; margin-bottom: 24px; }
.consultation-badge { display: inline-block; padding: 8px 16px; margin-bottom: 8px; border-radius: 50rem; background: rgba(68, 111, 247, .1); color: #0d6efd; font-size: 12px; font-weight: 700; line-height: 1; text-transform: uppercase; }
.hero-form-heading h1 { font-size: calc(20.4px + .3vw); margin-bottom: 8px; }
.hero-form-heading p { margin-bottom: 0; color: var(--muted); font-size: 14px; }
.form-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.field { grid-column: 1 / -1; min-width: 0; }
.half-field { grid-column: auto; }
.field > label { display: inline-block; margin-bottom: 8px; color: var(--muted); font-size: 14px; font-weight: 600; }
.field input:not([type="checkbox"]), .field select { display: block; width: 100%; border: 1.5px solid var(--border-gray); border-radius: 10px; padding: 7px 5px; background-color: #fcfdfe; font-size: 12px; font-weight: 400; line-height: 1.5; color: var(--body-color); transition: border-color var(--transition), box-shadow var(--transition), background-color var(--transition); appearance: none; }
.field input::placeholder { color: var(--muted); opacity: 1; }
.field select { padding-right: 36px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px 12px; }
.field input:not([type="checkbox"]):focus, .field select:focus { border-color: var(--accent-blue); outline: 0; background-color: #fff; box-shadow: 0 0 0 4px rgba(68, 111, 247, .15); }
.terms-control { display: flex; align-items: flex-start; gap: 8px; min-height: 24px; margin-bottom: 2px; }
.terms-control input { flex: 0 0 16px; width: 16px; height: 16px; margin-top: 4px; border: 1px solid #dee2e6; border-radius: 4px; appearance: none; background: #fff; }
.terms-control input:checked { background: #0d6efd url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3E%3C/svg%3E") center / contain no-repeat; border-color: #0d6efd; }
.terms-control input:focus-visible { outline: 0; box-shadow: 0 0 0 4px rgba(68, 111, 247, .2); border-color: var(--accent-blue); }
.terms-control label { color: var(--muted); font-size: 14px; }
.terms-control a { font-weight: 600; text-decoration: none; }
.terms-control a:hover { text-decoration: underline; }
.submit-field { grid-column: 1 / -1; margin-top: 8px; display: grid; }
.submit-button { width: 100%; display: flex; align-items: center; justify-content: center; padding: 16px; border: 0; border-radius: 12px; color: #fff; background: var(--accent-blue); box-shadow: 0 4px 12px rgba(68, 111, 247, .3); font-size: 16px; font-weight: 700; line-height: 1.5; transition: background-color var(--transition), box-shadow var(--transition); }
.submit-button:hover { background: var(--brand-blue); box-shadow: 0 6px 20px rgba(19, 70, 127, .4); }
.field-error { display: none; margin-top: 4px; font-size: 14px; color: #dc3545; }
.field.is-invalid .field-error { display: block; }
.field.is-invalid input, .field.is-invalid select { border-color: #dc3545; }
.form-status { margin: 16px 0 0; padding: 12px; border-radius: 8px; color: var(--primary-dark); background: var(--soft-blue); font-size: 14px; }
.form-status.is-error { color: #842029; background: #f8d7da; }

.section { padding-block: 72px; background: #fff; }
.soft-section { background: var(--soft-blue); }
.section-heading { margin-bottom: 48px; text-align: center; }
.section-heading h2, .booking-copy > h2 { font-size: calc(22px + 1.5vw); margin-bottom: 8px; color: var(--primary-dark); }
.heading-divider { width: 60px; height: 4px; background: var(--accent-blue); border-radius: 50rem; margin-inline: auto; }
.process-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.process-card { padding: 24px; text-align: center; display: flex; flex-direction: column; align-items: center; background: #fff; border: 1px solid var(--border-gray); border-radius: 16px; transition: transform var(--transition), box-shadow var(--transition); }
.process-card:hover { transform: translateY(-8px); box-shadow: 0 12px 24px rgba(11, 37, 69, .1); }
.process-icon { width: 70px; height: 70px; padding: 16px; margin-bottom: 24px; border-radius: 50%; background: var(--soft-blue); display: flex; align-items: center; justify-content: center; }
.process-icon img { max-height: 40px; width: auto; height: auto; }
.process-card h3 { font-size: calc(20.4px + .3vw); margin-bottom: 8px; color: var(--primary-dark); }
.process-card p { margin-bottom: 0; color: var(--muted); }

.carousel { position: relative; }
.carousel-slides { position: relative; width: 100%; overflow: hidden; }
.results-carousel .carousel-slide { margin-inline: -12px; }
.carousel-slide.is-entering { animation: slide-in .6s ease-in-out; }
.video-column { width: 33.33333333%; padding-inline: 12px; margin-inline: auto; }
.video-card { height: 580px; background: #000; border-radius: 16px; box-shadow: 0 16px 48px rgba(0, 0, 0, .175); }
.video-card iframe { width: 100%; height: 100%; display: block; background: #000; }
.carousel-control { position: absolute; top: 0; bottom: 0; z-index: 1; display: flex; align-items: center; justify-content: center; width: 15%; padding: 0; border: 0; background: none; opacity: .5; transition: opacity .15s ease; }
.carousel-control:hover, .carousel-control:focus-visible { opacity: .9; }
.carousel-prev { left: 0; }
.carousel-next { right: 0; }
.carousel-arrow { display: flex; align-items: center; justify-content: center; width: 45px; height: 45px; border-radius: 50%; background: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, .15); }
.carousel-arrow svg { width: 32px; height: 32px; fill: #000; }
.testimonial-slides { max-width: 960px; margin-inline: auto; padding-inline: 48px; }
.testimonial-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 0; }
.testimonial-card { min-width: 0; padding-inline: 8px; display: flex; flex-direction: column; transition: transform var(--transition); }
.testimonial-card:hover { transform: translateY(-4px); }
.speech-bubble { position: relative; margin-bottom: 16px; padding: 24px; border: 1px solid rgba(0, 0, 0, .05); border-radius: 16px; background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, .075); }
.speech-bubble::after { position: absolute; bottom: -10px; left: 35px; content: ""; border-width: 10px 10px 0; border-style: solid; border-color: #fff transparent; }
/* Los iconos de estrellas no se renderizan en la referencia; se conserva su espacio. */
.rating-space { margin-bottom: 8px; }
.speech-bubble p { color: var(--muted); font-style: italic; margin-bottom: 0; }
.patient { display: flex; align-items: center; padding-left: 16px; margin-top: 8px; }
.avatar { flex-shrink: 0; width: 48px; height: 48px; margin-right: 16px; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: #fff; font-size: 14px; font-weight: 700; box-shadow: 0 2px 4px rgba(0, 0, 0, .075); }
.avatar-brand { background: var(--brand-blue); }
.avatar-accent { background: var(--accent-blue); }
.avatar-gray { background: #6c7a89; }
.patient h3 { font-size: 16px; margin-bottom: 0; color: var(--primary-dark); }
.patient small { color: var(--muted); font-size: 14px; }

.faq-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.faq-item { margin-bottom: 16px; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 4px rgba(0, 0, 0, .075); }
.faq-item h3 { margin: 0; font-size: 16px; }
.faq-button { display: flex; align-items: center; width: 100%; gap: 20px; padding: 16px 20px; background: #fff; border: 0; color: var(--primary-dark); text-align: left; font-size: 16px; font-weight: 600; line-height: 1.2; transition: background-color .15s, color .15s; }
.faq-button svg { flex-shrink: 0; width: 20px; height: 20px; margin-left: auto; fill: none; stroke: #212529; stroke-width: 1.4; transition: transform .2s; }
.faq-button[aria-expanded="true"] { color: #fff; background: var(--primary-dark); }
.faq-button[aria-expanded="true"] svg { stroke: #fff; transform: rotate(-180deg); }
.faq-button:focus-visible { outline-offset: -3px; }
.faq-answer { padding: 16px 20px; color: var(--muted); }

.booking-section { color: #fff; background: linear-gradient(135deg, #0b2545 0%, #13467f 100%); }
.booking-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; align-items: center; }
.booking-copy > h2 { margin-bottom: 24px; color: #fff; }
.booking-intro { margin-bottom: 24px; font-size: 20px; font-weight: 300; color: var(--light-gray); }
.booking-benefit { display: flex; align-items: flex-start; margin-bottom: 24px; padding-left: 16px; }
.booking-benefit h3 { margin-bottom: 4px; font-size: 20px; }
.booking-benefit p { margin-bottom: 0; font-size: 14px; color: var(--light-gray); }
.booking-form-card { padding: 48px; }
.booking-form-title { margin-bottom: 16px; color: var(--primary-dark); text-align: center; font-size: calc(20.8px + .6vw); }

.contact-widget { position: fixed; right: 10px; bottom: 70px; z-index: 100; width: 70px; height: 70px; }
.chat-toggle { display: block; width: 70px; height: 70px; border: 0; border-radius: 50%; background: transparent url("assets/images/whatsapp.png") center / contain no-repeat; box-shadow: 3px 3px 7px gray; }
.chat-panel { position: absolute; bottom: 100%; right: 10%; display: flex; flex-direction: column; width: 400px; height: 400px; border-radius: 15px; background: #e7eefc; box-shadow: 0 2px 5px rgba(0, 0, 0, .3); overflow: hidden; }
.chat-header { display: flex; align-items: center; justify-content: space-between; padding: 15px 10px; background: #283353; color: #fff; }
.chat-header p { margin: 0; }
.chat-header button { padding: 0; border: 0; background: transparent; color: inherit; }
.chat-header svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.chat-content { display: flex; flex-direction: column; justify-content: space-between; height: 100%; min-height: 0; padding: 12px; }
.doctor-message { display: flex; align-items: flex-start; }
.doctor-message > img { flex-shrink: 0; width: 60px; height: auto; margin-right: 10px; }
.message-bubble { max-width: 80%; padding: 10px 15px; border-radius: 20px; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); }
.message-bubble p { margin-bottom: 16px; }
.chat-input-row { display: flex; align-items: center; margin-top: 10px; }
.chat-input-row input { min-width: 0; flex: 1; padding: 10px; margin-right: 5px; border: 1px solid #ccc; border-radius: 20px; background: #fff; }
.chat-input-row button { padding: 0; border: 0; background: transparent; color: #283353; }
.chat-input-row svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.chat-response { margin: 12px 0; padding: 10px; border-radius: 10px; background: #fff; color: #283353; font-size: 14px; overflow-y: auto; }

@keyframes slide-in { from { transform: translateX(var(--slide-from, 100%)); } to { transform: translateX(0); } }

@media (min-width: 576px) { .container { max-width: 540px; } }
@media (min-width: 768px) { .container { max-width: 720px; } }
@media (min-width: 992px) { .container { max-width: 960px; } }
@media (min-width: 1200px) {
  .container { max-width: 1140px; }
  .section-heading h2, .booking-copy > h2 { font-size: 40px; }
  .hero-form-heading h1, .process-card h3 { font-size: 24px; }
  .booking-form-title { font-size: 28px; }
}
@media (min-width: 1400px) { .container { max-width: 1320px; } }

@media (max-width: 991px) {
  .hero { background-image: url("assets/images/banner-mobile.png"); background-position: center top; background-size: contain; }
  .hero-container { height: 100%; min-height: 100vh; }
  .hero-form-column { width: 100%; margin-top: 500px; margin-left: 0; }
  .booking-grid { grid-template-columns: minmax(0, 1fr); }
  .video-column { width: 41.66666667%; }
  .testimonials-carousel > .carousel-control { display: none; }
  .contact-widget { right: 15px; }
}
@media (max-width: 767px) {
  .hero-form-column { padding-inline: 8px; }
  .process-grid { grid-template-columns: minmax(0, 1fr); }
  .faq-grid { grid-template-columns: minmax(0, 1fr); }
  .video-column { width: 66.66666667%; }
  .testimonial-slides { padding-inline: 4px; }
  .testimonial-pair { grid-template-columns: minmax(0, 1fr); }
  .secondary-testimonial { display: none; }
}
@media (max-width: 575px) {
  .half-field { grid-column: 1 / -1; }
  .booking-form-card { padding: 24px; }
  .video-column { width: 91.66666667%; }
}
@media (max-width: 540px) {
  .contact-widget { bottom: 15%; }
  .chat-panel { position: fixed; right: 5%; bottom: 8%; width: 70%; height: 55%; max-height: 80vh; border-radius: 0; box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}