/*
Theme Name: The Lines Agency
Theme URI: https://thelinesagency.com
Author: The Lines Agency
Description: Tema de una sola página para The Lines Agency, agencia de publicidad y medios online en Madrid. Minimalista, con acento naranja y motivo de "línea" como hilo conductor.
Version: 1.0
Requires at least: 6.4
Requires PHP: 7.4
Tested up to: 6.7
Text Domain: the-lines-agency
*/

:root{
  --paper:#FAFAF9;
  --paper-alt:#F2F1EC;
  --ink:#14141A;
  --graphite:#83837C;
  --hairline:#DEDED7;
  --signal:#FF4B1F;
  --signal-soft:#FFE7DE;
  --deep:#1C2B4A;
  --radius:10px;
  --maxw:1200px;
  --ease:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:.001ms !important; transition-duration:.001ms !important;}
}

body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter',sans-serif;
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  margin:0;
}

h1,h2,h3{
  font-family:'Unbounded',sans-serif;
  margin:0;
  line-height:1.08;
  letter-spacing:-0.01em;
}

a{color:inherit;}
img{max-width:100%;display:block;}

.tla-mono{
  font-family:'IBM Plex Mono',monospace;
  letter-spacing:.04em;
}

.tla-eyebrow{
  font-family:'IBM Plex Mono',monospace;
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--graphite);
  display:flex;
  align-items:center;
  gap:10px;
}
.tla-eyebrow::before{
  content:"";
  width:22px;
  height:1px;
  background:var(--signal);
  display:inline-block;
}

.tla-wrap{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 32px;
}
@media (max-width:640px){ .tla-wrap{padding:0 20px;} }

/* scroll progress line — the signature thread */
#tla-progress-line{
  position:fixed;
  top:0; left:0;
  height:2px;
  width:0%;
  background:var(--signal);
  z-index:1000;
  transition:width .05s linear;
}
body.admin-bar #tla-progress-line{top:32px;}

/* NAV */
.tla-header{
  position:fixed;
  top:2px; left:0; right:0;
  z-index:900;
  background:rgba(250,250,249,.86);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--hairline);
}
body.admin-bar .tla-header{top:34px;}
.tla-nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:72px;
}
.tla-logo{
  font-family:'Unbounded',sans-serif;
  font-weight:800;
  font-size:16px;
  letter-spacing:-.01em;
  display:flex;
  align-items:center;
  gap:8px;
  text-decoration:none;
}
.tla-logo .dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--signal);
  display:inline-block;
}
/* header row: logo + (nav / cta) */
.tla-nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:72px;
  gap:20px;
}
.tla-nav-right{
  display:flex;
  align-items:center;
  gap:20px;
}

/* core/navigation block */
.tla-header .wp-block-navigation{
  font-family:'IBM Plex Mono',monospace;
  font-size:13px;
}
.tla-header .wp-block-navigation a{
  text-decoration:none;
  color:var(--ink);
}
.tla-header .wp-block-navigation-item{position:relative;}
.tla-header .wp-block-navigation-item__content{padding-bottom:4px; position:relative;}
.tla-header .wp-block-navigation-item__content::after{
  content:"";
  position:absolute; left:0; bottom:0;
  width:0%; height:1px;
  background:var(--signal);
  transition:width .25s var(--ease);
}
.tla-header .wp-block-navigation-item:hover .wp-block-navigation-item__content::after{width:100%;}
.tla-header .wp-block-navigation__responsive-container.is-menu-open{
  background:var(--paper);
}
.tla-header .wp-block-navigation__responsive-container-content{
  font-family:'IBM Plex Mono',monospace;
}
.tla-header .wp-block-navigation__responsive-container-close,
.tla-header .wp-block-navigation__responsive-container-open{
  color:var(--ink);
}

/* small "Hablemos" CTA button next to the nav */
.tla-nav-right .wp-block-button__link{
  padding:10px 18px;
  font-size:13px;
}

/* SECTION HEADER PATTERN */
.tla-section-mark{
  display:flex;
  align-items:baseline;
  gap:14px;
  margin-bottom:44px;
}
.tla-section-mark .idx{
  font-family:'IBM Plex Mono',monospace;
  font-size:12px;
  color:var(--signal);
  white-space:nowrap;
}
.tla-section-mark .rule{
  flex:1;
  height:1px;
  background:var(--hairline);
}
.tla-section-title{
  font-size:clamp(28px,3.6vw,42px);
  font-weight:700;
  max-width:640px;
}

.tla-section{
  padding:120px 0;
  border-bottom:1px solid var(--hairline);
}
.tla-section.last{border-bottom:none;}

/* reveal on scroll */
.tla-reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.tla-reveal.in{opacity:1; transform:translateY(0);}

/* HERO */
.tla-hero{
  padding:190px 0 90px;
  border-bottom:1px solid var(--hairline);
}
.tla-hero-head{
  font-size:clamp(40px,7vw,84px);
  font-weight:800;
  max-width:920px;
  margin:22px 0 26px;
}
.tla-hero-head em{
  font-style:normal;
  color:var(--signal);
}
.tla-hero-sub{
  max-width:520px;
  font-size:17px;
  color:#45453f;
  margin-bottom:40px;
}
.tla-hero-ctas.wp-block-buttons{
  gap:16px;
  margin-bottom:90px;
}
/* primary button already styled globally via theme.json elements.button */
.tla-hero-ctas .wp-block-button__link:hover,
.tla-nav-right .wp-block-button__link:hover{
  background:var(--signal) !important;
}
/* secondary CTA — plain underlined link, not a pill */
.tla-btn-secondary .wp-block-button__link{
  background:none !important;
  color:var(--ink) !important;
  padding:15px 8px !important;
  border-radius:0 !important;
  border-bottom:1px solid var(--ink);
}
.tla-btn-secondary .wp-block-button__link:hover{
  color:var(--signal) !important;
  border-color:var(--signal);
}

.tla-line-diagram{width:100%; height:auto; display:block;}
.tla-line-diagram .path{
  fill:none;
  stroke:var(--ink);
  stroke-width:1.4;
  stroke-dasharray:1000;
  stroke-dashoffset:1000;
  animation:tla-draw 2.2s var(--ease) forwards .3s;
}
@keyframes tla-draw{ to{stroke-dashoffset:0;} }
.tla-line-diagram .node{
  fill:var(--paper);
  stroke:var(--signal);
  stroke-width:2;
  opacity:0;
  animation:tla-pop .5s var(--ease) forwards;
}
.tla-line-diagram .node.n1{animation-delay:.5s;}
.tla-line-diagram .node.n2{animation-delay:1.3s;}
.tla-line-diagram .node.n3{animation-delay:2.3s;}
@keyframes tla-pop{ from{opacity:0; transform:scale(.4);} to{opacity:1; transform:scale(1);} }
.tla-line-diagram text{
  font-family:'IBM Plex Mono',monospace;
  font-size:11px;
  letter-spacing:.08em;
  fill:var(--graphite);
}

/* SERVICES */
.tla-services-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:var(--hairline);
  border:1px solid var(--hairline);
}
@media (max-width:860px){ .tla-services-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .tla-services-grid{grid-template-columns:1fr;} }
.tla-service-card{
  background:var(--paper);
  padding:36px 30px;
  transition:background .25s var(--ease);
}
.tla-service-card:hover{background:var(--paper-alt);}
.tla-service-card .tag{
  font-family:'IBM Plex Mono',monospace;
  font-size:11px;
  color:var(--signal);
  margin-bottom:18px;
  display:block;
}
.tla-service-card h3{
  font-size:19px;
  font-weight:600;
  margin-bottom:10px;
}
.tla-service-card p{
  color:var(--graphite);
  font-size:14.5px;
  margin:0;
}

/* ABOUT */
.tla-about-grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:80px;
  align-items:start;
}
@media (max-width:860px){ .tla-about-grid{grid-template-columns:1fr; gap:50px;} }
.tla-about-text p{
  font-size:18px;
  color:#33332e;
  margin:0 0 20px;
}
.tla-about-text p:first-child{
  font-family:'Unbounded',sans-serif;
  font-weight:600;
  font-size:clamp(22px,2.6vw,28px);
  color:var(--ink);
  line-height:1.3;
}
.tla-stats{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1px;
  background:var(--hairline);
  border:1px solid var(--hairline);
}
.tla-stat{
  background:var(--paper);
  padding:26px 22px;
}
.tla-stat .num{
  font-family:'Unbounded',sans-serif;
  font-weight:800;
  font-size:34px;
  color:var(--signal);
  display:block;
}
.tla-stat .lbl{
  font-family:'IBM Plex Mono',monospace;
  font-size:11.5px;
  color:var(--graphite);
  margin-top:6px;
  display:block;
}

/* PORTFOLIO — core/cover cards */
.tla-portfolio-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:24px;
}
@media (max-width:700px){ .tla-portfolio-grid{grid-template-columns:1fr;} }
.tla-case-card.wp-block-cover{
  aspect-ratio:4/3;
  min-height:0 !important;
  justify-content:flex-end;
  padding:26px;
  color:#fff;
  overflow:hidden;
}
.tla-case-card.wp-block-cover .wp-block-cover__background{
  transition:transform .5s var(--ease);
}
.tla-case-card.wp-block-cover:hover .wp-block-cover__background{transform:scale(1.06);}
.tla-case-card .wp-block-cover__inner-container{width:100%;}
.tla-case-cat{
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  opacity:.85;
  margin-bottom:8px;
  color:#fff;
}
.tla-case-card h3{
  font-size:22px;
  font-weight:600;
  margin-bottom:10px;
  color:#fff;
}
.tla-case-result{
  font-size:13px;
  color:#fff;
  opacity:0;
  max-height:0;
  overflow:hidden;
  transition:opacity .3s var(--ease), max-height .3s var(--ease);
}
.tla-case-card:hover .tla-case-result{opacity:1; max-height:40px;}

/* TESTIMONIALS — core/quote cards */
.tla-testi-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
}
@media (max-width:860px){ .tla-testi-grid{grid-template-columns:1fr;} }
.tla-testi-card.wp-block-quote{
  border:1px solid var(--hairline);
  border-radius:var(--radius);
  padding:30px 26px;
  background:var(--paper);
  margin:0;
}
.tla-testi-card.wp-block-quote::before{
  content:"\201C";
  font-family:'Unbounded',sans-serif;
  font-size:34px;
  color:var(--signal);
  line-height:1;
  display:block;
  margin-bottom:14px;
}
.tla-testi-card p{
  font-size:15.5px;
  color:#33332e;
  margin:0 0 22px;
}
.tla-testi-card cite{
  font-family:'IBM Plex Mono',monospace;
  font-size:12px;
  font-style:normal;
  color:var(--graphite);
}

/* BLOG — core/query loop */
.tla-blog-grid.wp-block-query{margin:0;}
.tla-blog-grid .wp-block-post-template{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
  list-style:none;
  margin:0;padding:0;
}
@media (max-width:860px){ .tla-blog-grid .wp-block-post-template{grid-template-columns:1fr;} }
.tla-blog-card{
  padding-top:20px;
  border-top:1px solid var(--hairline);
  transition:transform .2s var(--ease);
}
.tla-blog-card:hover{transform:translateX(4px);}
.tla-blog-card .wp-block-post-date{
  font-family:'IBM Plex Mono',monospace;
  font-size:11.5px;
  color:var(--signal);
  display:block;
  margin-bottom:12px;
}
.tla-blog-card .wp-block-post-title{
  font-size:18px;
  font-weight:600;
  line-height:1.35;
  margin-bottom:14px;
}
.tla-blog-card .wp-block-post-title a{text-decoration:none; color:var(--ink);}
.tla-blog-card .wp-block-read-more{
  font-family:'IBM Plex Mono',monospace;
  font-size:12px;
  color:var(--graphite);
  text-decoration:none;
}
.tla-blog-empty{
  font-family:'IBM Plex Mono',monospace;
  font-size:13px;
  color:var(--graphite);
}

/* CONTACT */
.tla-contact-grid{
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:80px;
}
@media (max-width:860px){ .tla-contact-grid{grid-template-columns:1fr; gap:50px;} }
.tla-contact-info .big-email{
  font-family:'Unbounded',sans-serif;
  font-weight:600;
  font-size:clamp(20px,2.4vw,26px);
  color:var(--signal);
  text-decoration:none;
  word-break:break-all;
  display:inline-block;
  margin:18px 0 34px;
}
.tla-contact-detail{
  font-family:'IBM Plex Mono',monospace;
  font-size:13px;
  color:var(--graphite);
  margin-bottom:8px;
}
.tla-contact-detail strong{color:var(--ink);}

.tla-form .components-text-control__input,
.tla-form input[type="text"],
.tla-form input[type="email"],
.tla-form textarea,
.tla-form .grunion-field{
  font-family:'Inter',sans-serif !important;
  font-size:15px !important;
  padding:13px 4px !important;
  border:none !important;
  border-bottom:1px solid var(--hairline) !important;
  background:transparent !important;
  color:var(--ink) !important;
  border-radius:0 !important;
  width:100% !important;
}
.tla-form input:focus,
.tla-form textarea:focus{border-color:var(--signal) !important; outline:none !important; box-shadow:none !important;}
.tla-form label{
  font-family:'IBM Plex Mono',monospace !important;
  font-size:11.5px !important;
  color:var(--graphite) !important;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.tla-form .wp-block-jetpack-button a,
.tla-form button[type="submit"],
.tla-form input[type="submit"]{
  font-family:'IBM Plex Mono',monospace;
  font-size:13.5px;
  background:var(--ink);
  color:var(--paper);
  padding:15px 30px;
  border-radius:100px;
  border:none;
  cursor:pointer;
}
.tla-form .wp-block-jetpack-button a:hover,
.tla-form button[type="submit"]:hover{background:var(--signal);}

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:2px solid var(--signal);
  outline-offset:3px;
}

/* FOOTER */
.tla-footer{
  padding:50px 0 40px;
}
.tla-footer-row{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  flex-wrap:wrap;
  gap:24px;
}
.tla-footer-coords{
  font-family:'IBM Plex Mono',monospace;
  font-size:11.5px;
  color:var(--graphite);
}
.tla-social.wp-block-social-links{
  margin:0;
}
.tla-social .wp-social-link{
  background:none !important;
}
.tla-social .wp-social-link a{color:var(--ink);}
.tla-social .wp-social-link:hover a{color:var(--signal);}

/* section-mark divider — core/separator as the flexible "rule" */
.tla-section-mark .rule.wp-block-separator{
  flex:1;
  height:1px;
  border:none;
  background:var(--hairline);
  margin:0;
  min-width:60px;
}

/* Page body top offset so hero isn't hidden by fixed header when scrolled to top via WP */
body{padding-top:0;}

/* Neutralizar el margen automático de bloque ("block gap") que WordPress
   añade a cualquier hijo que no sea el primero dentro de un contenedor.
   Sin esto, el 2º/3º/4º elemento de nuestros grids y filas flex se
   desplaza hacia abajo respecto al primero. */
.tla-nav-right > *,
.tla-services-grid > *,
.tla-stats > *,
.tla-about-grid > *,
.tla-portfolio-grid > *,
.tla-testi-grid > *,
.tla-contact-grid > *,
.tla-footer-row > *,
.tla-hero-ctas > *,
.tla-section-mark > * {
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* PAGE / SINGLE — Aviso Legal, Cookies, Privacidad, entradas de blog */
.tla-legal-page{
  padding:160px 0 100px;
}
.tla-legal-page .tla-wrap{
  max-width:760px;
}
.tla-legal-page .wp-block-post-title{
  font-family:'Unbounded',sans-serif;
  font-weight:700;
  font-size:clamp(32px,4vw,48px);
  line-height:1.15;
  margin-bottom:20px;
}
.tla-legal-page .date{
  font-size:12.5px;
  color:var(--graphite);
  display:block;
  margin-bottom:30px;
}
.tla-legal-page .entry-content,
.tla-legal-page .wp-block-post-content{
  font-size:16px;
  line-height:1.75;
  color:#33332e;
}
.tla-legal-page .wp-block-post-content h2{
  font-family:'Unbounded',sans-serif;
  font-weight:600;
  font-size:24px;
  margin-top:44px;
  margin-bottom:14px;
}
.tla-legal-page .wp-block-post-content h3{
  font-family:'Unbounded',sans-serif;
  font-weight:600;
  font-size:19px;
  margin-top:30px;
  margin-bottom:10px;
}
.tla-legal-page .wp-block-post-content p{margin:0 0 18px;}
.tla-legal-page .wp-block-post-content ul,
.tla-legal-page .wp-block-post-content ol{margin:0 0 18px; padding-left:22px;}
.tla-legal-page .wp-block-post-content li{margin-bottom:6px;}
.tla-legal-page .wp-block-post-content a{color:var(--signal); text-decoration:underline;}
.tla-legal-page .wp-block-post-content table{width:100%; border-collapse:collapse; margin-bottom:18px;}
.tla-legal-page .wp-block-post-content th,
.tla-legal-page .wp-block-post-content td{border:1px solid var(--hairline); padding:10px 12px; text-align:left; font-size:14px;}