: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); }
  .container{max-width:1180px;margin:0 auto;}

  #identidad{ padding:96px 48px; }

  .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-lead{
    font-size:1.15rem;
    color:var(--gray-text);
    max-width:620px;
    line-height:1.6;
    margin:0 0 56px;
  }

  /* ── GRID: tarjetas separadas ── */
  .bento-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:24px;
  }

  .bento-card{
    --accent:#8A6A22;
    position:relative;
    perspective:1400px;
    cursor:pointer;
    min-height:340px;
  }

  .card-inner{
    position:relative;
    width:100%;
    height:100%;
    min-height:340px;
    transform-style:preserve-3d;
    transition:transform .8s cubic-bezier(.35,0,.15,1);
  }
  .bento-card.is-flipped .card-inner{ transform:rotateY(180deg); }

  .card-front,
  .card-back{
    position:absolute;
    inset:0;
    border-radius:6px;
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
    display:flex;
    flex-direction:column;
  }

  /* ── FRENTE ── */
  .card-front{
    background:var(--ivory);
    border:1px solid var(--line);
    align-items:center;
    justify-content:center;
    padding:40px 28px;
    transition:border-color .35s ease, box-shadow .35s ease, transform .35s ease, background .35s ease;
  }
  .bento-card:not(.is-flipped):hover .card-front{
    border-color:var(--accent);
    box-shadow:0 18px 44px rgba(27,34,51,.08);
    transform:translateY(-4px);
    background:var(--ivory-2);
  }

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

  .front-label{
    font-family:var(--font-display);
    font-size:1.5rem;
    font-weight:600;
    letter-spacing:.03em;
    color:var(--navy);
    text-align:center;
    line-height:1.15;
  }
  .front-label span{ font-style:italic; }

  .front-hint{
    margin-top:18px;
    font-family:var(--font-body);
    font-style:italic;
    font-size:.78rem;
    letter-spacing:.1em;
    color:var(--accent);
    text-transform:uppercase;
    opacity:.7;
  }

  /* ── REVERSO ── */
  .card-back{
    transform:rotateY(180deg);
    background:var(--navy);
    border:1px solid var(--navy);
    padding:36px 32px;
    justify-content:space-between;
  }

  .bento-label{
    font-family:var(--font-body);
    font-style:italic;
    font-size:.78rem;
    letter-spacing:.14em;
    color:#D9BD6E;
    text-transform:uppercase;
    padding-bottom:3px;
    border-bottom:1px solid #D9BD6E;
    display:inline-block;
    margin-bottom:18px;
    width:fit-content;
  }

  .bento-card-title{
    font-family:var(--font-display);
    font-size:1.4rem;
    font-weight:600;
    letter-spacing:.02em;
    color:#FBF8F2;
    margin:0 0 14px;
  }

  .bento-card-text{
    font-size:.96rem;
    line-height:1.7;
    color:rgba(251,248,242,.72);
    margin:0;
  }

  .flip-hint{
    font-family:var(--font-display);
    font-size:.68rem;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:#D9BD6E;
    opacity:.6;
    margin-top:18px;
    transition:opacity .3s ease;
  }
  .bento-card.is-flipped:hover .flip-hint{ opacity:1; }

  @media (max-width:1100px){
    .bento-grid{ grid-template-columns:repeat(2,1fr); }
  }
  @media (max-width:580px){
    .bento-grid{ grid-template-columns:1fr; }
    #identidad{ padding:64px 20px; }
    .section-title{ font-size:2.2rem; }
    .bento-card, .card-inner{ min-height:300px; }
  }