/* El sistema del sitio de Cimiento (casa v4 y /servicios; fuentes/sitio-v4.md). Decidido por Xavier el
   6-oct-2026: blanco cal para leer, azul pizarra para la estructura, terracota como único acento, olivo en
   WhatsApp, bandas y pie; el muro de triángulos en la portada (con el hueco encintado en azul, portada A)
   y abajo como cimiento. Retícula de 12 columnas en computadora; una columna en el teléfono.
   Titulares en Sifonn sin la c contextual; texto en Source Sans 3; la cita, en Source Serif 4.
   Esquinas: los huecos encintados, rectos; botones, campos y paneles, 12 px. */
@font-face{font-family:"Sifonn";src:url(/fuentes/sifonn-pro.woff2) format("woff2");font-display:swap;font-weight:400 900}
:root{
  --blanco:#FBF9F6;--papel:#FFFFFF;--crema:#FFF6EC;--azul:#3A5975;--terracota:#D76042;--olivo:#9EA453;--tinta:#2B2A1C;
  --linea:rgba(58,89,117,.18);--suave:#5A5A4C;
  --tit:"Sifonn","Source Sans 3",system-ui,sans-serif;
  --txt:"Source Sans 3",system-ui,-apple-system,sans-serif;
  --cita:"Source Serif 4",Georgia,serif;
  --ancho:1240px;--orilla:clamp(20px,5vw,56px);--hueco:clamp(16px,2.4vw,32px);
  --seccion:clamp(72px,9vw,128px);
  --curva:cubic-bezier(.2,.7,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--blanco);scroll-behavior:smooth}
body{margin:0;background:var(--blanco);color:var(--tinta);font-family:var(--txt);font-weight:400;font-size:clamp(18px,1.15vw + 8px,21px);line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
::selection{background:var(--terracota);color:var(--crema)}
[hidden]{display:none !important}
h1,h2,h3,.sifonn{font-family:var(--tit);font-weight:400;letter-spacing:.005em;font-variant-ligatures:no-contextual;font-feature-settings:"calt" 0}
h1,h2,h3,p{margin:0}
.envoltura{max-width:var(--ancho);margin:0 auto;padding:0 var(--orilla)}
.reticula{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--hueco)}
.resalte{background:var(--terracota);color:var(--crema);padding:0 .14em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.borrador{outline:2px dashed var(--terracota);outline-offset:4px}
.saltar{position:absolute;left:-9999px}
.saltar:focus{left:var(--orilla);top:12px;z-index:3;background:var(--azul);color:var(--crema);padding:.5rem 1rem;border-radius:12px}
.seccion{padding:var(--seccion) 0}
.titulo-seccion{color:var(--azul);font-size:clamp(2rem,1.2rem + 2vw,3.2rem);line-height:1.05;text-wrap:balance}

/* Botones: 12 px, una línea, respuesta al tocar */
.boton{font:inherit;font-weight:700;font-size:1rem;display:inline-flex;align-items:center;justify-content:center;gap:.55rem;min-height:3.25rem;padding:0 1.5rem;border-radius:12px;border:2px solid transparent;cursor:pointer;text-decoration:none;white-space:nowrap;transition:transform .2s var(--curva),filter .2s var(--curva)}
.boton:hover{transform:translateY(-1px);filter:brightness(1.05)}
.boton:active{transform:scale(.98)}
.boton:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--terracota);outline-offset:3px}
.boton.terracota{background:var(--terracota);color:var(--crema)}
.boton.azul{background:var(--azul);color:var(--crema)}
.boton.olivo{background:var(--olivo);color:var(--tinta)}
.boton.borde{background:transparent;color:inherit;border-color:currentColor}
.flecha{display:inline-block;transition:transform .2s var(--curva)}
.boton:hover .flecha,.liga:hover .flecha{transform:translateX(3px)}
.liga{display:inline-flex;gap:.4rem;font-weight:700;text-decoration:none;border-bottom:2px solid var(--terracota);padding-bottom:2px}

/* Encabezado */
.cabeza{padding:22px 0}
.cabeza .envoltura{display:flex;align-items:center;justify-content:space-between;gap:24px}
.cabeza img{display:block;height:34px;width:auto}
.cabeza nav{display:flex;align-items:center;gap:clamp(14px,2.4vw,36px);font-weight:600;font-size:1rem}
.cabeza nav a:not(.boton){text-decoration:none;padding:.4rem 0;border-bottom:2px solid transparent}
.cabeza nav a:not(.boton):hover,.cabeza nav a[aria-current]{border-bottom-color:var(--terracota)}
.cabeza .boton{min-height:2.75rem;padding:0 1.1rem}

/* Portada A: el muro con el hueco encintado en azul */
.portada{position:relative;padding:clamp(40px,5vw,72px) 0 clamp(48px,6vw,88px)}
.portada .muro{position:absolute;inset:0;width:100%;height:100%;display:block}
.portada .caja{position:relative;grid-column:1 / span 9;background:var(--azul);color:var(--crema);padding:clamp(30px,3.8vw,56px) clamp(28px,4vw,60px);box-shadow:0 0 0 10px var(--crema)}
.portada h1{font-size:clamp(2.4rem,1.25rem + 2.6vw,4rem);line-height:1.05;text-wrap:balance}
.portada h1 .resalte{line-height:1.2;white-space:nowrap}
.portada .segunda{margin-top:clamp(16px,1.8vw,24px);font-weight:600;font-size:clamp(1.1rem,.9rem + .5vw,1.35rem);line-height:1.45;max-width:52ch}
.portada .acciones{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(22px,2.6vw,34px)}

/* Banda azul (una por página) */
.banda-azul{background:var(--azul);color:var(--crema)}

/* Lista con viñeta de triángulo (la forma del muro) */
.triangulos{list-style:none;margin:0;padding:0}
.triangulos li{position:relative;padding-left:2rem}
.triangulos li::before{content:"";position:absolute;left:0;top:.36em;width:1rem;height:.9rem;background:var(--terracota);clip-path:polygon(0 0,100% 30%,25% 100%)}

/* Preguntas frecuentes: la pregunta a la izquierda, la respuesta a la derecha */
.faq-lista{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--hueco);margin-top:clamp(28px,3vw,44px)}
.faq-lista h3{grid-column:1 / span 4;color:var(--azul);font-size:clamp(1.25rem,1rem + .5vw,1.55rem);line-height:1.2;padding:22px 0;border-top:1px solid var(--linea)}
.faq-lista p{grid-column:5 / span 8;padding:22px 0;border-top:1px solid var(--linea);max-width:62ch}

/* Escríbeme */
.escribe h2{grid-column:1 / span 7;color:var(--azul);font-size:clamp(3rem,1.6rem + 4vw,5.6rem);line-height:1}
.escribe .lado{grid-column:8 / span 5;align-self:end}
.escribe .correo{margin-top:16px;font-weight:600}
.escribe .correo a{text-decoration:none;border-bottom:2px solid var(--terracota)}

/* La base: el muro como cimiento, y el pie */
.base{display:block;width:100%;height:clamp(110px,12vw,170px)}
.pie{background:var(--olivo);color:var(--tinta)}
.pie .envoltura{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px;padding-top:28px;padding-bottom:calc(28px + env(safe-area-inset-bottom))}
.pie img{display:block;height:38px;width:auto}
.pie nav{display:flex;flex-wrap:wrap;gap:8px 28px;font-weight:600}
.pie nav a{text-decoration:none}
.pie nav a:hover{text-decoration:underline}

/* Teléfono y tableta: una columna; el muro en franja arriba del bloque azul */
@media (max-width:899px){
  .reticula>*{grid-column:1 / -1 !important}
  .cabeza nav .solo-ancho{display:none}
  .portada{padding:0}
  .portada .muro{position:relative;height:150px}
  .portada .envoltura{padding:0}
  .portada .reticula{display:block}
  .portada .caja{box-shadow:none;padding:36px var(--orilla) 44px}
  .faq-lista{display:block}
  .faq-lista h3{padding-bottom:6px}
  .faq-lista p{border-top:0;padding-top:0}
  .escribe .lado{margin-top:24px}
}
@media (max-width:520px){ .cabeza img{height:28px} .cabeza nav{gap:12px} }
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .boton,.flecha{transition:none} }