/*
 * Grupo «medida»: /desarrollo-web-a-medida/ y sus hijas (reservas, directorios, áreas privadas, marca blanca).
 * Solo clases con prefijo xp-medida-*. Mobile-first, variables --xp-*.
 */

/* ---------- Precios «desde» en el hero ---------- */
.xp-medida-desde {
	display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
	font-family: var(--xp-f-ui); font-size: .8125rem; font-weight: 500; line-height: 1.3; color: var(--xp-texto);
}
.xp-hero .xp-medida-desde { margin-block-start: 1.25rem; }
.xp-medida-desde span {
	display: inline-flex; align-items: baseline; gap: .35em;
	padding: .5rem .9rem; border-radius: 999px;
	background: var(--xp-lila); box-shadow: inset 0 0 0 1.5px var(--xp-linea);
}
.xp-medida-desde strong { font-family: var(--xp-f-texto); font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.01em; color: var(--xp-ciruela); }
.xp-medida-desde span:last-child { background: none; box-shadow: none; padding-inline: .2rem; color: var(--xp-gris); }

/* ---------- Secciones de función: texto + tarjeta de precio ---------- */
.xp-medida-funcion.wp-block-columns { align-items: flex-start; }
.xp-medida-funcion .wp-block-column > p:first-child { margin-top: 0; }
.xp-medida-funcion .xp-precio-tarjeta .xp-precio-tarjeta__desde { margin-top: .75rem !important; }

/* Texto a la izquierda bajo una rejilla ancha */
.wp-block-group.xp-medida-texto > * { max-width: 58rem; } /* el mismo ancho que la cabecera de sección */
.wp-block-group.xp-medida-texto > :first-child { margin-top: 0; }

/* ---------- Pasos (7 + tarjeta de pago) ---------- */
.wp-block-group.xp-medida-pasos__pago { align-self: start; }
.wp-block-group.xp-medida-pasos__pago > * { margin: 0; }
.wp-block-group.xp-medida-pasos__pago > * + * { margin-top: .6rem; }
.wp-block-group.xp-medida-pasos__pago > h3 { font-size: clamp(1.2rem, 1.1rem + .4vw, 1.4rem); }

/* ---------- Comparativa de tres opciones (cuatro columnas) ---------- */
@media (min-width: 600px) {
	.wp-block-table.is-style-comparativa.xp-medida-comparativa td:first-child { width: 19%; }
}
@media (max-width: 599px) {
	.wp-block-table.is-style-comparativa.xp-medida-comparativa thead {
		position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
	}
	.wp-block-table.is-style-comparativa.xp-medida-comparativa tbody tr { grid-template-columns: minmax(0, 1fr); gap: .4rem; }
	.wp-block-table.is-style-comparativa.xp-medida-comparativa tbody td:not(:first-child)::before {
		display: block; margin-bottom: .25rem;
		font-family: var(--xp-f-ui); font-size: .78125rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--xp-gris);
	}
	.wp-block-table.is-style-comparativa.xp-medida-comparativa tbody td:last-child::before { color: var(--xp-rosa-tinta); }

	.xp-medida-comparativa--pilar tbody td:nth-child(2)::before { content: "Aplicación por suscripción"; }
	.xp-medida-comparativa--pilar tbody td:nth-child(3)::before { content: "Empresa de software"; }
	.xp-medida-comparativa--pilar tbody td:nth-child(4)::before { content: "Conmigo"; }

	.xp-medida-comparativa--reservas tbody td:nth-child(2)::before { content: "Aplicación de reservas"; }
	.xp-medida-comparativa--reservas tbody td:nth-child(3)::before { content: "Plugin de reservas"; }
	.xp-medida-comparativa--reservas tbody td:nth-child(4)::before { content: "Sistema a medida, conmigo"; }

	.xp-medida-comparativa--areas tbody td:nth-child(2)::before { content: "Plugin de membresía"; }
	.xp-medida-comparativa--areas tbody td:nth-child(3)::before { content: "Plataforma por suscripción"; }
	.xp-medida-comparativa--areas tbody td:nth-child(4)::before { content: "A medida, conmigo"; }
}

/* ---------- Tarjeta «¿Eres una agencia?» ---------- */
.wp-block-group.xp-medida-agencia > * { margin: 0; }
.wp-block-group.xp-medida-agencia > * + * { margin-top: .75rem; }
.wp-block-group.xp-medida-agencia > h3 { font-size: clamp(1.3rem, 1.15rem + .5vw, 1.6rem); }
.wp-block-group.xp-medida-agencia > :last-child { margin-top: 1.25rem; font-family: var(--xp-f-ui); font-weight: 600; font-size: .9375rem; }

/* ---------- Dos columnas de texto (todo a tu nombre / cuándo no) ---------- */
.wp-block-group.xp-medida-dos { gap: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }
.wp-block-group.xp-medida-dos__col > :first-child { margin-top: 0; }
.wp-block-group.xp-medida-dos__col > h2 { margin-block-start: .5rem; }
.wp-block-group.xp-medida-dos__col > .wp-block-list { margin-block-start: 1.5rem; }
.wp-block-group.xp-medida-dos__col > .wp-block-quote { margin-block-start: 2rem; }

/* ---------- Cierre con formulario (#formulario) ---------- */
.xp-medida-form .wp-block-columns { align-items: flex-start; }
.xp-medida-form__texto > :first-child { margin-top: 0; }
.xp-medida-form__texto .is-style-entradilla { margin-block-start: 1.25rem; }
.xp-medida-form__texto .is-style-nota { margin-block-start: 1rem; }
.xp-medida-form__texto .wp-block-buttons { margin-block-start: 1.5rem; }
.xp-medida-form__contacto { margin-block-start: 1.25rem; font-family: var(--xp-f-ui); font-size: .9375rem; font-weight: 500; color: var(--xp-texto); }
.xp-medida-form__texto .wp-block-quote { margin-block-start: 2rem; font-size: 1.0625rem; }
.xp-medida-form__caja {
	background: var(--xp-blanco); border-radius: var(--xp-radio-g);
	padding: clamp(1.25rem, .75rem + 2.2vw, 2.75rem);
	box-shadow: var(--xp-sombra); min-width: 0;
}
@media (min-width: 782px) {
	.xp-medida-form__texto { position: sticky; top: 7rem; }
}

/* Formulario «Desarrollo a medida» (Gravity Forms 8) */
.xp-form-medida .gfield--type-radio .gfield_radio { display: grid; gap: .55rem 1.5rem; }
@media (min-width: 1000px) {
	.xp-form-medida .gfield--type-radio .gfield_radio { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.xp-form-medida .gfield_description { margin-block: .25rem .5rem; }

/* ---------- Casos: en móvil, carrusel horizontal (asoma el siguiente) ---------- */
@media (max-width: 639px) {
	.xp-rejilla-casos.xp-medida-casos {
		display: flex; gap: 1rem; overflow-x: auto; overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory; padding: .25rem .25rem 1rem;
		scrollbar-width: thin; scrollbar-color: var(--xp-linea) transparent;
	}
	.xp-rejilla-casos.xp-medida-casos > * { flex: 0 0 82%; scroll-snap-align: start; }
}
.xp-form-medida .gfield_radio .gchoice { display: flex; align-items: flex-start; gap: .6rem; }
.xp-form-medida .gfield_radio .gchoice input { flex: none; margin: .15rem 0 0; }
.xp-form-medida .gfield_radio .gchoice label { flex: 1; margin: 0; line-height: 1.4; }
body .gform_wrapper.xp-form-medida_wrapper .gfield .gfield_consent_description_text { border: 0; padding: 0; background: none; max-height: none; overflow: visible; }

/* ---------- Índice «En esta página» (pilar) ---------- */
.wp-block-group.xp-medida-indice {
	display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem;
	padding-top: clamp(1.25rem, 1rem + 1vw, 1.75rem); border-top: 1.5px solid var(--xp-linea);
}
.wp-block-group.xp-medida-indice > * { margin: 0; }
.xp-medida-indice__titulo {
	font-family: var(--xp-f-ui); font-size: .8125rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--xp-gris);
}
.xp-medida-indice__lista.wp-block-list { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.xp-medida-indice__lista.wp-block-list > li { margin: 0; padding: 0; }
.xp-medida-indice__lista a {
	display: inline-flex; align-items: center; min-height: 2.5rem; padding: .35rem .95rem; border-radius: 999px;
	font-family: var(--xp-f-ui); font-size: .875rem; font-weight: 500; line-height: 1.2; color: var(--xp-ciruela); text-decoration: none;
	background: var(--xp-lila); box-shadow: inset 0 0 0 1.5px var(--xp-linea);
	transition: background-color .15s ease, box-shadow .15s ease;
}
.xp-medida-indice__lista a:hover { background: var(--xp-rosa-suave); box-shadow: inset 0 0 0 1.5px var(--xp-rosa); }

/* ---------- Bloque secundario plegado (comparativa del pilar) ---------- */
.wp-block-details.xp-medida-plegable { border-top: 1.5px solid var(--xp-linea); }
.wp-block-details.xp-medida-plegable > .wp-block-table { max-width: none; margin-top: .25rem; }

/* ---------- Pasos más compactos en móvil: número a la izquierda ---------- */
@media (max-width: 639px) {
	.wp-block-group.xp-medida-pasos > .xp-paso { display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); column-gap: .75rem; align-items: start; padding-top: 1rem; }
	.wp-block-group.xp-medida-pasos > .xp-paso > * { grid-column: 2; margin: 0; }
	.wp-block-group.xp-medida-pasos > .xp-paso > * + * { margin-top: .5rem; }
	.wp-block-group.xp-medida-pasos > .xp-paso > .xp-paso__num { grid-column: 1; grid-row: 1 / span 4; font-size: 2rem; margin: 0; }
	.wp-block-group.xp-medida-pasos > .xp-paso > .xp-paso__num + h3 { margin-top: .1rem; }
	.wp-block-group.xp-medida-pasos > .xp-paso > .xp-paso__cuando { justify-self: start; }
}