/* =========================================================================
   Pickleball Club Natural — sistema visual

   Lenguaje de club deportivo: condensada en mayusculas, navy y naranja,
   esquinas rectas y cabeceras centradas. Los valores estan medidos sobre la
   referencia, no estimados a ojo.

   Tipografia: Barlow Condensed (titulares, SIEMPRE en mayusculas) + DM Sans
   (texto, interfaz y antetitulos). Las dos son libres y van autoalojadas.

   El acento naranja es el de la referencia y no esta en el escudo del club.
   Para cambiarlo al verde del escudo basta con tocar --acento aqui abajo:
   no hay ni un solo naranja escrito en el resto del fichero.
   ========================================================================= */

:root {
	/* --- color --- */
	--navy:        #0A2664;  /* titulares */
	--navy-btn:    #0E3793;  /* botones */
	--navy-hondo:  #061B46;
	--casi-negro:  #030B1C;  /* bandas oscuras */

	--acento:      #FE6402;  /* naranja de la referencia */
	--acento-alt:  #EC9937;

	--fondo:       #F7F8FC;  /* nunca blanco puro */
	--panel:       #F0F0F0;
	--blanco:      #FFFFFF;
	--texto:       #757984;
	--linea:       #E2E4EC;

	/* --- tipografia --- */
	--titular: "Barlow Condensed", "Arial Narrow", Impact, sans-serif;
	--texto-f: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

	/* Escala medida sobre la referencia: H1 57 px, H4 24 px. */
	--t-hero: clamp(2.75rem, 1.4rem + 5.6vw, 5.25rem);
	--t-1:    clamp(2.1rem, 1.4rem + 2.9vw, 3.5rem);
	--t-2:    clamp(1.75rem, 1.3rem + 1.9vw, 2.6rem);
	--t-3:    clamp(1.25rem, 1.1rem + .6vw, 1.5rem);

	/* --- medidas --- */
	--shell: 1290px;         /* el contenedor de la referencia */
	--read: 40rem;
	--gutter: clamp(1.25rem, 4vw, 2.5rem);
	--nav-h: 5rem;
}

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

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
	margin: 0;
	background: var(--fondo);
	color: var(--texto);
	font-family: var(--texto-f);
	font-size: 1.125rem;
	line-height: 1.62;
	-webkit-font-smoothing: antialiased;
}

/* height:auto es imprescindible: los atributos width/height del <img> actuan
   como estilo del navegador y ANULAN cualquier aspect-ratio del CSS. Sin esto
   las fotos verticales se sirven a su altura natural y estiran la seccion. */
img, video { max-width: 100%; display: block; height: auto; }
a { color: inherit; }

:where(a, button, summary, input, select, textarea):focus-visible {
	outline: 2px solid var(--acento);
	outline-offset: 3px;
}

/* =========================================================================
   Rejilla
   ========================================================================= */

.pb-shell { max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); }
.pb-read { max-width: var(--read); }

.pb-section { padding-block: clamp(3.5rem, 2rem + 5.5vw, 7.5rem); }
.pb-section--tight { padding-block: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
.pb-section--panel { background: var(--panel); }
.pb-section--cream { background: var(--panel); }   /* alias heredado */
.pb-section--soft { background: var(--blanco); }

.pb-section--navy { background: var(--casi-negro); color: rgba(255, 255, 255, .78); }
.pb-section--navy .pb-h1,
.pb-section--navy .pb-h2,
.pb-section--navy .pb-h3,
.pb-section--navy .pb-display { color: var(--blanco); }
.pb-section--navy .pb-eyebrow { color: var(--acento); }
.pb-section--navy .pb-lede,
.pb-section--navy .pb-note { color: rgba(255, 255, 255, .72); }

/* =========================================================================
   Tipografia
   ========================================================================= */

.pb-eyebrow {
	font-family: var(--texto-f);
	font-size: .875rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--navy);
	margin: 0 0 .85rem;
}

.pb-display, .pb-h1, .pb-h2, .pb-h3 {
	font-family: var(--titular);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: -.01em;
	color: var(--navy);
	text-wrap: balance;
	margin: 0;
}

/* line-height 1 es lo que le da el aspecto compacto de cartel deportivo. */
.pb-display { font-size: var(--t-hero); line-height: .95; }
.pb-h1 { font-size: var(--t-1); line-height: 1; }
.pb-h2 { font-size: var(--t-2); line-height: 1.02; }
.pb-h3 { font-size: var(--t-3); line-height: 1.2; }

/* En condensada la cursiva no aporta nada: el enfasis se da con el acento. */
.pb-display em, .pb-h1 em, .pb-h2 em { font-style: normal; color: var(--acento); }

.pb-lede {
	font-size: clamp(1.05rem, 1rem + .35vw, 1.25rem);
	line-height: 1.6;
	color: var(--texto);
	max-width: 38rem;
	margin: 1rem 0 0;
}

.pb-note { font-size: .9rem; color: var(--texto); opacity: .8; }

/* --- Cabecera de bloque: centrada, como la referencia --- */
.pb-blockhead {
	text-align: center;
	margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4rem);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .75rem;
}

.pb-blockhead .pb-lede { margin: 0 auto; text-align: center; }
.pb-blockhead--split { text-align: center; }

/* --- Texto largo --- */
.pb-prose > * + * { margin-top: 1.15em; }
.pb-prose p { margin: 0; max-width: var(--read); }

.pb-prose h2 {
	font-family: var(--titular);
	font-weight: 600;
	text-transform: uppercase;
	font-size: var(--t-2);
	line-height: 1.05;
	color: var(--navy);
	margin-top: 2em;
}

.pb-prose h3 {
	font-family: var(--titular);
	font-weight: 600;
	text-transform: uppercase;
	font-size: 1.35rem;
	line-height: 1.15;
	color: var(--navy);
	margin-top: 1.8em;
}

.pb-prose a { color: var(--acento); text-decoration: underline; text-underline-offset: 3px; }
/* Un boton dentro del contenido no es un enlace de texto: nada de subrayado. */
.pb-prose a.pb-btn, .pb-prose a.pb-more { color: inherit; text-decoration: none; }
.pb-prose a.pb-btn { color: var(--blanco); }
.pb-prose a.pb-btn--ghost { color: var(--navy-btn); }
.pb-prose a.pb-btn--ghost:hover { color: var(--blanco); }
.pb-prose a.pb-more { color: var(--navy); }
.pb-prose ul, .pb-prose ol { max-width: var(--read); padding-left: 1.3rem; margin-block: 0; }
.pb-prose li + li { margin-top: .4em; }
/* La negrita marca lo que decide algo. Va en navy sobre el gris del texto:
   suficiente contraste para saltar a la vista, sin parecer un enlace. */
.pb-prose strong { font-weight: 700; color: var(--navy); }
.pb-prose strong a, .pb-prose a strong { color: var(--acento); }

.pb-prose blockquote {
	margin: 2em 0;
	padding: 1.5rem 1.75rem;
	background: var(--navy);
	color: var(--blanco);
	font-family: var(--titular);
	font-size: var(--t-3);
	text-transform: uppercase;
	line-height: 1.15;
	max-width: 44rem;
}

/* =========================================================================
   Botones — esquinas rectas, mayusculas, 12px 40px
   ========================================================================= */

.pb-btn {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .85rem 2.5rem;
	border: 2px solid var(--navy-btn);
	border-radius: 0;
	background: var(--navy-btn);
	color: var(--blanco);
	font-family: var(--texto-f);
	font-size: .8125rem;
	font-weight: 500;
	letter-spacing: .105em;
	text-transform: uppercase;
	line-height: 1.4;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.pb-btn:hover { background: var(--acento); border-color: var(--acento); }

.pb-btn--acento { background: var(--acento); border-color: var(--acento); }
.pb-btn--acento:hover { background: var(--navy-btn); border-color: var(--navy-btn); }

.pb-btn--ghost { background: transparent; color: var(--navy-btn); }
.pb-btn--ghost:hover { background: var(--navy-btn); color: var(--blanco); }

.pb-btn--light { background: var(--blanco); border-color: var(--blanco); color: var(--navy); }
.pb-btn--light:hover { background: var(--acento); border-color: var(--acento); color: var(--blanco); }

.pb-btn--outline-light { background: transparent; border-color: rgba(255, 255, 255, .55); color: var(--blanco); }
.pb-btn--outline-light:hover { background: var(--blanco); border-color: var(--blanco); color: var(--navy); }

.pb-btns { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.pb-blockhead .pb-btns, .pb-section--navy .pb-shell > .pb-btns { justify-content: center; }

.pb-more {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .105em;
	text-transform: uppercase;
	color: var(--navy);
	text-decoration: none;
	transition: color .2s ease;
}

.pb-more::after { content: "\2192"; transition: transform .2s ease; }
.pb-more:hover { color: var(--acento); }
.pb-more:hover::after { transform: translateX(4px); }

/* =========================================================================
   Hero
   ========================================================================= */

.pb-hero {
	position: relative;
	min-height: min(86svh, 44rem);
	display: flex;
	align-items: center;
	text-align: center;
	color: var(--blanco);
	overflow: hidden;
	background: var(--casi-negro);
}

.pb-hero__media { position: absolute; inset: 0; }
.pb-hero__media img, .pb-hero__media picture { width: 100%; height: 100%; }
.pb-hero__media img { object-fit: cover; object-position: center; }

.pb-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(3, 11, 28, .58) 0%, rgba(3, 11, 28, .42) 50%, rgba(3, 11, 28, .72) 100%);
}

.pb-hero__body { position: relative; width: 100%; padding-block: clamp(4rem, 3rem + 4vw, 7rem); }
.pb-hero .pb-display { color: var(--blanco); max-width: 18ch; margin-inline: auto; }
.pb-hero .pb-display em { color: var(--acento); }
.pb-hero .pb-eyebrow { color: var(--blanco); opacity: .85; }

.pb-hero__sub {
	font-size: clamp(1.05rem, 1rem + .4vw, 1.25rem);
	color: rgba(255, 255, 255, .82);
	max-width: 36rem;
	margin: 1.5rem auto 0;
}

.pb-hero .pb-btns { justify-content: center; }

/* =========================================================================
   Fila de datos con divisores verticales
   ========================================================================= */

.pb-facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
	gap: 2rem 0;
	text-align: center;
}

.pb-fact { padding-inline: 1.5rem; border-right: 1px solid var(--linea); }
.pb-fact:last-child { border-right: none; }

@media (max-width: 47.99rem) {
	.pb-fact { border-right: none; border-bottom: 1px solid var(--linea); padding-bottom: 1.5rem; }
	.pb-fact:last-child { border-bottom: none; padding-bottom: 0; }
}

.pb-fact__n {
	display: block;
	font-family: var(--titular);
	font-weight: 700;
	font-size: clamp(2.5rem, 1.8rem + 2.4vw, 3.75rem);
	line-height: 1;
	color: var(--navy);
	text-transform: uppercase;
}

.pb-fact__t {
	font-size: .9rem;
	margin: .6rem 0 0;
	color: var(--texto);
}

.pb-section--navy .pb-fact { border-color: rgba(255, 255, 255, .2); }
.pb-section--navy .pb-fact__n { color: var(--acento); }
.pb-section--navy .pb-fact__t { color: rgba(255, 255, 255, .72); }

/* =========================================================================
   Tarjetas indice
   ========================================================================= */

.pb-grid { display: grid; gap: 1.5rem; }
@media (min-width: 44rem) { .pb-grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .pb-grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 44rem) and (max-width: 61.99rem) { .pb-grid--3 { grid-template-columns: repeat(2, 1fr); } }

.pb-tile {
	background: var(--blanco);
	border: 1px solid var(--linea);
	border-top: 3px solid var(--navy);
	padding: 2rem 1.75rem 2.25rem;
	display: flex;
	flex-direction: column;
	gap: .7rem;
	text-decoration: none;
	transition: border-top-color .25s ease, transform .25s ease;
}

.pb-tile:hover { border-top-color: var(--acento); transform: translateY(-3px); }

/* Icono plano de la tarjeta. El cuerpo hereda currentColor y el detalle usa el
   acento: cambiar --acento los cambia todos sin tocar ningun SVG. */
.pb-ico {
	width: 2.6rem;
	height: 2.6rem;
	display: block;
	fill: var(--navy);
	margin-bottom: .35rem;
	transition: fill .25s ease;
}

.pb-ico .pb-ico-ac { fill: var(--acento); }
.pb-tile:hover .pb-ico { fill: var(--navy-btn); }

@media (prefers-reduced-motion: reduce) { .pb-tile { transition: none; } }
.pb-tile__t { font-family: var(--titular); font-weight: 600; text-transform: uppercase; font-size: var(--t-3); line-height: 1.1; color: var(--navy); margin: 0; }
.pb-tile__d { font-size: .975rem; margin: 0; flex: 1; }
.pb-tile .pb-more { margin-top: .5rem; }

.pb-section--panel .pb-tile { background: var(--fondo); }

/* =========================================================================
   Bloque partido con cartela
   ========================================================================= */

.pb-split { display: grid; gap: clamp(2rem, 1rem + 4vw, 4.5rem); align-items: center; }

@media (min-width: 60rem) {
	.pb-split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pb-split--flip .pb-split__media { order: -1; }
}

.pb-split__media { position: relative; }
.pb-split__media img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }

.pb-split__media--cartel img {
	aspect-ratio: auto;
	object-fit: contain;
	background: var(--blanco);
	max-height: 32rem;
	width: auto;
	margin-inline: auto;
}

/* Cartela navy encajada en la esquina de la foto, como en la referencia. */
.pb-cartela {
	position: absolute;
	right: 0;
	bottom: 0;
	max-width: 62%;
	background: var(--navy-hondo);
	color: var(--blanco);
	font-family: var(--titular);
	font-weight: 600;
	text-transform: uppercase;
	font-size: clamp(1.1rem, .95rem + .7vw, 1.6rem);
	line-height: 1.1;
	padding: 1.5rem 1.75rem;
}

@media (max-width: 40rem) { .pb-cartela { position: static; max-width: none; } }

.pb-bleed { width: 100% ; }
/* Banda algo mas alta que la de la referencia: a 1440 px la anterior daba una
   proporcion de casi 4:1, y en una franja tan estrecha cualquier motivo grande
   -- una bola en primer plano, una cara -- se corta si o si. */
.pb-bleed img { width: 100%; height: clamp(18rem, 50vh, 34rem); object-fit: cover; }

/* =========================================================================
   Tarjetas de tarifas

   Misma estructura que la web original: nombre, quien la usa, filas de precio,
   bloque de beneficios y boton. Lo que cambia es el lenguaje visual, no el
   contenido ni el orden.
   ========================================================================= */

.pb-plans { display: grid; gap: 1.25rem; }
@media (min-width: 40rem) { .pb-plans { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 68rem) { .pb-plans--4 { grid-template-columns: repeat(4, 1fr); } }

/* Subgrid: hace que el titulo, los precios, los beneficios y el boton empiecen
   a la misma altura en las cuatro tarjetas. Con flex cada tarjeta se reparte su
   propio alto y los bloques quedan a distinta altura, que es lo que le pasa a
   la web original. Las cuatro tarjetas tienen los mismos cinco hijos. */
@supports (grid-template-rows: subgrid) {
	.pb-plans--4 { grid-template-rows: auto auto 1fr auto auto; }
	.pb-plans--4 .pb-plan { grid-row: span 5; grid-template-rows: subgrid; }
}

.pb-plan {
	background: var(--blanco);
	border: 1px solid var(--linea);
	border-top: 3px solid var(--navy);
	padding: 1.75rem 1.5rem 2rem;
	display: grid;
	align-content: start;
	gap: 0;
	transition: border-top-color .25s ease, box-shadow .25s ease;
}

.pb-plan:hover { border-top-color: var(--acento); box-shadow: 0 12px 32px rgba(6, 27, 70, .08); }

.pb-plan__t {
	font-family: var(--titular);
	font-weight: 600;
	text-transform: uppercase;
	font-size: 1.4rem;
	line-height: 1.1;
	color: var(--navy);
	margin: 0;
}

.pb-plan__s {
	font-size: .75rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--texto);
	margin: .35rem 0 1.35rem;
}

/* Las filas de precio ocupan el hueco sobrante para que el bloque de
   beneficios y el boton queden alineados entre tarjetas de distinto alto. */
.pb-plan__precios { flex: 1; }

.pb-rate {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	padding: .5rem 0;
	border-bottom: 1px solid var(--linea);
	font-size: .95rem;
}

.pb-rate:last-child { border-bottom: none; }

.pb-rate__v {
	font-family: var(--titular);
	font-weight: 700;
	font-size: 1.35rem;
	line-height: 1;
	color: var(--navy);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.pb-plan__ben {
	margin-top: 1.35rem;
	padding-top: 1.35rem;
	border-top: 1px solid var(--linea);
}

.pb-plan__ben > p {
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--navy);
	margin: 0 0 .75rem;
}

.pb-plan__list { list-style: none; margin: 0; padding: 0; font-size: .875rem; line-height: 1.45; }

.pb-plan__list li {
	position: relative;
	padding-left: 1.4rem;
	margin-bottom: .55rem;
}

/* Marca de verificacion en CSS: no hace falta cargar una fuente de iconos
   entera para dibujar cuatro palomitas. */
.pb-plan__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .35em;
	width: .55rem;
	height: .3rem;
	border-left: 2px solid var(--acento);
	border-bottom: 2px solid var(--acento);
	transform: rotate(-45deg);
}

.pb-plan .pb-btn { margin-top: 1.75rem; justify-content: center; align-self: end; }

.pb-plan__nota {
	font-size: .8rem;
	color: var(--texto);
	margin: .75rem 0 0;
	padding-top: .75rem;
	border-top: 1px dashed var(--linea);
}

/* =========================================================================
   Tabla comparativa de tarifas

   Una tabla en vez de cuatro tarjetas: con tarjetas hay que ir y volver para
   comparar dos precios, y en una matriz se lee en vertical de un vistazo.
   ========================================================================= */

.pb-tabla-caja {
	overflow-x: auto;              /* en movil se desliza, la pagina no */
	-webkit-overflow-scrolling: touch;
	border: 1px solid var(--linea);
	background: var(--blanco);
}

.pb-tabla {
	width: 100%;
	min-width: 40rem;
	border-collapse: collapse;
	font-variant-numeric: tabular-nums;   /* cifras alineadas en columna */
}

.pb-tabla th, .pb-tabla td {
	padding: .9rem 1rem;
	text-align: center;
	border-bottom: 1px solid var(--linea);
}

.pb-tabla thead th {
	background: var(--navy);
	color: var(--blanco);
	font-family: var(--titular);
	font-weight: 600;
	font-size: 1.15rem;
	text-transform: uppercase;
	line-height: 1.1;
	border-bottom: none;
	vertical-align: bottom;
	padding-block: 1.1rem;
}

.pb-tabla thead th small {
	display: block;
	font-family: var(--texto-f);
	font-size: .6875rem;
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
	opacity: .7;
	margin-top: .35rem;
}

/* La primera columna es la etiqueta de la fila: se ancla al deslizar. */
.pb-tabla th[scope="row"] {
	text-align: left;
	font-family: var(--texto-f);
	font-size: .95rem;
	font-weight: 700;
	color: var(--navy);
	background: var(--fondo);
	position: sticky;
	left: 0;
	white-space: nowrap;
}

.pb-tabla thead th:first-child { background: var(--navy); position: sticky; left: 0; z-index: 1; }
.pb-tabla tbody tr:nth-child(even) td { background: var(--fondo); }
.pb-tabla tbody tr:last-child th, .pb-tabla tbody tr:last-child td { border-bottom: none; }

.pb-tabla td {
	font-family: var(--titular);
	font-weight: 700;
	font-size: 1.5rem;
	color: var(--navy);
	line-height: 1;
}

/* Celda sin oferta: un guion es mas legible que dejarla en blanco. */
.pb-tabla td.pb-nd { color: var(--linea); font-size: 1.25rem; }

.pb-tabla tfoot td {
	font-family: var(--texto-f);
	font-size: .875rem;
	font-weight: 400;
	color: var(--texto);
	text-align: left;
	background: var(--fondo);
	padding-block: 1rem;
}

.pb-tabla-pie {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	justify-content: center;
	margin-top: 1.5rem;
}

/* =========================================================================
   Fichas del equipo tecnico

   Ficha y no tarjeta suelta: la foto lleva el cargo encima, y las titulaciones
   van en un bloque aparte de la biografia. Para un club deportivo la titulacion
   es el argumento, no un adorno, asi que tiene su propio sitio y se lee sola.
   ========================================================================= */

.pb-people { display: grid; gap: 1.5rem; }
@media (min-width: 52rem) { .pb-people { grid-template-columns: repeat(2, 1fr); } }

.pb-ficha {
	background: var(--blanco);
	border: 1px solid var(--linea);
	border-top: 3px solid var(--navy);
	display: grid;
	transition: border-top-color .25s ease, box-shadow .25s ease;
}

@media (min-width: 34rem) { .pb-ficha { grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); } }
.pb-ficha:hover { border-top-color: var(--acento); box-shadow: 0 12px 32px rgba(6, 27, 70, .08); }

.pb-ficha__foto { position: relative; }
.pb-ficha__foto img { width: 100%; height: 100%; min-height: 17rem; object-fit: cover; }

/* Cargo sobre la foto: identifica a la persona sin robarle sitio al nombre. */
.pb-ficha__cargo {
	position: absolute;
	left: 0;
	bottom: 0;
	background: var(--acento);
	color: var(--blanco);
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	padding: .45rem .8rem;
}

.pb-ficha__cuerpo { padding: 1.6rem 1.5rem 1.75rem; }

.pb-ficha__n {
	font-family: var(--titular);
	font-weight: 600;
	text-transform: uppercase;
	font-size: 1.6rem;
	line-height: 1.05;
	color: var(--navy);
	margin: 0;
}

.pb-ficha__area {
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--acento);
	margin: .4rem 0 .9rem;
}

.pb-ficha__bio { font-size: .95rem; margin: 0 0 1.25rem; }

.pb-ficha__et {
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--navy);
	margin: 0 0 .6rem;
	padding-top: 1.1rem;
	border-top: 1px solid var(--linea);
}

.pb-ficha__creds { list-style: none; margin: 0; padding: 0; font-size: .875rem; line-height: 1.4; }

.pb-ficha__creds li {
	position: relative;
	padding-left: 1.4rem;
	margin-bottom: .5rem;
}

/* Misma palomita que en las tarifas: una marca de verificacion en CSS. */
.pb-ficha__creds li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .32em;
	width: .55rem;
	height: .3rem;
	border-left: 2px solid var(--acento);
	border-bottom: 2px solid var(--acento);
	transform: rotate(-45deg);
}

@media (prefers-reduced-motion: reduce) { .pb-ficha { transition: none; } }

/* =========================================================================
   Preguntas frecuentes
   ========================================================================= */

.pb-faq { border-top: 1px solid var(--linea); max-width: 48rem; }
.pb-faq details { border-bottom: 1px solid var(--linea); }

.pb-faq summary {
	list-style: none;
	cursor: pointer;
	padding: 1.25rem 2.5rem 1.25rem 0;
	position: relative;
	font-family: var(--titular);
	font-weight: 600;
	text-transform: uppercase;
	font-size: 1.2rem;
	line-height: 1.2;
	color: var(--navy);
}

.pb-faq summary::-webkit-details-marker { display: none; }

.pb-faq summary::after {
	content: "+";
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	font-size: 1.5rem;
	font-weight: 400;
	color: var(--acento);
}

.pb-faq details[open] summary::after { content: "\2212"; }
.pb-faq details > div { padding: 0 2.5rem 1.5rem 0; font-size: 1rem; }
.pb-faq details > div > * { margin: 0 0 .8rem; }
.pb-faq details > div > *:last-child { margin-bottom: 0; }

/* =========================================================================
   Migas
   ========================================================================= */

.pb-crumbs { font-size: .8125rem; letter-spacing: .06em; text-transform: uppercase; padding-top: 1.75rem; }
.pb-crumbs a { color: var(--texto); text-decoration: none; }
.pb-crumbs a:hover { color: var(--acento); }
.pb-crumbs span { margin-inline: .45rem; }

/* =========================================================================
   Formulario
   ========================================================================= */

.pb-form { display: grid; gap: 1.1rem; max-width: 34rem; }
.pb-form__row { display: grid; gap: 1.1rem; }
@media (min-width: 34rem) { .pb-form__row--2 { grid-template-columns: repeat(2, 1fr); } }

.pb-field { display: grid; gap: .4rem; }
.pb-field label { font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--navy); }

.pb-field input, .pb-field select, .pb-field textarea {
	font-family: var(--texto-f);
	font-size: 1rem;
	padding: .8rem .9rem;
	border: 1px solid var(--linea);
	border-radius: 0;
	background: var(--blanco);
	color: var(--navy);
	width: 100%;
}

.pb-field textarea { resize: vertical; min-height: 7rem; }
.pb-field input:focus, .pb-field select:focus, .pb-field textarea:focus { border-color: var(--acento); }

.pb-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.pb-msg { padding: .9rem 1.1rem; border-left: 4px solid; font-size: .95rem; }
.pb-msg--ok { border-color: #2F8A4E; background: #EDF6F0; color: #1D5732; }
.pb-msg--err { border-color: #B3261E; background: #FBECEA; color: #7A1B15; }

/* =========================================================================
   Navegacion
   ========================================================================= */

.pb-nav { position: sticky; top: 0; z-index: 50; background: var(--blanco); border-bottom: 1px solid var(--linea); }
.pb-nav__in { display: flex; align-items: center; gap: 1.5rem; height: var(--nav-h); }

.pb-brand { display: flex; align-items: center; gap: .8rem; text-decoration: none; margin-right: auto; }
.pb-brand img { width: 2.6rem; height: 2.6rem; border-radius: 50%; }
.pb-brand__t { font-family: var(--titular); font-weight: 700; text-transform: uppercase; font-size: 1.4rem; line-height: 1.05; letter-spacing: .01em; color: var(--navy); }
/* En movil el nombre se parte en dos lineas antes que empujar el boton fuera. */
@media (max-width: 26rem) { .pb-brand__t { font-size: 1.15rem; max-width: 7.5em; display: block; } }
.pb-brand__s { display: block; font-family: var(--texto-f); font-size: .625rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--texto); margin-top: .3rem; }

/* Icono de pista del boton de reserva. Hereda currentColor: cambia de color
   con el boton sin tener que declarar nada mas. */
.pb-icono {
	width: 1.05em;
	height: 1.05em;
	flex-shrink: 0;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
}

/* El boton de la barra se aprieta en movil: el icono aguanta solo y el texto
   se esconde. Es lo que evita que la cabecera se rompa en pantallas estrechas. */
.pb-btn--reserva { padding-inline: 1.5rem; gap: .55rem; }

@media (max-width: 30rem) {
	.pb-btn--reserva { padding: .7rem .85rem; }
	.pb-btn--reserva span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
	.pb-btn--reserva .pb-icono { width: 1.3em; height: 1.3em; }
}

.pb-menu { display: none; align-items: center; gap: 1.75rem; list-style: none; margin: 0; padding: 0; }
@media (min-width: 64rem) { .pb-menu { display: flex; } }

.pb-menu a {
	font-family: var(--texto-f);
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--navy);
	text-decoration: none;
	padding-block: .4rem;
	border-bottom: 2px solid transparent;
	transition: border-color .2s ease, color .2s ease;
}

.pb-menu a:hover { color: var(--acento); }
.pb-menu .current-menu-item > a, .pb-menu .current-page-ancestor > a { border-bottom-color: var(--acento); }

.pb-burger { display: inline-flex; flex-direction: column; justify-content: center; gap: 4px; width: 2.75rem; height: 2.75rem; padding: 0 .6rem; background: none; border: none; cursor: pointer; }
@media (min-width: 64rem) { .pb-burger { display: none; } }
.pb-burger span { display: block; height: 2px; background: var(--navy); transition: transform .25s ease, opacity .2s ease; }
.pb-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.pb-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.pb-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.pb-drawer { display: none; border-top: 1px solid var(--linea); background: var(--blanco); }
.pb-drawer[data-open="true"] { display: block; }
@media (min-width: 64rem) { .pb-drawer { display: none !important; } }
.pb-drawer ul { list-style: none; margin: 0; padding: .5rem 0 1.5rem; }
.pb-drawer a { display: block; padding: .9rem 0; font-family: var(--titular); font-weight: 600; text-transform: uppercase; font-size: 1.25rem; color: var(--navy); text-decoration: none; border-bottom: 1px solid var(--linea); }
.pb-drawer .pb-btn { margin-top: 1.25rem; width: 100%; justify-content: center; }

/* =========================================================================
   Pie — compacto

   Tres columnas y no cuatro, tipografia mas pequena y sin repetir enlaces del
   menu. En un pie la gente busca telefono, direccion y horario; el resto es
   relleno que solo alarga la pagina.
   ========================================================================= */

.pb-foot {
	background: var(--casi-negro);
	color: rgba(255, 255, 255, .7);
	padding-block: clamp(2.5rem, 1.5rem + 2.5vw, 3.5rem) 1.5rem;
	font-size: .9rem;
	line-height: 1.5;
}

.pb-foot a { color: rgba(255, 255, 255, .7); text-decoration: none; }
.pb-foot a:hover { color: var(--acento); }

.pb-foot__grid { display: grid; gap: 2rem; }
@media (min-width: 44rem) { .pb-foot__grid { grid-template-columns: 1.5fr 1fr 1.2fr; gap: 2.5rem; } }

.pb-foot h3 {
	font-family: var(--titular);
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--blanco);
	margin: 0 0 .7rem;
}

.pb-foot__h-horario { margin-top: 1.75rem; }
.pb-foot ul { list-style: none; margin: 0; padding: 0; }
.pb-foot li { margin-bottom: .35rem; }

.pb-foot__brand .pb-brand__t { color: var(--blanco); font-size: 1.25rem; }
.pb-foot__dir { margin: .9rem 0 .6rem; }
.pb-foot__tel { margin: 0 0 1.1rem; }
.pb-foot__tel a { color: var(--blanco); }

.pb-foot__hours {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	max-width: 20rem;
	font-variant-numeric: tabular-nums;
	margin-bottom: .3rem;
}

/* Logotipos de marca: cuadrados tocables (44 px es el minimo comodo con el
   dedo) y con el color de la marca al pasar por encima. */
.pb-social { display: flex; gap: .5rem; }

.pb-social a {
	width: 2.5rem;
	height: 2.5rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(255, 255, 255, .22);
	transition: background-color .2s ease, border-color .2s ease;
}

.pb-social__i { width: 1.2rem; height: 1.2rem; fill: rgba(255, 255, 255, .8); transition: fill .2s ease; }
.pb-social a:hover { border-color: transparent; }
.pb-social a:hover .pb-social__i { fill: var(--blanco); }
.pb-social a[aria-label="Instagram"]:hover { background: #C13584; }
.pb-social a[aria-label="WhatsApp"]:hover { background: #25D366; }

.pb-foot__base {
	border-top: 1px solid rgba(255, 255, 255, .14);
	margin-top: 2.25rem;
	padding-top: 1.25rem;
	display: flex;
	flex-wrap: wrap;
	gap: .75rem 1.5rem;
	justify-content: space-between;
	font-size: .8rem;
	color: rgba(255, 255, 255, .45);
}

/* =========================================================================
   Guia del pickleball (wiki)
   ========================================================================= */

.pb-guia { display: grid; gap: 3rem; }
@media (min-width: 60rem) { .pb-guia { grid-template-columns: 16rem minmax(0, 1fr); gap: 4rem; } }

/* Indice lateral pegajoso: en un articulo largo, sin esto hay que subir hasta
   arriba para saltar a otro. */
.pb-guia__nav { align-self: start; }
@media (min-width: 60rem) { .pb-guia__nav { position: sticky; top: calc(var(--nav-h) + 1.5rem); } }

.pb-guia__navt {
	font-family: var(--titular);
	font-weight: 600;
	text-transform: uppercase;
	font-size: 1.05rem;
	color: var(--navy);
	margin: 0 0 .75rem;
	padding-bottom: .6rem;
	border-bottom: 2px solid var(--navy);
}

.pb-guia__nav ul { list-style: none; margin: 0; padding: 0; }
.pb-guia__nav li { border-bottom: 1px solid var(--linea); }

.pb-guia__nav a {
	display: block;
	padding: .65rem 0;
	font-size: .95rem;
	color: var(--texto);
	text-decoration: none;
	transition: color .2s ease, padding-left .2s ease;
}

.pb-guia__nav a:hover { color: var(--acento); padding-left: .35rem; }
.pb-guia__nav li.es-actual a { color: var(--navy); font-weight: 700; }
.pb-guia__nav li.es-actual { border-left: 3px solid var(--acento); padding-left: .6rem; }

.pb-guia__fecha {
	margin-top: 3rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--linea);
	font-size: .8125rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--texto);
}

/* Indice de la wiki, agrupado por tema */
.pb-guia__tema { margin-bottom: 3rem; }
.pb-guia__desc { max-width: var(--read); margin: .6rem 0 0; }

.pb-guia__lista {
	list-style: none;
	margin: 1.25rem 0 0;
	padding: 0;
	border-top: 1px solid var(--linea);
	max-width: 46rem;
}

.pb-guia__lista li { border-bottom: 1px solid var(--linea); }

.pb-guia__lista a {
	display: block;
	padding: .9rem 0;
	font-family: var(--titular);
	font-weight: 600;
	text-transform: uppercase;
	font-size: 1.2rem;
	color: var(--navy);
	text-decoration: none;
	transition: color .2s ease, padding-left .2s ease;
}

.pb-guia__lista a:hover { color: var(--acento); padding-left: .5rem; }

@media (prefers-reduced-motion: reduce) {
	.pb-guia__nav a, .pb-guia__lista a { transition: none; }
	.pb-guia__nav a:hover, .pb-guia__lista a:hover { padding-left: 0; }
}

/* =========================================================================
   Tira de ultimas entradas en portada

   Lista, no tarjetas: tres tarjetas con foto anaden unos 400 px a la portada.
   Aqui cada entrada ocupa una linea y se lee de un vistazo.
   ========================================================================= */

.pb-tira__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.25rem;
}

.pb-tira { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linea); }

.pb-tira a {
	display: grid;
	align-items: baseline;
	gap: .15rem .9rem;
	padding: .85rem 0;
	border-bottom: 1px solid var(--linea);
	text-decoration: none;
	transition: padding-left .2s ease;
}

@media (min-width: 46rem) {
	.pb-tira a { grid-template-columns: 5.5rem 14rem 1fr; align-items: center; gap: 1.25rem; }
}

.pb-tira__img {
	display: block;
	width: 5.5rem;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--linea);
	flex-shrink: 0;
}

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

.pb-tira__datos { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }

@media (max-width: 45.99rem) {
	.pb-tira a { grid-template-columns: 4.5rem 1fr; grid-template-areas: "img datos" "img titulo"; gap: .3rem .9rem; align-items: center; }
	.pb-tira__img { grid-area: img; width: 4.5rem; }
	.pb-tira__datos { grid-area: datos; }
	.pb-tira__t { grid-area: titulo; }
}

.pb-tira a:hover { padding-left: .5rem; }

.pb-tira time {
	font-size: .8125rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--texto);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.pb-tira__cat {
	justify-self: start;
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--acento);
	border: 1px solid currentColor;
	padding: .15rem .45rem;
	white-space: nowrap;
}

.pb-tira__t {
	font-family: var(--titular);
	font-weight: 600;
	text-transform: uppercase;
	font-size: 1.15rem;
	line-height: 1.15;
	color: var(--navy);
}

.pb-tira a:hover .pb-tira__t { color: var(--acento); }

@media (prefers-reduced-motion: reduce) { .pb-tira a { transition: none; } .pb-tira a:hover { padding-left: 0; } }

/* =========================================================================
   Blog: listado, filtros y tarjeta de entrada
   ========================================================================= */

.pb-filtros {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin-bottom: 2.5rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid var(--linea);
}

.pb-filtros a {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .5rem 1rem;
	border: 1px solid var(--linea);
	background: var(--blanco);
	color: var(--navy);
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.pb-filtros a:hover { border-color: var(--navy); }
.pb-filtros a[aria-current="page"] { background: var(--navy); border-color: var(--navy); color: var(--blanco); }
.pb-filtros a span { font-weight: 400; opacity: .6; font-variant-numeric: tabular-nums; }

.pb-posts { display: grid; gap: 1.5rem; }
@media (min-width: 44rem) { .pb-posts { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 68rem) { .pb-posts { grid-template-columns: repeat(3, 1fr); } }

.pb-post {
	background: var(--blanco);
	border: 1px solid var(--linea);
	border-top: 3px solid var(--navy);
	display: flex;
	flex-direction: column;
	transition: border-top-color .25s ease, box-shadow .25s ease;
}

.pb-post:hover { border-top-color: var(--acento); box-shadow: 0 12px 32px rgba(6, 27, 70, .08); }
.pb-post__img { display: block; }
.pb-post__img img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.pb-post__cuerpo { padding: 1.4rem 1.4rem 1.6rem; display: flex; flex-direction: column; flex: 1; }

.pb-post__meta {
	display: flex;
	align-items: center;
	gap: .7rem;
	font-size: .75rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--texto);
	margin: 0 0 .6rem;
}

.pb-post__cat { background: var(--acento); color: var(--blanco); font-weight: 700; padding: .2rem .5rem; }

.pb-post__t {
	font-family: var(--titular);
	font-weight: 600;
	text-transform: uppercase;
	font-size: 1.4rem;
	line-height: 1.08;
	color: var(--navy);
	margin: 0 0 .6rem;
}

.pb-post__t a { text-decoration: none; }
.pb-post__t a:hover { color: var(--acento); }
.pb-post__x { font-size: .95rem; margin: 0 0 1rem; flex: 1; }

/* Paginacion */
.pagination { margin-top: 3rem; display: flex; justify-content: center; }
.nav-links { display: flex; flex-wrap: wrap; gap: .5rem; }

.nav-links .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	height: 2.75rem;
	padding: 0 .9rem;
	border: 1px solid var(--linea);
	background: var(--blanco);
	color: var(--navy);
	font-size: .875rem;
	font-weight: 700;
	text-decoration: none;
}

.nav-links .page-numbers.current { background: var(--navy); border-color: var(--navy); color: var(--blanco); }
.nav-links .page-numbers:hover { border-color: var(--navy); }

@media (prefers-reduced-motion: reduce) { .pb-post { transition: none; } }

/* =========================================================================
   Feed de Instagram

   El plugin trae sus propios estilos. Aqui solo se le pone el ancho y se le
   quita el margen de mas, para que encaje con el resto de bloques sin tener
   que pelearse con su CSS.
   ========================================================================= */

.pb-ig { max-width: 68rem; margin-inline: auto; }
.pb-ig #sb_instagram { padding-bottom: 0 !important; }
.pb-ig #sb_instagram .sb_instagram_header { display: none; }
.pb-ig-btn, .pb-ico-btn { width: 1.1em; height: 1.1em; fill: currentColor; flex-shrink: 0; }

/* =========================================================================
   Boton flotante de WhatsApp
   ========================================================================= */

.pb-wa {
	position: fixed;
	right: 1.25rem;
	/* --pb-bar sube el boton cuando la barra de cookies esta puesta: si no,
	   se quedan uno encima del otro. Lo calcula app.js midiendo la barra. */
	bottom: calc(1.25rem + var(--pb-bar, 0px));
	z-index: 55;
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	height: 3.5rem;
	padding: 0 1.1rem 0 1rem;
	border-radius: 999px;
	background: #25D366;
	color: #fff;
	text-decoration: none;
	box-shadow: 0 8px 24px rgba(6, 27, 70, .28);
	transition: bottom .25s ease, transform .2s ease, box-shadow .2s ease;
}

.pb-wa:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(6, 27, 70, .34); }
.pb-wa__i { width: 1.75rem; height: 1.75rem; fill: #fff; flex-shrink: 0; }

.pb-wa__t {
	font-family: var(--texto-f);
	font-size: .95rem;
	font-weight: 700;
	letter-spacing: .01em;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* En movil se queda solo el circulo: un boton con numero ocupa media pantalla
   y tapa el contenido. El numero sigue en el aria-label y en el pie. */
@media (max-width: 40rem) {
	.pb-wa { padding: 0; width: 3.5rem; justify-content: center; }
	.pb-wa__t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) { .pb-wa { transition: none; } .pb-wa:hover { transform: none; } }

/* =========================================================================
   Cookies
   ========================================================================= */

.pb-cookiebar { position: fixed; inset-inline: 0; bottom: 0; z-index: 60; background: var(--blanco); border-top: 3px solid var(--acento); box-shadow: 0 -8px 28px rgba(6, 27, 70, .12); }
.pb-cookiebar__in { display: flex; flex-direction: column; gap: 1rem; padding-block: 1.1rem; }
@media (min-width: 48rem) { .pb-cookiebar__in { flex-direction: row; align-items: center; } }
.pb-cookiebar p { flex: 1; margin: 0; font-size: .925rem; }
.pb-cookiebar a { color: var(--acento); }
.pb-cookiebar__btns { display: flex; gap: .6rem; flex-shrink: 0; }
.pb-cookiebar .pb-btn { padding: .7rem 1.5rem; }

.pb-consent-placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .9rem; padding: 1.5rem; text-align: center; background: var(--panel); }
.pb-consent-placeholder p { margin: 0; max-width: 24rem; font-size: .95rem; }

/* Dato pendiente de rellenar antes de publicar */
.pb-todo { background: #FFF3C4; color: #6B4E0A; padding: 0 .3em; font-weight: 700; }

.pb-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pb-skip { position: absolute; left: -9999px; }
.pb-skip:focus { left: var(--gutter); top: .5rem; z-index: 100; background: var(--navy); color: var(--blanco); padding: .7rem 1.2rem; }