/* ============================================
   Dr. Luis Alejo Pezzutti – Home estático
   Replicado fiel del theme WordPress "Pezzutti"
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap');

/* RESETS */
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,a,code,del,em,img,samp,small,strong,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tr,th,td {margin:0;padding:0;border:0}
article,aside,canvas,figure,figure img,figcaption,hgroup,footer,header,nav,section {display:block}
a img {border:0}
* {box-sizing:border-box}

body {font:76% 'Open Sans', sans-serif; background:#d7dde2; color:#425a6e}

a:link, a:visited {color:#425a6e; text-decoration:none}
a:hover {color:#0a1f31; text-decoration:none}

.clear {height:0; clear:both; overflow:hidden}

/* BACKGROUNDS */
.bgWhite {background:#FFF; clear:both}
.bgHeader {background:#7b8c98; clear:both}
.bgBlue1 {background:#415a6d; clear:both}
.bgBlue2 {background:#7b8c98; clear:both}
.bgBlue3 {background:#9eabb6; clear:both}

/* ===== TOP HEADER ===== */
#topHeader {
  width:1000px; margin:0 auto; padding:8px 0;
  display:flex; align-items:center; justify-content:space-between;
}
#topHeader .contacto {
  padding:0 0 0 22px;
  background:url(img/icMail.png) no-repeat left 4px;
  font-size:1em;
}
#topHeader .contacto a,
#topHeader a {color:#FFF}
#topHeader a:hover {color:#e8edf1}
#topHeader .consul {color:#FFF; font-size:1em}
#topHeader .consul span {margin-right:6px}

/* ===== HEADER / LOGO + NAV ===== */
#header {
  width:1000px; margin:0 auto; padding:20px 0;
  display:flex; align-items:center; justify-content:space-between;
}
#header h1 a {
  width:316px; height:60px;
  background:url(img/pezzutti.png) no-repeat left top;
  background-size:316px;
  display:block; text-indent:-9999px;
}

/* NAV */
#nav {padding-top:10px}
.sf-menu {list-style:none; display:flex; gap:0}
.sf-menu > li {position:relative}
.sf-menu > li > a {
  padding:8px 14px; display:block;
  font-size:1.05em; font-weight:400;
  color:#FFF; text-transform:uppercase;
  letter-spacing:0.03em;
}
.sf-menu > li > a:hover,
.sf-menu > li.current > a {color:#e8edf1}
.sf-menu > li.has-sub > a::after {content:' ▾'; font-size:0.75em}

/* Dropdown */
.sub-menu {
  display:none; position:absolute; top:100%; left:0; z-index:999;
  background:#415a6d; min-width:180px; list-style:none;
  box-shadow:0 4px 12px rgba(0,0,0,0.15);
}
.sub-menu li a {
  display:block; padding:8px 14px; font-size:1em;
  color:#FFF; white-space:nowrap;
}
.sub-menu li a:hover {background:#142c3e; color:#FFF}
.has-sub:hover .sub-menu {display:block}

/* ===== SLIDER ===== */
#slider {margin:0 0 30px 0; border-bottom:1px solid #7b8c98}
.slider-wrap {position:relative; overflow:hidden; background:#1a2e3d}

.slide {display:none; position:relative}
.slide.active {display:block}
.slide img {width:100%; height:auto; display:block; max-height:520px; object-fit:cover}

.slide-caption {
  position:absolute; top:0; left:0; right:0; bottom:0;
  display:flex; flex-direction:column; justify-content:center;
  padding:40px 80px;
  background:linear-gradient(to right, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.1) 60%, transparent 100%);
}
.slide-title {
  font-size:2.2em; font-weight:300; color:#FFF; line-height:1.3;
  margin-bottom:14px; text-shadow:0 2px 8px rgba(0,0,0,0.5);
}
.slide-sub {
  font-size:1.1em; font-weight:300; color:#e8edf1; line-height:1.7;
  margin-bottom:22px; text-shadow:0 1px 4px rgba(0,0,0,0.5);
}
.slide-btn {
  display:inline-block; padding:10px 28px;
  background:#415a6d; color:#FFF !important;
  font-size:1.1em; font-weight:600; text-transform:uppercase;
  letter-spacing:0.05em;
  align-self:flex-start; width:auto;
  transition:background 0.2s;
}
.slide-btn:hover {background:#142c3e !important; color:#FFF}

/* Slider dots */
.slider-dots {
  position:absolute; bottom:14px; left:50%; transform:translateX(-50%);
  display:flex; gap:8px;
}
.dot {
  width:10px; height:10px; border-radius:50%;
  background:rgba(255,255,255,0.5); cursor:pointer;
  transition:background 0.2s;
}
.dot.active {background:#FFF}

/* ===== MAIN / CONTAINER ===== */
#main {margin:0 auto}
.container {width:1000px; margin:0 auto; padding:20px 0}

/* ===== LOGOS ===== */
.logos {margin:0 auto 60px auto; display:flex; align-items:center; flex-wrap:wrap; justify-content:center}
.logos .logo1 {width:8%; margin:0 24px; opacity:.7}
.logos .logo2 {width:9%; margin:0 24px; opacity:.7}
.logos .logo3 {width:9%; margin:0 24px; opacity:.7}
.logos .logo4 {width:12%; margin:0 24px; opacity:.7}
.logos img {width:100%; height:auto; display:block}

/* ===== INFO / BIO ===== */
.info {padding:20px 0 10px}
.info .col1 {width:48%; margin:60px 0 50px 40px; float:left}
.info .col2 {margin:20px 80px 50px 0; float:right}
.info p {margin:0 0 15px 0; font-size:1.2em; line-height:1.6em; text-align:justify}
.info p.pdf {
  padding:6px 0 8px 38px;
  background:url(img/pdf.png) no-repeat left top;
}
.info p.pdf a {color:#415a6d; font-weight:600}
.info .col2 .foto {
  width:294px; height:348px;
  border:1px solid #415a6d;
  background:url(images/dr-pezzutti.jpg) no-repeat center center;
  background-size:cover;
}

/* ===== PROCEDIMIENTOS ===== */
#menuProcedimientos {margin:0 0 40px 0}
#menuProcedimientos .title {
  padding:10px; background:#415a6d; color:#FFF;
  text-align:center; font-size:1.6em; font-weight:300;
  border-bottom:1px solid #d7dde2; border-right:1px solid #d7dde2;
}
#menuProcedimientos ul {list-style-type:none; display:flex; flex-wrap:wrap}
#menuProcedimientos ul li a {
  width:142px; background:#FFF; padding:6px 10px;
  font-size:1.5em; font-weight:300;
  border-bottom:1px solid #d7dde2; border-right:1px solid #d7dde2;
  text-align:center; display:block;
}
#menuProcedimientos ul li a:hover {background:#b2c1cc; color:#FFF}

/* ===== CONSULTORIOS ===== */
.consultorios {padding-bottom:30px}
.consultorios .col1 {width:47%; float:left}
.consultorios .col2 {width:47%; float:right}
.consultorios .boxWhite {margin:0 0 20px 0; background:#fff}
.consultorios .foto {width:100%; height:300px}
.consultorios .foto.foto-belgrano {
  background:url(img/consultorio-belgrano3.png) no-repeat center top;
  background-size:cover;
}
.consultorios .foto.foto-barrio-norte {
  background:url(img/consultorio-barrio-norte3.png) no-repeat center top;
  background-size:cover;
}
.consultorios .data {
  width:75%; padding:4px 6px; font-size:1.15em; float:left;
}
.consultorios .contact {}
.consultorios .contact a {
  display:block; width:20%; padding:5px; font-size:1.1em;
  text-align:center; text-transform:uppercase;
  background:#415a6d; color:#FFF; float:right;
}
.consultorios .contact a:hover {background:#142c3e; color:#FFF}

/* ===== FOOTER ===== */
#footer {
  width:1000px; margin:0 auto; padding:20px 0 60px 0;
  display:flex; align-items:flex-start; justify-content:space-between;
}
#footer .col {flex:1}
#footer .logo {
  width:250px; height:47px;
  background:url(img/pezzutti.png) no-repeat left top;
  background-size:250px;
  display:block; text-indent:-9999px;
  flex-shrink:0;
}
#footer ul {
  padding:5px 0 20px 0; list-style-type:none;
  display:flex; flex-wrap:wrap;
}
#footer ul li {
  margin:0 10px 0 0; padding:0 10px 0 0;
  border-right:1px solid #e8edf1;
  font-size:1.1em; line-height:1.2em; text-transform:uppercase;
}
#footer ul li.last {border-right:none}
#footer ul li a {color:#FFF}
#footer ul li a:hover {color:#e8edf1}
#footer p {
  margin:0 0 8px 0; font-size:1.1em; font-weight:300; color:#e8edf1;
}

/* ===== WHATSAPP FLOAT ===== */
.wa-float {
  position:fixed; bottom:30px; right:20px; z-index:9999;
  display:block;
}
.wa-float img {width:56px; height:56px; display:block}

/* ===== RESPONSIVE ===== */
@media screen and (max-width:1000px) {
  #topHeader, #header, #footer, .container {width:94%}
  #footer .logo {display:none}
  #slider {margin:0 0 20px 0}
}

@media screen and (max-width:767px) {
  #topHeader {flex-direction:column; align-items:flex-start; gap:6px}
  #header {flex-direction:column; align-items:flex-start; gap:12px}
  .sf-menu {flex-wrap:wrap; gap:0}
  .sf-menu > li > a {padding:6px 10px; font-size:0.95em}
  .logos {gap:0}
  .logos .logo1,.logos .logo2,.logos .logo3,.logos .logo4 {margin:0 10px 10px; width:15%}
  .info .col1 {width:55%; margin:20px 0 20px 0}
  .info .col2 {width:38%; margin:20px 0 20px 0}
  .info .col2 .foto {width:100%; height:240px}
  .consultorios .col1, .consultorios .col2 {width:48%}
  .consultorios .data {width:auto; float:none; padding:6px 8px 12px}
  .consultorios .contact a {width:22%}
  #footer {flex-direction:column; gap:16px}
  #footer ul {flex-wrap:wrap}
  #footer ul li {margin:0 8px 8px 0}
  .slide-caption {padding:20px 30px}
  .slide-title {font-size:1.5em}
  .slide-sub {font-size:0.95em}
}

@media screen and (max-width:479px) {
  #slider {display:none}
  .logos .logo1,.logos .logo2,.logos .logo3,.logos .logo4 {width:20%; margin:0 8px 8px}
  .info .col1 {width:auto; float:none; margin:20px 0}
  .info .col2 {width:auto; float:none; margin:0 0 20px}
  .info .col2 .foto {width:100%; height:280px; background-size:100%}
  #menuProcedimientos ul li a {width:auto; display:block; float:none}
  .consultorios .col1, .consultorios .col2 {width:auto; float:none; margin-bottom:20px}
  .consultorios .foto {height:200px}
  .consultorios .data {width:auto; float:none}
  .consultorios .contact a {width:35%}
}

/* ============================================
   SUBPAGES — Procedimientos, Pacientes, etc.
   ============================================ */

/* CONTENT AREA */
#content {width:1000px; margin:0 auto; padding:20px 0 60px 0}
#page, #page2, #page4 {margin:0 0 60px 0}
#page h3 {margin:0 0 20px 0; font-size:1.8em; line-height:1.3em}
#page h4 {margin:0 0 15px 0; font-size:1.6em; line-height:1.4em; font-weight:600}
#page h5 {margin:0 0 15px 0; font-size:1.4em; line-height:1.4em; font-weight:600; color:#415a6d}
#page p, #page2 p, #page4 p {margin:0 0 15px 0; font-size:1.2em; line-height:1.4em; text-align:justify}
#page ul, #page ol {margin:10px 30px 30px 30px}

/* BREADCRUMB */
.bgBlue2 {background:#7b8c98}
.pageTit {width:1000px; margin:0 auto; padding:6px 0}
.pageTit h2 {font-size:1.2em; font-weight:300; color:#FFF}
.pageTit h2 a {color:#fff}
.pageTit h2 a:hover {color:#e8edf1; text-decoration:underline}
.pageTit-inner {margin:0 0 24px 0; padding:0 0 12px 0; border-bottom:1px solid #e0e6eb}
.pageTit-inner h2 {font-size:2em; font-weight:300; color:#415a6d; display:inline-block}
.pageTit-inner h2 span {margin:0 0 0 10px; padding:0 0 0 10px; font-weight:300; font-size:0.8em; border-left:1px solid #b0bec5; color:#7b8c98}

/* TABS */
.su-tabs {margin:0 0 40px 0}
.su-tabs-nav {display:flex; flex-wrap:wrap; margin:0 0 0 0}
.tab-btn {
  padding:8px 16px; background:#FFF; font-size:1.25em; font-weight:300;
  border-bottom:2px solid #d7dde2; border-right:1px solid #d7dde2;
  cursor:pointer; color:#425a6e; transition:background 0.15s;
  user-select:none;
}
.tab-btn:hover {background:#b2c1cc; color:#FFF}
.tab-btn.active {background:#415a6d; color:#FFF; border-bottom-color:#415a6d}
.su-tabs-panes {background:#d7dde2}
.su-tabs-pane {display:none; padding:30px; color:#425a6e}
.su-tabs-pane.active {display:block}
.su-tabs-pane h4 {margin:0 0 14px 0; font-size:1.55em; font-weight:600; color:#415a6d}
.su-tabs-pane h5 {margin:0 0 10px 0; font-size:1.25em; font-weight:600; color:#415a6d}
.su-tabs-pane p {margin:0 0 14px 0; font-size:1.15em; line-height:1.55em; text-align:justify}

/* Procedure hero images inside panes */
.su-tabs-pane .pageColFull,
.su-tabs-pane [class*="cara"],
.su-tabs-pane [class*="nariz"],
.su-tabs-pane [class*="mamas"],
.su-tabs-pane [class*="toxina"],
.su-tabs-pane [class*="contorno"] {height:200px; margin:-30px -30px 24px; background-size:cover; background-position:center}

/* Procedure image helpers */
.cara.pageColFull { background:url(/img/foto-cara.jpg) no-repeat center top; background-size:cover }
.nariz.pageColFull { background:url(/img/foto-nariz.jpg) no-repeat center top; background-size:cover }
.mamas.pageColFull { background:url(/img/foto-mamas.jpg) no-repeat center top; background-size:cover }
.toxina.pageColFull { background:url(/img/foto-toxina.jpg) no-repeat center top; background-size:cover }
.contorno-corporal.pageColFull { background:url(/img/foto-contorno-corporal.jpg) no-repeat center top; background-size:cover }

/* PACIENTES SPOILERS */
.pac-spoiler {
  margin:0 0 12px 0; background:#FFF; border:1px solid #d7dde2;
}
.pac-spoiler-title {
  padding:12px 16px; font-size:1.35em; font-weight:400; cursor:pointer;
  background:#FFF; list-style:none; display:flex; align-items:center;
  justify-content:space-between;
  color:#415a6d;
}
.pac-spoiler-title::after {content:'▸'; color:#7b8c98; transition:transform 0.2s}
.pac-spoiler[open] .pac-spoiler-title::after {transform:rotate(90deg)}
.pac-spoiler-content {padding:16px 24px}
.pac-list {list-style:none; padding:0; margin:0}
.pac-list li {margin:0 0 8px 0}
.pdf-link {
  padding:4px 8px 4px 36px; font-size:1.15em; display:inline-block;
  background:url(/img/pdf.png) no-repeat left center; background-size:24px;
  color:#415a6d;
}
.pdf-link:hover {color:#0a1f31; text-decoration:underline}
.pac-list li em {color:#999; font-size:0.95em}

/* CONSULTORIOS subpage */
.consultorios .data p {margin:4px 0; font-size:1.1em}
.consultorios .data h3 {margin:8px 0 6px; font-size:1.4em; font-weight:400; color:#415a6d}

/* CONTACTO */
.contacto-wrap {display:flex; gap:40px; align-items:flex-start; margin-top:20px}
.contacto-col {flex:1}
.contacto-col h3 {margin:0 0 16px; font-size:1.6em; font-weight:300; color:#415a6d}
.contacto-col p {margin:0 0 12px; font-size:1.2em; line-height:1.5em}
.contacto-list {list-style:none; padding:0; margin:0 0 24px}
.contacto-list li {margin:0 0 10px; font-size:1.15em; line-height:1.4em}
.contacto-list a {color:#415a6d}
.contacto-list a:hover {color:#0a1f31}
.btn-contact {
  display:inline-block; padding:12px 32px;
  background:#415a6d; color:#FFF; font-size:1.15em; font-weight:600;
  text-transform:uppercase; letter-spacing:0.04em;
  transition:background 0.2s;
}
.btn-contact:hover {background:#142c3e; color:#FFF}

/* Consultorio foto */
.foto-belgrano {background:url(/img/consultorio-belgrano3.png) no-repeat center top; background-size:cover}
.foto-barrio-norte {background:url(/img/consultorio-barrio-norte3.png) no-repeat center top; background-size:cover}

/* PDF link in bio/experiencia */
.info p.pdf, #page p.pdf {
  padding:6px 0 8px 38px;
  background:url(/img/pdf.png) no-repeat left center; background-size:24px;
}

/* RESPONSIVE for subpages */
@media screen and (max-width:1000px) {
  #content {width:94%}
  .pageTit {width:94%}
}
@media screen and (max-width:767px) {
  .su-tabs-nav {flex-direction:column}
  .tab-btn {font-size:1.1em; border-right:none; border-bottom:1px solid #d7dde2}
  .tab-btn.active {border-bottom-color:#415a6d}
  .contacto-wrap {flex-direction:column}
  .su-tabs-pane {padding:20px}
}
@media screen and (max-width:479px) {
  #content {width:90%}
  .pageTit {width:90%}
}

/* ===== PROCEDURE BANNERS (above tabs) ===== */
.proc-banner {
  width: 100%; height: 220px;
  background: #b2c1cc no-repeat center center;
  background-size: cover;
  margin-bottom: 0;
}
.banner-cara    { background-image: url(/img/foto-cara.jpg) }
.banner-nariz   { background-image: url(/img/foto-nariz.jpg) }
.banner-mamas   { background-image: url(/img/foto-mamas.jpg) }
.banner-contorno { background-image: url(/img/foto-contorno-corporal.jpg) }
.banner-toxina  { background-image: url(/img/foto-toxina.jpg) }
.banner-rellenos { background-image: url(/img/foto-rellenos.jpg) }

/* Clean up old inline proc images inside panes */
.su-tabs-pane .pageColFull[class*="cara"],
.su-tabs-pane .pageColFull[class*="nariz"],
.su-tabs-pane .pageColFull[class*="mamas"],
.su-tabs-pane .pageColFull[class*="toxina"],
.su-tabs-pane .pageColFull[class*="contorno"] { display: none }

/* ===== TOP HEADER — phones on right ===== */
#topHeader .consul strong { color: #FFF }
#topHeader .consul a { color: #FFF }
#topHeader .consul a:hover { color: #e8edf1 }