/*
 * Estilos exclusivos de la pagina Membership (template-membership.php).
 * Solo se cargan en la pagina que usa esta plantilla.
 */

body.page-template-template-membership-php .content_wrap {
	width: 100%;
}

/* ============================================================= */
/* Hero                                                           */
/* ============================================================= */

.hv-membership-hero {
	display: flex;
	align-items: stretch;
	flex-wrap: wrap;
	min-height: 620px;
}

.hv-membership-hero__text {
	width: 50%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	box-sizing: border-box;
	padding: 60px clamp(24px, 6vw, 80px);
}

.hv-membership-hero__title {
	margin: 0 0 20px;
	color: #607064 !important;
	font-size: clamp(1.95rem, 5.2vw, 3.25rem) !important;
	line-height: 1.2;
	font-weight: 400 !important;
}

.hv-membership-hero__title em {
	display: block;
	font-style: italic;
	font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
	color: #4a6b58 !important;
}

.hv-membership-hero__tagline {
	margin: 0 0 24px;
	font-style: italic;
	font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
	color: #b8914b !important;
	font-size: clamp(1.2rem, 2.8vw, 1.6rem) !important;
}

.hv-membership-hero__paragraph {
	margin: 0 0 20px;
	color: #4F4F4F !important;
	font-size: clamp(1rem, 2vw, 1.1rem) !important;
	line-height: 1.6;
}

.hv-membership-hero__media {
	width: 50%;
	position: relative;
}

.hv-membership-hero__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top;
}

@media (max-width: 900px) {

	.hv-membership-hero {
		flex-direction: column-reverse;
	}

	.hv-membership-hero__text,
	.hv-membership-hero__media {
		width: 100%;
	}

	.hv-membership-hero__media {
		min-height: 320px;
		height: 50vh;
	}

	.hv-membership-hero__text {
		text-align: center;
		padding: 44px 24px 48px;
	}
}

/* ============================================================= */
/* Membership plans (I / II / III)                                */
/* ============================================================= */

.hv-plan {
	padding-top: 90px;
	padding-bottom: 90px;
}

.hv-plan__card {
	background-color: #faf8f2;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
	box-sizing: border-box;
	/* No estirar esta tarjeta con el flex del contenedor: al tener
	 * overflow distinto de visible, el estiramiento puede calcularle
	 * una altura menor que su contenido real y recortarlo. Solo la
	 * imagen (.hv-plan__media) debe estirarse para igualar su alto. */
	align-self: flex-start;
}

/* La imagen se posiciona absoluta dentro de .hv-plan__media, asi no aporta
 * altura propia: la fila (imagen + texto) toma la altura natural del
 * cuadro de texto, y la imagen se estira para igualarla. */
.hv-plan__media {
	position: relative;
	overflow: hidden;
}

.hv-plan__image {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hv-plan__card-bar {
	height: 25px;
}

.hv-plan--green .hv-plan__card-bar {
	background-color: #4a6b58;
}

.hv-plan--gold .hv-plan__card-bar {
	background-color: #b8914b;
}

.hv-plan--rose .hv-plan__card-bar {
	background-color: #d4a89b;
}

/* Variante con barra de acento vertical, pegada al borde izquierdo
 * de la tarjeta, en vez de horizontal arriba. */
.hv-plan--bar-left .hv-plan__card {
	display: flex;
	align-items: stretch;
}

.hv-plan--bar-left .hv-plan__card-bar {
	width: 25px;
	height: auto;
	border-radius: 0;
	flex-shrink: 0;
}

.hv-plan--bar-left .hv-plan__card-body {
	flex: 1;
	min-width: 0;
	align-content: center;
}

.hv-plan__card-body {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(20px, 4vw, 32px);
	padding: clamp(28px, 6vw, 44px) clamp(20px, 5vw, 48px);
	max-width: 1040px;
	margin: 0 auto;
}

.hv-plan__label {
	display: block;
	margin: 0 0 4px;
	color: #8C8A88 !important;
	font-size: 1.05rem !important;
}

.hv-plan__title {
	margin: 0 0 20px;
	color: #27503b !important;
	font-size: clamp(1.6rem, 5vw, 2.05rem) !important;
	font-weight: 400 !important;
	line-height: 1.2;
}

.hv-plan__divider {
	width: 100%;
	height: 1px;
	margin: 0 0 20px;
	border: none;
	background-color: #d8d3c8;
}

.hv-plan__subheading {
	margin: 0 0 8px;
	color: #27503b !important;
	font-size: 1.15rem !important;
	font-weight: 700 !important;
}

.hv-plan__text {
	margin: 0;
	color: #5F5D5A !important;
	font-size: 1.1rem !important;
	line-height: 1.4 !important;
}

.hv-plan__includes-label {
	display: block;
	margin: 0 0 4px;
	color: #27503b !important;
	font-size: 1.15rem !important;
	font-weight: 700 !important;
}

.hv-plan__includes-list {
	margin: 0 0 16px;
}

/* Texto normal (no lista): el reset global del tema padre (style.css:48)
 * aplica font-size, line-height, etc. directamente sobre "p", asi que se
 * fuerzan aqui con !important sin tocar style.css. */
.hv-plan__includes-list p {
	margin: 0;
	color: #5F5D5A !important;
  font-size: 1.1rem !important;
	line-height: 1.4 !important;
}

.hv-plan__insurance {
	margin: 0 0 16px;
	color: #7d7b78 !important;
	font-size: 0.9rem !important;
	font-style: italic;
}

.hv-plan__btn {
	display: inline-block;
	padding: 6px 15px !important;
	border: 1px solid #27503b !important;
	border-radius: 999px !important;
	background-color: transparent !important;
	box-shadow: none !important;
	color: #27503b !important;
	font-size: 1.1rem !important;
	font-weight: 400 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	text-decoration: none !important;
	transition: background-color 0.2s ease;
}

.hv-plan__btn:hover {
	background-color: rgba(74, 107, 88, 0.08) !important;
	color: #27503b !important;
}

/* ---- Membership I: contenida, imagen con esquinas redondeadas ---- */

.hv-plan--contained {
	margin: 0 auto;
	padding-right: clamp(20px, 4vw, 40px);
	display: flex;
	align-items: stretch;
	flex-wrap: wrap;
	gap: clamp(24px, 4vw, 56px);
}

/* La imagen queda pegada al borde del contenedor: sin margin ni padding
 * en ese lado, y solo redondeada en las esquinas que no tocan el borde. */
.hv-plan--contained .hv-plan__media {
	flex: 1 1 420px;
	border-radius: 0 20px 20px 0;
}

.hv-plan--contained .hv-plan__card {
	flex: 1.4 1 480px;
}

/* Centra verticalmente el contenido de la tarjeta cuando la fila queda
 * mas alta que el texto (la barra de color superior se mantiene fija
 * arriba, pegada sin espacio, y el bloque de texto se centra en el
 * espacio restante debajo de ella). */
.hv-plan--contained:not(.hv-plan--bar-left) .hv-plan__card {
	display: flex;
	flex-direction: column;
}

.hv-plan--contained:not(.hv-plan--bar-left) .hv-plan__card-bar {
	flex-shrink: 0;
}

.hv-plan--contained:not(.hv-plan--bar-left) .hv-plan__card-body {
	flex: 1;
	align-content: center;
}

/* Fila un poco mas alta para que la imagen no se vea tan alargada.
 * Se aplica al alto minimo de la tarjeta (no al stretch) para que la
 * imagen, que sigue el alto de la fila, crezca junto con ella. */
@media (min-width: 1001px) {

	.hv-plan--contained .hv-plan__card {
		min-height: clamp(440px, 26vw, 560px);
	}
}

/* Variante con la imagen a la derecha: se invierte el padding del
 * contenedor y el redondeo de esquinas de la imagen. */
.hv-plan--contained.hv-plan--image-right {
	padding-right: 0;
	padding-left: clamp(20px, 4vw, 40px);
}

.hv-plan--contained.hv-plan--image-right .hv-plan__media {
	border-radius: 20px 0 0 20px;
}

@media (max-width: 1000px) {

	/* El umbral se sube a 1000px (no 900px) porque la fila de imagen
	 * (flex-basis 420) + tarjeta (flex-basis 480) + gap + padding
	 * necesita ~980px para caber sin apretarse. Por debajo de eso, sin
	 * este ajuste, la imagen (sin min-width, su contenido es absolute)
	 * se comprimia casi a 0 mientras la tarjeta (con texto real) se
	 * resistia a encoger, haciendo que la imagen "desapareciera" entre
	 * 900 y 960px aprox.
	 * En movil ninguna imagen queda pegada a un borde: se centra todo
	 * con el mismo espacio a ambos costados. */
	.hv-plan--contained,
	.hv-plan--contained.hv-plan--image-right {
		flex-direction: column;
		padding-left: clamp(20px, 4vw, 40px);
		padding-right: clamp(20px, 4vw, 40px);
	}

	.hv-plan--contained .hv-plan__media,
	.hv-plan--contained.hv-plan--image-right .hv-plan__media {
		flex: 0 0 auto;
		align-self: stretch;
		width: 100%;
		max-width: 100%;
		min-height: 320px;
		border-radius: 20px;
	}

	.hv-plan__image {
		object-position: top;
	}

	/* En el DOM de la variante imagen-derecha (Membership II) la tarjeta
	 * va antes que la imagen (porque en escritorio la imagen queda a la
	 * derecha). En movil se fuerza la imagen primero, igual que en las
	 * otras dos secciones. */
	.hv-plan--contained.hv-plan--image-right .hv-plan__media {
		order: -1;
	}

	.hv-plan--contained .hv-plan__card {
		flex: none;
		width: 100%;
		align-self: stretch;
	}

	.hv-plan__card-body {
		grid-template-columns: 1fr;
	}

	.hv-plan--bar-left .hv-plan__card {
		flex-direction: column;
	}

	.hv-plan--bar-left .hv-plan__card-bar {
		width: 100%;
		height: 10px;
	}
}

/* ============================================================= */
/* Nota al pie de las 3 membresias                                */
/* ============================================================= */

.hv-plan-footnote {
	max-width: 780px;
	margin: 0 auto 100px;
	padding: 0 24px;
	text-align: center;
	color: #4F4F4F !important;
	font-size: 1.15rem !important;
	line-height: 1.6;
}

/* ============================================================= */
/* Compare Memberships (tabla comparativa)                        */
/* ============================================================= */

.hv-compare {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 clamp(20px, 4vw, 40px) 48px;
}

.hv-compare__scroll {
	overflow-x: auto;
}

.hv-compare__table {
	min-width: 680px;
	max-width: 900px;
  margin: auto;
}

.hv-compare__header,
.hv-compare__row {
	display: flex;
	align-items: center;
}

.hv-compare__header {
	padding: 0 32px 10px;
}

.hv-compare__header-spacer {
	flex: 1;
}

.hv-compare__col-heading {
	width: 170px;
	flex-shrink: 0;
	text-align: center;
	color: #4a6b58 !important;
	font-size: 1.2rem !important;
}

.hv-compare__row {
	border: 1px solid #e2dfd5;
	border-radius: 999px;
	padding: 13px 28px;
	margin-bottom: 8px;
}

.hv-compare__row-label {
	flex: 1;
	color: #4a6b58 !important;
	font-weight: 600 !important;
	font-size: 1.2rem !important;
}

.hv-compare__cell {
	width: 170px;
	flex-shrink: 0;
	display: flex;
	justify-content: center;
}

.hv-compare__check {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background-color: #3c5646;
}

.hv-compare__check svg {
	display: block;
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}

/* ============================================================= */
/* Your Health Journey Starts Here                                 */
/* ============================================================= */

.hv-journey2 {
	padding: 120px clamp(24px, 6vw, 90px);
	background: #1f3327 url('/wp-content/uploads/2026/04/Clinical-Standards-bg-01.webp') center/cover no-repeat;
}

/* El fondo ocupa todo el ancho de la seccion; el contenido se centra
 * dentro de un ancho maximo para que no quede pegado a un costado en
 * pantallas anchas. */
.hv-journey2__inner {
	max-width: 1000px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 40px;
}

.hv-journey2__text {
	max-width: 560px;
}

.hv-journey2__heading {
	margin: 0 0 20px;
	color: #ffffff !important;
	font-size: clamp(1.8rem, 4vw, 2.6rem) !important;
	font-weight: 400 !important;
	line-height: 1.2;
}

.hv-journey2__heading em {
	display: block;
	font-style: italic;
	font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
	color: #ffffff !important;
}

.hv-journey2__paragraph {
	margin: 0 0 32px;
	color: #f1efe9 !important;
	font-size: 1.3rem !important;
	line-height: 1.7;
}

.hv-journey2__btn {
	display: inline-block;
  padding: 16px 32px;
  background-color: #ffffff;
  border-radius: 999px;
  color: #2f5240 !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.hv-journey2__btn:hover {
	opacity: 0.85;
	color: #27503b !important;
}

.hv-journey2__media {
	flex: 0 0 auto;
	width: min(360px, 40vw);
}

.hv-journey2__media img {
	display: block;
	width: 100%;
	border-radius: 20px;
}

@media (max-width: 960px) {
	.hv-journey2 {
		padding: 60px 24px;
	}

	.hv-journey2__inner {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.hv-journey2__text {
		max-width: 100%;
	}

	.hv-journey2__media {
		width: 65%;
		max-width: 280px;
		margin: 0 auto;
	}

	.hv-carecard__panel{
		flex: auto !important;
	}
}

/* ============================================================= */
/* Why Hormone Health Is Just the Beginning                       */
/* ============================================================= */

.hv-beginning {
	display: flex;
  align-items: flex-start;
  gap: clamp(24px, 4vw, 56px);
  max-width: 1300px;
  margin: 0 auto;
  padding: 80px clamp(20px, 4vw, 40px);
    padding-bottom: 30px;
  padding-bottom: 0;
}

.hv-beginning__media {
	flex: 0 0 320px;
}

.hv-beginning__media img {
	display: block;
	width: 100%;
	height: auto;
}

.hv-beginning__content {
	flex: 1;
	min-width: 0;
	margin: auto;
}

.hv-beginning__heading {
	margin: 0 0 28px;
	color: #4a6b58 !important;
	font-size: clamp(1.7rem, 3.6vw, 2.3rem) !important;
	font-weight: 400 !important;
	line-height: 1.2;
}

.hv-beginning__heading em {
	display: block;
	font-style: italic;
	font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
	color: #27503b !important;
}

.hv-beginning__columns {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
}

.hv-beginning__col p {
	margin: 0 0 16px;
	color: #595959 !important;
	font-size: 1.2rem !important;
	line-height: 1.6;
}

.hv-beginning__divider {
	border: none;
	height: 2px;
	background-color: #27503b;
	margin: 32px 0 24px;
}

.hv-beginning__note {
	margin: 0;
  color: #686868 !important;
  font-size: clamp(1.2rem, 4vw, 2rem) !important;
  line-height: 1.5;
}

@media (max-width: 900px) {
	.hv-beginning {
		flex-direction: column;
		text-align: center;
		padding-bottom: 0;
	}

	.hv-beginning__media {
		flex-basis: auto;
		width: 45%;
		max-width: 220px;
		margin: 0 auto;
		order: 2;
	}

	.hv-beginning__columns {
		grid-template-columns: 1fr;
	}

	.hv-beginning__content {
		width: 100%;
	}
}

/* ============================================================= */
/* Our Commitment to Your Long-Term Health                        */
/* ============================================================= */

.hv-commitment {
	background-color: #faf8f2;
	padding: 110px clamp(20px, 4vw, 40px);
	text-align: center;
}

.hv-commitment__heading {
	margin: 0 0 56px;
	color: #4a6b58 !important;
	font-size: clamp(1.7rem, 3.6vw, 2.3rem) !important;
	font-weight: 400 !important;
}

.hv-commitment__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 48px 40px;
	max-width: 1200px;
	margin: 0 auto 56px;
	text-align: left;
}

.hv-commitment__icon {
	display: block;
	width: 44px;
	height: 44px;
	margin-bottom: 16px;
}

.hv-commitment__icon img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.hv-commitment__title {
	margin: 0 0 12px;
	color: #4a6b58 !important;
	font-size: 1.25rem !important;
	font-weight: 400 !important;
}

.hv-commitment__text {
	margin: 0 0 20px;
	color: #333333 !important;
	font-size: 1.18rem !important;
	line-height: 1.6;
}

.hv-commitment__rule {
	border: none;
	height: 1px;
	background-color: #27503b;
	margin: 0;
}

.hv-commitment__btn {
	display: inline-block;
	padding: 18px 44px;
	background-color: #4a6b58;
	border-radius: 999px;
	color: #ffffff !important;
	font-size: 1rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-decoration: none;
	transition: opacity 0.2s ease;
}

.hv-commitment__btn:hover {
	opacity: 0.85;
	color: #ffffff !important;
}

@media (max-width: 900px) {
	.hv-commitment__grid {
		grid-template-columns: 1fr;
		gap: 28px;
	}
}

/* ============================================================= */
/* Why Membership-Based Care? (tarjeta verde + foto)               */
/* ============================================================= */

.hv-carecard {
	display: flex;
	align-items: stretch;
	flex-wrap: wrap;
	gap: clamp(24px, 4vw, 56px);
	max-width: 1200px;
	margin: 0 auto;
	padding: 110px clamp(20px, 4vw, 40px);
}

.hv-carecard__panel {
	flex: 1.1 1 420px;
	box-sizing: border-box;
	background-color: #4a6b58;
	border-radius: 14px;
	padding: 60px 40px;
}

.hv-carecard__heading {
	margin: 0 0 24px;
	color: #ffffff !important;
	font-size: clamp(1.5rem, 5vw, 2.4rem) !important;
	font-weight: 400 !important;
	line-height: 1.2;
}

.hv-carecard__panel p {
	margin: 0 0 18px;
	color: #eef1ee !important;
	font-size: 1.25rem !important;
	line-height: 1.6;
}

.hv-carecard__panel p:last-child {
	margin-bottom: 0;
}

.hv-carecard .hv-plan__media {
	flex: 1 1 420px;
	border-radius: 14px;
}

@media (max-width: 900px) {
	.hv-carecard {
		flex-direction: column;
	}

	.hv-carecard .hv-plan__media {
		min-height: 320px;
	}
}