/*
Theme Name: Ecortiella
Description: One-page theme for ecortiella.com. Layout and style only - all text lives in the page content so it can be edited in the block editor.
Version: 1.0.0
Requires at least: 6.5
Requires PHP: 8.1
Text Domain: ecortiella
*/

/* ---------------------------------------------------------------------
   Fonts (self-hosted, OFL). latin-ext covers Catalan l·l and friends.
   --------------------------------------------------------------------- */
@font-face { font-family: "Figtree"; font-weight: 400; font-display: swap; src: url(fonts/Figtree-400-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Figtree"; font-weight: 400; font-display: swap; src: url(fonts/Figtree-400-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Figtree"; font-weight: 500; font-display: swap; src: url(fonts/Figtree-500-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Figtree"; font-weight: 500; font-display: swap; src: url(fonts/Figtree-500-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Figtree"; font-weight: 600; font-display: swap; src: url(fonts/Figtree-600-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Figtree"; font-weight: 600; font-display: swap; src: url(fonts/Figtree-600-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Bricolage Grotesque"; font-weight: 400; font-display: swap; src: url(fonts/BricolageGrotesque-400-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Bricolage Grotesque"; font-weight: 400; font-display: swap; src: url(fonts/BricolageGrotesque-400-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Bricolage Grotesque"; font-weight: 600; font-display: swap; src: url(fonts/BricolageGrotesque-600-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Bricolage Grotesque"; font-weight: 600; font-display: swap; src: url(fonts/BricolageGrotesque-600-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ---------------------------------------------------------------------
   Tokens
   --------------------------------------------------------------------- */
:root {
	--ec-bg: #F8F3EC;
	--ec-ink: #33291F;
	--ec-body: #4D4239;
	--ec-muted: #6E6258;
	--ec-muted-dark: #5E5248;
	--ec-green: #56705E;
	--ec-green-dark: #435A4A;
	--ec-green-pale: #D5DECF;
	--ec-sand: #EFE3D1;
	--ec-sand-light: #F1E4D0;
	--ec-stone: #E8E4D8;
	--ec-white: #FFFFFF;
	--ec-line: #E6DACB;
	--ec-line-strong: #D2C1AA;
	--ec-line-step: #DCCDB9;
	--ec-input: #CDBBA6;
	--ec-gold: #B7802C;

	--ec-font: Figtree, "Segoe UI", system-ui, sans-serif;
	--ec-font-display: "Bricolage Grotesque", Georgia, serif;

	--ec-content: 1200px;
	--ec-gutter: clamp(20px, 5vw, 120px);
	--ec-pad-x: max(var(--ec-gutter), calc((100% - var(--ec-content)) / 2));
	--ec-pad-y: clamp(64px, 8vw, 110px);
	--ec-radius: 28px;

	--ec-h1: clamp(38px, 2.6vw + 26px, 64px);
	--ec-h2: clamp(31px, 1.3vw + 24px, 44px);
	--ec-display: clamp(52px, 4vw + 32px, 88px);
}

/* ---------------------------------------------------------------------
   Base
   --------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 24px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
	margin: 0;
	background: var(--ec-bg);
	color: var(--ec-ink);
	font-family: var(--ec-font);
	font-size: 18px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; }

a { color: var(--ec-green); text-underline-offset: 3px; }
a:hover { color: var(--ec-green-dark); }

:focus-visible { outline: 3px solid var(--ec-green); outline-offset: 3px; border-radius: 4px; }

.ec-skip {
	position: absolute; left: -9999px; top: 8px; z-index: 100;
	background: var(--ec-white); padding: 10px 16px; border-radius: 8px;
}
.ec-skip:focus { left: 16px; }

.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}

/* Content blocks: spacing comes from gap on the parents, never from margins.
   The selector beats WordPress' zero-specificity layout rules.
   .is-root-container is the block editor canvas, so Eli edits the real design. */
:is(.ec-main, .is-root-container) :is(p, h1, h2, h3, ul, ol, figure, blockquote) { margin: 0; }
:is(.ec-main, .is-root-container) .wp-block-group { margin: 0; }

:is(.ec-main, .is-root-container) h1, :is(.ec-main, .is-root-container) h2, :is(.ec-main, .is-root-container) h3 {
	font-family: var(--ec-font-display);
	font-weight: 600;
	color: var(--ec-green);
	text-wrap: balance;
}
:is(.ec-main, .is-root-container) h1 { font-size: var(--ec-h1); line-height: 1.05; letter-spacing: -0.024em; }
:is(.ec-main, .is-root-container) h2 { font-size: var(--ec-h2); line-height: 1.12; letter-spacing: -0.012em; }
:is(.ec-main, .is-root-container) h3 { font-size: 26px; line-height: 1.2; }

/* ---------------------------------------------------------------------
   Buttons (core/button). Default = green pill. style "Enlace" (is-style-ec-link) = text link.
   --------------------------------------------------------------------- */
:is(.ec-main, .is-root-container) .wp-block-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
:is(.ec-main, .is-root-container) .wp-block-button { margin: 0; }

.ec-btn,
:is(.ec-main, .is-root-container) .wp-block-button__link {
	display: inline-block;
	background: var(--ec-green);
	color: var(--ec-white);
	font-family: var(--ec-font);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.2;
	padding: 18px 32px;
	border: 0;
	border-radius: 999px;
	text-decoration: none;
	text-align: center;
	cursor: pointer;
	transition: background-color .15s ease;
}
.ec-btn:hover,
:is(.ec-main, .is-root-container) .wp-block-button__link:hover { background: var(--ec-green-dark); color: var(--ec-white); }

:is(.ec-main, .is-root-container) .is-style-ec-link .wp-block-button__link {
	background: transparent;
	color: var(--ec-green);
	font-weight: 500;
	padding: 18px 8px;
	text-decoration: underline;
}
:is(.ec-main, .is-root-container) .is-style-ec-link .wp-block-button__link:hover { background: transparent; color: var(--ec-green-dark); }

/* ---------------------------------------------------------------------
   Header
   --------------------------------------------------------------------- */
.ec-header { border-bottom: 1px solid var(--ec-line); }
.ec-header__inner {
	display: flex; align-items: center; justify-content: space-between; gap: 24px;
	padding: 28px var(--ec-pad-x);
}
.ec-logo { display: block; flex-shrink: 0; }
.ec-logo img { display: block; height: 52px; width: auto; }

.ec-nav { display: flex; align-items: center; gap: 32px; }
.ec-nav__list { display: flex; align-items: center; gap: 32px; margin: 0; padding: 0; list-style: none; }
.ec-nav a { color: var(--ec-green); font-size: 16px; font-weight: 500; text-decoration: none; }
.ec-nav a:hover { color: var(--ec-green-dark); text-decoration: underline; }
.ec-nav .ec-btn { color: var(--ec-white); font-size: 16px; padding: 13px 24px; text-decoration: none; }

.ec-header__tools { display: flex; align-items: center; gap: 12px; }

/* Language dropdown: <details>, works without JavaScript. */
.ec-lang { position: relative; }
.ec-lang summary {
	display: flex; align-items: center; gap: 6px;
	height: 46px; padding: 0 14px;
	border: 1px solid var(--ec-input); border-radius: 999px;
	font-size: 15px; font-weight: 600; color: var(--ec-ink);
	cursor: pointer; list-style: none;
}
.ec-lang summary::-webkit-details-marker { display: none; }
.ec-lang summary svg { flex-shrink: 0; }
.ec-lang[open] summary .ec-chevron { transform: rotate(180deg); }
.ec-lang ul {
	position: absolute; right: 0; top: calc(100% + 8px); z-index: 20;
	min-width: 160px; margin: 0; padding: 8px; list-style: none;
	background: var(--ec-white); border-radius: 16px;
	box-shadow: 0 8px 28px rgba(51, 41, 31, .14);
}
.ec-lang li a {
	display: block; padding: 10px 14px; border-radius: 10px;
	color: var(--ec-ink); font-size: 16px; text-decoration: none;
}
.ec-lang li a:hover { background: var(--ec-bg); }
.ec-lang li a[aria-current] { font-weight: 600; color: var(--ec-green); }

.ec-menu-toggle {
	display: none; align-items: center; justify-content: center;
	width: 46px; height: 46px; padding: 0;
	background: transparent; border: 1px solid var(--ec-input); border-radius: 999px;
	color: var(--ec-ink); cursor: pointer;
}

@media (max-width: 1100px) {
	.ec-header__inner { flex-wrap: wrap; padding-block: 18px; }
	.ec-logo img { height: 42px; }
	.ec-menu-toggle { display: inline-flex; }
	.ec-nav {
		display: none; order: 3; flex-basis: 100%;
		flex-direction: column; align-items: stretch; gap: 4px;
		padding: 12px 0 8px;
	}
	.ec-nav.is-open { display: flex; }
	.ec-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
	.ec-nav__list a { display: block; padding: 14px 4px; font-size: 18px; border-bottom: 1px solid var(--ec-line); }
	.ec-nav .ec-btn { margin-top: 16px; padding: 16px 24px; font-size: 17px; }
}
@media (max-width: 480px) {
	.ec-logo img { height: 34px; }
	.ec-lang summary, .ec-menu-toggle { height: 42px; }
	.ec-lang summary { padding: 0 10px; }
	.ec-menu-toggle { width: 42px; }
}

/* ---------------------------------------------------------------------
   Sections
   --------------------------------------------------------------------- */
.ec-section { padding: var(--ec-pad-y) var(--ec-pad-x); }
.ec-section > .wp-block-group__inner-container { display: contents; }

.ec-section--sand { background: var(--ec-sand); }
.ec-section--white { background: var(--ec-white); }

.ec-head {
	display: flex; justify-content: space-between; align-items: flex-end; gap: 16px 40px;
	flex-wrap: wrap;
}
.ec-head > p { font-size: 18px; line-height: 1.5; color: var(--ec-muted); max-width: 440px; }

/* Hero ------------------------------------------------------------- */
.ec-hero {
	display: grid;
	grid-template-columns: minmax(0, 630px) minmax(0, 1fr);
	align-items: center;
	gap: 48px 48px;
	padding-top: clamp(48px, 6vw, 96px);
}
.ec-hero__text { display: flex; flex-direction: column; gap: 28px; }
.ec-eyebrow { font-size: 18px; color: var(--ec-muted); }
.ec-lead { font-size: clamp(19px, 0.4vw + 17px, 21px); line-height: 1.55; max-width: 560px; }
.ec-hero__text .wp-block-buttons { padding-top: 8px; }

.ec-check {
	display: flex; align-items: center; gap: 10px;
	margin-top: -12px !important;
	font-size: 16px; color: var(--ec-muted);
}
.ec-check::before {
	content: ""; flex-shrink: 0; width: 22px; height: 22px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Ccircle cx='11' cy='11' r='11' fill='%23D5DECF'/%3E%3Cpath d='M6.5 11.2 9.6 14.2 15.5 8.3' fill='none' stroke='%2356705E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ec-hero__meta {
	display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
	padding-top: 16px; font-size: 15px; color: var(--ec-muted);
}
/* Google rating as a pill: stars, score, count. */
.ec-rating a {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 10px 18px; background: var(--ec-white); border: 1px solid var(--ec-line); border-radius: 999px;
	color: var(--ec-ink); text-decoration: none;
	transition: border-color .15s ease;
}
.ec-rating a:hover { border-color: var(--ec-green); color: var(--ec-ink); }
.ec-rating a::before {
	content: "★★★★★"; margin-right: 4px;
	color: var(--ec-gold); font-size: 16px; letter-spacing: 1px;
}
.ec-rating strong { font-weight: 600; }
.ec-rating em { font-style: normal; color: var(--ec-muted); }
/* Facts line: sessions · COPC · price, separated by dots. */
.ec-hero__facts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding-left: 4px; }
.ec-hero__facts > p + p::before { content: "·"; margin-right: 14px; color: var(--ec-input); }
@media (max-width: 640px) {
	.ec-hero__facts { flex-direction: column; align-items: flex-start; gap: 4px; }
	.ec-hero__facts > p + p::before { display: none; }
}

.ec-hero__art img { display: block; width: 100%; border-radius: var(--ec-radius); }

@media (max-width: 960px) {
	.ec-hero { grid-template-columns: minmax(0, 1fr); }
	.ec-hero__art { max-width: 560px; }
}

/* "Tal vez estés aquí porque…" ---------------------------------------- */
.ec-recognise { display: flex; flex-direction: column; gap: 48px; }
:is(.ec-main, .is-root-container) .ec-statements {
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 80px;
	padding: 0; list-style: none;
}
.ec-statements li {
	padding-top: 24px; border-top: 1px solid var(--ec-line-strong);
	font-family: var(--ec-font-display); font-size: clamp(22px, 0.6vw + 19px, 28px); line-height: 1.3;
}
.ec-closing { font-size: 20px; line-height: 1.6; max-width: 720px; color: var(--ec-muted-dark); }

@media (max-width: 760px) {
	:is(.ec-main, .is-root-container) .ec-statements { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}

/* About ------------------------------------------------------------ */
.ec-about {
	display: grid; grid-template-columns: minmax(0, 481px) minmax(0, 660px);
	justify-content: space-between; align-items: center; gap: 48px 88px;
}
.ec-about__photo img {
	display: block; width: 100%;
	aspect-ratio: 591 / 671; object-fit: cover; object-position: 50% 0;
}
.ec-about__text { display: flex; flex-direction: column; gap: 22px; }
.ec-about__text > p { font-size: 19px; line-height: 1.6; }
.ec-about__text > .ec-credentials { padding-top: 8px; font-size: 16px; line-height: 1.6; color: var(--ec-muted); }

@media (max-width: 900px) {
	.ec-about { grid-template-columns: minmax(0, 1fr); }
	.ec-about__photo { max-width: 400px; margin-inline: auto !important; }
}

/* Topic cards -------------------------------------------------------- */
.ec-areas { display: flex; flex-direction: column; gap: 48px; }
.ec-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.ec-card {
	display: flex; flex-direction: column; gap: 16px;
	min-height: 280px; padding: 40px;
	border-radius: var(--ec-radius); background: var(--ec-white);
}
.ec-cards > .ec-card:nth-child(6n+1), .ec-cards > .ec-card:nth-child(6n+6) { background: var(--ec-stone); }
.ec-cards > .ec-card:nth-child(6n+3), .ec-cards > .ec-card:nth-child(6n+5) { background: var(--ec-sand-light); }
.ec-card::before {
	content: ""; display: block; width: 44px; height: 44px;
	background: center / contain no-repeat;
}
:is(.ec-main, .is-root-container) .ec-card h3 { font-size: 28px; }
.ec-card p { font-size: 17px; line-height: 1.5; }
.ec-card p a { font-size: 16px; font-weight: 600; }

.ec-icon-anxiety::before    { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2356705E' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M2 12c2-3 4-3 6 0s4 3 6 0 4-3 6 0'/%3E%3Cpath d='M2 17c2-3 4-3 6 0s4 3 6 0 4-3 6 0'/%3E%3Cpath d='M2 7c2-3 4-3 6 0s4 3 6 0 4-3 6 0'/%3E%3C/svg%3E"); }
.ec-icon-mood::before       { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2356705E' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 16a4 4 0 1 1 .6-7.95A5 5 0 0 1 17 9a3.5 3.5 0 0 1 0 7z'/%3E%3Cpath d='M9 19v2'/%3E%3Cpath d='M13 19v2'/%3E%3C/svg%3E"); }
.ec-icon-grief::before      { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2356705E' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 19c0-8 5-14 14-14 0 9-6 14-14 14z'/%3E%3Cpath d='M5 19l8-8'/%3E%3C/svg%3E"); }
.ec-icon-couple::before     { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2356705E' stroke-width='1.5'%3E%3Ccircle cx='9' cy='12' r='6'/%3E%3Ccircle cx='15' cy='12' r='6'/%3E%3C/svg%3E"); }
.ec-icon-selfesteem::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2356705E' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.6-7 10-7 10z'/%3E%3C/svg%3E"); }
.ec-icon-addiction::before  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2356705E' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12a8 8 0 1 1-2.3-5.7'/%3E%3Cpath d='M20 4v4h-4'/%3E%3C/svg%3E"); }

@media (max-width: 1000px) { .ec-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
	.ec-cards { grid-template-columns: minmax(0, 1fr); gap: 16px; }
	.ec-card { min-height: 0; padding: 32px 28px; }
}

/* Process steps ------------------------------------------------------ */
.ec-process { display: flex; flex-direction: column; gap: 56px; }
.ec-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 56px; counter-reset: ec-step; }
.ec-step { position: relative; display: flex; flex-direction: column; gap: 18px; counter-increment: ec-step; }
.ec-step::before {
	content: counter(ec-step);
	display: flex; align-items: center; justify-content: center;
	width: 64px; height: 64px; border-radius: 999px;
	background: var(--ec-green);
	color: var(--ec-white);
	font-family: var(--ec-font-display); font-size: 28px; font-weight: 600;
}
.ec-step:not(:last-child)::after {
	content: ""; position: absolute; top: 32px; left: 80px; right: 0;
	height: 1px; background: var(--ec-line-step);
}
.ec-step p { font-size: 18px; line-height: 1.55; }
/* Step buttons sit at the bottom of their column, smaller than the main CTAs. */
:is(.ec-main, .is-root-container) .ec-step .wp-block-buttons { margin-top: auto; padding-top: 4px; }
:is(.ec-main, .is-root-container) .ec-step .wp-block-button__link {
	display: inline-flex; align-items: center; gap: 8px;
	font-size: 16px; padding: 12px 22px;
}
.ec-step .wp-block-button__link::before {
	content: ""; width: 18px; height: 18px; flex-shrink: 0; background: currentColor;
	-webkit-mask: var(--ec-step-icon) center / contain no-repeat; mask: var(--ec-step-icon) center / contain no-repeat;
}
.ec-step .wp-block-button__link[href*="wa.me"] {
	--ec-step-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20l1.4-4A8 8 0 1 1 8 18.6z'/%3E%3C/svg%3E");
}
.ec-step .wp-block-button__link[href="#reservar"] {
	--ec-step-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3Cpath d='M8 3v4'/%3E%3Cpath d='M16 3v4'/%3E%3C/svg%3E");
}
.ec-step .wp-block-button__link:not([href*="wa.me"]):not([href="#reservar"])::before { display: none; }

@media (max-width: 860px) {
	.ec-steps { grid-template-columns: minmax(0, 1fr); gap: 36px; }
	.ec-step:not(:last-child)::after { display: none; }
}

/* Reviews ------------------------------------------------------------ */
/* Per source: a heading row (name + score), the reviews, a "see more" button.
   Google = Trustindex widget; other platform = quotes written in the page. */
.ec-reviews { display: flex; flex-direction: column; gap: 28px; padding-block: clamp(64px, 6vw, 80px); }
.ec-review-source { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }
:is(.ec-main, .is-root-container) .ec-review-source h3 { font-size: 24px; }
.ec-review-score { display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--ec-muted-dark); }
.ec-review-score::before { content: "★★★★★"; color: var(--ec-gold); letter-spacing: 1px; }
.ec-review-score strong { color: var(--ec-ink); font-weight: 600; }
.ec-reviews > .wp-block-buttons { margin-top: -8px; }
.ec-reviews > .wp-block-buttons + .ec-review-source { margin-top: 16px; }

.ec-review-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: start; }
.ec-review {
	display: flex; flex-direction: column; justify-content: space-between; gap: 18px;
	padding: 26px 28px; background: var(--ec-bg); border-radius: 22px;
}
:is(.ec-main, .is-root-container) .ec-review .wp-block-quote {
	display: flex; flex-direction: column; gap: 10px;
	margin: 0; padding: 0; border: 0; font-size: 17px; line-height: 1.55;
}
.ec-review .wp-block-details { font-size: 17px; line-height: 1.55; margin-top: -8px; }
.ec-review .wp-block-details summary {
	cursor: pointer; color: var(--ec-green); font-weight: 600; font-size: 15px; list-style-position: inside;
}
.ec-review .wp-block-details[open] summary { margin-bottom: 10px; }
.ec-review .wp-block-details > p + p { margin-top: 10px; }
.ec-review__by { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 14px; color: var(--ec-muted); }
.ec-review__name::before { content: "★★★★★"; margin-right: 6px; color: var(--ec-gold); letter-spacing: 1px; }
.ec-review__badge {
	flex-shrink: 0; padding: 3px 10px; background: var(--ec-white); border: 1px solid var(--ec-line); border-radius: 999px;
	font-size: 12px; font-weight: 600; color: var(--ec-muted-dark);
}
@media (max-width: 960px) { .ec-review-grid { grid-template-columns: minmax(0, 1fr); } }

/* "Contorno" button style: green outline pill. In the reviews it is smaller and
   gets an "opens elsewhere" arrow. */
:is(.ec-main, .is-root-container) .is-style-ec-outline .wp-block-button__link {
	background: transparent; color: var(--ec-green); border: 1.5px solid var(--ec-green);
}
:is(.ec-main, .is-root-container) .is-style-ec-outline .wp-block-button__link:hover { background: var(--ec-green); color: var(--ec-white); }
:is(.ec-main, .is-root-container) .ec-reviews .wp-block-button__link {
	display: inline-flex; align-items: center; gap: 8px; font-size: 15px; padding: 9px 18px;
}
.ec-reviews .wp-block-button__link[target="_blank"]::after {
	content: ""; width: 13px; height: 13px; background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6'/%3E%3Cpath d='M20 4l-9 9'/%3E%3Cpath d='M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6'/%3E%3Cpath d='M20 4l-9 9'/%3E%3Cpath d='M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Prices ------------------------------------------------------------- */
.ec-pricing { display: flex; flex-direction: column; gap: 48px; }
.ec-prices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.ec-price {
	position: relative;
	display: flex; flex-direction: column; gap: 10px;
	padding: 36px;
	background: var(--ec-white); border: 1px solid var(--ec-line); border-radius: var(--ec-radius);
}
.ec-price.is-featured { border: 2px solid var(--ec-green); padding: 35px; }
:is(.ec-main, .is-root-container) .ec-price h3 {
	min-height: 34px; margin-bottom: 14px; display: flex; align-items: center;
	font-family: var(--ec-font); font-size: 20px; color: var(--ec-ink);
}
.ec-price__badge {
	position: absolute; top: 36px; right: 36px;
	background: var(--ec-sand-light); color: var(--ec-green-dark);
	font-size: 14px; font-weight: 600; line-height: 1.4;
	padding: 6px 12px; border-radius: 999px;
}
.ec-price__amount { display: flex; align-items: baseline; gap: 8px; font-size: 17px; color: var(--ec-muted); }
.ec-price__amount strong {
	font-family: var(--ec-font-display); font-size: clamp(48px, 2vw + 34px, 64px); font-weight: 600;
	line-height: 1; letter-spacing: -2px; color: var(--ec-green);
}
.ec-price__meta { font-size: 16px; font-weight: 500; color: var(--ec-green); }
.ec-price__desc {
	margin-top: 14px !important; padding-top: 24px; border-top: 1px solid var(--ec-line);
	font-size: 17px; line-height: 1.55; color: var(--ec-body);
}

.ec-note {
	display: flex; justify-content: space-between; align-items: center; gap: 20px 32px;
	padding: 28px 36px; background: var(--ec-sand-light); border-radius: 24px;
}
.ec-note > p { font-size: 18px; line-height: 1.5; }
.ec-note .wp-block-buttons { flex-shrink: 0; }

@media (max-width: 1000px) {
	.ec-prices { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
	.ec-note { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 480px) {
	.ec-price, .ec-price.is-featured { padding: 28px 24px; }
	.ec-price__badge { position: static; align-self: flex-start; order: -1; }
	.ec-note { padding: 24px; }
}

/* FAQ ---------------------------------------------------------------- */
.ec-faq { display: flex; flex-direction: column; gap: 32px; padding-top: 0; }
.ec-faq__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 64px; }
.ec-faq__item {
	display: flex; flex-direction: column; gap: 8px;
	padding: 22px 0; border-top: 1px solid var(--ec-line);
}
:is(.ec-main, .is-root-container) .ec-faq__item h3 { font-family: var(--ec-font); font-size: 20px; line-height: 1.35; color: var(--ec-ink); }
.ec-faq__item p { font-size: 17px; line-height: 1.55; color: var(--ec-body); }

@media (max-width: 860px) { .ec-faq__list { grid-template-columns: minmax(0, 1fr); } }

/* Booking (Cal.com embed, loaded by footer.php) ---------------------- */
.ec-booking { display: flex; flex-direction: column; gap: 28px; padding-top: 0; }
.ec-cal {
	position: relative; min-height: 640px; overflow: hidden;
	background: var(--ec-white); border-radius: var(--ec-radius);
	padding: 24px 24px 8px;
}
.ec-cal iframe { display: block; width: 100%; border: 0; }
.ec-cal__tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.ec-cal__tab {
	padding: 11px 20px; border: 1px solid var(--ec-input); border-radius: 999px;
	font-size: 16px; font-weight: 600; line-height: 1.2; color: var(--ec-ink); text-decoration: none;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.ec-cal__tab:hover { border-color: var(--ec-green); color: var(--ec-green-dark); }
.ec-cal__tab[aria-selected="true"] { background: var(--ec-green); border-color: var(--ec-green); color: var(--ec-white); }
.ec-cal__frame { margin-top: 16px; }
.ec-cal__fallback {
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
	min-height: 560px; margin: 0; text-align: center; color: var(--ec-muted); font-size: 17px;
}
.ec-cal__fallback::before {
	content: ""; width: 56px; height: 56px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2356705E' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3Cpath d='M8 3v4'/%3E%3Cpath d='M16 3v4'/%3E%3Cpath d='M8 14h2'/%3E%3Cpath d='M14 14h2'/%3E%3Cpath d='M8 17h2'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ec-cal__fallback a { font-weight: 600; }
.ec-cal.is-ready { min-height: 0; }
.ec-cal.is-ready .ec-cal__fallback { display: none; }
@media (max-width: 640px) {
	.ec-cal { min-height: 560px; border-radius: 20px; padding: 16px 8px 4px; }
	.ec-cal__tab { padding: 9px 14px; font-size: 15px; }
	.ec-cal__fallback { min-height: 480px; }
}

/* Contact ------------------------------------------------------------ */
.ec-contact {
	display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 520px);
	justify-content: space-between; align-items: start; gap: 48px 96px;
	padding-block: clamp(72px, 9vw, 120px);
}
.ec-contact__text { display: flex; flex-direction: column; gap: 24px; }
:is(.ec-main, .is-root-container) .ec-contact__text h2 { font-size: var(--ec-display); line-height: 1; letter-spacing: -0.03em; }
.ec-contact__text > p { font-size: 21px; line-height: 1.55; }
.ec-contact__text > .ec-contact__line { font-size: 18px; }
.ec-contact__text > .ec-contact__line + .ec-contact__line { margin-top: -10px; }
.ec-contact__text .wp-block-buttons { padding-top: 8px; }
.ec-contact__form {
	padding: 44px; background: var(--ec-white); border-radius: var(--ec-radius);
}

@media (max-width: 1000px) {
	.ec-contact { grid-template-columns: minmax(0, 1fr); }
	.ec-contact__form { max-width: 560px; }
}
@media (max-width: 480px) { .ec-contact__form { padding: 28px 22px; } }

/* Gutena Forms, restyled to the design. Their own variables first, then the
   few elements they don't expose. Scoped to .ec-contact__form. */
.ec-contact__form .gutena-forms-contact-form {
	--wp--gutena-forms--input-border-color: var(--ec-input);
	--wp--gutena-forms--input-focus-border-color: var(--ec-green);
	--wp--gutena-forms--input-border-width: 1px;
	--wp--gutena-forms--input-border-radius: 12px;
	--wp--gutena-forms--label-font-size: 16px;
	--wp--gutena-forms--label-font-weight: 600;
	--wp--gutena-forms--placeholder-font-size: 17px;
	--wp--style--block-gap: 20px;
	display: flex; flex-direction: column; gap: 20px;
	padding: 0 !important; margin: 0;
}
.ec-contact__form .wp-block-gutena-field-group { margin: 0 !important; }
.ec-contact__form .wp-block-gutena-field-group > .wp-block-group { gap: 8px; }
.ec-contact__form .wp-block-gutena-form-field { padding: 0 !important; }
.ec-contact__form .wp-block-gutena-field-group p:empty:not(.gutena-forms-field-error-msg) { display: none; }
.ec-contact__form .optin-container { font-size: 15px; line-height: 1.5; color: var(--ec-body); }
.ec-contact__form :is(.wp-block-gutena-form-confirm-msg, .wp-block-gutena-form-error-msg) > .wp-block-group {
	padding: 16px 18px !important; border-radius: 12px !important; align-items: flex-start;
}
.ec-contact__form .wp-block-gutena-form-confirm-msg > .wp-block-group { background: var(--ec-green-pale) !important; }
.ec-contact__form :is(.wp-block-gutena-form-confirm-msg, .wp-block-gutena-form-error-msg) p {
	font-size: 17px !important; font-weight: 500 !important; line-height: 1.45 !important; color: var(--ec-ink) !important;
}
.ec-contact__form .form-message-icon { margin: 3px 0 0 !important; flex-shrink: 0; }
/* After sending, Gutena collapses the fields but leaves them in the flex flow. */
.ec-contact__form .gutena-forms-contact-form.hide-form-now { gap: 0; }
.ec-contact__form:has(.hide-form-now) > p { display: none; }
:is(.ec-main, .is-root-container) .ec-contact__form .heading-input-label-gutena {
	font-family: var(--ec-font); font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--ec-ink);
}
.ec-contact__form :is(input[type="text"], input[type="email"], input[type="tel"], textarea) {
	width: 100%;
	font-family: inherit; font-size: 17px; color: var(--ec-ink);
	padding: 14px 16px;
	background: var(--ec-white); border: 1px solid var(--ec-input); border-radius: 12px;
}
.ec-contact__form textarea { resize: vertical; min-height: 120px; }
.ec-contact__form :is(input, textarea):focus { outline: 2px solid var(--ec-green); outline-offset: 0; border-color: var(--ec-green); }
.ec-contact__form input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--ec-green); }
.ec-contact__form .gutena-forms-submit-buttons { justify-content: stretch; }
.ec-contact__form .gutena-forms-submit-button,
.ec-contact__form .gutena-forms-submit-button .wp-block-button__link { width: 100%; }
.ec-contact__form .gutena-forms-field-error-msg:empty { display: none; }
.ec-contact__form > p { font-size: 14px; line-height: 1.5; color: var(--ec-muted); }

/* Trustindex widget: let it breathe inside the section. */
.ec-reviews .ti-widget { margin: 0 !important; }

/* ---------------------------------------------------------------------
   Footer
   --------------------------------------------------------------------- */
.ec-footer {
	display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 24px 48px;
	padding: 56px var(--ec-pad-x);
	background: var(--ec-sand); color: var(--ec-muted-dark); font-size: 15px;
}
.ec-footer__id { display: flex; flex-direction: column; gap: 6px; }
.ec-footer__name { font-family: var(--ec-font-display); font-size: 22px; font-weight: 600; color: var(--ec-ink); }
.ec-footer__links { display: flex; flex-wrap: wrap; gap: 12px 28px; margin: 0; padding: 0; list-style: none; }
.ec-footer__links a { color: var(--ec-ink); }
.ec-footer__links a:hover { color: var(--ec-green-dark); }