/*
 * F4-L6 (#97) — native legal pages and psychologist profile.
 *
 * Own file, additive, enqueued only behind SERENA_NATIVE_TEMPLATES on the four
 * legal pages and the `psicologa` singles (inc/serena-native-templates.php).
 * Every number below was measured on the Elementor render it replaces (documents
 * 7019 and 8188), not guessed: the comment on each block says which.
 */

/* ---------------------------------------------------------------------------
 * 1 · Legal pages — header (document 7019, container d39ae40)
 *
 * Hero: min-height 300 / 350 (<=1024) / 180 (<=767); a gradient over the
 * background image. The shape at the bottom is the archive's wave
 * (`.serena-archive__shape`, rules in serena-archive.css, enqueued for these
 * pages too — wordpress L1b): it replaced 7019's curve, so no shape rule here.
 * ------------------------------------------------------------------------- */
.serena-legal__hero {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 300px;
	background: no-repeat top center / cover;
}

.serena-legal__hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: linear-gradient(208deg, rgba(253, 212, 199, 0.78) 0%, rgba(255, 252, 240, 0.83) 71%);
}

.serena-legal__hero-inner {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	max-width: 1300px;
	margin: 60px 0 0;
	padding: 10px;
}

.serena-legal__title {
	margin: 0 0 50px;
	font-family: "Nunito", sans-serif;
	font-size: 62px;
	font-weight: 600;
	line-height: 1.4em;
	letter-spacing: 1px;
	text-align: center;
	color: #ff9472;
}

/* Body: #FAFAFA band, 80 px above and below, a 1200 px column with 30 px inside. */
.serena-legal__body {
	padding: 80px 0;
	background: #fafafa;
}

.serena-legal__col {
	box-sizing: border-box;
	max-width: 1200px;
	margin: 0 auto;
	padding: 30px;
	background: #fff;
}

.serena-legal__content {
	font-family: "Open Sans", sans-serif;
	font-size: 16px;
	line-height: 26px;
	color: #212121;
}

@media (max-width: 1024px) {
	.serena-legal__hero {
		min-height: 350px;
	}

	/* The side padding keeps the title off the screen edges (it sat 12 px from them at 1024 on «Condiciones generales de contratación»); the top padding
	   keeps its first line off the header, which touched it (1 px) when the title wraps to 3 lines (wordpress#160, P36). The title keeps the theme's own
	   size (54 px here, 40 px on a phone): a smaller one set the lines wider and left LESS margin than before at some widths (22 px against 121 at 900-932),
	   while the padding only narrows the box, so no width gets a margin smaller than the theme's. Shared by the four legal pages. */
	.serena-legal__hero-inner {
		margin: 0;
		padding: 24px 40px 0;
	}

	.serena-legal__title {
		font-size: 54px;
	}
}

@media (max-width: 767px) {
	.serena-legal__hero {
		min-height: 180px;
	}

	.serena-legal__hero-inner {
		padding-left: 20px;
		padding-right: 20px;
	}

	.serena-legal__title {
		font-size: 40px;
	}
}

/* ---------------------------------------------------------------------------
 * 2 · Legal pages — mobile rules absorbed from serena-legal.css (wordpress#122/#123)
 *
 * Same declarations, each selector widened to the native wrapper
 * (`.serena-legal__content`). The `body.page-id-N` selectors are kept: between
 * turning the flag on and retiring document 7019 the pages are still painted by
 * Elementor, and these rules must keep working there. 360-430 px fit; at 320 the
 * widths must not get worse than 348 (1304) / 339 (3). Needs colspan="3" on the
 * three cookie-table titles of post 1304 (kept in its content).
 * ------------------------------------------------------------------------- */
@media (max-width: 767px) {

	/* Tables take the available width, no more. */
	body.page-id-3 table.legal-table,
	body.page-id-1298 table.legal-table,
	body.page-id-1304 table.legal-table,
	body.page-id-1318 table.legal-table,
	body.page-id-3 table.cmy-2,
	body.page-id-1298 table.cmy-2,
	body.page-id-1304 table.cmy-2,
	body.page-id-1318 table.cmy-2 {
		width: 100%;
		max-width: 100%;
	}

	body.page-id-3 td,
	body.page-id-1298 td,
	body.page-id-1304 td,
	body.page-id-1318 td {
		overflow-wrap: break-word;
	}

	/* Cookies: the name column reserves 40 %; only the names (data rows, not the header) may break anywhere. */
	body.page-id-3 table.cmy-2 > tbody > tr:nth-child(n+2) > td:first-child,
	body.page-id-1298 table.cmy-2 > tbody > tr:nth-child(n+2) > td:first-child,
	body.page-id-1304 table.cmy-2 > tbody > tr:nth-child(n+2) > td:first-child,
	body.page-id-1318 table.cmy-2 > tbody > tr:nth-child(n+2) > td:first-child {
		width: 40%;
	}

	body.page-id-3 table.cmy-2 > tbody > tr:nth-child(n+3) > td:first-child,
	body.page-id-1298 table.cmy-2 > tbody > tr:nth-child(n+3) > td:first-child,
	body.page-id-1304 table.cmy-2 > tbody > tr:nth-child(n+3) > td:first-child,
	body.page-id-1318 table.cmy-2 > tbody > tr:nth-child(n+3) > td:first-child,
	body.page-id-3 :is(.elementor-widget-theme-post-content, .serena-legal__content) a:not(table.cmy-2 a),
	body.page-id-1298 :is(.elementor-widget-theme-post-content, .serena-legal__content) a:not(table.cmy-2 a),
	body.page-id-1304 :is(.elementor-widget-theme-post-content, .serena-legal__content) a:not(table.cmy-2 a),
	body.page-id-1318 :is(.elementor-widget-theme-post-content, .serena-legal__content) a:not(table.cmy-2 a) {
		overflow-wrap: anywhere;
	}

	/* Cookie names are never broken mid-word (wordpress#160, P05): the name column keeps each name whole and the table scrolls sideways
	   INSIDE itself when a long name does not fit, never the page. The text is untouched. */
	body.page-id-3 table.cmy-2,
	body.page-id-1298 table.cmy-2,
	body.page-id-1304 table.cmy-2,
	body.page-id-1318 table.cmy-2 {
		display: block;
		overflow-x: auto;
	}

	body.page-id-3 table.cmy-2 > tbody > tr:nth-child(n+3) > td:first-child,
	body.page-id-1298 table.cmy-2 > tbody > tr:nth-child(n+3) > td:first-child,
	body.page-id-1304 table.cmy-2 > tbody > tr:nth-child(n+3) > td:first-child,
	body.page-id-1318 table.cmy-2 > tbody > tr:nth-child(n+3) > td:first-child {
		overflow-wrap: normal;
		word-break: keep-all;
	}

	/* Privacy: two-column tables stack (label above the text). */
	body.page-id-3 table.legal-table > tbody > tr > td,
	body.page-id-1298 table.legal-table > tbody > tr > td,
	body.page-id-1304 table.legal-table > tbody > tr > td,
	body.page-id-1318 table.legal-table > tbody > tr > td {
		display: block;
		width: auto;
	}

	/* ...and so does the header row of the table that has a <thead> (the first one of page 3): its <th> were left as cells, which kept two columns
	   over a one-column body (wordpress#160, P04). */
	body.page-id-3 table.legal-table > thead > tr > th {
		display: block;
		width: auto;
	}

	body.page-id-3 table.legal-table > tbody > tr > td:first-child,
	body.page-id-1298 table.legal-table > tbody > tr > td:first-child,
	body.page-id-1304 table.legal-table > tbody > tr > td:first-child,
	body.page-id-1318 table.legal-table > tbody > tr > td:first-child {
		border-bottom: 0;
		padding-bottom: 0;
	}
}

/* ---------------------------------------------------------------------------
 * 3 · Psychologist profile (document 8188)
 * ------------------------------------------------------------------------- */
.serena-ficha__wrap {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	width: 100%;
	margin: 95px 0 50px;
	padding: 10px;
}

/* Document 8188 painted the page background #F4F4F4 (`body.elementor-page-8188`). */
body.single-psicologa {
	background-color: #f4f4f4;
}

.serena-ficha__wrap > * {
	box-sizing: border-box;
	width: 100%;
	max-width: 1300px;
	margin-left: auto;
	margin-right: auto;
}

.serena-ficha__head {
	display: flex;
	flex-direction: row;
	gap: 20px;
	padding: 40px 30px;
	background: #fff;
}

.serena-ficha__photo {
	box-sizing: border-box;
	flex: 0 1 30%;
}

.serena-ficha__photo img {
	display: inline-block;
	max-width: 100%;
	border-radius: 120px 15px 120px 120px;
}

.serena-ficha__bio {
	box-sizing: border-box;
	display: flex;
	flex: 0 1 70%;
	flex-direction: column;
	gap: 10px 0;
	padding: 10px;
}

.serena-ficha__name {
	margin: 0;
	font-family: "Nunito", sans-serif;
	font-size: 50px;
	font-weight: 600;
	line-height: 64px;
	letter-spacing: 1px;
	color: #4f4f4f;
}

.serena-ficha__kicker {
	display: block;
	font-family: "Nunito", sans-serif;
	font-size: 14px;
	font-weight: 600;
	line-height: 26px;
	letter-spacing: 2.5px;
	text-transform: uppercase;
	color: #b11972;
}

.serena-ficha__quote {
	margin: 0;
	padding: 0;
	border: 0;
	font-family: "Nunito", sans-serif;
	font-style: italic;
	color: #818181;
}

.serena-ficha__quote p {
	margin: 16px 0 0;
	font-family: "Nunito", sans-serif;
	font-style: italic;
	font-size: 16px;
	line-height: 28px;
	letter-spacing: 1px;
	color: #818181;
}

.serena-ficha__quote footer {
	margin-top: 14px;
	font-family: "Nunito", sans-serif;
	font-style: italic;
	font-weight: 500;
	color: #818181;
}

.serena-ficha__body {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 0 30px 40px;
	background: #fff;
}

.serena-ficha__content {
	font-size: 16px;
	line-height: 1.6;
	color: #4f4f4f;
}

/* body.single-psicologa lifts this above `.elementor-kit-9 h3` (30px / 1.2em under 768 px), which was winning over the 26/44 of the
   Elementor original on a phone. */
body.single-psicologa .serena-ficha__h {
	margin: 0;
	font-family: "Nunito", sans-serif;
	font-size: 26px;
	font-weight: 600;
	line-height: 44px;
	letter-spacing: -1px;
	color: #4f4f4f;
}

.serena-ficha__terms {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -10px;
	padding: 0 10px;
}

.serena-ficha__terms a {
	display: block;
	margin: 0 2.5px 5px;
	padding: 1px 15px;
	border-radius: 16px;
	background: #ff9472;
	font-family: "Nunito", sans-serif;
	font-size: 12px;
	font-weight: 700;
	line-height: 26px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #fff !important;
	text-decoration: none;
}

/* Articles by the profile's author — loop grid 8193 */
.serena-ficha__articles {
	box-sizing: border-box;
	width: 100%;
	max-width: 1320px;
	margin: 30px auto 50px;
	padding: 10px;
}

.serena-ficha__articles-title {
	margin: 0 0 20px;
	font-family: "Nunito", sans-serif;
	font-size: 26px;
	font-weight: 600;
	line-height: 44px;
	letter-spacing: -1px;
	text-align: center;
	color: #4f4f4f;
}

.serena-ficha__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 50px;
	align-items: start;
}

.serena-ficha__card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: 5px;
	background: #fff;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.12);
	color: #303030;
	text-decoration: none;
}

.serena-ficha__card-img {
	display: block;
}

.serena-ficha__card-img img {
	display: block;
	width: 100%;
	height: 240px;
	object-fit: cover;
}

.serena-ficha__card-body {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 30px;
}

.serena-ficha__card-title {
	font-family: "Nunito", sans-serif;
	font-size: 20px;
	font-weight: 600;
	line-height: 27px;
	color: #4f4f4f;
}

.serena-ficha__card-excerpt {
	margin: 16px 0;
	font-size: 14px;
	line-height: 1.4em;
	color: #777;
}

.serena-ficha__card-more {
	align-self: flex-start;
	padding: 5px 20px;
	border-radius: 30px;
	background: #b11972;
	font-family: "Nunito", sans-serif;
	font-size: 12px;
	font-weight: 600;
	line-height: 26px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: #fff;
}

.serena-ficha__more-wrap {
	margin-top: 40px;
	text-align: center;
}

.serena-ficha__more {
	display: inline-block;
	padding: 13px 25px 12px;
	border-radius: 30px;
	background: linear-gradient(-90deg, #ffbc02, #ff9472);
	font-family: "Nunito", sans-serif;
	font-size: 14px;
	font-weight: 700;
	line-height: 14px;
	letter-spacing: 2px;
	text-transform: uppercase;
	text-decoration: none;
	color: #fff;
}

@media (max-width: 1366px) {
	.serena-ficha__grid {
		gap: 30px;
	}
}

@media (max-width: 1024px) {
	.serena-ficha__grid {
		gap: 20px;
	}
}

@media (max-width: 767px) {
	.serena-ficha__wrap {
		margin-bottom: 20px;
	}

	.serena-ficha__head {
		flex-direction: column;
	}

	.serena-ficha__photo,
	.serena-ficha__bio {
		flex: none;
		width: 100%;
	}

	.serena-ficha__photo img {
		height: 200px;
		margin-top: -90px;
		object-fit: cover;
	}

	.serena-ficha__name {
		font-size: 27px;
		line-height: 44px;
	}

	.serena-ficha__articles-title {
		font-size: 20px;
		line-height: 1.4em;
		letter-spacing: 0;
	}

	.serena-ficha__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}