/*!
Theme Name: tulu
Theme URI: https://tulumediaok.com/
Author: FreeloStudio Dev
Author URI: https://tulumediaok.com/
Description: tulu — theme a medida para agencia de social media marketing y desarrollo web. Landing editable desde el Personalizador, con secciones de servicios, testimonios e Instagram gestionables desde el panel de WordPress. Incluye blog y páginas con el estilo de la marca.
Version: 1.0.2
Tested up to: 6.5
Requires at least: 5.6
Requires PHP: 7.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: tulu
Tags: custom-logo, custom-menu, featured-images, front-page-post-form, threaded-comments, translation-ready, one-column, two-columns, right-sidebar

tulu is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.
*/

/*--------------------------------------------------------------
>>> TABLA DE CONTENIDOS
----------------------------------------------------------------
# Variables
# Reset / Base
# Tipografía
# Utilidades WordPress (accesibilidad, alineaciones)
# Header / Navegación
# Botones
# Layout de contenido (blog / páginas / single)
# Paginación y navegación de posts
# Comentarios
# Widgets / Sidebar
# Footer
# Responsive
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Variables
--------------------------------------------------------------*/
:root{
  --navy:#2B315F;
  --blue:#3F5DBB;
  --lav:#7B89BC;
  --beige:#E4D6BD;
  --white:#EDE1CD;
  --ink:#2E2A24;
  --ink-2:#232848;
  --ink-3:#343b6d;
  --sand:#3F5DBB;
  --sand-soft:#4E6AC8;
  --amber:#7B89BC;
  --peach:#93a3da;
  --bone:#F3ECDD;
  --muted:#6f685c;
  --muted-d:#c2bbaa;
  --line:rgba(60,50,35,.16);
  --line-d:rgba(255,255,255,.16);
  --grad-warm:linear-gradient(120deg,#3F5DBB 0%,#7B89BC 100%);
  --grad-hero:linear-gradient(120deg,#93a3da 0%,#ccd5ef 100%);
  --grad-glow:radial-gradient(60% 60% at 50% 40%,rgba(123,137,188,.5) 0%,rgba(63,93,187,.3) 38%,rgba(43,49,95,0) 72%);
  --ease:cubic-bezier(.2,.7,.2,1);
}

/*--------------------------------------------------------------
# Reset / Base
--------------------------------------------------------------*/
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--beige);
  color:var(--ink);
  font-family:"Inter",system-ui,-apple-system,sans-serif;
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{background:var(--blue);color:#fff}
a{color:var(--sand);text-decoration:none;transition:color .2s}
a:hover{color:var(--sand-soft)}
img{max-width:100%;height:auto;display:block}
.wrap{width:min(1180px,92vw);margin-inline:auto}

/*--------------------------------------------------------------
# Tipografía
--------------------------------------------------------------*/
h1,h2,h3,h4,h5,h6,.disp{
  font-family:"Bricolage Grotesque","Inter",sans-serif;
  font-weight:700;
  line-height:1.05;
  letter-spacing:-.02em;
  color:var(--ink);
}
p{margin:0 0 1.1rem}
p:last-child{margin-bottom:0}
.eyebrow{
  font-size:.72rem;font-weight:600;letter-spacing:.28em;
  text-transform:uppercase;color:var(--sand);
  display:inline-flex;align-items:center;gap:.6rem;
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--sand);opacity:.6}
.grad-text{
  background:var(--grad-warm);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
blockquote{
  border-left:3px solid var(--sand);
  padding:.4rem 0 .4rem 1.4rem;margin:1.6rem 0;
  font-family:"Bricolage Grotesque",sans-serif;font-size:1.2rem;color:var(--ink);
}
code,pre{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em}
pre{background:var(--navy);color:var(--bone);padding:1.2rem;border-radius:12px;overflow:auto;margin:1.4rem 0}
code{background:var(--white);padding:.12em .4em;border-radius:5px}
pre code{background:none;padding:0}

/*--------------------------------------------------------------
# Utilidades WordPress (accesibilidad, alineaciones)
--------------------------------------------------------------*/
.screen-reader-text{
  border:0;clip:rect(1px,1px,1px,1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);
  height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute!important;width:1px;
  word-wrap:normal!important;
}
.screen-reader-text:focus{
  background-color:var(--bone);border-radius:3px;box-shadow:0 0 2px 2px rgba(0,0,0,.6);
  clip:auto!important;-webkit-clip-path:none;clip-path:none;color:var(--navy);
  display:block;font-size:.875rem;font-weight:700;height:auto;left:5px;line-height:normal;
  padding:15px 23px 14px;text-decoration:none;top:5px;width:auto;z-index:100000;
}
.skip-link{position:absolute;left:-9999px;top:0;z-index:100000}
.alignleft{float:left;margin-right:1.5em;margin-bottom:1em}
.alignright{float:right;margin-left:1.5em;margin-bottom:1em}
.aligncenter{clear:both;display:block;margin-left:auto;margin-right:auto;margin-bottom:1em}
.alignwide{margin-left:-40px;margin-right:-40px}
.alignfull{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);max-width:100vw}
.wp-caption{max-width:100%;margin-bottom:1.5em}
.wp-caption img[class*="wp-image-"]{display:block;margin-left:auto;margin-right:auto}
.wp-caption .wp-caption-text{font-size:.85rem;color:var(--muted);padding:.6em 0;text-align:center}
.wp-caption-text{text-align:center}
.gallery{display:flex;flex-wrap:wrap;gap:1rem;margin:1.4rem 0}
.gallery-item{flex:1 1 auto}
.gallery-caption{font-size:.85rem;color:var(--muted)}
.sticky{display:block}
.bypostauthor{display:block}
.clear::before,.clear::after,.entry-content::before,.entry-content::after,
.comment-content::before,.comment-content::after,.site-header::before,.site-header::after,
.site-content::before,.site-content::after,.site-footer::before,.site-footer::after{
  content:"";display:table;table-layout:fixed;
}
.clear::after,.entry-content::after,.comment-content::after,.site-header::after,
.site-content::after,.site-footer::after{clear:both}

/*--------------------------------------------------------------
# Header / Navegación
--------------------------------------------------------------*/
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:50;
  transition:background .4s var(--ease),border-color .4s var(--ease),backdrop-filter .4s;
  border-bottom:1px solid transparent;
}
.site-header.scrolled{
  background:rgba(43,49,95,.85);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-d);
}
/* En páginas internas (blog, single, page) el header no es transparente sobre el hero navy */
body:not(.tulu-front) .site-header{
  position:sticky;background:var(--navy);border-bottom:1px solid var(--line-d);
}
.site-header .wrap{position:relative}
.main-nav{display:flex;align-items:center;justify-content:space-between;gap:1.4rem;height:76px}
.site-branding{display:flex;align-items:center;gap:.8rem;flex:none}
.brand,.custom-logo-link{display:inline-flex;align-items:center}
.brand .logo,.custom-logo{height:30px;width:auto;display:block}
.site-title{
  font-family:"Bricolage Grotesque",sans-serif;font-weight:800;
  font-size:1.5rem;letter-spacing:-.04em;line-height:1;margin:0;
}
.site-title a{color:var(--bone)}
.site-description{color:var(--muted-d);font-size:.8rem;margin:0}
.nav-links{display:flex;gap:2.4rem;align-items:center;list-style:none;margin:0;padding:0}
.nav-links li{position:relative}
.nav-links a{font-size:.9rem;color:var(--muted-d)}
.nav-links a:hover{color:var(--bone)}
.nav-links .current-menu-item > a,.nav-links .current_page_item > a{color:var(--bone)}
/* Submenús */
.nav-links ul{
  list-style:none;margin:0;padding:.6rem 0;position:absolute;top:100%;left:0;min-width:200px;
  background:var(--navy);border:1px solid var(--line-d);border-radius:12px;
  opacity:0;visibility:hidden;transform:translateY(8px);transition:.25s var(--ease);z-index:60;
}
.nav-links li:hover > ul{opacity:1;visibility:visible;transform:none}
.nav-links ul a{display:block;padding:.5rem 1.1rem}
.nav-cta{display:flex;align-items:center;gap:1rem;flex:none}
.menu-toggle{
  display:none;background:none;border:1px solid var(--line-d);color:var(--bone);
  border-radius:10px;padding:.45rem .7rem;font-size:1.1rem;cursor:pointer;line-height:1;
}

/*--------------------------------------------------------------
# Botones
--------------------------------------------------------------*/
.btn{
  display:inline-flex;align-items:center;gap:.5rem;
  font-weight:600;font-size:.9rem;border-radius:100px;
  padding:.72rem 1.4rem;transition:transform .25s var(--ease),box-shadow .3s,border-color .25s,color .25s;
  cursor:pointer;border:none;line-height:1;
}
.btn-primary{background:var(--blue);color:#fff;box-shadow:0 6px 24px rgba(63,93,187,.35)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 34px rgba(63,93,187,.5);color:#fff}
.btn-ghost{background:transparent;color:var(--bone);border:1px solid var(--line-d)}
.btn-ghost:hover{border-color:var(--lav);color:var(--lav)}

/*--------------------------------------------------------------
# Layout de contenido (blog / páginas / single)
--------------------------------------------------------------*/
.site-content-area{
  width:min(1180px,92vw);margin:0 auto;padding:56px 0 90px;
  display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:3.4rem;align-items:start;
}
.no-sidebar .site-content-area,
body:not(.tulu-front) .site-content-area:has(> .site-main:only-child){grid-template-columns:minmax(0,1fr)}
.site-main{min-width:0}
article.post,article.page,article.hentry,.page-header,.no-results{
  background:var(--white);border:1px solid var(--line);border-radius:20px;
  padding:2.4rem;margin-bottom:2rem;box-shadow:0 8px 26px rgba(70,52,28,.07);
}
.entry-header{margin-bottom:1.4rem}
.entry-title{font-size:clamp(1.7rem,3.4vw,2.6rem)}
.entry-title a{color:var(--ink)}
.entry-title a:hover{color:var(--sand)}
.page-title{font-size:clamp(1.8rem,4vw,2.8rem)}
.entry-meta{margin-top:.8rem;font-size:.82rem;color:var(--muted);display:flex;flex-wrap:wrap;gap:.4rem 1.1rem}
.entry-meta a{color:var(--sand)}
.entry-meta .byline,.entry-meta .posted-on,.entry-meta .cat-links,.entry-meta .comments-link{display:inline-flex;gap:.35rem}
.entry-content,.entry-summary{font-size:1rem}
.entry-content > *{margin-bottom:1.1rem}
.entry-content h2{font-size:1.7rem;margin:2rem 0 .8rem}
.entry-content h3{font-size:1.35rem;margin:1.6rem 0 .7rem}
.entry-content ul,.entry-content ol{padding-left:1.4rem;margin-bottom:1.1rem}
.entry-content li{margin-bottom:.4rem}
.entry-content a{text-decoration:underline;text-underline-offset:2px}
.post-thumbnail{display:block;margin:-2.4rem -2.4rem 1.8rem;border-radius:20px 20px 0 0;overflow:hidden}
.post-thumbnail img{width:100%;object-fit:cover}
.entry-footer{margin-top:1.6rem;padding-top:1.2rem;border-top:1px solid var(--line);font-size:.82rem;color:var(--muted);display:flex;flex-wrap:wrap;gap:.6rem 1.2rem}
.entry-footer a{color:var(--sand)}
.tags-links a{display:inline-block;border:1px solid var(--line);border-radius:100px;padding:.2rem .7rem;margin:.15rem .2rem 0;font-size:.78rem}
.more-link{display:inline-block;margin-top:.6rem;font-weight:600}
.cat-links a,.tags-links a{text-decoration:none}
.page-links{margin-top:1.4rem;font-weight:600}
.page-links a{border:1px solid var(--line);padding:.2rem .6rem;border-radius:8px;margin:0 .2rem}

/*--------------------------------------------------------------
# Paginación y navegación de posts
--------------------------------------------------------------*/
.navigation.pagination,.posts-navigation,.post-navigation{margin:1rem 0 2rem}
.nav-links{display:flex}
.pagination .nav-links{gap:.4rem;flex-wrap:wrap}
.page-numbers{
  display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:42px;
  padding:0 .7rem;border:1px solid var(--line);border-radius:10px;background:var(--white);
  color:var(--ink);font-weight:600;font-size:.9rem;
}
.page-numbers.current{background:var(--blue);color:#fff;border-color:var(--blue)}
.page-numbers:hover:not(.current){border-color:var(--sand);color:var(--sand)}
.posts-navigation .nav-links,.post-navigation .nav-links{
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
}
.posts-navigation a,.post-navigation a{
  display:inline-block;background:var(--white);border:1px solid var(--line);border-radius:12px;
  padding:.9rem 1.3rem;font-weight:600;box-shadow:0 8px 26px rgba(70,52,28,.06);
}
.posts-navigation a:hover,.post-navigation a:hover{border-color:var(--sand)}
.nav-subtitle{display:block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/*--------------------------------------------------------------
# Comentarios
--------------------------------------------------------------*/
.comments-area{
  background:var(--white);border:1px solid var(--line);border-radius:20px;
  padding:2.4rem;box-shadow:0 8px 26px rgba(70,52,28,.07);
}
.comments-title,.comment-reply-title{font-size:1.5rem;margin-bottom:1.4rem}
.comment-list{list-style:none;margin:0;padding:0}
.comment-list ol.children{list-style:none;margin-left:1.6rem;padding:0}
.comment-body{padding:1.2rem 0;border-bottom:1px solid var(--line)}
.comment-author{display:flex;align-items:center;gap:.7rem;font-weight:600}
.comment-author .avatar{border-radius:50%}
.comment-metadata{font-size:.78rem;color:var(--muted)}
.comment-metadata a{color:var(--muted)}
.reply a{font-size:.82rem;font-weight:600}
.comment-form{display:flex;flex-direction:column;gap:1rem;margin-top:1.4rem}
.comment-form label{font-size:.82rem;font-weight:600;display:block;margin-bottom:.3rem}
input[type=text],input[type=email],input[type=url],input[type=password],input[type=search],
input[type=number],input[type=tel],textarea,select{
  width:100%;background:var(--bone);border:1px solid var(--line);border-radius:10px;
  padding:.75rem .9rem;font:inherit;color:var(--ink);
}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--sand);box-shadow:0 0 0 3px rgba(63,93,187,.15)}
.comment-form input[type=submit],.wp-block-button__link,button[type=submit],input[type=submit]{
  align-self:flex-start;background:var(--blue);color:#fff;border:none;border-radius:100px;
  padding:.75rem 1.6rem;font-weight:600;cursor:pointer;box-shadow:0 6px 24px rgba(63,93,187,.35);
}

/*--------------------------------------------------------------
# Widgets / Sidebar
--------------------------------------------------------------*/
.widget-area .widget,.widget{
  background:var(--white);border:1px solid var(--line);border-radius:16px;
  padding:1.5rem;margin-bottom:1.4rem;box-shadow:0 8px 26px rgba(70,52,28,.06);
}
.widget-title{font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--sand);
  margin-bottom:1rem;font-family:"Inter",sans-serif;font-weight:700}
.widget ul{list-style:none;margin:0;padding:0}
.widget ul li{padding:.4rem 0;border-bottom:1px solid var(--line);font-size:.92rem}
.widget ul li:last-child{border-bottom:none}
.widget a{color:var(--ink)}
.widget a:hover{color:var(--sand)}
.widget_search .search-form{display:flex;gap:.5rem}
.widget_search .search-submit{flex:none}

/* Search form genérico */
.search-form{display:flex;gap:.5rem;flex-wrap:wrap}
.search-form .search-submit{flex:none;background:var(--blue);color:#fff;border:none;border-radius:100px;padding:.7rem 1.3rem;font-weight:600;cursor:pointer}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
.site-footer{background:var(--ink-2);border-top:1px solid var(--line-d);padding:70px 0 40px;color:var(--muted-d)}
.foot-top{display:flex;justify-content:space-between;gap:3rem;flex-wrap:wrap}
.foot-brand{max-width:34ch}
.foot-brand .brand{display:inline-flex;margin-bottom:1rem}
.foot-brand .brand .logo{height:42px}
.foot-brand p{color:var(--muted-d);font-size:.92rem}
.foot-cols{display:flex;gap:5rem;flex-wrap:wrap}
.foot-col h4{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--lav);margin-bottom:1.1rem;font-family:"Inter",sans-serif;font-weight:600}
.foot-col a{display:block;color:var(--muted-d);font-size:.92rem;margin-bottom:.7rem}
.foot-col a:hover{color:var(--bone)}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;
  gap:1rem;margin-top:3.4rem;padding-top:1.6rem;border-top:1px solid var(--line-d);
  color:var(--muted-d);font-size:.82rem}
.site-info a{color:var(--lav)}

/*--------------------------------------------------------------
# Responsive
--------------------------------------------------------------*/
@media(max-width:820px){
  .nav-links{
    display:none;position:absolute;top:76px;left:0;right:0;flex-direction:column;gap:0;
    background:var(--navy);border-top:1px solid var(--line-d);padding:.6rem 0;
  }
  .nav-links.toggled{display:flex}
  .nav-links li{width:100%}
  .nav-links a{display:block;padding:.85rem 6vw}
  .nav-links ul{position:static;opacity:1;visibility:visible;transform:none;border:none;background:transparent;padding:0 0 0 1rem}
  .menu-toggle{display:block}
  .nav-cta .btn{display:none}
  .site-content-area{grid-template-columns:1fr;padding:40px 0 70px}
  article.post,article.page,.comments-area{padding:1.6rem}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;scroll-behavior:auto}
}