/*=====
Theme Name: Brident
Author: Pedro Gris
Author URI: https://pedrogris.com/
Description: A custom WordPress theme developed with ♥ by Pedro Gris, specifically designed for the Brident website. All rights reserved. This theme is not intended for redistribution, modification, or resale.
Version: 1.0.0
Requires at least: 5.0
Tested up to: 6.6.1
Requires PHP: 7.0
License: Proprietary - All Rights Reserved
License URI: https://pedrogris.com/license
Text Domain: brident
Tags: custom, modern, responsive, SEO-friendly, accessible
=======*/



/* FONT */
@font-face {
    font-family: 'Helvetica';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('Helvetica'),
        url('/wp-content/themes/brident/assets/fonts/Helvetica-Regular.woff2') format('woff2'),
        url('/wp-content/themes/brident/assets/fonts/Helvetica-Regular.woff') format('woff');
}

@font-face {
    font-family: 'Helvetica';
    font-style: oblique;
    font-weight: 400;
    font-display: swap;
    src: local('Helvetica Oblique'),
        url('/wp-content/themes/brident/assets/fonts/Helvetica-Oblique.woff2') format('woff2'),
        url('/wp-content/themes/brident/assets/fonts/Helvetica-Oblique.woff') format('woff');
}

@font-face {
    font-family: 'Helvetica';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: local('Helvetica Light'),
        url('/wp-content/themes/brident/assets/fonts/Helvetica-Light.woff2') format('woff2'),
        url('/wp-content/themes/brident/assets/fonts/Helvetica-Light.woff') format('woff');
}

@font-face {
    font-family: 'Helvetica Neue';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('Helvetica Neue Roman'),
        url('/wp-content/themes/brident/assets/fonts/Helvetica-Neue-Regular.woff2') format('woff2'),
        url('/wp-content/themes/brident/assets/fonts/Helvetica-Neue-Regular.woff') format('woff');
}



/* BASIC */

:root {
	@media (prefers-reduced-motion: no-preference) {
		interpolate-size: allow-keywords;
	}
	--black: #393E41;
	--black-transparent: rgba(0, 0, 0, 0.5);
	--white: #EDEDEE;
	--gray: #D2D3D4;
	--gray-transparent: rgba(210, 211, 212, 0.7);
	--dark-gray: #656565;
	--yellow: #FFFF3F;

	--cubic-bezier: cubic-bezier(0,.6,.2,1);
}

::-moz-selection {
	color: var(--white);
	background: var(--black);
}
  
::selection {
	color: var(--white);
	background: var(--black);
}

.nojq  {
	display: none;
}

* {
	/* Designer mode */
	/* outline: 1px solid blue; */
	margin: 0;
	padding: 0;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}

html {
	/* scrollbar-gutter: stable; */
}

html {
	overflow-x: hidden;
}

body {
	overflow-x: clip;
}

body {
	width: 100%;
	height: 100%;
	font-family: 'Helvetica Neue', sans-serif;
	color: var(--black);
	background-color: var(--white);
	font-size: 14px;
	font-weight: 400;
	margin: 0;
	padding: 0;
	min-block-size: 100svh;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: 'Helvetica', sans-serif;
}

p {
	font-size: 14px;
	line-height: 120%;
}

a {
	text-decoration: none;
	color: var(--black);
}

b {
	font-weight: 700;
}

hr {
	border: none;
	border-bottom: 1px solid var(--gray);
}

.extended {
	font-family: Helvetica;
	font-size: clamp(13px, 1vw, 16px);
	font-style: normal;
	font-weight: 400;
	line-height: 100%;
	letter-spacing: 0.85px;
	text-transform: uppercase;
	text-wrap: balance;
	color: var(--dark-gray);
}

h1,
.h1 {
	font-family: 'Helvetica', sans-serif;
	font-size: clamp(32px, 4vw, 56px);
	font-style: normal;
	font-weight: 300;
	line-height: 100%;
	text-wrap: balance;

	em {
		font-weight: 400;
	}

	p {
		font-family: 'Helvetica', sans-serif;
		font-size: clamp(32px, 4vw, 56px);
		font-style: normal;
		font-weight: 300;
		line-height: 100%;
	}
}

h2,
.h2 {
	font-family: 'Helvetica', sans-serif;
	font-size: clamp(18px, 2.5vw, 22px);
	font-style: normal;
	font-weight: 300;
	line-height: 100%;
	text-wrap: balance;

	p {
		font-family: 'Helvetica', sans-serif;
		font-size: clamp(18px, 2.5vw, 22px);
		font-style: normal;
		font-weight: 300;
		line-height: 100%;
		text-wrap: balance;
	}
}

h3,
.h3 {
	font-family: 'Helvetica', sans-serif;
	font-size: clamp(15px, 2vw, 18px);
	font-style: normal;
	font-weight: 300;
	line-height: 100%;
	text-wrap: balance;

	p {
		font-family: 'Helvetica', sans-serif;
		font-size: clamp(15px, 2vw, 18px);
		font-style: normal;
		font-weight: 300;
		line-height: 100%;
		text-wrap: balance;
	}
}

/* Cuando una clase .hN se usa sobre otra etiqueta (p. ej. <h2 class="h1">), la
   anidación nativa convierte `h2, .h2` en :is(h2, .h2), cuya especificidad iguala
   la de `.h1`; al ir después en el archivo, ganaba el tamaño de la etiqueta real.
   Estas reglas reafirman el tamaño de la clase (elemento y <p> interno) para que
   la clase mande siempre sobre la etiqueta. */
.h1,
.h1 p { font-size: clamp(32px, 4vw, 56px); }

.h2,
.h2 p { font-size: clamp(18px, 2.5vw, 22px); }

.h3,
.h3 p { font-size: clamp(15px, 2vw, 18px); }

p,
.p {
	font-size: 14px;
	font-weight: 300;
}

.gigante {
	font-family: 'Helvetica', sans-serif;
	font-size: clamp(80px, 5vw, 140px);
	font-style: normal;
	font-weight: 300;
	line-height: 100%;
	text-wrap: balance;
}

/* CTA "Brillo": tinta desde el cursor, letras que ruedan, imán y destello al aparecer (assets/js/cta.js) */
.cta {
	--cta-bg: var(--yellow);
	--cta-fg: var(--black);
	--cta-line: transparent;
	--cta-fill: var(--black);
	--cta-fill-fg: var(--white);
	--cta-fill-line: var(--gray);
	--mx: 50%;
	--my: 50%;
	--d: 250%;
	--tx: 0px;
	--ty: 0px;

	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: 16px 28px;
	border-radius: 10px;
	color: var(--cta-fg);
	background-color: var(--cta-bg);
	border: 1px solid var(--cta-line);
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 12px;
	width: fit-content;
	height: fit-content;
	transform: translate3d(var(--tx), var(--ty), 0);
	transition: color .5s var(--cubic-bezier), background-color .3s, border-color .5s var(--cubic-bezier), transform .7s var(--cubic-bezier), scale .25s var(--cubic-bezier);

	/* Tinta */
	&::before {
		content: "";
		position: absolute;
		left: var(--mx);
		top: var(--my);
		width: var(--d);
		aspect-ratio: 1;
		border-radius: 50%;
		background-color: var(--cta-fill);
		translate: -50% -50%;
		scale: 0;
		transition: scale .7s var(--cubic-bezier);
		pointer-events: none;
		z-index: -1;
	}

	/* Destello */
	&::after {
		content: "";
		position: absolute;
		inset: -1px;
		background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .7) 48%, rgba(255, 255, 255, .9) 50%, transparent 68%);
		translate: -110% 0;
		pointer-events: none;
	}

	&.is-shining::after {
		animation: cta-shine 1.2s var(--cubic-bezier) var(--shine-delay, 0s) both;
	}

	svg {
		flex: 0 0 auto;
		transition: translate .5s var(--cubic-bezier), rotate .5s var(--cubic-bezier);

		path {
			fill: var(--cta-fg);
			transition: fill .5s var(--cubic-bezier);
		}
	}

	/* Letras: la copia de abajo entra ya con el color de la tinta */
	.cta-word {
		display: inline-block;
		overflow: hidden;
		white-space: nowrap;
		vertical-align: top;
		line-height: 1.25;
	}

	.cta-char {
		position: relative;
		display: inline-block;
		color: var(--cta-fg);
		transition: translate .55s var(--cubic-bezier) calc(min(var(--i), 18) * 14ms);

		&::after {
			content: attr(data-c);
			position: absolute;
			left: 0;
			top: 100%;
			color: var(--cta-fill-fg);
		}
	}

	@media (hover: hover) and (width > 900px) {
		&:hover {
			color: var(--cta-fill-fg);
			border-color: var(--cta-fill-line);

			&::before {
				scale: 1;
			}

			.cta-char {
				translate: 0 -100%;
			}

			svg {
				rotate: -8deg;

				path {
					fill: var(--cta-fill-fg);
				}
			}

			&[download] svg {
				rotate: 0deg;
				animation: cta-drop .7s var(--cubic-bezier);
			}
		}
	}

	&:active {
		scale: .96;
	}

	&.black {
		--cta-bg: var(--black);
		--cta-fg: var(--white);
		--cta-line: transparent;
		--cta-fill: var(--yellow);
		--cta-fill-fg: var(--black);
		--cta-fill-line: var(--black);
	}

	&.light {
		--cta-bg: var(--gray);
		--cta-fg: var(--black);
		--cta-line: var(--black);
		--cta-fill-line: var(--black);
	}

	&.light-no-border {
		--cta-bg: var(--gray);
		--cta-fg: var(--black);
		border-width: 0;
	}

	&.white {
		--cta-bg: var(--white);
		--cta-fg: var(--black);
		--cta-line: var(--white);
		--cta-fill-line: var(--black);
	}

	&.full-width {
		width: calc(100% - 40px);
	}

	&.permanent-whatsapp-button {
		--cta-bg: var(--gray-transparent);
		--cta-fg: var(--black);
		--cta-fill: var(--yellow);
		--cta-fill-fg: var(--black);
		--cta-fill-line: var(--yellow);
		position: fixed;
		left: 40px;
		bottom: 40px;
		z-index: 10;
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
		box-shadow: 0 10px 10px rgba(0, 0, 0, 0.03);

		@media (width < 900px) {
			& {
				left: 15px;
			}
		}
	}

	@media (width < 900px) {
		& {
			padding: 8px 13px;
			font-size: 13px;
			border-radius: 7px;
		}
	}

	@media (prefers-reduced-motion: reduce) {
		&,
		&::before,
		.cta-char,
		svg {
			transition-duration: .01s;
			transition-delay: 0s;
		}

		&::after {
			display: none;
		}
	}
}

@keyframes piloto {
	0%, 100% { box-shadow: 0 0 0 1px var(--black), 0 0 0 0 rgba(255, 255, 63, .9); }
	60% { box-shadow: 0 0 0 1px var(--black), 0 0 0 8px rgba(255, 255, 63, 0); }
}

@keyframes campo-ok {
	0% { scale: .4; }
	60% { scale: 1.25; }
	100% { scale: 1; }
}

@keyframes campo-error {
	20%, 60% { translate: -6px 0; }
	40%, 80% { translate: 6px 0; }
}

@keyframes cta-shine {
	from { translate: -110% 0; }
	to { translate: 110% 0; }
}

@keyframes cta-drop {
	0% { translate: 0 0; }
	40% { translate: 0 130%; opacity: 0; }
	41% { translate: 0 -130%; opacity: 0; }
	100% { translate: 0 0; opacity: 1; }
}

img {
	display: block;
	width: 100%;
	height: auto;
}

nav {
	position: fixed;
	inset: 0 0 auto 0;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 20px 40px;
	border-bottom: 1px solid var(--gray);
	transition: all .3s var(--cubic-bezier);
	z-index: 9999;

	.logo {
		display: block;
		width: 120px;
		transition: width .3s var(--cubic-bezier);
	}

	.main-menu {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 30px;

		.dropdown {
			display: flex;
			flex-direction: row;
			gap: 30px;
			transition: all .3s var(--cubic-bezier);
		}

		.burger-label {
			display: none;
		}

		li {
			list-style: none;
		}

		.sub-menu {
			display: flex;
			flex-direction: row;
			align-items: center;
			gap: 5px;
			position: relative;
			cursor: pointer;

			svg {
				transition: transform .3s var(--cubic-bezier);
			}

			@media (width > 900px) {
				.sub-menu-content {
					box-shadow: 0 10px 10px rgba(0, 0, 0, 0.03);
				}

				.sub-menu-content::before {
					content: "";
					position: absolute;
					bottom: 100%;
					left: 0;
					width: 100%;
					height: 32px;
				}
			}

			.sub-menu-content {
				display: flex;
                flex-direction: column;
				position: absolute;
                top: 100%;
                width: max-content;
                padding: 20px 5px;
				margin-top: 32px;
                opacity: 0;
                pointer-events: none;
                background-color: var(--gray-transparent);
				backdrop-filter: blur(10px);
				-webkit-backdrop-filter: blur(10px);
                border-radius: 15px;
                transition: opacity .3s var(--cubic-bezier);

				li:not(.sub-menu-group) {
					border-radius: 10px;
					transition: background-color .1s;

					a {
						display: block;
						padding: 10px 20px;
						transition: color .1s;
					}

					&:hover {
						background-color: var(--dark-gray);

						a {
							color: var(--white);
						}
					}
				}

				.sub-menu-group {
					display: flex;
					flex-direction: column;

					.sub-menu-group-header {
						display: flex;
						flex-direction: row;
						align-items: center;
						justify-content: space-between;
						gap: 10px;
						padding: 10px 20px;
						border-radius: 10px;
						cursor: pointer;
						transition: background-color .1s;

						a {
							transition: color .1s;
						}

						svg {
							transition: transform .3s var(--cubic-bezier);

							path {
								transition: stroke .1s;
							}
						}

						&:hover {
							background-color: var(--dark-gray);

							a {
								color: var(--white);
							}

							svg path {
								stroke: var(--white);
							}
						}
					}

					.sub-menu-group-content {
						display: flex;
						flex-direction: column;
						height: 0;
						overflow: hidden;
						padding-left: 15px;
						transition: height .3s var(--cubic-bezier), padding-top .3s var(--cubic-bezier);
					}

					&.open {
						.sub-menu-group-header {
							svg {
								transform: rotate(180deg);
							}
						}

						.sub-menu-group-content {
							height: auto;
						}
					}
				}
			}

			&.open {
				> svg {
					transform: rotate(180deg);
				}

				.sub-menu-content {
					opacity: 1;
					pointer-events: auto;
				}
			}
		}
	}

	&.scrolled {
		inset: 10px 5vw auto 5vw;
		padding: 10px 10px 10px 25px;
		border-radius: 18px;
		border-bottom: 0px solid transparent;
		box-shadow: 0 10px 10px rgba(0, 0, 0, 0.03);

		&::before {
			content: "";
			position: absolute;
			inset: 0;
			z-index: -1;
			background-color: var(--gray-transparent);
			backdrop-filter: blur(10px);
			-webkit-backdrop-filter: blur(10px);
			border-radius: inherit;
		}

		.main-menu {
			.sub-menu {
				.sub-menu-content {
					margin-top: 23px;
				}
			}
		}
	}
	
	&.inverted {
		border-bottom: 1px solid var(--white);

		.logo {
			path {
				fill: var(--white);
			}
		}

		.main-menu {
			.dropdown {
				a {
					color: var(--white);
				}
				.sub-menu {
					> svg {
						path {
							stroke: var(--white);
						}
					}
					.sub-menu-content {
						li {
							a {
								color: var(--black);
							}
						}

						li:not(.sub-menu-group):hover {
							a {
								color: var(--white);
							}
						}

						.sub-menu-group {
							.sub-menu-group-header:hover {
								a {
									color: var(--white);
								}
							}
						}
					}
				}
			}

			.burger-label {
				span {
					background-color: var(--white);
				}
			}
		}
	}

	&.inverted.scrolled {
		border-bottom: 0px solid transparent;

		.logo {
			path {
				fill: initial;
			}
		}

		.main-menu {
			.dropdown {
				.sub-menu {
					svg {
						path {
							stroke: var(--black);
						}
					}
				}
				a {
					color: initial;
				}
			}
			.burger-label {
				span {
					background-color: var(--black);
				}
			}
		}
	}

	@media (width < 900px) {
		& {
			padding: 10px 20px;

			.logo {
				width: 100px;
			}

			.main-menu {
				gap: 20px;

				.dropdown {
					position: fixed;
                    inset: 65px 10px 10px 10px;
                    flex-direction: column;
                    background-color: var(--gray-transparent);
					backdrop-filter: blur(10px);
					-webkit-backdrop-filter: blur(10px);
                    padding: 20px;
                    border-radius: 18px;
                    opacity: 0;
                    pointer-events: none;
                    transform: translateY(70px) scale(.9);
                    transform-origin: top center;
					overflow-y: auto;

					li {
						a {
							color: var(--black) !important;
						}

						svg {
							path {
								stroke: var(--black) !important;
							}
						}
					}
				}

				.sub-menu {
					flex-wrap: wrap;
					justify-content: space-between;

					.sub-menu-content {
						position: static;
						width: 100%;
						height: 0;
						margin-top: 0;
						padding-block: 0;
						overflow: hidden;
						opacity: 1;
						pointer-events: auto;
						gap: 5px;
						margin-top: 0 !important;
						background-color: transparent;
						backdrop-filter: none;
						-webkit-backdrop-filter: none;
						transition: height .3s var(--cubic-bezier), padding-block .3s var(--cubic-bezier);

						li:not(.sub-menu-group) {
							background-color: var(--white);

							&:hover {
								background-color: var(--white);

								a {
									color: var(--black);
								}
							}
						}

						.sub-menu-group {
							.sub-menu-group-header {
								background-color: var(--white);

								&:hover {
									background-color: var(--white);

									a {
										color: var(--black);
									}

									svg path {
										stroke: var(--black);
									}
								}
							}

							.sub-menu-group-content {
								gap: 5px;
							}

							&.open {
								.sub-menu-group-content {
									padding-top: 5px;
								}
							}
						}
					}

					&.open {
						.sub-menu-content {
							height: auto;
							padding-block: 10px;
						}
					}
				}

				.burger-label {
					display: block;
					cursor: pointer;

					span {
						display: block;
                        width: 35px;
                        height: 1px;
                        background-color: var(--black);
                        margin: 5px 0;
                        border-radius: 1px;
                        transition: transform .3s var(--cubic-bezier), opacity .3s var(--cubic-bezier);
					}
				}

				&.open {
					.dropdown {
						opacity: 1;
						pointer-events: auto;
						transform: translateY(0) scale(1);
					}

					.burger-label {
						span:nth-child(1) {
							transform: translateY(6px) rotate(45deg);
						}

						span:nth-child(2) {
							opacity: 0;
						}

						span:nth-child(3) {
							transform: translateY(-6px) rotate(-45deg);
						}
					}
				}
			}

			&.scrolled {
				inset: 10px 30px auto 30px;
				padding: 10px 20px;
				border-radius: 15px;

				.main-menu {
					.dropdown {
						inset: 74px 10px 10px 10px;
					}
				}
			}
		}
	}
}

.loader {
	position: fixed;
	inset: 0;
	margin: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--gray);
	z-index: 9999;

	svg {
		display: block;
		width: 20vw;
		max-width: 150px;
		perspective: 900px;
		overflow: visible;

		path {
			transform-box: fill-box;
			backface-visibility: hidden;
			opacity: 0;
		}
	}
}

.placeholder {
	height: 200svh;
}

.banner {
	width: 100%;
	height: 100svh;
	overflow: hidden;

	.banner-content {
		position: absolute;
		inset: 0;
		margin: auto;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		pointer-events: none;
		padding: 16svh 40px;
		z-index: 1;

		.left-content,
		.right-content {
			pointer-events: auto;
			max-width: 700px;
			display: flex;
			flex-direction: column;
			gap: 20px
		}

		.right-content {
			align-items: flex-end;
			text-align: right;
		}

		@media (width < 1200px) {
			& {
				flex-direction: column;

				.left-content {
					align-self: flex-start;
					width: 100%;
				}

				.right-content {
					align-self: flex-end;
					width: 50%;
				}
			}
		}

		@media (width < 900px) {
			& {
				padding: 15svh 15px 10svh;
			}
		}

		@media (width < 600px) {
			& {
				.right-content {
					width: 90%;
				}
			}
		}
	}
}

#hero-3d {
	position: relative;
	width: 100%;
	height: 100svh;
	overflow: hidden;
	background: var(--white);
	color: var(--black);

	canvas {
		display: block;
	}

	/* Selector de estación (home.php) */
	.season-selector {
		position: absolute;
		right: 40px;
		bottom: 40px;
		z-index: 2;
		display: flex;
		gap: 4px;
		padding: 4px;
		border-radius: 10px;
		background-color: var(--gray-transparent);
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
		box-shadow: 0 10px 10px rgba(0, 0, 0, 0.03);

		button {
			display: flex;
			align-items: center;
			gap: 8px;
			padding: 8px 12px;
			border: 0;
			border-radius: 7px;
			font: inherit;
			font-size: 13px;
			color: var(--black);
			background-color: transparent;
			cursor: pointer;
			transition: color .5s var(--cubic-bezier), background-color .5s var(--cubic-bezier);

			svg {
				flex: 0 0 auto;
				fill: currentColor;
			}

			&:hover {
				background-color: var(--white);
			}

			&[aria-pressed="true"] {
				color: var(--white);
				background-color: var(--black);
			}

			&:focus-visible {
				outline: 2px solid var(--black);
				outline-offset: 2px;
			}
		}

		/* En móvil solo iconos; el CTA del banner ocupa la esquina inferior derecha */
		@media (width < 900px) {
			& {
				right: 15px;
				bottom: 15px;

				button {
					padding: 8px;

					span {
						position: absolute;
						width: 1px;
						height: 1px;
						overflow: hidden;
						clip-path: inset(50%);
						white-space: nowrap;
					}
				}
			}
		}
	}
}

.formulario-contacto {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	margin: 100px 0;

	img {
		grid-area: 1 / 1;
		width: 100%;
		height: 100%;
		min-height: 800px;
		object-fit: cover;
	}

	.form {
		max-width: 350px;
		margin: auto;
		display: flex;
		flex-direction: column;
		gap: 20px;
		padding: 80px 0;

		&:has(.frase) {
			max-width: 440px;
		}

		/* Antetítulo con piloto amarillo encendido */
		> .extended {
			display: flex;
			align-items: center;
			gap: 10px;
			padding: 5px 15px;
            border: 1px solid var(--black-transparent);
            border-radius: 15px;
            width: fit-content;
		}

		> .h2 {
			color: var(--dark-gray);
		}

		.main-form {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 20px;

			/* Contacto directo: filas con etiqueta, dato y flecha */
			.links {
				display: flex;
				flex-direction: column;
				align-self: stretch;
				margin-bottom: 20px;
				border-bottom: 1px solid var(--gray);

				a {
					position: relative;
					display: grid;
					grid-template-columns: 90px 1fr auto;
					align-items: baseline;
					gap: 10px;
					padding: 16px 0;
					border-top: 1px solid var(--gray);
					font-family: 'Helvetica', sans-serif;
					font-size: clamp(15px, 2vw, 18px);
					font-weight: 300;
					overflow-wrap: anywhere;
					color: var(--black);
					background: linear-gradient(var(--yellow), var(--yellow)) no-repeat left / 0% 100%;
					transition: background-size .6s var(--cubic-bezier), padding .6s var(--cubic-bezier);

					&::before {
						content: "Contacto";
						font-family: Helvetica;
						font-size: 10px;
						letter-spacing: .85px;
						text-transform: uppercase;
						color: var(--dark-gray);
					}

					&[href^="tel:"]::before { content: "Llámanos"; }
					&[href^="mailto:"]::before { content: "Escríbenos"; }

					/* Flecha + barrido amarillo desde la izquierda */
					&::after {
						content: "↗";
						transition: rotate .5s var(--cubic-bezier);
					}

					@media (hover: hover) {
						&:hover {
							padding-inline: 12px;
							background-size: 100% 100%;

							&::after {
								rotate: 45deg;
							}
						}
					}

					&:focus-visible {
						outline: 0;
						padding-inline: 12px;
						background-size: 100% 100%;
					}
				}
			}

			/* Formulario "ficha": campos numerados sobre línea, etiqueta que sube, check al validar (assets/js/form.js) */
			.wpcf7 {
				width: 100%;

				form {
					counter-reset: campo;
					display: flex;
					flex-direction: column;
					gap: 6px;

					> p:has(.wpcf7-text) {
						counter-increment: campo;
					}

					br {
						display: none;
					}

					/* Formulario "frase": los campos son huecos de una frase que crecen al escribir (assets/js/form.js) */
					.frase {
						margin-bottom: 10px;
						font-family: 'Helvetica', sans-serif;
						font-size: clamp(28px, 3vw, 42px);
						font-weight: 300;
						line-height: 130%;
						text-wrap: pretty;
						color: var(--black);
						transition: color .6s var(--cubic-bezier);

						/* Foco: la frase se apaga y solo queda encendido lo escrito */
						&:focus-within {
							color: color-mix(in srgb, var(--black) 30%, transparent);
						}

						.wpcf7-form-control-wrap {
							position: relative;
							display: inline-block;
							max-width: 100%;
							vertical-align: baseline;
						}

						.frase-medida,
						input {
							padding: 0 .1em;
							font: inherit;
							line-height: inherit;
						}

						/* Sin overflow: si no, la línea base del hueco pasa a su borde inferior y el campo sube */
						.frase-medida {
							display: inline-block;
							min-width: 2ch;
							white-space: pre;
							visibility: hidden;
						}

						input {
							position: absolute;
							inset: 0;
							width: 100%;
							border: 0;
							border-bottom: 1px dashed var(--dark-gray);
							border-radius: 0;
							outline: 0;
							color: var(--black);
							caret-color: var(--black);
							/* Rotulador amarillo que pasa por debajo cuando el dato es válido */
							background: linear-gradient(var(--yellow), var(--yellow)) no-repeat left 85% / 0% 45%;
							transition: background-size .9s var(--cubic-bezier), border-color .4s var(--cubic-bezier);

							&::placeholder {
								color: var(--dark-gray);
								opacity: .5;
							}

							&:focus {
								border-bottom-style: solid;
								border-bottom-color: var(--black);
							}

							&:not(:placeholder-shown):valid {
								background-size: 100% 45%;
								border-bottom-color: transparent;
							}

							&:-webkit-autofill,
							&:-webkit-autofill:hover,
							&:-webkit-autofill:focus {
								-webkit-text-fill-color: var(--black);
								transition: background-color 5000s ease-in-out 0s, background-size .9s var(--cubic-bezier);
							}

							&.wpcf7-not-valid {
								border-bottom: 1px solid #B3261E;
								animation: campo-error .45s var(--cubic-bezier);
							}
						}

						.wpcf7-not-valid-tip {
							position: absolute;
							top: 100%;
							left: 0;
							margin-top: 4px;
							font-family: 'Helvetica Neue', sans-serif;
							font-size: 11px;
							line-height: 1;
							white-space: nowrap;
							color: #B3261E;
						}
					}

					label:has(.wpcf7-text) {
						--line: var(--gray);
						position: relative;
						display: grid;
						grid-template-columns: 34px 1fr;
						align-items: end;
						padding-top: 24px;
						border-bottom: 1px solid var(--line);
						cursor: text;
						transition: border-color .4s var(--cubic-bezier);

						/* Número de campo; pasa a check amarillo cuando es válido */
						&::before {
							content: counter(campo, decimal-leading-zero);
							display: grid;
							place-items: center;
							width: 20px;
							height: 20px;
							margin-bottom: 14px;
							border-radius: 50%;
							font-size: 10px;
							letter-spacing: .5px;
							color: var(--dark-gray);
							transition: background-color .4s var(--cubic-bezier), color .4s var(--cubic-bezier), scale .4s var(--cubic-bezier);
						}

						/* Línea que se dibuja al enfocar */
						&::after {
							content: "";
							position: absolute;
							left: 0;
							right: 0;
							bottom: -1px;
							height: 1px;
							background-color: var(--black);
							scale: 0 1;
							transform-origin: left;
							transition: scale .7s var(--cubic-bezier);
						}

						.label {
							position: absolute;
							left: 34px;
							bottom: 13px;
							font-size: clamp(18px, 2.5vw, 22px);
							font-weight: 300;
							color: var(--dark-gray);
							transform-origin: left bottom;
							pointer-events: none;
							transition: translate .5s var(--cubic-bezier), scale .5s var(--cubic-bezier), color .3s;
						}

						input {
							width: 100%;
							height: 50px;
							padding: 0;
							border: 0;
							border-radius: 0;
							outline: 0;
							background: transparent;
							font-family: 'Helvetica', sans-serif;
							font-size: clamp(18px, 2.5vw, 22px);
							font-weight: 300;
							color: var(--black);

							&:-webkit-autofill,
							&:-webkit-autofill:hover,
							&:-webkit-autofill:focus,
							&:-webkit-autofill:active {
								-webkit-background-clip: text;
								-webkit-text-fill-color: var(--black);
								transition: background-color 5000s ease-in-out 0s;
								box-shadow: inset 0 0 0 1000px transparent;
							}
						}

						&:focus-within::after {
							scale: 1 1;
						}

						&:focus-within,
						&:has(input:not(:placeholder-shown)),
						&:has(input:autofill) {
							.label {
								translate: 0 -34px;
								scale: .6;
								color: var(--black);
							}
						}

						&:has(input:not(:placeholder-shown):valid)::before {
							content: "✓";
							font-size: 11px;
							color: var(--black);
							background-color: var(--yellow);
							animation: campo-ok .5s var(--cubic-bezier);
						}

						&:has(.wpcf7-not-valid) {
							--line: #B3261E;
							animation: campo-error .45s var(--cubic-bezier);

							&::before {
								content: "!";
								color: var(--white);
								background-color: #B3261E;
							}
						}

						.wpcf7-not-valid-tip {
							position: absolute;
							top: 4px;
							right: 0;
							font-size: 11px;
							color: #B3261E;
						}
					}

					/* Aceptación como interruptor */
					.wpcf7-acceptance {
						display: block;
						padding: 16px 0 8px;
					}

					.wpcf7-list-item {
						margin: 0;

						label {
							display: flex;
							align-items: center;
							gap: 12px;
							cursor: pointer;
						}

						.wpcf7-list-item-label {
							font-size: 12px;
							line-height: 130%;
							color: var(--dark-gray);
						}

						input[type="checkbox"] {
							appearance: none;
							-webkit-appearance: none;
							position: relative;
							flex-shrink: 0;
							width: 40px;
							height: 22px;
							margin: 0;
							border: 1px solid var(--dark-gray);
							border-radius: 20px;
							cursor: pointer;
							transition: background-color .4s var(--cubic-bezier), border-color .4s var(--cubic-bezier);

							&::after {
								content: "";
								position: absolute;
								top: 3px;
								left: 3px;
								width: 14px;
								height: 14px;
								border-radius: 50%;
								background-color: var(--dark-gray);
								transition: translate .5s var(--cubic-bezier), background-color .4s var(--cubic-bezier), scale .25s var(--cubic-bezier);
							}

							&:active::after {
								scale: 1.3 .9;
							}

							&:checked {
								background-color: var(--black);
								border-color: var(--black);

								&::after {
									translate: 18px 0;
									background-color: var(--yellow);
								}
							}

							&:focus-visible {
								outline: 2px solid var(--black);
								outline-offset: 2px;
							}
						}
					}

					/* Envío: button.cta generado desde el input en assets/js/form.js */
					.wpcf7-submit.cta {
						width: 100%;
						min-height: 64px;
						font-family: inherit;
						font-size: 16px;
						cursor: pointer;

						@media (width < 900px) {
							min-height: 56px;
							font-size: 14px;
						}

						/* Se va llenando de amarillo según se completan los datos (--progreso en assets/js/form.js) */
						&:disabled {
							--cta-bg: var(--gray);
							--cta-fg: var(--black);
							cursor: not-allowed;
							background-image: linear-gradient(var(--yellow), var(--yellow));
							background-repeat: no-repeat;
							background-size: calc(var(--progreso, 0) * 100%) 100%;
							transition: background-size .8s var(--cubic-bezier), color .5s var(--cubic-bezier);

							&::before {
								scale: 0;
							}

							.cta-char {
								translate: 0 0;
							}
						}
					}

					&.submitting .wpcf7-submit.cta {
						pointer-events: none;

						&::after {
							animation: cta-shine 1s var(--cubic-bezier) infinite;
						}
					}

					.wpcf7-spinner {
						display: none;
					}

					.wpcf7-response-output {
						margin: 10px 0 0;
						padding: 14px 16px;
						border: 0;
						border-radius: 10px;
						font-size: 13px;
						line-height: 130%;
						background-color: var(--gray);

						&:empty {
							display: none;
						}
					}

					&.sent .wpcf7-response-output {
						background-color: var(--yellow);
					}

					&.invalid .wpcf7-response-output,
					&.failed .wpcf7-response-output {
						color: var(--white);
						background-color: var(--black);
					}
				}
			}

			/* Separador "o" entre formulario y WhatsApp */
			.spacer {
				display: grid;
				place-items: center;
				width: 100%;
				background: linear-gradient(var(--gray), var(--gray)) no-repeat center / 100% 1px;

				&::before {
					content: "o";
					padding: 0 14px;
					font-family: Helvetica;
					font-size: 11px;
					letter-spacing: .85px;
					text-transform: uppercase;
					color: var(--dark-gray);
					background-color: var(--white);
				}
			}

			> .cta.full-width {
				box-sizing: border-box;
				width: 100%;
				min-height: 64px;
				font-size: 16px;

				@media (width < 900px) {
					min-height: 56px;
					font-size: 14px;
				}
			}
		}
	}

	@media (width < 900px) {
		& {
			grid-template-columns: 1fr;
			margin: 50px 0;

			img {
				min-height: 300px;
			}

			.form {
				padding: 40px 15px;
				max-width: max-content;
			}
		}
	}
}

.tratamientos-home {
	display: flex;
	flex-direction: column;
	gap: 100px;
	margin: 100px 0;

	.main-text {
		display: flex;
		flex-direction: column;
		gap: 20px;
		width: calc(50% - 80px);
		padding: 0 40px;

		@media (width < 900px) {
			& {
				width: calc(100% - 30px);
				padding: 0 15px;
			}
		}
	}

	.tratamientos-principales {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 20px;
		padding: 0 40px;
		/* max-width: 1900px; */

		.tratamiento {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			gap: 20px;
			border-radius: 15px;
			border: 1px solid var(--gray);
			padding: 25px;
			transition: all .3s var(--cubic-bezier);

			.info {
				display: flex;
				flex-direction: row;
				align-items: flex-start;
				justify-content: space-between;
				gap: 10px;

				.text {
					display: flex;
					flex-direction: column;
					gap: 10px;
					width: 100%;
				}

				.icon {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 35px;
					aspect-ratio: 1;
					background-color: var(--yellow);
					border-radius: 5px;
					transition: transform .3s var(--cubic-bezier);
				}
			}

			.img-wrapper {
				overflow: hidden;
				border-radius: 5px;

				img {
					transition: transform .3s var(--cubic-bezier);
				}
			}

			@media (width > 900px) {
				&:hover {
					background-color: var(--gray-transparent);

					.icon {
						transform: translate(5px, -5px);
					}

					img {
						transform: scale(1.05);
					}
				}
			}
		}

		@media (width < 900px) {
			& {
				grid-template-columns: 1fr;
				padding: 0 15px;
			}
		}
	}

	.title {
		padding: 0 40px;

		@media (width < 900px) {
			& {
				padding: 0 15px;
			}
		}
	}

	.grupo-tratamientos {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 40px;
		padding: 0 40px;

		.slider-tratamientos {
			width: 100%;

			.splide__slide {
				a {
					display: flex;
					flex-direction: column;
					gap: 20px;

					.img-wrapper {
						overflow: hidden;
						border-radius: 5px;

						img {
							display: block;
							width: 100%;
							aspect-ratio: 4 / 3;
							object-fit: cover;
							transition: transform .3s var(--cubic-bezier);
						}
					}

					@media (width > 900px) {
						&:hover {
							.img-wrapper img {
								transform: scale(1.05);
							}
						}
					}
				}
			}

			.splide__pagination {
				position: static;
				margin-top: 40px;
			}
		}

		.parrafo {
			text-wrap: balance;
			text-align: center;
			align-self: center;
			max-width: 400px;
		}

		@media (width < 1200px) {
			& {
				padding: 0;
			}
		}

		@media (width < 900px) {
			& {
				padding: 0;

				.parrafo {
					padding: 0 15px;
				}
			}
		}
	}

	@media (width < 900px) {
		& {
			margin: 100px 0;
			gap: 50px;
		}
	}
}

.pastilla-doble {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
	margin: 100px 40px;
	
	.pastilla-imagen,
	.pastilla-amarilla {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		gap: 20px;
		padding: 35px;
		border-radius: 15px;
		overflow: hidden;
		min-height: 500px;

		.superior,
		.inferior {
			width: 50%;
			gap: 30px;

			.extended {
				color: inherit;
			}
		}

		.contenido-superior {
			gap: 10px;
		}

		.superior,
		.inferior,
		.contenido-superior {
			display: flex;
			flex-direction: column;
		}
	}

	.pastilla-imagen {
		position: relative;
		color: var(--white);

		&::after {
			content: "";
			position: absolute;
			inset: 0;
			background-color: var(--black-transparent);
			opacity: 0.7;
			z-index: -1;
		}

		img {
			position: absolute;
			inset: 0;
			width: 100%;
			height: 100%;
			object-fit: cover;
			z-index: -2;
		}
	}

	.pastilla-amarilla {
		background-color: var(--yellow);
	}

	@media (width < 900px) {
		& {
			grid-template-columns: 1fr;
			margin: 100px 15px;

			.pastilla-imagen,
			.pastilla-amarilla {
				padding: 20px;
				min-height: 400px;

				.superior,
				.inferior {
					width: 100%;
				}
			}
		}
	}
}

.somos-diferentes {
	display: flex;
	flex-direction: column;
	gap: 80px;
	background-color: var(--gray);
	position: relative;
	margin: 100px 0;
	padding: 100px 40px;
	overflow: hidden;

	.background-logo {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		opacity: 0.4;
		width: 100vw;
        height: 100svh;
		display: block;
	}

	.header-text,
	.razones,
	.cta {
		z-index: 1;
	}

	.header-text {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 30px;
	}

	.razones {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		border: 1px solid var(--dark-gray);
		border-radius: 15px;
		overflow: hidden;

		.razon:not(:nth-child(3n)) {
			border-right: 1px solid var(--dark-gray);
		}

		.razon:nth-child(n + 4) {
			border-top: 1px solid var(--dark-gray);
		}

		.razon {
			display: flex;
			flex-direction: column;
			gap: 20px;
			padding: 50px 70px;
		}
	}

	@media (width < 900px) {
		& {
			gap: 40px;
			margin: 100px 0;
			padding: 50px 15px;

			.razones {
				grid-template-columns: repeat(2, 1fr);

				.razon:not(:nth-child(3n)) {
					border-right: none;
				}

				.razon:nth-child(n + 4) {
					border-top: none;
				}

				.razon:not(:nth-child(2n)) {
					border-right: 1px solid var(--dark-gray);
				}

				.razon:nth-child(n + 3) {
					border-top: 1px solid var(--dark-gray);
				}

				.razon {
					padding: 30px 7vw;
				}
			}
		}
	}
}

.consulta-online {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 20px;
	color: var(--white);
	min-height: 600px;
	padding: 100px 15px;
	margin: -100px 0;
	position: relative;
	overflow: hidden;

	&::after {
		content: "";
		position: absolute;
		inset: 0;
		background-color: var(--black-transparent);
		opacity: 0.7;
		z-index: -1;
	}

	h2 {
		text-align: center;
		width: 50%;
	}

	p {
		text-align: center;
		text-wrap: balance                                                               ;
	}

	img {
		position: absolute;
		width: 100%;
		height: 100%;
		object-fit: cover;
		z-index: -2;
	}

	@media (width < 900px) {
		& {
			min-height: 300px;

			h2 {
				width: 100%;
			}
		}
	}
}

.nos-gusta {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	margin: 100px 0;

	img {
		height: 100%;
        min-height: 800px;
        object-fit: cover;
	}

	.contenido {
		max-width: 550px;
        margin: auto;
        display: flex;
        flex-direction: column;
        gap: 20px;
        padding: 80px 40px;

		.encabezado {
			display: flex;
			flex-direction: column;
			gap: 20px;
		}

		.items {
			display: flex;
			flex-direction: column;

			.item {
				max-width: 400px;
				padding: 20px 0;
				border-bottom: 1px solid var(--dark-gray);
			}

			.item:last-child {
				border-bottom: none;
			}
		}
	}

	@media (width < 900px) {
		& {
			grid-template-columns: 1fr;
			margin: 100px 0;

			img {
				min-height: 300px;
				order: 2;
			}

			.contenido {
				padding: 40px 15px;
                max-width: max-content;
				order: 1;
			}
		}
	}
}

.dudas-frecuentes {
	display: flex;
	flex-direction: column;
	gap: 40px;
	margin: 100px 40px;

	h2 {
		max-width: 35ch;
	}

	.bloques {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 40px;

		.bloque-preguntas {
			display: flex;
			flex-direction: column;

			h3 {
				padding: 10px 0;
				border-bottom: 1px solid var(--dark-gray);
			}

			.elemento {
				display: flex;
				flex-direction: column;

				.pregunta {
					display: flex;
					flex-direction: row;
					align-items: center;
					gap: 5px;
					padding: 10px 0;
					border-bottom: 1px solid var(--dark-gray);
					cursor: pointer;

					svg {
						flex-shrink: 0;
						transition: transform 0.3s ease;
					}
				}

				.respuesta {
					height: 0;
					padding: 0 0;
					border-bottom: 0;
					overflow: hidden;
					transition: height 0.3s ease;

					ul {
						margin-left: 15px;
						display: flex;
						flex-direction: column;
						gap: 10px;
					}

					p {
						padding: 10px 0 15px;
						max-width: 80ch;
					}
				}

				&.open {
					.pregunta svg {
						transform: rotate(45deg);
					}

					.respuesta {
						border-bottom: 1px solid var(--dark-gray);
					}
				}
			}
		}
	}

	.mas-dudas {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 20px;
		padding: 25px 30px;
		border: 1px solid var(--gray);
		border-radius: 15px;

		.cta {
			flex: 0 0 auto;
		}
	}

	@media (width < 900px) {
		& {
			margin: 100px 15px;
		
			.bloques {
				grid-template-columns: 1fr;
			}

			.mas-dudas {
				flex-direction: column;
				align-items: flex-start;
				padding: 20px;
			}
		}
	}
}

.tratamiento {
	.header {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 20px;
		position: relative;
		min-height: 500px;
		overflow: hidden;

		.main-content {
			display: flex;
			flex-direction: column;
			gap: 20px;
			margin-left: 40px;
			color: var(--white);
			padding-top: 83px;

			h1,
			h2 {
				width: 70%;
			}
		}

		.cta {
			flex: 0 0 auto;
			white-space: nowrap;
			margin-right: 40px;
			margin-top: 83px;
		}

		&::after {
			content: "";
			position: absolute;
			inset: 0;
			background-color: var(--black-transparent);
			opacity: 0.7;
			z-index: -1;
		}

		.background {
			position: absolute;
			width: 100%;
			height: 100%;
			object-fit: cover;
			z-index: -2;
		}

		@media (width < 900px) {
			& {
				flex-direction: column;
				justify-content: center;
				align-items: flex-start;
				gap: 80px;

				.main-content,
				.cta {
					margin-left: 15px;

					h1,
					h2 {
						width: 80%;
					}
				}

				.main-content {
					padding-top: 55px;
				}
				
				.cta {
					margin-top: 0;
				}
			}
		}
	}

	.beneficios {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(150px, 300px));
		gap: 20px;
		justify-content: center;
		padding: 50px 15px;
		margin: auto;

		.beneficio {
			display: flex;
			flex-direction: column;
			gap: 10px;
			padding: 20px 30px;
			border: 1px solid var(--gray);
			border-radius: 5px;

			img {
				width: 25px;
				height: 25px;
			}
		}

		@media (width < 900px) {
			& {
				grid-template-columns: repeat(2, 1fr);
				gap: 15px;

				.beneficio {
					padding: 10px 15px;
				}

				.beneficio:last-child:nth-child(odd) {
					grid-column: span 2;
					justify-self: center;
					width: calc(50% - 7.5px);
				}
			}
		}
	}

	.explicacion {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
		padding: 250px 40px;
		position: relative;
		color: var(--white);
		overflow: hidden;

		&::after {
			content: "";
			position: absolute;
			inset: 0;
			background-color: var(--black-transparent);
			z-index: -1;
		}

		h2 {
			max-width: 20ch;
		}

		.texto {
			display: flex;
			flex-direction: column;
			gap: 30px;
			max-width: 75ch;

			ul {
				li {
					list-style: none;
					position: relative;
					padding-left: 20px;

					&::before {
						content: "";
						position: absolute;
						left: 0;
						top: 50%;
						transform: translateY(-50%);
						height: 100%;
						width: 1px;
						background-color: var(--white);
					}
				}
			}
		}
		
		.cta {
			grid-column: 2;
			margin-top: -10px;
		}

		img {
			position: absolute;
			width: 100%;
			height: 100%;
			object-fit: cover;
			z-index: -2;
		}

		@media (width < 900px) {
			& {
				grid-template-columns: repeat(1, 1fr);
				gap: 60px;
				padding: 150px 30px;

				.cta {
					grid-column: auto;
					margin-top: -30px;
				}
			}
		}

		@media (width < 600px) {
			& {
				h2 {
					max-width: 100%;
				}
			}
		}
	}

	.enumeracion {
		display: flex;
		flex-direction: column;
		gap: 50px;
		margin: 100px 40px;

		h2 {
			max-width: 25ch;
		}

		.intro {
			display: flex;
			flex-direction: column;
			gap: 15px;
			max-width: 75ch;
		}

		h2 + .intro {
			margin-top: -30px;
		}

		.elementos {
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			gap: 20px;

			.elemento {
				display: flex;
				flex-direction: column;
				gap: 50px;
				padding: 20px;
				border: 1px solid var(--gray);
				border-radius: 5px;
			}

			&.cols-3 {
				grid-template-columns: repeat(3, 1fr);
			}

			@media (width < 1100px) {
				&, &.cols-3 {
					grid-template-columns: repeat(2, 1fr);
				}
			}

			@media (width < 900px) {
				.elemento {
					gap: 20px;
				}
			}

			@media (width < 700px) {
				&, &.cols-3 {
					grid-template-columns: repeat(1, 1fr);
				}
			}
		}

		@media (width < 900px) {
			& {
				margin: 50px 15px;
			}
		}
	}

	.enumeracion-iconos {
		display: flex;
		flex-direction: column;
		gap: 50px;
		margin: 100px 0;
		padding: 100px 40px;
		background-color: var(--gray);

		h2 {
			max-width: 25ch;
		}

		.elementos {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			border: 1px solid var(--dark-gray);
			border-radius: 15px;

			.elemento {
				display: flex;
				flex-direction: column;
				align-items: center;
				gap: 10px;
				padding: 50px 70px;
				border-top: 1px solid var(--dark-gray);
				border-left: 1px solid var(--dark-gray);

				&:nth-child(-n+2) {
					border-top: none;
				}

				&:nth-child(odd) {
					border-left: none;
				}

				&:last-child:nth-child(odd) {
					grid-column: 1 / -1;
				}

				img {
					width: 25px;
					height: 25px;
					padding: 20px;
					border: 1px solid var(--dark-gray);
					background-color: var(--white);
					border-radius: 5px;
				}

				p {
					text-align: center;
				}
			}
		}

		@media (width < 900px) {
			& {
				gap: 40px;
				margin: 50px 0;
				padding: 50px 15px;
			}

			.elementos {
				grid-template-columns: 1fr;

				.elemento {
					padding: 35px 25px;
					border-left: none;

					&:nth-child(2) {
						border-top: 1px solid var(--dark-gray);
					}

					img {
						padding: 10px;
					}
				}
			}
		}
	}

	/* Bloque adaptable: proceso numerado, cuadro de beneficios, paso a paso y
	   fichas con foto. Las variantes se activan por clase según los campos
	   alimentados (.numerado, .con-imagen, .con-icono, .sin-titulo) */
	.listado-detallado {
		display: flex;
		flex-direction: column;
		gap: 50px;
		margin: 100px 40px;

		.cabecera {
			display: flex;
			flex-direction: column;
			gap: 20px;

			h2 {
				max-width: 25ch;
			}

			.intro {
				display: flex;
				flex-direction: column;
				gap: 15px;
				max-width: 75ch;
			}
		}

		.elementos {
			display: grid;
			gap: 20px;

			&.cols-1 { grid-template-columns: 1fr; }
			&.cols-2 { grid-template-columns: repeat(2, 1fr); }
			&.cols-3 { grid-template-columns: repeat(3, 1fr); }
			&.cols-4 { grid-template-columns: repeat(4, 1fr); }

			.elemento {
				display: flex;
				flex-direction: column;
				gap: 20px;
				padding: 25px;
				border: 1px solid var(--gray);
				border-radius: 15px;

				.img-wrapper {
					order: -1;
					overflow: hidden;
					border-radius: 5px;

					img {
						display: block;
						width: 100%;
						aspect-ratio: 4 / 3;
						object-fit: cover;
					}
				}

				.head {
					display: flex;
					flex-direction: row;
					align-items: center;
					gap: 15px;

					.counter {
						display: flex;
						align-items: center;
						justify-content: center;
						flex: 0 0 auto;
						min-width: 35px;
						aspect-ratio: 1;
						border-radius: 5px;
						background-color: var(--yellow);
						color: var(--black);
					}

					.icono {
						flex: 0 0 auto;
						width: 25px;
						height: 25px;
						padding: 12px;
						border: 1px solid var(--gray);
						border-radius: 5px;
						background-color: var(--white);
					}
				}

				.texto {
					display: flex;
					flex-direction: column;
					gap: 15px;
					margin-top: auto;

					ul {
						display: flex;
						flex-direction: column;
						gap: 8px;

						li {
							list-style: none;
							position: relative;
							padding-left: 20px;

							&::before {
								content: "";
								position: absolute;
								left: 0;
								top: 50%;
								transform: translateY(-50%);
								height: 100%;
								width: 1px;
								background-color: var(--gray);
							}
						}
					}
				}
			}
		}

		/* Enumeración pura: sin título por elemento el número es el protagonista */
		&.sin-titulo .elementos .elemento {
			gap: 50px;

			.head .counter {
				min-width: 0;
				aspect-ratio: auto;
				border-radius: 0;
				background-color: transparent;
			}
		}

		> .cta {
			align-self: flex-start;
		}

		@media (width < 1100px) {
			.elementos.cols-3,
			.elementos.cols-4 {
				grid-template-columns: repeat(2, 1fr);
			}
		}

		@media (width < 900px) {
			& {
				gap: 30px;
				margin: 50px 15px;
			}

			.elementos .elemento {
				padding: 20px;
				gap: 15px;
			}
		}

		@media (width < 700px) {
			.elementos.cols-2,
			.elementos.cols-3,
			.elementos.cols-4 {
				grid-template-columns: 1fr;
			}
		}
	}

	.links-otras-paginas {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
		margin: 100px 40px;

		&:has(> .pagina:nth-child(3)) {
			grid-template-columns: repeat(3, 1fr);
		}

		.pagina {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			gap: 20px;
			border-radius: 15px;
			border: 1px solid var(--gray);
			padding: 25px;
			transition: all .3s var(--cubic-bezier);

			.text-icon {
				display: flex;
				flex-direction: row;
				align-items: flex-start;
				justify-content: space-between;
				gap: 10px;

				.text {
					display: flex;
					flex-direction: column;
					gap: 20px;
					width: 100%;
				}

				.icon {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 35px;
					aspect-ratio: 1;
					background-color: var(--yellow);
					border-radius: 5px;
					transition: transform .3s var(--cubic-bezier);
				}
			}

			.img-wrapper {
				overflow: hidden;
				border-radius: 5px;

				img {
					transition: transform .3s var(--cubic-bezier);
				}
			}

			@media (width > 900px) {
				&:hover {
					background-color: var(--gray-transparent);

					.icon {
						transform: translate(5px, -5px);
					}

					img {
						transform: scale(1.05);
					}
				}
			}
		}

		@media (width < 1100px) {
			&, &:has(> .pagina:nth-child(3)) {
				grid-template-columns: repeat(2, 1fr);
			}
		}

		@media (width < 900px) {
			&, &:has(> .pagina:nth-child(3)) {
				grid-template-columns: 1fr;
				margin: 50px 15px;
			}
		}
	}

	.ventajas-inconvenientes {
		display: flex;
		flex-direction: column;
		gap: 80px;
		background-color: var(--black);
		color: var(--white);
		padding: 100px 40px;
		margin: 100px 0;

		h2 {
			width: 50%;
		}

		.texto {
			display: flex;
			flex-direction: column;
			gap: 10px;
			
			.extended {
				color: var(--white);
			}
		}

		.tabla {
			display: grid;
			grid-template-columns: repeat(2, 1fr);

			.ventajas,
			.inconvenientes {
				display: flex;
				flex-direction: column;
				gap: 50px;
				background-color: var(--dark-gray);
				padding: 50px 70px;

				.listado {
					display: flex;
					flex-direction: column;
					gap: 10px;

					.elemento {
						display: flex;
						flex-direction: row;
						align-items: center;
						gap: 10px;

						svg {
							width: 20px;
							height: 20px;
							flex-shrink: 0;
						}
					}
				}
			}

			.ventajas {
				border-radius: 15px 0 0 15px;
				border-right: 1px solid var(--white);
			}

			.inconvenientes {
				border-radius: 0 15px 15px 0;
			}
		}

		@media (width < 900px) {
			& {
				padding: 80px 15px;
				gap: 40px;

				h2 {
					width: 90%;
				}

				.tabla {
					grid-template-columns: repeat(1, 1fr);

					.ventajas,
					.inconvenientes {
						gap: 30px;
						padding: 50px 30px;
					}

					.ventajas {
						border-radius: 15px 15px 0 0;
						border-right: none;
						border-bottom: 1px solid var(--white);
					}

					.inconvenientes {
						border-radius: 0 0 15px 15px;
					}
				}
			}
		}
	}

	.explicacion-ventajas {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 80px;
		margin: 100px 40px;

		h2 {
			max-width: 25ch;
			text-align: center;
		}

		.columnas {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 20px;

			.izquierda,
			.derecha {
				display: flex;
				flex-direction: column;
				gap: 20px;
				max-width: 80ch;

				.p {
					white-space: pre-line;
				}
			}
		}

		h3 {
			text-align: center;
		}

		.ventajas {
			display: grid;
			grid-template-columns: 1fr;
			gap: 20px;

			&:has(> .ventaja:nth-child(2)) {
				grid-template-columns: repeat(2, 1fr);
			}

			&:has(> .ventaja:nth-child(3)) {
				grid-template-columns: repeat(3, 1fr);
			}

			&:has(> .ventaja:nth-child(4)) {
				grid-template-columns: repeat(4, 1fr);
			}

			&:has(> .ventaja:nth-child(5)) {
				grid-template-columns: repeat(5, 1fr);
			}

			&:has(> .ventaja:nth-child(6)) {
				grid-template-columns: repeat(6, 1fr);
			}

			.ventaja {
				display: flex;
				flex-direction: row;
				gap: 10px;
				padding: 20px;
				background-color: var(--gray);
				border-radius: 5px;

				svg {
					width: 20px;
					height: 20px;
					flex-shrink: 0;
				}
			}

			@media (width < 1200px) {
				&:has(> .ventaja:nth-child(3)) {
					grid-template-columns: repeat(3, 1fr);
				}
			}

			@media (width < 900px) {
				&:has(> .ventaja:nth-child(3)) {
					grid-template-columns: repeat(2, 1fr);
				}
			}

			@media (width < 700px) {
				&, &:has(> .ventaja:nth-child(2)) {
					grid-template-columns: 1fr;
					gap: 10px;
				}
			}
		}

		@media (width < 900px) {
			& {
				gap: 40px;
				margin: 100px 15px;
				
				.ventajas {
					.ventaja {
						align-items: center;
					}
				}

				.columnas {
					grid-template-columns: repeat(1, 1fr);
					gap: 40px;
				}
			}
		}
	}

	.destacado-amarillo-simple {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 20px;
		background-color: var(--yellow);
		padding: 150px 40px;
		text-align: center;

		h2 {
			max-width: 30ch;
		}

		@media (width < 900px) {
			& {
				padding: 100px 15px;
			}
		}
	}

	.destacado-amarillo-doble {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 50px;
		padding: 150px 40px;
		background-color: var(--yellow);

		.izquierda,
		.derecha {
			display: flex;
			flex-direction: column;
			gap: 20px;

			h2 {
				max-width: 20ch;
			}

			p {
				max-width: 60ch;
			}
		}

		@media (width < 900px) {
			& {
				grid-template-columns: 1fr;
				gap: 30px;
				padding: 100px 15px;
			}
		}
	}

	.destacado-negro {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 50px;
		padding: 150px 40px;
		background-color: var(--black);
		color: var(--white);

		.extended {
			color: var(--white);
		}

		.izquierda,
		.derecha {
			display: flex;
			flex-direction: column;
			justify-content: center;
			gap: 20px;

			h2 {
				max-width: 20ch;
			}

			p {
				max-width: 60ch;
			}
		}

		.derecha {
			border-radius: 15px;
			border: 1px solid var(--dark-gray);
			padding: 50px 70px;
		}

		@media (width < 900px) {
			& {
				grid-template-columns: 1fr;
				gap: 30px;
				padding: 100px 15px;
			}
		}
	}

	.dentista-especializado {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		overflow: hidden;

		img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}

		.text {
			display: flex;
			flex-direction: column;
			justify-content: center;
			gap: 10px;
			padding: 100px 40px;

			h3 {
				max-width: 20ch;
			}

			p {
				max-width: 70ch;
			}
		}

		@media (width < 900px) {
			& {
				grid-template-columns: 1fr;
				
				.text {
					padding: 50px 15px;
				}
			}
		}
	}

	.casos-antes-despues {
		display: flex;
		flex-direction: column;
		gap: 100px;
		margin: 100px 40px;

		.texto {
			display: flex;
			flex-direction: column;
			gap: 20px;

			h2 {
				max-width: 20ch;

				&:has(ul, ol) {
					max-width: none;
				}
			}

			ul,
			ol {
				display: flex;
				flex-direction: column;
				gap: 15px;
				max-width: 55ch;
				font-size: clamp(18px, 2.5vw, 22px);
				font-weight: 300;
				line-height: 120%;

				li {
					list-style: none;
					position: relative;
					padding-left: 20px;

					&::before {
						content: "";
						position: absolute;
						left: 0;
						top: 50%;
						transform: translateY(-50%);
						height: 100%;
						width: 1px;
						background-color: var(--gray);
					}

					span {
						font-weight: inherit;
					}
				}
			}

			ol {
				counter-reset: item;

				li {
					counter-increment: item;
					padding-left: 45px;

					&::before {
						content: counter(item, decimal-leading-zero);
						top: 0;
						transform: none;
						height: auto;
						width: auto;
						background-color: transparent;
						font-size: 0.75em;
						font-weight: 400;
						line-height: 160%;
						color: var(--dark-gray);
					}
				}
			}
		}

		.casos {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 20px;

			.caso {
				display: flex;
				flex-direction: column;
				gap: 20px;
				padding: 25px;
				border-radius: 15px;
				border: 1px solid var(--gray);

				.img-container {
					--pos: 50%;
					border-radius: 5px;
					overflow: hidden;
					position: relative;
					touch-action: pan-y;
					user-select: none;
					-webkit-user-select: none;

					.line-reveal {
						height: 110%;
						width: 2px;
						border-radius: 1px;
						background-color: var(--yellow);
						position: absolute;
						top: 50%;
						left: var(--pos);
						transform: translate(-50%, -50%);
						z-index: 2;

						svg {
							position: absolute;
							left: 50%;
							top: 50%;
							transform: translate(-50%, -50%);
							z-index: 2;
						}
					}

					.despues {
						position: absolute;
						inset: 0;
						width: 100%;
						height: 100%;
						z-index: 1;
						clip-path: inset(0 0 0 var(--pos));
					}
				}
			}

			@media (width < 1100px) {
				& {
					grid-template-columns: repeat(2, 1fr);
				}
			}

			@media (width < 700px) {
				& {
					grid-template-columns: repeat(1, 1fr);
				}
			}
		}

		@media (width < 900px) {
			& {
				margin: 50px 15px;
				gap: 40px;

				.casos {
					gap: 15px;
				}
			}
		}
	}

	.video {
		margin: 100px auto;
		border-radius: 15px;
		overflow: hidden;
		background-color: var(--gray);
		max-width: 1200px;

		video {
			display: block;
			width: 100%;
			height: 100%;
			aspect-ratio: 16 / 9;
			object-fit: cover;
		}

		@media (width < 900px) {
			& {
				margin: 50px 15px;
				border-radius: 5px;

				video {
					aspect-ratio: 4 / 3;
				}
			}
		}
	}
}

.tratamientos {
	.header {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 40px;
		position: relative;
		min-height: 500px;
		overflow: hidden;

		.main-content {
			display: flex;
			flex-direction: column;
			align-items: center;
			text-align: center;
			gap: 40px;
			color: var(--white);
			padding-top: 83px;

			h1 {
				width: 25ch;
			}

			h2 {
				max-width: 50ch;
			}
		}

		.buttons {
			display: flex;
			flex-direction: row;
			gap: 16px;
		}

		&::after {
			content: "";
			position: absolute;
			inset: 0;
			background-color: var(--black-transparent);
			opacity: 0.7;
			z-index: -1;
		}

		.background {
			position: absolute;
			width: 100%;
			height: 100%;
			object-fit: cover;
			z-index: -2;
		}

		@media (width < 900px) {
			& {
				flex-direction: column;
				justify-content: center;
				gap: 40px;

				.main-content,
				.cta {
					h1,
					h2 {
						width: 80%;
					}
				}

				.main-content {
					padding-top: 55px;
					gap: 20px;
				}
				
				.cta {
					margin-top: 0;
				}
			}
		}
	}

	.texto-tratamientos {
		margin: auto;
		text-align: center;
		padding: 30px 10px;
	}

	.imagen-izquierda,
	.imagen-derecha {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		overflow: clip;

		img {
			height: 100%;
			min-height: 800px;
			object-fit: cover;
		}

		.texto-enlaces {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			gap: 80px;
			padding: 30px 40px;

			.enlaces {
				display: flex;
				flex-direction: column;
				gap: 10px;
			}
		}
	}

	@media (width < 1100px) {
		.imagen-izquierda,
		.imagen-derecha {
			grid-template-columns: 1fr;

			img {
				min-height: 300px;
			}

			.texto-enlaces {
				padding: 40px 15px;
				max-width: max-content;
			}
		}

		.imagen-derecha {
			img {
				order: 1;
			}

			.texto-enlaces {
				order: 2;
			}
		}
	}
}

.conocenos {
	.header {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 20px;
		padding-top: 133px;
		max-height: calc(100svh - 133px);
		overflow: hidden;

		h1 {
			text-align: center;
		}

		.valores {
			display: flex;
			flex-direction: row;
			justify-content: center;
			flex-wrap: wrap;
			gap: 20px;
			padding: 0 15px;

			.valor {
				display: flex;
				flex-direction: row;
				align-items: center;
				gap: 10px;
				padding: 8px 20px;
				border: 1px solid var(--gray);
				border-radius: 5px;

				.icono {
					width: 20px;
					height: 20px;
					flex-shrink: 0;
				}
			}
		}

		.equipo {
			width: 100%;
			flex: 1 1 auto;
			min-height: 0;
			overflow: hidden;

			img {
				display: block;
				width: 100%;
				height: calc(100% + 300px);
				object-fit: cover;
				object-position: center center;
			}
		}

		@media (width < 900px) {
			& {
				padding-top: 105px;
				max-height: none;

				.valores {
					gap: 10px;
				}

				.equipo img {
					height: auto;
				}
			}
		}
	}

	.introduccion {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 40px;
		padding: 100px 40px;
		background-color: var(--black);
		color: var(--white);

		.destacados {
			display: grid;
			grid-template-columns: 1fr 1fr;
			align-items: center;
			border: 1px solid var(--dark-gray);
			border-radius: 15px;
			height: fit-content;

			.destacado {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				padding: 50px 15px;

				&:first-of-type {
					border-right: 1px solid var(--dark-gray);
				}
			}
		}

		.historia {
			display: flex;
			flex-direction: column;
			gap: 20px;
            margin: auto;

			.texto {
				display: flex;
				flex-direction: column;
				gap: 10px;
				max-width: 80ch;
			}
		}

		@media (width < 900px) {
			& {
				grid-template-columns: 1fr;
				padding: 100px 15px;
			}
		}
	}

	.destacado-amarillo-simple {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 20px;
		background-color: var(--yellow);
		padding: 150px 40px;
		text-align: center;

		h2 {
			max-width: 30ch;
		}

		@media (width < 900px) {
			& {
				padding: 100px 15px;
			}
		}
	}

	.destacado-negro-simple {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 20px;
		background-color: var(--black);
		color: var(--white);
		padding: 150px 40px;
		text-align: center;

		.extended {
			color: var(--white);
		}

		h2 {
			max-width: 30ch;
		}

		@media (width < 900px) {
			& {
				padding: 100px 15px;
			}
		}
	}

	.destacado-imagen-simple {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 20px;
		color: var(--white);
		padding: 150px 40px;
		text-align: center;
		position: relative;

		h2 {
			max-width: 30ch;
		}

		h3 {
			display: flex;
			flex-direction: column;
			gap: 10px;
			max-width: 50ch;
		}

		&::after {
			content: "";
			position: absolute;
			inset: 0;
			background-color: var(--black-transparent);
			z-index: -1;
		}
		
		.background {
			position: absolute;
			inset: 0;
			width: 100%;
			height: 100%;
			object-fit: cover;
			z-index: -2;
		}

		@media (width < 900px) {
			& {
				padding: 100px 15px;
			}
		}
	}

	.equipo-dentistas {
		display: flex;
		flex-direction: column;
		gap: 40px;
		margin: 100px 0;

		h2.h1 {
			padding: 0 40px;
			max-width: 25ch;
		}

		.dentistas {
			display: flex;
			flex-direction: column;

			.dentista {
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				overflow: hidden;

				img {
					width: 100%;
					height: 100%;
					max-height: 800px;
					object-fit: cover;
				}

				.text {
					display: flex;
					flex-direction: column;
					justify-content: center;
					gap: 10px;
					padding: 100px 40px;
					margin: auto;
					max-width: 60ch;

					h2 {
						margin-bottom: 20px;
					}

					h3 {
						max-width: 20ch;
						margin-bottom: 80px;
					}

					p {
						max-width: 70ch;
					}
				}

				&:nth-child(even) {
					img {
						order: 2;
					}

					.text {
						order: 1;
					}
				}

				@media (width < 900px) {
					& {
						grid-template-columns: 1fr;

						img {
							min-height: 300px;
						}

						.text {
							padding: 50px 15px;

							h2 {
								margin-bottom: 10px;
							}

							h3 {
								margin-bottom: 40px;
							}
						}
					}

					&:nth-child(even) {
						img,
						.text {
							order: initial;
						}
					}
				}
			}
		}

		@media (width < 900px) {
			& {
				h2.h1 {
					padding: 0 15px;
				}
			}
		}
	}

	.personal {
		display: flex;
		flex-direction: column;
		gap: 40px;
		margin: 100px 0;

		h2.h1 {
			padding: 0 40px;
			max-width: 25ch;
		}

		.equipo {
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			gap: 20px;
			padding: 0 40px;

			.persona {
				display: flex;
				flex-direction: column;
				gap: 20px;
				padding: 25px;
				border: 1px solid var(--gray);
				border-radius: 15px;
				transition: all .3s var(--cubic-bezier);

				.img-wrapper {
					overflow: hidden;
					border-radius: 5px;
					aspect-ratio: 4 / 5;

					img {
						width: 100%;
						height: 100%;
						object-fit: cover;
						transition: transform .3s var(--cubic-bezier);
					}
				}

				.text {
					display: flex;
					flex-direction: column;
					gap: 10px;

					p {
						display: flex;
						align-items: center;
						gap: 10px;
						color: var(--dark-gray);

						&::before {
							content: '';
							flex-shrink: 0;
							width: 8px;
							aspect-ratio: 1;
							border-radius: 2px;
							background-color: var(--yellow);
							transition: transform .3s var(--cubic-bezier);
						}
					}
				}

				@media (width > 900px) {
					&:hover {
						background-color: var(--gray-transparent);

						img {
							transform: scale(1.05);
						}

						.text p::before {
							transform: rotate(45deg);
						}
					}
				}
			}

			@media (width < 1300px) {
				& {
					grid-template-columns: repeat(3, 1fr);
				}
			}

			@media (width < 900px) {
				& {
					grid-template-columns: repeat(2, 1fr);
					gap: 15px;
					padding: 0 15px;

					.persona {
						gap: 15px;
						padding: 15px;
					}
				}
			}
		}

		@media (width < 900px) {
			& {
				h2.h1 {
					padding: 0 15px;
				}
			}
		}
	}

	.instalaciones {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 40px;
		padding: 100px 40px;
		background-color: var(--gray);

		img {
			border-radius: 15px;
		}

		.info {
			display: flex;
			flex-direction: column;
			gap: 40px;

			.destacados {
				display: grid;
				grid-template-columns: 1fr 1fr;
				align-items: center;
				border: 1px solid var(--dark-gray);
				border-radius: 15px;
				height: fit-content;

				.destacado {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					padding: 50px 15px;

					&:first-of-type {
						border-right: 1px solid var(--dark-gray);
					}
				}
			}

			.texto {
				display: flex;
				flex-direction: column;
				gap: 10px;
				max-width: 80ch;
			}
		}

		@media (width < 900px) {
			& {
				grid-template-columns: 1fr;
				gap: 30px;
				padding: 50px 15px;

				img {
					width: 100%;
					height: auto;
					object-fit: cover;
				}

				.info {
					.destacados {
						.destacado {
							padding: 30px 15px;
						}
					}
				}
			}
		}
	}

	.ventajas-imagen {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 40px;
		position: relative;
		color: var(--white);
		padding: 150px 40px;

		h2 {
			text-align: center;
			max-width: 30ch;
		}

		.ventajas {
			display: flex;
			flex-direction: row;
			justify-content: center;
			flex-wrap: wrap;
			gap: 20px;

			.ventaja {
				display: grid;
				grid-template-rows: 1fr 1fr;
				gap: 10px;
				padding: 20px;
				border-radius: 15px;
				border: 1px solid var(--white);
				max-width: 200px;
				aspect-ratio: 1;

				.counter {
					color: var(--white);
				}
			}
		}

		&::after {
			content: "";
			position: absolute;
			inset: 0;
			background-color: var(--black-transparent);
			z-index: -1;
		}
		
		.background {
			position: absolute;
			inset: 0;
			width: 100%;
			height: 100%;
			object-fit: cover;
			z-index: -2;
		}

		@media (width < 900px) {
			& {
				padding: 100px 15px;
			}
		}
	}

	.metodo-brident {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 40px;
		padding: 150px 40px;
		background-color: var(--yellow);

		.descripcion {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			gap: 20px;

			.text {
				display: flex;
				flex-direction: column;
				gap: 20px;

				p {
					max-width: 60ch;
				}
			}
		}

		.fases {
			display: flex;
			flex-direction: column;
			gap: 20px;
			grid-column: span 2;

			.grid {
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				border: 1px solid var(--dark-gray);
				border-radius: 15px;
				overflow: hidden;

				.fase:not(:nth-child(2n)) {
					border-right: 1px solid var(--dark-gray);
				}

				.fase:nth-child(n + 3) {
					border-top: 1px solid var(--dark-gray);
				}

				.fase {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					gap: 40px;
					padding: 50px 30px;

					.principal {
						display: flex;
						flex-direction: column;
						gap: 10px;

						.counter {
							color: var(--black);
						}
					}
				}
			}
		}

		@media (width < 900px) {
			& {
				grid-template-columns: 1fr;
				padding: 100px 15px;

				.fases {
					grid-column: auto;
				}
			}
		}

		@media (width < 550px) {
			& {
				.fases {
					.grid {
						grid-template-columns: 1fr;

						.fase:not(:nth-child(2n)) {
							border-right: none;
						}

						.fase:nth-child(n + 3) {
							border-top: none;
						}

						.fase {
							border-right: none;
							border-bottom: 1px solid var(--dark-gray);
							padding: 30px 20px;
							gap: 20px;
						}

						.fase:last-of-type {
							border-bottom: none;
						}
					}
				}
			}
		}
	}

	.bloque-imagen-texto {
		display: flex;
		flex-direction: column;

		.imagen-texto {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			overflow: hidden;

			&:nth-child(even) {
				img {
					order: 2;
				}

				.text {
					order: 1;
				}
			}

			img {
				height: 100%;
				min-height: 800px;
				object-fit: cover;
			}

			.text {
				display: flex;
				flex-direction: column;
				justify-content: center;
				gap: 10px;
				padding: 100px 40px;
				margin: auto;

				h2 {
					max-width: 20ch;
				}

				p {
					max-width: 70ch;
				}
			}

			@media (width < 900px) {
				& {
					grid-template-columns: 1fr;

					img {
						min-height: 300px;
					}

					.text {
						padding: 50px 15px;

						h2 {
							margin-bottom: 10px;
						}

						h3 {
							margin-bottom: 40px;
						}
					}
				}

				&:nth-child(even) {
					img,
					.text {
						order: initial;
					}
				}
			}
		}
	}

	.medio-ambiente {
		display: flex;
		flex-direction: column;
		gap: 40px;
		background-color: var(--gray);
		padding: 100px 40px;

		.bloques {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			border: 1px solid var(--dark-gray);
			border-radius: 15px;
			overflow: hidden;

			.destacado,
			.bloque {
				display: flex;
				flex-direction: column;
				gap: 50px;
				padding: 50px 30px;

				p {
					max-width: 50ch;
				}
			}

			.destacado {
				grid-row: span 2;
				border-right: 1px solid var(--dark-gray);
				background-color: var(--yellow);
			}

			.bloque:not(:nth-child(3n)) {
				border-right: 1px solid var(--dark-gray);
			}

			.bloque:nth-child(n + 4) {
				border-top: 1px solid var(--dark-gray);
			}

			.bloque:last-of-type {
				border-right: none;
			}
		}

		@media (width < 900px) {
			& {
				padding: 100px 15px;

				.bloques {
					grid-template-columns: repeat(2, 1fr);

					.destacado,
					.bloque {
						gap: 20px;
						padding: 30px 20px;
					}

					.destacado {
						grid-row: 1;
						grid-column: span 2;
						border-right: none;
						border-bottom: 1px solid var(--dark-gray);
					}
				}
			}
		}

		@media (width < 550px) {
			& {
				.bloques {
					grid-template-columns: 1fr;

					.destacado {
						grid-column: 1;
					}

					.bloque {
						border-bottom: 1px solid var(--dark-gray);
					}

					.bloque:not(:nth-child(3n)) {
						border-right: none;
					}

					.bloque:nth-child(n + 4) {
						border-top: none;
					}

					.bloque:last-of-type {
						border-bottom: none;
					}
				}
			}
		}
	}
}

.preguntas-frecuentes {
	.header {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 20px;
		padding-top: 133px;
		max-height: calc(100svh - 133px);
		text-align: center;
		overflow: hidden;

		h1,
		p,
		.valores {
			padding: 0 15px;
		}

		h1 {
			text-align: center;
		}

		.valores {
			display: flex;
			flex-direction: row;
			justify-content: center;
			flex-wrap: wrap;
			gap: 20px;
			padding: 0 15px;

			.valor {
				display: flex;
				flex-direction: row;
				align-items: center;
				gap: 10px;
				padding: 8px 20px;
				border: 1px solid var(--gray);
				border-radius: 5px;

				.icono {
					width: 20px;
					height: 20px;
					flex-shrink: 0;
				}

				p {
					padding: 0;
				}
			}
		}

		.imagen-banner {
			width: 100%;
			max-height: 500px;
			flex: 1 1 auto;
			min-height: 0;
			object-fit: cover;
			object-position: center center;
		}

		@media (width < 900px) {
			& {
				padding-top: 105px;
				max-height: none;

				.valores {
					gap: 10px;
				}
			}
		}
	}

	.introduccion-dudas {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		align-items: center;
		gap: 40px;
		margin: 100px 40px;

		.izquierda {
			display: flex;
			flex-direction: column;
			gap: 20px;
		}

		.derecha {
			display: flex;
			flex-direction: column;
			gap: 80px;

			h3 {
				max-width: 25ch;
			}
			
			.text {
				display: flex;
				flex-direction: column;
				gap: 80px;

				a {
					text-decoration: underline;
				}

				p {
					max-width: 80ch;
				}
			}
		}

		@media (width < 900px) {
			& {
				grid-template-columns: 1fr;
				margin: 100px 15px;

				.derecha {
					gap: 20px;

					.text {
						gap: 20px;
					}
				}
			}
		}
	}

	.destacado-amarillo-simple {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 20px;
		background-color: var(--yellow);
		padding: 150px 40px;
		text-align: center;

		h2 {
			max-width: 30ch;
		}

		@media (width < 900px) {
			& {
				padding: 100px 15px;
			}
		}
	}
}

.contacto {
	.header {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 20px;
		padding-top: 133px;
		max-height: calc(100svh - 133px);
		text-align: center;

		@media (width < 900px) {
			& {
				padding-top: 105px;
				max-height: none;

				.valores {
					gap: 10px;
				}

				.equipo img {
					height: auto;
				}
			}
		}
	}

	.informacion-principal {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
		margin: 100px 40px;

		.ubicacion {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			padding: 50px;
			background-color: var(--yellow);
			border-radius: 15px;
			height: calc(100% - 100px);

			.texto {
				display: flex;
				flex-direction: column;
				justify-content: center;
				gap: 20px;
			}

			.mapa {
				iframe {
					display: block;
					width: 100%;
					height: 100%;
					border: 0;
					border-radius: 15px;
					filter: grayscale(1) contrast(1.2);
				}
			}
		}

		.informacion {
			display: flex;
			flex-direction: column;
			gap: 30px;
			padding: 50px 0;

			a {
				text-decoration: underline;
			}

			.grupo {
				display: flex;
				flex-direction: column;
				gap: 10px;
			}
		}

		@media (width < 900px) {
			& {
				grid-template-columns: 1fr;
				margin: 50px 15px;

				.ubicacion {
					grid-template-columns: 1fr;
					padding: 30px;
					gap: 20px;
					height: auto;

					iframe {
						min-height: 300px;
						border-radius: 5px !important;
					}
				}
			}
		}
	}

	.financiacion {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
		padding: 100px 40px;
		background-color: var(--gray);

		.texto {
			display: flex;
			flex-direction: column;
			justify-content: center;
			gap: 20px;

			h2 {
				max-width: 20ch;
			}

			h3 {
				max-width: 40ch;
			}
		}

		.items {
			display: flex;
			flex-direction: column;
			gap: 30px;

			hr {
				border-bottom: 1px solid var(--dark-gray);
			}

			.item {
				display: flex;
				flex-direction: column;
				gap: 10px;
			}
		}

		@media (width < 900px) {
			& {
				grid-template-columns: 1fr;
				padding: 50px 15px;
				gap: 40px;
			}
		}
	}
}

.mas-informacion {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 200px 40px;
	position: relative;
	color: var(--white);

	h2 {
		max-width: 25ch;
	}

	h3 {
		max-width: 30ch;
	}

	.botones {
		display: flex;
		flex-direction: row;
		gap: 10px;
	}

	&::after {
		content: "";
		position: absolute;
		inset: 0;
		background-color: var(--black-transparent);
		opacity: 0.7;
		z-index: -1;
	}

	.background-image {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		z-index: -2;
	}

	@media (width < 900px) {
		& {
			padding: 150px 15px;

			.botones {
				flex-direction: column;
			}
		}
	}
}

.blog {
	.header {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 20px;
		padding-top: 133px;
		max-height: calc(100svh - 133px);
		text-align: center;

		p {
			max-width: 40ch;
		}

		@media (width < 900px) {
			& {
				padding-top: 105px;
				max-height: none;

				.valores {
					gap: 10px;
				}

				.equipo img {
					height: auto;
				}
			}
		}
	}

	.post-destacado {
		padding: 40px;
		overflow: hidden;
		max-height: 2000px;
		transition: opacity .3s var(--cubic-bezier), max-height .45s var(--cubic-bezier), padding .45s var(--cubic-bezier);

		&.is-hidden {
			opacity: 0;
			max-height: 0;
			padding-top: 0;
			padding-bottom: 0;
			pointer-events: none;
		}

		.post-card-hero {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 15px;
			border-radius: 15px;
			overflow: hidden;
			border: 1px solid var(--gray);
			margin: 40px auto;
			max-width: 1500px;
			transition: background-color .15s;

			.imagen {
				overflow: hidden;
				height: 100%;
				width: 100%;

				img {
					width: 100%;
					height: 100%;
					object-fit: cover;
					transition: transform .15s var(--cubic-bezier);
				}
			}

			.content {
				display: flex;
				flex-direction: column;
				justify-content: center;
				gap: 30px;
				padding: 100px 25px;

				.data {
					display: flex;
					flex-direction: row;
					align-items: center;
					gap: 20px;

					.tags {
						display: flex;
						flex-direction: row;
						gap: 20px;

						.tag {
							padding: 10px 20px;
							border-radius: 10px;
							color: var(--dark-gray);
							border: 1px solid var(--dark-gray);
						}
					}

					.date {
						color: var(--dark-gray);
					}
				}
			}

			p {
				max-width: 60ch;
			}

			@media (width > 900px) {
				&:hover {
					background-color: var(--yellow);

					.imagen {
						img {
							transform: scale(1.05);
						}
					}

					.content {
						.cta {
							--cta-bg: var(--black);
							--cta-fg: var(--white);
						}
					}
				}
			}
		}

		@media (width < 900px) {
			& {
				padding: 40px 15px;

				.post-card-hero {
					grid-template-columns: 1fr;
					background-color: var(--yellow);
					margin: 0;

					.content {
						padding: 50px 15px;

						.cta {
							--cta-bg: var(--black);
							--cta-fg: var(--white);
						}
					}
				}
			}
		}
	}

	.filtros-tags {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 10px;
		margin: 40px 40px 0;

		.tag-filtro {
			padding: 10px 20px;
			border: 1px solid var(--gray);
			border-radius: 10px;
			background-color: transparent;
			color: var(--black);
			cursor: pointer;
			transition: background-color .15s, color .15s, border-color .15s;

			&:hover {
				border-color: var(--black);
			}

			&.is-active {
				background-color: var(--yellow);
				color: var(--black);
				border-color: transparent;
			}
		}

		@media (width < 900px) {
			& {
				margin: 40px 15px 0;
			}
		}
	}

	.buscador-posts {
		display: flex;
		justify-content: center;
		margin: 20px 40px 0;

		.buscador-campo {
			position: relative;
			width: 100%;
			max-width: 150px;
			transition: max-width .3s var(--cubic-bezier);
		}

		.buscador-campo:focus-within,
		.buscador-campo:has(.buscador-input:not(:placeholder-shown)) {
			max-width: 300px;
		}

		.buscador-input {
			width: 100%;
			padding: 10px 30px 10px 0;
			border: none;
			border-bottom: 1px solid var(--gray);
			background-color: transparent;
			color: var(--black);
			font: inherit;
			transition: border-color .15s;

			&::placeholder {
				color: var(--black);
				opacity: .5;
			}

			&:focus {
				outline: none;
				border-color: var(--black);
			}

			&::-webkit-search-cancel-button {
				-webkit-appearance: none;
				appearance: none;
			}
		}

		.buscador-icono,
		.buscador-clear {
			position: absolute;
			right: 0;
			top: 50%;
			transform: translateY(-50%);
			display: flex;
			transition: opacity .15s;
		}

		.buscador-icono {
			pointer-events: none;
		}

		.buscador-clear {
			padding: 0;
			border: none;
			background: transparent;
			cursor: pointer;
			opacity: 0;
			pointer-events: none;
		}

		.buscador-input:not(:placeholder-shown) ~ .buscador-icono {
			opacity: 0;
		}

		.buscador-input:not(:placeholder-shown) ~ .buscador-clear {
			opacity: 1;
			pointer-events: auto;
		}

		@media (width < 900px) {
			& {
				margin: 20px 15px 0;
			}
		}
	}

	h2 {
		margin: 0 40px;

		@media (width < 900px) {
			& {
				margin: 0 15px;
			}
		}
	}

	.listado-posts {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 20px;
		margin: 40px;
		opacity: 1;
		transition: opacity .3s var(--cubic-bezier);

		&.is-loading {
			opacity: 0;
			pointer-events: none;
		}

		.post-card {
			display: flex;
			flex-direction: column;
			gap: 15px;
			border-radius: 15px;
			overflow: hidden;
			border: 1px solid var(--gray);
			transition: background-color .15s;

			.imagen {
				overflow: hidden;
				aspect-ratio: 3 / 2;

				img {
					width: 100%;
					height: 100%;
					object-fit: cover;
					transition: transform .15s var(--cubic-bezier);
				}
			}

			.content {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				gap: 30px;
				padding: 25px;

				h2 {
					margin: 0;
				}
			}

			p {
				max-width: 60ch;
			}

			@media (width > 900px) {
				&:hover {
					background-color: var(--yellow);

					.imagen {
						img {
							transform: scale(1.05);
						}
					}

					.content {
						.cta {
							--cta-bg: var(--black);
							--cta-fg: var(--white);
						}
					}
				}
			}
		}

		@media (width < 1200px) {
			& {
				grid-template-columns: repeat(2, 1fr);
			}
		}

		@media (width < 900px) {
			& {
				grid-template-columns: 1fr;
				margin: 40px 15px;

				.post-card {
					.content {
						gap: 20px;
						padding: 15px;
					}
				}
			}
		}
	}

	.paginacion {
		display: flex;
		justify-content: center;
		margin: 0 40px 100px;

		&:empty {
			display: none;
		}

		ul.page-numbers {
			display: flex;
			flex-direction: row;
			align-items: center;
			gap: 10px;
			padding: 8px;
			border-radius: 12px;
			list-style: none;
		}

		li .page-numbers {
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 8px 18px;
			border: 1px solid var(--gray);
			border-radius: 8px;
			transition: background-color .15s;

			&.current {
				background-color: var(--yellow);
				color: var(--black);
				border-color: transparent;
				cursor: default;
			}

			@media (width > 900px) {
				&:hover&:not(.current) {
					background-color: var(--gray);
				}
			}
		}
	}
}

.post {
	.header {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 20px;
		position: relative;
		min-height: 500px;
		overflow: hidden;

		.main-content {
			display: flex;
			flex-direction: column;
			gap: 20px;
			margin-left: 40px;
			color: var(--white);
			padding-top: 83px;

			h1 {
				width: 70%;
			}

			.data {
				display: flex;
				flex-direction: row;
				align-items: center;
				gap: 20px;

				.tags {
					display: flex;
					flex-direction: row;
					gap: 20px;

					.tag {
						padding: 10px 20px;
						border-radius: 10px;
						color: var(--white);
						border: 1px solid var(--gray);
					}
				}

				.date {
					color: var(--white);
				}
			}
		}

		&::after {
			content: "";
			position: absolute;
			inset: 0;
			background-color: var(--black-transparent);
			opacity: 0.7;
			z-index: -1;
		}

		.background {
			position: absolute;
			width: 100%;
			height: 100%;
			object-fit: cover;
			z-index: -2;
		}

		@media (width < 900px) {
			& {
				.main-content {
					margin-left: 15px;

					h1 {
						width: 80%;
					}
				}

				.main-content {
					padding-top: 55px;
				}
			}
		}
	}

	.content {
		display: flex;
		flex-direction: column;
		gap: 40px;
		max-width: 800px;
		margin: 100px auto;
		padding: 0 15px;

		.text {
			display: flex;
			flex-direction: column;
			gap: 15px;
		}

		img {
			border-radius: 5px;
		}

		.resenas-google {
			margin: 0;
		}

		.doble {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 40px;

			@media (width < 900px) {
				& {
					grid-template-columns: 1fr;
					gap: 15px;
					padding: 30px;
				}
			}
		}
	}

	.related-posts {
		display: flex;
		flex-direction: column;
		gap: 40px;
		margin: 100px 40px;

		h2 {
			margin: 0;
		}

		.listado-posts {
			margin: 0;

			.post-card {
				.content {
					margin: 0;
				}
			}
		}

		@media (width < 900px) {
			& {
				margin: 50px 15px;
			}
		}
	}
}

.error-not-found {
	header {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 40px;
		height: 100svh;
	}
}

.legal {
	.header {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 20px;
		padding: 173px 15px 60px;
		text-align: center;
		border-bottom: 1px solid var(--gray);

		p {
			color: var(--dark-gray);
		}

		@media (width < 900px) {
			& {
				padding-top: 120px;
			}
		}
	}

	.content {
		display: flex;
		flex-direction: column;
		gap: 15px;
		max-width: 800px;
		margin: 100px auto;
		padding: 0 15px;

		h2,
		h3,
		h4 {
			font-weight: 400;
			line-height: 110%;
			text-wrap: balance;
		}

		h2 {
			font-size: clamp(22px, 2vw, 28px);
			margin-top: 30px;
		}

		h3 {
			font-size: clamp(18px, 1.5vw, 20px);
			margin-top: 15px;
		}

		h4 {
			font-size: 16px;
		}

		> :first-child {
			margin-top: 0;
		}

		p,
		li {
			line-height: 150%;
		}

		ul,
		ol {
			display: flex;
			flex-direction: column;
			gap: 8px;
			padding-left: 20px;
		}

		a {
			text-decoration: underline;
			word-break: break-word;
		}

		strong {
			font-weight: 700;
		}

		table {
			width: 100%;
			border-collapse: collapse;

			th,
			td {
				padding: 10px;
				border: 1px solid var(--gray);
				text-align: left;
				vertical-align: top;
			}
		}

		img {
			max-width: 100%;
			height: auto;
			border-radius: 5px;
		}

		@media (width < 900px) {
			& {
				margin: 50px auto;
			}
		}
	}
}

footer {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 100px 40px;
	padding: 40px;
	background-color: var(--gray);
	z-index: 11;
	position: absolute;
	width: calc(100% - 80px);

	.contacto,
	.ubicacion,
	.social,
	.opinion {
		display: flex;
		flex-direction: column;
		gap: 30px;

		p {
			max-width: 200px;
		}
	}

	.contacto {
		.botones-contacto {
			display: flex;
			flex-direction: column;
			gap: 10px;
		}
	}

	.ubicacion {
		a {
			max-width: 150px;
		}
	}

	.opinion {
		svg {
			display: block;
			max-width: 200px;
			height: auto;

			path {
				fill: var(--black);
			}
		}
	}

	.logo-footer {
		grid-column: span 4;
		display: block;
		width: 100%;
		height: auto;
		cursor: pointer;
		overflow: visible;

		&:focus:not(:focus-visible) {
			outline: none;
		}
	}

	.paginas-legales {
		grid-column: span 4;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		gap: 20px;

		a {
			text-decoration: underline;
		}
	}

	@media (width < 1100px) {
		& {
			grid-template-columns: repeat(2, 1fr);
			grid-gap: 50px 20px;

			.logo-footer,
			.paginas-legales {
				grid-column: span 2;
			}
		}
	}

	@media (width < 600px) {
		& {
			padding: 40px 15px;
			width: calc(100vw - 30px);
			grid-gap: 50px 10px;

			.opinion {
				svg {
					max-width: 130px;
				}
			}
		}
	}
}
/* Reseñas de Google */
.resenas-google {
	display: flex;
	flex-direction: column;
	gap: 40px;
	margin: 100px 40px;

	.cabecera {
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		gap: 40px;

		.titulos {
			display: flex;
			flex-direction: column;
			gap: 20px;

			h2 {
				margin: 0;
			}
		}

		.resumen {
			display: flex;
			flex-direction: column;
			align-items: flex-end;
			gap: 8px;
			flex-shrink: 0;
			color: var(--black);
			text-decoration: none;

			.extended {
				color: var(--black);
			}

			span:last-child {
				font-size: 14px;
				color: var(--dark-gray);
			}
		}
	}

	.estrellas {
		display: inline-flex;
		gap: 2px;

		svg {
			fill: var(--black);

			&.off {
				fill: var(--gray);
			}
		}
	}

	.slider-resenas {
		width: 100%;

		.splide__slide {
			display: flex;
		}

		.splide__pagination {
			position: static;
			margin-top: 40px;
		}

		.splide__pagination__page {
			background: var(--gray);
			opacity: 1;

			&.is-active {
				background: var(--black);
				transform: none;
			}
		}
	}

	.resena {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 15px;
		width: 100%;
		padding: 25px;
		border: 1px solid var(--gray);
		border-radius: 5px;

		header {
			display: flex;
			align-items: center;
			gap: 12px;

			img,
			.inicial {
				flex-shrink: 0;
				width: 40px;
				height: 40px;
				border-radius: 50%;
				object-fit: cover;
			}

			.inicial {
				display: grid;
				place-items: center;
				background: var(--gray);
			}

			.nombre {
				font-weight: 400;
			}

			time {
				font-size: 14px;
				color: var(--dark-gray);
			}
		}

		.texto {
			white-space: pre-line;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 6;
			overflow: hidden;
		}

		&.abierta .texto {
			display: block;
		}

		.ti-highlight {
			background: var(--yellow);
			color: inherit;
		}

		.leer-mas {
			padding: 0;
			border: 0;
			background: none;
			font: inherit;
			font-size: 14px;
			color: var(--dark-gray);
			text-decoration: underline;
			cursor: pointer;
		}
	}

	@media (width < 900px) {
		& {
			margin: 60px 15px;

			.cabecera {
				flex-direction: column;
				align-items: flex-start;
				gap: 20px;

				.resumen {
					align-items: flex-start;
				}
			}

			.resena {
				padding: 20px;
			}
		}
	}
}



/* Bloque de tarjetas (tecnología, servicios...): cuadrícula o carrusel */
.bloque-tarjetas {
	display: flex;
	flex-direction: column;
	gap: 50px;
	margin: 100px 40px;

	.cabecera {
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		gap: 40px;

		.titulos {
			display: flex;
			flex-direction: column;
			gap: 20px;

			h2 {
				max-width: 25ch;
			}
		}

		.intro {
			flex: 0 1 45ch;
		}
	}

	/* Flex en vez de grid: la última fila incompleta queda centrada */
	.tarjetas {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 20px;

		.tarjeta {
			flex: 0 1 calc((100% - 40px) / 3);
		}
	}

	&.sin-imagen .tarjetas .tarjeta {
		flex-basis: calc((100% - 60px) / 4);
	}

	.tarjeta {
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		gap: 20px;
		width: 100%;
		padding: 25px;
		border: 1px solid var(--gray);
		border-radius: 15px;

		.img-wrapper {
			overflow: hidden;
			border-radius: 5px;

			img {
				aspect-ratio: 4 / 3;
				object-fit: cover;
			}
		}

		.head {
			display: flex;
			flex-direction: row;
			align-items: center;
			gap: 15px;

			.icono {
				flex: 0 0 auto;
				width: 25px;
				height: 25px;
				padding: 12px;
				border: 1px solid var(--gray);
				border-radius: 5px;
				background-color: var(--white);
			}
		}

		.texto {
			display: flex;
			flex-direction: column;
			gap: 10px;
			max-width: 60ch;

			ul {
				display: flex;
				flex-direction: column;
				gap: 8px;

				li {
					list-style: none;
					position: relative;
					padding-left: 20px;
					font-size: 14px;
					font-weight: 300;

					&::before {
						content: "";
						position: absolute;
						left: 0;
						top: 50%;
						transform: translateY(-50%);
						height: 100%;
						width: 1px;
						background-color: var(--gray);
					}
				}
			}

			ol {
				display: flex;
				flex-direction: column;
				gap: 8px;
				padding-left: 20px;

				li {
					font-size: 14px;
					font-weight: 300;
				}
			}
		}
	}

	.slider-tarjetas {
		width: 100%;

		.splide__slide {
			display: flex;
		}

		.splide__pagination {
			position: static;
			margin-top: 40px;
		}

		.splide__pagination__page {
			background: var(--gray);
			opacity: 1;

			&.is-active {
				background: var(--black);
				transform: none;
			}
		}
	}

	> .cta {
		align-self: center;
	}

	@media (width < 1100px) {
		.tarjetas .tarjeta,
		&.sin-imagen .tarjetas .tarjeta {
			flex-basis: calc((100% - 20px) / 2);
		}
	}

	@media (width < 900px) {
		& {
			gap: 30px;
			margin: 60px 15px;

			.cabecera {
				flex-direction: column;
				align-items: flex-start;
				gap: 20px;

				.intro {
					flex-basis: auto;
				}
			}

			.tarjeta {
				padding: 20px;
				gap: 15px;
			}
		}
	}

	@media (width < 600px) {
		.tarjetas .tarjeta,
		&.sin-imagen .tarjetas .tarjeta {
			flex-basis: 100%;
		}
	}
}

/* Tabla informativa de tratamiento: concepto / valor */
.tabla-informativa {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	align-items: start;
	gap: 50px;
	margin: 100px 40px;

	&:not(:has(> .cabecera)) {
		grid-template-columns: 1fr;
	}

	.cabecera {
		display: flex;
		flex-direction: column;
		gap: 20px;

		h2 {
			max-width: 20ch;
		}
	}

	.contenido {
		display: flex;
		flex-direction: column;
		gap: 15px;
	}

	.filas {
		border: 1px solid var(--gray);
		border-radius: 15px;
		overflow: hidden;

		.fila {
			display: grid;
			grid-template-columns: minmax(120px, 1fr) 2fr;
			align-items: baseline;
			gap: 20px;
			padding: 25px 30px;

			& + .fila {
				border-top: 1px solid var(--gray);
			}

			dd {
				line-height: 1.25;
			}
		}
	}

	.nota {
		color: var(--dark-gray);
	}

	@media (width < 900px) {
		& {
			grid-template-columns: 1fr;
			gap: 30px;
			margin: 60px 15px;

			.filas .fila {
				grid-template-columns: 1fr;
				gap: 10px;
				padding: 20px;
			}
		}
	}
}

/* Tabla comparativa de tratamientos: cada opción es una columna-tarjeta continua */
.tabla-comparativa {
	display: flex;
	flex-direction: column;
	gap: 60px;
	padding: 100px 40px;
	margin: 100px 0;
	background-color: var(--black);
	color: var(--white);

	.extended {
		color: var(--white);
	}

	.cabecera {
		display: flex;
		flex-direction: column;
		gap: 20px;

		h2 {
			max-width: 25ch;
		}
	}

	.tabla-scroll {
		overflow-x: auto;
	}

	.tabla {
		display: grid;
		grid-template-columns: minmax(140px, 1fr) repeat(var(--columnas), minmax(0, 2fr));
		column-gap: 10px;
	}

	/* Las filas no generan caja: sus celdas se alinean en la rejilla de .tabla */
	.fila {
		display: contents;
	}

	.concepto,
	.celda {
		display: flex;
		align-items: center;
		padding: 20px 25px;
		border-top: 1px solid rgba(237, 237, 238, 0.15);
	}

	.concepto.extended {
		color: var(--gray);
	}

	.celda {
		font-size: 14px;
		font-weight: 300;
		line-height: 1.4;
		background-color: var(--dark-gray);

		&.destacada {
			background-color: var(--yellow);
			color: var(--black);
			border-top-color: rgba(57, 62, 65, 0.15);

			&.extended {
				color: var(--black);
			}
		}
	}

	.titulos {
		.concepto,
		.celda {
			border-top: none;
		}

		.celda {
			padding-top: 30px;
			padding-bottom: 30px;
			border-radius: 15px 15px 0 0;
			line-height: 1.2;
		}
	}

	.fila:last-child .celda {
		border-radius: 0 0 15px 15px;
	}

	.nota {
		max-width: 75ch;
		color: var(--gray);
	}

	@media (width < 900px) {
		& {
			gap: 40px;
			padding: 80px 15px;
		}
	}

	/* Móvil: el concepto pasa a rótulo sobre sus celdas */
	@media (width < 700px) {
		.tabla {
			grid-template-columns: repeat(var(--columnas), minmax(0, 1fr));
			row-gap: 5px;
			min-width: calc(var(--columnas) * 130px);
		}

		.concepto {
			grid-column: 1 / -1;
			padding: 20px 0 5px;
			border-top: none;
		}

		.titulos .concepto {
			display: none;
		}

		.celda,
		.titulos .celda,
		.fila:last-child .celda {
			padding: 15px;
			border-top: none;
			border-radius: 10px;
		}
	}
}


/* Vídeo de la Home: a ancho completo o reducido (vertical incluido) */
.bloque-video {
	display: flex;
	flex-direction: column;
	gap: 40px;
	margin: 100px 0;

	.cabecera {
		display: flex;
		flex-direction: column;
		gap: 20px;
		padding: 0 40px;

		h2 {
			max-width: 25ch;
		}
	}

	video {
		display: block;
		width: 100%;
		aspect-ratio: 16 / 9;
		max-height: 100svh;
		object-fit: cover;
		background-color: var(--black);
	}

	/* Reducido: el vídeo conserva su proporción y va junto al título */
	&.reducido {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		align-items: center;
		padding: 0 40px;

		&:not(:has(> .cabecera)) {
			grid-template-columns: 1fr;
		}

		.cabecera {
			padding: 0;
		}

		video {
			justify-self: center;
			width: auto;
			max-width: 100%;
			height: auto;
			max-height: 85svh;
			aspect-ratio: auto;
			object-fit: contain;
			border-radius: 15px;
		}
	}

	@media (width < 900px) {
		& {
			gap: 30px;
			margin: 60px 0;

			.cabecera {
				padding: 0 15px;
			}
		}

		&.reducido {
			grid-template-columns: 1fr;
			padding: 0 15px;

			video {
				max-height: 80svh;
				border-radius: 5px;
			}
		}
	}
}