/* ============================================================
   RUNA · web-comun.css · en las 11 páginas (segunda propuesta, MARKETING 14:41 con OK de Iker)
   Solo tokens --runa-* y del kit. Cabecera compacta en móvil, correo visible junto al botón y foco de teclado.
   ============================================================ */

/* ---------- cabecera: el botón va fuera del menú (en ordenador se ve igual que antes) ---------- */
.cabecera nav{margin-left:auto}
.cabecera .cab-boton{margin-left:var(--e2);flex:none;white-space:nowrap}
/* tableta: el teléfono sale de la cabecera (está en el pie y en «Cuéntame tu caso») para que el menú no se parta */
@media (max-width:900px){.cabecera .cab-tel{display:none}}

/* ---------- cabecera compacta en móvil (UX 2): logotipo + «Pedir presupuesto» en una fila, los enlaces debajo;
   teléfono e idioma pasan al pie (y el teléfono sigue en «Cuéntame tu caso») ---------- */
@media (max-width:640px){
  .cabecera{flex-wrap:wrap;row-gap:var(--e3);padding-block:var(--e3)}
  .cabecera .logo{order:0}
  .cabecera .cab-boton{order:1;margin-left:auto;padding:10px 14px;font-size:14px}
  .cabecera nav{order:2;flex-basis:100%;margin-left:0;column-gap:var(--e4);row-gap:var(--e1)}
  .cabecera nav a{font-size:13px}
  .cabecera .cab-tel,.cabecera .idioma{display:none}
}
@media (max-width:380px){.cabecera nav{column-gap:var(--e3)}.cabecera nav a{font-size:12.5px}}

/* ---------- correo visible y copiable (UX 5; en el cierre, MARKETING 16:51) ---------- */
.correo{margin:var(--e3) 0 0;font-size:15px}
.correo-dir{font-weight:600;overflow-wrap:anywhere;-webkit-user-select:all;user-select:all}
/* «Copiar» con aspecto de botón (MARKETING 15:27, 8): contorno del botón secundario del kit, 44 px de alto */
.copiar{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;margin-left:var(--e2);border:0;border-radius:var(--runa-radio);background:transparent;box-shadow:inset 0 0 0 1.5px currentColor;cursor:pointer;font:600 14px/1 var(--f-texto);color:inherit}
.copiar:hover{background:var(--runa-piedra-100)}
.copiado{margin-left:var(--e2);font-size:14px}

/* ---------- foco de teclado visible en lo nuevo (UX 6; web.css ya cubre enlaces, botones y summary) ---------- */
.copiar:focus-visible,.cab-boton:focus-visible{outline:3px solid var(--runa-bruma-500);outline-offset:3px}

/* ---------- texto distinto en móvil (etiqueta del hero, cifras): solo uno de los dos se ve y se lee ---------- */
@media (min-width:641px){.solo-movil{display:none!important}}
@media (max-width:640px){.solo-grande{display:none!important}}

/* ---------- MÓVIL (≤ 640 px) · MARKETING 15:27 con OK de Iker 15:38 ---------- */
@media (max-width:640px){
  /* 4 · cierre: sin el supergráfico (la X) encima del titular; el bloque empieza por «Cuéntame tu caso» */
  .supergrafico .sg-panel{display:none}
  /* 8 · áreas táctiles de 44 px (sin cambiar cómo se ve) */
  .boton{min-height:44px}
  .cabecera nav a{display:inline-block;padding-block:12px;margin-block:-12px}
  .cabecera .logo{box-sizing:content-box;padding-block:8px;margin-block:-8px}
  .pie .logo{display:inline-block;padding-block:9px;margin-block:-9px}
  /* 6 · etiquetas de cabecera de página: líneas equilibradas, sin palabras sueltas (la de la portada, además, corta) */
  main .etiqueta{text-wrap:balance}
  .datos a{display:inline-block;padding-block:10px;margin-block:-10px}
  .pie nav{row-gap:0}
  .pie nav a{display:inline-flex;align-items:center;min-height:44px}
  .correo{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e2)}
  .correo .copiar{margin-left:0}
}

/* ---------- cierre «Cuéntame tu caso» · MARKETING 16:51 con OK de Iker 16:54 ----------
   Ordenador: el formulario manda y al lado, pequeño, «¿Prefieres hablar?» (WhatsApp · teléfono · correo con Copiar).
   Tableta: lo mismo, con «¿Prefieres hablar?» debajo del formulario. Móvil: WhatsApp primero, el formulario debajo. */
@media (min-width:761px){.supergrafico{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}}
.cierre{display:grid;gap:var(--e6);margin-top:var(--e6)}
.cierre .formulario{margin-top:0}
.cierre-wa{justify-self:start}
.cierre-otros{font-size:15px}
.cierre-otros p{margin:0}
.cierre-titulo{font:600 12px/1.4 var(--f-texto);letter-spacing:.08em;text-transform:uppercase}
.cierre-vias{margin-top:var(--e2)!important}
.cierre-vias a{font-weight:600}
.cierre-otros .correo{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e2);margin-top:var(--e2)}
.cierre-otros .correo .copiar{margin-left:0}
.cierre-datos{margin-top:var(--e3)!important;font-size:14px;color:var(--runa-texto-2)}
@media (min-width:1100px){.cierre{grid-template-columns:minmax(0,1fr) 262px;column-gap:var(--e6);align-items:start}
  .cierre-otros .correo-dir{font-size:14px}
  .cierre-otros{padding-left:var(--e4);border-left:2px solid var(--runa-tinta-900)}}
@media (max-width:1099px){.cierre-otros{padding-top:var(--e4);border-top:1px solid var(--runa-tinta-900);max-width:560px}}
@media (max-width:640px){.cierre{gap:var(--e5);margin-top:var(--e5)}
  .cierre-vias a{display:inline-block;padding-block:10px;margin-block:-10px}
  /* en móvil manda WhatsApp: el botón del formulario pasa a secundario (contorno del kit) */
  .cierre .formulario .boton,.cierre .formulario .boton:hover{background:transparent;color:var(--runa-texto);box-shadow:inset 0 0 0 1.5px var(--runa-texto)}}

/* ---------- formulario de presupuesto (Iker 06/10/2026) · Netlify Forms ---------- */
.formulario{margin-top:var(--e6);max-width:560px}
.form-titulo{font:600 16px/1.3 var(--f-texto);margin:0 0 var(--e3)}
.formulario .campos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--e3)}
.formulario label{display:grid;gap:6px;min-width:0;align-content:end} /* si una etiqueta ocupa dos líneas, las casillas siguen alineadas */
.formulario label span{font:600 12px/1.4 var(--f-texto);letter-spacing:.08em;text-transform:uppercase}
.formulario label small{font-size:12px;font-weight:400;letter-spacing:0;text-transform:none}
.formulario input{box-sizing:border-box;width:100%;min-height:44px;padding:10px 14px;border:0;border-radius:var(--runa-radio);background:var(--runa-piedra-50);box-shadow:inset 0 0 0 1.5px var(--runa-tinta-900);font:400 15px/1.4 var(--f-texto);color:var(--runa-tinta-900)}
.formulario input::placeholder{color:var(--runa-texto-2)}
.formulario input:focus-visible{outline:3px solid var(--runa-bruma-500);outline-offset:2px}
.form-pie{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e3) var(--e4);margin:var(--e4) 0 0}
.form-nota{font-size:14px}
.form-estado{margin:var(--e3) 0 0;font-weight:600}
.form-estado:empty{display:none}
/* «¿Qué necesitas?» a todo el ancho; «Otro» abre «Descríbenos qué necesitas» (Iker 07/10/2026) */
.formulario .campo-ancho{grid-column:1/-1}
.formulario select,.formulario textarea{box-sizing:border-box;width:100%;min-height:44px;padding:10px 14px;border:0;border-radius:var(--runa-radio);background:var(--runa-piedra-50);
  box-shadow:inset 0 0 0 1.5px var(--runa-tinta-900);font:400 15px/1.4 var(--f-texto);color:var(--runa-texto)}
.formulario textarea{min-height:88px;resize:vertical}
.formulario select:focus-visible,.formulario textarea:focus-visible{outline:3px solid var(--runa-bruma-500);outline-offset:2px}
.formulario:not(:has(select[name="servicio"] option[value="otro"]:checked)) .campo-otro{display:none}
@media (max-width:640px){.formulario .campos{grid-template-columns:1fr}}

/* ---------- botón «volver arriba» (Iker 06/10/2026): círculo de 48 px abajo a la derecha, flecha del kit girada ---------- */
.arriba{position:fixed;right:calc(16px + env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:60;width:48px;height:48px;border:0;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;background:var(--runa-tinta-900);color:var(--runa-piedra-50);
  opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .3s cubic-bezier(.65,0,.35,1),transform .3s cubic-bezier(.65,0,.35,1),visibility .3s}
.arriba.ver{opacity:1;visibility:visible;transform:none}
.arriba svg{height:16px;width:auto;transform:rotate(-90deg)}
.arriba:hover{background:var(--runa-arcilla-700)}
.arriba:focus-visible{outline:3px solid var(--runa-bruma-500);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.arriba{transition:none}}

/* ---------- entrada lateral como adorno (js/lateral.js v6 · Iker 15:14; MARKETING 16:51 con OK de Iker 16:54) ----------
   12-32 px desde su lado y fundido de 0,3 s, una vez, al asomar (nunca más que el margen de la página: no corta nada).
   Lo que ya está dentro al verse (bajada rápida, ancla) aparece sin animación. Nada se queda invisible en pantalla.
   Solo con html.lat-on: sin JavaScript o con «reducir movimiento», todo quieto y visible. */
:root{--lat-dist:clamp(12px,2.5vw,32px)}
main{overflow-x:clip}
html.lat-on [data-lateral] > *{transition:opacity .3s cubic-bezier(.65,0,.35,1),transform .3s cubic-bezier(.65,0,.35,1)}
html.lat-on [data-lateral].lat-ya > *{transition:none}
html.lat-on [data-lateral="der"]:not(.lat-dentro) > *{opacity:0;transform:translate3d(var(--lat-dist),0,0)}
html.lat-on [data-lateral="izq"]:not(.lat-dentro) > *{opacity:0;transform:translate3d(calc(var(--lat-dist) * -1),0,0)}
@media (prefers-reduced-motion:reduce){html.lat-on [data-lateral] > *{transition:none;opacity:1;transform:none}}

/* ---------- sin «popping»: una foto que llega tarde entra con un fundido corto (js/fotos.js); sin movimiento ---------- */
img.llega{transition:opacity .3s cubic-bezier(.65,0,.35,1)}
img.llegando{opacity:0}
@media (prefers-reduced-motion:reduce){img.llega{transition:none}}

/* ---------- piezas comunes a portada, Trabajos, Precios y páginas de caso ---------- */
.linea{color:var(--runa-texto-2);margin:var(--e2) 0 0}
.precios-grandes{display:grid;grid-template-columns:repeat(2,minmax(0,max-content));gap:var(--e5) var(--e7)}
.precios-grandes div{border-left:2px solid var(--runa-linea);padding-left:var(--e4)}
.precios-grandes b{display:block;font:800 clamp(40px,5vw,64px)/1 var(--f-titular);letter-spacing:-.01em}
.precios-grandes span{display:block;margin-top:var(--e2);font-size:15px;color:var(--runa-texto-2)}
.seccion--ocre .precios-grandes div{border-left-color:var(--runa-ocre-300)}
@media (max-width:480px){.precios-grandes{grid-template-columns:1fr}}
/* tres o cuatro puntos de una línea, con el filete de las cifras (Precios «Qué va incluido»; casos, fase 2) */
.puntos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--e5);margin-top:var(--e6)}
.puntos--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.puntos > *{margin:0;padding-left:var(--e4);border-left:2px solid var(--runa-linea);min-width:0}
.puntos h3{margin:0}
.puntos p{margin:var(--e2) 0 0;color:var(--runa-texto-2);font-size:15px}
@media (max-width:1000px){.puntos--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.puntos,.puntos--4{grid-template-columns:1fr}}

/* ---------- rendimiento de las animaciones (MARKETING 16:51, medido con CPU limitada) ----------
   Cada dibujo en su propia capa: al cambiar de dibujo se repinta solo él, no la página entera. No cambia cómo se ve. */
[data-runa-anim] > svg{will-change:transform}
/* páginas de caso (fase 2): cuatro cifras, en móvil 2 × 2 en vez de 3 + 1 suelta */
@media (max-width:640px){.banda-cifras .cifras.cifras--4{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:var(--e5)}}

/* ---------- menú «Servicios» desplegable (WEB 07/10/2026, PROPUESTA de Iker; componente fuera del kit: lo valida IDENTIDAD).
   Tokens del kit: tinta, piedra, arcilla, línea, radios. Funciona sin JavaScript (<details>) y con teclado. ---------- */
.menu-servicios{position:relative}
.menu-servicios>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;color:var(--runa-texto);font-weight:600;font-size:14px;line-height:1.6}
.menu-servicios>summary::-webkit-details-marker{display:none}
.menu-servicios>summary:hover,.menu-servicios[open]>summary,.menu-servicios.activo>summary{color:var(--runa-arcilla-700)}
.menu-servicios>summary:focus-visible{outline:3px solid var(--runa-bruma-500);outline-offset:3px;border-radius:4px}
.menu-servicios>summary svg{width:6px;height:12px;fill:currentColor;transform:rotate(90deg);transition:transform .2s}
.menu-servicios[open]>summary svg{transform:rotate(-90deg)}
.menu-servicios>ul{position:absolute;top:calc(100% + 12px);left:-16px;z-index:60;margin:0;padding:var(--e2);list-style:none;min-width:220px;
  background:var(--runa-piedra-50);border:1px solid var(--runa-linea);border-radius:var(--runa-radio);box-shadow:0 12px 32px rgba(39,34,29,.12)}
.menu-servicios>ul a{display:block;padding:10px 12px;border-radius:var(--runa-radio-s);white-space:nowrap}
.menu-servicios>ul a:hover,.menu-servicios>ul a:focus-visible{background:var(--runa-piedra-100);color:var(--runa-arcilla-700)}
.menu-servicios>ul a[aria-current="page"]{color:var(--runa-arcilla-700)}
@media (max-width:640px){
  .menu-servicios>summary{font-size:13px;padding-block:12px;margin-block:-12px}
  .menu-servicios>ul{left:0;min-width:min(260px,calc(100vw - 32px))}
  .menu-servicios>ul a{font-size:15px;padding:12px}
}
@media (prefers-reduced-motion:reduce){.menu-servicios>summary svg{transition:none}}
/* Cabecera fija (ordenador): el fondo a todo el ancho se pinta con border-image en vez de sombra + clip-path, porque el
   clip-path cortaba el desplegable «Servicios» (WEB 07/10/2026). Mismo aspecto: fondo a todo el ancho y línea de 1 px debajo. */
@media (min-width:641px){
  .cabecera{clip-path:none;box-shadow:none;border-bottom-width:0;
    border-image:linear-gradient(var(--runa-fondo),var(--runa-fondo)) fill 0 / 0 / 0 100vmax}
  .cabecera::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--runa-linea)}
}

/* ---------- Precios v3 (WEB 07/10/2026, propuesta): precio de cada servicio en su tarjeta y enlace «Ver el servicio» ---------- */
.precio-servicio{margin:0;color:var(--runa-texto-2);font-size:15px}
.precio-servicio b{font:800 22px/1.2 var(--f-titular);color:var(--runa-arcilla-700)}
.enlace-flecha{display:inline-flex;align-items:center;gap:8px;margin-top:auto;font-weight:600;font-size:14px;color:var(--runa-texto);text-decoration:none;min-height:44px}
.enlace-flecha svg{width:7px;height:14px;fill:currentColor;transition:transform .2s}
.enlace-flecha:hover{color:var(--runa-arcilla-700)} .enlace-flecha:hover svg{transform:translateX(3px)}
.enlace-flecha:focus-visible{outline:3px solid var(--runa-bruma-500);outline-offset:3px;border-radius:4px}
@media (prefers-reduced-motion:reduce){.enlace-flecha svg{transition:none}}

/* ---------- COLOR FIJO POR SERVICIO (IDENTIDAD, regla de Iker 07/10/2026 15:50; GUIA_MARCA v1.5 §5) ----------
   fotos = arcilla · vídeo = bruma · configurador = musgo: icono con acento 500, tarjeta en 100, precio en 700 */
.srv--fotos{--c1:var(--runa-arcilla-100);--c5:var(--runa-arcilla-500);--c7:var(--runa-arcilla-700)}
.srv--video{--c1:var(--runa-bruma-100);--c5:var(--runa-bruma-500);--c7:var(--runa-bruma-700)}
.srv--config{--c1:var(--runa-musgo-100);--c5:var(--runa-musgo-500);--c7:var(--runa-musgo-700)}
.tarjeta.srv{background:var(--c1)}
.tarjeta.srv .precio-servicio b{color:var(--c7)}
.srv-titulo{display:flex;align-items:center;gap:12px}
.srv-titulo a{color:inherit}
.srv-icono{flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:var(--runa-piedra-50);color:var(--runa-tinta-900);--acento:var(--c5)}
.srv-icono svg{width:30px;height:30px}
/* menú: Patrimonio cultural (WEB 13/10/2026) */
.nav-corto{display:none}
@media (max-width:1024px){.nav-largo{display:none}.nav-corto{display:inline}}
/* móvil: el atajo «Preguntas»/«FAQ» de la portada no cabe con 5 apartados; la sección sigue en la página */
@media (max-width:640px){.cabecera nav>a[href^="#"]{display:none}}
/* fin menú Patrimonio cultural */