/*
 * Home page (front page) — layout SaaS de Picstome.
 *
 * El contenido son BLOQUES NATIVOS de WordPress; esta hoja solo da estilo.
 *
 * Paleta corporativa:
 *   verde   #316d61
 *   ink     #322f30
 *   coral   #ee6958
 *   salvia  #c6d8af
 *   papel   #f1f2eb
 */

.ps-home {
	--ps-green: #316d61;
	--ps-green-dark: #24544a;
	--ps-ink: #322f30;
	--ps-coral: #ee6958;
	--ps-sage: #c6d8af;
	--ps-paper: #f1f2eb;
	--ps-white: #ffffff;
	--ps-muted: #5b6462;
	--ps-line: #dfe6e2;
	--ps-radius: 18px;
	--ps-shadow: 0 18px 44px -26px rgba(24, 58, 51, .45);
	--ps-shadow-strong: 0 40px 90px -50px rgba(24, 58, 51, .55);
}

/* ============================================================
   Base
   ============================================================ */
.ps-home .entry-content { padding-left: 0; padding-right: 0; }
.ps-home .entry-content > * { max-width: none; }
.ps-home .entry-content > .wp-block-group.alignfull,
.ps-home .entry-content > .wp-block-group.ps-hero {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/*
 * GeneratePress añade un `<div class="wp-block-group__inner-container">` dentro
 * de cada bloque group. Ese wrapper extra rompe los grid/flex de las clases
 * ps-* (el grupo solo tendría un hijo). Con `display: contents` ese wrapper
 * desaparece del layout y los hijos reales pasan a ser hijos directos.
 */
.ps-home .wp-block-group__inner-container,
.ps-home .wp-block-group .wp-block-group__inner-container {
	display: contents !important;
	padding: 0 !important;
	margin: 0 !important;
	max-width: none !important;
	width: auto !important;
}

.ps-home .ps-sec,
.ps-home .ps-hero,
.ps-home .ps-cta,
.ps-home .ps-oss {
	padding-top: clamp(56px, 7vw, 96px);
	padding-bottom: clamp(56px, 7vw, 96px);
	padding-left: 0 !important;
	padding-right: 0 !important;
}
.ps-home .ps-hero { padding-top: 0; padding-bottom: 0; }
.ps-home .ps-stats { padding-top: 30px; padding-bottom: 30px; }
.ps-home .ps-oss { padding-top: 34px; padding-bottom: 34px; }

.ps-shell {
	width: 100%;
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	padding-left: clamp(20px, 4vw, 48px);
	padding-right: clamp(20px, 4vw, 48px);
	box-sizing: border-box;
}
.ps-hero-inner {
	width: 100%;
	max-width: 1340px;
	margin: 0 auto;
	padding: clamp(44px, 6vw, 88px) clamp(20px, 4vw, 48px) clamp(28px, 4vw, 56px);
	box-sizing: border-box;
}
.ps-cta-inner { max-width: 800px; margin: 0 auto; }
.ps-oss-inner { max-width: 1200px; margin: 0 auto; padding-left: clamp(20px, 4vw, 48px); padding-right: clamp(20px, 4vw, 48px); }

/* ============================================================
   Tipografía de sección
   ============================================================ */
.ps-eyebrow {
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
	font-size: .78rem !important;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ps-coral) !important;
	background: #fff;
	border: 1px solid rgba(238, 105, 88, .38);
	border-radius: 999px;
	padding: 8px 14px !important;
	margin: 0 0 20px !important;
	line-height: 1;
	width: auto !important;
	max-width: fit-content;
}
.ps-eyebrow::before {
	content: "";
	width: 7px; height: 7px;
	border-radius: 50%;
	background: var(--ps-coral);
	display: inline-block;
}

.ps-h2 {
	font-size: clamp(1.9rem, 3.2vw, 2.8rem) !important;
	line-height: 1.1 !important;
	letter-spacing: -.03em;
	margin: 0 0 .5em !important;
}
.ps-h2--center { text-align: center; }
.ps-lead {
	font-size: clamp(1rem, 1.3vw, 1.12rem) !important;
	line-height: 1.6;
	color: var(--ps-muted) !important;
	max-width: 640px;
	margin: 0 0 44px !important;
}
.ps-lead--center { text-align: center; margin-left: auto !important; margin-right: auto !important; }

/* ============================================================
   HERO — texto izquierda, app derecha
   ============================================================ */
.ps-hero {
	background-color: var(--ps-paper);
	background-image:
		radial-gradient(100% 90% at 88% -10%, rgba(198, 216, 175, .55) 0%, rgba(198, 216, 175, 0) 62%),
		radial-gradient(90% 70% at 0% 0%, rgba(49, 109, 97, .10) 0%, rgba(49, 109, 97, 0) 60%),
		linear-gradient(180deg, #f6f7f1 0%, var(--ps-paper) 55%, #ffffff 100%);
	overflow: hidden;
}
.ps-hero-inner {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr);
	gap: clamp(24px, 2.6vw, 44px);
	align-items: center;
}
@media (max-width: 700px) {
	.ps-hero-inner { grid-template-columns: 1fr; padding-top: clamp(32px, 6vw, 56px); }
}

.ps-hero-copy { max-width: 560px; }
.ps-hero-title {
	font-size: clamp(2.05rem, 3.6vw, 3.15rem) !important;
	line-height: 1.06 !important;
	letter-spacing: -.035em !important;
	font-weight: 700 !important;
	margin: 0 0 .35em !important;
	color: var(--ps-ink) !important;
	text-wrap: balance;
}
.ps-hero-title em { font-style: normal; color: var(--ps-green); }
.ps-hero-sub {
	font-size: clamp(1rem, 1.4vw, 1.18rem) !important;
	line-height: 1.6 !important;
	color: #4a5250 !important;
	margin: 0 0 28px !important;
	max-width: 52ch;
}
.ps-hero-copy .wp-block-buttons { gap: 10px; margin-bottom: 16px !important; }
.ps-hero-note {
	margin: 0 0 22px !important;
	font-size: .85rem !important;
	color: var(--ps-muted) !important;
}
.ps-hero-pills-text {
	display: block !important;
	margin: 0 !important;
	font-size: .8rem !important;
	font-weight: 600;
	letter-spacing: .01em;
	color: var(--ps-green) !important;
	line-height: 1.7;
	opacity: .92;
}

/* Visual: ventana de app + tarjetas flotantes */
.ps-hero-visual { position: relative; }
.ps-hero-visual .ps-app-shot { max-width: 760px; margin-left: auto !important; }
/* La captura del panel es más densa que una galería: algo más pequeña para que no domine. */
.ps-home:not(.ps-subpage) .ps-hero-visual .ps-app-shot { max-width: 590px; }
@media (max-width: 700px) {
	.ps-hero-visual .ps-app-shot { max-width: 100%; margin: 0 !important; }
}
/* Aire abajo para que las tarjetas puedan colgar del borde de la captura
   (el hero tiene overflow:hidden y si no, se recortarían). */
.ps-hero-visual { padding: 0 0 46px; }
@media (max-width: 1000px) { .ps-hero-visual { padding-bottom: 34px; } }
@media (max-width: 700px) { .ps-hero-visual { padding-bottom: 8px; } }

.ps-app-shot {
	position: relative;
	display: block !important;
	margin: 0 !important;
	border-radius: 16px;
	background: #fff;
	border: 1px solid #dbe4df;
	box-shadow:
		0 2px 4px rgba(24, 58, 51, .05),
		0 28px 60px -34px rgba(24, 58, 51, .55);
	overflow: visible;
}
.ps-app-shot img {
	display: block;
	width: 100% !important;
	height: auto;
	margin: 0 !important;
	border-radius: 15px !important;
}

/* Tarjetas flotantes: fondo claro, texto oscuro, icono coral */
.ps-chip {
	position: absolute;
	display: flex !important;
	align-items: center;
	gap: 11px;
	background: #ffffff !important;
	border: 1px solid #cfdbd6;
	border-radius: 13px;
	padding: 11px 14px !important;
	box-shadow: 0 20px 38px -20px rgba(24, 58, 51, .55);
	width: max-content;
	max-width: 285px;
	line-height: 1.25;
	z-index: 3;
	margin: 0 !important;
}
.ps-chip--br { right: 10px; bottom: 10px; }
.ps-chip--bl { left: 10px; bottom: 10px; }
.ps-chip--tr { right: 10px; top: 26px; }
.ps-chip--tl { left: 10px; top: 26px; }

/*
 * Hero: las tarjetas flotantes cuelgan del borde inferior de la captura
 * (mitad fuera), así solo pisan una franja mínima de la galería y nunca
 * se meten en la columna de texto.
 */
.ps-hero .ps-chip--br { right: 14px; bottom: -34px; }
.ps-hero .ps-chip--bl { left: 14px; bottom: -34px; }
.ps-hero .ps-chip--tr { right: 14px; top: -26px; }
@media (max-width: 1000px) {
	.ps-hero .ps-chip--br { right: 10px; bottom: -26px; }
	.ps-hero .ps-chip--bl { left: 10px; bottom: -26px; }
	.ps-hero .ps-chip--tr { right: 10px; top: -20px; }
}
@media (max-width: 700px) {
	.ps-hero .ps-chip--br { right: 10px; bottom: 10px; }
	.ps-hero .ps-chip--bl { left: 10px; bottom: 10px; }
	.ps-hero .ps-chip--tr { right: 10px; top: 10px; }
}

/* Tipografía y caja más compactas solo en el hero. */
.ps-hero .ps-chip {
	gap: 9px !important;
	padding: 9px 12px !important;
	border-radius: 11px;
	max-width: 236px;
	box-shadow: 0 16px 30px -18px rgba(24, 58, 51, .5);
}
.ps-hero .ps-chip-ico {
	width: 28px !important;
	height: 28px !important;
	min-width: 28px;
	border-radius: 9px;
	font-size: .92rem !important;
}
.ps-hero .ps-chip-text { font-size: .74rem !important; line-height: 1.32 !important; }
.ps-hero .ps-chip-text strong { font-size: .82rem !important; margin-bottom: 1px; }

.ps-chip-ico {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 34px !important;
	height: 34px !important;
	min-width: 34px;
	border-radius: 11px;
	background: var(--ps-coral) !important;
	color: #fff !important;
	font-size: 1.1rem !important;
	font-weight: 800;
	line-height: 1 !important;
	margin: 0 !important;
	border: 0;
	flex: 0 0 auto;
}
.ps-chip-text {
	display: block !important;
	margin: 0 !important;
	font-size: .86rem !important;
	line-height: 1.38 !important;
	color: #232b28 !important;
	background: transparent !important;
}
.ps-chip-text strong {
	display: block;
	font-size: .95rem !important;
	font-weight: 800;
	color: #0f1416 !important;
	margin-bottom: 3px;
	letter-spacing: -.015em;
	line-height: 1.25 !important;
}

/* Sin tarjetas flotantes en pantallas muy estrechas: se apilan debajo */
@media (max-width: 600px) {
	.ps-app-shot .ps-chip {
		position: static;
		margin: 8px 10px !important;
		max-width: calc(100% - 20px);
		width: auto;
		box-shadow: none;
	}
	.ps-app-shot { padding-bottom: 8px; }
}

/* ============================================================
   Banda de datos
   ============================================================ */
.ps-stats {
	background: #fff;
	border-top: 1px solid var(--ps-line);
	border-bottom: 1px solid var(--ps-line);
}
.ps-stats .wp-block-columns {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0 !important;
	max-width: 1040px !important;
	margin: 0 auto !important;
}
@media (max-width: 620px) {
	.ps-stats .wp-block-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 16px !important; }
	.ps-stats .wp-block-column:nth-child(odd) { border-left: 0 !important; }
}
.ps-stats .wp-block-column {
	padding: 6px 14px !important;
	margin: 0 !important;
	text-align: center;
}
@media (min-width: 621px) {
	.ps-stats .wp-block-column + .wp-block-column { border-left: 1px solid var(--ps-line); }
}
.ps-stats .wp-block-column p {
	margin: 0 !important;
	font-size: .82rem !important;
	color: var(--ps-muted) !important;
	line-height: 1.4 !important;
}
.ps-stats .wp-block-column strong {
	display: block;
	font-size: clamp(1.4rem, 2.3vw, 1.95rem);
	font-weight: 700;
	letter-spacing: -.02em;
	color: var(--ps-green);
	line-height: 1.15;
}

/* ============================================================
   SELECTOR DE FEATURES (tabs)
   ============================================================ */
.ps-features { background: #fff; }
/*
 * Cabecera de la sección de features: eyebrow, h2 y lead centrados.
 * El eyebrow es inline-flex con max-width: fit-content, así que además de
 * `text-align: center` necesita márgenes automáticos para quedar centrado.
 */
.ps-features-head {
	max-width: 760px;
	margin: 0 auto 40px !important;
	text-align: center;
}
.ps-features-head .ps-eyebrow {
	display: flex !important;
	width: fit-content !important;
	margin-left: auto !important;
	margin-right: auto !important;
}
.ps-features-head .ps-h2 { text-align: center; }
.ps-features-head .ps-lead {
	text-align: center;
	margin-left: auto !important;
	margin-right: auto !important;
	margin-bottom: 0 !important;
}
/*
 * Invitación a bajar a las pestañas: texto pequeño con una flecha dibujada
 * en CSS debajo. La flecha va en un pseudo-elemento para que el párrafo se
 * pueda editar como texto normal desde el editor de bloques.
 */
.ps-features-head .ps-scroll-hint {
	margin: 22px auto 0 !important;
	font-size: .82rem !important;
	font-weight: 600 !important;
	letter-spacing: .06em !important;
	text-transform: uppercase !important;
	color: var(--ps-green) !important;
	line-height: 1.2 !important;
}
.ps-features-head .ps-scroll-hint::after {
	content: "";
	display: block;
	width: 9px;
	height: 9px;
	margin: 10px auto 0;
	border-right: 2px solid var(--ps-coral, #ee6958);
	border-bottom: 2px solid var(--ps-coral, #ee6958);
	transform: rotate(45deg);
	animation: ps-hint-bounce 1.8s ease-in-out infinite;
}
@keyframes ps-hint-bounce {
	0%, 100% { transform: translateY(0) rotate(45deg); }
	50% { transform: translateY(5px) rotate(45deg); }
}
@media (prefers-reduced-motion: reduce) {
	.ps-features-head .ps-scroll-hint::after { animation: none; }
}
.ps-features-list:empty { display: none !important; }

.ps-tabs-native {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(22px, 3vw, 34px);
	align-items: start;
	max-width: none !important;
	margin: 0 !important;
}
.ps-tabs-native > .ps-features-list { display: none; }
.ps-tabs-native > .ps-tablist { grid-column: 1; }
.ps-tabs-native > .ps-panels { grid-column: 1; min-width: 0; }

/* Selector horizontal encima del panel */
.ps-tablist {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	gap: 7px;
	position: static;
}
@media (max-width: 760px) {
	.ps-tablist {
		flex-wrap: nowrap;
		justify-content: flex-start;
		overflow-x: auto;
		padding-bottom: 4px;
		scrollbar-width: none;
	}
	.ps-tablist::-webkit-scrollbar { display: none; }
}

.ps-tab {
	display: flex;
	align-items: center;
	gap: 10px;
	width: auto;
	text-align: left;
	background-color: #fbfdfc !important;
	border: 1px solid var(--ps-line) !important;
	border-radius: 999px !important;
	padding: 9px 18px;
	cursor: pointer;
	white-space: nowrap;
	box-shadow: none;
	transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.ps-tab:hover { background: #fff !important; border-color: #c9d6d0 !important; }
.ps-tab[aria-selected="true"] {
	background-color: #fff !important;
	border: 1px solid rgba(238, 105, 88, .55) !important;
	border-radius: 999px !important;
	box-shadow: 0 10px 22px -16px rgba(238, 105, 88, .7);
}
.ps-tab .tab-ico { display: none !important; }
.ps-tab-label {
	display: block;
	font-size: .9rem;
	font-weight: 700;
	color: var(--ps-ink);
	line-height: 1.25;
}
.ps-tab[aria-selected="true"] .ps-tab-label { color: var(--ps-coral); }
.ps-tab-desc {
	display: none;
	font-size: .78rem;
	color: var(--ps-muted);
	line-height: 1.35;
	margin-top: 2px;
	font-weight: 400;
	white-space: normal;
}
@media (max-width: 760px) {
	.ps-tab { padding: 8px 14px; flex: 0 0 auto; }
	.ps-tab-label { font-size: .86rem; }
}

.ps-panels { min-width: 0; }
.ps-panel {
	background: #fff;
	border: 1px solid var(--ps-line);
	border-radius: var(--ps-radius);
	overflow: visible;
	box-shadow: var(--ps-shadow);
	margin: 0 !important;
}
.ps-panel[hidden] { display: none; }

/* Panel a dos columnas: texto a la izquierda, captura a la derecha. */
.ps-feature {
	display: grid !important;
	grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.18fr);
	gap: clamp(22px, 3vw, 46px);
	align-items: center;
	margin: 0 !important;
	padding: clamp(22px, 3vw, 38px) !important;
	border: 0 !important;
	box-shadow: none !important;
	background: transparent !important;
}
@media (max-width: 900px) {
	.ps-feature { grid-template-columns: minmax(0, 1fr); gap: 22px; }
}
.ps-feature .ps-feature-body { grid-column: 1; grid-row: 1; padding: 0 !important; }
.ps-feature .ps-app-shot { grid-column: 2; grid-row: 1; }
@media (max-width: 900px) {
	.ps-feature .ps-feature-body { grid-column: 1; grid-row: 2; }
	.ps-feature .ps-app-shot { grid-column: 1; grid-row: 1; }
}
.ps-feature .ps-app-shot {
	border-radius: 14px;
	border: 1px solid var(--ps-line);
	box-shadow: 0 18px 40px -30px rgba(24, 58, 51, .45);
	background: #fff;
	overflow: visible;
}
.ps-feature .ps-app-shot img { border-radius: 13px !important; }
.ps-feature .ps-chip {
	max-width: 168px;
	padding: 7px 10px !important;
	gap: 7px !important;
	border-radius: 10px;
	box-shadow: 0 14px 26px -18px rgba(24, 58, 51, .5);
}
/* Abajo: cuelgan del borde inferior de la captura. */
.ps-feature .ps-chip--br { right: 12px; bottom: -16px; }
.ps-feature .ps-chip--bl { left: 12px; bottom: -16px; }
/* Arriba: se quedan pegadas al borde superior. */
.ps-feature .ps-chip--tr { top: 14px; right: 12px; bottom: auto; }
.ps-feature .ps-chip--tl { top: 14px; left: 12px; bottom: auto; }
.ps-feature .ps-chip-ico {
	width: 23px !important;
	height: 23px !important;
	min-width: 23px;
	border-radius: 7px;
	font-size: .74rem !important;
}
.ps-feature .ps-chip-text { font-size: .66rem !important; line-height: 1.28 !important; }
.ps-feature .ps-chip-text strong { font-size: .72rem !important; margin-bottom: 1px; }

.ps-feature-body {
	padding: 0 !important;
	margin: 0 !important;
}
.ps-feature-body h3 {
	font-size: clamp(1.25rem, 1.8vw, 1.6rem) !important;
	line-height: 1.2 !important;
	margin: 0 0 .5em !important;
	letter-spacing: -.025em;
}
.ps-feature-body p {
	color: var(--ps-muted) !important;
	font-size: .95rem !important;
	line-height: 1.55 !important;
	margin: 0 0 12px !important;
}
.ps-feature-body .ps-feature-link { margin: 0 !important; }
.ps-feature-body .ps-feature-link a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 600;
	font-size: .92rem;
	color: var(--ps-green) !important;
	text-decoration: none;
}
.ps-feature-body .ps-feature-link a::after { content: "→"; }
.ps-feature-body .ps-feature-link a:hover { color: var(--ps-green-dark) !important; }

/* ============================================================
   Texto de apoyo genérico
   ============================================================ */
.ps-body {
	font-size: clamp(1rem, 1.25vw, 1.06rem) !important;
	line-height: 1.65 !important;
	color: var(--ps-muted) !important;
	margin: 0 0 16px !important;
	max-width: 62ch;
}

/* Listas dentro de las fichas de función */
.ps-feature-body .ps-feature-text {
	color: var(--ps-muted) !important;
	font-size: .95rem !important;
	line-height: 1.55 !important;
	margin: 0 0 14px !important;
}
.ps-feature-body .ps-feature-list {
	list-style: none !important;
	margin: 0 0 18px !important;
	padding: 0 !important;
}
.ps-feature-body .ps-feature-list li {
	position: relative;
	padding-left: 1.5em;
	margin: 0 0 .45em !important;
	font-size: .92rem !important;
	line-height: 1.5;
	color: #3f4846;
}
.ps-feature-body .ps-feature-list li::before {
	content: "✓";
	position: absolute;
	left: 0;
	top: 0;
	color: var(--ps-green);
	font-weight: 700;
}
.ps-feature-body .ps-feature-note {
	margin-top: 14px !important;
	padding-top: 12px;
	border-top: 1px solid var(--ps-line);
	font-size: .8rem !important;
	line-height: 1.5 !important;
	color: #77807d !important;
	text-transform: none;
	letter-spacing: 0;
}

/* ============================================================
   Durante la sesión (subida desde cámara)
   ============================================================ */
.ps-camera { background: var(--ps-paper); }
.ps-camera-inner {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(28px, 4vw, 64px);
	align-items: center;
}
@media (max-width: 820px) {
	.ps-camera-inner { grid-template-columns: 1fr; gap: 30px; }
}
.ps-camera-copy h2 {
	font-size: clamp(1.9rem, 3.2vw, 2.7rem) !important;
	line-height: 1.1 !important;
	letter-spacing: -.03em;
	margin: 0 0 .4em !important;
}
.ps-camera-copy .ps-feature-link { margin: 0 0 14px !important; }
.ps-camera-note {
	font-size: .8rem !important;
	line-height: 1.5 !important;
	color: #77807d !important;
	margin: 0 !important;
}

.ps-flow {
	display: flex !important;
	flex-direction: column;
	gap: 0;
	margin: 0 !important;
	background: var(--ps-paper);
	border: 1px solid var(--ps-line);
	border-radius: var(--ps-radius);
	padding: 8px 6px !important;
}
.ps-flow-step {
	display: grid !important;
	grid-template-columns: auto minmax(0, 1fr);
	column-gap: 16px;
	align-items: start;
	margin: 0 !important;
	padding: 18px 18px !important;
	border-radius: 14px;
}
.ps-flow-step + .ps-flow-step { border-top: 1px solid var(--ps-line); }
.ps-flow-step .ps-flow-n {
	grid-row: span 2;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 38px; height: 38px;
	border-radius: 50%;
	background: #fff;
	border: 1px solid rgba(238, 105, 88, .4);
	color: var(--ps-coral) !important;
	font-weight: 800;
	font-size: .78rem !important;
	letter-spacing: .04em;
	margin: 0 !important;
	line-height: 1;
}
.ps-flow-step h3 {
	grid-column: 2;
	font-size: 1rem !important;
	margin: 0 0 .25em !important;
	letter-spacing: -.015em;
}
.ps-flow-step h3 + p,
.ps-flow-step p:not(.ps-flow-n) {
	grid-column: 2;
	font-size: .9rem !important;
	line-height: 1.5 !important;
	color: var(--ps-muted) !important;
	margin: 0 !important;
}

/* ============================================================
   Empieza por tu próxima sesión (3 pasos)
   ============================================================ */
.ps-session { background: #fff; }
.ps-session .ps-h2--center { text-align: center; }
.ps-session .ps-lead--center { text-align: center; }
.ps-steps {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	margin: 0 !important;
	max-width: none !important;
}
@media (max-width: 700px) { .ps-steps { grid-template-columns: 1fr; } }
.ps-step {
	background: #fff;
	border: 1px solid var(--ps-line);
	border-radius: 16px;
	padding: 26px 24px 24px !important;
	margin: 0 !important;
}
.ps-step .ps-step-n {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	min-width: 40px; height: 40px;
	padding: 0 10px !important;
	border-radius: 14px;
	background: rgba(238, 105, 88, .12);
	border: 1px solid rgba(238, 105, 88, .32);
	color: #c04434 !important;
	font-weight: 800;
	font-size: .9rem !important;
	letter-spacing: .04em;
	margin: 0 0 16px !important;
	line-height: 1;
}
.ps-step h3 { font-size: 1.1rem !important; margin: 0 0 .45em !important; letter-spacing: -.02em; }
.ps-step p { color: var(--ps-muted) !important; font-size: .93rem !important; line-height: 1.6 !important; margin: 0 !important; }

/* ============================================================
   También para los números (calculadora de tarifas)
   ============================================================ */
.ps-numbers { background: var(--ps-paper); }
.ps-numbers-inner {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(28px, 4vw, 64px);
	align-items: center;
}
@media (max-width: 820px) {
	.ps-numbers-inner { grid-template-columns: 1fr; gap: 30px; }
}
.ps-numbers-copy h2 {
	font-size: clamp(1.9rem, 3.2vw, 2.7rem) !important;
	line-height: 1.1 !important;
	letter-spacing: -.03em;
	margin: 0 0 .4em !important;
}
.ps-numbers-copy .ps-feature-link { margin: 4px 0 0 !important; }

.ps-calc-card {
	background: linear-gradient(170deg, #ffffff 0%, var(--ps-paper) 100%);
	border: 1px solid var(--ps-line);
	border-radius: var(--ps-radius);
	padding: clamp(22px, 3vw, 30px) !important;
	box-shadow: var(--ps-shadow);
	margin: 0 !important;
}
.ps-calc-card h3 {
	font-size: 1.1rem !important;
	margin: 0 0 18px !important;
	letter-spacing: -.02em;
}
.ps-calc-items { margin: 0 !important; }
.ps-calc-item { margin: 0 !important; padding: 0 0 16px !important; }
.ps-calc-item + .ps-calc-item { border-top: 1px solid var(--ps-line); padding-top: 16px !important; }
.ps-calc-item:last-child { padding-bottom: 0 !important; border-bottom: 0; }
.ps-calc-item .ps-calc-label {
	display: block !important;
	font-size: .78rem !important;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ps-coral) !important;
	margin: 0 0 5px !important;
	line-height: 1.3;
}
.ps-calc-item .ps-calc-text {
	font-size: .93rem !important;
	line-height: 1.55 !important;
	color: var(--ps-muted) !important;
	margin: 0 !important;
}
.ps-calc-note {
	font-size: .8rem !important;
	line-height: 1.5 !important;
	color: #77807d !important;
	margin: 18px 0 0 !important;
	padding-top: 14px;
	border-top: 1px solid var(--ps-line);
}

/* ============================================================
   Detrás de Picstome
   ============================================================ */
.ps-brand { background: #fff; }
.ps-brand-inner {
	display: grid !important;
	grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
	gap: clamp(28px, 4vw, 56px);
	align-items: start;
}
@media (max-width: 860px) {
	.ps-brand-inner { grid-template-columns: 1fr; gap: 28px; }
}
.ps-brand-copy h2 {
	font-size: clamp(1.8rem, 2.9vw, 2.5rem) !important;
	line-height: 1.12 !important;
	letter-spacing: -.03em;
	margin: 0 0 .6em !important;
	max-width: 26ch;
}
.ps-brand-copy .ps-body + .ps-body { margin-top: 14px !important; }
.ps-brand-note {
	background: #fff;
	border: 1px solid var(--ps-line);
	border-radius: var(--ps-radius);
	padding: clamp(22px, 3vw, 28px) !important;
	margin: 0 !important;
}
.ps-brand-note h3 { font-size: 1.1rem !important; margin: 0 0 .5em !important; letter-spacing: -.02em; }
.ps-brand-note p { font-size: .93rem !important; line-height: 1.6 !important; color: var(--ps-muted) !important; margin: 0 0 14px !important; }
.ps-brand-note .ps-feature-link { margin: 0 !important; }

/* ============================================================
   Enlaces de texto reutilizables
   ============================================================ */
.ps-home .ps-feature-link a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 600;
	font-size: .95rem;
	color: var(--ps-green) !important;
	text-decoration: none;
	border-bottom: 1px solid rgba(49, 109, 97, .35);
	padding-bottom: 1px;
}
.ps-home .ps-feature-link a::after { content: "→"; }
.ps-home .ps-feature-link a:hover { color: var(--ps-green-dark) !important; border-bottom-color: var(--ps-green-dark); }

/* ============================================================
   Open source (una sola línea, sin banda)
   ============================================================ */
.ps-oss-note {
	background: #fff;
	padding: 0 0 clamp(24px, 3vw, 34px);
}
.ps-oss-note .ps-oss-line-text {
	text-align: center;
	font-size: .8rem !important;
	line-height: 1.6 !important;
	color: #7c8582 !important;
	margin: 0 !important;
}
.ps-oss-note .ps-oss-line-text a {
	color: #5b6462 !important;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	text-decoration-color: rgba(91, 100, 98, .4);
}
.ps-oss-note .ps-oss-line-text a:hover { color: var(--ps-green) !important; }

/* ============================================================
   Pricing (legacy: ahora vive en /pricing/)
   ============================================================ */
.ps-pricing { background: #fff; }
/* Cabecera de pricing centrada, igual que el resto de secciones. */
.ps-pricing .ps-eyebrow {
	display: flex !important;
	width: fit-content !important;
	margin-left: auto !important;
	margin-right: auto !important;
}
.ps-pricing .ps-h2 {
	text-align: center;
	max-width: 760px;
	margin-left: auto !important;
	margin-right: auto !important;
}
.ps-pricing .ps-lead {
	text-align: center;
	margin-left: auto !important;
	margin-right: auto !important;
}
.ps-plans {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	align-items: stretch;
	max-width: none !important;
	margin: 0 !important;
}
@media (max-width: 860px) {
	.ps-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
	.ps-plans { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto !important; }
}
.ps-plan {
	background: #fbfdfc;
	border: 1px solid var(--ps-line);
	border-radius: var(--ps-radius);
	padding: 26px 24px !important;
	margin: 0 !important;
	display: flex !important;
	flex-direction: column;
}
.ps-plan--featured {
	background: linear-gradient(170deg, #ffffff 0%, #f6faf7 100%);
	border-color: var(--ps-green);
	box-shadow: var(--ps-shadow);
	position: relative;
}
.ps-plan--featured::before {
	content: "Most popular";
	position: absolute;
	top: 0; left: 50%;
	transform: translate(-50%, -50%);
	background: var(--ps-coral);
	color: #fff;
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: 6px 13px;
	border-radius: 999px;
	white-space: nowrap;
	box-shadow: 0 10px 20px -12px rgba(238, 105, 88, .8);
}
.ps-plan h3 { font-size: 1.2rem !important; margin: 0 0 .15em !important; letter-spacing: -.02em; }
.ps-plan .ps-price { font-size: 1rem !important; font-weight: 600; color: var(--ps-green) !important; margin: 0 0 6px !important; }
.ps-plan .ps-plan-note { font-size: .85rem !important; color: var(--ps-muted) !important; margin: 0 0 16px !important; min-height: 2.6em; }
.ps-plan .wp-block-list { list-style: none !important; margin: 0 0 22px !important; padding: 0 !important; }
.ps-plan .wp-block-list li {
	position: relative;
	padding-left: 1.6em;
	margin: 0 0 .5em !important;
	font-size: .91rem !important;
	line-height: 1.45;
	color: #3f4846;
	list-style: none !important;
}
.ps-plan .wp-block-list li::before {
	content: "✓";
	position: absolute; left: 0; top: 0;
	color: var(--ps-green);
	font-weight: 700;
}
.ps-plan .wp-block-buttons { margin-top: auto; }
.ps-plan .wp-block-button, .ps-plan .wp-block-button__link { width: 100%; }
.ps-plan .wp-block-button__link { display: block; text-align: center; }

/* ============================================================
   FAQ
   ============================================================ */
.ps-faq { background: var(--ps-paper); }
/* La cabecera del FAQ va centrada: eyebrow, h2 y lead. */
.ps-faq .ps-eyebrow {
	display: flex !important;
	width: fit-content !important;
	margin-left: auto !important;
	margin-right: auto !important;
}
.ps-faq .wp-block-accordion { max-width: 820px; margin: 0 auto; border-top: 1px solid rgba(50, 47, 48, .12); }
.ps-faq .wp-block-accordion-item { background: transparent; }
.ps-faq .wp-block-accordion-heading__toggle { font-size: 1rem; }

/* ============================================================
   CTA final
   ============================================================ */
.ps-cta {
	background-color: #fff;
	background-image: radial-gradient(90% 130% at 50% 0%, rgba(198, 216, 175, .45) 0%, rgba(198, 216, 175, 0) 65%);
	text-align: center;
}
.ps-cta-inner { padding-left: clamp(20px, 4vw, 48px); padding-right: clamp(20px, 4vw, 48px); }
.ps-cta h2 { font-size: clamp(1.85rem, 3.4vw, 2.8rem) !important; line-height: 1.1 !important; letter-spacing: -.03em; margin: 0 0 .45em !important; }

/*
 * WordPress aplica `justify-content: normal` a `.wp-block-buttons.is-layout-flex`,
 * así que la clase `aligncenter` no centra nada. Forzamos el centrado en los
 * bloques de botones alineados al centro (CTA final, etc.).
 */
.ps-home .wp-block-buttons.aligncenter,
.ps-home .wp-block-buttons.aligncenter.is-layout-flex {
	justify-content: center !important;
}
.ps-home .ps-cta .wp-block-buttons { justify-content: center !important; margin-left: auto !important; margin-right: auto !important; }
.ps-cta .ps-cta-sub { color: var(--ps-muted) !important; font-size: 1rem !important; margin: 0 0 24px !important; }
/* El enlace de contacto no debe tocar los botones. */
.ps-cta .ps-cta-mail { margin: 14px 0 0 !important; }

/* ============================================================
   Móvil
   ============================================================ */
@media (max-width: 640px) {
	.ps-hero-title { font-size: 2.05rem !important; }
	.ps-plan--featured::before { top: -1px; transform: translate(-50%, 0); }
}

/* Home: hero más compacto arriba y abajo */
.ps-home:not(.ps-subpage) .ps-hero {
	padding-top: clamp(20px, 2.4vw, 40px) !important;
	padding-bottom: clamp(18px, 2.2vw, 36px) !important;
}
.ps-home .ps-hero-inner {
	padding-top: clamp(18px, 2.2vw, 38px);
	padding-bottom: clamp(14px, 1.8vw, 28px);
}
@media (max-width: 700px) {
	.ps-home:not(.ps-subpage) .ps-hero { padding-top: 18px !important; padding-bottom: 16px !important; }
	.ps-home .ps-hero-inner { padding-top: 14px; padding-bottom: 12px; }
}