/*
Theme Name: Psikonor
Theme URI: https://example.com/psikonor
Author: Aina
Description: Tema corporativo (v7) con Bootstrap 5, menú responsive hamburguesa, hero 800px, parallax con tarjetas, blog 3x2, reseñas y formulario. Paleta: verde #466D08 (hover #5A8C0A) y marrón oscuro.
Version: 1.3.0
License: GPL-2.0-or-later
Text Domain: psikonor
*/

:root{
  --esmeralda:#466D08;         /* verde principal */
  --esmeralda-hover:#5A8C0A;   /* verde hover/focus */
  --marron:#4b2e1a;            /* base oscura */
  --marron-osc:#2f1c10;
  --gris:#f7f7f7;
  --texto:#222;
  --ancho-max:1200px;
  --padding-x:100px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;color:var(--texto);background:#fff;line-height:1.5}

.container-psk{width:90%!important;margin:0 auto;padding:0 var(--padding-x)}
#container-2 {width:100%!important;margin-top:-10px!important;margin-top:-10px;z-index:1;}
a{color:var(--esmeralda);text-decoration:none;}
a:hover{color:var(--esmeralda-hover)}

#contactform {width:100%;}

/* Topbar */
.topbar{background:var(--esmeralda);color:#fff;min-height:64px;align-items:right;vertical-align:middle;padding:20px;padding-right:10%;}
.topbar .item{display:flex;gap:.5rem;align-items:right;font-size:.95rem;opacity:.95}
.topbar a{color:#fff;text-decoration:none;}


li {list-style:none!important;}

.li {list-style:none!important;}


  :root{
    /* Ajusta aquí los anchos */
    --col-1: 20%;
    --col-2: 80%;
    --gap: 4px;
  }

.two-cols{
  display: grid;
  grid-template-columns: 20% 1fr;
  gap: 14px;
  align-items: start;
}

@media (max-width: 768px){
  .two-cols{
    grid-template-columns: 1fr; /* apila columnas */
  }
}


  .col{
    padding: 5px;
    border: 0px solid #ddd;
    border-radius: 0px;
  }

/* Botones */
.btn{display:inline-block;padding:.65rem 1.1rem;border-radius:.5rem;border:1px solid transparent;cursor:pointer;text-decoration:none}
.btn-primary{background:var(--marron-osc)!important;border-color:var(--marron-osc)!important;color:#fff!important;align:center;}
.btn-primary:hover{background:var(--esmeralda-hover)!important;border-color:var(--esmeralda-hover)!important;color:#fff!important}
.btn-outline{background:transparent;border-color:var(--esmeralda);color:var(--esmeralda)}
.btn-outline:hover{background:var(--esmeralda);color:#fff}

/* Navbar (Bootstrap) */
.site-header{position:sticky;top:0;z-index:1030;background:none;box-shadow:0 0 0 rgba(0,0,0,0);transition:box-shadow .2s;}
.site-header.stuck{box-shadow:0 8px 24px rgba(0,0,0,.06)}
.navbar-brand{color:var(--esmeralda);text-transform:uppercase;}
.navbar-toggler{border-color: rgba(0,0,0,.15)}
.navbar-toggler:focus{box-shadow:0 0 0 .15rem rgba(90,140,10,.25)} /* basado en #5A8C0A */
.navbar-light .navbar-nav .nav-link{color:var(--esmeralda);text-transform: uppercase !important;font-weight:bold;}
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus,
.navbar-light .navbar-nav .nav-link.active{color:var(--marron);background-color:#E3E8DA;}

.navbar-nav .nav-item{margin-left:1rem}
.navbar-brand img{display:block}
@media (max-width:991.98px){
  .navbar-nav .nav-item{margin-left:0}
}

.nav-link {
    display: block;
    padding: 10px!important;
    font-size: 16px!important;
    font-weight: var(--bs-nav-link-font-weight);
    color: #476D08;
    text-decoration: uppercase!important;
    background: 0 0;
    border: 0;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
	list-style:none!important;
}


.nav-link a{
    display: block;
    padding: 10px!important;
    font-size: 16px!important;
    font-weight: var(--bs-nav-link-font-weight);
    color: #476D08!important;
    text-decoration: uppercase!important;
    background: 0 0;
    border: 0;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
	list-style:none!important;
}

.nav-link a:hover {
    display: block;
    padding: 10px!important;
    font-size: 16px!important;
    font-weight: var(--bs-nav-link-font-weight);
    color: var(--bs-nav-link-color)!important;
    text-decoration: uppercase!important;
    background: 0 0;
    border: 0;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
	list-style:none!important;
}


h1 li {list-style:none!important;}



wp-block-heading {font-size:30px;font-weight:bold;}
/* Hero */
.hero{height:450px!important;background: url('assets/img/hero.jpg') center/cover fixed no-repeat;position:relative;}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.1),rgba(0,0,0,.25))}

/* Recuadro solapado */
.info-band{position:relative;margin-top:-100px;margin-bottom:60px}
.info-box{background:#fff;border-radius:14px;box-shadow:0 12px 30px rgba(0,0,0,.12);padding:28px}
.info-grid{display:grid;grid-template-columns:1fr 1.2fr 1fr;gap:24px}
.info-col h4{margin:0 0 .35rem 0;color:var(--esmeralda)}
.info-col p{margin:.25rem 0}
.info-col .muted{opacity:.8}


h6 {font-size:30px;font-weight:bold;text-decoration:none!important;}
h6,
.entry-content h6,
.wp-block-heading h6 {text-decoration:none;}

h2 (font-size:20px!important;)
h1 (font-size:30px;font-weight:bold;)

/* Secciones */
.section{padding:60px 0}
.section h2{margin:0 0 18px 0;color:var(--esmeralda);font-size: 30px;}
.section h3{color:var(--esmeralda);font-size:24px;}

/* Texto 2 columnas */
.cols{display:grid;grid-template-columns:160px 1fr;gap:5px;margin-left:0px;}

/* Avatar circular superpuesto */
.about-block{position:relative;vertical-align:center;padding-bottom:50px;}
.profile-badge{ width:150px; height:auto; border-radius:50%; overflow:hidden; border:4px solid #fff; box-shadow:0 10px 24px rgba(0,0,0,.15); z-index:2;margin-top:20%;}

.profile-badge img{margin-top:0%;width:auto; height:180px;border-radius:50%; border:4px solid #fff; box-shadow:0 10px 24px rgba(0,0,0,.15); z-index:2}
.about-block .cols{padding-top:40px}
@media (min-width:992px){
  .about-block .cols{padding-left:180px} /* evita solape con el avatar en desktop */
}

.roundimg {border-radius:10px;}

.titlemod {font-size:22px;color:var(--esmeralda);background-color:none;font-weight:bold;padding:10px;text-decoration:none;margin-top:20px!important;}

/* Parallax */
.parallax{min-height:500px;background:url('assets/img/parallax.jpg') center/cover fixed no-repeat;position:relative; padding-top:4%; padding-bottom: 4%;}
.parallax .overlay-cards{align-items: start; height: auto;align-self:start;position:relative; display:grid;grid-template-columns:1fr 1fr;gap:24px; margin-top:30px}
.card-psk{background:#fff;opacity:0.95;border-radius:14px;box-shadow:0 10px 28px rgba(0,0,0,.12);padding:24px}

/* Posts 3x2 */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding-top:35px;}
.post-card{background:#fff;border:1px solid #eee;border-radius:10px;overflow:hidden;display:flex;flex-direction:column}
.post-card img{width:100%;height:180px;object-fit:cover}
.post-card .content{padding:16px;display:flex;flex-direction:column;gap:8px}
.post-card .meta{font-size:12px;opacity:.7}
.post-card .readmore{margin-top:auto}

/* Reseñas */
.testimonials{position:relative;background:url('assets/img/clinica.jpg') center/cover no-repeat}
.testimonials .glass{background:rgba(255,255,255,.85);backdrop-filter:saturate(1.2) blur(2px);padding:28px;border-radius:14px}

/* Dónde estamos */
.contact-details .row{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.map-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.map-grid img{width:100%;height:260px;object-fit:cover;border-radius:10px}

/* Formulario */
.form{}
.form .row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
input,textarea{width:100%;padding:12px;border:1px solid #466D08d;border-radius:8px}











element.style {
}
[type=button]:not(:disabled), [type=reset]:not(:disabled), [type=submit]:not(:disabled), button:not(:disabled) {
    cursor: pointer;
}
.wpcf7-form-control {
    width: 50%;
    padding: 10px 20px 10px 20px;
    align-content: center!important;
}

label {width:100%;}

.wpcf7-form-control-wrap {width:100%;}


[type=button], [type=reset], [type=submit], button {
    -webkit-appearance: button;
}

input wpcf7-form-control wpcf7-submit has-spinner {padding-left:55px;}
input {
    width: auto!important;
    padding: 30px;
    border: 1px solid #466D08;
	background-color: #fff;
	color: #466D08;
    border-radius: 8px;
	margin-left:0px;
	
}

label{font-weight:600;}
.checkbox{display:flex;gap:5px;align-items:flex-start}
.captcha{border:1px dashed #aaa;border-radius:8px;padding:12px;text-align:center;opacity:.8;padding-left:-20px;width:80%;}

.wpcf7-list-item-label {width:100%;}

input [type="checkbox"] {padding:0px!important;width:50%;}

.rc-anchor-alert {margin-left:-20px;}


/* Separador + Footer */
.separator{height:4px;background:var(--esmeralda);margin:40px 0 20px}
.site-footer{background:#fff;padding:20px 0}
.footer-line{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.footer-line .links a{margin-left:16px;text-decoration:none;color:var(--texto)}
.bottombar{background:var(--marron);color:#fff;padding:14px 0}
.bottombar-inner{display:flex;justify-content:space-between;align-items:center}

/* To top */
.to-top{position:fixed;right:18px;bottom:18px;border:none;border-radius:50%;width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:var(--marron);color:#fff;cursor:pointer;box-shadow:0 8px 18px rgba(0,0,0,.2)}

/* Responsive */
@media (max-width:1100px){
  :root{--padding-x:24px}
  .info-grid{grid-template-columns:1fr}
  .cols{grid-template-columns:1fr}
  .parallax .overlay-cards{grid-template-columns:1fr; margin-top:0}
  .posts{grid-template-columns:1fr 1fr}
  .form .row-3{grid-template-columns:1fr}
}
@media (max-width:640px){
  .topbar .item{font-size:.85rem}
  .about-block .cols{padding-top:16px}
  .profile-badge{position:relative; top:0; margin-bottom:12px}
}

#rc-anchor-container {padding-bottom:20px!important;margin-bottom:20px!important;margin-left:-20px;}


/* Títulos globales en páginas y contenido de Gutenberg */
.entry-content h1,
.wp-block-post-content h1,
.page .container-psk h1 {
  font-size: 28px;
  line-height: 1.15;
  font-weight: 800;
}

.entry-content h2,
.wp-block-post-content h2,
.page .container-psk h2,
.wp-block-heading {
  font-size: 28px;
  line-height: 1.2;
  font-weight: 800;
}