/* ---------- TIPOGRAFÍA ---------- */
@font-face {
  font-family: "Trajan Pro";
  src: url("../fonts/TrajanPro-Regular.woff2") format("woff2"),
       url("../fonts/TrajanPro-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---------- VARIABLES ---------- */
:root{
  --bg-main: #f3e4d4;
  --bg-card: #fbf4ed;
  --porous: radial-gradient(circle at 0 50%, rgba(255,255,255,.7), transparent 40%);
  --porous-r: radial-gradient(circle at 100% 50%, rgba(255,255,255,.7), transparent 40%);
  --text-main: #2f2848;
  --accent: #a48343;
  --navy: #222447;
  --footer: #151731;
  --white: #ffffff;
  --border-soft: rgba(164,131,67,.3);
  --shadow-soft: 0 20px 45px rgba(0,0,0,.18);
}

/* ---------- RESET BÁSICO ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}

/* Se integra la imagen de textura ósea real */
body{
  margin:0;
  font-family:"Trajan Pro","Times New Roman",serif;
  color:var(--text-main);
  background-color: var(--bg-main);
  background-image: url('../img/textura-hueso-bg.png'); 
  background-size: cover;
  background-attachment: fixed;
  background-blend-mode: multiply; 
}

/* Fallback de CSS puro por si la imagen falla o tarda */
@supports not (background-blend-mode: multiply) {
  body {
    background: var(--porous), var(--porous-r), var(--bg-main);
  }
}

/* ---------- CONTENEDOR GENERAL ---------- */
.page-frame{
  max-width:1400px;
  margin:0 auto 1.5rem;
  background: linear-gradient(to bottom,#f9eee0,#f4e5d6);
  box-shadow:var(--shadow-soft);
  border-radius:0 0 12px 12px;
  overflow:hidden;
}

/* ---------- ACCESIBILIDAD ---------- */
.skip-link {
  position: absolute;
  top: -50px;
  left: 0;
  background: var(--navy);
  color: var(--white);
  padding: 12px 24px;
  font-weight: bold;
  z-index: 100;
  transition: top 0.2s ease-out;
  border-bottom-right-radius: 6px;
}

.skip-link:focus {
  top: 0;
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* ---------- UTILIDADES ---------- */
img{max-width:100%; display:block}
a{text-decoration:none; color:inherit}
p{margin:0}

/* ---------- TOPBAR ---------- */
.topbar{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  padding:1.2rem 2.4rem 1rem;
  column-gap:2rem;
}

.brand-mark{
  font-size:2.6rem;
  color:var(--navy);
  min-height: 52px; 
}

.brand-mark img{
  display:block;
  width:auto;
  height:72px;
}

.nav{
  display:flex;
  justify-content:center;
  gap:1.5rem;
  font-size:.85rem;
  letter-spacing:.14em;
}

.nav a{
  padding-bottom:.35rem;
  border-bottom:2px solid transparent;
  transition: border-bottom-color 0.2s ease;
}

.nav a.active,
.nav a:hover{
  border-bottom-color:var(--navy);
}

/* Ajuste de altura del logo a 80px */
.logo-slot img {
  height: 80px; 
  width: auto;
}

/* ---------- HERO ---------- */
.hero{
  display:grid;
  grid-template-columns: minmax(140px, 0.95fr) minmax(320px, 2fr);
  padding:1.5rem 2.4rem 2.2rem;
  column-gap:1.8rem;
  align-items:center;
}

.hero-left{
  display:flex;
  justify-content:flex-start;
}

.monogram {
  display: flex;
  justify-content: center;
  align-items: center;
}

.monogram img {
  max-width: 100%;
  height: auto;
  max-height: 280px;         
  filter: drop-shadow(6px 9px 16px rgba(0,0,0,0.35));
  border-radius: 4px;        
}

.hero-center{
  text-align:center;
}

.hero-center h1{
  margin:0;
  font-size:clamp(2.4rem, 3.8vw, 3.6rem);
  letter-spacing:.04em;
  font-weight:400;
}

.subtitle{
  margin:.8rem 0 0;
  font-size:clamp(1.1rem, 1.8vw, 1.45rem);
  letter-spacing:.26em;
  color:var(--accent);
}

.divider{
  width:75%;
  max-width:540px;
  height:1px;
  background:var(--accent);
  margin:1.4rem auto 0;
  position:relative;
}

.divider::after{
  content:"";
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--navy);
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
}

/* ---------- FEATURES ---------- */
.features{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  margin:2.1rem auto 0;
  max-width:620px;
}

.features article{
  padding:.3rem .6rem;
  border-right:1px solid rgba(164,131,67,.45);
}

.features article:last-child{border-right:none}

.features .icon{
  display:flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto 0.8rem;
  width: 60px;
  height: 60px;
  border: 1px solid var(--accent);
  border-radius: 50%;
  color:var(--navy);
}

.features .icon svg {
  width: 28px;
  height: 28px;
  stroke: var(--navy);
}

.features h2{
  margin:0;
  font-size:.96rem;
  letter-spacing:.16em;
  font-weight:400;
}

.license{
  margin:1.7rem 0 0;
  font-size:.9rem;
  letter-spacing:.18em;
}

/* ---------- GRID DE SERVICIOS ---------- */
.services-grid{
  padding:1.2rem 2.4rem 2rem;
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:1.2rem;
}

.service-card,
.about-card{
  background:var(--bg-card);
  border:1px solid var(--border-soft);
  height: 100%;
  padding:2.4rem 2.2rem;
}

.service-card header{
  text-align:center;
}

.mini-nav{
  font-size:.7rem;
  letter-spacing:.18em;
  margin-bottom:1.1rem;
  color:#7b6a50;
}

.service-card h2{
  margin:0;
  font-size:2.1rem;
  letter-spacing:.06em;
}

.small-divider{
  width:80px;
  height:1px;
  background:var(--accent);
  margin:1rem auto .8rem;
  position:relative;
}

.small-divider::after{
  content:"";
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--accent);
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
}

.service-card h3{
  margin:0;
  font-size:1.18rem;
  letter-spacing:.12em;
}

.service-card ul{
  margin:1.8rem auto 0;
  padding-left:1.4rem;
  max-width:520px;
  font-size:1rem;
  line-height:2;
}

.note{
  margin:.35rem 0 0;
  font-size:.9rem;
  text-align:center;
}

.service-card--wide{
  grid-column:1 / -1;
}

/* ---------- SOBRE MÍ ---------- */
.about-card{
  grid-column:1 / -1;
}

.about-card header{
  text-align:center;
}

.about-card h2{
  margin:0;
  font-size:2.1rem;
  letter-spacing:.06em;
}

.about-layout{
  display:grid;
  grid-template-columns: 1.8fr 0.7fr; 
  gap:2rem;
  margin-top:1.8rem;
}

.about-text p{
  margin:.7rem 0 0;
  line-height:1.8;
}

.license-inline{
  margin-top:1.2rem;
  font-size:.9rem;
  letter-spacing:.16em;
}

.about-photo img{
  width: 100%;
  height: auto;
  max-height: 320px;        
  object-fit: contain;      
  border-radius: 4px;
  border-bottom: 4px solid var(--accent);
  box-shadow: var(--shadow-soft);
}

/* ---------- FOOTER CONTACTO ---------- */
.contact-bar{
  background:var(--footer);
  color:var(--white);
  padding:1.4rem 2rem 1.6rem;
}

.contact-inner{
  display:grid;
  grid-template-columns:1.25fr repeat(4, minmax(0,1fr));
  gap:1.2rem;
  align-items:center;
}

.contact-item{
  display:flex;
  align-items:center;
  gap:.9rem;
  font-size:.86rem;
}

.contact-item--qr .qr-slot{
  width:76px;
  height:76px;
  background:var(--white);
  color:#111;
  display:grid;
  place-items:center;
  font-size:.8rem;
}

/* ===== CORRECCIÓN DEL QR ===== */
.contact-item--qr .qr-slot img {
  width: 100%;
  height: 100%;
  object-fit: contain;   /* Evita deformación y mantiene legibilidad */
  display: block;
}

.contact-icon{
  width:42px;
  height:42px;
  border-radius:50%;
  background:rgba(255,255,255,.1);
  display:flex;
  justify-content: center;
  align-items: center;
  font-size:.9rem;
}

.contact-label{
  font-size:.88rem;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.contact-text{
  margin-top:.2rem;
  font-size:.78rem;
  line-height:1.35;
  color: #ccc;
}

.contact-item,
.nav a,
.whatsapp-float{
  min-height:48px;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1100px){
  .topbar{
    grid-template-columns:1fr;
    row-gap:1rem;
    text-align:center;
  }

  .hero{
    grid-template-columns:1fr;
    text-align:center;
  }

  .hero-left{
    justify-content:center;
  }

  .services-grid{
    grid-template-columns:1fr;
  }

  .service-card--wide{
    grid-column:auto;
  }

  .about-layout{
    grid-template-columns:1fr;
  }

  .contact-inner{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }
}

@media (max-width: 720px){
  .page-frame{
    margin:0;
    border-radius:0;
    box-shadow:none;
  }

  .topbar{
    padding:1rem 1.2rem .6rem;
  }
  
  .logo-slot img {
    height: 60px;
  }

  .nav{
    flex-wrap:wrap;
    gap:.8rem;
    font-size:.7rem;
    justify-content: center;
  }

  .hero{
    padding:1.2rem 1.4rem 1.6rem;
  }

  .features {
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 1.5rem 1rem;
    border: none;
  }
  
  .features article {
    border-right: none;
  }

  .services-grid{
    padding:1rem 1.4rem 1.6rem;
  }

  .service-card,
  .about-card{
    padding:1.8rem 1.4rem;
    height:auto;
  }

  .about-layout{
    gap:1.4rem;
  }

  .contact-bar{
    padding:1.1rem 1.3rem 1.4rem;
  }

  .contact-inner{
    grid-template-columns:1fr;
  }
  
  .contact-item--qr {
    display: none;
  }

  .monogram img {
    max-height: 180px;
  }
}

/* ---------- BOTÓN FLOTANTE WHATSAPP ---------- */
.whatsapp-float{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:40;
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  padding:.65rem 1.1rem;
  background:#25d366;
  color:#fff;
  border-radius:999px;
  box-shadow:0 8px 22px rgba(0,0,0,.35);
  font-size:.9rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  cursor:pointer;
  transition:
    transform .18s ease-out,
    box-shadow .18s ease-out,
    background-color .18s ease-out,
    opacity .18s ease-out;
}

.whatsapp-icon{
  width:32px;
  height:32px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.85);
  display:flex;
  justify-content: center;
  align-items: center;
  font-size:.78rem;
  font-weight:600;
}

.whatsapp-text{
  white-space:nowrap;
}

.whatsapp-float:hover,
.whatsapp-float:focus-visible{
  background:#1ebe5b;
  transform:translateY(-2px) scale(1.03);
  box-shadow:0 12px 30px rgba(0,0,0,.45);
  outline:2px solid rgba(255,255,255,.9);
  outline-offset:3px;
}

.whatsapp-float:active{
  transform:translateY(0) scale(.98);
  box-shadow:0 4px 14px rgba(0,0,0,.4);
}

@media (max-width: 720px){
  .whatsapp-float{
    right:14px;
    bottom:14px;
    padding:.6rem .9rem;
    font-size:.82rem;
  }

  .whatsapp-icon{
    width:30px;
    height:30px;
    font-size:.72rem;
  }

  @media (max-width: 420px){
    .whatsapp-text{
      display:none;
    }
    .whatsapp-float{
      padding:.6rem;
    }
  }
}