:root{
    --albero:#F4ECDB; --albero-2:#ECE1C9; --paper:#FBF6EB;
    --ink:#231A13; --ink-soft:#6A5B4C; --ink-faint:#9A8C7B;
    --sangre:#7E2230; --sangre-2:#601824; --oro:#B5893C; --oro-soft:#C9A964;
    --line:rgba(35,26,19,.14); --line-2:rgba(35,26,19,.28);
    --shadow:0 1px 0 rgba(35,26,19,.05), 0 18px 38px -22px rgba(35,26,19,.45);
    --serif:"Source Serif 4",Georgia,serif; --display:"Fraunces",Georgia,serif;
  }
  *{box-sizing:border-box}
  html,body{margin:0}
  body{
    background:var(--albero);
    color:var(--ink);
    font-family:var(--serif);
    font-size:17px; line-height:1.65;
    -webkit-font-smoothing:antialiased;
    background-image:
      radial-gradient(circle at 50% -8%, rgba(181,137,60,.10), transparent 42%),
      repeating-linear-gradient(45deg, rgba(35,26,19,.012) 0 2px, transparent 2px 5px);
  }
  body::before{
    content:""; position:fixed; right:-120px; bottom:-150px; width:620px; height:620px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 165'%3E%3Cg fill='%23231A13'%3E%3Cpath d='M78 56 C62 52 49 44 43 32 C40 25 39 15 41 6 C47 14 53 22 60 29 C66 35 73 41 81 45 C79 49 78 52 78 56 Z'/%3E%3Cpath d='M122 56 C138 52 151 44 157 32 C160 25 161 15 159 6 C153 14 147 22 140 29 C134 35 127 41 119 45 C121 49 122 52 122 56 Z'/%3E%3Cpath d='M68 64 C57 61 47 64 42 72 C50 77 60 77 69 72 Z'/%3E%3Cpath d='M132 64 C143 61 153 64 158 72 C150 77 140 77 131 72 Z'/%3E%3Cpath d='M100 44 C79 44 64 54 60 71 C57 87 62 102 72 114 C79 123 84 130 86 138 C88 147 93 152 100 152 C107 152 112 147 114 138 C116 130 121 123 128 114 C138 102 143 87 140 71 C136 54 121 44 100 44 Z'/%3E%3Cpath d='M82 47 C88 38 94 34 100 34 C106 34 112 38 118 47 C112 43 106 41 100 41 C94 41 88 43 82 47 Z'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat:no-repeat; background-size:contain;
    opacity:.045; pointer-events:none; transform:rotate(-8deg); z-index:0;
  }
  main,header,footer,nav{position:relative; z-index:1}
  ::selection{background:var(--sangre); color:var(--paper)}
  a{color:inherit}
  button{font-family:inherit; cursor:pointer}

  .kicker{font-family:var(--serif); font-weight:600; font-size:11.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--sangre)}
  .ornament{color:var(--oro); font-size:14px; letter-spacing:.4em}

  /* ---- Banner ---- */
  .demo-ribbon{
    background:#15080B; color:var(--oro-soft); text-align:center;
    font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; font-weight:600;
    padding:7px 14px; border-bottom:1px solid rgba(181,137,60,.35);
  }
  .demo-ribbon span{opacity:.7; font-weight:400; text-transform:none; letter-spacing:.04em; font-size:12px; color:var(--paper)}

  article.card{border-top:2px solid transparent; transition:border-color .2s}
  article.card:hover{border-top-color:var(--sangre)}
  article.card .ph{transition:box-shadow .2s}
  article.card:hover .ph{box-shadow:0 10px 24px -14px rgba(35,26,19,.5)}

  /* ---- Masthead ---- */
  header.masthead{
    position:relative; overflow:hidden;
    background:
      radial-gradient(circle at 82% 120%, rgba(181,137,60,.20), transparent 55%),
      linear-gradient(128deg, rgba(22,9,12,.92) 0%, rgba(60,17,25,.82) 48%, rgba(87,22,35,.74) 100%),
      url('https://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Plaza_de_Toros_de_Ronda_Spain_-_Les_ar%C3%A8nes_de_Ronda_Espagne_-_Picture_Image_Photography_%2814749877019%29.jpg/1280px-Plaza_de_Toros_de_Ronda_Spain_-_Les_ar%C3%A8nes_de_Ronda_Espagne_-_Picture_Image_Photography_%2814749877019%29.jpg') center 68%/cover no-repeat;
    background-color:#2A1115;
    color:var(--paper);
    border-bottom:3px solid var(--oro);
    box-shadow:inset 0 -10px 30px rgba(0,0,0,.35);
  }
  header.masthead .head-toro{
    position:absolute; right:-26px; bottom:-44px; width:280px; height:auto;
    opacity:.16; pointer-events:none; transform:rotate(-6deg);
  }
  .masthead-inner{
    max-width:1080px; margin:0 auto; padding:20px 28px 16px;
    display:flex; align-items:flex-end; justify-content:space-between; gap:20px;
  }
  .brand{display:flex; align-items:center; gap:16px; position:relative; z-index:2}
  .brand .emblema{width:56px; height:auto; flex:none; filter:drop-shadow(0 2px 6px rgba(0,0,0,.45))}
  .brand h1{
    font-family:var(--display); font-weight:800; font-size:46px; line-height:.92;
    letter-spacing:-.01em; margin:0; color:var(--paper);
    font-variation-settings:"opsz" 144;
    text-shadow:0 2px 12px rgba(0,0,0,.35);
  }
  .brand .sub{ margin-top:6px; color:var(--oro-soft); font-style:italic; font-size:15px}
  .brand .rule{height:0; border-top:1px solid var(--oro); margin-top:4px; opacity:.7}
  .masthead-right{display:flex; align-items:center; gap:14px; padding-bottom:6px; position:relative; z-index:2}
  .who{font-size:13px; color:rgba(251,246,235,.65); text-align:right; line-height:1.3}
  .who b{color:var(--paper); font-weight:600}
  header.masthead .btn{border-color:var(--oro-soft); color:var(--paper)}
  header.masthead .btn:hover{background:var(--oro-soft); color:#2A1115}
  header.masthead .btn.solid{background:var(--sangre); border-color:var(--oro-soft)}
  header.masthead .btn.solid:hover{background:var(--oro-soft); border-color:var(--oro-soft); color:#2A1115}
  header.masthead .btn.ghost{border-color:rgba(251,246,235,.3); color:rgba(251,246,235,.7)}
  header.masthead .btn.ghost:hover{background:rgba(251,246,235,.12); color:var(--paper)}
  .role-tag{display:inline-block; font-size:10px; letter-spacing:.12em; text-transform:uppercase; font-weight:600; color:var(--paper); background:var(--oro); padding:2px 7px; border-radius:2px; margin-left:6px}
  .role-tag.admin{background:var(--sangre)}

  .btn{
    border:1.5px solid var(--ink); background:transparent; color:var(--ink);
    padding:9px 16px; font-size:12px; letter-spacing:.14em; text-transform:uppercase; font-weight:600;
    border-radius:2px; transition:all .18s ease; white-space:nowrap;
  }
  .btn:hover{background:var(--ink); color:var(--paper)}
  .btn.solid{background:var(--sangre); border-color:var(--sangre); color:var(--paper)}
  .btn.solid:hover{background:var(--sangre-2); border-color:var(--sangre-2)}
  .btn.ghost{border-color:var(--line-2); color:var(--ink-soft); font-size:11px; padding:7px 12px}
  .btn.ghost:hover{background:var(--albero-2); color:var(--ink)}
  .btn.danger:hover{background:var(--sangre); border-color:var(--sangre); color:var(--paper)}

  /* ---- subnav / filters ---- */
  .subnav{max-width:1080px; margin:0 auto; padding:14px 28px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; border-bottom:1px solid var(--line)}
  .subnav .label{font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-faint); margin-right:4px}
  .chip{border:1px solid var(--line-2); background:transparent; color:var(--ink-soft); padding:5px 12px; font-size:13px; border-radius:999px; transition:all .15s}
  .chip:hover{border-color:var(--ink); color:var(--ink)}
  .chip.active{background:var(--ink); border-color:var(--ink); color:var(--paper)}

  main{max-width:1080px; margin:0 auto; padding:34px 28px 80px}

  /* ---- Featured ---- */
  .lead{
    display:grid; grid-template-columns:1.05fr .95fr; gap:34px; align-items:stretch;
    padding-bottom:34px; margin-bottom:10px; border-bottom:2px solid var(--ink);
  }
  .lead .ph{min-height:340px}
  .lead-body{display:flex; flex-direction:column; justify-content:center}
  .lead .meta-line{margin:10px 0 0; color:var(--ink-soft); font-size:14px}
  .lead h2{
    font-family:var(--display); font-weight:500; font-size:42px; line-height:1.04; letter-spacing:-.015em;
    margin:14px 0 0; cursor:pointer;
  }
  .lead h2:hover{color:var(--sangre)}
  .lead .dek{margin:16px 0 0; font-size:18px; color:#3c2f24}
  .lead .byline{margin-top:20px}

  /* photo placeholder = "ruedo" */
  .ph{
    position:relative; border:1px solid var(--line-2); border-radius:3px; overflow:hidden;
    background:
      repeating-radial-gradient(circle at 50% 46%, rgba(126,34,48,.05) 0 1px, transparent 1px 22px),
      radial-gradient(circle at 50% 46%, var(--albero-2), #E3D4B6 78%);
    display:flex; align-items:flex-end; justify-content:center;
  }
  .ph::before{
    content:""; position:absolute; left:50%; top:46%; width:46%; aspect-ratio:1; transform:translate(-50%,-50%);
    border:1px solid rgba(126,34,48,.35); border-radius:50%;
  }
  .ph::after{
    content:""; position:absolute; left:50%; top:46%; width:14%; aspect-ratio:1; transform:translate(-50%,-50%);
    border:1px solid rgba(35,26,19,.30); border-radius:50%;
  }
  .ph .ph-cap{position:relative; z-index:2; margin-bottom:16px; font-size:10.5px; letter-spacing:.26em; text-transform:uppercase; color:var(--ink-soft); background:var(--paper); padding:4px 12px; border:1px solid var(--line-2); border-radius:999px}
  .ph.has-img{background-size:cover; background-position:center}
  .ph.has-img::before,.ph.has-img::after{display:none}
  .ph.has-img .ph-cap{background:rgba(251,246,235,.9)}

  /* ---- Grid ---- */
  .section-head{display:flex; align-items:center; gap:16px; margin:30px 0 22px}
  .section-head h3{font-family:var(--display); font-weight:500; font-size:15px; letter-spacing:.18em; text-transform:uppercase; margin:0}
  .section-head .l{flex:1; height:1px; background:var(--line-2)}

  .grid{display:grid; grid-template-columns:repeat(3,1fr); gap:30px 28px}
  article.card{display:flex; flex-direction:column; opacity:0; transform:translateY(14px); animation:rise .6s cubic-bezier(.2,.7,.2,1) forwards}
  @keyframes rise{to{opacity:1; transform:none}}
  .card .ph{height:172px; margin-bottom:14px}
  .card .ph .ph-cap{margin-bottom:12px; font-size:9.5px}
  .card h4{font-family:var(--display); font-weight:500; font-size:22px; line-height:1.12; letter-spacing:-.01em; margin:8px 0 0; cursor:pointer}
  .card h4:hover{color:var(--sangre)}
  .card .meta-line{color:var(--ink-soft); font-size:13px; margin-top:9px}
  .card .excerpt{font-size:15px; color:#3f3227; margin:11px 0 0; flex:1}
  .card .foot{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:14px; padding-top:12px; border-top:1px solid var(--line)}
  .meta-line .dot{color:var(--oro); margin:0 7px}

  .byline{font-size:13px; color:var(--ink-soft)}
  .byline b{color:var(--ink); font-weight:600; font-style:normal}

  /* trofeo */
  .trofeo{display:inline-flex; align-items:center; gap:7px; font-size:12px; letter-spacing:.04em; color:var(--sangre); font-weight:600}
  .trofeo svg{width:13px; height:13px; fill:var(--sangre)}
  .trofeo .verdict{color:var(--ink-soft); font-weight:500; letter-spacing:.02em}
  .pg{background:var(--sangre); color:var(--paper); padding:2px 9px; border-radius:2px; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; font-weight:600}

  /* desglose por torero */
  .palmares{font-size:12.5px; color:var(--ink-soft); margin:9px 0 0; line-height:1.6}
  .palmares b{color:var(--ink); font-weight:600}
  .palmares .dot{color:var(--oro); margin:0 6px}

  /* filas terna en el formulario */
  .terna-row{display:grid; grid-template-columns:1fr 230px 34px; gap:8px; margin-bottom:8px; align-items:center}
  .terna-row input,.terna-row select{width:100%; padding:10px 12px; border:1px solid var(--line-2); background:var(--paper); font-family:var(--serif); font-size:15px; color:var(--ink); border-radius:3px}
  .terna-row input:focus,.terna-row select:focus{outline:none; border-color:var(--sangre)}
  .terna-row .x-row{width:32px; height:38px; border:1px solid var(--line-2); background:transparent; color:var(--ink-faint); border-radius:3px; font-size:14px}
  .terna-row .x-row:hover{background:var(--sangre); border-color:var(--sangre); color:var(--paper)}
  @media (max-width:560px){ .terna-row{grid-template-columns:1fr 1fr 34px} }

  /* estrellas de ganadería */
  .stars{color:var(--oro); letter-spacing:2px; font-size:14px}
  .stars .off{color:var(--line-2)}

  /* ficha del ganado en el detalle */
  .sec-title{display:flex; align-items:center; gap:14px; margin:34px 0 14px}
  .sec-title h3{font-family:var(--display); font-weight:500; font-size:14px; letter-spacing:.18em; text-transform:uppercase; margin:0; color:var(--sangre)}
  .sec-title .l{flex:1; height:1px; background:var(--line-2)}
  .toro-ficha{border:1px solid var(--line); border-left:3px solid var(--oro); border-radius:3px; padding:13px 16px; margin-bottom:10px; background:rgba(251,246,235,.6)}
  .toro-ficha .t-head{display:flex; flex-wrap:wrap; gap:6px 14px; align-items:baseline; font-size:14px}
  .toro-ficha .t-head .orden{font-family:var(--display); font-weight:600; color:var(--sangre); font-size:16px}
  .toro-ficha .t-head .nombre{font-weight:600; font-size:15.5px}
  .toro-ficha .t-head .dato{color:var(--ink-soft)}
  .toro-ficha .t-premio{display:inline-block; margin-left:auto; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; font-weight:600; color:var(--paper); background:var(--oro); padding:2px 8px; border-radius:2px}
  .toro-ficha .t-val{margin:8px 0 0; font-size:15px; color:#3f3227; font-style:italic}
  .gan-val{border:1px solid var(--line); border-radius:3px; padding:14px 16px; margin-bottom:10px}
  .gan-val .g-head{display:flex; justify-content:space-between; align-items:baseline; gap:10px; flex-wrap:wrap}
  .gan-val .g-head b{font-size:16px}
  .gan-val p{margin:7px 0 0; font-size:15px; color:#3f3227}
  .ficha-extra{font-size:14px; color:var(--ink-soft); line-height:1.7}
  .ficha-extra b{color:var(--ink)}
  .ficha-extra .bloque{margin-bottom:12px; white-space:pre-line}

  /* secciones plegables del formulario */
  details.f-sec{border:1px solid var(--line-2); border-radius:3px; margin-bottom:16px; background:rgba(251,246,235,.5)}
  details.f-sec summary{cursor:pointer; padding:11px 14px; font-size:11px; letter-spacing:.14em; text-transform:uppercase; font-weight:600; color:var(--ink-soft); list-style:none}
  details.f-sec summary::before{content:'▸ '; color:var(--sangre)}
  details.f-sec[open] summary::before{content:'▾ '}
  details.f-sec .f-sec-body{padding:4px 14px 14px}
  .toro-row{border:1px solid var(--line); border-radius:3px; padding:10px; margin-bottom:10px; background:var(--paper)}
  .toro-row .g6{display:grid; grid-template-columns:64px 70px 1fr 90px 80px 1fr; gap:8px; margin-bottom:8px}
  .toro-row .g2{display:grid; grid-template-columns:1fr 200px; gap:8px; margin-bottom:8px}
  .toro-row input,.toro-row select,.toro-row textarea,.cuadrilla-row input,.cuadrilla-row textarea,.gan-row input,.gan-row select,.gan-row textarea{width:100%; padding:9px 11px; border:1px solid var(--line-2); background:var(--paper); font-family:var(--serif); font-size:14.5px; color:var(--ink); border-radius:3px}
  .toro-row textarea,.cuadrilla-row textarea,.gan-row textarea{min-height:54px; resize:vertical}
  .toro-row .rm,.cuadrilla-row .rm,.gan-row .rm{margin-top:6px; font-size:11px; letter-spacing:.08em; text-transform:uppercase; border:none; background:none; color:var(--ink-faint); cursor:pointer}
  .toro-row .rm:hover,.cuadrilla-row .rm:hover,.gan-row .rm:hover{color:var(--sangre)}
  .gan-row{border:1px solid var(--line); border-radius:3px; padding:10px; margin-bottom:10px; background:var(--paper)}
  .gan-row .g2{display:grid; grid-template-columns:1fr 170px; gap:8px; margin-bottom:8px}
  .cuadrilla-row{border:1px solid var(--line); border-radius:3px; padding:10px; margin-bottom:10px; background:var(--paper)}
  .cuadrilla-row .lbl{font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); margin:8px 0 3px}
  @media (max-width:680px){ .toro-row .g6{grid-template-columns:1fr 1fr 1fr} }

  /* subida de fotos y galería */
  .up-row{display:grid; grid-template-columns:auto 1fr; gap:10px; align-items:center}
  input[type=file]{font-size:13px; color:var(--ink-soft)}
  input[type=file]::file-selector-button{border:1.5px solid var(--ink); background:transparent; color:var(--ink); padding:8px 14px; font-family:var(--serif); font-size:11px; letter-spacing:.12em; text-transform:uppercase; font-weight:600; border-radius:2px; cursor:pointer; margin-right:10px}
  input[type=file]::file-selector-button:hover{background:var(--ink); color:var(--paper)}
  .thumbs{display:flex; gap:10px; flex-wrap:wrap; margin-top:10px}
  .thumb{position:relative}
  .thumb img{width:92px; height:68px; object-fit:cover; border-radius:3px; border:1px solid var(--line-2); display:block}
  .thumb button{position:absolute; top:-8px; right:-8px; width:21px; height:21px; border-radius:50%; border:1px solid var(--line-2); background:var(--paper); font-size:10px; line-height:1; cursor:pointer; color:var(--ink-soft)}
  .thumb button:hover{background:var(--sangre); color:var(--paper); border-color:var(--sangre)}
  .galeria{display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:10px; margin-top:4px}
  .galeria img{width:100%; height:150px; object-fit:cover; border-radius:3px; border:1px solid var(--line-2)}
  @media (max-width:560px){ .up-row{grid-template-columns:1fr} }

  /* like y compartir */
  .like-btn{display:inline-flex; align-items:center; gap:5px; border:1px solid var(--line-2); background:transparent; color:var(--ink-soft); padding:5px 11px; border-radius:999px; font-family:var(--serif); font-size:13px; transition:all .15s}
  .like-btn:hover{border-color:var(--sangre); color:var(--sangre)}
  .like-btn.liked{background:var(--sangre); border-color:var(--sangre); color:var(--paper)}
  .like-btn .corazon{font-size:14px; line-height:1}
  .ig-btn{display:inline-flex; align-items:center; gap:7px; border:1.5px solid var(--ink); background:transparent; color:var(--ink); padding:8px 14px; border-radius:2px; font-size:11px; letter-spacing:.12em; text-transform:uppercase; font-weight:600; transition:all .15s}
  .ig-btn:hover{background:linear-gradient(45deg,#7E2230,#B5893C); border-color:transparent; color:var(--paper)}
  .ig-btn svg{width:14px; height:14px; fill:currentColor}
  .dt-acciones{display:flex; align-items:center; gap:8px; flex-wrap:wrap}

  .card-actions{display:flex; gap:6px}

  /* ---- Overlays ---- */
  .overlay{position:fixed; inset:0; background:rgba(35,26,19,.55); backdrop-filter:blur(3px); z-index:50; display:none; align-items:flex-start; justify-content:center; overflow-y:auto; padding:48px 20px}
  .overlay.open{display:flex; animation:fade .2s ease}
  @keyframes fade{from{opacity:0}to{opacity:1}}
  .sheet{background:var(--paper); width:100%; max-width:760px; border-radius:4px; box-shadow:var(--shadow); border:1px solid var(--line-2); animation:pop .26s cubic-bezier(.2,.7,.2,1)}
  @keyframes pop{from{transform:translateY(16px); opacity:0}to{transform:none; opacity:1}}
  .sheet.narrow{max-width:440px}
  .sheet-x{position:sticky; top:0; display:flex; justify-content:flex-end; padding:12px 14px 0}
  .x-btn{width:34px; height:34px; border-radius:50%; border:1px solid var(--line-2); background:var(--paper); font-size:17px; line-height:1; color:var(--ink-soft)}
  .x-btn:hover{background:var(--ink); color:var(--paper); border-color:var(--ink)}

  /* detail */
  .detail{padding:6px 56px 52px}
  .detail .ph{height:300px; margin:8px 0 26px}
  .detail .meta-line{color:var(--ink-soft); font-size:14px}
  .detail h2{font-family:var(--display); font-weight:500; font-size:40px; line-height:1.05; letter-spacing:-.015em; margin:14px 0 0}
  .detail .meta-block{display:flex; flex-wrap:wrap; gap:18px 30px; margin:22px 0; padding:18px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
  .mb{min-width:90px}
  .mb .k{font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint)}
  .mb .v{font-size:15.5px; margin-top:3px}
  .detail .body{font-size:18.5px; line-height:1.78}
  .detail .body p{margin:0 0 18px}
  .detail .body p:first-of-type::first-letter{font-family:var(--display); font-weight:500; font-size:64px; line-height:.7; float:left; padding:6px 12px 0 0; color:var(--sangre)}
  .detail .dt-foot{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:30px; padding-top:18px; border-top:2px solid var(--ink)}

  /* forms */
  .form{padding:8px 56px 48px}
  .form h2{font-family:var(--display); font-weight:500; font-size:30px; margin:0 0 4px}
  .form .hint{color:var(--ink-soft); font-style:italic; margin:0 0 24px; font-size:15px}
  .field{margin-bottom:18px}
  .field label{display:block; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:6px; font-weight:600}
  .field input,.field select,.field textarea{
    width:100%; padding:11px 13px; border:1px solid var(--line-2); background:var(--paper);
    font-family:var(--serif); font-size:16px; color:var(--ink); border-radius:3px; transition:border-color .15s;
  }
  .field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--sangre)}
  .field textarea{resize:vertical; min-height:150px; line-height:1.6}
  .field .sub{font-size:12.5px; color:var(--ink-faint); margin-top:5px}
  .row2{display:grid; grid-template-columns:1fr 1fr; gap:16px}
  .form-actions{display:flex; gap:10px; justify-content:flex-end; margin-top:26px; padding-top:18px; border-top:1px solid var(--line)}

  /* login */
  .login{padding:6px 40px 40px; text-align:center}
  .login .ornament{display:block; margin-bottom:8px}
  .login h2{font-family:var(--display); font-weight:500; font-size:26px; margin:0 0 4px}
  .login p{color:var(--ink-soft); font-size:14px; margin:0 0 22px}
  .login .field{text-align:left}
  .login .note{font-size:12px; color:var(--ink-faint); margin-top:18px; line-height:1.5}
  .login .note code{background:var(--albero-2); padding:1px 6px; border-radius:3px; font-size:12px}

  footer{
    border-top:3px solid var(--oro);
    background:linear-gradient(115deg, #1E0D11, #3C1119 60%, #4A131D);
    color:rgba(251,246,235,.65);
  }
  .foot-inner{max-width:1080px; margin:0 auto; padding:26px 28px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; font-size:13px}
  .foot-inner strong{color:var(--paper)}
  .foot-inner .ornament{font-size:13px; color:var(--oro-soft)}

  @media (max-width:820px){
    .lead{grid-template-columns:1fr; gap:22px}
    .lead .ph{min-height:220px}
    .grid{grid-template-columns:1fr 1fr}
    .brand h1{font-size:38px}
    .detail,.form{padding-left:26px; padding-right:26px}
    .row2{grid-template-columns:1fr}
  }
  @media (max-width:560px){
    .grid{grid-template-columns:1fr}
    .masthead-inner{flex-direction:column; align-items:flex-start}
    .masthead-right{padding-bottom:0}
  }
  @media (prefers-reduced-motion:reduce){
    *{animation:none !important}
    article.card{opacity:1; transform:none}
  }