/* ==============================

   VELAT — base.css (alineaciones finales)

   · Carrusel alineado

   · Meta/descripción 20% más anchas

   · Páginas generales con ancho 0.8 del anterior

   ============================== */



/* —— Tipografía —— */

@font-face{

  font-family:'ABCGaisyr';

  src:url('/assets/fonts/Gaisyr.woff2') format('woff2');

  font-weight:normal;

  font-style:normal;

  font-display:swap;

}



/* —— Variables —— */

:root{

  --fg:#232323; --bg:#ffffff; --muted:#666; --line:#ddd;

  --header-h:56px;



  --max-width:1100px;              /* ancho del carrusel */

  --text-width: calc(var(--max-width) * 1.2);  /* texto bajo carrusel 20% más ancho */

  --general-width: calc(var(--max-width) * 0.64); /* 0.8 del ancho anterior (0.8 × 0.8 = 0.64 del carrusel) */



  --pad-d:24px;

  --pad-m:16px;



  --carousel-h:min(86vh, 936px);

  --caption-size:12px;

}



/* —— Reset —— */

*{box-sizing:border-box;}

html,body{margin:0;padding:0;}

img,picture,video{display:block;max-width:100%;height:auto;}



body{

  font-family:'ABCGaisyr','Courier New',Courier,monospace;

  background:var(--bg);

  color:var(--fg);

  min-height:100vh;

}



/* ==============================

   Header

   ============================== */

header.site-header{

  position:fixed;top:0;left:0;right:0;

  height:var(--header-h);z-index:500;

  display:flex;align-items:center;justify-content:space-between;

  padding:0 16px;

  background:rgba(255,255,255,.35);

  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);

  border-bottom:1px solid rgba(0,0,0,.08);

}

.site-header .site-logo img{width:182px;height:auto;opacity:.85;}



/* ==============================

   Layout general

   ============================== */

main{padding-top:calc(var(--header-h) + 14px);}



.container,.wrap,.page{

  max-width:var(--max-width);

  margin:0 auto;

  padding:0 var(--pad-d);

}



h1{font-size:clamp(16px,1.9vw,22px);margin:0 0 12px;text-align:left;}

h2{font-size:clamp(15px,1.6vw,20px);margin:10px 0 8px;}



/* ==============================

   Carrusel (alineado)

   ============================== */

.carousel{

  position:relative;width:100%;

  max-width:var(--max-width);

  margin:8px auto 6px;overflow:hidden;

  background:transparent;

}

.carousel .track{display:flex;transition:transform .4s cubic-bezier(.2,.8,.2,1);}

.carousel .slide{flex:0 0 100%;display:block;}

.carousel .slide figure{

  margin:0;

  display:flex;

  flex-direction:column;

  align-items:center;

}

.carousel .slide picture{

  display:flex;align-items:center;justify-content:center;

  height:var(--carousel-h);width:100%;overflow:hidden;

}

.carousel .slide img{

  max-height:100%;max-width:100%;

  object-fit:contain;object-position:center;

}

/* ——— Texto del carrusel alineado con el carrusel ——— */

.carousel .slide figcaption{

  max-width:var(--max-width);

  padding:8px var(--pad-d);

  margin:0 auto 18px;

  font-size:var(--caption-size);

  line-height:1.35;

  color:#111;

  opacity:.85;

  font-style:italic;

  text-align:left;

}



/* Flechas visibles sobre imagen */

.carousel .nav{

  position:absolute;inset:0;

  z-index:30;pointer-events:none;

}

.carousel .nav .btn{

  position:absolute;top:50%;transform:translateY(-50%);

  width:56px;height:56px;

  color:#fff;font-size:44px;

  text-shadow:0 1px 2px rgba(0,0,0,.45);

  background:transparent;border:0;cursor:pointer;

  pointer-events:auto;

}

.carousel .nav #prev{left:8px;}

.carousel .nav #next{right:8px;}

.carousel .dots{display:none!important;}



/* ==============================

   Meta + Descripción bajo carrusel (20% más anchas)

   ============================== */

.meta,.project-description,.concepto{

  max-width:var(--text-width);

  margin:16px auto 28px;

  padding:0 var(--pad-d);

  text-align:left;

  line-height:1.45;

}

.meta .item{margin:10px 0 12px;}

.meta .label{

  display:block;font-weight:700;text-transform:none;margin-bottom:2px;

}

.meta .value{display:block;font-weight:400;text-transform:none;}



/* ==============================

   Páginas generales (servicios, contacto, estudio)

   ============================== */

.prose,.section-text,.copy,.texto,.content,

.contact-intro,.contact-form{

  max-width:var(--general-width);

  margin:14px auto 26px;

  padding:0 var(--pad-d);

  text-align:left;

  line-height:1.45;

}

.contact-form input,.contact-form textarea{

  width:100%;border:1px solid var(--line);border-radius:6px;

  padding:10px 12px;background:#fff;font:inherit;

}

.contact-form textarea{min-height:140px;resize:vertical;}

.contact-form button{

  border:1px solid #111;background:#111;color:#fff;

  padding:10px 16px;border-radius:8px;cursor:pointer;

}



/* ==============================

   Footer

   ============================== */

footer{

  padding:40px 20px;background:rgba(255,255,255,.35);

  backdrop-filter:blur(12px);

  border-top:1px solid rgba(0,0,0,.08);

  text-align:center;font-size:.8rem;

}



/* ==============================

   Responsive

   ============================== */

@media(max-width:900px){

  .carousel .slide figcaption,

  .meta,.project-description,.concepto,

  .prose,.section-text,.copy,.texto,.content,

  .contact-intro,.contact-form{

    padding:0 var(--pad-m);

  }

  .carousel .nav .btn{width:48px;height:48px;font-size:38px;}

}