/*
Theme Name: Ruth Peñaloza HSEQ
Theme URI: https://ruthpenaloza.co
Author: Ruth Peñaloza
Author URI: https://ruthpenaloza.co
Description: Tema profesional para consultoría HSEQ - Ruth Peñaloza
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: ruthpenaloza
*/

/* =============================================
   VARIABLES Y RESET
   ============================================= */
:root {
    --ink: #1a1a18;
    --ink-light: #4a4a46;
    --ink-muted: #8a8a84;
    --cream: #f7f5f0;
    --warm: #f0ece3;
    --gold: #b8922a;
    --gold-light: #d4aa4a;
    --white: #ffffff;
    --accent: #2c5545;
    --accent-light: #3d7a62;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
    font-family: 'DM Sans', sans-serif;
    background: var(--cream);
    color: var(--ink);
    overflow-x: hidden;
}
img { max-width: 100%; height: auto; }
a { text-decoration: none; }

/* =============================================
   NAV
   ============================================= */
.site-header {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    display: flex; align-items: center; justify-content: space-between;
    padding: 1.25rem 3rem;
    background: rgba(247,245,240,0.92);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(184,146,42,0.15);
}
.site-logo {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.2rem; font-weight: 600; letter-spacing: 0.04em;
    color: var(--ink);
}
.site-logo span { color: var(--gold); }
.main-nav ul { display: flex; gap: 2.5rem; list-style: none; }
.main-nav a {
    font-size: 0.8rem; font-weight: 400; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--ink-light); transition: color 0.2s;
}
.main-nav a:hover { color: var(--gold); }
.nav-cta {
    font-size: 0.78rem; font-weight: 500; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--white);
    background: var(--accent); padding: 0.6rem 1.4rem;
    transition: background 0.2s;
}
.nav-cta:hover { background: var(--accent-light); }

/* =============================================
   HERO
   ============================================= */
.hero {
    min-height: 100vh;
    display: grid; grid-template-columns: 1fr 1fr;
    padding-top: 80px;
}
.hero-left {
    display: flex; flex-direction: column; justify-content: center;
    padding: 5rem 3rem 5rem 4rem;
}
.hero-eyebrow {
    font-size: 0.72rem; font-weight: 500; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--gold);
    margin-bottom: 1.5rem;
    display: flex; align-items: center; gap: 0.75rem;
}
.hero-eyebrow::before { content:''; display:block; width:32px; height:1px; background:var(--gold); }
.hero-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(3rem, 5vw, 4.5rem);
    font-weight: 300; line-height: 1.1; margin-bottom: 0.5rem;
}
.hero-title strong { font-weight: 600; font-style: italic; color: var(--accent); }
.hero-title .name-line { display:block; font-size: clamp(2.2rem, 4vw, 3.5rem); font-weight:600; }
.hero-subtitle {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.25rem; font-weight: 300; font-style: italic;
    color: var(--ink-light); margin: 1.5rem 0 2.5rem; line-height: 1.6; max-width: 420px;
}
.hero-creds { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 3rem; }
.cred-tag {
    font-size: 0.7rem; font-weight: 500; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--accent);
    background: rgba(44,85,69,0.08); padding: 0.35rem 0.85rem;
    border: 1px solid rgba(44,85,69,0.2);
}
.hero-actions { display: flex; gap: 1rem; align-items: center; }
.btn-primary {
    font-size: 0.8rem; font-weight: 500; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--white);
    background: var(--accent); padding: 0.9rem 2rem;
    transition: all 0.2s; display: inline-block;
}
.btn-primary:hover { background: var(--accent-light); transform: translateY(-1px); }
.btn-secondary {
    font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--ink-light); padding: 0.9rem 0;
    border-bottom: 1px solid var(--ink-muted); transition: all 0.2s;
}
.btn-secondary:hover { color: var(--gold); border-color: var(--gold); }
.hero-right {
    position: relative; background: var(--accent);
    display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.hero-right::before {
    content: 'HSEQ'; position: absolute;
    font-family: 'Cormorant Garamond', serif;
    font-size: 18rem; font-weight: 600; color: rgba(255,255,255,0.04);
    top: 50%; left: 50%; transform: translate(-50%,-50%);
    white-space: nowrap; pointer-events: none;
}
.hero-photo-wrap {
    width: 320px; height: 420px;
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
    display: flex; flex-direction: column; align-items: center;
    justify-content: flex-end; padding: 2rem; position: relative; z-index: 1;
    overflow: hidden;
}
.hero-photo-wrap img {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    object-fit: cover; object-position: top;
}
.hero-photo-info {
    position: relative; z-index: 2; text-align: center;
    background: rgba(44,85,69,0.85); width: calc(100% + 4rem);
    margin: 0 -2rem -2rem; padding: 1.25rem 2rem;
}
.photo-name {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.5rem; font-weight: 600; color: white; margin-bottom: 0.3rem;
}
.photo-role { font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.55); }
.hero-stat-bar {
    position: absolute; bottom: 0; left: 0; right: 0;
    display: flex; border-top: 1px solid rgba(255,255,255,0.1);
}
.stat-item { flex:1; padding:1.25rem; border-right:1px solid rgba(255,255,255,0.1); text-align:center; }
.stat-item:last-child { border-right: none; }
.stat-num { font-family:'Cormorant Garamond',serif; font-size:1.8rem; font-weight:600; color:var(--gold-light); display:block; }
.stat-label { font-size:0.65rem; letter-spacing:0.1em; text-transform:uppercase; color:rgba(255,255,255,0.45); display:block; margin-top:2px; }

/* =============================================
   SECCIONES GENERALES
   ============================================= */
.section-pad { padding: 6rem 4rem; }
.section-header { margin-bottom: 3.5rem; }
.section-eyebrow {
    font-size: 0.7rem; font-weight: 500; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--gold);
    display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem;
}
.section-eyebrow::before { content:''; width:24px; height:1px; background:var(--gold); }
.section-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(2rem, 3.5vw, 3rem); font-weight: 300; line-height: 1.2;
}
.section-title em { font-style: italic; color: var(--accent); }

/* =============================================
   SERVICIOS
   ============================================= */
.servicios-section { background: var(--white); }
.servicios-grid {
    display: grid; grid-template-columns: repeat(3,1fr);
    border: 1px solid rgba(26,26,24,0.08);
}
.servicio-card {
    padding: 2.5rem 2rem;
    border-right: 1px solid rgba(26,26,24,0.08);
    border-bottom: 1px solid rgba(26,26,24,0.08);
    transition: background 0.25s; cursor: default;
}
.servicio-card:hover { background: var(--warm); }
.servicio-card:nth-child(3n) { border-right: none; }
.servicio-num { font-family:'Cormorant Garamond',serif; font-size:2.5rem; font-weight:300; color:rgba(184,146,42,0.25); line-height:1; margin-bottom:1rem; }
.servicio-title { font-family:'Cormorant Garamond',serif; font-size:1.25rem; font-weight:600; margin-bottom:0.75rem; line-height:1.3; }
.servicio-desc { font-size:0.82rem; line-height:1.7; color:var(--ink-light); }
.servicio-tag { display:inline-block; margin-top:1.25rem; font-size:0.65rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--accent); border-bottom:1px solid var(--accent); padding-bottom:1px; }

/* =============================================
   DIFERENCIADORES
   ============================================= */
.diferenciadores-section {
    background: var(--ink);
    display: grid; grid-template-columns: 1fr 1fr;
}
.dif-left { padding: 6rem 4rem; border-right: 1px solid rgba(255,255,255,0.08); display:flex; flex-direction:column; justify-content:center; }
.dif-eyebrow { font-size:0.7rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--gold); margin-bottom:1rem; display:flex; align-items:center; gap:0.75rem; }
.dif-eyebrow::before { content:''; width:24px; height:1px; background:var(--gold); }
.dif-title { font-family:'Cormorant Garamond',serif; font-size:clamp(2rem,3vw,2.75rem); font-weight:300; line-height:1.2; color:white; margin-bottom:1.5rem; }
.dif-title em { font-style:italic; color:var(--gold-light); }
.dif-body { font-size:0.9rem; line-height:1.8; color:rgba(255,255,255,0.55); max-width:400px; }
.dif-right { padding: 6rem 4rem; }
.dif-list { list-style: none; }
.dif-item { padding:1.75rem 0; border-bottom:1px solid rgba(255,255,255,0.07); display:flex; gap:1.5rem; align-items:flex-start; }
.dif-item:first-child { padding-top: 0; }
.dif-check { width:20px; height:20px; border:1px solid var(--gold); display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:2px; color:var(--gold); font-size:10px; }
.dif-item-title { font-family:'Cormorant Garamond',serif; font-size:1.1rem; font-weight:600; color:white; margin-bottom:0.3rem; }
.dif-item-desc { font-size:0.8rem; color:rgba(255,255,255,0.45); line-height:1.6; }

/* =============================================
   PROCESO
   ============================================= */
.proceso-section { background: var(--cream); }
.proceso-steps { display:grid; grid-template-columns:repeat(4,1fr); border:1px solid rgba(26,26,24,0.08); }
.proceso-step { padding:2.5rem 2rem; border-right:1px solid rgba(26,26,24,0.08); position:relative; }
.proceso-step:last-child { border-right: none; }
.paso-num { font-family:'Cormorant Garamond',serif; font-size:3rem; font-weight:300; color:rgba(44,85,69,0.15); line-height:1; margin-bottom:1.25rem; }
.paso-title { font-family:'Cormorant Garamond',serif; font-size:1.1rem; font-weight:600; margin-bottom:0.6rem; }
.paso-desc { font-size:0.8rem; line-height:1.7; color:var(--ink-light); }
.paso-arrow { position:absolute; right:-12px; top:50%; transform:translateY(-50%); width:24px; height:24px; background:var(--cream); border:1px solid rgba(26,26,24,0.1); display:flex; align-items:center; justify-content:center; font-size:10px; color:var(--gold); z-index:1; }
.proceso-step:last-child .paso-arrow { display: none; }

/* =============================================
   NORMAS
   ============================================= */
.normas-section { background:var(--warm); padding:4rem; text-align:center; }
.normas-grid { display:flex; flex-wrap:wrap; justify-content:center; gap:1rem; margin-top:2.5rem; }
.norma-badge { font-family:'Cormorant Garamond',serif; font-size:1rem; font-weight:600; padding:0.6rem 1.5rem; background:var(--white); border:1px solid rgba(184,146,42,0.3); color:var(--ink); letter-spacing:0.04em; }
.norma-badge.featured { background:var(--accent); color:white; border-color:var(--accent); }

/* =============================================
   CONTACTO
   ============================================= */
.contacto-section { background:var(--accent); text-align:center; padding:7rem 4rem; position:relative; overflow:hidden; }
.contacto-section::before { content:'CONTACTO'; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-family:'Cormorant Garamond',serif; font-size:14rem; font-weight:600; color:rgba(255,255,255,0.03); letter-spacing:-0.05em; white-space:nowrap; pointer-events:none; }
.contacto-eyebrow { font-size:0.7rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--gold-light); margin-bottom:1rem; }
.contacto-title { font-family:'Cormorant Garamond',serif; font-size:clamp(2rem,4vw,3.5rem); font-weight:300; color:white; margin-bottom:1rem; line-height:1.2; }
.contacto-title em { font-style:italic; }
.contacto-sub { font-size:0.9rem; color:rgba(255,255,255,0.55); margin-bottom:3rem; max-width:480px; margin-left:auto; margin-right:auto; line-height:1.7; }
.contacto-actions { display:flex; justify-content:center; gap:1rem; flex-wrap:wrap; position:relative; z-index:1; }
.btn-light { font-size:0.8rem; font-weight:500; letter-spacing:0.08em; text-transform:uppercase; color:var(--accent); background:var(--white); padding:1rem 2.5rem; transition:all 0.2s; display:inline-block; }
.btn-light:hover { background:var(--cream); }
.btn-outline-light { font-size:0.8rem; font-weight:500; letter-spacing:0.08em; text-transform:uppercase; color:white; background:transparent; padding:1rem 2.5rem; border:1px solid rgba(255,255,255,0.35); transition:all 0.2s; display:inline-block; }
.btn-outline-light:hover { border-color:white; background:rgba(255,255,255,0.06); }

/* =============================================
   FOOTER
   ============================================= */
.site-footer { background:var(--ink); padding:2.5rem 4rem; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; }
.footer-brand { font-family:'Cormorant Garamond',serif; font-size:1rem; color:white; font-weight:600; }
.footer-brand span { color:var(--gold); }
.footer-copy { font-size:0.72rem; color:rgba(255,255,255,0.3); letter-spacing:0.04em; }
.footer-links { display:flex; gap:2rem; }
.footer-links a { font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase; color:rgba(255,255,255,0.4); transition:color 0.2s; }
.footer-links a:hover { color:var(--gold); }

/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 900px) {
    .hero { grid-template-columns: 1fr; }
    .hero-right { min-height: 400px; }
    .servicios-grid { grid-template-columns: 1fr 1fr; }
    .servicio-card:nth-child(3n) { border-right: 1px solid rgba(26,26,24,0.08); }
    .servicio-card:nth-child(2n) { border-right: none; }
    .diferenciadores-section { grid-template-columns: 1fr; }
    .dif-left { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.08); }
    .proceso-steps { grid-template-columns: 1fr 1fr; }
    .section-pad { padding: 4rem 2rem; }
    nav { padding: 1rem 1.5rem; }
    .main-nav { display: none; }
}
@media (max-width: 600px) {
    .servicios-grid { grid-template-columns: 1fr; }
    .proceso-steps { grid-template-columns: 1fr; }
    .hero-left { padding: 3rem 1.5rem; }
    .site-footer { flex-direction: column; text-align: center; padding: 2rem 1.5rem; }
}

/* =============================================
   ANIMACIONES
   ============================================= */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}
.hero-eyebrow  { animation: fadeUp 0.6s ease both 0.1s; }
.hero-title    { animation: fadeUp 0.7s ease both 0.25s; }
.hero-subtitle { animation: fadeUp 0.7s ease both 0.4s; }
.hero-creds    { animation: fadeUp 0.6s ease both 0.55s; }
.hero-actions  { animation: fadeUp 0.6s ease both 0.7s; }