/*
 * c-alcazar — los componentes propios del theme alcazar (encargo D10–D23):
 * cabecera de página y de banda, plano de salas, lista de salas, ficha de sala,
 * línea de tiempo, mapa, accesos por tipo y el conmutador de variantes.
 * Opaco y plano: colores de los tokens, trazo fino, sin texturas ni sombras.
 */
@layer components {
	/* ── cabecera de página ────────────────────────────────────────────── */
	.c-page-head { display: grid; gap: var(--space-xs); margin-block-end: var(--space-l); }
	.c-page-title { font-size: var(--step-5); line-height: 1.1; }
	.c-page-lead { color: var(--color-muted); font-size: var(--step-1); line-height: 1.55; max-inline-size: 60ch; }
	.c-page-count, .c-page-note { color: var(--color-muted); font-size: var(--step--1); }
	.c-page-note { margin-block-start: var(--space-l); }
	.c-prose { display: grid; gap: var(--space-s); }

	/* ── cabecera de banda: título + «ver todos» ───────────────────────── */
	.c-band { padding-block: var(--space-l); }
	.c-band__head {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		justify-content: space-between;
		gap: var(--space-xs) var(--space-m);
		margin-block-end: var(--space-m);
		padding-block-end: var(--space-2xs);
		border-block-end: 1px solid var(--color-rule);
	}
	.c-band__title { font-size: var(--step-3); }
	.c-band__title:not(.is-institutional) { font-size: var(--step-2); }
	/* las bandas beige del template */
	.c-band--pieces, .c-home-images, .c-rail--related {
		--bleed-bg: var(--color-band);
		background: var(--color-band);
		box-shadow: 0 0 0 100vmax var(--color-band);
		clip-path: inset(0 -100vmax);
	}

	/* ── plano (az_plano) ──────────────────────────────────────────────── */
	.c-plan { display: block; inline-size: 100%; block-size: auto; max-block-size: 80vh; }
	.c-plan__garden { fill: color-mix(in oklab, var(--brand-accent) 8%, var(--brand-paper)); stroke: var(--color-rule); stroke-width: 0.6; stroke-dasharray: 2 2; }
	.c-plan__building { fill: color-mix(in oklab, var(--brand-dark) 14%, var(--brand-paper)); stroke: var(--brand-dark); stroke-width: 0.7; }
	.c-plan__court { fill: var(--brand-paper); stroke: var(--brand-dark); stroke-width: 0.4; }
	.c-plan__solid { fill: color-mix(in oklab, var(--brand-dark) 45%, var(--brand-paper)); }
	.c-plan__space { fill: none; stroke: color-mix(in oklab, var(--brand-dark) 35%, var(--brand-paper)); stroke-width: 0.4; }
	.c-plan__room-shape { fill: color-mix(in oklab, var(--brand-accent) 42%, var(--brand-paper)); stroke: var(--brand-paper); stroke-width: 1; transition: fill var(--duration) var(--easing); }
	.c-plan__num-bg { fill: var(--brand-paper); stroke: var(--brand-accent); stroke-width: 0.8; }
	.c-plan__num { font-family: var(--font-body); font-size: 8px; font-weight: 600; fill: var(--brand-dark); }
	a.c-plan__room:hover .c-plan__room-shape, a.c-plan__room:focus-visible .c-plan__room-shape, .c-plan__room.is-current .c-plan__room-shape { fill: var(--brand-accent); }
	a.c-plan__room:focus-visible { outline: none; }
	a.c-plan__room:focus-visible .c-plan__room-shape { stroke: var(--brand-dark); stroke-width: 2; }
	.c-plan__room.is-current .c-plan__num-bg { fill: var(--brand-dark); stroke: var(--brand-dark); }
	.c-plan__room.is-current .c-plan__num { fill: var(--brand-paper); }
	.c-plan--small { max-block-size: 18rem; }

	/* ── página Salas: plano | lista; en angosto, la lista primero (D20) ─ */
	.c-rooms { container: rooms / inline-size; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-areas: "plan list"; gap: var(--space-xl); align-items: start; }
	.c-rooms__plan { grid-area: plan; position: sticky; top: var(--space-m); }
	.c-rooms__list { grid-area: list; margin: 0; padding: 0; list-style: none; border-block-start: 1px solid var(--color-rule); }
	@media (width < 48rem) {
		.c-rooms { grid-template-columns: 1fr; grid-template-areas: "list" "plan"; }
		.c-rooms__plan { position: static; max-inline-size: 26rem; justify-self: center; }
	}
	.c-rooms__item { border-block-end: 1px solid var(--color-border); }
	.c-rooms__link {
		display: grid;
		grid-template-columns: 2.5rem 1fr auto;
		grid-template-areas: "num name count" "num meta count";
		align-items: center;
		gap: 0.1rem var(--space-s);
		padding-block: var(--space-xs);
		color: var(--color-strong);
		text-decoration: none;
	}
	.c-rooms__num {
		grid-area: num;
		display: inline-grid;
		place-items: center;
		inline-size: 2.25rem;
		aspect-ratio: 1;
		border: 1px solid var(--color-accent);
		/* escudo: un cuadrado con el bisel de los botones girado hacia abajo (los lados
		   de abajo se cortan --bevel en vertical y se juntan en un vértice al centro) */
		border-radius: 0 0 50% 50% / 0 0 var(--bevel) var(--bevel);
		font-size: var(--step--1);
		font-weight: 600;
	}
	.c-rooms__name { grid-area: name; font-size: var(--step-1); }
	.c-rooms__meta { grid-area: meta; color: var(--color-muted); font-size: var(--step--1); }
	.c-rooms__count { grid-area: count; color: var(--color-muted); font-size: var(--step--1); white-space: nowrap; }
	.c-rooms__link:hover .c-rooms__name { text-decoration: underline; text-decoration-color: var(--color-accent); text-underline-offset: 0.2em; }
	.c-rooms__link:hover .c-rooms__num { background: var(--color-accent); color: var(--color-accent-fg); }
	/* sala sin número (no está en el plano de la guía): el lugar queda, sin escudo */
	.c-rooms__num--none, .c-rooms__link:hover .c-rooms__num--none, .c-home-rooms__link:hover .c-rooms__num--none { border-color: transparent; background: none; }

	/* ── ficha de sala ─────────────────────────────────────────────────── */
	.c-room-head { display: grid; grid-template-columns: minmax(0, 2fr) minmax(10rem, 1fr); gap: var(--space-l); align-items: start; margin-block-end: var(--space-l); }
	@media (width < 40rem) { .c-room-head { grid-template-columns: 1fr; } .c-room-head__plan { max-inline-size: 12rem; } }
	.c-room-head__text { display: grid; gap: var(--space-xs); }
	.c-room-head__eyebrow { font-size: var(--step--1); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent-text); }
	.c-room-head__eyebrow a { color: inherit; text-decoration: none; }
	.c-room-head__title { font-size: var(--step-5); line-height: 1.1; }
	.c-room-head__facts { display: flex; flex-wrap: wrap; gap: 0 var(--space-s); color: var(--color-muted); }
	.c-room-head__facts > span + span::before { content: "·"; margin-inline-end: var(--space-s); color: var(--color-accent); }
	.c-room-head__num { color: var(--color-strong); font-weight: 600; }
	.c-room-nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-xs); margin-block-start: var(--space-s); padding-block-start: var(--space-xs); border-block-start: 1px solid var(--color-border); }
	.c-room-nav__link { display: grid; gap: 0.1rem; color: var(--color-strong); text-decoration: none; font-size: var(--step--1); }
	.c-room-nav__link--next { text-align: end; margin-inline-start: auto; }
	.c-room-nav__dir { color: var(--color-muted); font-size: var(--step--2); letter-spacing: 0.08em; text-transform: uppercase; }
	.c-room-nav__link:hover .c-room-nav__name { text-decoration: underline; }
	.c-room-text { max-inline-size: var(--measure); padding-block: var(--space-l); }
	.c-room-text__title { font-size: var(--step-1); margin-block-end: var(--space-xs); }

	/* ── línea de tiempo (az_linea_svg) ────────────────────────────────── */
	.c-timeline { margin: 0; container: tl / inline-size; }
	/* debajo de la línea: el dato del incendio */
	.c-timeline__summary { max-inline-size: var(--measure); margin-block: var(--space-m) var(--space-xs); }
	.c-timeline__h svg, .c-timeline__v svg, .c-timeline--mini svg { display: block; inline-size: 100%; block-size: auto; }
	.c-timeline__v { display: none; }
	@media (width < 40rem) {
		.c-timeline__h { display: none; }
		.c-timeline__v { display: block; max-inline-size: 26rem; margin-inline: auto; }
	}
	.c-timeline__after { fill: color-mix(in oklab, var(--brand-dark) 5%, var(--brand-paper)); }
	.c-timeline__dyn-band { stroke: var(--brand-paper); stroke-width: 1.5; }
	.c-timeline__dyn--0 .c-timeline__dyn-band { fill: var(--brand-accent); }
	.c-timeline__dyn--1 .c-timeline__dyn-band { fill: color-mix(in oklab, var(--brand-accent) 60%, var(--brand-dark)); }
	.c-timeline__dyn-name { fill: var(--brand-paper); font-size: 15px; }
	.c-timeline__svg--mini .c-timeline__dyn-name { font-size: 11px; }
	.c-timeline__dyn:hover .c-timeline__dyn-band, .c-timeline__dyn:focus-visible .c-timeline__dyn-band { fill: var(--brand-dark); }
	.c-timeline__bar rect { fill: var(--brand-dark); }
	.c-timeline__bar:hover rect, .c-timeline__bar:focus-visible rect { fill: var(--brand-accent); }
	.c-timeline__axis { stroke: var(--brand-dark); stroke-width: 1; }
	.c-timeline__century text { font-family: var(--font-body); font-size: 11px; font-weight: 600; fill: var(--brand-dark); paint-order: stroke; stroke: var(--brand-paper); stroke-width: 8px; stroke-linejoin: round; }
	.c-timeline__century--after text { stroke: color-mix(in oklab, var(--brand-dark) 5%, var(--brand-paper)); }   /* el fondo de .c-timeline__after */
	.c-timeline__svg--mini .c-timeline__century text { font-size: 7px; }
	/* la cantidad la da el alto de la columna: un solo color */
	.c-timeline__cent rect { fill: color-mix(in oklab, var(--brand-accent) 45%, var(--brand-paper)); stroke: var(--brand-accent); stroke-width: 0.6; }
	.c-timeline__cent text { font-family: var(--font-body); font-size: 11px; font-weight: 600; fill: var(--brand-dark); }
	.c-timeline__cent:hover rect, .c-timeline__cent:focus-visible rect { fill: var(--brand-accent); }
	.c-timeline__mark line { stroke: color-mix(in oklab, var(--brand-dark) 55%, var(--brand-paper)); stroke-width: 1; stroke-dasharray: 3 3; }
	.c-timeline__mark text { font-family: var(--font-body); font-size: 11px; font-weight: 600; fill: var(--brand-dark); }
	/* el texto de un hito (HTML en un foreignObject): el año arriba y el texto en renglones */
	.c-timeline__mark-text { font-family: var(--font-body); font-size: 10.5px; line-height: 1.25; color: var(--brand-dark); overflow-wrap: break-word; }
	.c-timeline__mark-text b { display: block; font-size: 11px; font-weight: 600; }
	.c-timeline__mark-text--end { text-align: end; }
	.c-timeline__mark--fire .c-timeline__mark-text { color: #8c2a1c; font-size: 12px; }
	.c-timeline__mark--fire line { stroke: #8c2a1c; stroke-width: 3; stroke-dasharray: none; }
	.c-timeline__mark--fire text { fill: #8c2a1c; font-size: 12px; }
	.c-timeline a:focus-visible { outline: none; }
	.c-timeline__legend { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-m); margin-block-start: var(--space-s); color: var(--color-muted); font-size: var(--step--1); }
	.c-timeline__key::before { content: ""; display: inline-block; inline-size: 0.9em; block-size: 0.9em; margin-inline-end: 0.4em; vertical-align: -0.1em; }
	.c-timeline__key--bar::before { background: var(--brand-dark); }
	.c-timeline__key--cent::before { background: color-mix(in oklab, var(--brand-accent) 45%, var(--brand-paper)); border: 1px solid var(--brand-accent); }
	.c-timeline__key--fire::before { inline-size: 3px; background: #8c2a1c; }
	.c-timeline__undated { margin-block-start: var(--space-s); font-weight: 600; }
	.c-timeline__table { margin-block-start: var(--space-m); }
	.c-timeline__table summary { cursor: pointer; color: var(--color-muted); font-size: var(--step--1); }

	/* ── mapa (az_mapa_svg) ────────────────────────────────────────────── */
	.c-map { display: grid; grid-template-columns: minmax(0, 3fr) minmax(12rem, 1fr); grid-template-areas: "tabs tabs" "panel list"; gap: var(--space-s) var(--space-l); }
	@media (width < 48rem) { .c-map { grid-template-columns: 1fr; grid-template-areas: "tabs" "panel" "list"; } }
	.c-map__tabs { grid-area: tabs; display: flex; gap: var(--space-2xs); }
	/* las pestañas son .c-button (el alto del botón Buscar del menú); la elegida, rellena */
	.c-map__tab[aria-selected="true"], .c-map__tab[aria-selected="true"]:hover { background: var(--color-strong); border-color: var(--color-strong); color: var(--color-strong-fg); }
	.c-map__panel { grid-area: panel; }
	.c-map__panel[data-state="closed"] { display: none; }
	.c-map__svg { display: block; inline-size: 100%; block-size: auto; border: 1px solid var(--color-border); }
	.c-map__sea { fill: color-mix(in oklab, var(--brand-dark) 6%, var(--brand-paper)); }
	.c-map__land { fill: var(--brand-paper); stroke: color-mix(in oklab, var(--brand-dark) 30%, var(--brand-paper)); stroke-width: 0.8; }
	.c-map__land--esp { fill: color-mix(in oklab, var(--brand-accent) 12%, var(--brand-paper)); }
	.c-map__hit { fill: transparent; }
	.c-map__dot { fill: var(--brand-accent); stroke: var(--brand-paper); stroke-width: 2; }
	.c-map__n { font-family: var(--font-body); font-size: 15px; font-weight: 600; fill: var(--brand-paper); }
	.c-map__name { font-family: var(--font-body); font-size: 15px; font-weight: 600; fill: var(--brand-dark); paint-order: stroke; stroke: var(--brand-paper); stroke-width: 4px; stroke-linejoin: round; }
	.c-map__point:hover .c-map__dot, .c-map__point:focus-visible .c-map__dot { fill: var(--brand-dark); }
	.c-map__point:focus-visible { outline: none; }
	.c-map__list { grid-area: list; margin: 0; padding: 0; list-style: none; border-block-start: 1px solid var(--color-rule); align-self: start; }
	.c-map__list li { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-s); padding-block: var(--space-xs); border-block-end: 1px solid var(--color-border); }
	/* como el nombre de las salas (.c-rooms__name) */
	.c-map__list a { color: var(--color-strong); font-family: var(--font-heading); font-size: var(--step-1); text-decoration: none; }
	.c-map__list a:hover { text-decoration: underline; text-decoration-color: var(--color-accent); text-underline-offset: 0.2em; }
	.c-map__list-n { color: var(--color-muted); font-size: var(--step--1); white-space: nowrap; }
	.c-map__coverage { max-inline-size: none; }

	/* ── portada: bloques de abajo ─────────────────────────────────────── */
	.c-home-block { padding-block: var(--space-xl); }
	.c-home-rooms__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--space-l); align-items: center; }
	@media (width < 48rem) { .c-home-rooms__body { grid-template-columns: 1fr; } .c-home-rooms__plan { max-inline-size: 16rem; justify-self: center; } }
	.c-home-rooms__plan .c-plan { max-block-size: 28rem; }
	.c-home-rooms__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: var(--space-2xs) var(--space-m); margin: 0; padding: 0; list-style: none; counter-reset: none; }
	.c-home-rooms__link { display: flex; align-items: center; gap: var(--space-xs); padding-block: var(--space-2xs); border-block-end: 1px solid var(--color-border); color: var(--color-strong); text-decoration: none; }
	.c-home-rooms__link .c-rooms__name { font-size: var(--step-0); }
	.c-home-rooms__link:hover .c-rooms__name { text-decoration: underline; text-decoration-color: var(--color-accent); }
	.c-home-rooms__link:hover .c-rooms__num { background: var(--color-accent); color: var(--color-accent-fg); }

	.c-types { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 10.5rem), 1fr)); gap: var(--space-s); margin: 0; padding: 0; list-style: none; }
	.c-types__link { display: grid; gap: 0.2rem; color: var(--color-strong); text-decoration: none; }
	.c-types__media { display: grid; place-items: center; aspect-ratio: 1; padding: var(--space-2xs); background: var(--color-soft); }
	.c-types__media img { inline-size: 100%; block-size: 100%; object-fit: contain; }
	.c-types__name { margin-block-start: var(--space-2xs); font-weight: 600; }
	.c-types__count { color: var(--color-muted); font-size: var(--step--1); }
	.c-types__link:hover .c-types__name { text-decoration: underline; text-decoration-color: var(--color-accent); }

	/* ── ficha de objeto: ubicación y crédito ──────────────────────────── */
	.c-metadata__room { font-weight: 600; }
	.c-metadata__reserve { font-weight: 600; color: var(--color-strong); }
	/* el nombre del depósito: solo en el modo vista previa */
	.c-metadata__preview { color: var(--color-muted); }
	.c-metadata__credit { font-weight: 600; color: var(--color-accent-text); }
	#md-descripcion .c-metadata__list { grid-template-columns: 1fr; }
	#md-descripcion dd { max-inline-size: var(--measure); }
	.c-cite__text { overflow-wrap: anywhere; }
	.c-metadata__source { margin-block-start: var(--space-m); color: var(--color-muted); font-size: var(--step--2); max-inline-size: none; overflow-wrap: anywhere; }

	/* ── conmutador de variantes (solo para presentar, D23) ────────────── */
	.c-variant {
		position: fixed;
		inset-block-end: var(--space-s);
		inset-inline-end: var(--space-s);
		z-index: calc(var(--z-header) + 5);
		display: flex;
		align-items: center;
		gap: 0.25rem;
		padding: 0.25rem 0.35rem 0.25rem 0.75rem;
		border: 1px solid var(--color-rule);
		border-radius: var(--radius-pill);
		background: var(--color-surface);
		font-size: var(--step--2);
	}
	.c-variant__label { color: var(--color-muted); margin-inline-end: 0.25rem; }
	@media (width < 40rem) { .c-variant__label { display: none; } .c-variant { padding: 0.2rem; inset-block-end: var(--space-2xs); inset-inline-end: var(--space-2xs); } }
	.c-variant__opt { display: inline-grid; place-items: center; inline-size: 2rem; block-size: 2rem; border-radius: 50%; color: var(--color-strong); font-weight: 600; text-decoration: none; }
	.c-variant__opt[aria-current="true"] { background: var(--color-strong); color: var(--color-strong-fg); }
}

/* filtros: cada faceta es un grupo desplegable (<details>) con sus valores debajo */
@layer components {
	.c-facets__group > summary { list-style: none; cursor: pointer; }
	.c-facets__group > summary::-webkit-details-marker { display: none; }
	/* marca de abierto/cerrado: un chevrón fino a la derecha */
	.c-facets__group > summary::after { content: ""; flex: none; inline-size: 0.45em; block-size: 0.45em; margin-inline-end: 0.2em; border-inline-end: 1.5px solid currentColor; border-block-end: 1.5px solid currentColor; transform: translateY(-0.15em) rotate(45deg); transition: transform var(--duration) var(--easing); align-self: center; }
	.c-facets__group[open] > summary::after { transform: translateY(0.1em) rotate(-135deg); }
	.c-facets__values { margin: 0 0 var(--space-xs); padding: 0; list-style: none; display: grid; gap: 0; font-size: var(--step--1); }
	.c-facets__values a { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-s); padding-block: 0.3rem; color: var(--color-strong); text-decoration: none; }
	.c-facets__values a:hover .c-facets__label { text-decoration: underline; text-decoration-color: var(--color-accent); text-underline-offset: 0.2em; }
	.c-facets__range { flex: none; color: var(--color-muted); font-size: var(--step--1); }
	/* listas largas: recortadas hasta «Ver más» */
	.c-facets__values:not(.is-expanded) > .is-extra { display: none; }
	.c-facets__more { margin: 0 0 var(--space-s); padding: 0; border: 0; background: none; color: var(--color-accent-text); font: inherit; font-size: var(--step--1); font-weight: 600; cursor: pointer; }
	.c-facets__more:hover { text-decoration: underline; }
	/* facetas alfabéticas: barra de letras y la letra como encabezado */
	.c-facets__letters { display: flex; flex-wrap: wrap; gap: 0.15rem; margin-block-end: var(--space-xs); }
	.c-facets__letters a { display: inline-grid; place-items: center; min-inline-size: 1.6rem; block-size: 1.6rem; border: 1px solid var(--color-border); color: var(--color-strong); font-size: var(--step--2); font-weight: 600; text-decoration: none; }
	.c-facets__letters a:hover { border-color: var(--color-accent); color: var(--color-accent-text); }
	.c-facets__letter { margin-block-start: var(--space-2xs); padding-block: 0.2rem; border-block-end: 1px solid var(--color-border); font-family: var(--font-heading); font-size: var(--step-0); color: var(--color-accent-text); scroll-margin-block-start: var(--space-s); }
	/* el botón de los filtros, recto */
	.c-panel__toggle { border-radius: 0; }
	.c-persona__bio { max-inline-size: var(--measure); }
}

/*
 * Bisel (2026-10-31): lo redondeado se dibuja con las esquinas cortadas en diagonal
 * hasta la mitad del alto, así el borde lateral se colapsa en un vértice: la píldora
 * pasa a ser un hexágono alargado y el círculo un rombo (también los puntos dorados).
 * El número de sala (.c-rooms__num) es un escudo: el bisel solo abajo.
 * El corte horizontal es --bevel (tokens.css; --radius-pill = var(--bevel) / 50%).
 * Los campos de texto y el buscador de la portada quedan rectos (border-radius 0).
 *   - Donde se puede, con corner-shape: bevel (CSS Borders 4: Chrome y Edge 139+):
 *     el border-radius de cada componente se queda como está y el navegador traza
 *     el borde, el foco y el fondo sobre la forma biselada. Una sola regla.
 *   - Si no (Firefox, Safari): clip-path con el polígono, en una lista de componentes.
 *     El recorte se come el borde en las diagonales; lo redibujan cuatro degradés en
 *     las esquinas, del color --bevel-line (transparente en los que no tienen borde).
 */
@layer theme {
	@supports (corner-shape: bevel) {
		*, ::before, ::after { corner-shape: bevel; }
	}
	@supports not (corner-shape: bevel) {
		:is(.c-button:not(.c-button--icon), .c-rail__more, .c-results-nav__all, .c-map__tab, .c-share__links a, .c-variant),
		:is(.c-button--icon, .c-close, .c-detail-tools :is(a, button), .c-rail__button, .c-variant__opt, .c-breadcrumb__tree) {
			--bevel-l: var(--bevel-line, transparent);
			background-image:
				linear-gradient(to bottom right, transparent 50%, var(--bevel-l) 50%, var(--bevel-l) calc(50% + 1px), transparent calc(50% + 1px)),
				linear-gradient(to bottom left,  transparent 50%, var(--bevel-l) 50%, var(--bevel-l) calc(50% + 1px), transparent calc(50% + 1px)),
				linear-gradient(to top right,    transparent 50%, var(--bevel-l) 50%, var(--bevel-l) calc(50% + 1px), transparent calc(50% + 1px)),
				linear-gradient(to top left,     transparent 50%, var(--bevel-l) 50%, var(--bevel-l) calc(50% + 1px), transparent calc(50% + 1px));
			background-position: left top, right top, left bottom, right bottom;
			background-repeat: no-repeat;
			background-origin: border-box;
			background-clip: border-box;
		}
		/* hexágono */
		:is(.c-button:not(.c-button--icon), .c-rail__more, .c-results-nav__all, .c-map__tab, .c-share__links a, .c-variant) {
			clip-path: polygon(var(--bevel) 0, calc(100% - var(--bevel)) 0, 100% 50%, calc(100% - var(--bevel)) 100%, var(--bevel) 100%, 0 50%);
			background-size: var(--bevel) 50%;
		}
		:is(.c-home-search .c-home-search__submit, .c-button.c-panel__toggle) { clip-path: none; background-image: none; }
		/* rombo */
		:is(.c-button--icon, .c-close, .c-detail-tools :is(a, button), .c-rail__button, .c-variant__opt, .c-breadcrumb__tree),
		:is(.u-title-mark, .c-page-title, .c-rail__title, .c-metadata-group__title, .c-section-title, .c-home-intro__title, main.loginreg h1)::after {
			clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
			background-size: 50% 50%;
		}
		/* el color de la diagonal = el del borde */
		:is(.c-button, .c-rail__more, .c-results-nav__all, .c-map__tab, .c-share__links a, .c-variant, .c-detail-tools :is(a, button), .c-rail__button) { --bevel-line: var(--color-rule); }
		:is(.c-button, .c-rail__more, .c-results-nav__all, .c-rail__button):hover { --bevel-line: var(--color-accent); }
		.c-button:not(.c-button--pill):hover { --bevel-line: var(--color-strong); }
		:is(.c-button--action, .c-button--solid, .c-panel__toggle), :is(.c-button--action, .c-button--solid, .c-panel__toggle):hover { --bevel-line: var(--color-strong); }
		.c-button--action:hover { --bevel-line: var(--color-accent); }
		.c-map__tab[aria-selected="true"] { --bevel-line: var(--color-strong); }
		/* escudo: solo las dos esquinas de abajo */
		.c-rooms__num {
			--bevel-l: var(--color-accent);
			clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--bevel)), 50% 100%, 0 calc(100% - var(--bevel)));
			background-image:
				linear-gradient(to top right, transparent 50%, var(--bevel-l) 50%, var(--bevel-l) calc(50% + 1px), transparent calc(50% + 1px)),
				linear-gradient(to top left,  transparent 50%, var(--bevel-l) 50%, var(--bevel-l) calc(50% + 1px), transparent calc(50% + 1px));
			background-position: left bottom, right bottom;
			background-size: 50% var(--bevel);
			background-repeat: no-repeat;
			background-origin: border-box;
			background-clip: border-box;
		}
		.c-rooms__num--none { --bevel-l: transparent; }
	}
}