/* ==========================================================================
   Dirty Kitchen — /contacto/

   Hoja propia y no dentro de app.css por la misma razón que casos.css: son
   ~230 líneas que sólo usa una página. Se carga desde functions.php cuando la
   plantilla es page-contacto.php.

   Todo lo que se mueve aquí se apaga con prefers-reduced-motion, y todo lo que
   depende del puntero tiene su estado quieto: la página se lee igual con el
   JavaScript caído.
   ========================================================================== */

/* `.dk-contenedor` lleva `margin: 0 auto`, y un margen automático en el eje
   transversal de un flex apaga el `stretch`: la caja se encoge al ancho de su
   contenido. Es el mismo parche que ya vive en app.css para las oficinas. */
.dk-puertas .dk-contenedor,
.dk-ruta .dk-contenedor,
.dk-listo .dk-contenedor { width: 100%; }

/* ------------------------------------------------------------- la tira */
/* La hora de Bogotá, el plazo de respuesta y desde dónde trabajamos. Es lo
   que alguien quiere saber antes de escribir. */
.dk-tira {
	list-style: none; margin: 0 0 clamp(1.4rem, 3vw, 2.6rem); padding: 0;
	display: flex; flex-wrap: wrap; gap: 10px 28px; align-items: center;
	font-size: .76rem; letter-spacing: .08em; text-transform: uppercase;
}
.dk-tira__item { display: flex; align-items: center; gap: 8px; }
.dk-tira__rot { color: var(--ceniza); }
.dk-tira__dato { font-weight: 700; color: var(--tiza); }
.dk-tira__item--vivo .dk-tira__dato { font-variant-numeric: tabular-nums; }
.dk-tira__punto {
	width: 8px; height: 8px; border-radius: 99px; background: var(--flama); flex: none;
	box-shadow: 0 0 0 0 rgb(255 61 20 / .55); animation: dk-pulso 2.4s ease-out infinite;
}
@keyframes dk-pulso {
	0%   { box-shadow: 0 0 0 0 rgb(255 61 20 / .5); }
	70%  { box-shadow: 0 0 0 10px rgb(255 61 20 / 0); }
	100% { box-shadow: 0 0 0 0 rgb(255 61 20 / 0); }
}

/* ---------------------------------------------------------- las puertas */
.dk-puertas { position: relative; overflow: hidden; }
.dk-puertas__caja { display: grid; gap: 18px; }
@media (min-width: 1024px) {
	.dk-puertas__caja { grid-template-columns: repeat(2, 1fr); gap: 28px; }
	/* Las dos puertas miden lo mismo y sus botones quedan a la misma altura
	   aunque una traiga un renglón más. El selector lleva el padre a propósito:
	   la regla de más abajo fija un margen de arriba y, a igual especificidad,
	   la última gana — el `auto` se perdía y los dos botones se descuadraban. */
	.dk-puerta__interior { min-height: 430px; display: flex; flex-direction: column; }
	.dk-puerta__interior .dk-puerta__accion { margin-top: auto; padding-top: 1.4rem; }
}

.dk-puerta { position: relative; perspective: 1100px; }

/* La entrada: un barrido de abajo hacia arriba en vez del fundido que trae
   `[data-rev]` en app.css.
   
   El recorte va en el hijo y el atributo observado en el padre, por la misma
   razón que el revelado por líneas: un elemento recortado no intersecta con la
   pantalla, así que el observador no dispararía nunca y la puerta se quedaría
   invisible para siempre. Costó una captura en blanco descubrirlo otra vez. */
.dk-puerta[data-rev] { opacity: 1; transform: none; filter: none; }
.dk-puerta[data-rev] .dk-puerta__interior {
	clip-path: inset(0 0 100% 0);
	transform: translateY(26px);
}
.dk-puerta[data-rev].dk-visible .dk-puerta__interior {
	clip-path: inset(0 0 0 0);
	transform: translateY(0);
}
.dk-puerta__interior {
	position: relative; height: 100%; overflow: hidden;
	border: 1px solid var(--linea); border-radius: 20px;
	background: linear-gradient(160deg, rgb(255 255 255 / .045), rgb(255 255 255 / .012));
	padding: clamp(18px, 2.6vw, 42px);
	transform-style: preserve-3d;
	transition: transform .9s var(--curva), clip-path .9s var(--curva), border-color .45s, background-color .45s;
}
.dk-puerta:hover .dk-puerta__interior { border-color: rgb(255 61 20 / .42); }

/* El brillo sigue al puntero: --px y --py los escribe motion.js en el
   [data-tilt], que aquí es la puerta entera. */
.dk-puerta__brillo {
	position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .45s;
	background: radial-gradient(420px circle at var(--px, 50%) var(--py, 50%), rgb(255 61 20 / .20), transparent 62%);
}
.dk-puerta:hover .dk-puerta__brillo { opacity: 1; }

/* La puerta que no se está mirando se retira. Con :has() y sin JavaScript;
   donde no exista, las dos se quedan encendidas y no pasa nada. */
@media (min-width: 1024px) and (pointer: fine) {
	.dk-puertas__caja:has(.dk-puerta:hover) .dk-puerta:not(:hover) .dk-puerta__interior { opacity: .45; }
	.dk-puerta__interior { transition: transform .5s var(--curva), border-color .45s, opacity .45s; }
}

.dk-puerta__num {
	position: absolute; top: clamp(10px, 1.6vw, 20px); right: clamp(14px, 2vw, 28px);
	font-family: var(--display); font-weight: 900; font-size: clamp(3.4rem, 7vw, 6.4rem); line-height: .8;
	color: transparent; -webkit-text-stroke: 1px rgb(245 242 238 / .16);
	pointer-events: none; transition: -webkit-text-stroke-color .5s;
}
.dk-puerta:hover .dk-puerta__num { -webkit-text-stroke-color: rgb(255 61 20 / .5); }

.dk-puerta__rot { margin-bottom: .7rem; }
.dk-puerta__tit { font-size: clamp(1.55rem, 3.1vw, 2.9rem); max-width: 14ch; }
.dk-puerta__texto { margin: .9rem 0 0; font-size: .94rem; line-height: 1.5; max-width: 46ch; }

.dk-puerta__lista-rot {
	margin: 1.4rem 0 .6rem; font-size: .66rem; letter-spacing: .22em; text-transform: uppercase; color: var(--ceniza);
}
.dk-puerta__chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.dk-puerta__chips li {
	display: inline-flex; align-items: center; gap: 7px;
	border: 1px solid var(--linea); border-radius: 99px; padding: 6px 14px;
	font-size: .78rem; color: rgb(245 242 238 / .82); background: rgb(0 0 0 / .25);
	transition: border-color .4s, color .4s;
}
.dk-puerta__chips li::before { content: ""; width: 5px; height: 5px; border-radius: 99px; background: var(--flama); flex: none; }
.dk-puerta:hover .dk-puerta__chips li { border-color: rgb(255 61 20 / .3); color: var(--tiza); }

.dk-puerta__accion { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin-top: clamp(1.2rem, 2.4vw, 2rem); }

/* El correo, copiable. Es un <button> de verdad: se llega con el tabulador y
   dice en voz alta lo que hizo. */
.dk-copiar {
	display: inline-flex; align-items: center; gap: 10px;
	background: none; border: 0; padding: 4px 0; cursor: pointer;
	font-family: inherit; color: var(--ceniza); font-size: .82rem;
}
.dk-copiar__correo { border-bottom: 1px dashed rgb(245 242 238 / .28); padding-bottom: 2px; transition: color .3s, border-color .3s; }
.dk-copiar:hover .dk-copiar__correo { color: var(--tiza); border-bottom-color: var(--flama); }
.dk-copiar__estado {
	font-size: .62rem; letter-spacing: .18em; text-transform: uppercase;
	border: 1px solid var(--linea); border-radius: 99px; padding: 3px 9px;
	transition: color .3s, border-color .3s, background-color .3s;
}
.dk-copiar--hecho .dk-copiar__estado { color: #fff; background: var(--flama-honda); border-color: transparent; }

.dk-sticker--puerta { right: 14px; bottom: 12px; width: 96px; z-index: 2; opacity: .95; }

/* -------------------------------------------------------------- la ruta */
.dk-ruta { position: relative; overflow: hidden; }
.dk-ruta__cab { max-width: 30ch; margin-bottom: clamp(1.6rem, 3.5vw, 3rem); }

.dk-ruta__pasos { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 26px; }
@media (min-width: 900px) { .dk-ruta__pasos { grid-template-columns: repeat(3, 1fr); gap: 40px; } }

/* El riel: pintado en gris, y encima el trozo vivo que crece con el scroll.
   --avance va de 0 a 1 y lo escribe contacto.js; sin JS se queda en 1. */
.dk-ruta__riel {
	position: absolute; left: 13px; top: 8px; bottom: 8px; width: 2px;
	background: var(--linea); overflow: hidden;
}
.dk-ruta__riel-vivo {
	display: block; width: 100%; height: 100%; background: var(--flama);
	transform-origin: top; transform: scaleY(var(--avance, 1));
	transition: transform .18s linear;
}
@media (min-width: 900px) {
	.dk-ruta__riel { left: 0; right: 0; top: 13px; bottom: auto; width: auto; height: 2px; }
	.dk-ruta__riel-vivo { transform-origin: left; transform: scaleX(var(--avance, 1)); }
}

.dk-paso { position: relative; padding-left: 44px; }
@media (min-width: 900px) { .dk-paso { padding-left: 0; padding-top: 42px; } }

.dk-paso__marca {
	position: absolute; left: 0; top: 0; display: grid; place-items: center;
	width: 28px; height: 28px; border-radius: 99px;
	border: 1px solid var(--linea); background: var(--tinta);
	transition: border-color .5s, background-color .5s;
}
@media (min-width: 900px) { .dk-paso__marca { top: 0; left: 0; } }
.dk-paso__punto { width: 8px; height: 8px; border-radius: 99px; background: rgb(245 242 238 / .25); transition: background-color .5s, scale .5s var(--curva); }
.dk-paso--vivo .dk-paso__marca { border-color: rgb(255 61 20 / .55); background: rgb(255 61 20 / .10); }
.dk-paso--vivo .dk-paso__punto { background: var(--flama); scale: 1.25; }

.dk-paso__num {
	position: absolute; right: 0; top: 24px; pointer-events: none;
	font-family: var(--display); font-weight: 900; font-size: clamp(2.6rem, 5vw, 4.6rem); line-height: .8;
	color: transparent; -webkit-text-stroke: 1px rgb(245 242 238 / .10);
	transition: -webkit-text-stroke-color .6s;
}
@media (min-width: 900px) { .dk-paso__num { top: 34px; } }
.dk-paso--vivo .dk-paso__num { -webkit-text-stroke-color: rgb(255 61 20 / .38); }

.dk-paso__tiempo {
	display: inline-block; font-size: .66rem; letter-spacing: .2em; text-transform: uppercase;
	color: var(--ceniza); transition: color .5s;
}
.dk-paso--vivo .dk-paso__num {
	position: absolute; right: 0; top: 24px; pointer-events: none;
	font-family: var(--display); font-weight: 900; font-size: clamp(2.6rem, 5vw, 4.6rem); line-height: .8;
	color: transparent; -webkit-text-stroke: 1px rgb(245 242 238 / .10);
	transition: -webkit-text-stroke-color .6s;
}
@media (min-width: 900px) { .dk-paso__num { top: 34px; } }
.dk-paso--vivo .dk-paso__num { -webkit-text-stroke-color: rgb(255 61 20 / .38); }

.dk-paso__tiempo { color: var(--flama); }
.dk-paso__tit { font-family: var(--serif); font-weight: 700; font-size: clamp(1.15rem, 1.8vw, 1.5rem); line-height: 1.15; margin: .45rem 0 0; }
.dk-paso__texto { margin: .6rem 0 0; color: #cdc5bf; font-size: .9rem; line-height: 1.5; max-width: 40ch; }

/* ------------------------------------------ lo que no hace falta tener */
.dk-listo { position: relative; overflow: hidden; }
.dk-listo__caja { display: grid; gap: clamp(1.4rem, 3vw, 3rem); align-items: center; }
@media (min-width: 900px) { .dk-listo__caja { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 5rem); } }
.dk-listo__cab { max-width: 20ch; }

.dk-listo__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--linea); border-block: 1px solid var(--linea); }
.dk-listo__item {
	position: relative; display: flex; align-items: center; gap: 16px;
	background: var(--tinta); padding: clamp(12px, 1.6vw, 20px) 4px;
	font-family: var(--serif); font-weight: 700; font-size: clamp(1.15rem, 2.4vw, 2.1rem);
	color: rgb(245 242 238 / .5);
	transition: color .45s, padding-left .45s var(--curva);
}
.dk-listo__item:hover { color: var(--tiza); padding-left: 14px; }
/* El tachón se dibuja cuando el renglón entra: es lo que dice «esto no lo
   necesitas» sin escribirlo. Va dentro del texto y no del renglón, porque una
   raya que sigue de largo hasta el borde no tacha nada, sólo subraya el aire. */
.dk-listo__texto { position: relative; display: inline-block; }
.dk-listo__tachon {
	position: absolute; left: -2px; right: -2px; top: 54%; height: 2px; background: var(--flama);
	transform-origin: left; transform: scaleX(0); transition: transform .7s var(--curva) .15s;
}
.dk-listo__item.dk-visible .dk-listo__tachon { transform: scaleX(1); }
.dk-listo__item::before {
	content: ""; width: 18px; height: 18px; flex: none; border-radius: 4px;
	border: 1px solid rgb(245 242 238 / .22);
	transition: border-color .45s, background-color .45s;
}
.dk-listo__item:hover::before { border-color: var(--flama); background: rgb(255 61 20 / .14); }

/* La réplica: lo que sí hacemos nosotros. Va a la derecha porque se lee
   después del tachón, no antes. */
.dk-listo__replica {
	margin-left: auto; text-align: right; flex: none; max-width: 42%;
	font-family: var(--display); font-weight: 500; font-size: .8rem; line-height: 1.3;
	letter-spacing: .02em; color: var(--ceniza);
	opacity: 0; transform: translateX(10px);
	transition: opacity .6s var(--curva) .45s, transform .6s var(--curva) .45s, color .4s;
}
.dk-listo__item.dk-visible .dk-listo__replica { opacity: 1; transform: none; }
.dk-listo__item:hover .dk-listo__replica { color: var(--flama); }

/* ------------------------------------------------- oficinas con su hora */
.dk-oficina__hora {
	display: block; margin-top: 10px; font-size: .74rem; letter-spacing: .06em;
	color: rgb(245 242 238 / .5); font-variant-numeric: tabular-nums;
}
.dk-oficina__hora::before {
	content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 7px;
	border-radius: 99px; background: var(--ceniza); vertical-align: middle;
}
.dk-oficina__hora--dia::before { background: var(--flama); }
.dk-oficina--sede .dk-oficina__hora { color: rgb(245 242 238 / .72); }

/* ------------------------------------------------------------- teléfono */
.dk-contacto--donde .dk-contacto__tel { margin-top: clamp(1.6rem, 3vw, 2.6rem); }

/* ---------------------------------------------------------------- móvil

   Regla del 17 de septiembre: ninguna sección obliga a bajar para verse
   entera. En un teléfono de 390×844 eso son 844 px contando el aire, y las
   dos puertas apiladas más la tira se pasaban en 144. Lo que se recorta es
   aire y tamaño de letra de apoyo; el contenido se queda entero.
   ------------------------------------------------------------------------ */
@media (max-width: 767px) {
	/* 837 de 844 px dejaba siete de margen: un renglón más de texto y la
	   sección se salía. El aire de la sección baja a la mitad. */
	.dk-puertas { padding-block: 1.1rem; }
	.dk-tira { gap: 4px 16px; font-size: .64rem; margin-bottom: .9rem; }

	.dk-puertas__caja { gap: 12px; }
	.dk-puerta__interior { padding: 15px; border-radius: 16px; }
	.dk-puerta__num { font-size: 2.6rem; top: 10px; right: 12px; }
	.dk-puerta__rot { margin-bottom: .45rem; font-size: .62rem; }
	.dk-puerta__tit { font-size: 1.36rem; }
	.dk-puerta__texto { margin-top: .55rem; font-size: .82rem; line-height: 1.42; }
	.dk-puerta__lista-rot { margin: .8rem 0 .45rem; font-size: .6rem; }
	.dk-puerta__chips { gap: 6px; }
	.dk-puerta__chips li { font-size: .7rem; padding: 4px 10px; }
	.dk-puerta__accion { gap: 8px 12px; margin-top: .9rem; }
	.dk-puerta .dk-btn--grande { min-height: 46px; padding: 0 20px; font-size: .7rem; }
	.dk-copiar { font-size: .74rem; gap: 8px; }

	.dk-paso { padding-left: 38px; }
	.dk-paso__texto { font-size: .84rem; }
	.dk-paso__num { font-size: 2.1rem; top: 14px; }

	.dk-listo__item { font-size: 1.05rem; gap: 10px; padding: 10px 4px; }
	.dk-listo__replica { font-size: .68rem; max-width: 38%; }

	/* La hora se va al costado del nombre: en cinco oficinas, un renglón más
	   por ciudad eran 130 px y con ellos la sección se salía de la pantalla. */
	.dk-oficina { position: relative; }
	.dk-oficina__hora { position: absolute; top: 10px; right: 0; margin: 0; font-size: .7rem; }
}

@media (prefers-reduced-motion: reduce) {
	.dk-tira__punto { animation: none; }
	.dk-ruta__riel-vivo { transition: none; }
	.dk-listo__tachon { transition: none; transform: scaleX(1); }
	.dk-listo__replica { opacity: 1; transform: none; transition: none; }
	.dk-puerta__interior, .dk-listo__item { transition: none; }
	.dk-puerta[data-rev] .dk-puerta__interior { clip-path: none; transform: none; }
}