/* Piel de Elite Propiedades (prototipo aprobado). Colores y tipografías salen de theme.json;
   aquí vive el layout del encabezado, la portada, el pie y los sellos de fecha de corte. */

:root {
	--ete-navy: #091146;
	--ete-naranja: #ff7a00;
	--ete-naranja-texto: #b84f00;
	--ete-durazno: #ffbd59;
	--ete-crema: #ffedd1;
	--ete-tinta-2: rgba(9, 17, 70, .70);
	--ete-tinta-3: rgba(9, 17, 70, .52);
	--ete-linea: rgba(9, 17, 70, .12);
	--ete-linea-2: rgba(9, 17, 70, .22);
	--ete-radio: 12px;
	--ete-sombra: 0 1px 2px rgba(9, 17, 70, .06), 0 4px 14px rgba(9, 17, 70, .05);
	--ete-mono: var(--wp--preset--font-family--mono, ui-monospace, Consolas, monospace);
}

html { color-scheme: light; }
:focus-visible { outline: 2px solid var(--ete-naranja); outline-offset: 2px; }
.ete-contenedor { width: min(72rem, 100% - 2.5rem); margin-inline: auto; }

/* ---------- Encabezado ---------- */
.ete-cabecera { background: #fff; border-bottom: 1px solid var(--ete-linea); position: sticky; top: var(--wp-admin--admin-bar--height, 0px); z-index: 30; }
.ete-cabecera__interior { display: flex; align-items: center; gap: 1.5rem; min-height: 4.25rem; }
.ete-marca { display: flex; align-items: center; gap: .7rem; margin-right: auto; color: var(--ete-navy); text-decoration: none; }
.ete-marca__nombre { font-weight: 800; font-size: 1.3rem; letter-spacing: -.02em; line-height: 1; }
.ete-marca__nombre span { color: var(--ete-naranja-texto); }
.ete-marca__by { display: flex; align-items: center; gap: .35rem; padding-left: .7rem; border-left: 1px solid var(--ete-linea); font-size: .72rem; color: var(--ete-tinta-3); }
.ete-marca__by img { display: block; width: auto; height: 20px; }
.ete-nav { display: flex; align-items: center; gap: 1.25rem; font-size: .95rem; font-weight: 400; }
.ete-nav__enlace { color: var(--ete-tinta-2); text-decoration: none; }
.ete-nav__enlace:hover { color: var(--ete-navy); }

.ete-boton { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .72rem 1.3rem; border: 1px solid transparent; border-radius: 999px; background: var(--ete-naranja); color: var(--ete-navy); font-weight: 600; text-decoration: none; white-space: nowrap; }
.ete-boton:hover { background: #ff8c1f; color: var(--ete-navy); }
.ete-boton--contorno { background: transparent; border-color: var(--ete-linea-2); }
.ete-boton--contorno:hover { background: transparent; border-color: var(--ete-navy); }

/* ---------- Portada ---------- */
.ete-portada { position: relative; overflow: hidden; padding: 3.2rem 0 3.6rem; background: var(--ete-navy); color: #fff; }
.ete-portada::after { content: ""; position: absolute; inset: auto -10% -40% 45%; height: 28rem; background: radial-gradient(closest-side, rgba(255, 122, 0, .22), transparent); pointer-events: none; }
.ete-portada h1 { position: relative; z-index: 1; max-width: 15ch; margin: 0; color: #fff; }
.ete-portada h1 em { font-style: normal; color: var(--ete-durazno); }
.ete-portada__bajada { position: relative; z-index: 1; max-width: 52ch; margin: 1rem 0 0; color: rgba(255, 255, 255, .8); font-size: 1.08rem; }

/* ---------- Secciones ---------- */
.ete-seccion { padding: 3.25rem 0; }
.ete-seccion--blanca { background: #fff; }
.ete-seccion h2 { margin: 0; }
.ete-seccion__bajada { max-width: 60ch; margin: .35rem 0 1.4rem; color: var(--ete-tinta-2); }

.ete-pasos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--ete-navy); }
.ete-pasos li { display: grid; align-content: start; gap: .35rem; padding: 1.1rem 1.1rem 0 0; }
.ete-pasos__n { font-family: var(--ete-mono); font-size: .78rem; color: var(--ete-naranja-texto); }
.ete-pasos h3 { margin: 0; font-size: 1.08rem; }
.ete-pasos p { margin: 0; color: var(--ete-tinta-2); font-size: .95rem; }

/* ---------- Sello de fecha de corte: la regla de durabilidad hecha visible ---------- */
.ete-sello { font-family: var(--ete-mono); font-size: .7rem; letter-spacing: .02em; color: var(--ete-tinta-3); }
.ete-sello b { font-weight: 500; color: var(--ete-tinta-2); }
.ete-sello--viejo { padding: 0 .3rem; border-radius: 4px; background: var(--ete-crema); color: var(--ete-naranja-texto); }

/* ---------- Pie ---------- */
.ete-pie { padding: 2.5rem 0; background: var(--ete-navy); color: rgba(255, 255, 255, .75); font-size: .9rem; }
.ete-pie__interior { display: grid; gap: 1rem; }
.ete-pie p { margin: 0; }
.ete-pie b { color: #fff; font-weight: 700; }
.ete-pie a { color: #fff; }
.ete-pie__legales { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; }
.ete-pie__aviso { max-width: 80ch; font-size: .82rem; line-height: 1.5; }
.ete-pie__copia { font-size: .8rem; color: rgba(255, 255, 255, .55); }

.ete-meta { color: var(--ete-tinta-2); font-size: .9rem; }

@media (max-width: 900px) {
	.ete-marca__by, .ete-nav .ete-nav__enlace { display: none; }
	.ete-pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1rem; }
}
@media (max-width: 520px) {
	.ete-pasos { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; scroll-behavior: auto !important; }
}