/* ==========================================================================
   Theme override — original site colors (from /respaldo/css/style.css):
   brand pink #E87A99, teal accent #059993/#00a79e, ink #2b2e33, copyright
   #D0DBDF — rebuilt on top of Tailwind CDN with Poppins/Playfair Display.
   Loaded after style.css / responsive.css so it wins on shared selectors.
   ========================================================================== */

:root {
	--brand: #E87A99;        /* original primary pink */
	--brand-hover: #d9628a;
	--brand-dark: #c04d76;   /* for text/accents needing more contrast on white */
	--brand-light: #f5adc4;
	--brand-tint: #fce7ee;
	--teal: #059993;         /* original link/accent color */
	--teal-hover: #04807b;
	--btn-hover-teal: #00a79e; /* original .btn-secondary:hover color */
	--ink: #2b2e33;          /* original body/heading text color */
	--page-bg: #FFD1DC;      /* original <body style="background-color:#FFD1DC"> */
	--copyright-bg: #D0DBDF;
}

html { scroll-behavior: smooth; }

/* ---- Robust nav visibility ------------------------------------------------
   The show/hide logic below is plain CSS in a normal stylesheet, so the
   menu still works correctly even if the Tailwind CDN <script> is slow,
   blocked, or fails to load on a phone. Tailwind utility classes (colors,
   gap, alignment, etc.) still apply on top of this when Tailwind is up. */
.nav-topbar { display: none; }
.nav-toggle { display: inline-flex; }
.nav-desktop { display: none; }
.nav-cta-desktop { display: none; }
.nav-mobile { display: none; }
.nav-mobile.is-open { display: block; }
.nav-mobile-sub { display: none; }
.nav-mobile-sub.is-open { display: block; }

@media (min-width: 768px) {
	.nav-topbar { display: block; }
}
@media (min-width: 1024px) {
	.nav-toggle { display: none; }
	.nav-mobile,
	.nav-mobile.is-open { display: none !important; }
	.nav-desktop {
		display: flex;
		align-items: center;
		gap: 32px;
	}
	.nav-cta-desktop {
		display: inline-flex;
		align-items: center;
		gap: 8px;
	}
}

/* Services dropdown: plain :hover/:focus reveal so it works even without
   Tailwind's group-hover utilities. */
.nav-dropdown { display: none; }
.nav-dropdown-wrap:hover .nav-dropdown,
.nav-dropdown-wrap:focus-within .nav-dropdown {
	display: block;
}

/* ---- Floating WhatsApp buttons -------------------------------------------
   Plain-CSS fallback so they stay pinned to the corner and legible even if
   the Tailwind CDN script fails to load. */
.whatsapp-float {
	position: fixed;
	right: 16px;
	bottom: 16px;
	z-index: 999;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 12px;
}
.whatsapp-btn {
	display: flex;
	align-items: center;
	gap: 8px;
	background-color: #25D366;
	color: #fff;
	font-family: 'Poppins', sans-serif;
	font-weight: 600;
	font-size: 14px;
	border-radius: 999px;
	padding: 12px 20px 12px 16px;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
	text-decoration: none;
}
.whatsapp-btn:hover { background-color: #1ebe5b; color: #fff; }
.whatsapp-btn .fa { font-size: 20px; }

body {
	font-family: 'Poppins', sans-serif;
	font-weight: 400;
	font-size: 17px;
	line-height: 1.7;
	color: var(--ink);
	background-color: var(--page-bg);
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Poppins', sans-serif;
	font-weight: 600;
	color: var(--ink);
}

/* Paragraph/button text is pinned at 17px (see body); every heading step
   below scales up proportionally from that same 17px base. */
h1 { font-size: 48px; }
h2 { font-size: 37px; }
h3 { font-size: 28px; }
h4 { font-size: 23px; }
h5 { font-size: 20px; }
h6 { font-size: 17px; }

a { color: var(--teal); text-decoration: none; }
a:hover, a:focus { color: var(--teal-hover); }

/* ---- Eyebrow / sub-title label ------------------------------------------ */
.sub-title {
	display: inline-block;
	font-family: 'Playfair Display', serif;
	font-style: italic;
	font-weight: 500;
	font-size: 20px;
	color: var(--brand);
	margin-bottom: 8px;
}

/* ---- Page title (h3/h4.main-heading-1) -------------------------------- */
.main-heading-1 {
	position: relative;
	display: inline-block;
	padding-bottom: 18px;
	margin-bottom: 40px;
	font-weight: 600;
	font-size: 43px;
	color: var(--ink);
	border-bottom: none;
}
.main-heading-1:after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 64px;
	height: 4px;
	border-radius: 999px;
	background-color: var(--brand);
}

/* ---- Intro card (section.profile-box) --------------------------------- */
.profile-box {
	position: relative;
	margin-top: 0;
	margin-bottom: 48px;
	padding: 8px;
	color: var(--ink);
	font-weight: 400;
	background-color: #fff;
	border: 1px solid var(--brand-tint);
	border-radius: 24px;
	box-shadow: 0 10px 30px -14px rgba(232, 122, 153, 0.35);
}
.profile-box:before { display: none; }
.profile-box img.img-responsive {
	border-radius: 18px;
	object-fit: cover;
	width: 100%;
}
.profile-box .content,
.profile-box .content#contenido {
	padding: 24px 32px;
}
.profile-box .content h4,
.profile-box .content h5 {
	margin-top: 0;
	margin-bottom: 12px;
	font-size: 24px;
	font-weight: 600;
	color: var(--brand-dark);
}
.profile-box .content p { margin-bottom: 16px; }
.profile-box .content p:last-of-type { margin-bottom: 0; }

@media (max-width: 767px) {
	.profile-box .content { padding: 24px 8px 8px; }
}

/* ---- Body copy inside content areas ------------------------------------ */
#contenido,
.content,
span#contenido,
.main-container p {
	font-family: 'Poppins', sans-serif;
	font-weight: 400;
	font-size: 17px;
	line-height: 1.85;
	color: var(--ink);
	text-align: justify;
}

/* Sub-headings that appear inline within the long-form content blocks
   (e.g. each disease/method name inside a page). */
#contenido h4, #contenido h5, #contenido h6,
.content h4, .content h5, .content h6,
span#contenido h4, span#contenido h5, span#contenido h6 {
	margin-top: 40px;
	margin-bottom: 6px;
	font-weight: 600;
	color: var(--brand-dark);
}
#contenido h4:first-child, .content h4:first-child { margin-top: 0; }

/* The little <hr> under each sub-heading becomes a short accent rule
   instead of a full-width grey line. */
#contenido hr, .content hr, span#contenido hr {
	width: 48px;
	height: 3px;
	margin: 0 0 16px;
	background-color: var(--brand-light);
	border: none;
	border-radius: 999px;
}

/* ---- Buttons ------------------------------------------------------------ */
.btn-secondary,
input.form-control,
textarea.form-control,
button {
	font-family: 'Poppins', sans-serif;
}
.btn-secondary {
	background-color: var(--brand);
	color: #fff;
	font-weight: 600;
	font-size: 17px;
	border-radius: 999px;
	border: none;
	padding: 10px 22px;
	box-shadow: 0 5px 20px rgba(232, 122, 153, 0.3);
	transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
/* Original template quirk: the pink button turns teal on hover — keep it. */
.btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active, .btn-secondary.active {
	background-color: var(--btn-hover-teal);
	color: #fff;
	box-shadow: 0 8px 24px rgba(0, 167, 158, 0.35);
}

/* ---- Homepage: notification / branch info band -------------------------- */
.notification-area {
	background-color: var(--brand);
	text-align: center;
	padding: 48px 0;
}
.notification-area .block { color: #fff; padding: 24px; font-size: 17px; }
.notification-area .block h2 { color: #fff; margin-bottom: 8px; }
.notification-area .block h2 .fa { font-size: 30px; color: #fff; }
.notification-area .block h4 { color: #fff; font-weight: 600; margin-bottom: 14px; }
.notification-area .block.lite {
	background-color: #fff;
	color: var(--ink);
	border-radius: 20px;
	padding: 28px 24px 8px;
}
.notification-area .block.lite h2 .fa { color: var(--brand); }

/* ---- Homepage: welcome + service cards ---------------------------------- */
.welcome { margin-top: 8px; margin-bottom: 30px; }
.welcome h3.text-uppercase {
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--ink);
}
.welcome > hr {
	width: 64px;
	height: 4px;
	margin: 12px auto 24px;
	background-color: var(--brand);
	border: none;
	border-radius: 999px;
}

.panel-smart.blog {
	border-radius: 24px;
	overflow: hidden;
	background-color: #fff;
	box-shadow: 0 8px 24px -10px rgba(43, 46, 51, 0.15);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.panel-smart.blog:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 32px -14px rgba(232, 122, 153, 0.4);
}
.panel-smart.blog .panel-heading {
	background-color: var(--brand);
	font-weight: 600;
	font-size: 21px;
	text-transform: none;
}
.panel-smart .panel-heading:before { display: none; }
.panel-smart.blog .panel-body {
	background-color: #fff;
	padding: 20px 24px 24px;
}
.panel-smart.blog .panel-body img.img-responsive {
	border-radius: 14px;
	margin-bottom: 8px;
}
.panel-smart.blog .panel-body .texto {
	color: var(--ink);
	line-height: 1.7;
}

/* ---- Footer -------------------------------------------------------------- */
.footer-area {
	background-color: var(--brand);
}
.footer-area, .footer-area a { color: #fff; }
.footer-area h2, .footer-area h4 { color: #fff; }
.copyright { background-color: var(--copyright-bg); color: #000; }

/* ---- Contact form ---------------------------------------------------------*/
.contact-form .form-control {
	border-radius: 12px;
	border: 1px solid var(--brand-light);
	font-family: 'Poppins', sans-serif;
	font-size: 17px;
}
.contact-form .form-control:focus {
	border-color: var(--brand);
	box-shadow: 0 0 0 3px rgba(232, 122, 153, 0.2);
}
