/* Registrum: sitio de inicio. Misma marca que el tema de Pawtucket
   (ca-docker/themes/registrum/assets/pawtucket/css/theme.css). */

@font-face {
	font-family: "Cormorant Garamond";
	src: url("fuentes/Cormorant.woff2") format("woff2");
	font-weight: 300 700;
	font-display: swap;
}
@font-face {
	font-family: "Inter";
	src: url("fuentes/Inter.woff2") format("woff2");
	font-weight: 100 900;
	font-display: swap;
}

:root {
	--tinta: #1B2430;
	--pergamino: #F6F2EA;
	--papel: #FBF9F5;
	--ocre: #B4743A;
	--ocre-texto: #8C5A2B;   /* ocre con contraste AA sobre papel */
	--gris: #5F6670;         /* texto secundario (AA sobre papel) */
	--linea: #E4DED3;
	--serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
	--sans: "Inter", "Helvetica Neue", Arial, sans-serif;
	--ancho: 1160px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body {
	margin: 0;
	background: var(--papel);
	color: var(--tinta);
	font-family: var(--sans);
	font-size: 17px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--ocre-texto); }
a:hover, a:focus-visible { color: var(--tinta); }
:focus-visible { outline: 2px solid var(--ocre); outline-offset: 3px; }

h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.1; margin: 0; }
h1 { font-size: clamp(2.6rem, 6vw, 4.4rem); letter-spacing: -0.01em; }
h2 { font-size: clamp(2rem, 4vw, 2.9rem); max-width: 22ch; }
h3 { font-size: 1.55rem; }
p { margin: 0; }

.contenedor { max-width: var(--ancho); margin: 0 auto; padding: 0 16px; }
@media (min-width: 720px) { .contenedor { padding: 0 32px; } }

.antetitulo {
	color: var(--ocre-texto); text-transform: uppercase; letter-spacing: .14em;
	font-size: 12px; font-weight: 600; margin-bottom: 14px;
}
.intro { color: var(--gris); font-size: 1.1rem; max-width: 40em; margin-top: 16px; }

/* Botones */
.boton {
	display: inline-block; background: var(--tinta); color: #fff; text-decoration: none;
	border: 1px solid var(--tinta); border-radius: 2px; padding: 14px 24px;
	font-weight: 500; letter-spacing: .01em; transition: background .15s, border-color .15s;
}
.boton:hover, .boton:focus-visible { background: var(--ocre); border-color: var(--ocre); color: #fff; }
.boton-sec { background: transparent; color: var(--tinta); }
.boton-sec:hover, .boton-sec:focus-visible { background: var(--tinta); border-color: var(--tinta); }

/* Cabecera */
.cabecera {
	position: sticky; top: 0; z-index: 10;
	background: rgba(251, 249, 245, .94); backdrop-filter: blur(6px);
	border-bottom: 1px solid var(--linea);
}
.cabecera-fila { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; }
.marca img { height: 28px; width: auto; }
.cabecera nav { display: flex; align-items: center; gap: 22px; font-size: 14px; font-weight: 500; }
.cabecera nav a { color: var(--tinta); text-decoration: none; }
.cabecera nav a:hover { color: var(--ocre-texto); }
.cabecera nav .nav-cta { border: 1px solid var(--tinta); padding: 8px 14px; border-radius: 2px; }
.cabecera nav .nav-cta:hover { background: var(--tinta); color: #fff; }
@media (max-width: 719px) {
	.cabecera nav a:not(.nav-cta) { display: none; }
}

/* Portada */
.portada { padding: 56px 0 64px; }
.portada-grid { display: grid; gap: 44px; align-items: center; }
@media (min-width: 900px) { .portada-grid { grid-template-columns: 1.05fr 1fr; gap: 64px; } .portada { padding: 88px 0 96px; } }
.bajada { font-size: 1.2rem; color: var(--gris); max-width: 32em; margin: 22px 0 32px; }
.bajada strong { color: var(--tinta); font-weight: 600; }
.acciones { display: flex; flex-wrap: wrap; gap: 12px; }
.portada-obra { margin: 0; }
.portada-obra img { width: 100%; box-shadow: 0 24px 48px -24px rgba(27, 36, 48, .45); }
.portada-obra figcaption { margin-top: 12px; font-size: 13px; color: var(--gris); }

/* Cifras */
.cifras { border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); background: #fff; }
.cifras-fila { display: grid; gap: 20px; padding-top: 28px; padding-bottom: 28px; grid-template-columns: repeat(3, auto); justify-content: start; column-gap: 48px; }
.cifras-fila p { color: var(--gris); font-size: 15px; }
.cifras-fila strong { display: block; font-family: var(--serif); font-size: 2.6rem; line-height: 1; color: var(--tinta); font-weight: 600; }
.cifras-nota { grid-column: 1 / -1; font-size: 13px !important; max-width: 46em; }
@media (min-width: 900px) {
	.cifras-fila { grid-template-columns: auto auto auto 1fr; align-items: center; }
	.cifras-nota { grid-column: auto; padding-left: 32px; border-left: 3px solid var(--ocre); }
}

/* Secciones */
.seccion { padding: 72px 0; }
@media (min-width: 900px) { .seccion { padding: 104px 0; } }
.seccion-pergamino { background: var(--pergamino); }
.seccion-tinta { background: var(--tinta); color: var(--pergamino); }
.seccion-tinta h2 { color: #fff; }

/* Tarjetas de la demo */
.tarjetas { display: grid; gap: 16px; margin-top: 40px; }
@media (min-width: 900px) { .tarjetas { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.tarjeta {
	background: #fff; border: 1px solid var(--linea); border-top: 3px solid var(--tinta);
	padding: 28px; display: flex; flex-direction: column; gap: 12px;
}
.tarjeta p { color: var(--gris); flex: 1; }
.tarjeta a { font-weight: 500; text-decoration: none; }
.tarjeta-proxima { border-top-color: var(--ocre); background: transparent; }
.etiqueta {
	align-self: flex-start; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
	color: var(--ocre-texto); border: 1px solid var(--ocre); padding: 4px 10px; border-radius: 2px;
}

/* Galería */
/* Rejilla pareja: cada obra entera (sin recortar) en un marco 4:5, como en
   un catálogo; obras de proporciones muy distintas no desordenan las filas. */
.galeria { list-style: none; padding: 0; margin: 56px 0 0; display: grid; gap: 28px 20px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .galeria { grid-template-columns: repeat(3, 1fr); gap: 36px 28px; } }
.galeria a { display: block; text-decoration: none; color: var(--gris); font-size: 13px; }
.galeria img {
	width: 100%; aspect-ratio: 4 / 5; object-fit: contain; padding: 14px;
	background: var(--pergamino); margin-bottom: 10px; transition: opacity .15s;
}
.galeria a:hover img { opacity: .88; }
.galeria a:hover span { color: var(--tinta); }

/* Servicios */
.servicios { display: grid; gap: 1px; margin-top: 44px; background: var(--linea); border: 1px solid var(--linea); }
@media (min-width: 640px) { .servicios { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .servicios { grid-template-columns: repeat(3, 1fr); } }
.servicios article { background: var(--pergamino); padding: 30px 28px; }
.servicios h3 { font-size: 1.45rem; margin-bottom: 10px; }
.servicios p { color: var(--gris); font-size: 15.5px; }

/* Pasos */
.pasos { list-style: none; padding: 0; margin: 44px 0 0; display: grid; gap: 28px; counter-reset: paso; }
@media (min-width: 900px) { .pasos { grid-template-columns: repeat(4, 1fr); } }
.pasos li { counter-increment: paso; border-top: 1px solid var(--tinta); padding-top: 18px; }
.pasos li::before {
	content: "0" counter(paso); display: block; font-family: var(--serif);
	font-size: 1.1rem; color: var(--ocre-texto); font-weight: 600; margin-bottom: 8px;
}
.pasos h3 { margin-bottom: 8px; }
.pasos p { color: var(--gris); font-size: 15.5px; }

/* Software libre */
.libre { display: grid; gap: 20px; }
@media (min-width: 900px) { .libre { grid-template-columns: 1fr 1.2fr; gap: 64px; align-items: center; } }
.libre p { font-size: 1.12rem; opacity: .92; }
.libre strong { color: #fff; }

/* Contacto */
.contacto { text-align: left; }
.contacto .intro { margin-bottom: 30px; }

/* Pie */
.pie { background: var(--tinta); color: var(--pergamino); border-top: 1px solid rgba(246, 242, 234, .12); }
.pie-fila { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; padding-top: 32px; padding-bottom: 32px; font-size: 13px; }
.pie-fila p { opacity: .75; }
.pie img { height: 24px; width: auto; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	* { transition: none !important; }
}