:root{
    --navy:#1B2233;
    --ivory:#FBF8F2;
    --ivory-2:#F3EDE1;
    --line:#E4DCC9;
    --gray-text:#6B6458;
    --font-display:'Cormorant SC', serif;
    --font-body:'Cormorant Garamond', serif;
  }
  *{box-sizing:border-box;}
  body{
    margin:0;
    background:var(--ivory);
    font-family:var(--font-body);
    color:var(--navy);
  }
  #principios{
    padding:96px 48px;
    position:relative;
  }
  .container{max-width:1180px;margin:0 auto;}

  .section-eyebrow{
    font-family:var(--font-display);
    font-size:.8rem;
    letter-spacing:.32em;
    text-transform:uppercase;
    color:#8A6A22;
    margin-bottom:14px;
    display:flex;
    align-items:center;
    gap:14px;
  }
  .section-eyebrow::before{
    content:'';
    width:34px;height:1px;
    background:#8A6A22;
    display:inline-block;
  }
  .section-title{
    font-family:var(--font-display);
    font-weight:600;
    font-size:2.9rem;
    letter-spacing:.01em;
    margin:0 0 12px;
    color:var(--navy);
  }
  .section-title em{
    font-style:italic;
    font-family:'Cormorant Garamond', serif;
    font-weight:500;
    color:#8A6A22;
  }
  .section-lead{
    font-size:1.15rem;
    color:var(--gray-text);
    max-width:560px;
    line-height:1.6;
    margin:0 0 56px;
  }

  .principles-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:1px;
    background:var(--line);
    border:1px solid var(--line);
  }

  .principle-card{
    --accent:#8A6A22;
    background:var(--ivory);
    position:relative;
    padding:0;
    cursor:pointer;
    transition:background .35s ease;
  }
  .principle-card:hover{ background:var(--ivory-2); }
  .principle-card.is-active{ background:#fff; }

  .principle-top{
    padding:40px 34px 26px;
    display:flex;
    flex-direction:column;
    gap:18px;
  }

  .principle-icon-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
  }

  .principle-icon{
    width:52px;height:52px;
    border-radius:50%;
    border:1px solid var(--accent);
    display:flex;align-items:center;justify-content:center;
    position:relative;
    transition:transform .5s cubic-bezier(.22,1,.36,1);
  }
  .principle-card:hover .principle-icon{ transform:rotate(-6deg); }
  .principle-icon::after{
    content:'';
    position:absolute;
    inset:-6px;
    border-radius:50%;
    border:1px solid var(--accent);
    opacity:.35;
  }
  .principle-icon svg{
    width:22px;height:22px;
    fill:none;
    stroke:var(--accent);
    stroke-width:1.4;
  }

  .principle-norm-badge{
    font-family:var(--font-body);
    font-style:italic;
    font-size:.78rem;
    letter-spacing:.14em;
    color:var(--accent);
    text-transform:uppercase;
    padding-bottom:3px;
    border-bottom:1px solid var(--accent);
  }

  .principle-title{
    font-family:var(--font-display);
    font-size:1.55rem;
    font-weight:600;
    letter-spacing:.02em;
    color:var(--navy);
    margin:0;
  }
  .principle-subtitle{
    font-size:1.02rem;
    line-height:1.68;
    color:var(--gray-text);
    margin:0;
  }

  .principle-bar{
    height:1px;
    background:var(--line);
    margin:0 34px;
    position:relative;
    overflow:visible;
  }
  .principle-bar-fill{
    position:absolute;
    top:0;left:0;
    height:1px;
    width:0;
    background:var(--accent);
    transition:width 1.2s cubic-bezier(.22,1,.36,1);
  }
  .principle-bar-fill::after{
    content:'';
    position:absolute;
    right:-3px;top:-2.5px;
    width:6px;height:6px;
    border-radius:50%;
    background:var(--accent);
    opacity:0;
    transition:opacity .5s ease .8s;
  }
  .principle-card.bars-on .principle-bar-fill{ width:var(--bar-width,72%); }
  .principle-card.bars-on .principle-bar-fill::after{ opacity:1; }

  .principle-expand{
    max-height:0;
    overflow:hidden;
    padding:0 34px;
    transition:max-height .5s cubic-bezier(.22,1,.36,1), padding .5s;
  }
  .principle-card.is-active .principle-expand{
    max-height:200px;
    padding:22px 34px 34px;
  }
  .principle-detail{
    border-top:1px solid var(--line);
    padding-top:18px;
    display:flex;
    flex-direction:column;
    gap:11px;
  }
  .principle-detail-row{
    display:flex;
    align-items:baseline;
    gap:14px;
    font-size:.92rem;
  }
  .principle-detail-row .dr-label{
    font-family:var(--font-display);
    font-size:.72rem;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:var(--accent);
    min-width:96px;
  }
  .principle-detail-row .dr-val{
    color:var(--navy);
    font-style:italic;
  }

  .principle-chevron{
    position:absolute;
    bottom:20px;
    right:22px;
    width:18px;height:18px;
    color:var(--accent);
    transition:transform .4s cubic-bezier(.34,1.56,.64,1);
  }
  .principle-chevron::before,
  .principle-chevron::after{
    content:'';
    position:absolute;
    background:var(--accent);
  }
  .principle-chevron::before{ top:8px;left:0;width:18px;height:1px; }
  .principle-chevron::after{ top:0;left:8px;width:1px;height:18px; transition:opacity .3s ease; }
  .principle-card.is-active .principle-chevron::after{ opacity:0; }

  .principle-index{
    position:absolute;
    top:38px;right:34px;
    font-family:var(--font-display);
    font-size:.7rem;
    letter-spacing:.1em;
    color:var(--line);
  }

  @media (max-width:900px){
    .principles-grid{ grid-template-columns:repeat(2,1fr); }
  }
  @media (max-width:580px){
    .principles-grid{ grid-template-columns:1fr; }
    #principios{ padding:64px 20px; }
    .section-title{ font-size:2.2rem; }
  }