:root {
  --paper: #0a2f7a;        /* fondo azul oscuro tipo afiche */
  --paper-2: #133f97;      /* tarjetas: azul un poco más claro */
  --graphite: #eef4ff;     /* "tinta" clara sobre azul */
  --graphite-soft: #b9ccef;
  --blue-deep: #ffffff;    /* trazo del dibujo: blanco como el afiche */
  --blue: #ffe27a;
  --yellow: #f2b705;
  --yellow-deep: #ffd23f;
  --line: rgba(238, 244, 255, 0.28);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: "Inter", system-ui, sans-serif;
  color: var(--graphite);
  background: var(--paper);
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Textura de papel arrugado: pliegues marcados (luces y sombras) */
.blueprint-grid {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='crumple'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012 0.016' numOctaves='5' seed='8' result='t'/%3E%3CfeDiffuseLighting in='t' surfaceScale='2.5' diffuseConstant='1.1' lighting-color='%23ffffff'%3E%3CfeDistantLight azimuth='235' elevation='62'/%3E%3C/feDiffuseLighting%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23crumple)'/%3E%3C/svg%3E");
  background-size: 760px 760px;
  mix-blend-mode: soft-light;
  opacity: 0.85;
  box-shadow: inset 0 0 240px 40px rgba(4, 18, 56, 0.55);
}

/* Grano fino de papel */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.35;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.12'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

section, header, footer { position: relative; z-index: 1; }

/* Tipografía manuscrita / lápiz para títulos */
h1, h2, h3, .brand-mark, .kicker, .tag, .post-date, .agenda-when {
  font-family: "Caveat", "Architects Daughter", cursive;
}

/* NAV */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.4rem clamp(1.2rem, 5vw, 4rem);
  position: sticky;
  top: 0;
  z-index: 5;
  backdrop-filter: blur(3px);
  background: rgba(10, 47, 122, 0.78);
  border-bottom: 2px solid transparent;
  border-image: repeating-linear-gradient(90deg, var(--graphite) 0 8px, transparent 8px 16px) 2;
}
.brand { display: flex; flex-direction: column; line-height: 0.8; text-decoration: none; }
.brand-mark { font-size: 1.9rem; font-weight: 700; color: var(--blue-deep); letter-spacing: 1px; }
.brand-mark--accent { color: var(--yellow-deep); }
.nav-links { display: flex; align-items: center; gap: clamp(0.8rem, 2.5vw, 2rem); }
.nav-links a { color: var(--graphite-soft); text-decoration: none; font-size: 0.95rem; transition: color 0.2s; }
.nav-links a:hover { color: var(--blue); }

/* Botones tipo lápiz/recorte */
.btn-chalk {
  display: inline-block;
  background: var(--yellow);
  color: var(--graphite);
  font-weight: 600;
  padding: 0.8rem 1.5rem;
  text-decoration: none;
  border: 2px solid var(--graphite);
  border-radius: 14px 10px 16px 8px / 8px 16px 10px 14px;
  box-shadow: 3px 3px 0 rgba(44, 42, 38, 0.55);
  transition: transform 0.15s, box-shadow 0.15s;
}
.btn-chalk:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 rgba(44, 42, 38, 0.6); }
.btn-chalk--sm { padding: 0.45rem 0.9rem; font-size: 0.9rem; }
.btn-link { color: var(--blue-deep); text-decoration: none; font-weight: 600; border-bottom: 2px dashed var(--yellow-deep); padding-bottom: 2px; }
.btn-link:hover { color: var(--blue); }

/* HERO */
.hero {
  display: grid;
  place-items: center;
  text-align: center;
  padding: clamp(2rem, 6vw, 5rem) clamp(1.2rem, 5vw, 4rem);
  min-height: 86vh;
}
.hero-content { max-width: 680px; position: relative; z-index: 2; }

/* Edificio de fondo a pantalla completa: la web ES la casa */
.bg-house {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.45;
}
.bg-house .house-svg { width: min(96vw, 1100px); height: 94vh; max-width: none; }
.draw-stroke {
  fill: none;
  stroke: var(--blue-deep);
  stroke-width: 2.3;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: url(#pencil);
}
.draw-stroke .windows { stroke-width: 1.6; }
.draw-stroke path,
.draw-stroke rect,
.draw-stroke line,
.draw-stroke circle {
  /* el JS controla el dibujo; offset inicial = oculto */
  stroke-dashoffset: var(--dash, 0);
}
.draw-stroke .signature {
  opacity: var(--sig, 0);
  transition: opacity 0.5s ease;
}
/* Logo Casa Azul */
.logo { margin-bottom: 1.4rem; }
/* La imagen se recorta en círculo: object-fit cover elimina las esquinas */
.logo-img {
  width: clamp(150px, 20vw, 220px);
  height: clamp(150px, 20vw, 220px);
  display: block;
  margin: 0 auto;
  object-fit: cover;
  border-radius: 50%;
  filter: drop-shadow(4px 6px 0 rgba(4, 18, 56, 0.35));
}

.kicker { color: var(--yellow-deep); font-size: 1.5rem; transform: rotate(-2deg); display: inline-block; }
.hero-title { font-size: clamp(3rem, 8vw, 6rem); line-height: 0.95; margin: 0.4rem 0 1rem; font-weight: 700; color: var(--graphite); }
.hero-title .hl {
  color: var(--yellow-deep);
  position: relative;
  white-space: nowrap;
}
.hero-title .hl::after {
  content: "";
  position: absolute;
  left: -6px; right: -6px; bottom: 2px;
  height: 10px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='12' viewBox='0 0 120 12'%3E%3Cpath d='M2 7 Q30 2 60 6 T118 5' fill='none' stroke='%23ffd23f' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;
  z-index: -1;
}
.hero-sub { color: var(--graphite-soft); max-width: 46ch; margin: 0 auto; font-size: 1.08rem; }
.hero-cta { display: flex; align-items: center; justify-content: center; gap: 1.4rem; margin: 1.8rem 0 1rem; flex-wrap: wrap; }
.hero-meta { color: var(--graphite-soft); font-size: 0.85rem; opacity: 0.85; }

/* SVG casa a lápiz */
.house-svg { width: 100%; max-width: 560px; display: block; margin: 0 auto; }
.sketch-stroke {
  fill: none;
  stroke: var(--blue-deep);
  stroke-width: 2.3;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: url(#pencil);
}
.sketch-stroke .windows { stroke-width: 1.6; }
.signature {
  fill: var(--blue-deep);
  stroke: none;
  font-family: "Caveat", cursive;
  font-size: 26px;
  font-weight: 700;
}
.sketch-stroke path,
.sketch-stroke rect,
.sketch-stroke line {
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
  animation: draw 3s ease forwards;
}
@keyframes draw { to { stroke-dashoffset: 0; } }

/* SECCIONES */
.section { padding: clamp(3rem, 7vw, 6rem) clamp(1.2rem, 5vw, 4rem); max-width: 1180px; margin: 0 auto; }
.section + .section { border-top: 2px dashed var(--line); }
.section-head { margin-bottom: 2.8rem; }
.tag {
  display: inline-block;
  color: var(--yellow-deep);
  font-size: 1.35rem;
  letter-spacing: 1px;
  transform: rotate(-1.2deg);
}
.section-head h2 {
  font-size: clamp(2.6rem, 5.5vw, 4rem);
  font-weight: 700;
  line-height: 0.95;
  color: var(--graphite);
  position: relative;
  display: inline-block;
}
.section-head h2::after {
  content: "";
  position: absolute;
  left: 0; right: 8%;
  bottom: -6px;
  height: 8px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='10' viewBox='0 0 200 10'%3E%3Cpath d='M2 6 Q50 1 100 5 T198 4' fill='none' stroke='%23ffd23f' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") left/100% 100% no-repeat;
  opacity: 0.85;
}

/* Todo en trazo de línea: contorno dibujado a mano, sin relleno */
.card, .post, .frame, .agenda-list li {
  position: relative;
  border: none;
  background: transparent;
  box-shadow: none;
}
.card::after, .post::after, .frame::after, .agenda-list li::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2.2px solid var(--graphite);
  border-radius: 18px 8px 20px 10px / 10px 20px 8px 18px;
  filter: url(#pencil);
  pointer-events: none;
}

/* Iconos de línea */
.ic { width: 46px; height: 46px; display: block; }
.ic g {
  fill: none;
  stroke: var(--graphite);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: url(#pencil);
}

/* CARDS */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.6rem; }
.card { padding: 1.7rem 1.6rem; transition: transform 0.2s; }
.card:nth-child(even) { transform: rotate(-1deg); }
.card:nth-child(odd) { transform: rotate(0.8deg); }
.card:hover { transform: translateY(-6px) rotate(0deg); }
.card-icon { margin-bottom: 0.7rem; }
.card h3 { font-size: 1.8rem; color: var(--yellow-deep); margin-bottom: 0.2rem; line-height: 1; }
.card p { color: var(--graphite-soft); font-size: 0.95rem; }

/* BLOG */
.blog { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.6rem; }
.post { padding: 1.8rem; display: flex; flex-direction: column; gap: 0.5rem; transition: transform 0.2s; }
.post:hover { transform: translateY(-5px) rotate(0.5deg); }
.post-date {
  align-self: flex-start;
  position: relative;
  color: var(--yellow-deep);
  font-size: 1.25rem;
  line-height: 1;
  padding: 0.25rem 0.7rem;
  transform: rotate(-2deg);
}
.post-date::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid var(--yellow-deep);
  border-radius: 8px 6px 9px 5px / 5px 9px 6px 8px;
  filter: url(#pencil);
}
.post h3 { font-size: 1.7rem; line-height: 1; color: var(--graphite); }
.post p { color: var(--graphite-soft); font-size: 0.95rem; flex: 1; }
.post-link { color: var(--blue-deep); text-decoration: none; font-weight: 600; margin-top: 0.5rem; }
.post-link:hover { color: var(--blue); }

/* GALERÍA en trazo de línea */
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1.6rem; }
.frame {
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  color: var(--graphite-soft);
  font-family: "Caveat", cursive;
  font-size: 1.4rem;
  transition: transform 0.2s, color 0.2s;
}
/* aspa diagonal dibujada, como marco vacío de boceto */
.frame::before {
  content: "";
  position: absolute;
  inset: 10px;
  background:
    linear-gradient(to top right, transparent calc(50% - 1px), var(--line) calc(50% - 1px), var(--line) calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(to top left, transparent calc(50% - 1px), var(--line) calc(50% - 1px), var(--line) calc(50% + 1px), transparent calc(50% + 1px));
  filter: url(#pencil);
}
.frame span { position: relative; z-index: 1; }
.frame:nth-child(3n) { transform: rotate(-1.5deg); }
.frame:nth-child(3n+1) { transform: rotate(1.2deg); }
.frame:hover { transform: scale(1.03) rotate(0deg); color: var(--graphite); }
.gallery-note { margin-top: 1.2rem; color: var(--graphite-soft); font-size: 0.85rem; }
.gallery-note code { color: var(--blue-deep); }

/* AGENDA */
.agenda-list { list-style: none; display: flex; flex-direction: column; gap: 1rem; }
.agenda-list li { padding: 1.1rem 1.5rem; display: flex; gap: 1.5rem; align-items: baseline; transition: transform 0.18s; }
.agenda-list li:hover { transform: translateX(6px); }
.agenda-when { color: var(--yellow-deep); font-size: 1.5rem; min-width: 110px; }
.agenda-what { color: var(--graphite); }

/* CONTACTO */
.contact { text-align: center; }
.contact h2 { font-size: clamp(2.6rem, 6vw, 4.4rem); margin-bottom: 0.5rem; }
.contact p { color: var(--graphite-soft); margin-bottom: 1.8rem; }
.contact-cta { display: flex; gap: 1.4rem; justify-content: center; align-items: center; flex-wrap: wrap; }

/* FOOTER: corona de tejado + cuerpo de la casa */
.foot {
  position: relative;
  margin-top: 4rem;
  padding: 0 clamp(1.2rem, 5vw, 4rem) 1.4rem;
  color: var(--graphite);
}
.foot-roof {
  display: block;
  width: 100%;
  height: 56px;
  fill: none;
  stroke: var(--graphite);
  stroke-width: 2.3;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: url(#pencil);
}
.foot-inner {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1.2fr 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  padding: 2.4rem 0 2rem;
  border-left: 2px dashed var(--line);
  border-right: 2px dashed var(--line);
  padding-left: clamp(1rem, 3vw, 2rem);
  padding-right: clamp(1rem, 3vw, 2rem);
}
.foot-col { display: flex; flex-direction: column; gap: 0.5rem; }
.foot-col h4 {
  font-family: "Caveat", cursive;
  font-size: 1.5rem;
  color: var(--yellow-deep);
  margin-bottom: 0.2rem;
}
.foot-col a {
  color: var(--graphite-soft);
  text-decoration: none;
  width: fit-content;
  transition: color 0.2s, transform 0.2s;
}
.foot-col a:hover { color: var(--yellow); transform: translateX(4px); }
.foot-line { color: var(--graphite-soft); font-size: 0.95rem; }

.foot-brand .foot-mark {
  font-family: "Caveat", cursive;
  font-weight: 700;
  font-size: 2.2rem;
  line-height: 0.85;
  color: var(--graphite);
}
.foot-brand .foot-mark--accent { color: var(--yellow-deep); }
.foot-brand p { color: var(--graphite-soft); font-size: 0.95rem; margin-top: 0.6rem; max-width: 32ch; }

.foot-base {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-top: 1.2rem;
  border-top: 2px dashed var(--line);
  color: var(--graphite-soft);
  font-family: "Architects Daughter", cursive;
  font-size: 0.9rem;
}

@media (max-width: 720px) {
  .foot-inner { grid-template-columns: 1fr 1fr; }
}

/* RESPONSIVE */
@media (max-width: 820px) {
  .bg-house { opacity: 0.22; }
  .bg-house .house-svg { width: 150vw; height: 70vh; }
  .nav-links a:not(.btn-chalk) { display: none; }
}