/* ==========================================================================
   kinolab07.co — hoja de estilo
   Reconstrucción limpia del tema Cele (Compete Themes) usado en WordPress.
   Los valores (colores, tamaños, breakpoints) son los del sitio original.
   ========================================================================== */

/* --- tokens ------------------------------------------------------------- */
:root {
  --color-text:       #333333;
  --color-text-soft:  #666666;
  --color-page-bg:    #f0f0f0;
  --color-main-bg:    #fafafa;
  --color-sidebar-bg: #ffffff;
  --color-rule:       #e6e6e6;
  --color-accent:     #a5d3ed;
  --color-muted:      #b3b3b3;

  --font: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
          Helvetica, Arial, sans-serif;

  --sidebar-width: 30.5558%;
  --max-width: 1340px;
}

/* --- reset -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { height: 100%; }

body {
  height: 100%;
  font-size: 100%;
  margin: 0;
  padding: 0;
  font-family: var(--font);
  line-height: 1.5;
  font-weight: 300;
  background: var(--color-page-bg);
  color: var(--color-text);
  -webkit-font-smoothing: subpixel-antialiased;
  word-wrap: break-word;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font);
  margin: 0;
  padding: 0;
  font-weight: 300;
}
h1 { font-size: 1.3125em; line-height: 1.143; }   /* 21px */
h2 { font-size: 1.125em;  line-height: 1.333; }   /* 18px */
h3, h4, h5, h6 { font-size: 1em; line-height: 1.5; }

p  { margin: 1.5em 0; }
hr { margin: 1.5em 0; border: none; border-top: 2px solid var(--color-rule); }
hr.wide { border-top-width: 2px; }
ul, ol { font-size: 1em; padding: 0; margin: 1.5em; }
ul ul, ul ol, ol ul, ol ol { margin: 0 1.5em; }
blockquote {
  margin: 1.5em 1.5em 1.5em 0;
  padding-left: 1.5em;
  border-left: solid 3px var(--color-rule);
}
img { max-width: 100%; height: auto; }
figure img { vertical-align: bottom; }
figure { margin: 0; }

/* --- enlaces ------------------------------------------------------------ */
a {
  text-decoration: none;
  border-bottom: solid 1px var(--color-accent);
  color: var(--color-text);
  transition: border-color 0.2s;
}
a:visited { border-color: var(--color-rule); color: var(--color-text); }
a:hover, a:active, a:focus { border-color: var(--color-text); color: var(--color-text); }
a img { border: none; }

/* subrayado que crece al pasar el ratón */
.post-content a, .menu-primary a, .site-footer a, .widget a { position: relative; }
.post-content a::after,
.menu-primary a::after,
.site-footer a::after,
.widget a::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 100%;
  height: 1px;
  background: var(--color-text);
  transition: right 0.2s ease-in-out;
}
.menu-primary a::after { background: var(--color-accent); }
.post-content a:hover, .post-content a:focus,
.menu-primary a:hover, .menu-primary a:focus,
.site-footer a:hover, .site-footer a:focus,
.widget a:hover, .widget a:focus {
  border-color: var(--color-accent);
  outline: none;
}
.post-content a:hover::after, .post-content a:focus::after,
.menu-primary a:hover::after, .menu-primary a:focus::after,
.site-footer a:hover::after, .site-footer a:focus::after,
.widget a:hover::after, .widget a:focus::after { right: 0; }
.post-content a[href$=".jpg"]::after,
.post-content a[href$=".jpeg"]::after,
.post-content a[href$=".png"]::after,
.post-content a[href$=".gif"]::after { display: none; }
.post-content figure a, .post-content figure a:visited { border: none; }
.post-content figure a::after { display: none; }

/* --- accesibilidad ------------------------------------------------------ */
.screen-reader-text {
  position: absolute;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  overflow: hidden;
  height: 1px;
  width: 1px;
}
.skip-content {
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  display: block;
  text-align: center;
  color: #fff !important;
  z-index: 99;
  padding: 1.5em;
  background: var(--color-text);
  border: none;
  transition: top 0.2s ease-in-out;
}
.skip-content:focus { top: 0; outline: none; }

/* --- armazón ------------------------------------------------------------ */
.overflow-container { position: relative; overflow: hidden; height: auto; min-height: 100%; }
.max-width { position: relative; max-width: var(--max-width); margin: 0 auto; }

.main-sidebar {
  transform: translate3d(0, 0, 0);
  background: var(--color-sidebar-bg);
  padding: 0 8.3334%;
}
.main-sidebar::after { content: ""; display: block; clear: both; }

.main {
  background: var(--color-main-bg);
  margin: 0 auto;
  padding: 1.875em 8.3334%;
  min-height: 100vh;
}

.site-footer {
  position: relative;
  z-index: 19;
  clear: both;
  padding: 0.75em 8.3334%;
}
.site-footer span { font-size: 0.75em; line-height: 1.5; }
.site-footer::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-page-bg);
  z-index: -1;
}

/* --- cabecera del sidebar ----------------------------------------------- */
.sidebar-inner { padding: 2.25em 0; }
.title-container { float: left; }
.site-title { font-size: 1.3125em; line-height: 1.143; }
.site-title a, .site-title a:visited {
  border: none;
  color: var(--color-text);
  transition: color 0.1s ease-in-out;
}
.site-title a:hover, .site-title a:focus { color: var(--color-text-soft); }
.tagline { color: var(--color-text-soft); margin: 0; font-size: 0.75em; line-height: 1.5; }

.toggle-navigation {
  position: relative;
  float: right;
  background: none;
  margin: 0;
  padding: 0;
  border: none;
  color: inherit;
}
.toggle-navigation::after {
  content: "";
  position: absolute;
  top: -7px;
  left: -8px;
  width: 40px;
  height: 32px;
  border: solid 1px var(--color-accent);
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}
.toggle-navigation:hover { cursor: pointer; }
.toggle-navigation:focus, .toggle-navigation.open { outline: none; }
.toggle-navigation:focus::after, .toggle-navigation.open::after { opacity: 1; }

/* --- menú --------------------------------------------------------------- */
.menu-primary-container { max-height: 0; overflow: hidden; clear: both; }
.menu-primary-container.open { max-height: 9999px; }

.menu-primary-items {
  list-style: none;
  margin: 1.875em 0;
  padding: 0;
}
.menu-primary-items ul { list-style: none; }
.menu-primary a {
  border: none;
  display: inline-block;
  margin-bottom: 1em;
  clear: both;
  font-size: 0.75em;   /* 12px */
  line-height: 1.5;
}
.menu-primary a:focus { outline: none; }
.menu-primary-items > li:last-child > a { margin-bottom: 0; }
.menu-primary-items > li:first-child > a { margin-top: 0; }
.current-menu-item > a { font-weight: 600; }

.menu-item-has-children { position: relative; }
.menu-item-has-children > a { max-width: calc(100% - 36px); }
.menu-item-has-children ul {
  max-height: 0;
  overflow: hidden;
  margin: 0;
  padding: 0 0 0 0.75em;
  border-left: solid 1px var(--color-page-bg);
  transition: max-height 0.2s ease-in-out;
}
.menu-item-has-children ul li { opacity: 0; transition: all 0.2s ease-in-out; }
.menu-item-has-children ul li:first-child { margin-top: 0.75em; }
.menu-item-has-children.open > .toggle-dropdown { transform: rotate(180deg); }
.menu-item-has-children.open > ul { max-height: 999px; }
.menu-item-has-children.open > ul > li { opacity: 1; }
.menu-item-has-children.open > ul > li:first-child { margin-top: 0; }

.toggle-dropdown {
  height: 1.5em;
  width: 1.5em;
  margin: 0 0 0 8px;
  padding: 0;
  font-size: 1em;
  line-height: 1;
  background: none;
  color: #999999;
  border: solid 1px var(--color-rule);
  transition: border-color 0.1s ease-in-out, transform 0.2s ease-in-out;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.toggle-dropdown:hover { cursor: pointer; }
.toggle-dropdown:hover, .toggle-dropdown:focus { outline: none; border-color: var(--color-accent); }
.toggle-dropdown svg { width: 9px; height: 6px; fill: currentColor; }

/* --- widgets del sidebar ------------------------------------------------ */
.sidebar-primary-container { max-height: 0; overflow: hidden; }
.sidebar-primary-container.open { max-height: none; }
.sidebar-primary { margin-top: 0.75em; padding-bottom: 0.75em; }
.widget { color: var(--color-text-soft); margin-bottom: 2.25em; }
.widget:first-child { margin-top: 0; }
.widget > * { font-size: 0.875em; line-height: 1.714; }

/* selector de idioma */
.lang-switch { display: flex; gap: 0.5em; align-items: center; font-size: 0.75em; letter-spacing: 0.08em; }
.lang-switch a, .lang-switch span { border: none; padding: 0; }
.lang-switch a::after { display: none; }
.lang-switch .is-current { font-weight: 600; color: var(--color-text); }
.lang-switch a:not(.is-current) { color: var(--color-muted); }
.lang-switch a:not(.is-current):hover { color: var(--color-text); }
.lang-switch .sep { color: var(--color-rule); }

/* botón "Ir a Lenguajeo" (copiado del bloque original) */
.btn-lenguajeo {
  position: relative;
  display: inline-block;
  padding: 14px 28px;
  font-size: 16px;
  font-weight: bold;
  color: #000;
  background-color: #fff;
  text-decoration: none;
  border-radius: 0;
  border: 2px solid #000;
  overflow: hidden;
  z-index: 1;
  cursor: pointer;
  transition: color 0.5s linear;
}
.btn-lenguajeo::after { display: none; }
.btn-lenguajeo::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background-color: #000;
  transition: width 1s linear;
  z-index: -1;
}
.btn-lenguajeo:hover { color: #fff; border-color: #000; }
.btn-lenguajeo:hover::before { width: 100%; }

/* --- contenido ---------------------------------------------------------- */
.post-header { margin-bottom: 1.5em; }
.post-title { font-size: 1.3125em; line-height: 1.143; }
.post-content { margin-top: 1.5em; }
.post-content::after { content: ""; display: block; clear: both; }
.post-content iframe { max-width: 100%; }

figcaption,
.wp-caption-text {
  font-size: 0.75em;   /* 12px */
  line-height: 1.5;
  margin: 3px 0 0 0;
  color: var(--color-text);
  text-align: center;
}

/* alineaciones y tamaños heredados del editor de bloques */
.align-center { text-align: center; margin: 1.5em auto; display: block; }
/* WordPress anula el margen vertical de las figure (.wp-block-image figure{margin:0}) */
figure.align-center { margin: 0; }
.align-left   { float: left;  margin: 0 1.5em 1.5em 0; }
.align-right  { float: right; margin: 0 0 1.5em 1.5em; }
.align-none   { margin: 1.5em 0; }
.center { text-align: center; }
.left   { text-align: left; }
.right  { text-align: right; }
.fs-small   { font-size: 12px; }
.fs-regular { font-size: 16px; }
.fs-medium  { font-size: 20px; }
.fs-large   { font-size: 21px; }
.fs-larger  { font-size: 28px; }

.spacer {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 1em;
}
.spacer > div { width: 100%; }

/* columnas (equivalente a wp-block-columns) */
.cols {
  display: flex;
  flex-wrap: nowrap;
  align-items: normal;
  gap: 2em;
  margin-bottom: 1.75em;
}
.cols > .col {
  flex: 1 1 0;
  min-width: 0;
  overflow-wrap: break-word;
  word-break: break-word;
  margin: 0;
}
.cols > .col[style*="flex-basis"] { flex-grow: 0; }
.cols > .col.v-center { align-self: center; }
.cols > .col.v-top    { align-self: flex-start; }

/* vídeo responsivo (Vimeo) */
.video {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  margin: 1.5em 0;
}
.video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* aviso de página pendiente de contenido */
.pending-notice {
  border: 1px dashed var(--color-muted);
  padding: 1.5em;
  color: var(--color-text-soft);
  font-size: 0.875em;
  line-height: 1.714;
}
.pending-notice p:first-child { margin-top: 0; }
.pending-notice p:last-child  { margin-bottom: 0; }

/* ==========================================================================
   Responsive — mismos cortes que el tema original
   ========================================================================== */

@media all and (min-width: 37.5em) {           /* 600px */
  body { padding: 0.75em; }
}

@media all and (min-width: 43.75em) and (max-width: 56.1875em) {
  .sidebar-primary .widget { width: 46%; float: left; clear: left; }
  .sidebar-primary .widget:nth-child(even) { float: right; clear: none; }
  .sidebar-primary::after { content: ""; display: block; clear: both; }
}

@media all and (min-width: 50em) {             /* 800px */
  body { padding: 1.5em; }
  h1 { font-size: 1.75em;   line-height: 1.357; }
  h2 { font-size: 1.3125em; line-height: 1.143; }
  h3 { font-size: 1.125em;  line-height: 1.333; }
  .site-title { font-size: 1.3125em; line-height: 1.143; }
  .post-title { font-size: 1.75em;   line-height: 1.357; }
}

@media all and (min-width: 56.25em) {          /* 900px — aparece el sidebar */
  body { padding: 0; }

  .main {
    float: right;
    width: 69.445%;
    margin-left: var(--sidebar-width);
  }

  .main-sidebar {
    transform: translateZ(0);
    position: absolute;
    z-index: 9;
    top: 0;
    left: 0;
    min-height: calc(100% - 48px);
    width: var(--sidebar-width);
    padding: 0 2.7778%;
  }

  .sidebar-inner { padding: 2.25em 0; }
  .sidebar-primary-container { max-height: none; overflow: visible; }
  .menu-primary-container { max-height: none; }
  .toggle-navigation { display: none; }
  .toggle-dropdown { height: 1.125em; width: 1.125em; }

  .site-footer { padding-left: 38.8892%; }
  .site-footer::after { right: 12px; left: 12px; }
  .site-footer span { margin-left: -12px; }
}

@media all and (min-width: 62.5em) {           /* 1000px */
  .main { margin: 0.75em 0.75em 0 0; }
  .main-sidebar {
    min-height: calc(100% - 36px);
    margin: 0.75em 0 0 0.75em;
    width: calc(30.5558% - 24px);
  }
  .site-title { font-size: 1.75em; line-height: 1.357; }
}

@media all and (min-width: 68.75em) {          /* 1100px */
  .main { margin: 1.5em 1.5em 0 0; padding: 3em 8.3334%; }
  .main-sidebar {
    min-height: calc(100% - 48px);
    margin: 1.5em 0 0 1.5em;
    width: calc(30.5558% - 48px);
    padding: 0 4.1667%;
  }
  .sidebar-inner { padding: 3em 0; }
  .sidebar-primary { margin-top: 1.5em; }
  .post-header { margin-bottom: 3em; }
  .post-content { margin-top: 2.25em; }
  .widget { margin-bottom: 3em; }
  .site-footer::after { right: 24px; left: 24px; }
  .site-footer span { margin-left: -24px; }
}

@media all and (min-width: 1340px) {
  .main-sidebar { width: 361px; padding: 0 56px; }
}

/* columnas en una sola línea solo a partir de 782px, como el editor */
@media (max-width: 781px) {
  .cols { flex-wrap: wrap; }
  .cols > .col { flex-basis: 100% !important; }
}